@charset "utf-8";
/*  customhome.css
---------------------------------------------- */

/*  pc
---------------------------------------------- */
/*-------- heading --------*/
/* 見出しの右に写真3枚を並べる */
.custom-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0;
}
.custom-heading .lower-heading_wrapper {
  width: auto;
  margin: 0;
  padding-left: 90px;
}
.custom-heading_img {
  width: 66%;
}
.custom-heading_img img {
  width: 100%;
}

/*-------- lead --------*/
#lead {
  padding: 60px 0 140px;
}
/* 共通CSSの p が text-align: justify を直接指定しているため、継承では中央寄せにならない */
#lead .lead-ttl,
#lead .lead-sub,
#lead .lead-txt {
  text-align: center;
}
#lead .lead-ttl {
  line-height: 1.8;
}
/* 左右に罫線を伸ばす小見出し */
#lead .lead-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-top: 35px;
}
#lead .lead-sub::before,
#lead .lead-sub::after {
  content: "";
  width: 80px;
  height: 1px;
  background: #c6c0ba;
}
#lead .lead-txt {
  margin-top: 35px;
  line-height: 2.2;
}
#lead .lead-strong {
  color: #385874;
  font-weight: bold;
}

/*-------- feature --------*/
#feature {
  padding: 140px 0;
}
#feature .feature-head {
  margin-bottom: 80px;
  text-align: center;
}
#feature .feature-head::before {
  color: #fff;
}
#feature .feature-head .head-sub {
  display: block;
}
#feature .feature-item {
  display: flex;
  align-items: center;
  gap: 60px;
}
#feature .feature-item + .feature-item {
  margin-top: 80px;
}
#feature .feature-item_img {
  flex-shrink: 0;
  width: 480px;
}
#feature .feature-item_img img {
  width: 100%;
}
#feature .feature-item_txt {
  flex: 1;
}
#feature .feature-item_head {
  display: flex;
  align-items: flex-end;
  gap: 25px;
}
/* 連番は装飾要素のため共通の文字サイズクラスに含めない */
#feature .feature-item_num {
  flex-shrink: 0;
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-size: 9rem;
  line-height: 1;
}
#feature .feature-item_head .head-sub {
  line-height: 1.8;
}

/*-------- example --------*/
#example {
  padding: 140px 0;
  overflow: hidden;
}
#example .example-head {
  margin-bottom: 60px;
  text-align: center;
}
#example .example-head .head-sub {
  display: block;
}
/* 画像の読み込み前でも幅が決まるよう、スライド側に比率を持たせる */
#example .example-swiper .swiper-slide {
  width: auto;
  height: 360px;
  aspect-ratio: 29/18;
}
#example .example-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#example .example-btns {
  margin: 50px auto 0;
}

/*-------- flow --------*/
.flow-bg {
  background: #fff;
}
#flow {
  padding: 140px 0;
}
#flow .flow-head {
  margin-bottom: 60px;
  text-align: center;
}
#flow .flow-head .head-sub {
  display: block;
}
#flow .flow-list {
  width: fit-content;
  margin: 0 auto;
}
#flow .flow-note {
  margin-top: 20px;
  text-align: right;
}
#flow .flow-list_item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
}
#flow .flow-list_item + .flow-list_item {
  margin-top: 20px;
}
/* 円と円をつなぐ縦線 */
#flow .flow-list_item + .flow-list_item::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 54px;
  width: 2px;
  height: 20px;
  background: #cfc9c3;
}
#flow .flow-list_num {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 110px;
  aspect-ratio: 1/1;
  background: #aea49e;
  border-radius: 50%;
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  /* 円の中に2行を収めるため行の高さを詰める */
  line-height: 1;
}
/* STEP番号は装飾要素のため共通の文字サイズクラスに含めない */
#flow .flow-list_num-label {
  font-size: 2rem;
  letter-spacing: 0.1em;
}
/* 行の箱が文字の見た目より高く、STEPが押し上げられるため、箱を文字の高さまで詰めて重ねる */
#flow .flow-list_num-no {
  margin-top: -12px;
  font-size: 6.8rem;
  line-height: 0.7;
}
/* 6 だけが上に伸びる字形で、他の数字と同じ量を詰めると円の中心より上に寄る。
   SP の詰め量より詳細度が高く、SP でもこの値が使われる */
#flow .flow-list_item:nth-child(6) .flow-list_num-no {
  margin-top: 0px;
}

#flow .flow-btn {
  margin-top: 80px;
}

/*-------- support --------*/
#support {
  padding: 140px 0;
}
#support .support-head {
  margin-bottom: 60px;
  text-align: center;
}
#support .support-head .head-sub {
  display: block;
}
#support .support-cont {
  display: flex;
  align-items: center;
  gap: 60px;
}
#support .support-cont_img {
  flex-shrink: 0;
  width: 40%;
}
#support .support-cont_img img {
  width: 100%;
}
#support .support-cont_txt {
  flex: 1;
}
#support .support-btn {
  width: 360px;
  height: 68px;
  margin: 40px 0 0;
  font-family: "Cormorant Garamond", serif;
}

/*  sp
---------------------------------------------- */
@media only screen and (max-width: 959px) {
  /*-------- heading --------*/
  .custom-heading {
    display: block;
  }
  .custom-heading .lower-heading_wrapper {
    width: 90%;
    margin: 0 auto;
    padding: 100px 0 40px;
  }
  .custom-heading_img {
    width: 100%;
  }

  /*-------- lead --------*/
  #lead {
    padding: 30px 0 70px;
  }
  #lead .lead-sub {
    gap: 15px;
    margin-top: 25px;
  }
  #lead .lead-sub::before,
  #lead .lead-sub::after {
    width: 2rem;
  }
  #lead .lead-txt {
    margin-top: 25px;
    line-height: 2;
  }

  /*-------- feature --------*/
  #feature {
    padding: 70px 0;
  }
  #feature .feature-head {
    margin-bottom: 40px;
  }
  /* 連番＋タイトル → 画像 → 本文 の順に並べる */
  #feature .feature-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  #feature .feature-item + .feature-item {
    margin-top: 40px;
  }
  /* 子要素を親のフレックスに参加させ、画像を見出しと本文の間に置く */
  #feature .feature-item_txt {
    display: contents;
  }
  #feature .feature-item_head {
    order: 1;
    gap: 15px;
  }
  /* 連番と2行の見出しが横並びで収まるよう、この見出しのみ小さくする */
  #feature .feature-item_head .head-sub {
    margin-inline: auto;
    font-size: max(18px, 1.8rem);
  }
  #feature .feature-item_img {
    order: 2;
    width: 100%;
  }
  /* 間隔は gap で取るため、段落用の余白は付けない */
  #feature .feature-item_txt .body-txt {
    order: 3;
    margin-top: 0;
  }

  /*-------- example --------*/
  #example {
    padding: 70px 0;
  }
  #example .example-head {
    margin-bottom: 30px;
  }
  #example .example-swiper .swiper-slide {
    height: 22rem;
  }
  #example .example-btns {
    margin-top: 30px;
  }

  /*-------- flow --------*/
  #flow {
    padding: 70px 0;
  }
  #flow .flow-head {
    margin-bottom: 30px;
  }
  #flow .flow-list_item {
    gap: 20px;
  }
  #flow .flow-list_item + .flow-list_item::before {
    left: 31px;
  }
  #flow .flow-list_num {
    width: 65px;
  }
  #flow .flow-list_num-label {
    font-size: max(14px, 1.4rem);
  }
  #flow .flow-list_num-no {
    margin-top: -9px;
    font-size: max(45px, 4.5rem);
  }
  #flow .flow-note {
    margin-top: 25px;
    text-align: center;
  }
  #flow .flow-btn {
    margin-top: 50px;
  }

  /*-------- support --------*/
  #support {
    padding: 70px 0;
  }
  #support .support-head {
    margin-bottom: 30px;
  }
  #support .support-cont {
    display: block;
  }
  #support .support-cont_img {
    width: 100%;
    margin-bottom: 25px;
  }
  #support .support-cont_txt {
    padding-right: 0;
  }
  #support .support-btn {
    width: 100%;
    height: 7.7rem;
    margin-top: 30px;
  }
}