@charset "UTF-8";
/* =====================================================
   About page ("水素の杜とは")
   ===================================================== */
/* --- Reason section --- */
.reason {
  position: relative;
  padding: 120px 80px 60px;
  text-align: center;
  color: #fff;
}
.reason__eyebrow {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 3.6px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.reason__title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 38px;
  letter-spacing: 5.7px;
  line-height: 1.5;
  margin-bottom: 70px;
}
.reason__body {
  max-width: 1120px;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2.4px;
  line-height: 2.3;
}
.reason__quote {
  margin: 30px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 3.6px;
  line-height: 2.1;
}

/* --- Criteria section --- */
.criteria {
  position: relative;
  padding: 100px 0 60px;
  text-align: center;
  color: #fff;
}
.criteria__title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 46px;
  letter-spacing: 6.9px;
  line-height: 1.5;
  margin-bottom: 70px;
}
/* 写真・グラデーション・コピーを 1 セルに重ねる grid。
   height を min-height にできるので、コピーが増えればバナーが伸びる。 */
.criteria__banner {
  display: grid;
  min-height: 611px;
  overflow: hidden;
  margin-bottom: 80px;
}
.criteria__banner > * { grid-area: 1 / 1; }
.criteria__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.criteria__banner-overlay {
  background: linear-gradient(90deg, #5d4d3d 0%, rgba(93,77,61,0) 65%);
}
/* 旧: left: 79px / right: 79px / top: 157px の絶対配置 */
.criteria__banner-copy {
  align-self: start;
  margin: 157px clamp(20px, 6vw, 79px) 60px;
  text-align: left;
}
.criteria__banner-heading {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 34px;
  letter-spacing: 5.1px;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 30px;
}
.criteria__banner-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2.4px;
  line-height: 1.8;
  color: #fff;
  max-width: 640px;
}
.criteria__banner-body p { margin: 0; }

.criteria__cards-title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  letter-spacing: 6.3px;
  line-height: 1.5;
  margin-bottom: 40px;
}
.criteria__cards-title-sm { font-size: 34px; }
.criteria__cards-title-lg { font-size: 42px; }

.criteria__cards {
  display: flex;
  justify-content: center;
  gap: 27px;
  /* カード 260px × 4 + gap 27px × 3 = 1121px。ビューポート 1280px でも
     4 枚が縮まないよう左右パディングを 80px → 40px に詰めている。 */
  padding: 0 40px;
  margin-bottom: 40px;
}
/* 番号を下端に置くために flex column ＋ margin-top: auto を使う。
   旧: .criteria-card__num を bottom: 12px / left: 50% / translateX(-50%)
   で絶対配置していた（横中央寄せは text-align: center で足りる）。 */
/* カードの高さは aspect-ratio: 1 / 1 で 260px に固定していたが、04 のように
   見出しが 2 行になる・説明文が長いカードがあると中身が枠からはみ出してしまう。
   min-height にしておけば、はみ出す代わりにカード側が伸びる。
   .criteria__cards は flex（align-items の既定値 stretch）なので、
   1 枚が伸びれば 4 枚とも同じ高さに揃う。 */
.criteria-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 260px;
  min-height: 260px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #fff;
  /* 上下 30px の均等な余白で中身を上寄せに置く（旧: 54px / 12px）。
     左右を 18px にしているのは、説明文の 16 文字の行
     （例「確認できるものを優先しています。」= 12px + letter-spacing 1.8px × 16 ≒ 221px）が
     1 行に収まる幅を確保するため。20px だと内寸 218px で 3px 足りず、
     意図しない位置で折り返してしまう。 */
  padding: 30px 18px;
  color: #fff;
}
/* 番号は HTML の順どおりカードの先頭（名前の上）。SP デザインもこの並び。
   以前は margin-top: auto で下端に寄せようとしていたが、先頭の要素に auto を付けても
   番号だけでなく中身がまるごと下に寄るだけで、カードが伸びたときに
   上に大きな空きができてしまうため外している。 */
.criteria-card__num {
  font-family: 'Forum', serif;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 9px;
}
.criteria-card__name {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 3.3px;
  line-height: 1.5;
  margin-bottom: 15px;
}
.criteria-card__desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.8px;
  line-height: 1.6;
}

.criteria__closing {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 3.3px;
  line-height: 1.8;
  color: #fff;
  text-align: center;
}

/* --- Wellbeing (message photo card) --- */
/* 写真・白ベール・本文を 1 セルに重ねる grid。 */
.wellbeing {
  display: grid;
  min-height: 749px;
  margin-top: 60px;
  margin-bottom: 60px;
  overflow: hidden;
}
.wellbeing > * { grid-area: 1 / 1; }
.wellbeing__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 旧: inset: 120px 0 0 の絶対配置 */
.wellbeing__inner {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    url("../about-message-bg.png");
  background-size: cover;
  background-position: center;
  align-self: start;
  margin-top: 120px;
  padding: 120px 0;
  text-align: center;
  color: #3c3c3c;
}
.wellbeing__eyebrow {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 3.6px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.wellbeing__title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 38px;
  letter-spacing: 5.7px;
  line-height: 1.5;
  margin-bottom: 30px;
}
.wellbeing__body {
  max-width: 1120px;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2.4px;
  line-height: 2.3;
}
.wellbeing__body p { margin: 0; }

/* --- Message closing --- */
.message {
  position: relative;
  padding: 70px 80px 140px;
  text-align: center;
  color: #fff;
}
.message__eyebrow {
  font-family: 'Forum', serif;
  font-size: 32px;
  line-height: 1;
  margin-bottom: 15px;
}
.message__title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 38px;
  letter-spacing: 5.7px;
  line-height: 1.5;
  margin-bottom: 30px;
}
.message__body {
  max-width: 1120px;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2.4px;
  line-height: 2.3;
}
.message__body p { margin: 0; }


/* =====================================================
   レスポンシブ
   - max-width: 1023px … タブレット。Figma に該当デザインが無いため PC からの補間値。
   - max-width: 767px  … Figma「SP-水素の杜-水素の杜とは」(375px) の実寸。
   ===================================================== */

/* ----- タブレット（〜1023px） ----- */
@media (max-width: 1023px) {
  .reason { padding: 90px 40px 50px; }
  .reason__title { font-size: 32px; letter-spacing: 4px; }

  .criteria { padding: 80px 0 50px; }
  .criteria__title { font-size: 38px; letter-spacing: 5px; }
  .criteria__banner { min-height: 520px; }
  .criteria__banner-heading { font-size: 28px; letter-spacing: 4px; }
  .criteria__cards-title-sm { font-size: 28px; }
  .criteria__cards-title-lg { font-size: 34px; }
  /* 4 枚を 1 行に並べると潰れるので 2 × 2 に折り返す。 */
  .criteria__cards { flex-wrap: wrap; gap: 20px; padding: 0 30px; }
  .criteria-card { width: 260px; }

  .wellbeing { min-height: 0; }
  .wellbeing__inner { margin-top: 80px; padding: 80px 30px; }
  .wellbeing__title { font-size: 32px; letter-spacing: 4px; }

  .message { padding: 60px 30px 110px; }
  .message__title { font-size: 32px; letter-spacing: 4px; }
}

/* ----- スマートフォン（〜767px）: Figma SP デザイン準拠 ----- */
@media (max-width: 767px) {

  /* デザイン上、SP だけ文を途中で折り返す箇所。PC ではインラインのまま 1 行で流す。 */
  .reason__title span,
  .wellbeing__title span,
  .message__title span,
  .criteria__closing span,
  .criteria__cards-title-sm,
  .criteria__cards-title-lg { display: block; }
  /* PC 用の改行は、上の span が block になることで不要（残すと空行になる）。 */
  .u-br-pc { display: none; }

  /* --- Reason --- */
  /* 見出しは 375px 幅いっぱいを使うので l-container の 85% を外し、
     本文だけ 335px に絞って中央寄せする。 */
  .reason {
    width: 100%;
    max-width: none;
    padding: 70px 0 0;
  }
  .reason__eyebrow {
    font-size: 18px;
    letter-spacing: 2.7px;
    line-height: 1.7;
    margin-bottom: 10px;
  }
  .reason__title {
    font-size: 26px;
    letter-spacing: 2.6px;
    line-height: 1.5;
    margin-bottom: 36px;
  }
  .reason__body {
    width: 335px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    font-size: 14px;
    letter-spacing: 2.1px;
    line-height: 2.2;
    text-align: left;
  }
  .reason__quote {
    margin: 24px auto;
    font-size: 18px;
    letter-spacing: 2.7px;
    line-height: 2;
  }

  /* --- Criteria --- */
  .criteria { padding: 120px 0 0; }
  .criteria__title {
    font-size: 30px;
    letter-spacing: 3px;
    line-height: 1.5;
    margin-bottom: 36px;
  }

  /* SP はコピーを写真に重ねず、写真の下に左揃えで置く。 */
  .criteria__banner {
    display: block;
    min-height: 0;
    margin-bottom: 70px;
  }
  .criteria__banner-img { height: 540px; }
  /* SP は写真の下端がそのまま切れるデザインなので、PC の横グラデーションは出さない。 */
  .criteria__banner-overlay { display: none; }
  .criteria__banner-copy {
    margin: 26px 20px 0;
    text-align: left;
  }
  .criteria__banner-heading {
    font-size: 20px;
    letter-spacing: 3px;
    line-height: 1.7;
    margin-bottom: 24px;
  }
  .criteria__banner-body {
    max-width: none;
    font-size: 14px;
    letter-spacing: 2.1px;
    line-height: 2.2;
  }

  .criteria__cards-title {
    letter-spacing: 3px;
    margin-bottom: 36px;
  }
  .criteria__cards-title-sm { font-size: 24px; }
  .criteria__cards-title-lg { font-size: 30px; }

  /* カードは 1 列。高さは中身なりに伸びるので正方形の比率指定を外す。 */
  .criteria__cards {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    margin-bottom: 26px;
  }
  .criteria-card {
    width: 335px;
    max-width: 100%;
    aspect-ratio: auto;
    padding: 30px 17px;
    min-height: auto;
  }
  .criteria-card__num {
    margin-bottom: 5px;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.2;
  }
  .criteria-card__name {
    font-size: 20px;
    letter-spacing: 3px;
    line-height: 1.5;
    margin-bottom: 15px;
  }
  /* 「丁寧なアフターフォロー」は PC では 2 行に折る必要があるが、
     SP はカードの幅に収まるのでデザインどおり 1 行で出す。 */
  .criteria-card__name br { display: none; }
  .criteria-card__desc {
    font-size: 12px;
    letter-spacing: 1.8px;
    line-height: 1.6;
  }

  .criteria__closing {
    width: 333px;
    max-width: calc(100% - 20px);
    margin: 0 auto;
    font-size: 20px;
    letter-spacing: 3px;
    line-height: 1.7;
  }

  /* --- Wellbeing --- */
  /* PC は写真カードを 120px 下げて重ねていたが、SP は全幅のベタ置き。 */
  .wellbeing {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 100px 0 0;
  }
  .wellbeing__inner {
    margin-top: 0;
    padding: 70px 20px;
  }
  .wellbeing__eyebrow {
    font-size: 18px;
    letter-spacing: 2.7px;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .wellbeing__title {
    font-size: 26px;
    letter-spacing: 3.9px;
    line-height: 1.5;
    margin-bottom: 30px;
  }
  .wellbeing__body {
    max-width: none;
    font-size: 14px;
    letter-spacing: 2.1px;
    line-height: 2;
  }

  /* --- Message --- */
  .message {
    width: 100%;
    max-width: none;
    padding: 100px 20px 140px;
  }
  .message__eyebrow {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .message__title {
    font-size: 26px;
    letter-spacing: 3.9px;
    line-height: 1.5;
    margin-bottom: 36px;
  }
  .message__body {
    max-width: none;
    font-size: 14px;
    letter-spacing: 2.1px;
    line-height: 2;
  }
}