@charset "UTF-8";
/* ==================================================
 page-concept.css
================================================== */
/* ==================================================
 カラー変数
-------------------------------------------------- */
/* ==================================================
 ブレイクポイント
-------------------------------------------------- */
/* ==================================================
 Animation 関連
-------------------------------------------------- */
/* ==================================================
 フォント
-------------------------------------------------- */
/* --------------------------------------------------
 clamp() フォントサイズ計算関数
	@param $min    - 最小フォントサイズ（px単位の数値）
	@param $max    - 最大フォントサイズ（px単位の数値）
	@param $vp-min - 最小ビューポート幅（デフォルト: 375）
	@param $vp-max - 最大ビューポート幅（デフォルト: 1200）
	@param $root   - ルートフォントサイズ（デフォルト: 16）
-------------------------------------------------- */
/* ==================================================
 体裁
-------------------------------------------------- */
/* ==================================================
 ミックスイン
-------------------------------------------------- */
/* --------------------------------------------------
 メディアクエリ ミックスイン
-------------------------------------------------- */
/* --------------------------------------------------
 コンテナ ミックスイン
-------------------------------------------------- */
/* --------------------------------------------------
 透明度 ミックスイン
-------------------------------------------------- */
/* --------------------------------------------------
 ボックスシャドウ ミックスイン
-------------------------------------------------- */
/* --------------------------------------------------
 その他 ミックスイン
-------------------------------------------------- */
@layer page {
  /* ==================================================
   1.0 - コンセプト
  -------------------------------------------------- */
  .content-body {
    padding-bottom: 0;
  }
  /* ------------------------------------------------
   1.1 - イントロダクション
  ------------------------------------------------ */
  .introduction {
    position: relative;
    padding-block: 0 65px;
  }
  @media (min-width: 600px) {
    .introduction {
      padding-block: 65px 200px;
    }
  }
  .introduction__inner {
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding-inline: 20px;
  }
  @media (min-width: 600px) {
    .introduction__inner {
      padding-inline: 24px;
    }
  }
  @media (min-width: 1025px) {
    .introduction__inner {
      max-width: 1200px;
    }
  }
  @media (min-width: 1281px) {
    .introduction__inner {
      max-width: 1400px;
      padding-inline: 30px;
    }
  }
  .introduction__inner {
    text-align: center;
  }
  .introduction__title {
    margin-bottom: 40px;
  }
  @media (min-width: 1025px) {
    .introduction__title {
      margin-bottom: 65px;
    }
  }
  .introduction__title .section-title__jp {
    font-size: clamp(1.5rem, 1.0454545455rem + 1.9393939394vw, 2.5rem);
  }
  .introduction__text {
    position: relative;
    z-index: 2;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: clamp(0.875rem, 0.7613636364rem + 0.4848484848vw, 1.125rem);
    font-weight: 500;
    line-height: 2.2;
  }
  .introduction__text p:not(:first-child) {
    margin-top: 2em;
  }
  .introduction__text span {
    display: inline-block;
  }
  @media (min-width: 1025px) {
    .introduction__text span {
      display: inline;
    }
  }
  .introduction__text br {
    display: none;
  }
  @media (min-width: 600px) {
    .introduction__text br {
      display: block;
    }
  }
  .introduction__photos {
    position: relative;
    z-index: -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
    padding-top: 50px;
  }
  @media (min-width: 1025px) {
    .introduction__photos {
      position: absolute;
      top: 0;
      display: block;
      max-width: 100%;
      height: 100%;
      padding-top: 0;
    }
  }
  .introduction__photos-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
    width: 52%;
  }
  @media (min-width: 1025px) {
    .introduction__photos-wrapper {
      display: block;
      width: 100%;
    }
  }
  .photo-collage__item {
    overflow: hidden;
    border-radius: clamp(0.625rem, 0.3409090909rem + 1.2121212121vw, 1.25rem);
  }
  @media (min-width: 1025px) {
    .photo-collage__item {
      position: absolute;
    }
  }
  .photo-collage__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #FFFFFF;
  }
  .photo-collage__item--1 {
    width: 48%;
    animation-delay: 0;
  }
  @media (min-width: 1025px) {
    .photo-collage__item--1 {
      top: 50%;
      left: 25px;
      width: 24%;
      animation-delay: 0.4s;
    }
  }
  .photo-collage__item--2 {
    width: 100%;
    animation-delay: 0.4s;
  }
  @media (min-width: 1025px) {
    .photo-collage__item--2 {
      top: 14%;
      right: 0;
      width: 25%;
      animation-delay: 0;
    }
  }
  .photo-collage__item--3 {
    width: 75%;
    animation-delay: 0.6s;
  }
  @media (min-width: 1025px) {
    .photo-collage__item--3 {
      top: 85%;
      right: 14%;
      width: 19%;
    }
  }
  /* ------------------------------------------------
   1.2 - 5つの 「はぐくむ」
  ------------------------------------------------ */
  .concept {
    position: relative;
    padding-block: 50px 0;
    background-color: #F9E2CB;
    border-top-left-radius: clamp(5rem, 3.4375rem + 6.6666666667vw, 8.4375rem);
    border-top-right-radius: clamp(5rem, 3.4375rem + 6.6666666667vw, 8.4375rem);
  }
  @media (min-width: 1025px) {
    .concept {
      padding-block: 75px 15px;
    }
  }
  .concept__inner {
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding-inline: 20px;
  }
  @media (min-width: 600px) {
    .concept__inner {
      padding-inline: 24px;
    }
  }
  @media (min-width: 1025px) {
    .concept__inner {
      max-width: 1200px;
    }
  }
  @media (min-width: 1281px) {
    .concept__inner {
      max-width: 1400px;
      padding-inline: 30px;
    }
  }
  .concept__header {
    margin-bottom: 50px;
    text-align: center;
  }
  .concept__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .concept__title .section-title__jp {
    font-size: clamp(1.125rem, 0.8977272727rem + 0.9696969697vw, 1.625rem);
    white-space: wrap;
  }
  .concept__title .section-title__jp strong {
    font-size: clamp(2.5rem, 1.9318181818rem + 2.4242424242vw, 3.75rem);
    font-weight: 900;
  }
  .concept__title .section-title__jp--lg {
    font-size: clamp(1.6875rem, 1.3181818182rem + 1.5757575758vw, 2.5rem);
    line-height: 1;
  }
  .concept-list {
    max-width: 600px;
    margin-inline: auto;
  }
  @media (min-width: 1025px) {
    .concept-list {
      max-width: 1200px;
    }
  }
  .concept-list__item {
    padding-bottom: 65px;
  }
  .concept__wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
    justify-content: space-around;
    margin-bottom: 70px;
  }
  @media (min-width: 1025px) {
    .concept__wrapper {
      grid-template-columns: 1fr 40%;
    }
  }
  .concept__photo {
    position: relative;
    z-index: 2;
    width: calc(100% - 25px);
    aspect-ratio: 1.6/1;
    overflow: hidden;
    border-radius: clamp(0.625rem, 0.3409090909rem + 1.2121212121vw, 1.25rem);
  }
  @media (min-width: 1025px) {
    .concept__photo {
      width: 100%;
    }
  }
  .concept__photo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #FFFFFF;
  }
  .concept__headline {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 25px;
    height: 100%;
    padding-top: 20px;
    padding-inline: 65px 25px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: clamp(1.25rem, 0.9659090909rem + 1.2121212121vw, 1.875rem);
    font-weight: 900;
    line-height: 1.85;
    letter-spacing: 0.05em;
  }
  @media (min-width: 1025px) {
    .concept__headline {
      position: static;
      gap: 5px;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding-top: 15px;
      padding-inline: 80px;
    }
  }
  .concept__headline::before {
    position: absolute;
    top: -60px;
    right: 0;
    bottom: -30px;
    width: calc(100% - 25px);
    z-index: -1;
    border-radius: clamp(0.625rem, 0.3409090909rem + 1.2121212121vw, 1.25rem);
    background-color: #FFFFFF;
    content: "";
  }
  @media (min-width: 1025px) {
    .concept__headline::before {
      top: 30px;
      width: 60%;
    }
  }
  .concept__headline .number {
    font-size: clamp(2.25rem, 1.7954545455rem + 1.9393939394vw, 3.25rem);
  }
  .concept__text {
    max-width: 600px;
    margin-inline: auto;
    line-height: 1.85;
    font-size: clamp(0.875rem, 0.8181818182rem + 0.2424242424vw, 1rem);
    letter-spacing: 0.05em;
  }
  @media (min-width: 1025px) {
    .concept__text {
      max-width: 1000px;
    }
  }
  .concept-list__item:not(:last-child) .concept__text {
    padding-bottom: 60px;
    border-bottom: 1px solid #FFFFFF;
  }
}

/*# sourceMappingURL=page-concept.css.map */