@charset "UTF-8";
/* ==========================================================================
   VOX - style.css
   設計方針
   - SPファースト（PCは 768px / 1024px 以上でレイアウト調整 ※PCデザイン支給後に本調整）
   - 欧文=Roboto / 和文=Noto Sans JP（font-family の並び順で自動的に出し分け）
   - 画面外の要素は content-visibility で描画を止める
   - アニメーションは JS が付与する .is-active / .is-inview でのみ動かす
   ========================================================================== */

/* ---------------------------------------------
   1. Custom properties
--------------------------------------------- */
:root {
  --c-black: #000000;                  /* サイトの黒 */
  --c-white: #fff;
  --c-gray: #f6f6f6;      /* サイト共通の薄グレー背景 */
  --c-gray-d: #767676;
  --c-line: #d8d8d8;
  --c-ink: #000000;                    /* ボタンの枠線・文字色 */

  /* Roboto を先に置くことで、欧文=Roboto / 和文=Noto Sans JP に自動で振り分けられる */
  --f-base: "Roboto", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            "Yu Gothic Medium", Meiryo, sans-serif;
  --f-en: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --f-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Yu Gothic Medium", Meiryo, sans-serif;

  --header-h: 56px;

  /* --- サイズの基準になる単位 --------------------------------------------
       --u = min(1px, 100vw / 375)
     ・画面幅375px以上 … 1px のまま ＝ 375pxのときの見た目で固定
     ・画面幅375px未満 … 比率そのままに全体が縮小
     PCでは 1px に戻します（下の @media 参照）。
     ---------------------------------------------------------------------- */
  --u: min(1px, calc(100vw / 375));
  --pad-side: calc(20 * var(--u));

  /* TOPページ共通のコンテンツ幅（SP 315px / PC 800px）。
     SPは375px基準で315px。--u により375px以上は315pxで固定（＝拡大しても幅は変わらず
     背景＝左右の余白だけが伸びる）、375px未満は全体と同じ比率で縮小します。 */
  --content-w-sp: calc(315 * var(--u));
  --content-w-pc: 800px;
  --content-w: var(--content-w-sp);

  /* 商品紹介セクションの左右余白 */
  --product-pad: var(--pad-side);

  /* ========== 調整用パラメータ ==========
     preview.html（ノーコード調整画面）のスライダーはここを書き換えます。
     数値を決めたら、その値をこの :root に書き戻せば確定です。
     ・末尾が -s のものは「倍率」。1 が基準で、0.8 なら2割小さく、1.2 なら2割大きく。
       clamp() を掛け算しているので、倍率を変えてもレスポンシブは保たれます。 */
  --kv-title-s: 1;          /* KV見出し「NEW STANDARD OF…」の大きさ */
  --kv-gap: clamp(20px, 4vh, 44px);  /* KV見出し → HOT NEWS の距離（従来どおり） */
  /* 195ml（最後の商品）の背景を固定したままにする追加スペース。
     「1画面 − 商品ブロックの高さ（SP約547px） − 商品名を画面上から残す58px」。
     58px を大きくすると早く、小さくするとさらに遅くなります。
     ※これは最後の195mlの背景が動き出すタイミングだけを決める値で、
       500ml→1000ml→195ml の背景の切り替わりには影響しません。 */
  --pd-hold: 0px;   /* 旧：背景 sticky を保持するための余白。背景は商品と一体になったため不要 */
  --kv-pb: 23px;            /* HOT NEWS本文 → 下のマーキーまで（カンプ26px） */
  --news-s: 1;              /* KV上のHOT NEWSの文字の大きさ */
  --mq-s: 1;                /* マーキー（VOLUME MAX）の文字の大きさの倍率 */
  --mq-fs: calc(24 * var(--u));  /* マーキーの文字サイズ（SP 24px） */
  --mq-h: calc(53 * var(--u));   /* マーキー黒帯の高さ（SP 53px） */
  --mq-stroke: 1.2px;       /* 枠文字にする場合の線の太さ（現在は未使用） */
  --mq-speed: 87s;          /* マーキーが1周する時間（長いほどゆっくり）。
                               文言を VOLUME MAX に変えて1セットが長くなったため、
                               見た目のスクロール速度が以前と同じになる値にしています。 */
  --ch-stage: 100svh;       /* CHANGE演出をピン留めしている間のスクロール量（長いほどゆっくり）。
                               100svh＝画面1つ分スクロールする間に演出が終わる＝通常のスクロール速度。
                               js/main.js の START / SPAN / SHOW_AT はこの値に対する「割合」なので、
                               ここだけを変えれば各区間の比率を保ったまま全体の速さが変わります。 */
  --ch-title-w: 100%;       /* CHANGE見出しの幅 */
  --ch-fig-w-sp: 100%;      /* CHANGEボトルの幅（SP） */
  --ch-fig-w-pc: 50%;       /* CHANGEボトルの幅（PC） */
  --ch-overlap: -9%;        /* 見出しとボトルの重なり量（マイナスほど深く重なる） */
  --ch-txt-s: 1;            /* CHANGE本文の大きさ */
  /* PRODUCTS の文字は画像になりました（ボタンと大見出し PRODUCTS だけが文字）。
     大きさはこの2つの「画像の幅」で決まります。 */
  --pd-title-w: calc(302 * var(--u));  /* SPARKLING WATER＋英文コピーの画像の幅（SP） */
  --pd-head-w:  calc(155 * var(--u));  /* 〇〇ml／容器／フレーバーの画像の幅（SP） */
  /* テキスト画像の定位置 → READ MORE の間隔（SP）。
     344px＋22px の 22px は「画像を小さくしたぶんの高さの差」です。
     .p-product は上下中央ぞろえなので、画像が小さくなるとかたまり全体が縮んで
     READ MORE が上がってしまいます。その差を足して、ボタンの位置を元のまま保ちます。
     ※--pd-head-w を変えたら、この値も「元の高さ133px － いまの画像の高さ」に合わせてください。 */
  --pd-gap: calc(366 * var(--u));
  --pd-head-gap: calc(16 * var(--u));  /* テキスト画像の下端 → READ MORE のすき間 */
  --pd-foot-top: 0px;                  /* READ MORE だけを下げる量（SPは下げない） */
  --pd-card-w: 486px;       /* 商品カード画像の最大幅（PC。SPは content-w の315px） */
  --pd-btn-w: calc(282 * var(--u));   /* READ MOREボタンの幅（SP 282px） */
  --pd-btn-h: calc(40 * var(--u));    /* READ MOREボタンの高さ（SP 40px） */
  --pd-btn-s: calc(14 * var(--u));    /* READ MOREの文字サイズ（SP 14px） */
  --pd-btn-bottom: calc(19.5 * var(--u)); /* ボタンをカード下端から何px上に置くか（SP） */
  --ft-lead-s: 1;           /* フッター見出しの大きさ */
  /* ===================================== */

  /* ハンバーガーメニューの背景の透け具合
     透け方は menu-bg-alpha.webp のアルファチャンネルが持っています
     （黒い部分＝不透明／明るい部分＝約86%）。下の2つは全体の微調整用。 */
  --drawer-bg-op: 1;        /* レイヤー全体の濃さ。下げると黒い部分も透け始めます */
  --drawer-veil: 0.28;      /* 黒膜の濃さ。上げるほど暗くなる（0で膜なし） */

  /* ヘッダーのピル（半透明の白ボタン） */
  --pill-bg: rgba(255, 255, 255, 0.55);   /* Gナビの白塗り。数値を下げるほど背景が透けます */
  --pill-border: rgba(0, 0, 0, 0.4);      /* #000000 の40% */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --u: 1px;
    /* PCのカンプ基準幅は1400px。--pu を使うと 1400px 以上でカンプ実寸、
       それ未満は同じ比率で縮小されます（SPの --u と同じ考え方）。 */
    --pu: min(1px, calc(100vw / 1400));
    --kv-gap: 30px;         /* 見出し下端→HOT NEWS の見た目が42pxになる値（カンプ） */
    /* PCは商品ブロックの高さが画面の高さに連動するので、同じ式から逆算します */
    --pd-hold: 0px;
    --kv-pb: 22px;          /* 本文下端→マーキーの見た目が26pxになる値（カンプ） */
    --header-h: 96px;
    --pad-side: 40px;
    --content-w: var(--content-w-pc);
    --product-pad: clamp(48px, 7vw, 120px);
    --mq-stroke: 1.4px;
    --mq-fs: 2.8rem;        /* PC 28px */
    --mq-h: 70px;           /* PC 帯の高さ 70px */
    --mq-speed: 64s;        /* PCは1セットが短いぶん短く（見た目の速度はSPと同じ） */
    --pd-btn-w: 436px;      /* READ MOREボタンの幅（PC） */
    --pd-btn-h: 53px;       /* READ MOREボタンの高さ（PC） */
    --pd-btn-s: 2.1rem;     /* READ MOREの文字サイズ（PC 21px） */
    --pd-btn-bottom: 40px;  /* ボタンをカード下端から何px上に置くか（PC） */
  }
}

/* ---------------------------------------------
   2. Reset / Base
--------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-base);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--c-black);
  background: var(--c-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------------------------------------------
   3. Utility
--------------------------------------------- */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: -100px; left: 0;
  z-index: 999;
  padding: 10px 16px;
  color: #fff;
  background: var(--c-ink);
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* 画面外セクションの描画を止める（重要：軽量化の要） */
.p-shop,
.l-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* ---------------------------------------------
   4. タイポグラフィ
       - 英字ディスプレイ = Roboto Black
       - デザイン上の斜体 = Roboto の本物のイタリック（skew は使わない）
--------------------------------------------- */
.p-kv__title,
.p-change__title,
.p-shop__title,
.p-news__label,
.c-marquee__set,
.c-btn-buy,
.c-btn-shop,
.l-header__nav a,
.l-drawer__list .en,
.l-footer__nav a {
  font-family: var(--f-en);
  font-style: normal;
  letter-spacing: 0.01em;
}

/* 斜体（デザイン指定箇所） */
.p-kv__title,
.p-shop__title,
.p-news__label {
  font-style: italic;
  font-weight: 900;
  line-height: 0.94;
}

/* 立体のディスプレイ見出し */
.p-change__title {
  font-weight: 900;
  line-height: 0.94;
}

/* ---------------------------------------------
   4.5 ローディング（初回訪問時のみ）
       ・2回目以降は localStorage の記録で完全に非表示（DOMも表示されません）
       ・読み込みが終わり次第すぐ消えます（最長でも1.6秒）
--------------------------------------------- */
.l-loading { display: none; }

.is-loading .l-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  background: var(--c-white);
  transition: opacity 0.55s var(--ease), visibility 0.55s;
}
.is-loading body { overflow: hidden; }

.l-loading__logo { width: 96px; height: auto; animation: loadPulse 1.4s ease-in-out infinite; }
.l-loading__bar { display: block; width: 120px; height: 2px; overflow: hidden; background: rgba(35, 24, 21, 0.12); }
.l-loading__bar i { display: block; width: 40%; height: 100%; background: var(--c-ink); animation: loadBar 1.1s var(--ease) infinite; }

@keyframes loadPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes loadBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* 読み込み完了 */
.is-loaded .l-loading { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .l-loading__logo, .l-loading__bar i { animation: none; }
}

/* ---------------------------------------------
   4.5 オープニング（セッション最初の1回だけ・TOPページ）
   3秒のモーションを canvas で描画（js/opening.js）。
   ・横長の画面＝PC版（1920×1080）／縦長の画面＝SP版（1080×1920）
   ・再生が終わるとフェードアウトし、DOMごと取り外されます
--------------------------------------------- */
/* オープニングの見出しに使う書体（canvas でのみ使用。
   CSSからは参照していないので、TOP以外のページでは読み込まれません） */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../fonts/poppins-black.woff2") format("woff2");
}

.l-opening { display: none; }
.is-opening .l-loading { display: none; }   /* オープニング中は素のローディングは出さない */
/* オープニング中もスクロールバーは出したままにする。
   以前は body の overflow:hidden でスクロールバーごと消えていたため、終了時にスクロールバーが現れ、
   その幅のぶんKVが縮んでガクッと動いていた。
   html を overflow-y:scroll にしてスクロールバーを常に表示し、
   body を画面の高さに切り詰めることで、スクロールだけを止めている */
.is-opening { overflow-y: scroll; }
.is-opening body { height: 100vh; overflow: hidden; }
.is-opening .l-opening {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
  /* opening.js が動き出すまでは canvas が空（透明）なので、
     地の色を敷いて後ろのKV画像が一瞬見えないようにしている。
     （KV画像は先読みしているため、JSより先に表示されてしまう） */
  background: #F2EFE7;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s var(--ease);
}
/* 終盤で canvas が「VOX」の形に切り抜かれ、後ろの本体（FV）が見えます。
   canvas を地の色で塗り終えたら（js で is-ready を付与）背景を透明に戻し、透けるようにする */
.is-opening .l-opening.is-ready { background: transparent; }
.is-opening .l-opening.is-done { opacity: 0; }
.l-opening__cv { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 動きを減らす設定では即表示（オープニングなし） */
@media (prefers-reduced-motion: reduce) {
  .is-opening .l-opening { display: none; }
  .is-opening { overflow-y: visible; }
  .is-opening body { height: auto; overflow: visible; }
}

/* ---------------------------------------------
   5. Header
--------------------------------------------- */
.l-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  transition: transform 0.4s var(--ease), background-color 0.3s;
  will-change: transform;
}
/* 上スクロールで隠す量。ロゴがヘッダーの帯より下にはみ出す分（--header-overflow）を
   足して動かさないと、ロゴだけ画面上部に残ってしまいます。 */
.l-header.is-hidden { transform: translateY(calc(-100% - var(--header-overflow, 0px))); }
/* TOPページのヘッダーは常に背景なし（透過）。
   スクロールを上げた時に白帯が出ないよう、is-solid では色を付けません。
   ※下層ページだけは「17. 下層ページ共通レイアウト」で白背景にしています */
.l-header.is-solid { background: transparent; backdrop-filter: none; }

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 40px);
  width: 100%;
  max-width: 1600px;
  height: 100%;
  margin-inline: auto;
  padding: 0 var(--pad-side);
}

.l-header__logo img { width: 70px; height: auto; }
@media (min-width: 768px) {
  .l-header__logo img { width: 98px; }    /* PC W98px（112px からさらにひと回り小さく。高さは比率どおり約65px） */
  /* ロゴだけ下げる。transform なので Gナビ・ボタンの位置には影響しません */
  .l-header__logo { transform: translateY(6px); }   /* 2px から4px下げて計6px */
}

/* SPはヘッダーのかたまりを2px下げ、ロゴをデザイン通り大きくします。
   ロゴは他のボタンより背が高く、ヘッダーの帯から少しはみ出します。
   トップページ・下層ページ共通です。 */
@media (max-width: 767px) {
  /* SPヘッダーの寸法はここにまとめています。ロゴ幅を変えれば他も自動で追従します。 */
  .l-header {
    --sp-logo-w: 78px;                                      /* ロゴ幅（90px から一回り小さく） */
    --sp-logo-h: calc(var(--sp-logo-w) * 60 / 90);          /* ロゴ高さ（画像比 90:60） */
    --sp-logo-top: 19px;                                    /* ヘッダー上端 → ロゴ上端（14px から5px下げ） */
    --sp-right-h: 24px;                                     /* ONLINE SHOP の高さ（28px からさらに小さく） */
    --sp-right-shift: -3px;                                 /* ONLINE SHOP／ハンバーガーの上下微調整（マイナスで上へ） */
    /* ロゴが帯（--header-h）から下へはみ出す量（inner の2px ぶんを含む） */
    --header-overflow: max(0px, calc(2px + var(--sp-logo-top) + var(--sp-logo-h) - var(--header-h)));
  }
  .l-header__inner { transform: translateY(2px); }
  /* ロゴは上端から14px下・左の余白から7px外側に置き、ヘッダーの帯より下にはみ出させます。 */
  .l-header__logo {
    align-self: flex-start;
    margin-top: var(--sp-logo-top);
    margin-left: -7px;
  }
  .l-header__logo img { width: var(--sp-logo-w); }

  /* ONLINE SHOP とハンバーガーは、ロゴの中心線に合わせた位置から
     --sp-right-shift ぶんだけ動かします（ロゴの位置は動きません）。
     ロゴの中心 ＝ --sp-logo-top + ロゴ高さ/2 */
  .l-header__right {
    align-self: flex-start;
    margin-top: calc(var(--sp-logo-top) + var(--sp-logo-h) / 2 - var(--sp-right-h) / 2 + var(--sp-right-shift));
  }
  /* 基底の .c-btn-shop（140×31）より後ろで定義されるため、
     詳細度を1つ上げてヘッダー内だけ確実に上書きします */
  .l-header .c-btn-shop {
    min-width: 104px;                  /* SP W104px（125px からさらに小さく） */
    height: var(--sp-right-h);         /* SP H24px（28px から） */
    padding: 0 10px;                   /* SP 左右10px（14px から） */
    font-size: 1.2rem;                 /* SP 12px（13px から） */
  }
}

.l-header__right { display: flex; align-items: center; gap: 12px; }
/* ヘッダー内の ONLINE SHOP は角を丸めず、角ばった形にする（PC・SP共通） */
.l-header .c-btn-shop { border-radius: 0; }

/* --- 文字が入れ替わるホバー演出（共通パーツ） ---
   マスクの中に同じ文字を2つ縦に並べ、ホバーで上へスライドさせています。
   1つ目が上へ抜け、下から2つ目が入ってくる動きです。
   2つ目は装飾なので aria-hidden="true"（読み上げ・検索では二重になりません）。 */
.c-swap {
  display: block;
  height: 1.25em;              /* 1行分の高さでマスクする */
  overflow: hidden;
}
.c-swap > span {
  display: block;
  height: 1.25em;
  line-height: 1.25em;
  transition: transform 0.45s var(--ease);
}

/* --- PC グローバルナビ（ピル型） --- */
.l-header__nav { display: none; }
.l-header__nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3.6vw, 52px);
  width: 100%;
  padding: 0 clamp(28px, 7vw, 110px);
  height: 46px;
  background: var(--pill-bg);
  border: 1px solid var(--c-ink);   /* 枠線は #000000 */
  border-radius: 999px;
}
.l-header__nav a {
  position: relative;
  display: block;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--c-ink);
}
@media (hover: hover) {
  .l-header__nav a:hover .c-swap > span { transform: translateY(-100%); }
}

/* --- ONLINE SHOP ボタン ---
   黒地（#000000）に白文字。ホバーで下から白い面がせり上がり、
   同時に文字が入れ替わって黒文字になります。 */
.c-btn-shop {
  position: relative;
  z-index: 0;                          /* ::before を内側に収める */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;                    /* SP W140px */
  height: 31px;                        /* SP H31px */
  padding: 0 14px;
  overflow: hidden;
  font-size: 1.4rem;                   /* SP 14px */
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--c-white);
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: 999px;
  transition: color 0.35s var(--ease);
}
/* せり上がってくる白い面 */
.c-btn-shop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-white);
  transform: translateY(101%);
  transition: transform 0.32s var(--ease) 0.22s;   /* 1回目のバウンドの後に切り替わる */
}
.c-btn-shop--lg { min-width: 200px; height: 44px; font-size: 1.35rem; }

/* ホバーで2回はずむ。
   1回目＝黒いまま／その直後に白へ切り替わり／2回目＝白でもう一度はずむ。 */
@keyframes shopBounce {
  0%   { transform: scale(1, 1); }
  10%  { transform: scale(0.94, 0.88); }   /* 1回目：沈む（黒） */
  22%  { transform: scale(1.04, 1.06); }   /* 　　　跳ね返る */
  32%  { transform: scale(1, 1); }
  /* ここで白に切り替わる */
  48%  { transform: scale(0.96, 0.92); }   /* 2回目：沈む（白） */
  62%  { transform: scale(1.03, 1.05); }   /* 　　　跳ね返る */
  78%  { transform: scale(0.995, 0.99); }
  100% { transform: scale(1, 1); }
}

@media (hover: hover) {
  .c-btn-shop:hover {
    color: var(--c-ink);
    transition-delay: 0.24s;                        /* 文字色も面に合わせて切り替える */
    animation: shopBounce 0.78s var(--ease);
  }
  .c-btn-shop:hover::before { transform: translateY(0); }
  .c-btn-shop:hover .c-swap > span {
    transform: translateY(-100%);
    transition-delay: 0.18s;
  }
}
/* タップ操作の端末では、押している間だけ同じ見た目にする */
.c-btn-shop:active { color: var(--c-ink); }
.c-btn-shop:active::before { transform: translateY(0); transition-delay: 0s; }

/* 動きを減らす設定の環境でははずませない */
@media (prefers-reduced-motion: reduce) {
  .c-btn-shop:hover { animation: none; }
}

/* ハンバーガー（2本線・細め） */
.c-hamburger {
  position: relative;
  width: 24px; height: 24px;
  flex-shrink: 0;
}
.c-hamburger__bar {
  position: absolute;
  left: 2px;
  width: 20px; height: 1.5px;          /* 線の長さ20px */
  background: var(--c-ink);
  transition: transform 0.35s var(--ease);
}
/* 2本の top は小数の端数（.5）を揃えること。
   端数が違うとピクセル境界へのスナップのされ方が変わり、
   下の線だけ太く描画されてしまいます（実測：上1px／下2px）。 */
.c-hamburger__bar:nth-child(1) { top: 6.5px; }
.c-hamburger__bar:nth-child(2) { top: 16.5px; }

/* 開いた時は2本が枠の中央（12px）で交差してバツになる */
.c-hamburger.is-open .c-hamburger__bar:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
.c-hamburger.is-open .c-hamburger__bar:nth-child(2) { transform: translateY(-5.25px) rotate(-45deg); }

/* PC ではハンバーガーを使わず、ピル型ナビを表示 */
@media (min-width: 1024px) {
  /* ロゴ / 可変幅のナビピル / ONLINE SHOP の3分割 */
  /* --- Gナビ（ピル）を他コンテンツと同じ「画面センター」にそろえます ---
     これまでは ロゴ / ナビ / ONLINE SHOP の3つを space-between で並べ、
     余った幅をナビが受け取る形でした。左のロゴ（W128px）と
     右の ONLINE SHOP（W157px〜）の幅が違うぶん左右の余白がそろわず、
     さらに margin-left（最大100px）が加わるため、
     ピルの中心が画面中心より右にズレていました。
     ナビだけをヘッダーの並びから外して絶対配置にし、
     画面の中心（left:50%）に固定します。ロゴと ONLINE SHOP の位置は変わりません。
     幅は 800px を上限に、狭いPC幅ではロゴ／ボタンに重ならない範囲まで縮みます。 */
  .l-header__inner { position: relative; }
  .l-header__nav {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(800px, calc(100% - (var(--pad-side) + 180px) * 2));
    min-width: 0;
  }
  /* --- ナビピルのコンテンツ幅を 800px で固定 ---
     画面幅がどれだけ広くなってもピルは 800px までしか伸びず、
     ナビ枠の中で中央に収まります（狭い画面では 800px 以下に縮みます）。 */
  .l-header__nav ul {
    max-width: 800px;                  /* PC W800px（横幅は変更なし） */
    height: 33px;                      /* PC H33px（38px から -5px） */
    margin-inline: auto;
    /* 枠線を半分（0.5px相当）にする。
       Chrome は border-width: 0.5px を 1px に丸めてしまうため、
       2倍の大きさで 1px の枠を描いて 0.5倍に縮める方法で本当に半分にしています。 */
    position: relative;
    border-color: transparent;         /* 高さを変えないよう枠の場所だけ残す */
  }
  .l-header__nav ul::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(200% + 4px);
    height: calc(200% + 4px);
    border: 1px solid var(--c-ink);
    border-radius: 999px;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
  }
  .l-header__nav a { font-size: 1.3rem; }   /* PC 13px（高さに合わせて縮小） */
  .c-hamburger { display: none; }
  .c-btn-shop {
    min-width: 157px;                  /* PC W157px（横幅は変更なし） */
    height: 33px;                      /* PC H33px（38px から -5px） */
    font-size: 1.3rem;                 /* PC 13px（高さに合わせて縮小） */
  }
}

/* ---------------------------------------------
   6. Drawer（SP専用）
--------------------------------------------- */
/* 全面オーバーレイ。ヘッダー(z:100)より上に出して覆う。
   出現は identity.city を参考に、背景がゆっくり寄り、項目がマスクから
   1つずつせり上がる。閉じるときは全体をフェードするだけ（内側は即リセット）。 */
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: 110;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.l-drawer.is-open { visibility: visible; opacity: 1; }

/* 背景テクスチャ。下地のベタ塗りを敷かないので、背後のページ（KV動画など）が透けます。
   menu-bg-alpha.webp は menu-bg.webp に「暗いほど不透明」のアルファを付けたもの。
   → 黒い部分は透けず、明るい部分だけ約14%背後が見えます。
   ・--drawer-bg-op … レイヤー全体の濃さ
   ・--drawer-veil  … 白文字の可読性を保つための黒い膜の濃さ */
.l-drawer__bg {
  position: absolute;
  inset: 0;
  background: url("../images/menu-bg-alpha.webp") center / cover no-repeat;
  opacity: var(--drawer-bg-op);
  transform: scale(1.06);
}
.l-drawer.is-open .l-drawer__bg { transform: scale(1); transition: transform 0.8s var(--ease); }
.l-drawer__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--drawer-veil));
}

.l-drawer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100svh;
  padding: calc(16 * var(--u)) var(--pad-side) calc(30 * var(--u));
  color: var(--c-white);
}

/* 上段：黒ロゴ（左）＋ 細いバツ（右） */
.l-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--header-h) - 16 * var(--u));
  opacity: 0;
}
.l-drawer.is-open .l-drawer__head { opacity: 1; transition: opacity 0.5s var(--ease) 0.12s; }
.l-drawer__logo img { display: block; width: calc(72 * var(--u)); height: auto; }

.c-drawerClose {
  position: relative;
  width: 32px; height: 32px;
  flex-shrink: 0;
}
.c-drawerClose__bar {
  position: absolute;
  top: 50%; left: 50%;
  width: 26px; height: 1px;            /* 細いバツ */
  background: var(--c-white);
}
.c-drawerClose__bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.c-drawerClose__bar:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* 中段：ナビ（右寄せ・縦中央） */
.l-drawer__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: calc(8 * var(--u));
  text-align: right;
}
.l-drawer__list li { overflow: hidden; }            /* せり上がりのマスク */
.l-drawer__list a { display: block; padding: calc(3 * var(--u)) 0; }
.l-drawer__list span {
  display: inline-block;
  font-family: var(--f-en);
  font-weight: 900;
  font-size: calc(46 * var(--u));
  line-height: 1.18;
  letter-spacing: 0.02em;
  transform: translateY(120%);                       /* 閉時は下に隠す（即リセット） */
}
.l-drawer.is-open .l-drawer__list li:nth-child(1) span { transform: translateY(0); transition: transform 0.7s var(--ease) 0.12s; }
.l-drawer.is-open .l-drawer__list li:nth-child(2) span { transform: translateY(0); transition: transform 0.7s var(--ease) 0.19s; }
.l-drawer.is-open .l-drawer__list li:nth-child(3) span { transform: translateY(0); transition: transform 0.7s var(--ease) 0.26s; }
.l-drawer.is-open .l-drawer__list li:nth-child(4) span { transform: translateY(0); transition: transform 0.7s var(--ease) 0.33s; }
.l-drawer.is-open .l-drawer__list li:nth-child(5) span { transform: translateY(0); transition: transform 0.7s var(--ease) 0.40s; }

/* 下段：OFFICIAL SNS（左下） */
.l-drawer__foot { opacity: 0; transform: translateY(10px); }
.l-drawer.is-open .l-drawer__foot {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease) 0.42s, transform 0.6s var(--ease) 0.42s;
}
.l-drawer__snsLabel {
  font-family: var(--f-en);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: calc(18 * var(--u));
}
.l-drawer__sns { display: flex; align-items: center; gap: calc(26 * var(--u)); }
.l-drawer__sns img { display: block; width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.l-drawer__sns a { display: block; opacity: 0.92; transition: opacity 0.25s; }
@media (hover: hover) { .l-drawer__sns a:hover { opacity: 1; } }

/* ドロワーを開いている間はヘッダーを隠す（黒ロゴ＋バツはドロワー側が持つ）。
   フェードイン中に元ヘッダーのロゴ／ONLINE SHOP がちらつかないように。 */
.is-navOpen .l-header { opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease); }

@media (min-width: 1024px) {
  .l-drawer { display: none; }
}

/* ---------------------------------------------
   7. KV
--------------------------------------------- */
/* KVは「1画面ぶん＝見出しまで」「その下にHOT NEWS」の2段組みにしています。
   1段目をちょうど 100svh にすることで、ページを開いた瞬間に見えるのは
   動画＋見出しだけになり、HOT NEWS は必ず1画面目の外に出ます。
   動画は KV 全体（1画面＋HOT NEWSぶん）を覆うので、そのぶん縦長になります。 */
.p-kv {
  position: relative;
  display: block;
  width: 100%;
  min-height: 100svh;
  padding: 0 var(--pad-side) var(--kv-pb);
  background: #eef2f4;
  overflow: hidden;
}
/* KV背景動画。静止画のときと同じく KV 全体（1画面＋HOT NEWS）に敷き、cover で埋める。
   ※「1画面ぶん（100svh）」だけに敷くと、横長の枠に 16:9 の動画を cover するため上下が切れ、
     HOT NEWS との境目もくっきり出てしまったのでやめた（2026-09-17）。
   枠が動画より横長になったときは下側を切る（上のボトルの頭が切れないよう center top） */
.p-kv__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.p-kv__video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;     /* 共通指定（video { height: auto }）を打ち消す */
  object-fit: cover;
  object-position: center top;
}

/* 動画の上に重ねるテキストブロック（見出し＋HOT NEWS）
   動画は画面いっぱい、テキストだけコンテンツ幅（800px）に収めて中央配置 */
.p-kv__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
}
.p-kv__inner {
  display: grid;
  grid-template-rows: 100svh auto;   /* 1段目＝ちょうど1画面／2段目＝HOT NEWS */
  width: 100%;
}
/* 見出しは1段目の下端に置き、下に --kv-gap ぶんの余白をとる。
   その真下（＝ちょうど1画面目の外）から HOT NEWS が始まります。 */
.p-kv__title { align-self: end; margin-bottom: var(--kv-gap); }

/* SP：見出しの幅にシュリンクさせて中央寄せ（中身は左揃えのまま）。
   これで 見出し／HOT NEWS／記事タイトル／本文 の左ラインが1本に揃う */
/* 650px以上（PCデザイン）では左寄せのまま。
   中央寄せを続けると見出しが画面中央に寄りすぎるため */
@media (max-width: 649px) {
  .p-kv__body { text-align: center; }
  .p-kv__inner {
    display: inline-grid;
    width: auto;
    max-width: 100%;
    text-align: left;
  }
  /* 長い日本語のニュース本文が幅を決めてしまわないようにする。
     width:0 で「幅の要求をゼロ」にし、min-width:100% で確定後の幅いっぱいに広げる。
     結果、インナーの幅は見出し（SPARKLING WATER.）で決まる */
  .p-kv__inner .p-news {
    width: 0;
    min-width: 100%;
  }
}

/* SPは他のコンテンツと同じく横幅315px（--content-w-sp）に収める。
   PCの「85px / 800px」と同じ比率を315pxに当てはめた固定サイズ。
   画面幅では拡大せず（375px未満のみ --u で縮小）、改行は OF のあと1回だけ。 */
.p-kv__title { font-size: calc(35 * var(--u) * var(--kv-title-s)); }   /* SP 35px */
.p-kv__title span { display: block; white-space: nowrap; }

/* ---------------------------------------------
   8. HOT NEWS
--------------------------------------------- */
.p-news {
  color: var(--c-ink);          /* ニュース内のテキストは全て #000000 */
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
/* 上スクロール中だけ隠す（下スクロールで再表示）。
   visibility で隠すので場所は取ったまま＝KVのレイアウトは動きません。
   付け外しは js/main.js の「5-2. HOT NEWS」が行います。 */
.p-news.is-scrollHidden {
  opacity: 0;
  visibility: hidden;
}
.p-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.p-news__label {
  display: inline-block;
  font-size: 1.2rem;          /* SP 12px */
  letter-spacing: 0.06em;
}
/* 下線は「HOT」の部分の下だけ。長さは文字幅ではなく固定（SP W18×H1px） */
.p-news__label-hot {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}
.p-news__label-hot::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18px;
  height: 1px;
  background: currentColor;
}
.p-news__item + .p-news__item { margin-top: 14px; }
.p-news__ttl { font-size: calc(1.1rem * var(--news-s)); font-weight: 700; line-height: 1.7; }   /* SP 11px */
.p-news__txt { font-size: calc(1.0rem * var(--news-s)); line-height: 1.7; color: inherit; }    /* SP 10px */
/* リード文は記事ごとに長さが変わるので、一覧ページと同じく2行で止める。
   せり上がり演出で .c-tr__inner に包まれる場合はその中身側で止める。 */
.p-news__txt,
.p-news__txt .c-tr__inner {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (hover: hover) {
  .p-news__item a:hover .p-news__ttl { text-decoration: underline; }
}

/* ---------------------------------------------
   9. Marquee
--------------------------------------------- */
.c-marquee {
  display: flex;
  align-items: center;            /* 帯の高さは --mq-h で決め、文字は上下中央 */
  overflow: hidden;
  height: var(--mq-h);
  background: var(--c-ink);
  color: var(--c-white);
}
.c-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--mq-speed) linear infinite;
  animation-play-state: paused; /* 既定は停止。画面内に入った時だけ JS が動かす */
  will-change: transform;
}
.c-marquee.is-active .c-marquee__track { animation-play-state: running; }

/* TOPページの帯（VOLUME MAX）だけ流れる向きを逆にします。
   animation-direction を reverse にするだけなので、速度・見た目・
   ループの継ぎ目はそのまま、進む向きだけが左→右になります。 */
.p-top .c-marquee--down .c-marquee__track { animation-direction: reverse; }

.c-marquee__set {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  /* セットの継ぎ目にも同じ間隔を作る（2セットとも同じ幅になるのでループはズレません） */
  padding-right: 0.42em;
  font-size: calc(var(--mq-fs) * var(--mq-s));   /* SP 53px / PC 28px */
  /* Roboto Black Italic */
  font-style: italic;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 「VOX」＝白ベタ／「PRODUCTS」＝枠文字（袋文字）。
   枠文字は画像もSVGも使わず CSS の text-stroke だけで描いています。
   ＝追加の通信ゼロ・文字のままなので、この見た目では一番軽い方法です。 */
.c-marquee__solid { color: var(--c-white); }
.c-marquee__hollow { color: var(--c-white); }

/* ① 枠文字にする（塗りを消して輪郭だけ描く） */
@supports (-webkit-text-stroke: 1px #fff) {
  .c-marquee__hollow {
    color: transparent;
    -webkit-text-stroke: var(--mq-stroke) var(--c-white);
  }
}

/* ② 文字の内側に出る「重なりの線」を消す
      text-stroke は輪郭の“真ん中”に線を引くため、そのままだと
      線の内側半分が文字の中に入り込み、重なった部分が線として見えてしまいます。
      そこで「線 → 塗り」の順で描き（paint-order）、塗りを帯の背景と同じ色にして
      内側にはみ出した分を隠しています。
      結果、見えるのは輪郭の外側半分だけ＝線が細くきれいに出ます。 */
@supports ((-webkit-text-stroke: 1px #fff) and (paint-order: stroke fill)) {
  .c-marquee__hollow {
    color: var(--c-ink);            /* ＝帯の背景色。帯の色を変えたらここも合わせる */
    paint-order: stroke fill;
  }
}
/* いずれも非対応のごく古い環境では、白ベタ文字のまま表示されます（消えません） */

/* 枠線は em ではなく px 固定。
   em にすると文字が大きい画面ほど線も太くなってしまうためです。
   実際に見える太さは指定値の半分（PC 約0.7px ／ SP 約0.6px）。 */
@media (min-width: 768px) {
  .c-marquee__hollow { -webkit-text-stroke-width: 1.4px; }
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------------------------------------------
   10. CHANGE YOUR LIFE
--------------------------------------------- */
/* 演出は「セクションが画面にぴったり収まったところで一旦ピン留めし、
   そこからスクロール量に合わせて再生する」方式です。
   ・中身（帯・見出し・ボトル）のサイズは画面の高さに左右されない固定寸法。
     ＝どの画面サイズでも同じ見え方になり、低い画面でも中身が切れません。
   ・ピン留めしている間のスクロール量は :root の --ch-stage で調整します。 */
.p-change {
  position: relative;
}
/* ↓ ピン留めしている間のスクロール量を確保するための余白 */
.p-change::after {
  content: "";
  display: block;
  height: var(--ch-stage);
}

.p-change__sticky {
  position: sticky;
  top: 0;
  /* 画面いっぱいで留まる。中身のほうが高い画面では中身に合わせて伸びるので切れません */
  min-height: 100svh;
  display: grid;
  place-items: center;       /* 中身は「内容ぶんのサイズ」のまま中央に置かれる */
  padding: 48px 0;
  overflow: hidden;          /* 左右に捌けた帯を画面外で隠す（横スクロール防止） */
  text-align: center;
}
/* 帯と本体を同じマスに重ねる。高さは背の高い方に合わせるので、
   演出の前後でレイアウトがずれません。 */
.p-change__sticky > * { grid-area: 1 / 1; }

/* --- 紙芝居の1枚として使うとき（js/main.js が .is-paged を付ける） --- */
.p-change.is-paged::after { display: none; }          /* ためのスクロール量は不要 */
.p-change.is-paged .p-change__sticky { min-height: 100svh; height: 100%; }

@media (min-width: 768px) {
  .p-change__sticky { padding: 64px 0; }
}

/* --- 本体 --- */
/* 帯は画面幅いっぱいなので、左右の余白は本体側だけに付けます */
.p-change__main {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-inline: var(--pad-side);

  /* SPデザインの「画面幅に合わせて大きくなる」動きは 490px で打ち止めにします。
     見出しSVGとボトルは .p-change__main の幅に対する % なので、この箱に上限を付ければ
     490px以上ではサイズが固定され、増えたぶんは左右の余白になります。
     （border-box なので 490px には左右の余白 20px を含みます＝中身は450px） */
  max-width: 490px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  /* PCデザインも 1300px で打ち止め。1300px以上は中身のサイズを固定したまま、
     増えたぶんは左右の余白になります（SPの490pxと同じ考え方）。
     border-box なので 1300px には左右の余白 40px を含みます＝中身は1220px。 */
  .p-change__main { max-width: 1300px; }
}

/* 重なりの順番を固定：ボトルが前、見出しSVGが後ろ。
   （JSのマスクに will-change が付くと、指定がないと見出しが前に出ることがあるため） */
.p-change__title { position: relative; z-index: 0; }
.p-change__fig   { position: relative; z-index: 1; }

/* 見出しは支給SVG。
   幅で大きさを決めているので、画面幅が変わっても文字の大きさが自然に追従します。
   （SVGの縦横比 CHANGE=376:72 / YOUR LIFE=438:72 を利用して2行の高さを揃えています） */
.p-change__title { font-size: 0; }
/* ↓ 直下の span だけを対象にする（JSが差し込むマスク .c-tr にも当たると入れ子で縮んでしまうため） */
.p-change__title > span { display: block; }
.p-change__title img { display: block; width: 100%; height: auto; margin-inline: auto; }

/* SP：2行。下の行（YOUR LIFE）を基準に幅を決め、
   上の行（CHANGE）は同じ文字高になる幅（438分の376＝85.8%）にする */
.p-change__title { width: var(--ch-title-w); margin-inline: auto; }
/* 2語は .p-change__row（1行＝マスク1つ）の中の .p-change__w。JSがマスク .c-tr を挟むので、直下指定にはしない
.p-change__title > span { width: 85.8%; margin-inline: auto; }
.p-change__title > span + span { width: 100%; margin-top: clamp(2px, 0.6vw, 8px); } */
.p-change__w { display: block; width: 85.8%; margin-inline: auto; }
.p-change__w + .p-change__w { width: 100%; margin-top: clamp(2px, 0.6vw, 8px); }

/* PC：1行に並べる。flex-grow に縦横比を入れると、
   2枚の高さが自動的に揃ったまま、横幅いっぱいに広がります */
@media (min-width: 768px) {
  .p-change__title { width: 100%; }
  /* 2語を横に並べる箱。JSあり＝マスクの中身（.c-tr__inner）、JSなし＝.p-change__row */
  .p-change__row,
  .p-change__row > .c-tr > .c-tr__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4%;
    width: 100%;
  }
  .p-change__row > .c-tr { width: 100%; }
  .p-change__w { width: auto; flex: 5.22 1 0; margin: 0; }                   /* CHANGE  376/72 */
  .p-change__w + .p-change__w { width: auto; flex: 6.08 1 0; margin: 0; }    /* YOUR LIFE 438/72 */
}

/* ボトルは見出しに重ねる（デザイン準拠）。
   支給画像 top-500ml.webp は上下に約6.4%の透明マージンがあるため、
   まずその分（画像幅比で約4%）を打ち消し、さらに約4%引き上げて重ねています。
   マイナスマージンの % は「図の幅」に対する割合なので、
   SP/PCで図の幅が変わっても重なり具合は同じ比率で保たれます。 */
.p-change__fig {
  width: var(--ch-fig-w-sp);
  max-width: none;
  margin: 0 auto;
}
.p-change__fig img {
  width: 100%;
  max-height: none;
  margin-top: var(--ch-overlap);   /* ← 重なり量。:root の --ch-overlap で調整 */
  object-fit: contain;
}

.p-change__txt {
  margin-top: clamp(14px, 2.6svh, 26px);
  font-size: calc(1.3rem * var(--ch-txt-s));
  line-height: 2;
  letter-spacing: 0.02em;
}
/* 文の切れ目で改行させるための箱（SPは2行 / PCは1行に収まる） */
.p-change__s { display: inline-block; }
.p-change__note { font-size: 1rem; vertical-align: super; }

@media (min-width: 768px) {
  /* PCはボトルを少し小さく、見出しとの重なりを大きめに */
  .p-change__fig { width: var(--ch-fig-w-pc); }
}

/* ---------------------------------------------
   10.4 VISUAL（CHANGE YOUR LIFE → シズル画像 の間）
   画像の下端をまたいで見出しを置き、画像に重なる行（.is-w）だけ白抜きにします。
   重ねる量は「白い行数 × 行送り」から計算しているので、行数が変わっても位置が合います。
   数値はカンプ実測（SP＝幅375px基準／PC＝幅1400px基準）。
--------------------------------------------- */
.p-visual {
  /* ---- SP（カンプ 375px 基準）---- */
  --vis-w:    1;                      /* 画像の上に白抜きで載る行数 */
  --vis-imgh: calc(401 * var(--u));   /* 画像の高さ（幅は比率で自動） */
  --vis-x:    calc(30 * var(--u));    /* 文字の左右の位置 */
  --vis-en:   calc(40 * var(--u));    /* 英字の文字サイズ */
  --vis-lh:   calc(45.5 * var(--u));  /* 英字の行送り */
  --vis-adj:  calc(12 * var(--u));    /* 画像の下端と黒文字の位置合わせ */
  --vis-ja:   calc(23 * var(--u));    /* 日本語の文字サイズ */
  --vis-note: calc(9 * var(--u));     /* （充填時）の文字サイズ */
  --vis-gap:  calc(15 * var(--u));    /* 英字 → 日本語 */
  --vis-gap2: calc(3 * var(--u));     /* 日本語 → （充填時） */
  --vis-mt1:  calc(48 * var(--u));    /* 1つ目 → 2つ目 */
  --vis-mt2:  calc(60 * var(--u));    /* 2つ目 → 3つ目 */

  padding: calc(50 * var(--u)) 0 calc(40 * var(--u));
  background: var(--c-gray);
  overflow: hidden;                   /* 画面幅からはみ出す画像を切り取る */
}
.p-visual__item--b { margin-top: var(--vis-mt1); }   /* 1つ目 → 2つ目 */
.p-visual__item--c { margin-top: var(--vis-mt2); }   /* 2つ目 → 3つ目 */
.p-visual__item picture { display: block; }
.p-visual__img {
  display: block;
  width: auto;
  height: var(--vis-imgh);
  max-width: none;
}
/* 2つ目だけ右寄せ（画像・文字とも） */
.p-visual__item--b .p-visual__img { margin-left: auto; }
.p-visual__item--b .p-visual__body { text-align: right; }

/* 白抜きにする行数（画像に重なる行数） */
.p-visual__item--a { --vis-w: 2; }
.p-visual__item--b { --vis-w: 1; }
.p-visual__item--c { --vis-w: 2; }   /* SPは3行組みなので白は2行 */

/* 見出しブロックを「白い行数ぶん」だけ画像の上に引き上げます */
.p-visual__body {
  position: relative;
  z-index: 1;
  margin-top: calc((var(--vis-w) * var(--vis-lh) - var(--vis-adj)) * -1);
  /* 余白は文字を寄せる側だけ。反対側は空けないので、
     見出しが長い時もカンプどおり折り返さずに伸びます */
  padding-left: var(--vis-x);
}
.p-visual__item--b .p-visual__body { padding-left: 0; padding-right: var(--vis-x); }
/* 見出し・本文はカンプの改行位置で固定（自動では折り返さない） */
.p-visual__en span,
.p-visual__ja,
.p-visual__note { white-space: nowrap; }

/* せり上がり演出のマスクは、この節では余白を持たせません。
   （既定の .c-tr は上下に余白＋マイナスマージンを持つため、
     行送りが数pxずれて画像の下端と合わなくなります） */
.js .p-visual .c-tr { padding: 0; margin: 0; }

.p-visual__en {
  font-family: var(--f-en);
  font-style: normal;
  font-weight: 900;
  font-size: var(--vis-en);
  line-height: var(--vis-lh);
  letter-spacing: 0;
  color: var(--c-black);
}
.p-visual__en span { display: block; }
.p-visual__en .is-w { color: var(--c-gray); }       /* 画像に重なる行（#f6f6f6） */
.p-visual__item--b .p-visual__en { font-style: italic; }

/* PC／SPで改行位置が変わる箇所（3つ目の見出しと日本語）。表示しない方は display:none
   （上の .p-visual__en span より詳細度を上げておかないと打ち消されます） */
.p-visual .is-pc { display: none; }
.p-visual .is-sp { display: block; }

.p-visual__ja {
  margin-top: var(--vis-gap);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: var(--vis-ja);
  line-height: 1.4;
  color: var(--c-black);
}
.p-visual__note {
  margin-top: var(--vis-gap2);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: var(--vis-note);
  line-height: 1.4;
  color: var(--c-black);
}

/* ---- PC（カンプ 1400px 基準）。TOPページのPCデザインは650px以上 ---- */
@media (min-width: 650px) {
  .p-top .p-visual {
    --vis-imgh: calc(646 * var(--pu));
    --vis-x:    calc(296 * var(--pu));
    --vis-en:   calc(96 * var(--pu));
    --vis-lh:   calc(110 * var(--pu));
    --vis-adj:  calc(25 * var(--pu));
    --vis-ja:   calc(55 * var(--pu));
    --vis-note: calc(25 * var(--pu));
    --vis-gap:  calc(32 * var(--pu));
    --vis-gap2: calc(7 * var(--pu));
    --vis-mt1:  calc(164 * var(--pu));
    --vis-mt2:  calc(210 * var(--pu));
    padding: calc(67 * var(--pu)) 0 calc(90 * var(--pu));
  }
  .p-top .p-visual__item--c { --vis-w: 1; }   /* PCは2行組みなので白は1行 */
  .p-top .p-visual .is-pc { display: block; }
  .p-top .p-visual .is-sp { display: none; }
}

/* ---- 紙芝居めくり ----
   JS が .is-flip を付けたときだけ有効。JS無効／prefers-reduced-motion では
   これまでどおり3枚が縦に並びます。

   ★ 作りの方針（2026-09-14 に全面的に作り直しました）
     以前は「この区間だけスクロールを奪って（html に overflow:hidden）、
     ホイール1回＝1枚めくる」という作りでした。参考サイトの fullPage.js は
     ページ全体をパネル化してスクロール自体を無くしているので同じ問題が
     起きませんが、VOXは前後に普通のスクロールがあるため、区間の出入りで
     制御の受け渡しが必要になり、そこで「飛ぶ・戻る・引っかかる」が
     起きていました。

     いまはスクロールを一切奪いません。
       ・区間に (枚数+1) 画面ぶんの高さを持たせる（＝下の __slot）
       ・ステージを position: sticky で画面に貼り付ける
       ・何枚目を出すかは「スクロール位置」だけで決まる
     ロックも scrollTo も再突入フラグも無いので、飛ぶ・戻るが原理的に
     起きません。上下の動きも同じ式で決まるため完全に対称です。 */
.p-visual.is-flip {
  position: relative;
  /* --flip-steps はJSが枚数から入れます（CHANGE＋3枚 → 4。最終面のあとの「間」1画面は 2026-09-22 に削除） */
  height: calc(var(--flip-steps, 4) * 100svh);
  padding: 0;
  /* ★ .p-visual の overflow: hidden を打ち消します。
     overflow: hidden が付いた親は「スクロールの入れ物」とみなされるため、
     中の position: sticky が viewport ではなくこの箱を基準にしてしまい、
     まったく貼り付かなくなります（＝ステージが画面外へ流れて真っ白になる）。 */
  overflow: visible;
}
/* スクロールの長さを作るためだけの空き箱。1つ＝1画面ぶん＝1枚ぶん。
   ※ ここに scroll-snap-align を入れると、トラックパッドの細かいスクロールの
     たびにブラウザが直前の位置へ引き戻してしまい（＝進まない・戻される）、
     まさに直したかった症状が再現します。スナップは使いません。 */
.p-visual.is-flip .p-visual__slot {
  height: 100svh;
}
/* ---- 紙芝居のステージ ----
   4枚をこの箱に重ねて入れ、区間を通過する間そのまま画面に貼り付けます。 */
.p-visual.is-flip .p-visual__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

/* 支給画像は「写真＋見出し＋コピー」が1枚に入った完成画なので、
   絶対に切らずに全体を収めます（cover にすると文字が切れます）。
   余った部分は背景の #f6f6f6 が見えるだけです。 */
.p-visual.is-flip .p-visual__item picture { display: contents; }
.p-visual.is-flip .p-visual__img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
/* 見出し・コピーは画像に焼き込まれているため非表示。
   読み上げは img の alt が担当します。
   文字をHTMLに戻したくなったら、この1行を消してください。 */
.p-visual__item--a .p-visual__body,
.p-visual__item--b .p-visual__body,
.p-visual__item--c .p-visual__body { display: none; }
.p-visual.is-flip .p-visual__item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 中身（画像＋見出し）は現デザインのまま上下中央に */
  margin-top: 0;             /* 縦並び用の余白（--vis-mt1 / mt2）は使わない */
  overflow: hidden;
  background: var(--c-gray);
  transform: translate3d(0, 100%, 0);
  transition: transform 1s cubic-bezier(0.65, 0.07, 0.06, 1.01);  /* 参考サイト(fullPage)と同値 */
  /* GPU（合成レイヤ）で動かす指定。transform 以外は動かしていません */
  will-change: transform;
  backface-visibility: hidden;
}
.p-visual.is-flip .p-visual__item.is-shown { transform: translate3d(0, 0, 0); }
/* 1枚目＝CHANGE の面。背景は白のまま重ねる。
   この面だけは「下からせり上がって出てくる」動きを持たせません。
   （普通にスクロールして到達する面なので、常に定位置にいます） */
.p-visual.is-flip .p-visual__item--change {
  background: var(--c-white);
  transform: translate3d(0, 0, 0);
  transition: none;
}
/* 5枚目＝PRODUCTS 1画面目の複製。本物と同じ組みになるよう、中身は上から流す */
.p-visual.is-flip .p-visual__item--products {
  display: block;
  background: var(--c-gray);
}
/* 読み込み直後や、外から入ってきた瞬間の状態セットではアニメーションさせない */
.p-visual.is-flip.is-noanim .p-visual__item { transition: none; }

/* ---- 紙芝居：カードを重ねる（PC＝650px以上／TB＝400〜649px。SPは対象外） ----
   2枚目以降が出てきたとき、前の面を覆い隠さずに「カードが重なっていく」見た目にします。
   ・面（.p-visual__item）の背景を透明にして、うしろのカードが見えるようにする
   ・うしろに回ったカードは、上へずらす＋少し縮める＋グレーアウトする
   ・カードには影を付ける（支給画像は写真のまわりが透明なので、四角に付く
     box-shadow ではなく、形に沿って付く drop-shadow を面に掛けています）
   「何枚うしろか」は js/main.js が data-depth で入れています（0＝いちばん手前）。
   動き（下からせり上がる・秒数・イージング）は従来のままです。
   TB（400〜649px）はPCと同じ動きで、カードの縦横比だけTB用画像に合わせます。 */
@media (min-width: 400px) {
  /* 面が透明になるので、背景はステージ側で持ちます */
  .p-top .p-visual.is-flip .p-visual__stage { background: var(--c-gray); }

  .p-top .p-visual.is-flip .p-visual__item--a,
  .p-top .p-visual.is-flip .p-visual__item--b,
  .p-top .p-visual.is-flip .p-visual__item--c {
    --card-h: 78svh;           /* カードの高さ＝画面の高さ － 下の padding の合計 */
    /* カードの縦横比＝支給画像の縦横比。TB用画像（2084×1969）が既定で、
       650px以上ではPC用画像（2605×1969）に差し替えます（下のブロック）。 */
    --card-ar-w: 2084;
    --card-ar-h: 1969;
    background: transparent;
    overflow: visible;         /* 影を切らない */
    align-items: center;       /* カードを左右中央に置く */
    /* 上下の余白。ここが「うしろのカードが覗く場所」になります */
    padding: 12svh 0 10svh;
    /* 上端を基準に縮める＝縮めても上辺が動かないので、ずらした分だけ上に出ます */
    transform-origin: 50% 0;
    /* 影はカード下の余白（padding-bottom＝4svh）の中に必ず収まる大きさにします。
       px で指定すると、画面の高さによっては余白をはみ出し、ステージの
       overflow: hidden で下端が直線状にぶつ切りになります。
       「ずらす量＋ぼかし」を 4svh 未満（＝0.7svh + 2svh）にして防いでいます。 */
    /* grayscale(0) brightness(1) を最初から書いておくのが大事です。
       CSSの filter は「関数の並びが同じときだけ」なめらかに変化します。
       手前のカードが drop-shadow だけ、うしろのカードが grayscale＋brightness＋drop-shadow
       だと並びが違うため、時間をかけずに一瞬で切り替わってしまいます
       （＝めくる前に色だけ先に変わって見える原因）。 */
    /* 【影は一旦非表示】再表示する場合は下のコメントの行に戻す（うしろのカード2か所も同様）。
       その際は、うしろのカードと関数の並びを揃えるため、末尾に drop-shadow を足すこと
    filter: grayscale(0) brightness(1) drop-shadow(0 0.7svh 2svh rgba(0, 0, 0, 0.14)); */
    /* 【軽量化・2026-09-22】うしろのカードのグレーアウトを filter から「白い膜を重ねる」方式に変更。
       以前は filter: grayscale() contrast() brightness() blur() を 0.45秒かけて変化させていたが、
       大きな画像2枚を毎コマ加工し直すため、3枚目をめくるときにコマ落ちしていた（計測で約33fps）。
       白い膜（下の picture::after）の opacity だけを動かす方式は描き直しが要らず 60fps で動く。
       見た目の違い：うしろのカードは白っぽくなるが、白黒・ぼかしは掛からない。
       元に戻す場合は css/style.css.bak9 を参照 */
    transition: transform 1s cubic-bezier(0.65, 0.07, 0.06, 1.01);
  }
  /* 画像の箱を「画像そのものの大きさ（2605×1969）」にぴったり合わせます。
     3枚とも同じ比率・同じ位置の完成カードなので、そのまま重ねれば
     縦にも横にもズレずに（互い違いにならずに）積み上がります。 */
  .p-top .p-visual.is-flip .p-visual__item--a picture,
  .p-top .p-visual.is-flip .p-visual__item--b picture,
  .p-top .p-visual.is-flip .p-visual__item--c picture {
    display: block;
    flex: 0 0 auto;
    width: min(100%, calc(var(--card-h) * var(--card-ar-w) / var(--card-ar-h)));
    aspect-ratio: var(--card-ar-w) / var(--card-ar-h);
    position: relative;        /* 下の白い膜（::after）の基準 */
  }
  /* うしろに回ったカードに重ねる白い膜（背景と同じ色）。濃さは data-depth ごとに下で指定。
     次のカードがめくれ終わるのに合わせて効かせるため、0.55秒待ってから0.45秒で濃くする
     （＝合計1秒でめくりと同時に完了。以前の filter と同じタイミング） */
  .p-top .p-visual.is-flip .p-visual__item--a picture::after,
  .p-top .p-visual.is-flip .p-visual__item--b picture::after,
  .p-top .p-visual.is-flip .p-visual__item--c picture::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.5svh;     /* 画像の角Rと同じ */
    background: var(--c-gray);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s linear 0.55s;
    /* 【カクつき対策・2026-09-25】この膜を最初から合成レイヤーとして持たせておく。
       指定が無いと、膜が濃くなり始める0.55秒後にブラウザがレイヤーを作り、
       めくり終わり（1秒後）に捨てるため、そこで描き直しが起きて1コマ落ちていた。
       3枚目は「手前・1枚うしろ・2枚うしろ」の3枚が同時に動くので、
       この作り直しが重なって最も目立っていた（計測：最長33ms→17ms／コマ落ち0）。
       合成の準備をするだけの指定なので、見た目・動き・秒数は一切変わらない */
    will-change: opacity;
  }
  .p-top .p-visual.is-flip .p-visual__item--a .p-visual__img,
  .p-top .p-visual.is-flip .p-visual__item--b .p-visual__img,
  .p-top .p-visual.is-flip .p-visual__item--c .p-visual__img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    /* 角R（PC・TBのみ。SPはこのブロックの対象外）。
       画像の箱は画像と同じ縦横比なので、箱の角を丸めればそのまま画像の角が丸まる。
       カードは画面の高さに合わせて伸び縮みするため、R も svh で比例させている
       （当初 2svh → 1svh → 0.75svh → 0.5svh に変更） */
    border-radius: 0.5svh;
  }

  /* 1枚うしろ */
  .p-top .p-visual.is-flip .p-visual__item--a[data-depth="1"],
  .p-top .p-visual.is-flip .p-visual__item--b[data-depth="1"],
  .p-top .p-visual.is-flip .p-visual__item--c[data-depth="1"] {
    transform: translate3d(0, -3svh, 0) scale(0.94);
    /* 以前は暗くするグレーアウト（乗算のような見え方）＋影
    filter: grayscale(0.85) brightness(0.94) drop-shadow(0 0.6svh 1.8svh rgba(0, 0, 0, 0.11)); */
    /* 白っぽいグレーアウト（以前は filter: grayscale(0.85) contrast(0.7) brightness(1.2) blur(2px)）。
       白い膜の濃さで表現する（軽量化のため。上の transition のコメント参照） */
  }
  .p-top .p-visual.is-flip .p-visual__item--a[data-depth="1"] picture::after,
  .p-top .p-visual.is-flip .p-visual__item--b[data-depth="1"] picture::after,
  .p-top .p-visual.is-flip .p-visual__item--c[data-depth="1"] picture::after { opacity: 0.45; }
  /* 2枚うしろ（奥ほど小さく・強くグレーアウト） */
  .p-top .p-visual.is-flip .p-visual__item--a[data-depth="2"],
  .p-top .p-visual.is-flip .p-visual__item--b[data-depth="2"],
  .p-top .p-visual.is-flip .p-visual__item--c[data-depth="2"] {
    transform: translate3d(0, -6svh, 0) scale(0.88);
    /* 以前は暗くするグレーアウト（乗算のような見え方）＋影
    filter: grayscale(1) brightness(0.9) drop-shadow(0 0.5svh 1.5svh rgba(0, 0, 0, 0.09)); */
    /* 奥ほど白く（以前は filter: grayscale(1) contrast(0.55) brightness(1.3) blur(4px)） */
  }
  .p-top .p-visual.is-flip .p-visual__item--a[data-depth="2"] picture::after,
  .p-top .p-visual.is-flip .p-visual__item--b[data-depth="2"] picture::after,
  .p-top .p-visual.is-flip .p-visual__item--c[data-depth="2"] picture::after { opacity: 0.65; }

  /* CHANGE の面は、カードが乗ったら隠します。
     （従来はカードの不透明な背景で覆われて見えなくなっていたのを、
       面を透明にしたぶん、こちらで同じ結果にしています） */
  .p-top .p-visual.is-flip .p-visual__item--change { transition: opacity 0.45s linear; }
  .p-top .p-visual.is-flip .p-visual__item--change[data-depth="1"],
  .p-top .p-visual.is-flip .p-visual__item--change[data-depth="2"],
  .p-top .p-visual.is-flip .p-visual__item--change[data-depth="3"] { opacity: 0; }
}

/* 650px以上は支給画像がPC用（2605×1969）に変わるので、カードの縦横比だけ差し替えます。
   重なり方・動き・影・グレーアウトは上のブロックをそのまま使います。 */
@media (min-width: 650px) {
  .p-top .p-visual.is-flip .p-visual__item--a,
  .p-top .p-visual.is-flip .p-visual__item--b,
  .p-top .p-visual.is-flip .p-visual__item--c {
    --card-ar-w: 2605;
  }
}

/* ---------------------------------------------
   11. Products
--------------------------------------------- */
.p-products {
  position: relative;
  background: var(--c-gray);
}

/* --- 商品ごとの背景（テキストと一体で動きます） ---
   以前は .p-products__bg を position:sticky で画面に固定し、その上を文字だけが
   流れていく作りでした。いまは商品ごとに .p-product__bg を持たせているので、
   スクロールしても背景とテキストの位置関係は変わりません。 */
.p-product__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.p-product__bg picture { display: contents; }
.p-product__bgImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 拡大倍率。現在はSP・PCとも 1（等倍）です。
     SPでズームすると画像が縦にはみ出して上下が切れるため、倍率は上げていません。 */
  transform: scale(var(--bg-scale, 1));
}
@media (max-width: 767px) {
  /* SP用の1.35倍ズームは廃止しました。ズームすると画像が縦にはみ出し、
     上下が見切れてしまうためです（下の「高さ基準」で大きさを決めます）。
     ズームを戻したい場合はこの値を 1.35 に変えてください。 */
  .p-product__bg { --bg-scale: 1; }
}

@media (max-width: 534px) {
  .p-product__bgImg {
    /* SP（〜534px）は「ブロックを必ず埋める」表示です（object-fit: cover）。
       画面幅が広がったぶんだけ画像も比例して拡大し、足りない側を切り落とすので、
       画像の端に空白（セクションの背景色）が見えることはありません。
       ・画面が縦長（375:667 ＝ 0.562 より縦長）… 左右が見切れます
       ・画面が横長（幅を広げたとき）           … 上下が見切れます
       ※「高さは気にしない／広げた分だけ引き伸ばす」という方針での指定です。 */
    width: 100%;
    height: 100%;
    max-width: none;      /* img 既定の max-width:100% を解除 */
    flex-shrink: 0;       /* 親が flex なので、これが無いと縮められます */
    object-fit: cover;    /* contain（収める）ではなく cover（埋める） */
  }

  /* 商品ブロックの高さを、背景画像と同じ縦横比（1563:2780）にします。
     画像を幅いっぱいまで引き伸ばすと画像の高さも伸びるため、その分ブロックを
     下へ伸ばし（＝次の商品が下にずれる）、商品と商品の境目で画像が切れないように
     しています。画面より低くはならないよう 100svh を下限にしています
     （＝縦長のスマホでは従来どおり1画面ぶんの高さ。左右だけ見切れます）。 */
  .p-product {
    width: 100%;          /* 幅を先に確定させる。これが無いと aspect-ratio が
                             「高さ→幅」に働いて、画面より横に広がってしまいます */
    aspect-ratio: 1563 / 2780;
    min-height: 100svh;
  }
}

/* PCは「画面の高さ基準」で表示します。
   以前の object-fit: contain は幅にも合わせるため、画面幅を狭めると画像まで
   小さくなっていました。PCの文字・ボタンは px 固定なので、背景だけが縮むと
   バランスが崩れます。そこで高さ100%で大きさを決め打ちし、
   幅が足りないぶんは .p-product__bg の overflow:hidden で左右を見切らせます。
   ※狭い画面ではしぶきの左右が切れます。これは承知のうえの仕様です
     （650〜767px も同じ「高さ基準」に揃えています）。 */
@media (min-width: 768px) {
  .p-product__bgImg {
    width: auto;
    height: 100%;
    max-width: none;      /* img 既定の max-width:100% を解除。これが無いと結局縮みます */
    flex-shrink: 0;       /* 親が flex なので、これが無いと狭い画面で押しつぶされます */
    object-fit: contain;
  }
}

.p-products__items {
  position: relative;
  z-index: 1;
}

/* 1商品＝1画面分のかたまり。3つが上から順に地続きで並びます。
   ページを切り替える演出（貼り付け・重ね・入れ替え）は入れていません。 */
.p-product {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--product-pad);
  text-align: center;
  /* 演出のマスクが左右に数px広がるため、画面外へはみ出さないよう切り取ります */
  overflow-x: clip;
}

/* 背景より前に出す */
.p-product__head,
.p-product__foot { position: relative; z-index: 1; }

/* 文字だけ、画面に入ってきたときにふわっと出てきます（画像は最初から出たまま） */
.p-product__head,
.p-product__foot {
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.p-product.is-shown .p-product__head,
.p-product.is-shown .p-product__foot { opacity: 1; }

/* JSが動かない／動きを減らす設定では、最初から表示 */
html:not(.js) .p-product__head,
html:not(.js) .p-product__foot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .p-product__head,
  .p-product__foot { opacity: 1; transition: none; }
}

/* 〇〇ml ／ 容器 ／ フレーバーのかたまり。左下に置きます。
   下へ動かすのは position: relative の top です（margin ではありません）。
   .p-product は上下中央ぞろえなので、margin を足すと READ MORE まで動いてしまいます。
   ずらす量 ＝ 「定位置からボタンまでの間隔（--pd-gap）」＋「ボタンの下げ幅（--pd-foot-top）」
              －「画像とボタンのすき間（--pd-head-gap）」。
   この式なら、画面の高さや画像の大きさが変わっても、画像の下端はいつも
   ボタンの --pd-head-gap だけ上に付いてきます（重なりません）。 */
.p-product__head {
  padding: 0;
  text-align: left;
  top: calc(var(--pd-gap) + var(--pd-foot-top) - var(--pd-head-gap));
}

/* --- SPのサイズの決め方 -------------------------------------------------
   1px の代わりに --u を使っています。

     --u = min(1px, 100vw / 375)

   ・画面幅375px以上 … --u は 1px のまま ＝ 375pxのときの見た目で固定
   ・画面幅375px未満 … --u が小さくなる ＝ 文字も余白も画像も同じ比率で縮小

   数値はすべて「375pxのときの実寸(px)」で書けるので、
   デザインカンプの数値をそのまま入れられます。
   ---------------------------------------------------------------------- */
/* PRODUCTS の下に1つだけ置く「SPARKLING WATER＋英文コピー」の画像。
   大きさは :root の --pd-title-w だけで決まります（高さは比率で自動）。
   画面が狭いときにはみ出さないよう min(100%, …) で上限をかけています。 */
.p-products__subImg {
  display: block;
  /* 下線 → SPARKLING WATER の間隔（SP） */
  margin-top: calc(20 * var(--u));
  width: min(100%, var(--pd-title-w));
  height: auto;
}

/* 「〇〇ml／容器／フレーバー」の画像。
   大きさは :root の --pd-head-w だけで決まります（高さは比率で自動）。
   従来の文字と同じく右寄せです（margin-left: auto）。 */
.p-product__headImg {
  display: block;
  width: min(100%, var(--pd-head-w));
  height: auto;
  margin-right: auto;   /* 左寄せ */
}

/* SPでは見出し・ボタンのブロックを中央寄せにします */
@media (max-width: 767px) {
  .p-product__head,
  .p-product__foot {
    width: 100%;
    max-width: var(--content-w);
    margin-inline: auto;
  }
}

/* テキスト画像の定位置 → READ MORE の間。背景のボトルが見える余白です（カンプ SP340px）。
   実際のテキスト画像は上の top でボタンのすぐ上まで下がります。 */
.p-product__foot { margin-top: var(--pd-gap); }

/* READ MOREボタン（カンプ SP 282×40px・文字14px）
   .c-btn-buy の共通指定より後に効かせるため、詳細度を1つ上げています */
.p-product__foot .p-product__btn {
  width: var(--pd-btn-w);
  height: var(--pd-btn-h);
  margin-inline: auto;
  font-size: var(--pd-btn-s);
}

/* ---- セクション見出し（縦棒線＋PRODUCTS＋下線）---- */
.p-products__head {
  position: relative;
  z-index: 1;
  /* flex にしておくと、要素どうしの間隔が行の余りに影響されず margin の値どおりになります */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(19 * var(--u));
  text-align: center;
}
/* PRODUCTS の上の縦棒線（SP 太さ1px×長さ46px）
   0.5px では細すぎるため 1px に変更（2026-09-22）。534px以下のSPだけに効く（535px以上は下の指定で1px） */
.p-products__vline {
  display: block;
  width: 1px;
  height: calc(46 * var(--u));
  background: var(--c-ink);
  /* 「下へスクロールできる」ことを伝える動き（PC・SP共通）。
     何もない状態 → 上から下へ線が伸びる、だけをくり返す（縮む動きは付けない）。
     線の太さ・長さは変えず、clip-path で見えている範囲だけを動かしている */
  animation: vline-flow 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* 画面外では止める（マーキーと同じ考え方・2026-09-24）。
   止まっている間は clip-path が「何も見えない」状態で固まるが、
   そもそも画面外なので見え方は変わらない。
   目印の .js-vline は、監視を始めた main.js だけが付ける。
   そのため CSS と JS のどちらか片方が古いキャッシュでも、
   「線が消えたまま」にはならず、これまでどおり動き続ける */
html.js-vline .p-products__vline { animation-play-state: paused; }
html.js-vline .p-products__vline.is-active { animation-play-state: running; }
@keyframes vline-flow {
  0%   { clip-path: inset(0 0 100% 0); }   /* 何も見えない */
  100% { clip-path: inset(0 0 0 0); }      /* 上から下まで伸びきる → 次の周はまた何もない状態から */
}
/* 動きを減らす設定では止めて、線をそのまま表示する */
@media (prefers-reduced-motion: reduce) {
  .p-products__vline { animation: none; }
}
.p-products__ttl {
  display: inline-block;               /* 見出し幅ぶんだけにして、演出用の余白が画面外にはみ出さないようにする */
  margin-top: calc(23 * var(--u));
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 900;
  font-size: calc(35 * var(--u));
  line-height: 1;
  letter-spacing: 0.01em;
}
.p-products__bar {                   /* 下線 SP 47×4px */
  display: block;
  width: calc(47 * var(--u));
  height: calc(4 * var(--u));
  margin: calc(7.5 * var(--u)) auto 0;
  background: var(--c-ink);
}

/* 3商品は重なっているので、商品どうしの余白はありません */
.p-products__head + .p-product { margin-top: 0; }
.p-product + .p-product { margin-top: 0; }

/* SP：SPARKLING WATER と1つ目の商品を近づけます。
   商品の背景写真は上側に何も写っていない余白があるため、見た目が離れて見えます。
   そのぶん商品を上へ重ねます（見出しは z-index: 1 なので写真の上に出たままです）。 */
@media (max-width: 534px) {
  .p-products__head + .p-product { margin-top: calc(-120 * var(--u)); }

  /* 商品どうしも重ねます。
     背景写真は上下に「何も写っていない透明な余白」を持っているので、
     そこを重ねれば、写真を切らずに（＝縦の見切れゼロのまま）間隔だけ詰まります。
     ブロックの高さ自体は変えていないので、画面幅が広がって写真が縦に伸びても
     切れることはありません。 */
  .p-product + .p-product { margin-top: calc(-120 * var(--u)); }
}
/* 旧：背景 sticky を保持するための余白。ステージ側で高さを持つようになったので使いません */

.c-btn-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(46 * var(--u, 1px));
  margin: 0;
  font-size: calc(14 * var(--u, 1px));
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-white);
  background: var(--c-ink);
  border-radius: 999px;
  border: 1px solid var(--c-ink);
  transition: color 0.25s, background-color 0.25s;
}
@media (hover: hover) {
  .c-btn-buy:hover { color: var(--c-ink); background: var(--c-white); }

  /* 商品のREAD MOREは色を変えず、グローバルナビと同じ .c-swap で
     文字が上へ抜け、下から同じ文字が入ってくる動きにします。 */
  .p-product__btn:hover { color: var(--c-white); background: var(--c-ink); }
  .p-product__btn:hover .c-swap > span { transform: translateY(-100%); }
}

/* ---------------------------------------------
   11.5 PRODUCTS（PCデザイン。★PRODUCTS三連だけ 535px 以上がPCデザインです。
       他のコンテンツは従来どおり650px以上がPCデザインなので、ここだけ別の
       ブレイクポイントになっています。触るときは混同しないでください）
   数値はカンプ（基準幅1400px）の実寸。
   ★PRODUCTS三連の文字・ボタンは「PCのサイズで固定」です。
     他のセクションは --pu（＝1400px未満で比率縮小）を使っていますが、
     ここだけは画面幅を変えてもサイズが変わらないよう px 直書きにしています。
     SPはSPのサイズ（--u のまま）。触るときはこの方針を崩さないでください。
--------------------------------------------- */
/* ここだけはPRODUCTS以外（KVなど）と共通のPC用パラメータなので 650px のままです */
@media (min-width: 650px) {
  .p-top #main { --pu: min(1px, calc(100vw / 1400)); --kv-gap: 30px; --kv-pb: 22px;
                 --pd-hold: 0px; }
}

@media (min-width: 535px) {
  /* 見出し（縦棒線＋PRODUCTS＋下線）。
     左右の余白は40px固定。SPARKLING WATER の画像はこの余白の内側に収まるまで
     縮みます（width: min(100%, --pd-title-w) の 100% がこの内側の幅になります）。 */
  .p-top .p-products__head {
    padding-top: 46px;
    padding-inline: 40px;
  }
  /* 縦棒線（PC 太さ1px×長さ106px） */
  .p-top .p-products__vline { width: 1px; height: 106px; }
  .p-top .p-products__ttl {
    margin-top: 63px;
    font-size: 81px;
  }
  .p-top .p-products__bar {                  /* 下線 161×11px */
    width: 161px;
    height: 11px;
    margin-top: 10px;
  }

  /* PRODUCTS の下の「SPARKLING WATER＋英文コピー」の画像。
     従来の文字（94px）と同じ見た目の大きさになる幅を px で固定しています。
     画面が狭いときだけ min(100%, …) ではみ出しを防ぎます。 */
  .p-top #main {
    --pd-title-w: 596px;
    /* 入り数画像を少し大きく（216px → 240px、約11%）。
    --pd-head-w: 216px;   360px の 3/5 */
    --pd-head-w: 240px;
    /* テキスト画像の定位置 → READ MORE の間隔。
       ＋104px は「画像を3/5に縮めたぶん」です（SPと同じ理由。上の説明を参照）。
       ここを1か所変えれば、テキスト画像の下がり方も一緒に付いてきます。
       画像を 240px にして高さが約17px増えたため、その分を引いて 87px にしています
       （引かないと、かたまりが大きくなった分だけ READ MORE の位置がずれるため）
    --pd-gap: calc(clamp(140px, calc(76svh - 335px), 756px) + 104px); */
    --pd-gap: calc(clamp(140px, calc(76svh - 335px), 756px) + 87px);
    /* PCは READ MORE を下げています（入り数画像もこの値の分だけ一緒に下がります）。
       当初は 20px 固定。カンプの位置感（ボタン下の余白＝画面の高さの約8%）に合わせるため、
       画面の高さに比例して下げる量を足しています（703px の画面で約21px、1080px で約35px 追加）
    --pd-foot-top: 20px;
    --pd-foot-top: calc(20px + max(0px, 3.8svh - 6px)); */
    /* さらに下げて、ボタンの上端を「1000ml 背景のボトルの下端（画像の高さの約91%）」の位置にしている。
       背景は画面の高さいっぱいに表示されるので、画面の高さに比例させればボトルとの位置関係は保たれる。
       ただし高さが低い画面ではボタンが画面の下にくっつく／はみ出すため、
       下の余白がおおよそ 12px を切らない値で止める（min の2つ目＝高さ600〜700px台、3つ目＝600px未満）。
       max(0px, …) は、極端に低い画面でボタンが上へ上がりすぎないための下限 */
    /* 3商品共通の下げ量。商品ごとの微調整（--pd-shift）は下の .p-top .p-product で足します */
    --pd-foot-base: max(0px, min(calc(63.2px + 2.9svh), calc(21.5svh - 66px), calc(50svh - 236px)));
  }
  /* 商品ごとに、入り数画像と READ MORE を一緒に上下させる量（＋で下、−で上）。
     --pd-foot-top は入り数画像とボタンの両方の位置に使われているので、ここで足せば2つ一緒に動きます */
  .p-top .p-product { --pd-foot-top: calc(var(--pd-foot-base) + var(--pd-shift, 0px)); }
  /* 1000ml：もう少し下へ。ボタンの下の余白が少ないので、画面が低いときは下げる量を減らす */
  .p-top #product-1000ml { --pd-shift: min(1.2svh, max(0px, calc(3.5svh - 16px))); }
  /* 195ml：もう少し上へ */
  .p-top #product-195ml { --pd-shift: -3svh; }
  .p-top .p-products__subImg {
    /* 下線 → SPARKLING WATER の間隔（PC） */
    margin-top: 70px;
  }
  /* 「PET BOTTLE」の下 → READ MORE（カンプ760px）
     カンプどおりの760pxだと、タイトルとボタンの距離が画面の縦幅より大きくなり、
     ノートPCなど縦の狭い環境では「どの商品のボタンなのか」が分からなくなります。
     そこで、タイトル〜ボタンのかたまりが画面の高さの76%に収まるよう間隔を自動で詰めます。
       ・下限 140px … これ以上は詰めない（背景のボトルが見える最低限の余白）
       ・上限 756px … カンプどおり（縦に非常に長い画面のみ）
     335px はタイトル群（約253px）＋ボタン（82px）の高さぶんです。 */
  .p-top .p-product__foot {
    margin-top: var(--pd-gap);
    /* READ MORE だけを --pd-foot-top（20px）下げます。
       .p-product は上下中央ぞろえなので、上の余白を増やすと
       「500ml / PET BOTTLE」まで上にずれてしまいます。
       top（position:relative）ならレイアウトに影響せず、ボタンだけが下がります。 */
    top: var(--pd-foot-top);
  }
  /* READ MOREボタン。カンプの 568×82px・文字28px を 3/5（60%）に縮小した固定サイズ */
  .p-top .p-product__foot .p-product__btn {
    width: 340.8px;    /* 568 × 0.6 */
    height: 49.2px;    /* 82 × 0.6 */
    font-size: 16.8px; /* 28 × 0.6 */
  }
  /* 3商品は重なっているので、商品どうしの余白はありません */
  .p-top .p-products__head + .p-product { margin-top: 0; }
.p-product + .p-product { margin-top: 0; }

  /* サイズ・種別・ボタンはコンテンツ幅800pxに収めます。
     サイズ・種別はこの800pxの右ラインに揃います。 */
  .p-top .p-product__head,
  .p-top .p-product__foot {
    width: 100%;
    /* --content-w は他コンテンツ用の変数で、535〜649px ではまだSPの315pxです。
       PRODUCTS だけ先にPCデザインになるので、PC用の800pxを直接使います。 */
    max-width: var(--content-w-pc);
    margin-inline: auto;
  }
  /* 「〇〇ml／容器／フレーバー」の画像を、左端から右へ寄せる（500・1000・195 共通）。
     画像の右端が「800px幅の中央（＝READ MOREの中心）から 43px 左」に来る位置。
     中央基準なので、画面幅が変わっても READ MORE との位置関係は変わらない。
     画面が狭くて左にはみ出す場合は 0（従来どおり左端）で止める */
  .p-top .p-product__headImg {
    margin-left: max(0px, calc(50% - 43px - var(--pd-head-w)));
  }
}

/* ---- PRODUCTS 3連：SP（〜534px）の位置調整 ---- */
@media (max-width: 534px) {
  .p-top #main {
    /* 入り数画像を少し大きく（155px → 172px、約11%。PCと同じ比率） */
    --pd-head-w: calc(172 * var(--u));
    /* 画像が大きくなって高さが約12px増えたぶん、間隔を詰める（366 → 354）。
       詰めないと、かたまりが大きくなった分だけ READ MORE の位置がずれるため */
    --pd-gap: calc(354 * var(--u));
    /* PCと同じく、入り数画像と READ MORE を一緒に下げる。
       ただしSPは次の商品が 120px 重なってくる（.p-product + .p-product の margin-top）ため、
       ボタンがその重なりに入ると、次の商品の画面の上端にボタンが映り込む。
       そこで「重なりの境目より 6px 上」まで下げる（＝下げられる最大量）。
       商品ブロックの高さは max(100svh, 画面幅×2780/1563) なので、その半分から逆算している。
       画面が低くて余裕がないときは 0（従来どおり）で止める
    --pd-foot-top: max(0px, min(calc(42svh - 259px), calc(50svh - 391px))); */
    /* 3商品共通の下げ量。商品ごとの微調整（--pd-shift）は下の .p-top .p-product で足します */
    --pd-foot-base: max(0px, calc(max(50svh, 88.93vw) - 385px));
  }
  /* 商品ごとに、入り数画像と READ MORE を一緒に上下させる量（＋で下、−で上）。PCと同じ仕組み */
  .p-top .p-product { --pd-foot-top: calc(var(--pd-foot-base) + var(--pd-shift, 0px)); }
  .p-top #product-1000ml { --pd-shift: 50px; }    /* 1000ml：50px 下へ */
  .p-top #product-195ml  { --pd-shift: -50px; }   /* 195ml：50px 上へ */
  /* READ MORE を --pd-foot-top ぶん下げる（入り数画像は .p-product__head の top で一緒に付いてくる） */
  .p-top .p-product__foot { top: var(--pd-foot-top); }
  /* 入り数画像を左へ（30px）。
     ただし画面の左端から 16px より近づかないようにする（375px の画面では 14px 左に寄せた位置で止まる）。
     (100vw - 315px) / 2 は、画像の入っている枠（幅315px・中央）の左側の余白
  .p-top .p-product__headImg { margin-left: calc(-10 * var(--u)); } */
  .p-top .p-product__headImg {
    margin-left: max(calc(-30 * var(--u)), calc(16 * var(--u) - (100vw - 315 * var(--u)) / 2));
  }
  /* PRODUCTS 3連（最後の 195ml）と SHOP LIST が離れて見えるため、SHOP LIST の上の余白を 100px 詰める
     （105.4px → 5.4px・2026-09-22）。商品ブロックの下側は背景写真の余白で空いて見えるので、
     見出しを商品ブロックの下端のすぐ下に置く。534px 以下のときだけ（PC／TB は従来どおり） */
  .p-top .p-shop { --sl-pt: calc(5.4 * var(--u)); }
}

/* ---------------------------------------------
   12. Shop list
   数値はカンプ実測（SP＝幅375px基準／PC＝幅1400px基準）。
   SPは --u、PCは --pu で画面幅に合わせて比率縮小します。
   サイズはすべて下の変数で持たせ、PCでは変数だけを差し替えています。
--------------------------------------------- */
.p-shop {
  /* ---- SP（カンプ 375px 基準）---- */
  --sl-title:   calc(35 * var(--u));    /* 見出し文字サイズ 35px */
  --sl-bar-w:   calc(48 * var(--u));    /* 見出し下の棒線 W48px */
  --sl-bar-h:   calc(4 * var(--u));     /* 　　　〃　　　  H4px */
  --sl-bar-mt:  calc(7 * var(--u));     /* 見出し → 棒線 */
  --sl-img-w:   calc(312 * var(--u));   /* ボトル画像の幅 */
  --sl-img-mt:  calc(17 * var(--u));    /* 棒線 → 画像 */
  --sl-list-w:  calc(312 * var(--u));   /* ボタン全体の幅 */
  --sl-list-mt: calc(15 * var(--u));    /* 画像 → ボタン */
  --sl-gap:     calc(8 * var(--u));     /* ボタンどうしの間隔（縦・横とも） */
  --sl-btn-h:   calc(38 * var(--u));    /* ボタンの高さ H38px */
  --sl-btn-s:   calc(12 * var(--u));    /* ボタンの文字サイズ 12px */
  --sl-arrow:   calc(11 * var(--u));    /* 斜め矢印の枠の大きさ */
  --sl-arrow-r: calc(11 * var(--u));    /* 矢印の右位置 */
  --sl-arrow-t: 1px;                    /* 矢印の線の太さ */
  --sl-pt:      calc(105.4 * var(--u)); /* READ MORE → 見出し（カンプ110px＝文字の上端まで） */
  --sl-pb:      calc(50 * var(--u));    /* ボタン → 次のセクション */

  margin-inline: auto;
  padding: var(--sl-pt) var(--pad-side) var(--sl-pb);
  text-align: center;
}
/* TOPページはPRODUCTSからの背景（#f6f6f6）をそのまま続けます */
.p-top .p-shop { background: var(--c-gray); }

.p-shop__title {
  display: block;
  margin: 0;
  font-size: var(--sl-title);
  line-height: 1;
}
/* 見出し下の棒線（センター配置） */
.p-shop__title::after {
  content: "";
  display: block;
  width: var(--sl-bar-w);
  height: var(--sl-bar-h);
  margin: var(--sl-bar-mt) auto 0;
  background: var(--c-black);
}
/* ヘッダー／フッターの SHOP LIST を押したときに、この見出しが止まる位置（画面上端からの距離）。
   SP・タブレットはヘッダーの帯の下に 12px 空けて止める */
.p-shop__title { scroll-margin-top: calc(var(--header-h) + 12px); }
/* PC（ピル型ナビが出る幅）は、ピルのすぐ下に見出しが来る位置 */
@media (min-width: 1024px) {
  .p-shop__title { scroll-margin-top: 60px; }
}

/* ボトルのラインナップ画像 */
.p-shop__img {
  display: block;
  width: var(--sl-img-w);
  max-width: 100%;
  height: auto;
  margin: var(--sl-img-mt) auto 0;
}

/* 1段目＝公式オンラインストア（横いっぱい）／2〜3段目＝2列 */
.p-shop__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sl-gap);
  width: var(--sl-list-w);
  max-width: 100%;
  margin: var(--sl-list-mt) auto 0;
}
.p-shop__list li.is-wide { grid-column: 1 / -1; }
.c-btn-link__txt { white-space: nowrap; }

/* 白地・黒枠・黒文字のピル型ボタン */
.c-btn-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--sl-btn-h);
  padding: 0 calc(var(--sl-arrow-r) + var(--sl-arrow));
  font-size: var(--sl-btn-s);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-ink);
  border-radius: 999px;
}

/* 斜め矢印（画像を使わず CSS のみで描画） */
.c-btn-link__arrow {
  position: absolute;
  top: 50%;
  right: var(--sl-arrow-r);
  width: var(--sl-arrow);
  height: var(--sl-arrow);
  margin-top: calc(var(--sl-arrow) / -2);
  transform: rotate(-45deg); /* 右上向きに */
}
/* 軸 */
.c-btn-link__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--sl-arrow-t);
  margin-top: calc(var(--sl-arrow-t) / -2);
  background: currentColor;
}
/* 矢じり */
.c-btn-link__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 50%;
  height: 50%;
  border-top: var(--sl-arrow-t) solid currentColor;
  border-right: var(--sl-arrow-t) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* SHOP LIST のボタンは色を反転させず、商品の READ MORE / グローバルナビと同じ
   .c-swap で文字が上へ抜け、下から同じ文字が入ってくる動きにします。
   （hover: hover のない SP では何も起きないので、見た目は白のまま変わりません） */
@media (hover: hover) {
  .c-btn-link:hover .c-swap > span { transform: translateY(-100%); }
}

/* ---- PC ----
   数値はカンプ（1400px基準）の実寸ですが、SHOP LIST だけは画面幅に連動させず
   常にこの大きさで固定します（--pu ではなく --slu を使用）。
   TOPページは650px以上、その他のページは768px以上がPCデザインなので、
   同じ値を2つのブレイクポイントに用意しています。 */
@media (min-width: 650px) {
  .p-top .p-shop {
    /* SHOP LIST は画面幅で拡大縮小しません。1400px より広くても狭くても、
       ここに書いた実寸のまま固定です（--pu ではなく専用の --slu を使います）。
       660px ＝ いちばん幅を取る見出し「SHOP LIST」の実測幅577px ＋ 左右の余白40px×2。
       これ以上狭いと入らないので、そこを下回ったときだけ、
       はみ出さないよう同じ比率で縮みます。 */
    --slu: min(1px, calc(100vw / 660));

    /* 見出しと下線、セクション上下の余白はそのまま */
    --sl-title:   calc(81 * var(--slu));
    --sl-bar-w:   calc(162 * var(--slu));
    --sl-bar-h:   calc(12 * var(--slu));
    --sl-bar-mt:  calc(9.5 * var(--slu));
    --sl-pt:      calc(167.4 * var(--slu));
    --sl-pb:      calc(122 * var(--slu));

    /* 画像・ボタン・間隔は、上の値からさらに 70%（元値 × 0.7）に落としています */
    --sl-img-w:   calc(392 * var(--slu));     /* 560 × 0.7 */
    --sl-img-mt:  calc(24 * var(--slu));      /* 34.3 × 0.7 */
    --sl-list-w:  calc(379.3 * var(--slu));   /* 541.8 × 0.7 */
    --sl-list-mt: calc(21.6 * var(--slu));    /* 30.8 × 0.7 */
    --sl-gap:     calc(10.8 * var(--slu));    /* 15.4 × 0.7 */
    --sl-btn-h:   calc(47 * var(--slu));      /* 67.2 × 0.7 */
    --sl-btn-s:   calc(12.7 * var(--slu));    /* 18.2 × 0.7 */
    --sl-arrow:   calc(15.2 * var(--slu));    /* 21.7 × 0.7 */
    --sl-arrow-r: calc(13.2 * var(--slu));    /* 18.9 × 0.7 */
    --sl-arrow-t: 1.5px;
  }
}
@media (min-width: 768px) {
  .p-shop {
    /* SHOP LIST は画面幅で拡大縮小しません。1400px より広くても狭くても、
       ここに書いた実寸のまま固定です（--pu ではなく専用の --slu を使います）。
       660px ＝ いちばん幅を取る見出し「SHOP LIST」の実測幅577px ＋ 左右の余白40px×2。
       これ以上狭いと入らないので、そこを下回ったときだけ、
       はみ出さないよう同じ比率で縮みます。 */
    --slu: min(1px, calc(100vw / 660));

    /* 見出しと下線、セクション上下の余白はそのまま */
    --sl-title:   calc(81 * var(--slu));
    --sl-bar-w:   calc(162 * var(--slu));
    --sl-bar-h:   calc(12 * var(--slu));
    --sl-bar-mt:  calc(9.5 * var(--slu));
    --sl-pt:      calc(167.4 * var(--slu));
    --sl-pb:      calc(122 * var(--slu));

    /* 画像・ボタン・間隔は、上の値からさらに 70%（元値 × 0.7）に落としています */
    --sl-img-w:   calc(392 * var(--slu));     /* 560 × 0.7 */
    --sl-img-mt:  calc(24 * var(--slu));      /* 34.3 × 0.7 */
    --sl-list-w:  calc(379.3 * var(--slu));   /* 541.8 × 0.7 */
    --sl-list-mt: calc(21.6 * var(--slu));    /* 30.8 × 0.7 */
    --sl-gap:     calc(10.8 * var(--slu));    /* 15.4 × 0.7 */
    --sl-btn-h:   calc(47 * var(--slu));      /* 67.2 × 0.7 */
    --sl-btn-s:   calc(12.7 * var(--slu));    /* 18.2 × 0.7 */
    --sl-arrow:   calc(15.2 * var(--slu));    /* 21.7 × 0.7 */
    --sl-arrow-r: calc(13.2 * var(--slu));    /* 18.9 × 0.7 */
    --sl-arrow-t: 1.5px;
  }
}

/* 195ml の下に入れた --pd-hold ぶん、SHOP LIST を上へ重ねて見た目の余白を元に戻します。
   SHOP LIST は不透明（#f6f6f6）なので、固定されたままの背景画像の上にせり上がって隠します。 */
.p-top .p-shop {
  position: relative;
  z-index: 1;
  /* さらに 1px 上に重ねる（2026-09-22）。商品ブロックの高さは縦横比から計算するため下端が端数
     （例：7164.08px）になり、スマホの高解像度画面や拡大・縮小表示では、同じ色の背景どうしの境目に
     1pxの隙間が描かれて横線に見える。SHOP LIST は手前（z-index: 1）なので、1px 重ねれば隙間がふさがる */
  margin-top: calc(var(--pd-hold) * -1 - 1px);
}

/* ---------------------------------------------
   13. Footer
--------------------------------------------- */
/* 高さ・コンテンツ幅・文字サイズはすべて固定値(px)。
   画面幅が変わっても見た目が変わらないようにしています。
   数値はデザイン支給どおり（SP 315px幅 / PC 800px幅）。 */
.l-footer {
  position: relative;
  height: 580px;                 /* SP 背景高さ */
  color: var(--c-white);
  background: var(--c-black);
  overflow: hidden;
}

/* 背景画像（動画から変更）。<picture> ごと全面に敷き、img は cover で必ず埋める。
   文字を読みやすくするため、動画のときと同じく画像を少し暗くしています。 */
.l-footer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.l-footer__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78);
}

/* 動画より後ろに書いてあるので、z-index の指定なしでも文字が前面に出ます。 */
.l-footer__inner {
  position: relative;
  width: 315px;                  /* SP コンテンツ幅 */
  max-width: calc(100% - 40px);  /* 315px+左右余白が入らない極小画面だけ縮む */
  margin-inline: auto;
  padding-top: 42px;             /* 上端 → 白ベタ */
  text-align: center;
}

/* 大きい見出しは支給SVG（newstandard.svg）。
   このSVG自体が「白ベタ＋文字の部分だけ透明」になっているので、
   置くだけで背景の動画が文字の中に透けて見えます（CSSでの合成は不要）。 */
.l-footer__lead {
  display: block;
  width: 100%;
  font-size: 0;
  line-height: 0;
}
.l-footer__lead > span { display: block; }
.l-footer__lead img {
  display: block;
  width: 100%;     /* SP 315px / PC 800px。画像は 800:200 なので高さは自動で 1/4 */
  height: auto;
}
/* せり上がり演出のマスクは余白を持たせない（白ベタを文字にぴったり合わせる） */
.l-footer__lead .c-tr { padding: 0; margin: 0; }

.l-footer__cols { margin-top: 42px; }   /* 白ベタ → リスト */

/* --- サイト内ナビ（SPは左揃えの縦並び） --- */
.l-footer__nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;                     /* リスト同士の間隔 */
  text-align: left;
}
.l-footer__nav a {
  display: block;
  font-family: var(--f-en);      /* Roboto */
  font-style: italic;            /* SP は SemiBold Italic */
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* --- ロゴ・SNS・リンク・コピーライト（中央揃え） --- */
.l-footer__side {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.l-footer__logo { display: block; margin-top: 48px; }   /* SHOP LIST → ロゴ */
.l-footer__logo img { display: block; width: 102px; height: auto; }

/* SNSアイコンは 42×42 のSVG。枠のサイズを揃えて等間隔に並べます */
.l-footer__sns {
  display: flex;
  justify-content: center;
  gap: 26px;                     /* アイコン同士の間隔 */
  margin-top: 21px;              /* ロゴ → SNS */
}
.l-footer__sns a { display: block; opacity: 0.9; transition: opacity 0.25s; }
.l-footer__sns img { display: block; width: 38px; height: 38px; }

.l-footer__links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;               /* SNS → リンク */
  font-family: var(--f-en);      /* Roboto */
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
}

.l-footer__copy {
  margin-top: 3px;               /* リンク → コピーライト */
  font-family: "Noto Sans JP", "Noto Sans", var(--f-base);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
}

@media (hover: hover) {
  .l-footer__nav a:hover,
  .l-footer__links a:hover { text-decoration: underline; }
  .l-footer__sns a:hover { opacity: 1; }
}

/* ===== PC ===== */
@media (min-width: 768px) {
  .l-footer { height: 665px; }                 /* PC 背景高さ */
  .l-footer__inner { width: 800px; padding-top: 66px; }
  .l-footer__cols { margin-top: 66px; }

  /* PCは横1列・中央揃え */
  .l-footer__nav ul {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 68px;
    text-align: center;
  }
  .l-footer__nav a { font-style: normal; font-weight: 400; }   /* PC は Regular */

  .l-footer__logo { margin-top: 82px; }
  .l-footer__logo img { width: 140px; }

  .l-footer__sns { gap: 38px; margin-top: 16px; }
  .l-footer__sns img { width: 50px; height: 50px; }

  .l-footer__links { gap: 24px; margin-top: 10px; }
  .l-footer__copy { margin-top: 3px; }
}

/* --- TOP／プロダクト／NEWS／プライバシーポリシーのフッターだけの調整 ---
   ・PCデザイン時は左右の余白を 40px のまま保ち、足りなくなったらSVGのほうを縮める
   ・SPデザインへの切り替えを 650px にする（他ページは 768px のまま） */
@media (min-width: 650px) {
  .p-productPage .l-footer__inner,
  .p-newsPage .l-footer__inner,
  .p-privacyPage .l-footer__inner,
  .p-supportPage .l-footer__inner,
  .p-top .l-footer__inner { max-width: calc(100% - 80px); }
}
@media (min-width: 650px) and (max-width: 767px) {
  .p-productPage .l-footer,
  .p-newsPage .l-footer,
  .p-privacyPage .l-footer,
  .p-supportPage .l-footer,
  .p-top .l-footer { height: 665px; }
  .p-productPage .l-footer__inner,
  .p-newsPage .l-footer__inner,
  .p-privacyPage .l-footer__inner,
  .p-supportPage .l-footer__inner,
  .p-top .l-footer__inner { width: 800px; padding-top: 66px; }
  .p-productPage .l-footer__cols,
  .p-newsPage .l-footer__cols,
  .p-privacyPage .l-footer__cols,
  .p-supportPage .l-footer__cols,
  .p-top .l-footer__cols { margin-top: 66px; }

  .p-productPage .l-footer__nav ul,
  .p-newsPage .l-footer__nav ul,
  .p-privacyPage .l-footer__nav ul,
  .p-supportPage .l-footer__nav ul,
  .p-top .l-footer__nav ul {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 68px;
    text-align: center;
  }
  .p-productPage .l-footer__nav a,
  .p-newsPage .l-footer__nav a,
  .p-privacyPage .l-footer__nav a,
  .p-supportPage .l-footer__nav a,
  .p-top .l-footer__nav a { font-style: normal; font-weight: 400; }

  .p-productPage .l-footer__logo,
  .p-newsPage .l-footer__logo,
  .p-privacyPage .l-footer__logo,
  .p-supportPage .l-footer__logo,
  .p-top .l-footer__logo { margin-top: 82px; }
  .p-productPage .l-footer__logo img,
  .p-newsPage .l-footer__logo img,
  .p-privacyPage .l-footer__logo img,
  .p-supportPage .l-footer__logo img,
  .p-top .l-footer__logo img { width: 140px; }

  .p-productPage .l-footer__sns,
  .p-newsPage .l-footer__sns,
  .p-privacyPage .l-footer__sns,
  .p-supportPage .l-footer__sns,
  .p-top .l-footer__sns { gap: 38px; margin-top: 16px; }
  .p-productPage .l-footer__sns img,
  .p-newsPage .l-footer__sns img,
  .p-privacyPage .l-footer__sns img,
  .p-supportPage .l-footer__sns img,
  .p-top .l-footer__sns img { width: 50px; height: 50px; }

  .p-productPage .l-footer__links,
  .p-newsPage .l-footer__links,
  .p-privacyPage .l-footer__links,
  .p-supportPage .l-footer__links,
  .p-top .l-footer__links { gap: 24px; margin-top: 10px; }
  .p-productPage .l-footer__copy,
  .p-newsPage .l-footer__copy,
  .p-privacyPage .l-footer__copy,
  .p-supportPage .l-footer__copy,
  .p-top .l-footer__copy { margin-top: 3px; }
}

/* 下層ページは背景動画を敷かないので、高さは中身なりにする */
/* 下層ページは背景動画を敷かないので高さは中身なり。
   ただしNEWS一覧はTOPと同じ仕様（動画あり・固定高さ）なので除外します。 */
.p-under:not(.p-newsPage):not(.p-productPage):not(.p-privacyPage):not(.p-supportPage) .l-footer { height: auto; padding-bottom: 48px; }

/* ---------------------------------------------
   14. Scroll reveal
--------------------------------------------- */
/* JS が有効な時だけ隠す（JS 無効環境では最初から表示される） */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js [data-reveal].is-inview { opacity: 1; transform: none; }

/* --- テキストが下からせり上がって出るアニメーション ---
   JS が各行を .c-tr（マスク）+ .c-tr__inner（動く中身）に包みます。
   .c-tr の余白は、イタリックのはみ出しと文字のディセンダが
   マスクで欠けないようにするための補正です。 */
.js [data-reveal-text]:not([data-tr-ready]) { opacity: 0; }

.js .c-tr {
  display: block;
  overflow: hidden;
  padding: 0.06em 0.1em 0.16em;
  margin: -0.06em -0.1em -0.16em;
}
.js .c-tr__inner {
  display: block;
  transform: translate3d(0, 115%, 0);
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.js [data-reveal-text].is-inview .c-tr__inner { transform: translate3d(0, 0, 0); }

/* --- ボタン類は登場アニメーションなし ---
   ボタン（READ MORE／SHOP LIST／ONLINE SHOP など）は、
   テキストのせり上がり（.c-tr マスク）も、ボタン自体のフェードインも行いません。
   HTML側から data-reveal-text は外していますが、
   万一残っていても効かないようここでも打ち消しています。
   ※ホバー時の演出（.c-swap の入れ替え・色の反転）はこれまで通りです。 */
.js .c-btn-buy [data-reveal-text],
.js .c-btn-link [data-reveal-text],
.js .c-btn-shop [data-reveal-text] { opacity: 1; }
.js .c-btn-buy .c-tr,
.js .c-btn-link .c-tr,
.js .c-btn-shop .c-tr { overflow: visible; padding: 0; margin: 0; }
.js .c-btn-buy .c-tr__inner,
.js .c-btn-link .c-tr__inner,
.js .c-btn-shop .c-tr__inner { transform: none; transition: none; }
.js .c-btn-buy[data-reveal],
.js .c-btn-link[data-reveal],
.js .c-btn-shop[data-reveal] { opacity: 1; transform: none; transition: none; }

/* SHOP LIST の罫も合わせて伸ばす */
.js .p-shop__title::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--ease) 0.3s;
}
.js .p-shop__title.is-inview::after { transform: scaleX(1); }

/* ---------------------------------------------
   15. Reduced motion
--------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal-text] { opacity: 1; }
  .js .c-tr__inner { transform: none; }
  .js .p-change { height: auto; }
  .js .p-change__sticky { position: static; height: auto; min-height: 60svh; }
  .js .p-change__sticky { padding-block: 40px; }
  .js .p-shop__title::after { transform: scaleX(1); }
  .c-marquee__track { animation: none; }
}

/* ---------------------------------------------
   16. PC 仮レイアウト（デザイン支給後に本調整）
--------------------------------------------- */
@media (min-width: 768px) {
  body { font-size: 1.6rem; }

  /* PCの見出しサイズは固定。nowrap で改行は OF のあと1回だけ。 */
  .p-kv__title {
    /* 画面幅に応じた自動縮小はしない。PCは常に 40px 固定 */
    font-size: 40px;
  }

  .p-news { max-width: 560px; }
  .p-news__label { font-size: calc(1.7rem * var(--news-s)); }   /* PC 17px */
  .p-news__ttl   { font-size: calc(1.2rem * var(--news-s)); }   /* PC 12px */
  .p-news__txt   { font-size: calc(1.2rem * var(--news-s)); }   /* PC 12px */
  .p-news__label-hot::after { height: 2px; }                    /* PC W18×H2px */


  .p-change__txt { font-size: calc(1.5rem * var(--ch-txt-s)); }

  /* 背景固定に合わせ、テキストは左側に寄せる（背景の商品と重ならないように） */
  .p-product {
    padding-inline: var(--product-pad);
  }

}

/* =========================================================
   TOPページのブレイクポイント（ヘッダー／CHANGE演出を除く）
   ・650px以上 … PCデザイン。左右余白は 40px 固定で、足りなくなったら中身が縮む
   ・649px以下 … SPデザイン。左右余白 20px
   ヘッダーに変数が渡らないよう、main（#main）に指定しています。
   CHANGE YOUR LIFE の演出は従来どおり（左右40px/20pxの余白は入れません）。
   ========================================================= */
@media (min-width: 650px) and (max-width: 767px) {
  .p-top #main {
    --pad-side: 40px;
    --content-w: var(--content-w-pc);
    --product-pad: clamp(48px, 7vw, 120px);
    --mq-stroke: 1.4px;
    --mq-fs: 2.8rem;        /* PC 28px */
    --mq-h: 70px;           /* PC 帯の高さ 70px */
    --mq-speed: 64s;
    --pd-btn-w: 436px;      /* READ MOREボタンの幅（PC） */
    --pd-btn-h: 53px;
    --pd-btn-s: 2.1rem;
    --pd-btn-bottom: 40px;
  }
  .p-top { font-size: 1.6rem; }

  /* KV */
  .p-top .p-kv__title {
    /* 画面幅に応じた自動縮小はしない。PCは常に 40px 固定 */
    font-size: 40px;
  }

  /* HOT NEWS */
  .p-top .p-news { max-width: 560px; }
  .p-top .p-news__label { font-size: calc(1.7rem * var(--news-s)); }
  .p-top .p-news__ttl   { font-size: calc(1.2rem * var(--news-s)); }
  .p-top .p-news__txt   { font-size: calc(1.2rem * var(--news-s)); }
  .p-top .p-news__label-hot::after { height: 2px; }

  /* マーキー */
  .p-top .c-marquee__hollow { -webkit-text-stroke-width: 1.4px; }

  /* CHANGE YOUR LIFE：演出は従来どおり。左右の余白も入れない（SPと同じ20px） */
  .p-top .p-change__main { padding-inline: calc(20 * var(--u)); }

}

/* PRODUCTS（535〜767px）。768px以上と同じく「画面の高さ基準で固定」にします。
   以前は object-fit: contain（＝幅にも合わせる）だったため、狭めるにつれて
   画像が小さくなっていました。
   幅が足りないぶんは .p-product__bg の overflow:hidden で左右を見切らせます。
   ※PRODUCTS だけ 535px からPCデザインなので、他のTOP調整（650〜767px）とは
     別のブロックにしています。 */
@media (min-width: 535px) and (max-width: 767px) {
  .p-top .p-product__bgImg {
    width: auto;
    height: 100%;
    max-width: none;      /* img 既定の max-width:100% を解除。これが無いと結局縮みます */
    flex-shrink: 0;       /* 親が flex なので、これが無いと狭い画面で押しつぶされます */
    object-fit: contain;
  }
  .p-top .p-product {
    padding-inline: var(--product-pad);
  }
}

/* ==========================================================================
   ここから下は「下層ページ共通」のスタイル
   1つの style.css に集約しています（複数ページで同じファイルが
   キャッシュされるため、ページごとにCSSを分けるより通信が減ります）
   ========================================================================== */

/* ---------------------------------------------
   17. 下層ページ共通レイアウト
--------------------------------------------- */
/* 下層ページはヘッダーを常時ベタ塗りにする */
.p-under:not(.p-newsPage) .l-header { background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.p-under .l-header.is-solid { backdrop-filter: none; }
/* NEWS一覧のヘッダーはTOPと同じ＝背景なし・下線なし */
.p-newsPage .l-header,
.p-newsPage .l-header.is-solid { background: transparent; border-bottom: 0; backdrop-filter: none; }

.l-under {
  padding-top: var(--header-h);
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.l-inner {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--pad-side);
}
.l-inner--wide { max-width: 1120px; }

/* --- パンくず --- */
.c-breadcrumb {
  padding: 16px 0 0;
  font-size: 1.1rem;
  color: var(--c-gray-d);
}
.c-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.c-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--c-line); }
.c-breadcrumb a { color: var(--c-gray-d); }
@media (hover: hover) { .c-breadcrumb a:hover { color: var(--c-black); } }

/* --- ページ見出し --- */
.c-pagehead { padding: 32px 0 40px; text-align: center; }
/* プロダクト詳細だけ、見出しの下にサイズ切り替えリンクが入るので下余白を調整 */
.p-productPage .c-pagehead { padding-bottom: 27px; }
.c-pagehead__en {
  font-family: var(--f-en);      /* Roboto Black Italic */
  font-style: italic;
  font-weight: 900;
  font-size: 35px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #000000;
}
.c-pagehead__en::after {         /* 見出し下線 48×4px */
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 8px;
  margin-inline: auto;
  background: #000000;
}
.c-pagehead__ja {
  margin-top: 14px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-gray-d);
}
.js .c-pagehead__en::after {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.8s var(--ease) 0.3s;
}
.js .c-pagehead__en.is-inview::after { transform: scaleX(1); }

@media (min-width: 650px) {
  .c-pagehead__en { font-size: 81px; }
  .c-pagehead__en::after { width: 105px; height: 9px; margin-top: 15px; }
}
@media (min-width: 768px) {
  .c-pagehead { padding: 56px 0 64px; }
}

/* --- 本文まわりの共通タイポグラフィ --- */
.c-body { padding-bottom: 80px; font-size: 1.4rem; line-height: 2; }
.c-body > * + * { margin-top: 1.4em; }

.c-body h2 {
  position: relative;
  margin-top: 2.6em;
  padding-left: 16px;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5;
}
.c-body h2::before {
  content: "";
  position: absolute;
  top: 0.28em; left: 0;
  width: 4px; height: 1em;
  background: var(--c-black);
}
.c-body h3 {
  margin-top: 2.2em;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
}
.c-body p { font-size: 1.4rem; }
.c-body a { text-decoration: underline; text-underline-offset: 0.2em; }
.c-body strong { font-weight: 700; }
.c-body small { font-size: 1.2rem; color: var(--c-gray-d); }

.c-body ul, .c-body ol { padding-left: 1.4em; }
.c-body ul > li { list-style: disc; }
.c-body ol > li { list-style: decimal; }
.c-body li + li { margin-top: 0.5em; }

.c-body blockquote {
  padding: 16px 20px;
  border-left: 4px solid var(--c-line);
  background: var(--c-gray);
  font-size: 1.3rem;
}

.c-body figure figcaption {
  margin-top: 8px;
  font-size: 1.2rem;
  color: var(--c-gray-d);
}

.c-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.3rem;
}
.c-body th, .c-body td {
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.c-body th {
  width: 34%;
  background: var(--c-gray);
  font-weight: 700;
  white-space: nowrap;
}
/* スマホでは縦積みに */
@media (max-width: 599px) {
  .c-body table, .c-body tbody, .c-body tr, .c-body th, .c-body td { display: block; width: 100%; }
  .c-body tr + tr { margin-top: -1px; }
  .c-body th { white-space: normal; }
  .c-body th + td { border-top: 0; }
}

@media (min-width: 768px) {
  .c-body { padding-bottom: 120px; font-size: 1.6rem; }
  .c-body h2 { font-size: 2.4rem; }
  .c-body h3 { font-size: 1.9rem; }
  .c-body p { font-size: 1.6rem; }
}

/* --- 条文リスト（利用規約・プライバシーポリシー） --- */
.c-article { counter-reset: sec; }
.c-article__sec + .c-article__sec { margin-top: 3em; }
.c-article__ttl {
  position: relative;
  padding-left: 16px;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6;
}
.c-article__ttl::before {
  content: "";
  position: absolute;
  top: 0.3em; left: 0;
  width: 4px; height: 1em;
  background: var(--c-black);
}
.c-article__sec > * + * { margin-top: 1em; }
.c-article__date {
  margin-top: 4em;
  text-align: right;
  font-size: 1.2rem;
  color: var(--c-gray-d);
}
@media (min-width: 768px) {
  .c-article__ttl { font-size: 2.1rem; }
}

/* ---------------------------------------------
   18. NEWS 一覧
--------------------------------------------- */
.p-newslist { padding-bottom: 72px; }
.p-newslist__item { border-top: 1px solid var(--c-line); }
.p-newslist__item:last-child { border-bottom: 1px solid var(--c-line); }

.p-newslist__link {
  display: grid;
  grid-template-columns: 88px 1fr;
  grid-template-areas:
    "thumb meta"
    "thumb ttl";
  align-items: start;
  gap: 6px 16px;
  padding: 20px 0;
  transition: opacity 0.25s;
}
.p-newslist__thumb {
  grid-area: thumb;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-gray);
}
.p-newslist__thumb img { width: 100%; height: 100%; object-fit: cover; }

.p-newslist__meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 10px;
}
.p-newslist__date {
  font-family: var(--f-en);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.p-newslist__cat {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: 999px;
}
.p-newslist__ttl {
  grid-area: ttl;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
}

@media (hover: hover) {
  .p-newslist__link:hover { opacity: 0.55; }
}

@media (min-width: 768px) {
  .p-newslist__link {
    grid-template-columns: 160px 120px 88px 1fr;
    grid-template-areas: "thumb date cat ttl";
    align-items: center;
    gap: 0 24px;
    padding: 24px 0;
  }
  .p-newslist__meta { display: contents; }
  .p-newslist__date { grid-area: date; font-size: 1.4rem; }
  .p-newslist__cat { grid-area: cat; justify-self: start; }
  .p-newslist__ttl { grid-area: ttl; font-size: 1.6rem; }
}

/* --- ページャー --- */
.c-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; }
.c-pager li a, .c-pager li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px; height: 34px;
  padding: 0 10px;
  font-family: var(--f-en);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: 999px;
  transition: color 0.25s, background-color 0.25s;
}
.c-pager li span[aria-current="page"] { color: var(--c-white); background: var(--c-ink); }
.c-pager li span:not([aria-current]) { color: var(--c-line); border-color: var(--c-line); }
@media (hover: hover) {
  .c-pager li a:hover { color: var(--c-white); background: var(--c-ink); }
}

/* ---------------------------------------------
   19. NEWS 詳細
--------------------------------------------- */
.p-article__head { padding: 8px 0 28px; border-bottom: 1px solid var(--c-line); }
.p-article__meta { display: flex; align-items: center; gap: 12px; }
.p-article__date {
  font-family: var(--f-en);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.p-article__cat {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: 999px;
}
.p-article__ttl {
  margin-top: 14px;
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.5;
}
.p-article__eyecatch { margin: 28px 0 0; }
.p-article__eyecatch img { width: 100%; }

.p-article__body { padding-top: 32px; }

/* 前後記事ナビ */
.p-articlenav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-en);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.p-articlenav__prev { justify-self: start; }
.p-articlenav__next { justify-self: end; }
.p-articlenav__index {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 22px;
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: 999px;
  transition: color 0.25s, background-color 0.25s;
}
.p-articlenav span { color: var(--c-line); }
@media (hover: hover) {
  .p-articlenav a:hover { opacity: 0.55; }
  .p-articlenav__index:hover { opacity: 1; color: var(--c-white); background: var(--c-ink); }
}

/* ---------------------------------------------
   20. FAQ（<details> ベースのアコーディオン）
--------------------------------------------- */
.p-faq { padding-bottom: 80px; }
.p-faq__group + .p-faq__group { margin-top: 48px; }
.p-faq__cat {
  margin-bottom: 16px;
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.04em;
}
.p-faq__cat .en { display: block; }
.p-faq__cat .ja {
  display: block;
  margin-top: 6px;
  font-family: var(--f-ja);
  font-style: normal;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--c-gray-d);
}

.c-acc { border-top: 1px solid var(--c-line); }
.c-acc:last-of-type { border-bottom: 1px solid var(--c-line); }
.c-acc > summary {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 20px 44px 20px 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}
.c-acc > summary::-webkit-details-marker { display: none; }
.c-acc > summary::before {
  content: "Q";
  flex-shrink: 0;
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1.35;
}
/* ＋ / − アイコン */
.c-acc__icon {
  position: absolute;
  top: 50%; right: 4px;
  width: 16px; height: 16px;
  margin-top: -8px;
}
.c-acc__icon::before,
.c-acc__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform 0.35s var(--ease);
}
.c-acc__icon::after { transform: rotate(90deg); }
.c-acc[open] .c-acc__icon::after { transform: rotate(0deg); }

.c-acc__body { overflow: hidden; }
.c-acc__inner {
  display: flex;
  gap: 12px;
  padding: 0 0 22px;
  font-size: 1.4rem;
  line-height: 1.9;
}
.c-acc__inner::before {
  content: "A";
  flex-shrink: 0;
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1.35;
  color: var(--c-gray-d);
}
.c-acc__inner a { text-decoration: underline; text-underline-offset: 0.2em; }

@media (min-width: 768px) {
  .p-faq__cat { font-size: 2.6rem; }
  .c-acc > summary { padding: 24px 52px 24px 0; font-size: 1.6rem; }
  .c-acc__inner { font-size: 1.5rem; }
}

/* ---------------------------------------------
   20.5 FAQページ（デザイン準拠）
        ・背景 #f6f6f6 ／ このページの黒は真っ黒 #000
        ・幅はTOPと同じ（SP335px / PC800px）
--------------------------------------------- */
.p-faqPage { background: #f6f6f6; }
/* ヘッダーはTOPページと同じ（背景なし・罫なし） */
.p-faqPage .l-header,
.p-faqPage .l-header.is-solid { background: transparent; border-bottom: 0; backdrop-filter: none; }
/* パンくずが無いぶん、上に余白を足す */
.p-faqPage .l-under { padding-top: calc(var(--header-h) + 24px); }
/* 真っ黒(#000)にするのは本文エリアだけ。
   ヘッダー・マーキー・フッターはサイト共通の配色のままにします。 */
.p-faqPage .l-under {
  --c-ink: #000;
  --c-black: #000;
  color: #000;
}
/* SPはコンテンツ幅を315px（--content-w）で固定し、中央寄せにします。
   PCは他のページと同じくコンテンツ幅800pxで中央寄せです。 */
.p-faqPage .l-inner {
  max-width: calc(var(--content-w) + var(--pad-side) * 2);
  margin-inline: auto;
}

.p-faq__title {
  /* SPは375px基準で固定（--u）。375px以上は28pxのまま変わらず、375px未満のみ縮小。 */
  margin-bottom: calc(28 * var(--u));
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 900;
  /* 画面幅で拡大縮小しない（SP 35px固定 / PC 81px）。
     375px未満でも縮小させず、常に35pxで固定します。 */
  font-size: 35px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #000000;
  text-align: center;
}
.p-faq__title::after {           /* 見出し下線 48×4px */
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 8px;
  margin-inline: auto;
  background: #000000;
}
@media (min-width: 650px) {
  .p-faq__title { font-size: 81px; margin-bottom: clamp(28px, 6vw, 48px); }
  .p-faq__title::after { width: 105px; height: 9px; margin-top: 15px; }
}

.p-faqPage .p-faq { padding-bottom: calc(60 * var(--u)); }

/* Q の行。下線のみ。このページの線・文字はすべて黒 */
.p-faqPage .l-under { --c-line: #000; --c-gray-d: #000; }
.p-faqPage .c-acc { border-top: 0; border-bottom: 1px solid #000; }
.p-faqPage .c-acc:last-of-type { border-bottom: 1px solid #000; }
.p-faqPage .c-acc > summary { gap: 10px; font-weight: 500; }
.p-faqPage .c-acc > summary::before {
  content: "Q";
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  line-height: inherit;
}
.p-faqPage .c-acc__inner::before {
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  line-height: inherit;
  color: #000;
}
.p-faqPage .c-acc__icon::before,
.p-faqPage .c-acc__icon::after { height: 1px; margin-top: -0.5px; }
/* ＋ボタンの位置：基準（right:4px）から SP15px / PC40px 内側へ寄せる */
.p-faqPage .c-acc__icon { right: 19px; }
@media (min-width: 650px) {
  .p-faqPage .c-acc__icon { right: 44px; }
}

/* カスタマーサポート */
.p-faq__support { margin-top: calc(48 * var(--u)); }
.p-faq__supportTtl { font-size: 1.4rem; font-weight: 700; }
.p-faq__supportTxt { margin-top: 10px; font-size: 1.15rem; line-height: 1.9; }

.p-faq__box {
  margin-top: 16px;
  padding: 14px 16px;
  background: #f6f6f6;          /* ページ背景と同じ */
  border: 1px solid #000;
}
.p-faq__box dl { font-size: 1.2rem; line-height: 1.9; }
.p-faq__box dl > div { display: flex; }
.p-faq__box dt { flex-shrink: 0; }
.p-faq__box dd { margin: 0; }
.p-faq__box a { text-decoration: none; }
@media (hover: hover) { .p-faq__box a:hover { text-decoration: underline; } }
/* PCは「文字は左揃えのまま、かたまりを枠の中央に置く」（SPは左寄せのまま） */
@media (min-width: 650px) {
  .p-faq__box dl { width: fit-content; margin-inline: auto; }
}

@media (min-width: 768px) {
  .p-faqPage .p-faq { padding-bottom: clamp(60px, 12vw, 110px); }
  .p-faqPage .c-acc > summary { padding: 26px 52px 26px 0; font-size: 1.5rem; }
  .p-faq__support { margin-top: clamp(48px, 9vw, 76px); }
  .p-faq__supportTtl { font-size: 1.6rem; }
  .p-faq__supportTxt { font-size: 1.3rem; }
  .p-faq__box { margin-top: 20px; padding: 18px 24px; }
  .p-faq__box dl { font-size: 1.4rem; }
}

/* ---------------------------------------------
   20.5 リーガルページ（利用規約 / プライバシーポリシー）
        ・背景はグレー #f6f6f6
        ・文字・罫線はすべて真っ黒 #000
        ・コンテンツ幅 PC:800px / SP:315px（中央寄せ）
--------------------------------------------- */
.p-legalPage { background: #f6f6f6; }
/* 本文エリアの文字・線をすべて #000 に。ヘッダー・マーキー・フッターは
   サイト共通の配色のままにするため l-under スコープで上書きします。 */
.p-legalPage .l-under {
  --c-ink: #000;
  --c-black: #000;
  --c-line: #000;
  --c-gray-d: #000;
  background: #f6f6f6;
  color: #000;
}
/* コンテンツ幅：PC=800px / SP=315px（--content-w が幅で切り替わる）を中央寄せ */
.p-legalPage .l-inner {
  max-width: calc(var(--content-w) + var(--pad-side) * 2);
  margin-inline: auto;
}

/* リーガル／プロダクト詳細ページのヘッダーは TOP と同じく透過（白背景・下線を消す）。 */
.p-legalPage .l-header,
.p-legalPage .l-header.is-solid,
.p-productPage .l-header,
.p-productPage .l-header.is-solid {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

/* リーガル本文（規約・ポリシー）。
   小見出しも本文もサイズ・ウェイトは一律（SP14px / PC18px・weight400）。
   white-space: pre-line で、原稿の改行はそのまま、空行(1行空け)もそのまま反映。
   余計な padding は付けず、行間だけで間隔をとる。 */
.c-legalBody {
  white-space: pre-line;
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  color: #000;
  word-break: break-word;
  padding-bottom: calc(80 * var(--u));
}
.c-legalBody a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; word-break: break-all; }
/* 規約ページのみ：小見出し（規約・第○項）と末尾の注記は本文と別サイズ（ウェイトは一律）。 */
.c-legalBody__ttl { font-size: 17px; }
.c-legalBody__note { font-size: 10px; }
@media (min-width: 768px) {
  .c-legalBody { font-size: 18px; padding-bottom: 120px; }
  .c-legalBody__ttl { font-size: 23px; }
  .c-legalBody__note { font-size: 14px; }
}

/* =========================================================
   プライバシーポリシーのブレイクポイント（ヘッダーを除く）
   ・650px以上 … PCデザイン。左右余白は 40px 固定で、足りなくなったら中身が縮む
   ・649px以下 … SPデザイン。左右余白 20px・コンテンツ幅 315px
   ヘッダーに変数が渡らないよう、main（.l-under）に指定しています。
   ========================================================= */
@media (min-width: 650px) and (max-width: 767px) {
  .p-privacyPage .l-under {
    --pad-side: 40px;
    --content-w: var(--content-w-pc);
  }
  /* ページ見出し */
  .p-privacyPage .c-pagehead { padding: 56px 0 64px; }
  /* 本文 */
  .p-privacyPage .c-legalBody { font-size: 18px; padding-bottom: 120px; }
  .p-privacyPage .c-legalBody__ttl { font-size: 23px; }
  .p-privacyPage .c-legalBody__note { font-size: 14px; }
  /* マーキー（main の外なので個別に渡す） */
  .p-privacyPage .c-marquee {
    --mq-fs: 2.8rem;      /* PC 28px */
    --mq-h: 70px;         /* PC 帯の高さ 70px */
    --mq-speed: 64s;
  }
  .p-privacyPage .c-marquee__hollow { -webkit-text-stroke-width: 1.4px; }
}

/* ---------------------------------------------
   20.5b カスタマーサポート（support/）
        CUSTOMER SUPPORT 一覧 / 会社概要 / お問い合わせ
        ・背景はグレー #f6f6f6
        ・コンテンツ幅 PC:800px / SP:315px（中央寄せ）
        ・数値は支給カンプどおりの固定px
--------------------------------------------- */
.p-supportPage { background: #f6f6f6; }
.p-supportPage .l-under {
  --c-ink: #000;
  --c-black: #000;
  --c-line: #000;
  --c-gray-d: #000;
  background: #f6f6f6;
  color: #000;
}
/* コンテンツ幅：PC=800px / SP=315px（--content-w が幅で切り替わる）を中央寄せ */
.p-supportPage .l-inner {
  max-width: calc(var(--content-w) + var(--pad-side) * 2);
  margin-inline: auto;
}
/* CUSTOMER SUPPORT は文字数が多いので、PCでは1行に収まる大きさまで詰める
   （カンプどおり800px幅にちょうど収まる比率。SPは2行のまま） */
.p-supportIndex .c-pagehead__en { white-space: normal; }

/* 一覧・会社概要・お問い合わせは「見出し下線 → 中身」の余白を
   カンプの数値で持たせるため、見出しブロックの下パディングを外す */
.p-supportIndex .c-pagehead,
.p-profilePage .c-pagehead,
.p-contactPage .c-pagehead { padding-bottom: 0; }

/* 中身が短いページでもフッターが画面下まで届くようにする */
.p-supportPage { display: flex; flex-direction: column; min-height: 100svh; }
.p-supportPage .l-under { flex: 1 0 auto; }
/* ヘッダーは TOP と同じく透過（白背景・下線を消す） */
.p-supportPage .l-header,
.p-supportPage .l-header.is-solid {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}
/* --- 一覧（利用規約 / FAQ / 会社概要 / お問い合わせ） --- */
.p-support__list {
  margin: 40px 0 0;              /* 見出し下線 → 1件目 */
  padding: 0 0 68px;             /* 最後の罫線 → フッター */
  list-style: none;
}
.p-support__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 92px;                  /* 1件の高さ（罫線から罫線まで） */
  border-bottom: 0.3px solid #000;
  color: #000;
}
.p-support__label {
  font-family: var(--f-ja);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.p-support__arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #000;
  border-radius: 50%;
}
.p-support__arrow svg { display: block; width: 12px; height: auto; }
@media (hover: hover) {
  .p-support__link:hover .p-support__label { text-decoration: underline; }
}

/* --- 会社概要 ---
   SP：ラベル列172px固定・1行の行高70px（行が増えたぶんだけ伸びる）
       見出し下線→1本目の罫線78px／最後の行→フッター65px（PCは108px） */
.p-profile__list {
  margin: 8px 0 0;
  padding: 0 0 65px;             /* 最後の罫線 → フッター（SP） */
}
.p-profile__row {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 70px;
  padding: 24px 0;
  border-bottom: 0.3px solid #000;
}
/* フッター直前の1本だけ罫線を出さない */
.p-profile__row:last-child { border-bottom: 0; }
.p-profile__label {
  flex: 0 0 172px;
  margin: 0;
  font-family: var(--f-ja);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.p-profile__value {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--f-ja);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* --- お問い合わせ --- */
.p-contact__note {
  margin-top: 36px;              /* 見出し下線 → 本文 */
  font-family: var(--f-ja);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.p-contact__note p + p { margin-top: 1.1em; }

.p-contact__desk { margin-top: 56px; padding-bottom: 60px; }
.p-contact__deskTtl {
  font-family: var(--f-ja);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.p-contact__hours {
  margin-top: 6px;
  font-family: var(--f-ja);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}
.p-contact__ways { margin: 14px 0 0; }
/* SPは電話番号を1行に収める。ラベル幅・間隔・文字サイズは 375px 基準で --u で縮む */
.p-contact__way {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.p-contact__way + .p-contact__way { margin-top: 8px; }
.p-contact__badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: calc(52 * var(--u));    /* SP W52 × H20（PHONE/EMAIL 共通） */
  height: 20px;
  margin: 0;
  font-family: var(--f-ja);
  font-weight: 700;
  font-size: calc(12 * var(--u));
  line-height: 1;
  letter-spacing: 0.06em;
  color: #fff;
  background: #000;
}
.p-contact__val {
  margin: 0;
  font-family: var(--f-ja);
  font-weight: 400;
  font-size: calc(12 * var(--u));
  line-height: 1.6;
  white-space: nowrap;           /* 電話番号を折り返さない */
}

/* ===== PC（768px以上）===== */
@media (min-width: 768px) {
  .p-supportIndex .c-pagehead__en {
    white-space: nowrap;
    font-size: min(74px, calc((100vw - var(--pad-side) * 2) * 0.0915));
  }

  .p-support__list { margin-top: 50px; padding-bottom: 108px; }
  .p-support__link { height: 145px; border-bottom-width: 0.5px; }
  .p-support__label { font-size: 23px; }
  .p-support__arrow { width: 40px; height: 40px; }
  .p-support__arrow svg { width: 17px; }

  .p-profile__list { margin-top: 50px; padding-bottom: 108px; }
  .p-profile__row {
    min-height: 145px;
    padding: 20px 0;
    border-bottom-width: 0.5px;
  }
  .p-profile__label { flex: 0 0 390px; font-size: 23px; }
  .p-profile__value { flex: 1 1 auto; font-size: 23px; font-weight: 400; }

  .p-contact__note { margin-top: 94px; font-size: 18px; line-height: 1.9; }
  .p-contact__desk { margin-top: 56px; padding-bottom: 108px; }
  .p-contact__deskTtl { font-size: 23px; }
  .p-contact__hours { margin-top: 10px; font-size: 17px; }
  .p-contact__ways { margin-top: 18px; }
  .p-contact__way + .p-contact__way { margin-top: 10px; }
  .p-contact__way { gap: 12px; }
  .p-contact__badge { width: 96px; height: 26px; font-size: 15px; }
  .p-contact__val { font-size: 17px; }
}

/* =========================================================
   カスタマーサポート（support/）のブレイクポイント（ヘッダーを除く）
   ・650px以上 … PCデザイン。左右余白は 40px 固定で、足りなくなったら中身が縮む
   ・649px以下 … SPデザイン。左右余白 20px・コンテンツ幅 315px
   ヘッダーに変数が渡らないよう、main（.l-under）に指定しています。
   ========================================================= */
@media (min-width: 650px) and (max-width: 767px) {
  .p-supportPage .l-under {
    --pad-side: 40px;
    --content-w: var(--content-w-pc);
  }
  .p-supportPage .c-pagehead { padding: 56px 0 64px; }
  .p-supportIndex .c-pagehead,
  .p-profilePage .c-pagehead,
  .p-contactPage .c-pagehead { padding-bottom: 0; }
  .p-supportIndex .c-pagehead__en {
    white-space: nowrap;
    font-size: min(74px, calc((100vw - var(--pad-side) * 2) * 0.0915));
  }

  /* 一覧 */
  .p-supportPage .p-support__list { margin-top: 50px; padding-bottom: 108px; }
  .p-supportPage .p-support__link { height: 145px; border-bottom-width: 0.5px; }
  .p-supportPage .p-support__label { font-size: 23px; }
  .p-supportPage .p-support__arrow { width: 40px; height: 40px; }
  .p-supportPage .p-support__arrow svg { width: 17px; }

  /* 会社概要 */
  .p-supportPage .p-profile__list { margin-top: 50px; padding-bottom: 108px; }
  .p-supportPage .p-profile__row {
    min-height: 145px;
    padding: 20px 0;
    border-bottom-width: 0.5px;
  }
  .p-supportPage .p-profile__label { flex: 0 0 390px; font-size: 23px; }
  .p-supportPage .p-profile__value { flex: 1 1 auto; font-size: 23px; }

  /* お問い合わせ */
  .p-supportPage .p-contact__note { margin-top: 94px; font-size: 18px; line-height: 1.9; }
  .p-supportPage .p-contact__desk { margin-top: 56px; padding-bottom: 108px; }
  .p-supportPage .p-contact__deskTtl { font-size: 23px; }
  .p-supportPage .p-contact__hours { margin-top: 10px; font-size: 17px; }
  .p-supportPage .p-contact__ways { margin-top: 18px; }
  .p-supportPage .p-contact__way + .p-contact__way { margin-top: 10px; }
  .p-supportPage .p-contact__way { gap: 12px; }
  .p-supportPage .p-contact__badge { width: 96px; height: 26px; font-size: 15px; }
  .p-supportPage .p-contact__val { font-size: 17px; }

  /* 利用規約（本文） */
  .p-supportPage .c-legalBody { font-size: 18px; padding-bottom: 120px; }
  .p-supportPage .c-legalBody__ttl { font-size: 23px; }
  .p-supportPage .c-legalBody__note { font-size: 14px; }
}

/* ---------------------------------------------
   20.6 プロダクト詳細ページ
        背景 #f6f6f6 / 文字・罫線はすべて #000 / ドット #999a9a
--------------------------------------------- */
.p-productPage { background: #f6f6f6; }
.p-productPage .l-under {
  --c-ink: #000;
  --c-black: #000;
  --c-line: #000;
  --c-gray-d: #000;
  background: #f6f6f6;
  color: #000;
}
/* 一番下の SHOP LIST が自前で下余白（--sl-pb）を持つため、
   ここでは下余白を付けません（TOPページと同じ空き方にそろえます） */
.p-detail { padding-bottom: 0; }

/* 商品画像スライダー（横スワイプ＝scroll-snap・軽量） */
.p-detail__slider { position: relative; max-width: 620px; margin: 0 auto clamp(6px, 2vw, 14px); }
.p-detail__slides {
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.p-detail__slides::-webkit-scrollbar { display: none; }
/* マウスでドラッグして送れることを示すカーソル（js/main.js の「マウスのドラッグ」と対。マウス操作の端末だけ） */
@media (hover: hover) and (pointer: fine) {
  .p-detail__slides { cursor: grab; }
  .p-detail__slides.is-dragging { cursor: grabbing; user-select: none; }
}
.p-detail__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; }
.p-detail__slide img { display: block; width: 100%; height: auto; }
.p-detail__dots {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  margin: clamp(14px, 3vw, 20px) 0 0; padding: 0 var(--pad-side); list-style: none;
}
.p-detail__dots button {
  display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: #c3c4c4; cursor: pointer;
  transition: width 0.3s var(--ease), background-color 0.3s var(--ease);
}
.p-detail__dots li.is-active button { width: 22px; border-radius: 4px; background: #999a9a; }

/* 商品情報 */
.p-detail__info { max-width: 520px; margin-top: 36px; }
.p-detail__brand { font-family: var(--f-en); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: 0.04em; }
.p-detail__name { margin-top: 6px; font-family: var(--f-en); font-weight: 500; font-size: 15px; line-height: 1; }
.p-detail__price { margin-top: 4px; font-family: var(--f-en); font-weight: 500; font-size: 14px; line-height: 1; }
.p-detail__priceNum { font-size: 14px; }
.p-detail__priceTax { font-size: 9px; margin: 0 0.5em 0 0.1em; }
.p-detail__priceCase { font-size: 14px; }
/* 説明文の中のフレーバー名（STRAIGHT / LEMON FLAVOR など）。
   文字サイズは本文と同じで、斜体・太字だけ変えています */
.p-detail__descTtl { font-family: var(--f-en); font-style: italic; font-weight: 700; }

.p-detail__desc {
  margin-top: 11px;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
}
/* 行頭の始めカッコ（【「（ など）は文字の左半分が空白なので、その分だけ詰める。
   span は js/main.js の trimOpenBrackets() が自動で付けます（PC・SP共通）。 */
.c-kakkoTrim { margin-left: -0.5em; }

/* PRODUCT SPECS（c-acc 流用・罫線＝base c-acc の border が --c-line:#000 で黒）
   カンプ（SP）実測どおり。見出し＝Roboto Medium 16px、本文＝Noto Sans JP Regular 13px。
   表まわりの余白は本文サイズ基準の em で持たせているので、
   PCでは本文を16pxにするだけで同じ比率のまま大きくなります。 */
.p-detail__specs { margin-top: 28px; }
.p-detail__specs > summary {
  padding: 10px 0;
  font-family: var(--f-en);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 16px;
  line-height: 1.5;
}
.p-detail__specs > summary::before { display: none; }   /* FAQ用の「Q」を出さない */
.p-detail__specs .c-acc__inner {
  display: block;
  padding: 13.3px 0 29px;
  font-size: 13px;
  line-height: 1.5;
}
.p-detail__specs .c-acc__inner::before { display: none; }   /* FAQ用の「A」を出さない */
/* ＋／− アイコン：右端にそろえ、線は細く（カンプ W12px・太さ0.8px） */
.p-detail__specs .c-acc__icon { right: 9px; width: 12px; height: 12px; margin-top: -6px; }
.p-detail__specs .c-acc__icon::before,
.p-detail__specs .c-acc__icon::after { height: 0.8px; margin-top: -0.4px; }

/* 仕様表（ラベル｜内容）。ラベル列は 4.5em 固定＋均等割り付け、間は 1.54em（＝13pxのとき20px） */
.p-detail__specTable { margin: 0; }
.p-detail__specTable > div { display: flex; gap: 1.54em; }
.p-detail__specTable > div + div { margin-top: 0.85em; }
.p-detail__specTable dt {
  flex: 0 0 4.5em; margin: 0; font-weight: 400;
  text-align: justify; text-align-last: justify;   /* 「商　品　名」のように均等割り付け */
}
.p-detail__specTable dd { flex: 1 1 auto; margin: 0; }
/* 販売者・栄養成分表示の前だけ、カンプどおり少し大きめに空ける */
.p-detail__specTable > div + .p-detail__specSeller { margin-top: 1.8em; }
.p-detail__specTable > div + .p-detail__specNutri { margin-top: 1.4em; }
/* 栄養成分表示は左列を文字数ぶんの幅にして、折り返し行を「エネルギー…」にそろえる */
.p-detail__specTable > .p-detail__specNutri { gap: 0; }
.p-detail__specNutri dt {
  flex: 0 0 auto;
  text-align: left; text-align-last: left;
}
/* SP：「（100mlあたり）/」を改行して2行目にする。
   全角カッコは字幅の半分が空白なので、行頭の「（」の左や「）」と「/」の間が空いて見える。
   空白の半分（0.5em）を詰めている（書体に左右されないよう palt は使わない）。
   ・行頭の「（」… 行ごと 0.5em 左へ出す
   ・「）」の後ろ … 字送りを 0.5em 詰める（margin だと列の幅の計算に入らず、右の本文に重なるため） */
@media (max-width: 767px) {
  .p-detail__nutriUnit {
    display: block;
    margin-left: -0.5em;
    white-space: nowrap;   /* 「（100mlあたり）/」は途中で折り返さない */
  }
  .p-detail__kakkoR { letter-spacing: -0.5em; }
  /* SPでは「/」を出さない（PCは表示のまま）。
     「（100mlあたり）」は見出しより 1px だけ小さくする（13px → 12px・2026-09-18）。
     px ではなく calc で書いているのは、見出しの文字サイズを変えても差が 1px のままになるようにするため */
  .p-detail__nutriUnit { font-size: calc(1em - 1px); }
  .p-detail__nutriSlash { display: none; }
  /* 2行になったぶん、見出しの「/」と右側の本文がくっつかないよう少し空ける
     （0.6em → 1.0em。見出しと本文の間をもう少し広げる指示のため・2026-09-18） */
  .p-detail__specTable > .p-detail__specNutri { gap: 1em; }
}
@media (min-width: 768px) {
  /* PCはカンプがないため、SPと同じ比率で拡大（見出し20px／本文16px） */
  .p-detail__specs > summary { padding: 12.5px 0; }
  .p-detail__specs .c-acc__inner { font-size: 16px; padding: 16.7px 0 36px; }
  .p-detail__specs .c-acc__icon { right: 11px; width: 15px; height: 15px; margin-top: -7.5px; }
}

/* SHARE（公式SNS） */
.p-detail__share { display: flex; align-items: center; gap: 20px; margin-top: clamp(24px, 5vw, 32px); }
.p-detail__shareLabel { font-family: var(--f-en); font-weight: 500; letter-spacing: 0.1em; font-size: 16px; }
.p-detail__shareList { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.p-detail__shareList img { display: block; width: 30px; height: 30px; filter: brightness(0); }  /* 白アイコンSVGを黒に */
.p-detail__shareList a { display: block; opacity: 0.9; transition: opacity 0.25s; }
@media (hover: hover) { .p-detail__shareList a:hover { opacity: 1; } }

/* BUY NOW（黒ピル＋右上矢印） */
.p-detail__buy {
  display: inline-flex; align-items: center; justify-content: space-between;
  margin-top: clamp(24px, 5vw, 34px); width: 140px; height: 40px; padding: 0 14px;
  background: #000; color: #fff; border-radius: 6px;
  font-family: var(--f-en); font-weight: 500; letter-spacing: 0.06em; font-size: 16px;
}
.p-detail__buyArrow { flex-shrink: 0; width: 14px; height: 14px; }
.p-detail__buyArrow svg { display: block; width: 100%; height: 100%; }

/* タイトル下のサイズ切り替えリンク（500ml / 1000ml / 195ml）
   表示中のサイズは黒、それ以外は #c3c4c4。数値はカンプ実測。 */
.p-detail__pnav { margin-top: 27px; }
.p-detail__pnav ul {
  display: flex;
  justify-content: center;
  gap: 23px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-detail__pnav li {
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.01em;
}
.p-detail__pnav a { color: #c3c4c4; }
.p-detail__pnav .is-current { color: var(--c-black); }
@media (hover: hover) {
  .p-detail__pnav a:hover { color: var(--c-black); }
}
@media (min-width: 768px) {
  .p-detail__pnav { margin-top: 68px; }
  .p-detail__pnav ul { gap: 56px; }
  .p-detail__pnav li { font-size: 38px; }
}

/* SHOP LIST（上下の余白ともTOPページと同じ値＝--sl-pt / --sl-pb を使います） */
.p-detail__shop { padding: var(--sl-pt) 0 var(--sl-pb); margin-top: 0; }

/* TOPページの各プロダクトカード内 READ MORE（白カード上・詳細ページへ） */
.p-product__more {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 2px;
  font-family: var(--f-en); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.06em;
  color: var(--c-ink);
}
.p-product__moreArrow {
  width: 8px; height: 8px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
@media (hover: hover) { .p-product__more:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* --- プロダクト詳細：PC（≥768px） ---
   ・コンテンツ幅 800px（中央スライドも 800px に合わせる＝l-inner と一致）
   ・両サイドに前後の画像がのぞき、前後はグレーアウト（中央のみカラー） */
@media (min-width: 768px) {
  .p-detail { --slideW: min(560px, calc(100vw - 220px));   /* コンテンツ幅800pxの7割 */ }
  .p-detail__slider { max-width: none; margin: 0 auto clamp(10px, 2vw, 18px); }
  .p-detail__slides {
    gap: clamp(16px, 2.4vw, 30px);
    padding-inline: calc((100% - var(--slideW)) / 2);
    scroll-padding-inline: calc((100% - var(--slideW)) / 2);
  }
  .p-detail__slide { flex: 0 0 var(--slideW); }
  /* 前後：カラー画像のまま、上から透明度のある黒をかけて暗くする（白黒にはしない） */
  .p-detail__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    transition: opacity 0.45s var(--ease);
    pointer-events: none;
  }
  .p-detail__slide.is-active::after { opacity: 0; }   /* 中央だけ黒カバーなし＝そのままカラー */

  .p-detail__info { max-width: none; }         /* 情報も800px幅いっぱいに */

  /* 商品情報の文字サイズ（PC） */
  .p-detail__brand     { font-size: 20px; }
  .p-detail__name      { font-size: 21px; }
  .p-detail__price     { font-size: 19px; }
  .p-detail__priceNum  { font-size: 19px; }
  .p-detail__priceTax  { font-size: 13px; }
  .p-detail__priceCase { font-size: 19px; }
  .p-detail__desc { max-width: var(--content-w); font-size: 18px;   /* 他のコンテンツと同じ800px */ }
  .p-detail__specs > summary { font-size: 20px; }
  .p-detail__shareLabel { font-size: 20px; }
  .p-detail__shareList img { width: 50px; height: 50px; }
  .p-detail__buy { width: 248px; height: 78px; padding: 0 26px; border-radius: 12px; font-size: 24px; }
  .p-detail__buyArrow { width: 27px; height: 27px; }

  /* --- 支給された位置調整指示書（PC）に合わせた余白 --- */
  .p-detail__slider { margin-bottom: 18px; }
  .p-detail__dots { margin-top: 38px; }
  .p-detail__info { margin-top: 83px; }
  .p-detail__brand { line-height: 1; }
  .p-detail__name  { margin-top: 9px;  line-height: 1; }
  .p-detail__price { margin-top: 5px;  line-height: 1; }
  .p-detail__desc  { margin-top: 33px; }
  .p-detail__specs { margin-top: 33px; }
  .p-detail__share { gap: 48px; }
  .p-detail__shareList { gap: 33px; }
  .p-detail__buy { margin-top: 74px; }
}

/* ---------------------------------------------
   21. 404
--------------------------------------------- */
/* ヘッダーは他の下層ページ（リーガル／サポート）と同じく透過（白背景・下線を消す） */
.p-404Page .l-header,
.p-404Page .l-header.is-solid {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

/* カンプ指定（SP＝375px基準 / PC＝768px以上）。数値はすべて固定px。
   ・SP：ページ上端 →「404」の文字上端 138px、ボタン下 → フッター 68px
   ・PC：ヘッダー下端（96px）→「404」の文字上端 152px、ボタン下 → フッター 108px
   line-height を 0.75 にして「404」の箱を文字にぴったり合わせているため、
   下の margin-top はカンプの見た目どおりの間隔になります。 */
.p-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 137px var(--pad-side) 68px;
  text-align: center;
}
.p-404__num {
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 900;
  font-size: 120px;
  line-height: 0.75;
  letter-spacing: -0.02em;
}
.p-404__en {
  margin-top: 12px;
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.04em;
}
.p-404__txt { margin-top: 24px; font-size: 14px; font-weight: 700; line-height: 1.75; }
/* SPは3行・PCは2行。data-reveal-text のJSが <br> を作り直してしまうため、
   改行はこの span の display で切り替えています。 */
.p-404__wrapSp { display: block; }
.p-404__btn { margin-top: 42px; }
.p-404 .c-btn-buy { width: 194px; height: 40px; margin-inline: 0; font-size: 14px; }

@media (min-width: 768px) {
  .p-404 { padding: 246px var(--pad-side) 108px; }
  .p-404__wrapSp { display: inline; }        /* SP3行 → PC2行 */
  .p-404__num { font-size: 390px; }
  .p-404__en  { margin-top: 32px; font-size: 110px; }
  .p-404__txt { margin-top: 44px; font-size: 18px; line-height: 2; }
  .p-404__btn { margin-top: 92px; }
  .p-404 .c-btn-buy { width: 330px; height: 70px; font-size: 21px; }
}

/* ---------------------------------------------
   22. 下層ページのフッター上マーキー
--------------------------------------------- */
.l-under + .c-marquee { margin-top: 0; }

/* ---------------------------------------------
   23. NEWS 一覧ページ（news/index.html ／ news/page2〜5.html）
   数値はすべて固定px。画面幅が変わってもサイズ・間隔は変わりません。
--------------------------------------------- */
.p-newsPage { background: #f6f6f6; }

/* 和文はNoto Sans JP、英字見出しはRoboto */
.p-newsIdx {
  --f-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  width: 315px;                  /* SP コンテンツ幅 */
  max-width: calc(100% - 40px);
  margin-inline: auto;
  padding-top: 78px;             /* 固定ヘッダー56px と合わせて上端から134px */
  padding-bottom: 65px;          /* ページャ → フッター */
}

/* --- 見出し（NEWS ＋ 下線 ＋ 丸い矢印ボタン） --- */
.p-newsIdx__head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.p-newsIdx__ttl {
  font-family: var(--f-en);      /* Roboto Black Italic */
  font-style: italic;
  font-weight: 900;
  font-size: 35px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #000;
}
.p-newsIdx__ttl::after {         /* 見出し下線 48×4px */
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 8px;
  margin-inline: auto;
  background: #000000;
}
@media (min-width: 650px) {
  .p-newsIdx__ttl { font-size: 81px; }
  .p-newsIdx__ttl::after { width: 105px; height: 9px; margin-top: 15px; }
}
.p-newsIdx__scroll {             /* 右側の丸い矢印ボタン 40×40px */
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  background: #000;
  border-radius: 50%;
}
.p-newsIdx__scroll svg { display: block; height: 15px; width: auto; }   /* 矢印の長さ15px */

/* --- 記事リスト --- */
.p-newsIdx__list { margin-top: 37px; }   /* 下線 → 1件目 */
.p-newsIdx__item {
  padding-bottom: 25px;
  border-bottom: 0.5px solid #c8c8c8;    /* 区切り線 0.5px（色は指定がないため薄いグレー） */
}
.p-newsIdx__item + .p-newsIdx__item { padding-top: 24px; }

.p-newsIdx__link { display: block; color: inherit; }   /* 記事全体がリンク */
/* 日付とタグは1つの黒いフラッグにまとめます（右端は矢じり形）。
   黒ベタは .p-newsIdx__meta 側が持ち、日付・タグは中の文字だけになります。 */
.p-newsIdx__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;                      /* 日付 → タグ の距離 6px */
  height: 17px;                  /* フラッグの縦幅 17px */
  /* 上に1px余白を足して中の文字を0.5px下げ、上下中央に見えるようにしています
     （書体の1emの中で文字が置かれる位置のズレを打ち消す補正です） */
  padding: 1px 9px 0 4px;        /* 右の9pxは矢じり4pxぶんを含みます */
  color: #ffffff;
  background: #000000;
  /* 右端を矢じり形に切り抜く（先端は上下の中央） */
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 50%, calc(100% - 4px) 100%, 0 100%);
}
.p-newsIdx__date {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #ffffff;
}
.p-newsIdx__date::before {       /* 日付の前の丸 */
  content: "";
  flex: none;
  position: relative;
  top: -0.5px;                   /* 上の補正ぶんを丸だけ戻して、丸は枠の中央のまま */
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: currentColor;
}
.p-newsIdx__cat {                /* 黒ベタは親に移したので、ここは文字だけ */
  display: inline;
  padding: 0;
  border-radius: 0;
  background: none;
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: inherit;
}
.p-newsIdx__itemTtl {
  margin-top: 13px;
  font-family: var(--f-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #000000;
}
.p-newsIdx__txt {
  margin-top: 5px;
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.42;
  letter-spacing: 0.02em;
  color: #000000;
  /* 長いリード文は2行で止める（デザイン準拠） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- ページネーション --- */
.p-newsIdx__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 78px;                     /* 矢印 ⇔ 番号グループ */
  margin-top: 31px;              /* 最後の区切り線 → ページャ */
  /* 丸い矢印ボタン（#news-end）の飛び先。
     画面の下のほうに来るように余白を取り、一覧の最後が見える位置で止めます。 */
  scroll-margin-top: calc(100svh - 110px);
}
.p-newsIdx__pages { display: flex; gap: 7px; }
.p-newsIdx__pages > * {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0.3px solid #000000;
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #000000;
}
.p-newsIdx__pages .is-current { border-width: 1px; font-weight: 500; }
.p-newsIdx__arrow { flex-shrink: 0; display: grid; place-items: center; width: 16px; height: 30px; }
.p-newsIdx__arrow svg { display: block; width: 7px; height: auto; }
.p-newsIdx__arrow.is-disabled { opacity: 0.3; pointer-events: none; }

@media (hover: hover) {
  .p-newsIdx__link:hover .p-newsIdx__itemTtl { text-decoration: underline; }
  .p-newsIdx__pages a:hover { color: #ffffff; background: #000000; }
}

/* ===== PC（650px以上／プロダクトページと同じ切り替え位置） ===== */
@media (min-width: 650px) {
  .p-newsIdx {
    width: 800px;                /* PC コンテンツ幅 */
    max-width: calc(100% - 80px);/* 左右余白40px固定。足りなくなったら中身が縮む */
    padding-top: 136px;          /* 固定ヘッダー96px と合わせて上端から232px */
    padding-bottom: 103px;
  }
  .p-newsIdx__scroll { width: 50px; height: 50px; margin-top: 15px; }
  .p-newsIdx__scroll svg { height: 22px; }

  .p-newsIdx__list { margin-top: 113px; }
  .p-newsIdx__item { padding-bottom: 72px; }
  .p-newsIdx__item + .p-newsIdx__item { padding-top: 42px; }

  /* PCも同じフラッグ。縦幅はこれまでのタグと同じ27pxに合わせ、
     各寸法は 27/17 の比率でSPから拡大しています。 */
  .p-newsIdx__meta {
    gap: 10px;                   /* 日付 → タグ の距離 */
    height: 27px;
    padding: 0 14px 1.5px 6px;   /* 下1.5px＝文字を0.75px上げる補正／右14pxは矢じり6pxを含む */
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
  }
  .p-newsIdx__date { font-size: 20px; }
  .p-newsIdx__date::before { top: 0.75px; width: 10px; height: 10px; margin-right: 6px; }
  .p-newsIdx__cat  { font-size: 17px; }
  .p-newsIdx__itemTtl { margin-top: 22px; font-size: 23px; }
  .p-newsIdx__txt { margin-top: 9px; font-size: 18px; line-height: 1.6; }

  .p-newsIdx__pager { gap: 132px; margin-top: 59px; scroll-margin-top: calc(100svh - 160px); }
  .p-newsIdx__pages { gap: 12px; }
  .p-newsIdx__pages > * { width: 50px; height: 50px; border-width: 0.6px; font-size: 20px; }
  .p-newsIdx__pages .is-current { border-width: 1.5px; }
  .p-newsIdx__arrow { width: 22px; height: 50px; }
  .p-newsIdx__arrow svg { width: 10px; }
}

/* ---------------------------------------------
   24. NEWS 記事詳細ページ（news/archive-XXX.html）
   数値はすべて固定px。画面幅が変わってもサイズは変わりません。
--------------------------------------------- */
.p-newsArt {
  --f-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  padding-top: 78px;             /* 固定ヘッダー56px と合わせて上端から134px */
  padding-bottom: 80px;
}
/* 本文まわりはコンテンツ幅（SP 315px）。KVだけ画面幅いっぱい（SP 375px相当） */
.p-newsArt__inner {
  width: 315px;
  max-width: calc(100% - 40px);
  margin-inline: auto;
}

/* --- 見出し（NEWS ＋ 下線 ＋ 丸い矢印ボタン）※一覧ページと共通の見た目 --- */
.p-newsArt__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.p-newsArt__en {
  font-family: var(--f-en);      /* Roboto Black Italic */
  font-style: italic;
  font-weight: 900;
  font-size: 35px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #000000;
}
.p-newsArt__en::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 8px;
  margin-inline: auto;
  background: #000000;
}
@media (min-width: 650px) {
  .p-newsArt__en { font-size: 81px; }
  .p-newsArt__en::after { width: 105px; height: 9px; margin-top: 15px; }
}
.p-newsArt__scroll {             /* 一覧へ戻る丸い矢印ボタン（見出しは中央のため右端に配置） */
  position: absolute;
  right: 0;
  top: 0;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  background: #000000;
  border-radius: 50%;
}
.p-newsArt__scroll svg { display: block; height: 15px; width: auto; }

/* --- 記事タイトル・日付・区切り線 --- */
.p-newsArt__ttl {
  margin-top: 40px;
  font-family: var(--f-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #000000;
}
.p-newsArt__date {
  display: block;
  margin-top: 5px;
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #999a9a;
}
.p-newsArt__rule {               /* タイトル下の横棒線 */
  width: 315px;
  max-width: 100%;
  height: 0.5px;
  margin: 20px auto 0;
  background: #c3c4c4;
}

/* --- KV（SPは画面幅いっぱい／PCは800px） --- */
.p-newsArt__kv { width: 100%; margin-top: 30px; }
.p-newsArt__kv img { display: block; width: 100%; height: auto; }

/* --- 本文 --- */
.p-newsArt__body {
  margin-top: 34px;
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 2.05;
  letter-spacing: 0.02em;
  color: #000000;
}
.p-newsArt__body > * + * { margin-top: 1.2em; }
.p-newsArt__body h2 { font-weight: 700; font-size: 1em; }
.p-newsArt__body h3 { font-weight: 700; font-size: 1em; }
.p-newsArt__body ul { padding-left: 1.2em; list-style: disc; }
.p-newsArt__body a { color: #000000; text-decoration: underline; }
/* 長いURL（区切りのない英数字の並び）が本文の幅からはみ出さないよう、入りきらないときだけ途中で折り返す（2026-09-22）。
   break-all と違い、収まる短いリンクや英単語は途中で切らない */
.p-newsArt__body a { overflow-wrap: anywhere; }
.p-newsArt__body figure { margin-top: 1.6em; }
.p-newsArt__body img { display: block; width: 100%; height: auto; }
@media (hover: hover) {
  .p-newsArt__body a:hover { opacity: 0.6; }
}

/* --- 本文内：YouTube・提携情報ブロック・プロフィールブロック --- */
.p-newsArt__movie {
  position: relative;
  margin-top: 1.6em;
  aspect-ratio: 16 / 9;
  background: #000000;
}
.p-newsArt__movie iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.p-newsArt__body figcaption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: #999a9a;
}
.p-newsArt__info,
.p-newsArt__profile { margin-top: 1.6em; }
.p-newsArt__info > figure,
.p-newsArt__profile > figure { margin-top: 0; }
.p-newsArt__infoTxt,
.p-newsArt__profile dl { margin-top: 14px; }
.p-newsArt__infoTxt p + p { margin-top: 0.8em; }
.p-newsArt__profile dt { font-weight: 700; }
.p-newsArt__profile dd { margin-top: 6px; }
.p-newsArt__body figure.is-w390 { margin-inline: auto; }

/* --- 記事下の前後ナビ（左＝1つ新しい記事／右＝1つ古い記事） --- */
.p-newsArt__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 48px;
}
.p-newsArt__navBtn {              /* 一覧のページ送り矢印と同じ見た目 */
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 16px;
  height: 30px;
}
.p-newsArt__navBtn svg { display: block; width: 7px; height: auto; }

/* --- 一覧へ戻る --- */
.p-newsArt__back {
  display: block;
  width: fit-content;
  margin: 48px auto 0;
  font-family: var(--f-jp);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #000000;
  text-decoration: underline;
}

/* ===== PC（650px以上／プロダクトページと同じ切り替え位置） ===== */
@media (min-width: 650px) {
  .p-newsArt { padding-top: 136px; padding-bottom: 120px; }
  /* 左右余白40px固定。足りなくなったら中身が縮む */
  .p-newsArt__inner { width: 800px; max-width: calc(100% - 80px); }

  .p-newsArt__scroll { width: 50px; height: 50px; margin-top: 15px; }
  .p-newsArt__scroll svg { height: 22px; }

  .p-newsArt__ttl  { margin-top: 105px; font-size: 32px; }
  .p-newsArt__date { margin-top: 11px; font-size: 22px; }
  .p-newsArt__rule { width: 1000px; height: 1.5px; margin-top: 41px; }

  .p-newsArt__kv { width: 800px; max-width: calc(100% - 80px); margin: 70px auto 0; }   /* PCのKVはコンテンツ幅 */
  .p-newsArt__body { margin-top: 60px; font-size: 18px; }
  .p-newsArt__nav { margin-top: 80px; }
  .p-newsArt__navBtn { width: 22px; height: 50px; }
  .p-newsArt__navBtn svg { width: 10px; }
  .p-newsArt__back { margin-top: 48px; font-size: 14px; }

  .p-newsArt__body figcaption { font-size: 14px; }
  /* ロゴ・人物写真など、元サイトで小さく置かれていた画像は幅390pxで固定 */
  .p-newsArt__body figure.is-w390,
  .p-newsArt__info > figure,
  .p-newsArt__profile > figure { width: 390px; }
}

/* =========================================================
   プロダクトページのブレイクポイント（ヘッダーを除く）
   ・650px以上 … PCデザイン。左右余白は 40px 固定で、足りなくなったら中身が縮む
   ・649px以下 … SPデザイン。左右余白 20px・コンテンツ幅 315px 固定
                （355px未満になったら従来どおり比率で縮小）
   ヘッダーには --pad-side を渡さないよう、main（.l-under）に指定しています。
   ========================================================= */
@media (min-width: 650px) {
  .p-productPage .l-under {
    --pad-side: 40px;
    --content-w: var(--content-w-pc);
  }

  /* ページ見出し */
  .p-productPage .c-pagehead { padding: 56px 0 58px; }

  /* 商品画像スライダー（前後がのぞくPCの見せ方） */
  .p-productPage .p-detail { --slideW: min(560px, calc(100vw - 220px));   /* コンテンツ幅800pxの7割 */ }
  .p-productPage .p-detail__slider { max-width: none; margin: 0 auto 18px; }
  .p-productPage .p-detail__slides {
    gap: clamp(16px, 2.4vw, 30px);
    padding-inline: calc((100% - var(--slideW)) / 2);
    scroll-padding-inline: calc((100% - var(--slideW)) / 2);
  }
  .p-productPage .p-detail__slide { flex: 0 0 var(--slideW); }
  .p-productPage .p-detail__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    transition: opacity 0.45s var(--ease);
    pointer-events: none;
  }
  .p-productPage .p-detail__slide.is-active::after { opacity: 0; }
  .p-productPage .p-detail__dots { margin-top: 38px; }

  /* 商品情報 */
  .p-productPage .p-detail__info { max-width: none; margin-top: 83px; }
  .p-productPage .p-detail__brand { font-size: 20px; line-height: 1; }
  .p-productPage .p-detail__name  { margin-top: 9px; font-size: 21px; line-height: 1; }
  .p-productPage .p-detail__price { margin-top: 5px; font-size: 19px; line-height: 1; }
  .p-productPage .p-detail__priceNum  { font-size: 19px; }
  .p-productPage .p-detail__priceTax  { font-size: 13px; }
  .p-productPage .p-detail__priceCase { font-size: 19px; }
  .p-productPage .p-detail__desc { margin-top: 33px; max-width: var(--content-w); font-size: 18px;   /* 他のコンテンツと同じ800px */ }
  .p-productPage .p-detail__specs { margin-top: 33px; }
  .p-productPage .p-detail__specs > summary { font-size: 20px; }
  .p-productPage .p-detail__share { gap: 48px; }
  .p-productPage .p-detail__shareLabel { font-size: 20px; }
  .p-productPage .p-detail__shareList { gap: 33px; }
  .p-productPage .p-detail__shareList img { width: 50px; height: 50px; }
  .p-productPage .p-detail__buy {
    margin-top: 74px; width: 248px; height: 78px;
    padding: 0 26px; border-radius: 12px; font-size: 24px;
  }
  .p-productPage .p-detail__buyArrow { width: 27px; height: 27px; }

  /* SHOP LIST */
}

@media (max-width: 649px) {
  .p-productPage .l-under {
    --pad-side: calc(20 * var(--u));
    --content-w: var(--content-w-sp);
  }
  /* コンテンツ幅を315pxで固定（375px未満は従来どおり比率で縮小） */
  .p-productPage .l-inner {
    width: var(--content-w-sp);
    max-width: calc(100% - var(--pad-side) * 2);
    padding-inline: 0;
    margin-inline: auto;
  }
}

/* 650〜669px は4列にすると SHOP LIST のボタンが入りきらないので、
   左右のパディングと矢印の位置だけ詰めて収める（文字サイズはそのまま） */
@media (min-width: 650px) and (max-width: 669px) {
}

/* ---------------------------------------------
   SP：下層ページの大タイトル（カンプ指定に統一）
   ・ページ最上端 → 見出し文字の上端 ＝ 138px
   ・フォントサイズ 35px（既存のまま）
   ・見出し下線 46 × 4px（文字の下 8px）
   ※PC（768px以上）は一切変更していません。
--------------------------------------------- */
@media (max-width: 767px) {
  /* 上からの距離 138px。ヘッダー56px＋各ページの上余白で調整しています。 */
  .c-pagehead { padding-top: 80px; }
  .p-productPage .c-pagehead { padding-top: 78px; }
  .p-faqPage .l-under { padding-top: 134px; }

  /* 見出し下線 46 × 4px */
  .c-pagehead__en::after,
  .p-faq__title::after,
  .p-newsIdx__ttl::after,
  .p-newsArt__en::after {
    width: 46px;
    height: 4px;
    margin-top: 8px;
  }
}