@charset "UTF-8";
/* -------------------------------------
カラー
------------------------------------- */
.c-page_mv.--img {
  background-image: url(../img/about/mv_bg.webp?260226);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.catch-box {
  position: relative;
  height: 37rem;
}

.concept-inner {
  padding-block: 15rem 11.5rem;
}
@media screen and (max-width: 768px) {
  .concept-inner {
    padding-block: 10rem 5.5rem;
  }
}

.catch-text {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row-reverse;
  gap: 1.5rem;
}
.catch-text p {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-size: 3.2rem;
  line-height: 1.4;
  letter-spacing: 0.5em;
}
.catch-text p:last-child {
  margin-top: 9.5rem;
}

html:lang(en) .catch-text p {
  letter-spacing: 0.05em;
}

.concept-cnt {
  padding-top: 6.3rem;
  padding-bottom: 8.9rem;
  border-bottom: 1px solid #C0BBB3;
}

.concept-block {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .concept-block {
    gap: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .concept-block {
    flex-direction: column;
  }
}
.concept-block + .concept-block {
  margin-top: 11rem;
}
@media screen and (max-width: 768px) {
  .concept-block + .concept-block {
    margin-top: 6rem;
  }
}

.concept-textArea {
  padding-top: 3.3rem;
  width: 48.9rem;
}
@media screen and (max-width: 768px) {
  .concept-textArea {
    width: 100%;
  }
}

.concept-ttl {
  font-size: 3rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-weight: 400;
}

.concept-text {
  line-height: 2;
  color: #1D0909;
  margin-top: 4.4rem;
}
@media screen and (max-width: 768px) {
  .concept-text {
    margin-top: 2.4rem;
  }
}

.concept-img {
  width: 65rem;
  height: 52rem;
  aspect-ratio: 65/52;
}
@media screen and (max-width: 768px) {
  .concept-img {
    width: 100%;
    height: auto;
  }
}
.concept-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.material-inner {
  padding-block: 11.5rem 20.1rem;
}
@media screen and (max-width: 768px) {
  .material-inner {
    padding-block: 5.5rem 10rem;
  }
}

.material-cnt {
  margin-top: 9.9rem;
}
@media screen and (max-width: 768px) {
  .material-cnt {
    margin-top: 5rem;
  }
}

.material-sec {
  position: relative;
  display: flex;
  gap: 9.3rem;
}
@media screen and (max-width: 768px) {
  .material-sec {
    flex-direction: column-reverse;
    gap: 1.3rem;
  }
}
.material-sec + .material-sec {
  margin-top: 18.7rem;
}
@media screen and (max-width: 768px) {
  .material-sec + .material-sec {
    margin-top: 10.7rem;
  }
}

.material-sec_inner {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .material-sec_inner {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}

.material-textArea {
  width: 62.5rem;
}
@media screen and (max-width: 1024px) {
  .material-textArea {
    width: 90%;
    left: auto;
    right: 2.5%;
  }
}
@media screen and (max-width: 768px) {
  .material-textArea {
    position: static;
    width: calc(100% - 6rem);
    margin-inline: auto;
  }
}

.material-sec_num {
  font-weight: 300;
  font-size: 4rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.material-sec_ttl {
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-top: 2.3rem;
}

.material-text {
  line-height: 2;
  margin-top: 5.2rem;
}
@media screen and (max-width: 768px) {
  .material-text {
    margin-top: 2.4rem;
  }
}

.material-img_main {
  width: 62.2rem;
  height: 72rem;
  aspect-ratio: 62.2/72;
}
@media screen and (max-width: 1024px) {
  .material-img_main {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .material-img_main {
    width: 80%;
    height: auto;
    margin-top: 2rem;
  }
}
.material-img_main img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.material-img_sub {
  width: 31rem;
  height: 24.1rem;
  aspect-ratio: 31/24.1;
  margin-top: 8rem;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  .material-img_sub {
    position: static;
    width: 50%;
    height: auto;
    margin-top: 2rem;
    margin-left: auto;
  }
}
.material-img_sub img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.material-inner_wide {
  width: 100%;
  max-width: 144rem;
  margin-inline: auto;
}
.service-cnt {
  margin-top: 8.4rem;
}

.service-sec + .service-sec {
  padding-top: 5.8rem;
  border-top: 1px solid #C0BBB3;
}
.service-sec:not(:last-child) {
  padding-bottom: 6.8rem;
}

.service-flex {
  display: flex;
  gap: 5.5rem;
}
@media screen and (max-width: 768px) {
  .service-flex {
    flex-direction: column-reverse;
  }
}

.service-img {
  width: 52.2rem;
  height: 36rem;
  aspect-ratio: 52.2/36;
}
@media screen and (max-width: 768px) {
  .service-img {
    width: 100%;
    height: auto;
  }
}
.service-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.service-textArea {
  width: 57.2rem;
}
@media screen and (max-width: 768px) {
  .service-textArea {
    width: 100%;
  }
}

.service-sec_ttl {
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .service-sec_ttl {
    font-size: 2.8rem;
  }
}

.service-sec_ttl2 {
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.service-sec_ttl2 .--main {
  display: block;
  font-size: 2.8rem;
}
.service-sec_ttl2 .--sub {
  display: block;
  font-size: 2rem;
}

.service-sec_subttl {
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  .service-sec_subttl {
    font-size: 2.2rem;
  }
}

.service-text {
  line-height: 2;
  margin-top: 2.7rem;
}

.service-btn_block {
  margin-top: 2.5rem;
  display: flex;
  gap: 3.3rem;
}
@media screen and (max-width: 768px) {
  .service-btn_block {
    flex-direction: column;
    align-items: center;
    gap: 1.3rem;
  }
}

.service-btn {
  width: 25rem;
  height: 6rem;
}
@media screen and (max-width: 768px) {
  .service-btn {
    height: 5rem;
  }
}

.service-topic {
  width: calc(100% - 11rem);
  margin-top: 7.2rem;
  margin-inline: auto;
  border: 1px solid #C0BBB3;
  padding: 6.4rem 7.4rem 6.8rem 7.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .service-topic {
    width: 100%;
    flex-direction: column;
    padding: 6rem 3rem 6.4rem 3rem;
  }
}

.service-topic_ttl {
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .service-topic_ttl {
    font-size: 2rem;
  }
}

.service-topic_text {
  width: 56.1rem;
  margin-top: 2.8rem;
  line-height: 2;
  letter-spacing: 0.11em;
}
@media screen and (max-width: 768px) {
  .service-topic_text {
    width: 100%;
  }
}

.service-topic_btn {
  width: 25rem;
  height: 6rem;
}
@media screen and (max-width: 768px) {
  .service-topic_btn {
    height: 5rem;
    margin-top: 2rem;
  }
}

.biei-inner {
  padding-block: 13rem 19.9rem;
}
@media screen and (max-width: 768px) {
  .biei-inner {
    padding-block: 13rem 9.9rem;
  }
}

.biei-intro {
  padding-bottom: 6.3rem;
}

.biei-intro_text {
  line-height: 1.5;
}

.biei-cnt {
  padding-block: 6.3rem 0;
}
@media screen and (max-width: 768px) {
  .biei-cnt {
    padding-block: 5.3rem 0;
  }
}

.biei-sec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7.1rem;
}
@media screen and (max-width: 768px) {
  .biei-sec {
    gap: 1rem;
  }
}
.biei-sec:last-child .biei-sec_cntBlock {
  padding-bottom: 2rem;
}

.biei-sec_timeBlock {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 1.4rem;
}
@media screen and (max-width: 768px) {
  .biei-sec_timeBlock {
    margin-left: -2rem;
  }
}

.biei-sec_time {
  border: 1px solid #3C311D;
  border-radius: 9999px;
  width: 8rem;
  height: 8rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .biei-sec_time {
    width: 6rem;
    height: 6rem;
  }
}
.biei-sec_time .--time {
  color: #333;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.biei-sec_time-line {
  margin-block: 1rem;
  width: 1px;
  height: calc(100% - 8rem - 2rem);
  background-color: #3C311D;
}

.biei-sec_cntBlock {
  display: grid;
  grid-template-areas: "ttl ttl" "img text";
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  row-gap: 2.2rem;
  -webkit-column-gap: 6.7rem;
     -moz-column-gap: 6.7rem;
          column-gap: 6.7rem;
  padding-bottom: 9.3rem;
}
@media screen and (max-width: 768px) {
  .biei-sec_cntBlock {
    grid-template-areas: "ttl" "img" "text";
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr;
    row-gap: 1rem;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
    padding-bottom: 5rem;
  }
}

.biei-sec_ttl {
  grid-area: ttl;
  font-size: 2.8rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-weight: 400;
  color: #333;
}

.biei-sec_img {
  grid-area: img;
  width: 46rem;
  height: 28.1rem;
  aspect-ratio: 46/28.1;
}
@media screen and (max-width: 768px) {
  .biei-sec_img {
    width: 100%;
    height: auto;
  }
}

.biei-sec_text {
  grid-area: text;
  padding-top: 1rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #000;
}

.biei-more {
  margin-top: 12rem;
  margin-left: 16.6rem;
}
@media screen and (max-width: 768px) {
  .biei-more {
    margin-top: 6rem;
    margin-left: 0;
  }
}

.biei-more_ttl {
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .biei-more_ttl {
    font-size: 2.2rem;
  }
}

.biei-more_text {
  font-size: 2.4rem;
  line-height: 2.6;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .biei-more_text {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-top: 2rem;
  }
}