@charset "UTF-8";

.header_nav_title.company::after {
  width: 100%;
}

.crm--header {
  background-color: #fff;
}

.row-reverse {
  flex-direction: row-reverse;
}

/* mv
====================================== */
.kv {
  position: relative;
  margin-top: 100px;
}
.kv_wrap {
  width: calc(100% - 60px);
  max-width: 1600px;
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
}
.kv_title {
  font-family: "EB Garamond", serif;
  font-size: 48px;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3),
    0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3),
    0px 0px 10px rgba(0, 0, 0, 0.3);
}
.kv_text {
  font-size: 24px;
  letter-spacing: 0.05em;
  margin-top: 10px;
  color: #fff;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3),
    0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3),
    0px 0px 10px rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width: 768px) {
  .kv {
    margin-top: 73px;
  }
  .kv_wrap {
    width: calc(100% - 40px);
    top: 40%;
  }
  .kv_title {
    font-family: "EB Garamond", serif;
    font-size: 22px;
  }
  .kv_text {
    font-size: 16px;
    margin-top: 10px;
  }
}

/* contents_area
=========================== */
.contents_area {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  border-top: 1px solid #1d569e;
  overflow: hidden;
}
.contents_bg {
  background-color: #1d569e;
  color: #fff;
}
.contents_wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  column-gap: 30px;
}
.contents_body {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}
.contents_img {
  width: 100%;
  max-width: 925px;
}
.contents_img figure {
  border-bottom: 10px solid #1d569e;
}
.contents_title {
  font-size: 40px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: #103666;
}
.contents_bg .contents_title {
  color: #fff;
}
.contents_text {
  margin-top: 66px;
}
.contents_link {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
.contents_link .readmore-btn {
  max-width: 600px;
  margin-inline: auto;
  font-size: 24px;
  letter-spacing: 0.1em;
}
.contents_link .readmore-btn .arrow {
  padding-block: 21px;
}
.contents_bg .contents_link .readmore-btn {
  background-color: #fff;
  color: #1d569e;
  border: 1px solid #1d569e;
}
.contents_bg .contents_link .readmore-btn::before {
  background-color: #1d569e;
}
.contents_bg .contents_link .readmore-btn .arrow {
  border-left: 1px solid #1d569e;
}

@media only screen and (min-width: 769px) {
  .projectlist_link .readmore-btn:hover {
    color: #fff;
    border: 1px solid #fff;
  }
  .projectlist_link .readmore-btn:hover {
    color: #fff;
    border: 1px solid #fff;
  }
  .projectlist_link .readmore-btn:hover .arrow {
    border-color: #fff;
  }
  
}

@media only screen and (max-width: 768px) {
  .contents_area {
    padding-top: 0px;
    padding-bottom: 60px;
  }
  .contents_wrap {
    flex-direction: column-reverse;
    row-gap: 20px;
  }
  .contents_body {
    row-gap: 20px;
  }
  .contents_img {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .contents_img figure {
    border-bottom: 5px solid #1d569e;
  }
  .contents_title {
    font-size: 22px;
  }
  .contents_text {
    margin-top: 20px;
  }
  .contents_link {
    row-gap: 10px;
  }
  .contents_link .readmore-btn {
    font-size: 16px;
    letter-spacing: 0.1em;
  }
  .contents_link .readmore-btn .arrow {
    padding-block: 16px;
  }
}

/* contents01
============================= */
.contents01::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 90%;
  height: 90%;
/*  background: url(../images/contents01_bg.png) no-repeat center center / cover;*/
  z-index: -1;
}
.main_title {
  max-width: 1020px;
  margin-inline: auto;
  margin-bottom: 60px;
}
.contents01 .section_text {
  text-align: center;
}

@media only screen and (max-width: 768px) {
  .contents01 {
    padding-top: 60px;
  }
  .contents01::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 60%;
  }
  .main_title {
    width: 90%;
    margin-bottom: 60px;
  }
  .contents01 .section_text {
    line-height: 2;
  }
}

/* contents02
============================= */
.contents02 {
  background-color: #fafafa;
}
.contents02 .contents_body {
  justify-content: space-between;
}

/* contents03
============================= */
.contents03::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20%;
  height: 90%;
/*  background: url(../images/contents03_bg.png) no-repeat center center / cover;*/
}
.contents03 .contents_body {
  justify-content: space-between;
}

@media only screen and (max-width: 768px) {
  .contents03::before {
    top: 44%;
    bottom: auto;
    left: 0;
    width: 50%;
    height: 90%;
/*    background: url(../images/contents03_bg.png) no-repeat left center / cover;*/
  }
}

/* contents04
============================= */
.contents04 .contents_body {
  row-gap: 120px;
}

@media only screen and (max-width: 768px) {
  .contents04 .contents_body {
    row-gap: 20px;
  }
}

/* contents05
============================= */
.contents05 .contents_body {
  row-gap: 120px;
}
.contents05::before {
  content: "";
  position: absolute;
  top: 80px;
  right: -50px;
  width: 80%;
  height: 100%;
/*  background: url(../images/contents05_bg.png) no-repeat center center / cover;*/
}

@media only screen and (max-width: 768px) {
  .contents05 .contents_body {
    row-gap: 20px;
  }
  .contents05::before {
    content: "";
    position: absolute;
    top: 45%;
    right: 0px;
    width: 100%;
    height: 100%;
/*    background: url(../images/contents05_bg.png) no-repeat center right / cover;*/
  }
}

/* contents_bottom
============================= */
.contents_bottom {
  position: relative;
  width: 100%;
  height: 500px;
  background: url(../images/contents_bottom_pc.jpg) no-repeat center center /
    cover;
}
.contents_bottom_wrap {
  width: calc(100% - 40px);
  margin-inline: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3),
    0px 0px 10px rgba(255, 255, 255, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.3),
    0px 0px 10px rgba(255, 255, 255, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.3),
    0px 0px 10px rgba(255, 255, 255, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.3),
    0px 0px 10px rgba(255, 255, 255, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.3),
    0px 0px 10px rgba(255, 255, 255, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.3);
}
.contents_bottom_title {
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}
.contents_bottom_text {
  margin-top: 30px;
}

@media only screen and (max-width: 768px) {
  .contents_bottom {
    height: 340px;
    background: url(../images/contents_bottom_sp.jpg) no-repeat bottom center /
      cover;
  }
  .contents_bottom_wrap {
    top: 16%;
    left: 50%;
    transform: translate(-50%, 0%);
  }
  .contents_bottom_title {
    width: 80%;
  }
  .contents_bottom_text {
    margin-top: 20px;
  }
}