@charset "UTF-8";
/* =====================================================
   front.css — TOPページ（index.php）
   ヒーロー / ニュース / コンセプト / 製品紹介 / 下層カード
   ===================================================== */

/* ----- Hero ----- */
/* 写真とコピーを 1 セルに重ねる grid。 */
.hero {
  display: grid;
  min-height: 750px;
  overflow: hidden;
  margin-top: -129px;
}
.hero > * { grid-area: 1 / 1; }
/* セクション全体を覆う。1280px 固定時代のブリード用オフセット
   （left: -54px / top: -32px / height: 781px）は、全幅になると
   右端と下端に隙間を作るため撤去済み。 */
.hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 2 本の帯を縦に積む。flex にすることで行間（leading）や
   HTML の改行由来の空白テキストノードの影響を受けないようにする。
   align-items: flex-start で帯の幅を文字幅ぴったりに保つ。
   旧: left: 58px / top: 524.41px の絶対配置。 */
.hero__copy {
  align-self: start;
  justify-self: start;
  margin: 524.41px 0 0 58px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* line-height: 1 ＋ inline-flex の中央揃えで、文字を帯の中に収める。
   帯の高さは min-height で指定し、文字が入り切らない場合は
   クリップせず帯側が伸びるようにしておく。 */
.hero__line {
  position: relative;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  white-space: nowrap;
  line-height: 1;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
}
.hero__line--1 { font-size: 40.6px; letter-spacing: 6.89px; min-height: 50px; }
.hero__line--2 { font-size: 48.5px; letter-spacing: 8.18px; min-height: 70px; }
.hero__future { font-size: 40.6px; letter-spacing: 9.34px; }
.hero__self { font-size: 45.9px; letter-spacing: 3.67px; }
.hero__big { font-size: 54.5px; }
.hero__mid { font-size: 48.5px; }
.hero__mid--kern { letter-spacing: 1.94px; }

/* ----- News ----- */
/* 「見出し（左）＋ 一覧（右）」の 2 カラム。
   旧: 見出しを absolute で left:80px/top:100px に置き、一覧側は
   margin-left: 175px で辻褄を合わせていた。grid なら列を宣言するだけで済む。 */
.news {
  display: grid;
  grid-template-columns: 175px minmax(0, 1fr);
  align-items: start;
  padding: 100px 80px 50px;
  min-height: 350px;
}
.news__title {
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news__en {
  font-family: 'Forum', serif;
  font-size: 50px;
  line-height: 1;
}
.news__jp {
  font-size: 12px;
  letter-spacing: 1.2px;
  font-weight: 400;
}
/* margin-left: 175px は grid の 1 列目が担うので不要になった。 */
.news__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 945px;
}
/* height: 65px の固定をやめ、padding と min-height で高さを出す。
   文字が増えても行が潰れない。 */
.news__item {
  min-height: 65px;
  padding: 20px 40px 20px 32px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 5vw, 97px);
  background: rgba(255, 255, 255, 0.1);
}
.news__date {
  font-family: 'Abhaya Libre', serif;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: #fff;
  flex-shrink: 0;
}
.news__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
  color: #fff;
  line-height: 1.5;
  min-width: 0; /* タイトルが長いときに flex アイテムが縮めるようにする */
}
/* 親が既に flex + align-items: center なので、絶対配置と
   translateY(-50%) による縦中央寄せは不要。右寄せは margin-left: auto。 */
.news__arrow {
  margin-left: auto;
  flex-shrink: 0;
  width: 19px;
  height: auto;
}

/* ※ 狭い画面向けの指定は、ファイル末尾の「レスポンシブ」節にまとめている。 */

/* ----- Section shared bg (forest photo tiles behind news/concept/product) ----- */
.news, .concept, .products {
  position: relative;
}

/* Forest photo overlay for the middle sections */
.concept {
  padding: 100px 40px 120px;
  text-align: center;
}
.concept__title {
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  letter-spacing: 5.7px;
  line-height: 1.5;
  margin-bottom: 80px;
}
.concept__sm { font-size: 34px; }
.concept__lg { font-size: 42px; }
.concept__sm--comma { letter-spacing: -3.06px; }

.concept__pillars {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 60px;
}
.pillar {
  width: 180px;
  height: 180px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  text-align: center;
}
.pillar__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pillar__en {
  font-family: 'Forum', serif;
  font-size: 16px;
  position: relative;
}
.pillar__jp {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 3.6px;
  position: relative;
}

.concept__body {
  max-width: 1200px;
  margin: 0 auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 2.4;
  text-align: center;
  color: #fff;
}
.concept__body p { margin: 0; }

/* ----- Products ----- */
.products {
  padding-top: 30px;
  position: relative;
}
.products__title {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 43px;
  color: #fff;
  margin-bottom: 40px;
}
.products__en {
  display: block;
  font-family: 'Forum', serif;
  font-size: 100px;
  line-height: 1;
  font-weight: 400;
}
.products__jp {
  margin-left: 40px;
  font-size: 16px;
  letter-spacing: 1.6px;
  font-weight: 400;
}

/* 写真・グラデーション・コピーを 1 つのセルに重ねる grid。
   子はすべて grid-area: 1 / 1 で同じセルに入る。
   height を min-height に変えられるのがこの書き方の要点で、
   コピーが 620px を超えれば帯のほうが伸びる（写真も追従する）。 */
.product-wide {
  display: grid;
  min-height: 620px;
  overflow: hidden;
}
.product-wide > * { grid-area: 1 / 1; }
.product-wide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-wide__overlay {
  background: linear-gradient(-90deg, #5d4d3d 0%, rgba(93, 77, 61, 0) 60%);
}
/* 旧: right: 80px + top: 50% + translateY(-50%) */
.product-wide__copy {
  justify-self: end;
  align-self: center;
  margin-right: clamp(20px, 6vw, 80px);
  width: 340px;
  max-width: calc(100% - 40px);
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
}
.product-wide__name {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 38px;
  letter-spacing: 5.7px;
  line-height: 1.4;
  font-weight: 400;
}
.product-wide__kind {
  font-size: 18px;
  letter-spacing: 2.7px;
  line-height: 1.7;
}
.product-wide__desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 1.8;
  margin-top: 14px;
  max-width: 320px;
}
.product-wide__more {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  color: #fff;
  font-family: 'Forum', serif;
  font-size: 36px;
}
.product-wide__more img { width: 41px; height: 10px; }

.product-pair {
  display: flex;
  gap: 20px;
  padding: 0 40px;
  margin-top: 40px;
}
/* .product-wide と同じ重ね置き。 */
.product-card {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  min-height: 500px;
  overflow: hidden;
  background: #d9d9d9;
}
.product-card > * { grid-area: 1 / 1; }
.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card__grad {
  align-self: end;
  height: 133px;
  background: linear-gradient(to bottom, rgba(93,77,61,0), #5d4d3d);
}
/* 旧: left: 27px / right: 32px + bottom: 30px */
.product-card__name {
  align-self: end;
  justify-self: start;
  margin: 0 0 30px 27px;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 3.3px;
  line-height: 1.7;
}
.product-card__more {
  align-self: end;
  justify-self: end;
  margin: 0 32px 30px 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: 'Forum', serif;
  font-size: 24px;
}
.product-card__more img { width: 25px; height: 6px; }

/* ----- Pages (About / Company big cards) ----- */
.pages {
  display: flex;
  gap: 20px;
  /* 下は直後の Support（template-parts/support.php）までの 20px。 */
  padding: 100px 40px 20px;
}
/* Support は About / Company の直下に 20px あけて置く（上の余白は .pages 側で持つ）。
   横幅も .pages と同じく「画面幅 − 左右の padding」にして、カードと囲みの左右端を揃える
   （common.css の既定は 93.75% / 最大 1200px なので、1280px 以外でずれる）。 */
.pages + .support {
  width: auto;
  max-width: none;
  padding: 0 40px 100px;
}
/* position: relative は絶対配置の子が無くなったため不要。
   高さも min-height にして、文言が増えても潰れないようにする。 */
.page-card {
  flex: 1 1 0;
  position: relative;
  min-width: 0;
  padding: 60px 0 70px 0;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  text-align: center;
}
.page-card__en {
  font-family: 'Forum', serif;
  font-size: 68px;
  line-height: 1;
}
.page-card__jp {
  font-size: 16px;
  letter-spacing: 1.6px;
}
.page-card__arrow {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 25px; 
  height: 6px;
}

/* ----- 森の背景バンドの開始位置（ヒーローの直下から） -----
   .hero は margin-top: -129px でヘッダーの下に潜り込み、ページ上端 0〜750px を占める。
   以前は「ヘッダー 129px ＋ ヒーロー 750px = 879px」としていたため、ヒーローとの間に
   129px の背景なしの帯ができ、News セクションの途中から背景が始まって見えていた。
   ヒーローの高さ（.hero の min-height）を変えたら、ここも同じ値にすること。 */
body::before { top: 750px; }


/* =====================================================
   レスポンシブ
   - max-width: 1023px … タブレット。SP デザインが無いため、
     PC デザインを縮めた中間値（デザイナー指定ではなく補間）。
   - max-width: 767px  … Figma「SP-水素の杜-TOP」(375px) の実寸。
     px 値は 375px 幅のアートボードから取っている。
   ===================================================== */

/* ----- タブレット（〜1023px） ----- */
@media (max-width: 1023px) {
  /* ヒーローを少し低くする。body::before（森の背景）の開始位置は
     .hero の min-height と必ず揃えること。 */
  .hero { min-height: 640px; }
  body::before { top: 640px; }
  .hero__copy { margin: 430px 0 0 30px; }
  .hero__line--1 { font-size: 34px; letter-spacing: 5.5px; min-height: 44px; }
  .hero__line--2 { font-size: 40px; letter-spacing: 6.5px; min-height: 58px; }
  .hero__future { font-size: 34px; letter-spacing: 7.5px; }
  .hero__self { font-size: 38px; letter-spacing: 3px; }
  .hero__big { font-size: 45px; }
  .hero__mid { font-size: 40px; }

  .news { padding: 80px 40px 40px; }

  .concept { padding: 80px 30px 100px; }
  .concept__sm { font-size: 26px; }
  .concept__lg { font-size: 32px; }
  .concept__body { font-size: 17px; letter-spacing: 2.4px; line-height: 2.2; }

  .products__en { font-size: 72px; }
  .products__title { padding: 0 30px; }
  .product-wide { min-height: 520px; }
  .product-wide__name { font-size: 32px; letter-spacing: 4.8px; }
  .product-wide__more { font-size: 30px; }
  .product-card { min-height: 400px; }

  .page-card__en { font-size: 54px; }
  .pages { padding: 80px 30px 20px; }
  .pages + .support { padding: 0 30px 80px; }
}

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

  /* --- Hero（375 × 635px） --- */
  /* SP では帯の高さを詰め、コピーは左 28px / 上 524px（アートボード基準）。
     .hero__line の padding: 0 14px があるので margin-left は 14px で左端が 28px になる。 */
  /* ヘッダーの帯が 94px になる（common.css の SP 指定）ので、潜り込ませる量も合わせる。 */
  .hero { min-height: 635px; margin-top: -94px; }
  body::before { top: 635px; }
  .hero__copy { margin: 524px 0 0 14px; }
  .hero__line--1 { font-size: 25.6px; letter-spacing: 3.84px; min-height: 34px; }
  .hero__line--2 { font-size: 30.4px; letter-spacing: 4.56px; min-height: 42px; }
  .hero__future { font-size: 22.6px; letter-spacing: 5.21px; }
  .hero__self { font-size: 25.6px; letter-spacing: 2.05px; }
  .hero__big { font-size: 30.4px; }
  .hero__mid { font-size: 27px; }
  .hero__mid--kern { letter-spacing: 1.08px; }

  /* --- News --- */
  /* SP は見出しが一覧の上に乗り、「News」と「ニュース」は横並び。
     .l-container（85%）だと左右 28px になってしまうので、
     幅は 100% に戻して padding 20px で 335px 幅の一覧を作る。 */
  .news {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 60px 20px 40px;
    min-height: 0;
  }
  .news__title {
    flex-direction: row;
    align-items: center;
    gap: 13px;
  }
  .news__en { font-size: 32px; }
  .news__jp { font-size: 10px; letter-spacing: 1px; }
  /* 日付を 1 行目に独立させ、2 行目にタイトル＋矢印を置く。 */
  .news__item {
    flex-wrap: wrap;
    gap: 3px 12px;
    padding: 12px 16px 14px 18px;
    min-height: 67px;
  }
  .news__date {
    width: 100%;
    font-size: 14px;
    letter-spacing: 0.7px;
  }
  .news__text {
    flex: 1 1 auto;
    font-size: 14px;
    letter-spacing: 1.4px;
  }
  .news__arrow { width: 13px; }

  /* --- Concept --- */
  /* 見出しは 352px 幅まで使うため、左右の余白は 12px。
     本文だけ 335px に絞って中央寄せする。 */
  .concept {
    width: 100%;
    max-width: none;
    padding: 60px 12px 60px;
  }
  .concept__title {
    letter-spacing: 3.3px;
    line-height: 1.7;
    margin-bottom: 40px;
  }
  .concept__sm { font-size: 18px; }
  .concept__lg { font-size: 26px; }
  .concept__sm--comma { letter-spacing: -1.62px; }

  /* 3 つの円は「上に 1 つ・下に 2 つ」の三角形。
     grid なら 1 つ目を 2 列ぶち抜き＋中央寄せにするだけで組める。 */
  .concept__pillars {
    display: grid;
    grid-template-columns: 132px 132px;
    justify-content: center;
    column-gap: 20px;
    row-gap: 0;
    margin-bottom: 40px;
  }
  .pillar {
    width: 132px;
    height: 132px;
    gap: 2px;
  }
  .pillar:first-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .pillar__en { font-size: 12px; }
  .pillar__jp { font-size: 18px; letter-spacing: 2.7px; }

  .concept__body {
    width: 335px;
    max-width: 100%;
    font-size: 16px;
    letter-spacing: 2.4px;
    line-height: 2.2;
    text-align: left;
  }

  /* --- Products --- */
  .products { padding-top: 60px; }
  .products__title {
    padding: 0 20px;
    margin-bottom: 53px;
  }
  .products__en { font-size: 62px; }
  .products__jp { margin-left: 18px; font-size: 14px; letter-spacing: 1.4px; }

  /* SP では写真にコピーを重ねず、写真の下に中央寄せで置く。
     grid の重ね置きをやめて通常フローに戻し、グラデーションだけ
     写真の下端に絶対配置で残す（写真が地色に溶けて見えるようにする）。 */
  .product-wide {
    display: block;
    position: relative;
    min-height: 0;
    overflow: visible;
  }
  .product-wide__img {
    height: 460px;
    object-fit: cover;
    /* 横長の写真を 375px 幅に切り出すとき、既定（center）だと被写体が
       画面外に逃げるため、左端を基準にトリミングする。 */
    object-position: left center;
  }
  .product-wide__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 177px;
    background: linear-gradient(to bottom, rgba(93, 77, 61, 0), #5d4d3d);
  }
  .product-wide__copy {
    position: relative;
    z-index: 1;
    /* .product-wide を grid → block に戻したので、grid 用の配置指定も併せて解除する。
       最近の Chrome はブロックレベルの箱にも justify-self を効かせるため、
       end が残っていると箱が「中身の幅に縮んで右端に寄る」。
       中身が広い家庭用は幅いっぱいに見え、行の短い業務用だけ右に寄って見えていた。 */
    justify-self: stretch;
    align-self: auto;
    width: auto;
    max-width: none;
    /* 商品名を写真の下端に 20px かぶせる（デザインどおり） */
    margin: -20px 20px 0;
    text-align: center;
  }
  .product-wide__name {
    font-size: 26px;
    letter-spacing: 3.9px;
    line-height: 1.4;
  }
  /* SP は「家庭用H2 フレスカ」を 1 行で出すので、PC 用の改行は無効化する。 */
  .product-wide__name br { display: none; }
  .product-wide__desc {
    margin-top: 22px;
    max-width: none;
    font-size: 14px;
    letter-spacing: 2.1px;
    line-height: 1.8;
  }
  .product-wide__more {
    margin-top: 20px;
    gap: 13px;
    font-size: 28px;
  }
  .product-wide__more img { width: 25px; height: 6px; }

  .product-wide + .product-wide { margin-top: 100px; }

  /* --- 入浴剤・サプリのカード（SP は縦積み） --- */
  .product-pair {
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
    margin-top: 80px;
  }
  .product-card { min-height: 284px; }
  .product-card__grad { height: 76px; }
  .product-card__name {
    margin: 0 0 12px 15px;
    font-size: 16px;
    letter-spacing: 2.4px;
  }
  .product-card__more {
    margin: 0 16px 10px 0;
    gap: 6px;
    font-size: 18px;
  }

  /* --- About / Company --- */
  .pages {
    flex-direction: column;
    gap: 20px;
    padding: 80px 20px 20px;
  }
  .pages + .support { padding: 0 20px 100px; }
  .page-card {
    min-height: 180px;
    padding: 48px 0 0;
    justify-content: flex-start;
    gap: 4px;
  }
  .page-card__en { font-size: 44px; }
  .page-card__jp { font-size: 14px; letter-spacing: 1.4px; }
  .page-card__arrow {
    right: 17px;
    bottom: 17px;
    width: 25px;
    height: 6px;
  }
}