@charset "UTF-8";
/* =====================================================
   common.css — 全ページ共通
   Base / ヘッダー / フッター / 森の背景（ベース定義）
   ※ ページ固有の位置指定は front / about / company 側で上書き
   ===================================================== */

/* ----- Base ----- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* #products などへのアンカー移動時に、固定ヘッダーの下に隠れないようにする */
html { scroll-padding-top: 129px; }
body {
  width: 100%;
  margin: 0 auto;
  /* 固定ヘッダーがフローから外れる分をここで相殺する。
     .site-header__inner の min-height と同じ値にしておくこと。 */
  padding-top: 129px;
  background: #7f674f;
  color: #fff;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, p { margin: 0; }

/* ----- 表示切り替えユーティリティ -----
   .pc … PC（768px 以上）だけ表示 / .sp … SP（767px 以下）だけ表示。
   <br> に display: block を当てると、ブラウザによっては改行として働かなくなる
   （br の改行は内部的にインラインの表示指定と結び付いているため）。
   <br class="sp"> のような使い方をするので、br だけは inline で出し入れする。 */
.pc {
  display: block;
}
.sp {
  display: none;
}
br.pc { display: inline; }
br.sp { display: none; }

.serif-en { font-family: 'Forum', serif; font-weight: 400; }

/* ----- Layout container -----
   .hero（画面いっぱいに広げるヒーロー）以外のセクションはこのクラスを付け、
   画面幅 85% / 最大 1250px で中央寄せする。
   ヘッダー・フッターは背景を全幅に出したいので、外側は 100% のまま
   内側の __inner にこのクラスを付けてコンテンツだけを揃える。 */
.l-container {
  width: 85%;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- Header ----- */
/* スクロールに追従する固定ヘッダー。
   フローから外れる分は body の padding-top: 129px で相殺しているため、
   各セクションの縦位置は固定前と変わらない。
   position は __bg（inset: 0）の位置基準も兼ねる。static にすると
   __bg の基準が body に上がり、ページ全体を覆ってしまうので注意。 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  /* fixed にすると背後の本文が透けてしまうため、これまでヘッダーの下に
     見えていた body と同じ地色を敷いて見た目を維持する
     （__bg のテクスチャは opacity: 0.4 で、それ単体では不透明にならない）。
     background-color で指定しているのは transition を効かせるため。 */
  transition: background-color 0.3s ease;
}
/* スクロール中は背景の透明度を上げてすりガラス風にする。
   .is-scrolled は assets/js/header.js が付け外しする。
   透過させると背後の写真に文字が重なって読みにくくなるため、
   backdrop-filter のぼかしを併用している。 */
.site-header.is-scrolled {
  background-color: rgba(127, 103, 79, 0.65);
}
/* ぼかしは .site-header 自身ではなく、この擬似要素のレイヤーに乗せること。
   backdrop-filter を持つ要素は position: fixed の子孫の位置基準（包含ブロック）に
   なってしまうため、.site-header に直接掛けると SP のドロワー（.site-nav は
   fixed / top: 94px / bottom: 0）がスクロール後だけ viewport ではなくヘッダーの
   箱を基準にしてしまい、高さが潰れてヘッダーの下に埋もれる。
   opacity で出し入れすることで、これまでと同じ 0.3s のフェードを保つ。 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.site-header.is-scrolled::before { opacity: 1; }
/* backdrop-filter が使えない環境では、読みにくくならないよう透過を浅くする。 */
@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled { background-color: rgba(127, 103, 79, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header::before { transition: none; }
}
/* ログイン時は WordPress の管理バー（固定・32px）の下に潜らせる。
   782px 以下では管理バーが position: absolute になりスクロールで流れるため、
   オフセットは 783px 以上でのみ適用する。 */
@media screen and (min-width: 783px) {
  .admin-bar .site-header { top: 32px; }
}
.site-header__bg {
  position: absolute; inset: 0;
  opacity: 0.4;
}
/* ロゴ（左）とナビ（右）を両端に並べるだけなので flex で足りる。
   バーの高さもここで決めるので、.site-header 側に height は持たせない。
   position: relative は絶対配置の __bg より前面に出すため。 */
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  min-height: 129px;
  padding: 16px 0;
}
/* ロゴマークの下にロゴテキストが並ぶ中央寄せの縦積み。
   （旧: 166 × 57.5px の箱に 2 枚を absolute で配置していた） */
.site-header__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.2px;
  width: 166px;
  flex-shrink: 0;
}
.site-header__logo-mark { width: 100%; height: auto; }
.site-header__logo-text { width: 49.7%; height: auto; }
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 30px;
  align-items: center;
}
/* 第 1 階層のリンクと、Products の開閉ボタン（button）を同じ見た目にする。 */
.site-nav__list > li > a,
.site-nav__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Forum', serif;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}
.site-nav__list > li > a img,
.site-nav__toggle img { width: 9px; height: 21px; }
.site-nav__toggle {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.site-nav__toggle img { transition: transform 0.2s ease; }
/* SP（〜767px）専用のメニュー開閉ボタン。PC では出さない。 */
.site-nav__hamburger { display: none; }
.site-nav__toggle[aria-expanded="true"] img { transform: rotate(180deg); }

/* ----- Products / Support / Company のメニュー -----
   Products は .site-header__inner（position: relative）を基準に、ヘッダーの帯の下端近くから右寄せで開く。
   Support / Company は項目が少ないので、ボタンの真下に幅の狭いパネルで開く（下の .site-nav__menu--support / --company）。
   開閉は assets/js/header.js が hidden 属性と aria-expanded を切り替える。
   見出し（Home Use など）と項目の書体はフッターの Products 列に合わせている。 */
.site-nav__menu {
  position: absolute;
  top: calc(100% - 16px);
  right: 0;
  width: 560px;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 20px 32px;
  padding: 28px 32px 24px;
  background: rgba(127, 103, 79, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
}
.site-nav__menu[hidden] { display: none; }
.site-nav__group-title {
  margin-bottom: 10px;
  font-family: 'Forum', serif;
  font-size: 20px;
  line-height: 1.5;
}
.site-nav__group ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-nav__group a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.site-nav__group a img { width: 7px; height: 15px; }
.site-nav__group a:hover,
.site-nav__all:hover { opacity: 0.7; }
/* 一覧（TOP の製品紹介）へのリンクは、メニューの下に区切り線を挟んで右寄せ。 */
.site-nav__all {
  grid-column: 1 / -1;
  justify-self: end;
  padding-top: 14px;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  text-align: right;
  font-size: 13px;
  letter-spacing: 1.3px;
  text-decoration: underline;
}
/* Support / Company：見出しなしの 1 列をボタン（li）の真下に、Products と同じ高さ（y=113）から開く。
   Support はボタンの左端、右端の Company は画面からはみ出さないようボタンの右端に揃える。 */
.site-nav__item--support,
.site-nav__item--company { position: relative; }
.site-nav__menu--support,
.site-nav__menu--company {
  top: calc(100% + 36px);
  width: max-content;
  /* 共通の max-width: 100% はここでは li（ボタン幅 約 70px）基準になり、中身がはみ出すため外す。 */
  max-width: none;
  grid-template-columns: auto;
}
.site-nav__menu--support { left: 0; right: auto; }
.site-nav__menu--company { left: auto; right: 0; }
/* 狭い画面では見出しごとに縦に積み、どちらのメニューもヘッダーの右端に揃える
   （ナビが折り返すと、ボタンの真下では画面の外にはみ出すことがあるため）。 */
@media (max-width: 767px) {
  .site-nav__item--support,
  .site-nav__item--company { position: static; }
  .site-nav__menu--support,
  .site-nav__menu--company {
    top: calc(100% - 16px);
    left: auto;
    right: 0;
  }
}
@media (max-width: 599px) {
  .site-nav__menu {
    grid-template-columns: 1fr;
    padding: 24px 20px 20px;
  }
}

/* ----- Footer ----- */
/* 縦方向の flex にして __inner を伸ばす。これで brand 列がフッターの
   高さいっぱいに伸び、コピーライトを margin-top: auto で下端に置ける
   （旧: bottom: 20px の絶対配置 ＋ left: 50% + translateX の中央寄せ）。 */
.site-footer {
  width: 100%;
  min-height: 454px;
  background: #998570;
  padding: 60px 0;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.site-footer__inner {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 40px clamp(32px, 5vw, 80px);
}
/* ロゴマーク → ロゴテキスト → コピーライト の中央寄せ縦積み。 */
.site-footer__brand {
  width: 252px;
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-footer__logo-mark { width: 100%; height: auto; }
.site-footer__logo-text {
  width: 49.7%;
  height: auto;
  margin-top: 11.27px;
}
.site-footer__copy {
  margin-top: auto;
  padding-top: 20px;
  font-family: 'Forum', serif;
  font-size: 14px;
  white-space: nowrap;
  color: #fff;
}
.site-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px clamp(32px, 5vw, 80px);
  padding-top: 4px;
  flex: 1;
}
.footer-col { min-width: 160px; }
/* footer.php のグループラッパー。SP で見出しの塊を左右 2 カラムに並べるためだけの要素なので、
   PC では display: contents で「無かったこと」にして、従来どおり縦一列に流す。 */
.footer-col__groups,
.footer-col__group { display: contents; }
.footer-col__title {
  font-family: 'Forum', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.footer-col__title--gap { margin-top: 40px; }
.footer-col__sub {
  font-family: 'Forum', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  margin-top: 18px;
  margin-bottom: 10px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col li a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1.6px;
  line-height: 1.5;
  color: #fff;
}
.footer-col li img { width: 7px; height: 15px; }

/* ----- Forest background band ----- */
/* body の疑似要素で森の写真を敷く。
   height を px で固定すると本文の下端より下までスクロール領域が伸び、
   フッター以降に余分なスクロールが生まれるため、bottom: 0 を指定して
   ページの末尾にぴったり合わせる（背景は repeat-y で縦に繰り返す）。 */
body::before {
  content: "";
  position: absolute;
  /* 幅は left / right で決める。width: 2084px の直書きは、
     -74 + 2084 = 2010px の横はみ出しを生み、モバイル表示で
     ブラウザがページ全体を縮小してしまう原因になっていた
     （body の overflow-x: hidden はビューポートに伝播するだけで
     body 自身はクリップしないため、はみ出しは残り続ける）。
     right: 0 で右端を viewport に揃え、左の -74px のはみ出しだけ残す
     （LTR では左方向のはみ出しはスクロール領域を広げない）。 */
  left: -74px;
  right: 0;
  width: auto;
  /* top と bottom の両方を指定して高さを決める。
     top を省くと（content が空なので）高さが 0 になり背景が出ない。
     既定はヘッダーの下端から。TOP のみ front.css でヒーロー下に下げる。 */
  top: 129px;
  bottom: 0;
  /* 元画像（1 枚 2084 × 1390 相当）と、それを上下反転したものを縦につないだ 1 枚を繰り返す。
     そのまま繰り返すと画像の下端と上端が接する所で光と影が途切れ、横一直線の継ぎ目が
     文字の後ろなどに出るため、反転でつなぎ目の上下を同じ絵柄にしている（Figma の背景も同じ作り）。
     画像は 1.5 倍解像度のグレースケール JPEG（元の assets/bg-forest.png から作成）。 */
  background: url('../bg-forest-mirror.jpg') left top / 2084px auto repeat-y;
  mix-blend-mode: multiply;
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
}
body::after { content: none; }


/* =====================================================
   レスポンシブ（ヘッダー / フッター）
   Figma「SP-水素の杜-TOP」(375px) のヘッダー・footer_sp 準拠。
   px 値は 375px 幅のアートボードから取っている。
   ===================================================== */

/* ----- タブレット（〜1023px） ----- */
/* ナビが折り返して帯が伸びないよう、文字と余白を少しずつ詰める。
   Figma に該当デザインが無いため、PC デザインからの補間値。 */
@media (max-width: 1023px) {
  .site-nav__list { gap: 10px 20px; }
  .site-nav__list > li > a,
  .site-nav__toggle { font-size: 15px; }
  .site-footer__cols { gap: 32px 40px; }
  .footer-col { min-width: 140px; }
  .footer-col__title { font-size: 28px; }
}

/* ----- スマートフォン（〜767px） ----- */
@media (max-width: 767px) {

  /* --- ヘッダーの帯 --- */
  /* SP はロゴが 138.55px に縮み、帯の高さは 129px → 94px。
     body の padding-top（固定ヘッダーの相殺分）と scroll-padding-top も同じ値に揃えること。
     TOP のヒーローは front.css 側で margin-top: -94px にして帯の下に潜らせている。 */
  html { scroll-padding-top: 94px; }
  body { padding-top: 94px; }
  body::before { top: 94px; }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  br.pc { display: none; }
  br.sp { display: inline; }

  .site-header__inner {
    width: 100%;
    max-width: none;
    padding: 16px 20px;
    min-height: 94px;
    flex-wrap: nowrap;
    gap: 16px;
  }
  .site-header__logo { width: 138.55px; gap: 6px; }

  /* --- ハンバーガーボタン（32 × 11px の 2 本線） --- */
  /* ロゴ全体ではなくロゴマークの中心に合わせるため、上寄せ＋margin-top で位置を出す。 */
  .site-nav__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: flex-start;
    position: relative;
    margin-top: 18px;
    width: 32px;
    height: 11px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
  }
  /* 見た目は 32 × 11px のままで、指で押せる範囲だけ広げる。 */
  .site-nav__hamburger::before {
    content: "";
    position: absolute;
    inset: -14px -12px;
  }
  .site-nav__hamburger-bar {
    display: block;
    width: 100%;
    height: 1px;
    background: #fff;
    transition: transform 0.25s ease;
  }
  /* 開いている間は 2 本線を × に組み替えて「閉じる」ボタンにする。
     角度 17deg は 32 × 10px の対角線（atan(10/32) ≒ 17.4°）。 */
  .is-nav-open .site-nav__hamburger-bar:first-child {
    transform: translateY(5px) rotate(17deg);
  }
  .is-nav-open .site-nav__hamburger-bar:last-child {
    transform: translateY(-5px) rotate(-17deg);
  }

  /* --- ドロワー --- */
  /* ※ メニューを開いた状態の画面は共有された Figma に含まれていないため、
     サイト既存のメニュー（.site-nav__menu）の地色・ぼかしに合わせて組んでいる。 */
  .site-nav {
    position: fixed;
    top: 94px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 20px 60px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(127, 103, 79, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    /* visibility も切り替えて、閉じている間はタブ移動でも触れないようにする。 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .is-nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-nav,
    .site-nav__hamburger-bar { transition: none; }
  }

  /* 第 1 階層は 1 行 1 項目。矢印は行の右端に寄せる。 */
  .site-nav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }
  .site-nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
  .site-nav__list > li > a,
  .site-nav__toggle {
    width: 100%;
    justify-content: space-between;
    padding: 18px 4px;
    font-size: 20px;
  }
  /* 開閉ボタンの矢印は、閉じているとき下向き（＝開ける）に見えるよう 90° 回す。 */
  .site-nav__toggle img { transform: rotate(90deg); }
  .site-nav__toggle[aria-expanded="true"] img { transform: rotate(-90deg); }

  /* 子メニューはドロワー内にそのまま積むので、浮かせる指定をすべて解除する。 */
  .site-nav__item--support,
  .site-nav__item--company { position: static; }
  .site-nav__menu,
  .site-nav__menu--support,
  .site-nav__menu--company {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 0 0 20px 16px;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-nav__group-title { font-size: 18px; margin-bottom: 8px; }
  .site-nav__group a { font-size: 14px; letter-spacing: 1.4px; }
  .site-nav__all { font-size: 12px; }

  /* --- フッター（375 × 798px） --- */
  /* コピーライトはマークアップ上 brand の中にあるが、SP ではフッター最下部の中央に置く。
     並び替えではなく絶対配置にしているのは、入れ子が違うため order が効かないから。 */
  .site-footer {
    position: relative;
    min-height: 0;
    padding: 61px 0 125px;
  }
  .site-footer__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 56px;
    width: 100%;
    max-width: none;
    padding: 0 20px;
  }
  .site-footer__brand {
    width: 160px;
    align-self: center;
  }
  .site-footer__logo-text { margin-top: 7.16px; }
  .site-footer__copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin-top: 0;
    padding-top: 0;
    text-align: center;
  }

  .site-footer__cols {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 36px;
    padding-top: 0;
  }
  .footer-col { min-width: 0; }
  .footer-col__title { font-size: 30px; margin-bottom: 10px; }
  .footer-col__title--gap { margin-top: 0; }
  .footer-col__sub { font-size: 20px; margin-top: 19px; margin-bottom: 7px; }
  .footer-col li a { font-size: 14px; letter-spacing: 1.4px; }

  /* Produsts（Home Use ／ Bussiness・Other）と Support ／ About を左右 2 カラムに。
     どちらも右カラムの開始位置が 181px なので、同じ列指定を使い回せる。 */
  .footer-col__groups {
    display: grid;
    grid-template-columns: 181px minmax(0, 1fr);
    align-items: start;
  }
  .footer-col__group { display: block; }
  /* 各カラムの先頭見出しは上の余白を打ち消して、左右で頭を揃える。 */
  .footer-col__group > :first-child { margin-top: 0; }
}

/* 開いている間は背面のページをスクロールさせない（JS が body に付け外しする）。 */
body.is-nav-open { overflow: hidden; }

/* =====================================================
   下層ページの見出し（About / Company / Contact / FAQ / Movie で共通）
   マークアップは template-parts/page-hero.php。
   写真は右寄せの 1000 × 520（1280 幅の 78.1%）。ヘッダーの直下から敷き、
   英字の見出しは写真の左端に掛かるので、写真と同じグリッド領域に重ねる。
   写真のトリミング位置はページ側で .page-hero--{modifier} .page-hero__bg を上書きする。
   ===================================================== */
.page-hero {
  display: grid;
  min-height: 520px;
  color: #fff;
}
.page-hero > * { grid-area: 1 / 1; }
.page-hero__bg {
  justify-self: end;
  width: 78.1%;
  height: 520px;
  object-fit: cover;
}
/* 見出しの左端は商品 LP・FAQ などのコンテンツ幅（93.75% / 最大 1200px）に揃える。 */
.page-hero__copy {
  position: relative;
  width: 93.75%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 161px 0 0 40px;
}
.page-hero__title { font-weight: 400; }
.page-hero__en {
  display: block;
  font-family: 'Forum', serif;
  font-weight: 400;
  font-size: 120px;
  line-height: 1.13;
}
.page-hero__jp {
  display: block;
  margin-left: 3px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 1.5;
}

/* タブレット（〜1023px）: Figma に該当デザインが無いため PC からの補間値。 */
@media (max-width: 1023px) {
  .page-hero__bg { width: 100%; }
  .page-hero__en { font-size: 96px; }
}

/* SP（〜767px）: 写真は全幅 460px。見出しは写真に重ねず、下端に 36px だけかぶせる。
   デザインでは写真の上端が y=87、ヘッダーの帯が 94px なので 7px 持ち上げる。 */
@media (max-width: 767px) {
  .page-hero {
    display: block;
    min-height: 0;
    margin-top: -7px;
  }
  .page-hero__bg {
    /* grid → block に戻したので、grid 用の配置指定も解除する
       （新しい Chrome はブロックレベルの箱にも justify-self を効かせるため）。 */
    display: block;
    justify-self: stretch;
    align-self: auto;
    width: 100%;
    height: 460px;
  }
  .page-hero__copy {
    width: auto;
    max-width: none;
    margin: -36px 0 0 19px;
    padding: 0;
  }
  .page-hero__en {
    font-size: 80px;
    line-height: 0.9;
  }
  .page-hero__jp {
    margin: 6px 0 0;
    font-size: 16px;
    letter-spacing: 2.4px;
  }
}

/* =====================================================
   Support（フリーダイヤル ＋ お問い合わせボタン）
   マークアップは template-parts/support.php。TOP と各商品ページのフッター直前に置く。
   Figma: PC-水素の杜-TOP の Group 146 (260:3645)。白 10% の 1200 × 490 の囲み。
   上の余白は既定 100px。直前のセクションが下に余白を持つページ（TOP / フレスカ系）は
   各ページの CSS で .support の padding-top を 0 にする。フッターまでは 100px。
   ===================================================== */
.support {
  width: 93.75%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 0;
  color: #fff;
  text-align: center;
}
.support__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px 88px;
  background: rgba(255, 255, 255, 0.1);
}
.support__title { font-weight: 400; }
.support__en {
  display: block;
  font-family: 'Forum', serif;
  font-size: 68px;
  line-height: normal;
}
.support__jp {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: 1.6px;
  line-height: 1.5;
}
/* 「フリーダイヤル」と番号を縦中央で横並び（間 37px）。 */
.support__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 37px;
  margin-top: 11px;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  line-height: 1.7;
}
.support__tel-label {
  padding-top: 4px;
  font-size: 18px;
  letter-spacing: 2.7px;
}
.support__tel-number {
  font-family: 'Forum', serif;
  font-size: 56px;
  letter-spacing: 8.4px;
}
/* 番号の行ボックス（行高 1.7）の下端に 4px かぶせる。 */
.support__hours {
  margin-top: -4px;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  letter-spacing: 2.4px;
  line-height: 1.7;
}
/* 白 60% の 400 × 74 のボタン。矢印は右端から 15px。 */
.support__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  max-width: 100%;
  min-height: 74px;
  margin-top: 40px;
  padding: 0 40px;
  background: rgba(255, 255, 255, 0.6);
  color: #3c3c3c;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2.7px;
  line-height: 1.5;
  transition: background-color 0.2s ease;
}
.support__button:hover { background: rgba(255, 255, 255, 0.8); }
.support__arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* タブレット（〜1023px）: Figma に該当デザインが無いため PC からの補間値。 */
@media (max-width: 1023px) {
  .support { padding: 80px 0; }
  .support__en { font-size: 54px; }
}

/* SP（〜767px）: SP デザイン未確認のため、TOP の About / Company カードの SP 指定に揃えた仮の値。
   番号は横幅に収まらないので「フリーダイヤル」の下に回す。 */
@media (max-width: 767px) {
  .support {
    width: 100%;
    padding: 80px 20px 100px;
  }
  .support__box { padding: 40px 20px 50px; }
  .support__en { font-size: 44px; }
  .support__jp {
    margin-top: 4px;
    font-size: 14px;
    letter-spacing: 1.4px;
  }
  .support__tel {
    flex-direction: column;
    margin-top: 20px;
  }
  .support__tel-label {
    padding-top: 0;
    font-size: 14px;
    letter-spacing: 2.1px;
  }
  .support__tel-number {
    font-size: 38px;
    letter-spacing: 3.8px;
    line-height: 1.4;
  }
  .support__hours {
    margin-top: 4px;
    font-size: 14px;
    letter-spacing: 1.4px;
  }
  .support__button {
    min-height: 60px;
    margin-top: 30px;
    font-size: 16px;
    letter-spacing: 2.4px;
  }
}