/* ============================================================
ecforce 骨格LP — 共通基盤CSS（フェーズ②）
美尻・美姿勢ケア サポートインソール / COCCACU™
このファイルの責務：
1. デザイントークン（:root） … 色・フォント・余白・コンテナ幅
2. スコープ限定リセット … 購入フォーム(.sec--order配下)を壊さない
3. 骨格コンポーネント … .sec / .sec--fullwidth / .lp-container
4. 共通ユーティリティ … .lp-note / .br-sp/.br-pc / 視覚的非表示 / グラデ文字 / CTA(暫定)
※各セクション固有のスタイルはフェーズ③で追記（このファイルにセクション接頭辞クラスで追加）。
※トークンの正典：CLAUDE.md §2（references/tokens.md 整備後はそちらへ移管）。
※ecforce本番：CSS欄はLiquid非対応。本ファイルをアップロードし
HTMLから で読み込む（運用B）。
CSS内の画像/フォント参照は相対パス（url(../images/...) / url(../fonts/...)）。
============================================================ */
/* ============================================================
1. デザイントークン（:root）
============================================================ */
:root {
/* --- 1-1. カラー（Figma Variable collection） --- */
--red: #FF5A64; /* メイン：CTA・見出し・強調 */
--green: #286E50; /* 機能説明セクション */
--blue: #454FA2; /* お悩み・FAQ・保証 */
--gray: #F2F2F2; /* セクション背景 */
--yellow: #FFBE64; /* アクセント（数値強調など） */
--gray-2: #8D8D8D; /* サブテキスト・罫線 */
--gold-solid: #D6AD4E; /* 金帯・装飾 */
/* 本文基本色：Figma変数に明示なし＝暫定。確定後に差し替える。 */
--ink: #333333;
/* --- 1-1b. グラデーション（ブランドグラデを一元管理）---
セクション固有色（#f0d967 等）はFigma実測の装飾色。テキストに乗せる場合は
-webkit-background-clip:text と組み合わせる（.lp-gradient-* / 各セクション参照）。 */
--grad-red-gold: linear-gradient(90deg, var(--red), var(--gold-solid)); /* 赤→金（横） */
--grad-gold: linear-gradient(90deg, #d9c138, var(--gold-solid), #e6cd3c); /* 金（横3停止）：見出し等 */
--grad-gold-band: linear-gradient(90deg, #f0d84e, var(--gold-solid), #f0d84e); /* 金帯（横）：数値タイトル帯 */
--grad-gold-badge: linear-gradient(90deg, #dfc530, #caa246, #dfc530); /* 金バッジ：特許出願中 */
--grad-gold-cta-band: linear-gradient(90deg, #ffea73, var(--gold-solid) 50%, #e2ce5a); /* 金帯（横）：SP固定CTAバー上帯 */
--grad-red-yellow: linear-gradient(180deg, var(--red), var(--yellow)); /* 赤→オレンジ（縦）：CTA/見出し帯 */
--grad-hero: linear-gradient(90deg, var(--red), #f0d967); /* Hero 赤→金（横） */
--grad-blue-magenta: linear-gradient(90deg, var(--blue), #d91ddc); /* 青→マゼンタ（横） */
--grad-green-lime: linear-gradient(90deg, var(--green), #1ddc8a); /* 緑→ライム（横） */
--grad-purple-gray: linear-gradient(180deg, #b1a5cb, var(--gray)); /* 薄紫→グレー（縦）：背景 */
--grad-gray-white: linear-gradient(180deg, var(--gray), #fff); /* グレー→白（縦）：背景 */
--grad-red-yellow-up: linear-gradient(0deg, var(--red), var(--yellow)); /* 赤(下)→オレンジ(上)：見出し帯 */
--grad-black-red-h: linear-gradient(90deg, #000, var(--red) 50%, var(--red)); /* 黒→赤（横）：価格帯PC */
--grad-black-red-v: linear-gradient(180deg, #000, var(--red) 50%, var(--red)); /* 黒→赤（縦）：価格帯SP */
/* --- 1-2. フォントファミリー --- */
/* 和文ベースは游ゴシック系システムフォント。見出し・強調は先頭に Noto Sans JP（Webフォント）、フォールバックは同系統に統一。 */
--font-family-base: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"ＭＳ Ｐゴシック", "MS P Gothic", Osaka, sans-serif;
--font-family-heading: "Noto Sans JP", 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"ＭＳ Ｐゴシック", "MS P Gothic", Osaka, sans-serif; /* 見出し：Black900（font-weightで指定） */
--font-family-bold: "Noto Sans JP", var(--font-family-base); /* 準見出し・強調：Bold700（Noto Sans JP以下はbaseの新スタックを継承） */
/* --- 1-3. フォントサイズ（SP帯：〜767px。375pxでFigma Mobile値に解決） --- */
--font-h1: clamp(52px, calc(52px + 12 * (100vw - 375px) / 392), 64px);
--font-h2: clamp(40px, calc(40px + 8 * (100vw - 375px) / 392), 48px);
--font-h3: clamp(30px, calc(30px + 6 * (100vw - 375px) / 392), 36px);
--font-strong: clamp(28px, calc(28px + 6 * (100vw - 375px) / 392), 34px);
--font-h4: clamp(23px, calc(23px + 4 * (100vw - 375px) / 392), 27px);
--font-body-l: clamp(22px, calc(22px + 4 * (100vw - 375px) / 392), 26px);
--font-body: clamp(15px, calc(15px + 3 * (100vw - 375px) / 392), 18px);
--font-caption-l: clamp(12px, calc(12px + 2 * (100vw - 375px) / 392), 14px);
--font-caption: clamp(11px, calc(11px + 2 * (100vw - 375px) / 392), 13px);
/* --- 1-4. スペーシング（SP帯：〜767px = Figma Mobile値） --- */
--space-8: 4px;
--space-16: 12px;
--space-24: 16px;
--space-48: 24px;
/* --- 1-5. コンテナ --- */
--content-max: 1200px; /* 共通コンテンツ幅 */
--gutter: var(--space-24); /* 左右余白（SP16px / PC24px） */
/* --- 1-6. テキスト白アウトライン（共通・1px） ---
【アウトラインの実装方式：プロジェクト標準】
グラデ文字（-webkit-background-clip:text）は塗りが「背景」のため -webkit-text-stroke を
使うと白線が塗りの上に乗り、内側カウンターまで線画化する。よって白アウトラインは
「白drop-shadowの4方向チェーン」で外縁のみに出す（=heroと同じ方式）。今後アウトラインを
付ける箇所は原則この変数を filter に前置して使う：
filter: var(--lp-text-outline) [既存のdrop-shadow影...];
※ベタ塗り文字（colorが実色）なら -webkit-text-stroke + paint-order でも可（内側に出ない）。 */
--lp-text-outline:
drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
/* PC帯（768px〜）：フォントは1200pxでFigma Desktop値に頭打ち、余白はDesktop値へ */
@media (min-width: 768px) {
:root {
--font-h1: clamp(72px, calc(72px + 36 * (100vw - 768px) / 432), 108px);
--font-h2: clamp(56px, calc(56px + 20 * (100vw - 768px) / 432), 76px);
--font-h3: clamp(42px, calc(42px + 15 * (100vw - 768px) / 432), 57px);
--font-strong: clamp(38px, calc(38px + 2 * (100vw - 768px) / 432), 40px);
--font-h4: clamp(26px, calc(26px + 6 * (100vw - 768px) / 432), 32px);
--font-body-l: clamp(26px, calc(26px + 6 * (100vw - 768px) / 432), 32px);
--font-body: clamp(18px, calc(18px + 6 * (100vw - 768px) / 432), 24px);
--font-caption-l: clamp(13px, calc(13px + 3 * (100vw - 768px) / 432), 16px);
--font-caption: clamp(12px, calc(12px + 2 * (100vw - 768px) / 432), 14px);
--space-8: 8px;
--space-16: 16px;
--space-24: 24px;
--space-48: 48px;
}
}
/* ============================================================
2. Webフォント（Google Fonts CDN）
── 重要 ──
ecforce は運用B領域に .woff2 等のフォントファイルをアップロード不可のため、
self-host の @font-face（fonts/*.woff2）は廃止し、Google Fonts CDN で配信する。
読み込みは HTML本体の で行う：
ファミリー名は "Noto Sans JP"。ウェイトは要素側の font-weight で選択：
- 見出し（--font-family-heading）：font-weight 800〜900 → 900(Black)が適用
- 準見出し・強調（--font-family-bold）：font-weight 700 → 700(Bold)が適用
※CSS/JS欄は Liquid 非対応・CDNの絶対URL参照のため、ここに @font-face は置かない。
============================================================ */
/* ============================================================
3. スコープ限定リセット
── 重要 ──
購入フォームは ecforce 側のCSS/JS(jQuery)が動作する。グローバルな
*・body・img へのリセットはフォームを壊すため禁止（CLAUDE.md 絶対制約#2）。
そこでリセットは LPセクション(.sec)配下に限定し、さらに購入フォーム本体を含む
.sec--order の配下は除外する（:not(.sec--order)）。
============================================================ */
/* body既定マージン(8px)の除去：全幅セクションの外周に出る白枠を消す。
※bodyへの指定は原則禁止だが、margin:0 のみは購入フォームのレイアウトに
影響しない安全なリセット（width/center/box-sizing等の干渉はしない）。この1点に限定。 */
body { margin: 0; }
/* box-sizing：セクション枠と、購入フォーム以外のセクション内要素のみ */
.sec,
.lp-container,
.sec:not(.sec--order) *,
.sec:not(.sec--order) *::before,
.sec:not(.sec--order) *::after {
box-sizing: border-box;
}
/* マージン/リスト初期化：購入フォーム配下を除外。:where()で詳細度0に保つ */
.sec:not(.sec--order) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
margin: 0;
}
.sec:not(.sec--order) :where(ul, ol) {
margin: 0;
padding-left: 0;
list-style: none;
}
/* 画像の流体化：imgタグ全体ではなく .sec 配下にスコープ（フォーム除外）。
祖先も :where() で包み詳細度を0に保つ → セクション側の単一クラス max-width
（例 .product__img{max-width:1200px}）が打ち消されず効く。 */
:where(.sec:not(.sec--order)) :where(img, picture, video, svg) {
max-width: 100%;
height: auto;
}
/* ============================================================
4. 骨格コンポーネント
全セクション共通：
幅・左右余白は .sec / .lp-container に集約し、各セクションで再定義しない。
============================================================ */
/* セクション枠：常に全幅(block)。縦余白の既定値のみ持つ。 */
.sec {
width: 100%;
padding-block: var(--space-48);
font-family: var(--font-family-base);
color: var(--ink);
line-height: 1.6;
}
/* 全幅セクション：背景(色・画像)は画面端まで。中身は内側の .lp-container が絞る。
.sec は既に width:100% なので背景は端まで届く。
.sec--fullwidth 自体に共通宣言は無し（フックのみ）。固有の背景は各セクションCSS（.sec--hero 等）で指定。 */
/* 共通コンテンツコンテナ：最大1200px・中央寄せ・左右ガター */
.lp-container {
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* ============================================================
5. 共通ユーティリティ
============================================================ */
/* 注釈（薬機法注記など）：caption相当。色は本文色を継承（≒黒）。 */
.lp-note {
font-size: var(--font-caption);
line-height: 1.7;
}
/* 改行出し分け（CLAUDE.md §4.1）：見出しの改行位置をPC/SPで切り替える。
.br-sp … SPでのみ改行 / .br-pc … PCでのみ改行 */
.br-sp { display: inline; }
.br-pc { display: none; }
@media (min-width: 768px) {
.br-sp { display: none; }
.br-pc { display: inline; }
}
/* 視覚的非表示（スクリーンリーダーには読ませる） */
.lp-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* グラデ文字（複数セクションで再利用。テキストはDOMに残しSEO担保）。
※各セクションで停止色が異なる場合はセクション側で上書きする（暫定の既定値）。 */
.lp-gradient-red-gold {
background: var(--grad-red-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lp-gradient-gold {
background: var(--grad-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* 購入CTAボタン（共通部品。No.5 / No.12 で再利用）。
赤→金の縦グラデpill・白太字・影。SP=h4/全幅・2行、PC=h3/コンテンツ幅・1行。 */
.lp-cta {
display: flex;
flex-wrap: wrap; /* 狭幅では語句単位で2行に折返す（mid-word回避） */
align-items: center;
justify-content: center;
width: 100%; /* SP：コンテナ全幅 */
padding: var(--space-48) var(--space-24); /* SP：上下24 / 左右16 */
background: var(--grad-red-yellow);
border: 0;
border-radius: 80px; /* 大きめにして左右両端を完全な半円に */
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
color: #fff;
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4); /* SP=h4 */
line-height: 1.4;
letter-spacing: -0.25px;
text-align: center;
text-decoration: none;
cursor: pointer;
position: relative; /* 光沢エフェクト(::before)の基準 */
overflow: hidden; /* 光沢ストリークをpill(角丸)内にクリップ */
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; /* hover/tap フィードバック */
}
/* 各語句は途中改行させない（折返しは語句の境界のみ）。
"今すぐ「美尻トレ」を" / "はじめましょう！" の2語で構成。 */
.lp-cta__line { white-space: nowrap; position: relative; } /* 文字を光沢の手前に */
@media (min-width: 768px) {
.lp-cta {
width: auto; /* PC：テキスト幅にフィット（中央寄せは親で） */
max-width: 100%; /* コンテナを超えない（狭PCでは語句境界で折返し） */
padding: 32px var(--space-48); /* PC：上下32px（Figma実測・例外的に生px） / 左右48 */
font-size: var(--font-h3); /* PC=h3（2段切替） */
}
}
/* CTA 光沢エフェクト（参照: hitotoashi.dxmed.jp の purchaseButton と同方式）。
::before の白い斜めストリークが3sごとに素早く左→右へ走り、overflow:hidden でpill内にクリップ。 */
.lp-cta::before {
content: "";
position: absolute;
top: -10%;
left: -20%;
width: 40px;
height: 100%;
transform: scale(2) rotate(20deg);
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
animation: lp-cta-shine 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes lp-cta-shine {
0% { left: -20%; }
10% { left: 120%; }
100% { left: 120%; }
}
/* hover（マウス環境のみ）：わずかに浮かせて明るく。:active（タップ/クリック）：押し込み。 */
@media (hover: hover) {
.lp-cta:hover { transform: translateY(-2px); box-shadow: 0 7px 6px rgba(0, 0, 0, .28); filter: brightness(1.06); }
}
.lp-cta:active { transform: translateY(1px); box-shadow: 0 2px 2px rgba(0, 0, 0, .25); filter: brightness(.97); }
/* モーション過敏への配慮（CLAUDE.md a11y）：アニメ追加時の共通抑制 */
@media (prefers-reduced-motion: reduce) {
.sec:not(.sec--order) *,
.sec:not(.sec--order) *::before,
.sec:not(.sec--order) *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
セクション No.1 Hero_Section
- 全幅。背景写真はPC/SP出し分け（＋preload）。
- 回転はFigma実測の固定値：テキスト系 -4deg / 走る脚 +4deg。
- フォントはトークン正規化。.hero__headline は PC=h1/SP=h2、
.hero__subhead-1 は PC=h1/SP=h3 の2段切替。
- 要素順：DOM=見出し→脚→サブ見出し→数値。
SPはこの順で縦積み。PCは order で数値を2番目へ、脚は絶対配置。
============================================================ */
.sec--hero {
padding-block: 0; /* 縦余白はhero内部で管理 */
overflow: clip; /* 回転・全幅背景のはみ出しを抑止（横スクロール防止） */
/* Hero専用の赤→金グラデ（共通 --grad-hero のローカル別名） */
--hero-grad: var(--grad-hero);
/* グラデ文字の白アウトラインは共通の --lp-text-outline（白drop-shadow4方向）を使う。
text-strokeは背景クリップ塗りの上に乗り内側カウンターまで線画化するため使わない。 */
--hero-outline: var(--lp-text-outline);
}
/* --- トップバー --- */
.hero__topbar {
width: 100%;
background: var(--hero-grad);
}
.hero__topbar-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-16);
max-width: var(--content-max);
margin-inline: auto;
/* 上下はPC/SPとも8px固定（両ブレークポイントで8pxになるトークンが無いため固定値）。左右はgutter維持。 */
padding: 8px var(--gutter);
}
@media (min-width: 768px) {
.hero__topbar-inner { gap: var(--space-24); }
}
.hero__topbar-icon {
flex: none;
width: 64px;
height: 64px;
object-fit: contain;
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
/* 特許出願中バッジ：SP=2行（特許/出願中）/ PC=1行 */
.hero__badge {
flex: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-8);
border: 1px solid #fff;
border-radius: 6px;
background: var(--grad-gold-badge);
color: #fff;
font-family: var(--font-family-heading);
line-height: 1.1;
text-align: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.hero__badge-a { font-size: var(--font-body); font-weight: 800; }
.hero__badge-b { font-size: var(--font-caption); font-weight: 800; }
@media (min-width: 768px) {
/* PCは上下padding 8px固定・左右は--space-16 */
.hero__badge { flex-direction: row; padding: var(--space-8) var(--space-16); border-radius: 8px; }
.hero__badge-a,
.hero__badge-b { font-size: var(--font-h4); }
}
/* 商品名：SP=2行 / PC=横1行。「美尻・美姿勢ケア」は金グラデ、「サポートインソール」は黒 */
.hero__brand {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--font-family-heading);
font-size: var(--font-h4);
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.25px;
text-align: center;
}
@media (min-width: 768px) {
.hero__brand { flex-direction: row; gap: 10px; }
}
/* 商品名（黒ベタ）の白アウトライン1px：実塗りが内側半分を覆うので text-stroke でも
外縁のみ（内側カウンターに線が出ない）。グラデ側の brand-jp には使わない。 */
.hero__brand-sub {
-webkit-text-stroke: 1px #fff;
paint-order: stroke fill;
}
.hero__brand-jp {
background: var(--grad-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* グラデ塗りは背景クリップのため text-stroke は内側まで線画化する。白アウトラインは
drop-shadow で外側のみに。続けて金帯上の可読性確保用の濃い影を重ねる。 */
/* 白アウトラインは維持しつつ、暗いドロップシャドウは背景(金帯)に馴染む程度に弱める */
filter: var(--hero-outline)
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.hero__brand-sub {
color: #000;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* --- ヒーロー本体：背景画像＋オーバーレイ --- */
/* 背景は .hero__contents の background-image。divのボックス全体（子要素＝全コンテンツ＋
パディング）に必ず描画されるため、回転やサブピクセルで子要素が背景からはみ出さない。
CSS内の画像参照は相対パス（運用B）。LCPはheadので先読み。 */
.hero__contents {
position: relative; /* 走る脚の絶対配置基準 */
width: 100%;
background-image: url(../images/hero/hero-bg-sp.webp); /* SP：縦長トリミング */
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
@media (min-width: 768px) {
.hero__contents {
background-image: url(../images/hero/hero-bg-pc.webp); /* PC：横長 */
background-position: 40% center;
}
}
.hero__inner {
position: relative; /* 走る脚の絶対配置の基準 */
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-24);
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
padding: var(--space-24) var(--gutter) var(--space-48);
}
@media (min-width: 768px) {
.hero__inner {
margin-inline: 0; /* PCは画面左端寄せ（中央寄せしない） */
padding-block: var(--space-48);
}
.hero__headline-block { order: 1; }
.hero__stats { order: 2; }
.hero__subhead-block { order: 3; }
}
/* メイン見出し */
.hero__headline-block {
transform: rotate(-4deg);
transform-origin: left center;
}
.hero__headline {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h2); /* SP=h2（テキスト短縮に伴い拡大） */
line-height: 1.2;
letter-spacing: -0.25px;
background: var(--hero-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: var(--hero-outline) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
@media (min-width: 768px) {
.hero__headline { font-size: var(--font-h1); } /* PC=h1（2段切替） */
}
.hero__subcopy {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.3;
letter-spacing: -0.25px;
color: var(--red);
}
/* margin は .sec リセット :where(p){margin:0}（詳細度0,2,0）に打ち消されるため、
2クラス（0,2,0・後勝ち）で見出しとの間隔を指定する。 */
.hero__headline-block .hero__subcopy { margin-top: var(--space-8); }
.hero__subcopy-em { color: var(--gold-solid); }
/* 走る脚：SP=独立ブロック（左寄せ140px）/ PC=見出しに重ねる絶対配置 */
.hero__foot {
align-self: flex-start;
width: 140px;
height: auto;
margin-left: var(--space-8);
transform: rotate(4deg);
}
@media (min-width: 768px) {
.hero__foot {
position: absolute;
z-index: 2;
top: 8.5rem;
left: 50%;
width: min(382px, 30%);
margin: 0;
}
}
/* サブ見出し＋インソール */
.hero__subhead-block {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-16);
width: 100%;
}
.hero__subhead {
flex: 1 1 0;
min-width: 0; /* 横並びのインソールに重ならないよう縮む */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-8);
transform: rotate(-4deg);
transform-origin: left center;
}
.hero__subhead-1,
.hero__subhead-2,
.hero__subhead-3 {
font-family: var(--font-family-heading);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.25px;
background: var(--hero-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: var(--hero-outline) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
/* SP：subhead列(=block-insole-gap)に各行が1行で収まる範囲でサイズ調整。
sh1=改行しない範囲で最大化（31→36px）／sh2=最長行なので320pxでも収まるよう縮小（26→30px）。 */
.hero__subhead-1 { font-size: clamp(31px, calc(31px + 5 * (100vw - 320px) / 55), 36px); }
.hero__subhead-2 { font-size: clamp(26px, calc(26px + 4 * (100vw - 320px) / 55), 30px); }
.hero__subhead-3 { font-size: var(--font-h3); } /* SP=h3（h2だと狭幅で改行するため1段下げ） */
@media (min-width: 768px) {
.hero__subhead-1 { font-size: var(--font-h1); } /* PC=h1（2段切替） */
.hero__subhead-2 { font-size: var(--font-h3); } /* PC=h3（広いので維持） */
.hero__subhead-3 { font-size: var(--font-h2); } /* PC=h2（広いので大きく維持） */
}
/* インソール：画像（insole-notext.webp＝文字なし）＋ SVGアーチ実テキスト のラッパー */
.hero__insole {
flex: none;
position: relative; /* SVGラベルの絶対配置基準 */
/* SP行内：subhead列（最長=subhead-2「のための運動を」≈211px）を侵さない範囲で最大化。
320px=84px（現状維持）→ 余白が出る375px以降で拡大、160pxで頭打ち。画像内SVG文字も連動拡大。 */
width: clamp(84px, calc(100vw - 265px), 160px);
line-height: 0; /* inline画像下の余白を消す */
}
.hero__insole-img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
}
/* アーチ金グラデ文字（元画像の焼き込み文字を実テキスト化）。画像上端の透明帯に重ねる。 */
.hero__insole-label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
overflow: visible;
pointer-events: none;
}
.hero__insole-label-text {
font-family: var(--font-family-heading);
font-weight: 800;
/* viewBox(680)基準のユーザー単位。textLength圧縮はiOS Safariが上で無視し
前後がはみ出す（→overflow:clipで切れる）ため使わず、自然幅でアーチ(x25〜655)に収まる
サイズに設定。全ブラウザで同一に収まる。 */
font-size: 54px;
letter-spacing: 0;
fill: #000; /* 文字色は黒（可読性優先。白アウトラインと併用） */
/* 白アウトラインは塗りの外側のみ（SVGなので内側カウンターに出ない） */
stroke: #fff;
stroke-width: 6px;
paint-order: stroke;
stroke-linejoin: round;
}
.hero__insole--pc { display: none; } /* PC用は下のmediaで絶対配置表示 */
@media (min-width: 768px) {
.hero__insole--sp { display: none; } /* SP用（subhead行内）はPCで隠す */
/* ③ PC：画面右端から48pxを常にキープ。全幅の hero__contents を基準に絶対配置し画面幅に追従 */
.hero__insole--pc {
display: block;
position: absolute;
right: 48px;
bottom: var(--space-48);
width: clamp(220px, 24vw, 340px);
z-index: 1;
}
}
/* --- 数値ボックス --- */
.hero__stats {
display: flex;
flex-direction: column;
gap: var(--space-8);
width: 100%;
padding-block: 8px; /* ④ PC/SPとも上下8px固定（明示指定の固定値） */
}
/* ⑤ PC＝ヒーロー背景の上に重ねる中段 / SP＝写真の直下に独立表示。
PC/SPで配置構造が異なるため2要素を用意しdisplayで出し分ける（HTML側参照）。 */
.hero__stats--pc { display: none; }
.hero__stats--sp { padding-inline: 0; } /* SPは画面幅いっぱい（左右余白なし・全幅ブリード） */
@media (min-width: 768px) {
/* 表(ボックス)は左端を画面端に固定し、幅は画面幅に追従（右端は固定しない）。
テキストが改行されない最小幅を min-width で確保。 */
.hero__stats--pc {
display: flex;
margin-left: calc(-1 * var(--gutter)); /* 左端を画面左へ */
min-width: 480px; /* 中のテキストが改行されない最小幅 */
max-width: 50%; /* タイトル帯・ボックスとも最大50%幅で揃える */
}
.hero__stats--sp { display: none; }
}
.hero__stats-title {
padding: var(--space-16) var(--space-24);
background: var(--grad-gold-band);
color: #fff;
font-family: var(--font-family-heading);
font-weight: 800; /* heading family=Black900。旧self-host時は単一900面で実質900描画だったため800(→900)で踏襲 */
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
@media (min-width: 768px) {
.hero__stats-title { text-align: right; }
}
.hero__stat-list {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
/* 各ボックス共通：余白・地色・アイコン・数値の体裁（配置はPC/SPで個別指定） */
.hero__stat {
display: flex;
align-items: center;
padding: var(--space-16) var(--space-24);
background: var(--gray); /* PC/SPとも #f2f2f2（Figma実測） */
}
.hero__stat-icon {
flex: none;
width: 64px;
height: auto;
}
.hero__stat-name {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
}
.hero__stat-around {
font-weight: 400;
font-size: var(--font-body);
}
.hero__stat-value {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.06em;
font-family: var(--font-family-heading);
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.hero__stat-approx,
.hero__stat-unit,
.hero__stat-up {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
}
.hero__stat-num {
font-size: var(--font-h2);
color: var(--red);
line-height: 1;
}
.hero__stat-unit { color: var(--red); } /* %は赤（Figma実測） */
.hero__stat-note {
flex: none;
font-size: var(--font-caption);
font-weight: 400;
color: #000;
}
/* 白文字（部位名・約・UP）に黒1pxアウトライン（40%）。ベタ塗り白なので text-stroke+
paint-order で外縁のみ（内側カウンターに出ない）。PC/SP共通。 */
.hero__stat-name,
.hero__stat-around,
.hero__stat-approx,
.hero__stat-up {
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.4);
paint-order: stroke fill;
}
/* 数字・%（赤・ベタ塗り）に白1pxアウトライン（Figma同様のくっきりした輪郭線）。
drop-shadowは影として滲むため、ベタ塗り向けの text-stroke を使う。
stroke 2px ＋ paint-order:stroke fill → 塗り(赤)が内側1pxを覆い外側1pxだけ残る
＝シャープな1px輪郭（内側カウンターに出ない・影にならない）。PC/SP共通。 */
.hero__stat-num,
.hero__stat-unit {
-webkit-text-stroke: 2px #fff;
paint-order: stroke fill;
}
/* === SP（hero__stats--sp）：グレー地・アイコン左・右に部位名／数値+※を2段中央寄せ === */
.hero__stats--sp .hero__stat {
gap: var(--space-16);
justify-content: center;
}
.hero__stats--sp .hero__stat-text {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
text-align: center;
}
.hero__stats--sp .hero__stat-part {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.25em;
color: #fff; /* 部位名は白＋影（Figma） */
/* iOS Safari は text-shadow と -webkit-text-stroke(+paint-order) の併用で影を
ストローク輪郭から二重描画してギザギザに崩す。塗り+ストロークの合成結果から
影を落とす filter:drop-shadow に統一して回避（数字の白2pxストロークが主因）。
影の数値は Figma 実測（offset/blur/濃度を抑え文字サイズに対し過剰にしない）。 */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.hero__stats--sp .hero__stat-value {
color: #fff; /* 約/UP は白＋影。数字・%は赤のまま */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.hero__stats--sp .hero__stat-note {
margin-left: var(--space-16); /* 数値の右にスペース */
vertical-align: baseline;
align-self: center;
}
/* === PC（hero__stats--pc）：写真上に重ねる横1列・右寄せ・白文字 === */
@media (min-width: 768px) {
.hero__stats--pc .hero__stat {
justify-content: flex-end;
gap: var(--space-8);
padding-block: 8px;
}
.hero__stats--pc .hero__stat-part {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 0.25em;
color: #fff;
/* SP同様、text-shadow+text-stroke併用のiOS Safari崩れを filter:drop-shadow で回避。
影の数値はFigma実測（offset/blur/濃度を抑え過剰にしない）。 */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.hero__stats--pc .hero__stat-name { color: #fff; }
.hero__stats--pc .hero__stat-value {
color: #fff;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
}
/* ============================================================
セクション No.2 Intro_Section
- コンテナ(1200px)に収める。先頭の見出し帯のみ背景を全幅にする。
- 各パートはFigma準拠で縦に py(--space-24) を持たせて積む。
- 利用シーン：PC=2×2グリッド / SP=1カラム。写真は高さ固定せず aspect-ratio。
- お客様の声：PC=写真左・本文右の横並び / SP=縦積み中央寄せ。
============================================================ */
.sec--intro {
padding-block: 0; /* 縦余白は内部の各パートで管理（Figma：section自体は余白なし） */
}
/* ① 見出し帯：背景だけ全幅のグレー。テキストは内側 lp-container で1200pxに収める。 */
.intro__lead {
width: 100%;
background: var(--red);
padding-block: var(--space-24);
}
.intro__lead-text {
font-weight: 400;
line-height: 1.4;
color: #fff;
text-align: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
white-space: nowrap; /* 各行を1行に固定。幅は下記の流体サイズで親（コンテナ）幅に収める */
}
/* SP=3行（block）／PC=1行（inline）。
★例外規定（CLAUDE.md）：トークン固定だと和文字幅で予期せぬ改行・溢れが出るため、
「文字数×字幅 ≤ コンテナ幅」になるよう font-size を流体化する。上限は従来のトークン値、
狭幅時のみ縮小。全角和文は約1em/字なので numerator(=100vw-左右余白-微小マージン)÷文字数で字幅を算出。 */
.intro__lead-1,
.intro__lead-2,
.intro__lead-3 { display: block; }
/* SP：各 block 行が単独で親幅に収まるよう min() で縮める。44=左右gutter32+安全マージン。 */
.intro__lead-1 { font-size: min(var(--font-body-l), calc((100vw - 44px) / 18)); line-height: 1.8; letter-spacing: .5px; } /* 17字＋字間 */
.intro__lead-2 { font-size: min(var(--font-h3), calc((100vw - 44px) / 12)); font-family: var(--font-family-bold); font-weight: 700; } /* 11字・太字 */
.intro__lead-3 { font-size: min(var(--font-h3), calc((100vw - 44px) / 9)); } /* 8字 */
@media (min-width: 768px) {
.intro__lead-1,
.intro__lead-2,
.intro__lead-3 { display: inline; }
/* PC：3スパンを同一係数(vw)でスケールし、合計幅 ≤ コンテナ幅(最大1152px)で1行に収める。
56=左右gutter48+安全マージン。係数比 1:1.25:1（Figma 32/40/32 の比）を維持。上限は約27/34px。 */
.intro__lead-1 { font-size: clamp(17px, calc((100vw - 56px) / 42), 27px); line-height: 1.4; }
.intro__lead-2 { font-size: clamp(21px, calc((100vw - 56px) / 34), 34px); }
.intro__lead-3 { font-size: clamp(17px, calc((100vw - 56px) / 42), 27px); }
}
/* ② 利用シーン4枚：SP=1カラム縦積み（まず）→ 768px以上で2×2グリッド */
.intro__usage-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-24);
padding-block: var(--space-24);
}
@media (min-width: 768px) {
.intro__usage-list { grid-template-columns: repeat(2, 1fr); }
}
.intro__usage {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.intro__usage-label {
font-size: var(--font-body-l);
font-weight: 400;
line-height: 1.4;
color: var(--gold-solid);
}
.intro__usage-img {
width: 100%;
aspect-ratio: 16 / 9; /* 高さ固定せず比率で追従（Figma PCタイル ≒588×321 に準拠） */
object-fit: cover;
border-radius: 24px;
}
/* ②-2 サブ見出し帯：赤リボン（上向き三角付き）。三角はCSS（border三角）で画像不要 */
.intro__subhead {
position: relative;
margin-block: var(--space-24);
padding: var(--space-16) var(--space-24);
background: var(--red);
border-radius: 24px;
text-align: center;
}
.intro__subhead::before { /* 上向き三角（赤） */
content: "";
position: absolute;
left: 50%;
top: -14px;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 14px solid var(--red);
}
.intro__subhead-text {
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
color: #fff;
}
/* SPでは --font-h3 だと11文字が親幅に収まらず改行するため、例外的に
親（コンテナ）幅に追従する流体サイズで1行に収める。
実測の利用可能幅 ≒ 100vw − 79px（lp-container左右余白＋subhead内padding）。
マージンを見て88pxを引き、11文字で割る。上限は --font-h3（PC値は据え置き）。 */
@media (max-width: 767px) {
.intro__subhead-text {
white-space: nowrap;
font-size: min(var(--font-h3), calc((100vw - 88px) / 11));
}
}
/* ③ お客様の声（1件）：SP=縦積み中央 →（まず）／ 768px以上で写真左・本文右の横並び */
.intro__voice {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
padding: var(--space-24);
background: #fff;
border: 3px solid var(--red);
border-radius: 24px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
margin-block: var(--space-24);
}
@media (min-width: 768px) {
.intro__voice { flex-direction: row; align-items: center; }
}
.intro__voice-photo {
flex: none;
width: 240px;
height: 240px;
max-width: 100%;
object-fit: cover;
border-radius: 50%;
}
.intro__voice-body {
display: flex;
flex-direction: column;
align-items: flex-start; /* SP/PCとも本文は左寄せ（顔写真はカード側でSP中央） */
gap: var(--space-16);
min-width: 0;
text-align: left;
}
@media (min-width: 768px) {
.intro__voice-body { flex: 1 1 0; }
}
.intro__voice-text {
font-size: var(--font-body-l);
font-weight: 400;
line-height: 1.4;
color: var(--red);
}
.intro__voice-em {
font-size: var(--font-strong);
font-weight: 700;
color: var(--yellow);
}
.intro__voice-name {
font-size: var(--font-caption-l);
line-height: 1.4;
letter-spacing: 0.5px;
color: #000;
}
.intro__voice-note {
color: #000;
}
/* ④ 注釈データ帯 */
.intro__note {
padding-block: var(--space-24);
color: #000;
text-align: center;
}
/* ============================================================
セクション No.3 Feature_Section
- 全幅の赤背景。中身は1200pxコンテナ。文字は基本white、注釈のみ黒。
- 2ブロック構成：①コアフットベッド補正 ②筋活動量UP。
- 見出しは2段切替：メインPC=h1/SP=h2、サブ見出しはh3（トークンで自動可変）。
- 画像はPC/SP共通（Figmaで同一アセット）。下層のためlazy。
============================================================ */
.sec--feature {
background: var(--red);
color: #fff; /* セクション既定は白文字（注釈のみ黒で上書き） */
padding-block: var(--space-48);
}
.feature__inner {
display: flex;
flex-direction: column;
gap: var(--space-48); /* 2ブロック間 */
}
.feature__block {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-48); /* 見出し・画像・コピー間 */
}
/* 導入見出し（左寄せ） */
.feature__intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-8);
width: 100%;
}
.feature__headline {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h2); /* SP=h2 */
line-height: 1.2;
letter-spacing: -0.25px;
color: #fff;
}
@media (min-width: 768px) {
.feature__headline { font-size: var(--font-h1); } /* PC=h1（2段切替） */
}
/* 320〜359pxの極小幅：h2(40px下限)では「それだけで抜群の」8文字行が横溢れするため
h3へ落として横スクロールを防ぐ（375px以上はFigma準拠のh2を維持）。 */
@media (max-width: 359px) {
.feature__headline { font-size: var(--font-h3); }
}
.feature__lead {
font-size: var(--font-body-l);
font-weight: 400;
line-height: 1.4;
color: #fff;
}
/* 合成画像（全幅・比率保持・装飾なし） */
.feature__img {
display: block;
width: 100%;
height: auto;
}
/* 中央寄せコピー群 */
.feature__copy-group {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
width: 100%;
text-align: center;
}
.feature__copy {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3); /* PC57/SP36 トークン可変 */
line-height: 1.2;
letter-spacing: -0.25px;
color: #fff;
}
.feature__em { color: var(--yellow); } /* 「自然な履き心地！」「徹底アシスト！」金 */
.feature__desc {
font-size: var(--font-body);
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.5px;
color: #fff;
}
/* 注釈（赤地に黒・左寄せ。Figma準拠） */
.feature__note {
width: 100%;
color: #000;
}
/* ============================================================
セクション No.4 Media_Section
- 中央寄せの赤見出し。
- PC：掲載誌をまとめた1枚画像（.media__covers）。
- SP：3誌を「赤の傾き帯＋表紙＋誌名」で1行ずつ（左右交互）。
帯はCSS（::before 回転矩形）、表紙は±4度回転＋影。
============================================================ */
.sec--media {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
}
.media__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
width: 100%;
}
.media__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
color: var(--red);
text-align: center;
}
/* PC=表示 / SP=非表示 */
.media__covers {
display: none;
width: 100%;
height: auto;
}
@media (min-width: 768px) {
.media__covers { display: block; }
}
/* SP=表示 / PC=非表示 */
.media__rows {
display: flex;
flex-direction: column;
width: 100%;
}
@media (min-width: 768px) {
.media__rows { display: none; }
}
.media__row {
position: relative;
width: 100%;
overflow: clip;
}
.media__row::before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
width: 200%;
height: 76%;
background: var(--red);
transform: translate(-50%, -50%) rotate(-4deg);
}
.media__row--reverse::before { transform: translate(-50%, -50%) rotate(4deg); }
.media__row-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: var(--space-16);
padding-block: var(--space-16);
}
.media__row--reverse .media__row-inner { flex-direction: row-reverse; }
.media__cover {
flex: none;
margin: 0;
width: 140px;
}
.media__cover img {
display: block;
width: 100%;
height: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
transform: rotate(4deg);
}
.media__cover--right img { transform: rotate(-4deg); }
.media__label {
flex: 1 1 0;
min-width: 0;
text-align: center;
color: #fff;
}
.media__issue { display: block; font-size: var(--font-body); font-weight: 400; line-height: 1.8; letter-spacing: 0.5px; }
.media__name { display: block; font-family: var(--font-family-bold); font-weight: 700; font-size: var(--font-h2); line-height: 1.4; }
/* ============================================================
購入CTAのセンタリングラッパー（共通。No.5 / No.12 で使用）
- 中身は .lp-cta 1個。SP=全幅 / PC=コンテンツ幅を中央寄せ。
============================================================ */
.lp-cta-wrap {
display: flex;
justify-content: center;
}
/* ============================================================
セクション No.6 Expert_Section
- 全幅の淡色背景画像。中身は1200pxコンテナ、文字は基本黒。
- 根津ブロック：grid配置でPC=テキスト左/写真右、SP=タイトル→キャッチ→写真→
リード→本文の1列リフロー（DOM順はSP順、PCはgrid-areaで2列化）。
- 専門家の声：PC=3列 / SP=1列。
============================================================ */
.sec--expert {
background: url(../images/expert/bg_1.webp) center / cover no-repeat;
color: #000; /* Figma：本文は黒（緑見出し・金強調は個別指定） */
}
.expert__inner {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.expert__gold { color: var(--gold-solid); } /* 文中の金強調 */
/* --- 根津ブロック（grid） --- */
.expert__nezu {
display: grid;
grid-template-columns: 1fr;
row-gap: var(--space-16);
grid-template-areas:
"title"
"catch"
"figure"
"lead"
"body";
}
@media (min-width: 768px) {
.expert__nezu {
grid-template-columns: 1fr 1fr;
column-gap: var(--space-16);
row-gap: var(--space-24);
grid-template-areas:
"title figure"
"catch figure"
"lead figure"
"body figure";
}
}
.expert__title { grid-area: title; }
.expert__catch { grid-area: catch; }
.expert__nezu-fig { grid-area: figure; }
.expert__lead { grid-area: lead; }
.expert__body { grid-area: body; }
.expert__title {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h2);
line-height: 1.2;
letter-spacing: -0.25px;
color: var(--green);
text-align: center; /* SP=中央 */
}
.expert__catch {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
}
.expert__lead {
font-size: var(--font-body-l);
font-weight: 400;
line-height: 1.4;
}
.expert__body {
font-size: var(--font-body);
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.5px;
}
@media (min-width: 768px) {
.expert__title { text-align: left; } /* PC=左 */
}
/* 写真＋肩書き（SP=中央 / PC=右列・上寄せ） */
.expert__nezu-fig {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
width: 100%;
}
@media (min-width: 768px) {
.expert__nezu-fig { align-items: flex-end; align-self: start; }
}
.expert__nezu-photo {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.expert__nezu-cap {
width: 100%;
text-align: right;
color: #000;
}
.expert__nezu-role { font-size: var(--font-caption-l); letter-spacing: 0.5px; }
.expert__nezu-name { font-size: var(--font-body); letter-spacing: 0.5px; }
/* 区切り線（Figmaのhairline。色は罫線用 --gray-2） */
.expert__divider {
width: 100%;
height: 0;
margin: 0;
border: 0;
border-top: 1px solid var(--gray-2);
}
/* --- 専門家の声 --- */
.expert__others {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.expert__others-title {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
color: var(--green);
}
.expert__voices {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-24);
}
@media (min-width: 768px) {
.expert__voices { grid-template-columns: repeat(3, 1fr); }
}
.expert__voice {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.expert__voice-photo {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.expert__voice-quote {
font-size: var(--font-body);
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.5px;
}
.expert__voice-name {
font-size: var(--font-caption-l);
line-height: 1.4;
letter-spacing: 0.5px;
text-align: left;
}
/* ============================================================
セクション No.7 Effect_Section
- グレー帯（見出し＋サブ＋効果図2点）＋白地の注釈。
- 効果図はPC/SPで別画像（で出し分け。数値は画像焼き込み）。
- 見出しは金グラデ（.lp-gradient-gold 再利用）＋ドロップシャドウ。
============================================================ */
.sec--effect {
padding-block: 0; /* グレー帯と注釈で各々余白を持つ */
}
.effect__part {
width: 100%;
background: var(--gray); /* 帯背景（全幅） */
}
.effect__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
padding-block: var(--space-24);
}
.effect__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-16);
width: 100%;
}
.effect__title {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h2);
line-height: 1.2;
letter-spacing: -0.25px;
/* 金グラデ塗りは .lp-gradient-gold。白アウトライン(共通方式)＋影をdrop-shadowで重ねる */
filter: var(--lp-text-outline) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.effect__sub {
font-size: var(--font-body-l);
font-weight: 400;
line-height: 1.4;
color: #000;
}
.effect__sup { font-size: var(--font-caption); }
/* 効果図（透過PNG→WebP。グレー帯の上に乗る）。比率はsource/imgのwidth/height属性で確保 */
.effect__fig { display: block; width: 100%; }
.effect__fig img { display: block; width: 100%; height: auto; }
/* 注釈（白地・黒・caption） */
.effect__note {
padding-block: var(--space-24);
color: #000;
}
/* ============================================================
セクション No.8 Expert_Comment_Section
- 白カード（青2px枠・角丸24・影）の中に専門家コメント。
- PC=写真左(260px固定)/本文右の横並び・中央揃え。
SP=写真上(全幅正方形)/本文下の縦積み、見出し帯は中央寄せ。
- 見出しは青→マゼンタの全幅グラデ帯（白文字・body-L）。
#d91ddc はFigma実測の装飾色（トークン外）。
============================================================ */
.sec--expert-comment {
padding-block: var(--space-24); /* Figma：section py = default-24 */
}
.expert-comment__card {
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
padding: var(--space-24);
background: #fff;
border: 2px solid var(--blue);
border-radius: 24px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
/* 写真と本文の並び：SP=縦積み（まず）→ 768px以上で横並び */
.expert-comment__row {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
width: 100%;
}
@media (min-width: 768px) {
.expert-comment__row { flex-direction: row; }
}
/* 顔写真：SP=全幅正方形 / PC=260px固定 */
.expert-comment__photo {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 24px;
}
@media (min-width: 768px) {
.expert-comment__photo {
flex: none;
width: 260px;
height: 260px;
}
}
/* 本文列 */
.expert-comment__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-16);
width: 100%;
min-width: 0; /* PC：横並び時に縮めるよう（本文の押し広げ防止） */
}
@media (min-width: 768px) {
.expert-comment__body { flex: 1 1 0; }
}
/* 見出し帯：全幅の青→マゼンタグラデ。白文字。SP=中央 / PC=左 */
.expert-comment__headline {
width: 100%;
padding-inline: 8px; /* 帯の左右内側余白（PC/SP共通・固定8px） */
background: var(--grad-blue-magenta);
font-size: var(--font-body-l);
font-weight: 400;
line-height: 1.4;
color: #fff;
text-align: center; /* SP=中央 */
}
@media (min-width: 768px) {
.expert-comment__headline { text-align: left; } /* PC=左 */
}
/* コメント本文：青文字 */
.expert-comment__text {
width: 100%;
font-size: var(--font-body);
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.5px;
color: var(--blue);
}
/* 監修者名（右寄せ）：肩書き=caption-l / 氏名=body、ともに黒 */
.expert-comment__author {
width: 100%;
text-align: right;
color: #000;
letter-spacing: 0.5px;
}
.expert-comment__role { font-size: var(--font-caption-l); line-height: 1.4; }
.expert-comment__name { font-size: var(--font-body); line-height: 1.8; }
/* ============================================================
セクション No.9 Recommend_Section
- 見出しブロック（コンテナ・中央寄せ）＋ 満足度パート（全幅）。
- 満足度パート：グラフ画像（全幅）→ 声カード3件（全幅の金キラキラ背景・
カードはコンテナ幅）→ 注釈。
- フォントはトークン正規化（Figma h4=32は実装でSP24/PC32の--font-h4）。
- カード枠 #f0d84e はFigma実測の装飾ゴールド（トークン外）。
============================================================ */
.sec--recommend {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
padding-block: var(--space-24); /* Figma：section py = default-24 */
}
/* ① 見出しブロック（中央寄せ） */
.recommend__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
text-align: center;
}
.recommend__title {
width: 100%;
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
/* 金グラデは共通 .lp-gradient-gold（#d9c138→#d6ad4e→#e6cd3c）を併用 */
}
.recommend__sub {
width: 100%;
font-size: var(--font-h4); /* Figma 32（h4：SP24/PC32） */
font-weight: 400;
line-height: 1.4;
color: #000;
}
.recommend__sub-em { color: var(--gold-solid); } /* 「効果の実感率8割以上！」 */
.recommend__lead {
width: 100%;
font-size: var(--font-body);
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.5px;
color: #000;
}
/* ② 満足度パート（全幅・縦積み。各パートが自前の余白を持つ） */
.recommend__satisfy {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* グラフ（全幅・比率は width/height 属性で確保） */
.recommend__graph {
display: block;
width: 100%;
height: auto;
}
/* 声カード帯：全幅の金キラキラ背景。カード本体は内側 lp-container でコンテナ幅に。 */
.recommend__voices {
width: 100%;
/* グラフ(.recommend__graph は width:100%＝横幅基準)と同じ縮尺で並べるため、背景も
横幅基準にする。cover だと要素の高さに合わせて拡大され（SPでは約2.5倍ズーム）、
グラフとスケールが食い違って合わせ目がずれる。background-size:100% auto で
画像幅＝要素幅・高さは比率に固定し、上端(top)をグラフ下端と揃える。
縦の不足分はリピートで充填（カードで隠れる余白のみ表示）。 */
background-image: url(../images/recommend/recommend-sparkle-bg.webp);
background-size: 100% auto;
background-position: top center;
background-repeat: repeat-y;
padding-block: var(--space-16); /* SP12 / PC16。PCは下で24に上書き */
}
@media (min-width: 768px) {
.recommend__voices { padding-block: var(--space-24); }
}
/* カードのリスト（内側 .lp-container がコンテナ幅・中央寄せを担当）。
※ ul に直接 .lp-container を付けると ul リセット（margin:0／詳細度0,2,0）が
margin-inline:auto を上書きして中央寄せが効かないため、div.lp-container で包む。 */
.recommend__voice-list {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.recommend__voice {
display: flex;
flex-direction: column;
gap: var(--space-16); /* SP12 / PC16。PCは下で24に上書き */
justify-content: center;
padding: var(--space-24); /* SP16 / PC24（Figma準拠） */
background: #fff;
border: 5px solid #f0d84e; /* Figma実測の装飾ゴールド枠 */
border-radius: 24px;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
.recommend__voice { gap: var(--space-24); }
}
.recommend__voice-text {
font-size: var(--font-h4); /* 基本32（h4） */
font-weight: 400;
line-height: 1.4;
color: var(--red);
}
.recommend__voice-em {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-strong); /* 強調40（strong：PC40） */
color: var(--gold-solid);
}
.recommend__voice-by {
font-size: var(--font-caption-l);
line-height: 1.4;
letter-spacing: 0.5px;
color: #000;
}
/* 注釈（白地・黒・caption） */
.recommend__note-wrap { padding-block: var(--space-24); }
.recommend__note { color: #000; }
/* ============================================================
セクション No.10 Feature_2_Section
- 見出し帯（全幅・緑→ライム グラデ）＋ 本文（緑グラデ文字）＋ 図解画像。
- 本文はSP=中央/PC=左。図解はPC/SPで別画像（）。
- 緑→ライム グラデ（#286E50→#1ddc8a）。#1ddc8a はFigma実測の装飾色。
============================================================ */
.sec--feature-2 {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
padding-block: var(--space-24);
/* 緑→ライム グラデ（共通 --grad-green-lime のローカル別名。見出し帯・グラデ文字で共用） */
--f2-grad: var(--grad-green-lime);
}
/* 見出し帯（全幅・常に2行・白文字中央） */
.feature-2__band {
width: 100%;
background: var(--f2-grad);
padding-block: var(--space-24);
}
.feature-2__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
color: #fff;
text-align: center;
}
/* 本文＋図解ブロック（最大1200・中央寄せ） */
.feature-2__main {
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
}
/* テキスト（SP=中央 / PC=左寄せ） */
.feature-2__text { text-align: center; }
@media (min-width: 768px) {
.feature-2__text { text-align: left; }
}
/* グラデ文字共通（緑→ライム）：リード・強調語 */
.feature-2__lead,
.feature-2__term {
background: var(--f2-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.feature-2__lead {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
}
.feature-2__term {
line-height: 1.2;
letter-spacing: -0.25px;
}
.feature-2__term-big {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h1); /* 「ニュートラル」108px */
}
.feature-2__term-mid {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3); /* 「と言います。」57px */
}
.feature-2__desc {
text-align: left; /* SP：左揃え（lead/term は中央のまま） */
font-size: var(--font-body-l);
font-weight: 400;
line-height: 1.4;
color: #000;
}
/* 余白：.sec リセット :where(p){margin:0}（詳細度0,2,0）に勝つよう2クラスで指定。
SP=上下16px（--space-24＝SPで16px） / PC=上8px・下0（従来どおり）。 */
.feature-2__text .feature-2__desc { margin-block: var(--space-24); }
@media (min-width: 768px) {
.feature-2__text .feature-2__desc { margin-block: var(--space-8) 0; }
}
/* 図解画像（コンテナ全幅・比率はwidth/height属性で確保） */
.feature-2__img {
display: block;
width: 100%;
}
.feature-2__img img {
display: block;
width: 100%;
height: auto;
}
/* ============================================================
セクション No.11 Product_2types
- 見出し帯（全幅・赤→オレンジ 縦グラデ）＋ 商品画像（POTENTIAL 単独・全幅）。
- 画像はPC/SPとも全幅フルブリード。コピーは画像に焼込み。
- PC/SP同一画像。
============================================================ */
.sec--product-2types {
display: flex;
flex-direction: column;
align-items: center;
padding-block: var(--space-24);
}
/* 見出し帯（全幅・赤→オレンジ 縦グラデ・白文字中央） */
.product-2types__band {
width: 100%;
background: var(--grad-red-yellow);
padding-block: var(--space-24);
}
.product-2types__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
color: #fff;
text-align: center;
}
/* 商品画像の並び：SP=縦積み（まず）→ 768px以上で横並び2分割 */
.product-2types__images {
display: flex;
flex-direction: column;
width: 100%;
}
@media (min-width: 768px) {
.product-2types__images { flex-direction: row; align-items: flex-start; }
}
.product-2types__img {
display: block;
width: 100%;
height: auto;
}
@media (min-width: 768px) {
.product-2types__img { flex: 1 1 0; min-width: 0; } /* PC：各50% */
}
/* ============================================================
セクション No.13 Concerns_Section
- 背景：薄紫→グレーの縦グラデ（#b1a5cb→--gray）。
- Grid配置でPC/SPのレイアウト差を吸収：
SP = [画像 吹出し] / [リスト全幅]
PC = [吹出し全幅] / [画像 リスト]
- 吹き出し見出し（青）：PC=全幅バー（下向き尾）/ SP=小吹出し（左向き尾・微回転）。
- 区切り線はCSS破線、尾はCSS三角（画像不要）。
- #b1a5cb はFigma実測の装飾色（Light Blue Gray・トークン外）。
============================================================ */
.sec--concerns {
background: var(--grad-purple-gray);
padding-block: var(--space-24);
overflow: clip; /* SP吹出しの微回転によるはみ出しを抑止 */
}
.concerns__grid {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"girl bubble"
"list list";
align-items: center;
gap: var(--space-24);
}
@media (min-width: 768px) {
.concerns__grid {
grid-template-areas:
"bubble bubble"
"girl list";
}
}
/* --- 吹き出し見出し --- */
.concerns__bubble {
grid-area: bubble;
position: relative;
align-self: center;
justify-self: start;
width: 100%;
background: var(--blue);
border-radius: 8px;
padding: var(--space-16) var(--space-24);
color: #fff;
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4); /* SP=h4（2段切替） */
line-height: 1.4;
letter-spacing: -0.25px;
text-align: center;
transform: rotate(4deg); /* SP：Figma実測の微回転 */
}
/* SP：左向き三角（人物の方向を指す） */
.concerns__bubble::after {
content: "";
position: absolute;
left: -11px;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 12px solid var(--blue);
transform: translateY(-50%);
}
@media (min-width: 768px) {
.concerns__bubble {
display: flex;
align-items: center;
justify-content: center;
min-height: 100px;
padding: var(--space-24);
font-size: var(--font-h3); /* PC=h3 */
transform: none;
}
/* PC：下向き三角（左寄り・下の人物方向） */
.concerns__bubble::after {
left: 10%;
top: auto;
bottom: -13px;
border-top: 14px solid var(--blue);
border-bottom: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
transform: none;
}
}
/* --- 人物画像 --- */
.concerns__girl {
grid-area: girl;
align-self: center;
width: 100px; /* SP */
height: auto;
}
@media (min-width: 768px) {
.concerns__girl { width: 200px; } /* PC */
}
/* --- お悩みリスト（白カード） --- */
.concerns__list {
grid-area: list;
display: flex;
flex-direction: column;
width: 100%;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
overflow: hidden; /* 角丸内に破線区切りを収める */
}
.concerns__item {
display: flex;
align-items: center;
gap: var(--space-16);
padding: var(--space-24);
}
.concerns__item:not(:last-child) {
border-bottom: 1px dashed var(--gray-2);
}
.concerns__check {
flex: none;
width: 18px; /* SP（Figmaアイコン実寸18） */
}
@media (min-width: 768px) {
.concerns__check { width: 36px; } /* PC（36） */
}
.concerns__item-text {
font-size: var(--font-body); /* SP=body */
line-height: 1.8;
letter-spacing: 0.5px;
color: var(--blue);
}
@media (min-width: 768px) {
.concerns__item-text {
font-size: var(--font-body-l); /* PC=body-l */
line-height: 1.4;
letter-spacing: 0;
}
}
/* ============================================================
セクション No.14 Causing_Section
- 背景グレー。見出し帯（青→マゼンタ グラデ・全幅）＋ 本文。
- 本文：PC=左[テキスト＋図解]／右[歩行女性]の2カラム、
SP=歩行女性→テキスト→図解の縦積み（flex order で並替）。
- 青→マゼンタ グラデは共通 --grad-blue-magenta（No.8と共通）のローカル別名 --cs-grad。
見出し帯背景・強調グラデ文字で共用。
- 下向き矢印はCSS三角（画像不要・青）。
============================================================ */
.sec--causing {
--cs-grad: var(--grad-blue-magenta);
background: var(--gray);
display: flex;
flex-direction: column;
gap: var(--space-24);
padding-block: 0;
}
/* --- 見出し帯 --- */
.causing__band {
width: 100%;
background: var(--cs-grad);
padding-block: var(--space-24);
}
.causing__band-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
text-align: center;
color: #fff;
}
.causing__band-lead {
font-size: var(--font-body);
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.5px;
}
.causing__band-mid {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
}
.causing__band-head {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h2);
line-height: 1.2;
letter-spacing: -0.25px;
}
/* --- 本文（2カラム⇔縦積み） --- */
.causing__content {
display: flex;
flex-direction: column; /* SP：縦積み */
gap: var(--space-24);
padding-block: var(--space-24);
}
@media (min-width: 768px) {
.causing__content {
flex-direction: row; /* PC：2カラム */
align-items: center;
}
}
/* 歩行女性：SP=先頭(上)・全幅 / PC=右カラム（order で右へ） */
.causing__woman {
width: 100%;
height: auto;
}
@media (min-width: 768px) {
.causing__woman { order: 1; flex: 1 1 0; min-width: 0; }
}
/* 左カラム（テキスト＋図解）：SP=中央寄せ / PC=左寄せ */
.causing__left {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
width: 100%;
text-align: center;
}
@media (min-width: 768px) {
.causing__left { flex: 1 1 0; min-width: 0; align-items: flex-start; text-align: left; }
}
.causing__intro {
font-size: var(--font-body);
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.5px;
color: #000;
}
.causing__big {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h2);
line-height: 1.2;
letter-spacing: -0.25px;
background: var(--cs-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* 下向き矢印（CSS三角・青）。SP小 / PC大。 */
.causing__arrow {
flex: none;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 13px solid var(--blue);
}
@media (min-width: 768px) {
.causing__arrow {
border-left-width: 15px;
border-right-width: 15px;
border-top-width: 20px;
}
}
.causing__sub {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4); /* SP=h4 */
line-height: 1.4;
letter-spacing: -0.25px;
color: #000;
}
@media (min-width: 768px) {
.causing__sub { font-size: var(--font-h3); line-height: 1.2; } /* PC=h3 */
}
.causing__sub-em {
background: var(--cs-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* 図解（体の不調）：SP=全幅 / PC=左カラム幅から右56pxを空ける（Figma実測） */
.causing__diagram {
width: 100%;
height: auto;
}
@media (min-width: 768px) {
.causing__diagram { width: calc(100% - 56px); align-self: flex-start; }
}
/* ============================================================
セクション No.15 Causing_2_Section
- 背景グレー。青い見出し（リード＋h2）＋ キャプション焼込みの写真1枚。
- テキストはガター付き、画像はコンテナ全幅（SP=画面端まで全ブリード）。
============================================================ */
.sec--causing-2 {
background: var(--gray);
padding-block: var(--space-24);
}
.causing-2__inner {
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.causing-2__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
text-align: center;
color: var(--blue);
}
.causing-2__lead {
font-size: var(--font-body);
font-weight: 400;
line-height: 1.4; /* SP */
}
@media (min-width: 768px) {
.causing-2__lead { line-height: 1.8; letter-spacing: 0.5px; } /* PC */
}
.causing-2__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
}
.causing-2__img {
display: block;
width: 100%;
height: auto;
}
/* ============================================================
セクション No.16 Feature_3_Section（Figma実体名 Feature_1_Section）
- 見出しブロック（新常識バッジ＋緑→ライム グラデ見出し＋緑サブ）。
- 比較ブロック（グレー→白 背景）：歩行比較画像 → 足骨格比較画像 → 締めテキスト。
- 緑→ライム グラデは共通 --grad-green-lime（No.10と共通）を再利用。
============================================================ */
.sec--feature-3 {
padding-block: 0;
}
/* --- 見出しブロック --- */
.feature-3__head {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-16);
padding-block: var(--space-24);
text-align: center;
}
.feature-3__badge {
width: 120px; /* SP */
height: auto;
}
@media (min-width: 768px) {
.feature-3__badge { width: 160px; } /* PC */
}
.feature-3__title {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h2);
line-height: 1.2;
letter-spacing: -0.25px;
background: var(--grad-green-lime);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.feature-3__sub {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
color: var(--green);
}
/* --- 比較ブロック（グレー→白 背景） --- */
.feature-3__compare {
width: 100%;
background: var(--grad-gray-white);
}
.feature-3__compare-inner {
display: flex;
flex-direction: column;
align-items: center;
}
.feature-3__changes1,
.feature-3__changes2 {
display: block;
width: 100%;
height: auto;
}
.feature-3__changes2 { margin-block: var(--space-24); } /* Figma：py-24相当 */
.feature-3__closing {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
width: 100%;
padding-block: var(--space-24);
text-align: center;
}
.feature-3__closing-lead {
font-size: var(--font-body);
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.5px;
color: #000;
}
.feature-3__closing-em {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h2);
line-height: 1.2;
letter-spacing: -0.25px;
background: var(--grad-green-lime);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ============================================================
セクション No.17 Feature_Margin_Section
- 後から追加（Feature_3 と Feature_5 の間）。Feature群への導入。
- 上部に緑斜線帯（CSS）。本体は 考える女性（左）＋金バッジ・見出し・下向き矢印（右）。
- 金バッジは共通 --grad-gold、「ヒミツ」は --gold-solid。矢印・帯は画像不要（CSS）。
============================================================ */
.sec--feature-margin {
background: #fff;
padding-block: 0 var(--space-24); /* 帯は最上部に密着・下に余白 */
overflow: clip; /* 女性のクロップ・矢印のはみ出し抑止 */
}
/* 緑斜線帯（caution-tape風）。斜線(110deg)は維持しつつ、色は例外的に
「上→下」の縦グラデにする（90度回転）。
上層＝白間隔（緑バー部は透過）／下層＝縦方向の緑グラデ（濃→淡）。 */
.feature-margin__stripe {
width: 100%;
height: 40px; /* SP */
background:
repeating-linear-gradient(110deg, transparent 0 20px, #fff 20px 38px),
linear-gradient(180deg, #178c5b, #74cfa6);
}
@media (min-width: 768px) {
.feature-margin__stripe { height: 100px; } /* PC */
}
/* 本体：女性（左）＋テキスト（右）の横並び */
.feature-margin__inner {
position: relative;
display: flex;
align-items: flex-start; /* SP：女性は上基準でストライプに重ねる */
gap: var(--space-16);
padding-top: var(--space-16);
}
@media (min-width: 768px) {
.feature-margin__inner { align-items: center; gap: var(--space-48); padding-top: var(--space-24); }
}
/* 考える女性：SP=flex-1・頭部をストライプ帯に重ね、画像は全体表示（自然比率）
/ PC=320px固定・全身・重ねない */
.feature-margin__girl {
flex: 1 1 0;
min-width: 0;
width: 100%;
height: auto; /* 全体表示（クロップしない） */
margin-top: -40px; /* SP：ストライプ帯へ頭部をオーバーラップ */
position: relative;
z-index: 1;
}
@media (min-width: 768px) {
.feature-margin__girl { flex: none; width: 320px; margin-top: 0; } /* PC：重ねない・全身 */
}
/* テキスト列 */
.feature-margin__text {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-8);
}
/* 金バッジ（pill・「なぜそんなに安定するの？」） */
.feature-margin__badge {
width: 100%;
padding-block: 6px; /* SP（Figma実測） */
background: var(--grad-gold);
border-radius: 50px;
color: #fff;
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-body); /* SP=16 */
line-height: 1.2;
letter-spacing: 0.5px;
text-align: center;
}
@media (min-width: 768px) {
.feature-margin__badge { padding-block: 12px; font-size: var(--font-strong); } /* PC */
}
/* 見出し（インソール/の構造に/ヒミツ/があります!） */
.feature-margin__headline {
text-align: center;
letter-spacing: -0.25px;
}
.feature-margin__h-line {
display: block;
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3); /* PC57 / SP~32 */
line-height: 1.4;
color: #000;
}
@media (min-width: 768px) {
.feature-margin__h-line { line-height: 1.2; }
}
.feature-margin__h-secret {
display: block;
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h1); /* PC108 / SP（大） */
line-height: 1.2;
color: var(--gold-solid);
}
/* 下向き矢印（CSS三角・金）。SP小 / PC大。 */
.feature-margin__arrow {
margin-top: var(--space-8);
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 30px solid var(--gold-solid);
}
@media (min-width: 768px) {
.feature-margin__arrow {
border-left-width: 120px;
border-right-width: 120px;
border-top-width: 60px;
}
}
/* ============================================================
セクション No.18 Feature_5_Section（Figma実体名 Feature_3_Section）
- 白背景。緑→ライム グラデ見出し＋リード＋骨格補正プレート図解。
- PC=注釈焼込み画像（横長）／SP=注釈なし画像（縦長）＋ Details(01/02)実テキスト。
- 見出しはSP=中央 / PC=左。緑→ライムは共通 --grad-green-lime を再利用。
============================================================ */
.sec--feature-5 {
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
padding-block: var(--space-24);
}
/* 見出し＋リード */
.feature-5__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
text-align: center; /* SP=中央 */
}
@media (min-width: 768px) {
.feature-5__head { align-items: flex-start; text-align: left; } /* PC=左 */
}
.feature-5__title { width: 100%; letter-spacing: -0.25px; }
.feature-5__title-1,
.feature-5__title-2 {
display: block;
background: var(--grad-green-lime);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.feature-5__title-1 {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
}
.feature-5__title-2 {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h2);
line-height: 1.2;
}
.feature-5__desc {
width: 100%;
font-size: var(--font-body-l);
font-weight: 400;
line-height: 1.4;
color: #000;
}
/* 図解画像（最大1200・中央寄せ） */
.feature-5__img {
display: block;
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
}
.feature-5__img img {
display: block;
width: 100%;
height: auto;
}
/* 注釈（SP専用：PCは画像焼込みのため非表示） */
.feature-5__details {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.feature-5__details { display: none; }
}
.feature-5__detail {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding-left: var(--space-16);
padding-block: var(--space-16);
}
.feature-5__detail:not(:last-child) {
border-bottom: 1px dashed var(--gray-2);
}
.feature-5__detail-no {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-caption);
color: var(--green);
}
.feature-5__detail-text {
font-size: var(--font-body);
line-height: 1.8;
letter-spacing: 0.5px;
color: #000;
}
.feature-5__detail-em {
font-family: var(--font-family-bold);
font-weight: 700;
color: var(--green);
}
/* ============================================================
セクション No.19 Feature_6_Section（Figma実体名 Feature_4_Section）
- 白背景。PC=注釈焼込み画像のみ（帯なし）／SP=帯＋注釈なし画像＋ Details(03/04/05)。
- SP帯＝白ピル「だから変わる!」＋「COCCACU™ならではの3つの体感ポイント」。
- 各Detail＝丸アイコン＋番号＋説明（下向き矢印で2段）。下向き矢印はCSS三角。
============================================================ */
.sec--feature-6 {
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
padding-block: var(--space-24);
}
/* 見出し帯（PC/SP共通）：白ピル＋見出し */
.feature-6__band {
width: 100%;
background: var(--grad-green-lime);
padding-block: var(--space-24);
}
.feature-6__band-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
}
.feature-6__band-badge {
padding: var(--space-8) var(--space-16);
background: #fff;
border-radius: 20px;
}
.feature-6__band-badge-text {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-body);
line-height: 1.8;
letter-spacing: 0.5px;
white-space: nowrap;
background: var(--grad-green-lime);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.feature-6__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
color: #fff;
text-align: center;
}
/* 図解画像（最大1200・中央寄せ） */
.feature-6__img {
display: block;
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
}
.feature-6__img img {
display: block;
width: 100%;
height: auto;
}
/* 注釈（SP専用：PCは画像焼込みのため非表示） */
.feature-6__details {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.feature-6__details { display: none; }
}
.feature-6__detail {
display: flex;
align-items: flex-start;
padding-block: var(--space-16);
}
.feature-6__detail:not(:last-child) {
border-bottom: 1px dashed var(--gray-2);
}
.feature-6__icon {
flex: none;
width: 86px;
height: auto;
}
.feature-6__detail-body {
flex: 1 1 0;
min-width: 0;
padding-left: var(--space-16);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-8);
}
.feature-6__detail-no {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-caption);
color: var(--green);
}
.feature-6__detail-text {
font-size: var(--font-body);
line-height: 1.8;
letter-spacing: 0.5px;
color: #000;
}
.feature-6__em {
font-family: var(--font-family-bold);
font-weight: 700;
color: var(--green);
}
.feature-6__arrow {
align-self: flex-start; /* SP：左寄せ（detail本文の左端に揃える） */
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 11px solid #d9d9d9; /* Figma実測の装飾グレー */
}
/* ============================================================
セクション No.20 Feature_4_Section（Figma実体名 Feature_2_Section）
- 見出し帯（全幅・緑→ライム グラデ）＋ 3機能カード。
- 帯のピル/見出しはPC/SPで文言が異なり br-pc / br-sp で出し分け。
- カード：PC=3カラム / SP=縦積み。画像は枠全幅（SP=全ブリード）、
テキストはSPのみ左右ガター。
============================================================ */
.sec--feature-4 {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
padding-block: 0 var(--space-24);
}
/* 見出し帯（白ピル＋見出しを縦に中央寄せ） */
.feature-4__band {
width: 100%;
background: var(--grad-green-lime);
padding-block: var(--space-24);
}
.feature-4__band-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
}
/* 白ピル：「骨格補正プレートのポイント」（緑→ライムのグラデ文字） */
.feature-4__band-badge {
padding: var(--space-8) var(--space-16);
background: #fff;
border-radius: 30px;
}
.feature-4__band-badge-text {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-body);
line-height: 1.8;
letter-spacing: 0.5px;
white-space: nowrap;
background: var(--grad-green-lime);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.feature-4__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
color: #fff;
text-align: center;
}
/* 3機能：最大1200・中央寄せ（ul直 .lp-container は中央寄せが効かないためdivで内包） */
.feature-4__listwrap {
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
}
.feature-4__list {
display: grid;
grid-template-columns: 1fr; /* SP=1列 */
gap: var(--space-24);
width: 100%;
}
@media (min-width: 768px) {
.feature-4__list { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.feature-4__item {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.feature-4__img {
display: block;
width: 100%;
height: auto;
}
.feature-4__body {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding-inline: var(--space-24); /* SP：テキストのみ左右ガター */
text-align: center;
}
@media (min-width: 768px) {
.feature-4__body { padding-inline: 0; } /* PC：カラム端まで */
}
.feature-4__title {
font-size: var(--font-body-l);
font-weight: 400;
line-height: 1.4;
color: var(--green);
}
.feature-4__desc {
font-size: var(--font-body);
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.5px;
color: #000;
}
/* ============================================================
セクション No.21 Different_Section
- 緑の見出し（普通の中敷きとなにが違うの？）＋ 比較表画像（PC/SP同一）。
============================================================ */
.different__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
}
.different__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
color: var(--green);
text-align: center;
}
.different__table {
display: block;
width: 100%;
height: auto;
}
/* ============================================================
セクション No.22 Howto_Section
- グレー背景。緑見出し ＋ 5ステップ。
- ステップ：図解（緑枠・角丸・影・白地）＋ 番号＋説明（＋注記）。
- PC=2列グリッド（1,2 / 3,4 / 5）上揃え、SP=縦積み。文字は緑。
============================================================ */
.sec--howto {
background: var(--gray);
}
.howto__inner {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.howto__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
color: var(--green);
text-align: center;
}
/* ステップ並び：SP=1列 / PC=2列（上揃えでスタガード） */
.howto__steps {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-24);
}
@media (min-width: 768px) {
.howto__steps { grid-template-columns: repeat(2, 1fr); align-items: start; }
}
.howto__step {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
/* 図解（緑枠・角丸・影・白地） */
.howto__img {
aspect-ratio: 600 / 500;
border: 4px solid var(--green);
border-radius: 24px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
background: #fff;
overflow: hidden;
}
.howto__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 説明（番号＋本文＋注記） */
.howto__text {
display: flex;
align-items: flex-start;
gap: var(--space-16);
color: var(--green);
}
@media (min-width: 768px) {
.howto__text { padding: var(--space-16); } /* PCのみ内側余白 */
}
.howto__num {
flex: none;
font-size: var(--font-body);
line-height: 1.8;
letter-spacing: 0.5px;
}
.howto__text-body {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.howto__text-main {
font-size: var(--font-body);
line-height: 1.8;
letter-spacing: 0.5px;
}
.howto__text-note {
font-size: var(--font-caption-l);
line-height: 1.4;
letter-spacing: 0.5px;
}
/* ============================================================
セクション No.23 Review_Section
- 白背景。バナー（画像＋グレー文言）＋ 見出し ＋ モニターレビュー3件 ＋ 注釈。
- レビュー：赤の傾き帯（CSS ::before）の上に、回転＋白枠の写真と赤枠カード。
PC=写真/カード左右交互、SP=写真上/カード下の縦積み。
============================================================ */
.sec--review {
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
padding-block: var(--space-24);
}
/* --- ① バナー --- */
.review__banner {
display: flex;
flex-direction: column; /* SP=画像上/文言下 */
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
}
@media (min-width: 768px) {
.review__banner { flex-direction: row; align-items: stretch; } /* PC=画像左/文言右 */
}
.review__banner-img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
.review__banner-img { flex: 1 1 0; min-width: 0; object-fit: cover; }
}
.review__banner-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-16);
padding: var(--space-24);
background: var(--gray);
text-align: center; /* SP=中央 */
color: #000;
}
@media (min-width: 768px) {
.review__banner-text { flex: 1 1 0; min-width: 0; align-items: flex-start; text-align: left; padding-inline: var(--space-48); }
}
.review__banner-lead { font-size: var(--font-body); line-height: 1.8; letter-spacing: 0.5px; }
.review__banner-sub {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
}
.review__banner-big {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: var(--font-h1); /* SP=h1（全幅ボックスに収まる） */
line-height: 1.2;
letter-spacing: -0.25px;
}
/* PC：文言ボックス＝バナー半幅−左右余白48×2。h1(最大108px)では「自然な美尻」(5字)が
折り返すため、box/5.2 を上限に控えめなclampへ上書きして1行を維持する。
box幅 ≈ min(vw,1200)/2 − 96px → 768で288px(≤55px) / 1200で504px(≤97px)。 */
@media (min-width: 768px) {
.review__banner-big {
font-size: clamp(52px, calc(52px + 43 * (100vw - 768px) / 432), 95px);
}
}
.review__banner-bigline { display: block; white-space: nowrap; }
.review__banner-em { color: var(--red); }
/* --- ② 見出し --- */
.review__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
text-align: center;
color: var(--blue);
}
.review__head-lead { font-size: var(--font-body-l); line-height: 1.4; }
.review__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
}
.review__headline-note { font-size: var(--font-caption); font-weight: 400; vertical-align: super; }
/* --- ③ モニターレビュー --- */
.review__monitor {
position: relative;
width: 100%;
overflow: clip; /* 傾き赤帯のはみ出しを抑止 */
}
/* 赤の傾き帯（背景）：写真/カードの後ろに敷く */
.review__monitor::before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
width: 200%;
height: 90%; /* SP=縦積みで背が高いので広めに */
background: var(--red);
transform: translate(-50%, -50%) rotate(-3deg);
}
.review__monitor--reverse::before { transform: translate(-50%, -50%) rotate(3deg); }
@media (min-width: 768px) {
.review__monitor::before { height: 72%; } /* PC=横並びで背が低いので帯状に */
}
.review__monitor-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column; /* SP=写真上/カード下 */
gap: var(--space-16);
padding-block: var(--space-24);
}
@media (min-width: 768px) {
.review__monitor-inner { flex-direction: row; align-items: center; gap: var(--space-48); padding-block: var(--space-48); }
.review__monitor--reverse .review__monitor-inner { flex-direction: row-reverse; }
}
/* 写真（回転＋白枠＋影） */
.review__photo {
margin: 0;
width: 100%;
}
@media (min-width: 768px) {
.review__photo { flex: 1 1 0; min-width: 0; padding-inline: var(--space-48); }
}
.review__photo img {
display: block;
width: 100%;
height: auto;
border: 8px solid #fff;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
transform: rotate(-3deg);
}
.review__photo--right img { transform: rotate(3deg); }
/* レビューカード（白・赤枠・角丸） */
.review__card {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: var(--space-24);
background: #fff;
border: 3px solid var(--red);
border-radius: 24px;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
color: var(--blue);
}
@media (min-width: 768px) {
.review__card { flex: 1 1 0; min-width: 0; }
}
.review__card-text {
font-size: var(--font-h4);
line-height: 1.4;
}
.review__card-em { color: var(--red); }
.review__card-by {
font-size: var(--font-caption-l);
line-height: 1.4;
letter-spacing: 0.5px;
}
/* --- ④ 注釈 --- */
.review__note-wrap { width: 100%; }
.review__note { color: #000; }
/* ============================================================
セクション No.24 Product_Section
- 赤の見出し ＋ 商品画像（POTENTIAL 単独）。
- 画像は全幅の赤背景バンドの上にコンテナ幅で中央配置。
画像はコンテナ(1200)幅、1200超では側面に背景色が出る（side bleed）。
============================================================ */
.sec--product {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16); /* SP=16 */
padding-block: var(--space-24) 0; /* 上のみ余白（Figma pt-24） */
}
@media (min-width: 768px) {
.sec--product { gap: var(--space-24); } /* PC=24 */
}
/* 見出し */
.product__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
text-align: center;
color: var(--red);
}
.product__head-lead { font-size: var(--font-body); line-height: 1.8; letter-spacing: 0.5px; }
.product__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
}
/* 商品画像（縦積み・色背景バンド） */
.product__images {
display: flex;
flex-direction: column;
width: 100%;
}
.product__band {
display: flex;
justify-content: center;
width: 100%;
}
.product__band--potential { background: var(--red); }
.product__img {
display: block;
width: 100%;
max-width: var(--content-max);
height: auto;
}
/* ============================================================
セクション No.25 Sale_Section
- グレー背景。見出し（人気No.1バッジ＋セット名）＋ 商品画像3枚 ＋ 価格帯。
- 画像：PC=3枚横並び / SP=縦積み（全幅）。
- 価格帯：黒→赤グラデ。PC=[旧価格 →矢印 新価格]の横並び / SP=縦積み（↓矢印）。
- 価格の数字サイズはFigma実測の特注（クランプで2段）。矢印はCSS。
============================================================ */
.sec--sale {
background: var(--gray);
display: flex;
flex-direction: column;
align-items: center;
padding-block: var(--space-24) 0;
}
/* 見出し */
.sale__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
padding-block: var(--space-24);
text-align: center;
}
.sale__badge {
padding: var(--space-16) var(--space-24);
background: var(--red);
border-radius: 40px;
color: #fff;
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
white-space: nowrap;
}
.sale__title {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
color: #000;
text-align: center;
}
/* セット内容（太字body・中央） */
.sale__subtitle {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-body);
line-height: 1.8;
letter-spacing: 0.5px;
color: #000;
text-align: center;
}
/* 商品画像エリア
SP=縦積み（赤ブロック → ﾚｰｽ画像全幅） / PC=横並び（赤ブロック[2/3] ＋ ﾚｰｽ画像[1/3]） */
.sale__info { width: 100%; }
.sale__images {
display: flex;
flex-direction: column; /* SP=縦積み */
width: 100%;
}
@media (min-width: 768px) {
.sale__images { flex-direction: row; align-items: stretch; } /* PC=赤ブロック｜ﾚｰｽ画像 */
}
/* ①②の赤背景ブロック（Gridで配置切替。生px禁止のためトークン使用）
子要素は DOM順：title-main / price / imgwrap-a / title-sub / imgwrap-b / desc */
.sale__potential {
width: 100%;
background: var(--red);
color: #fff;
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
align-content: center;
row-gap: var(--space-8);
column-gap: var(--space-8);
padding-block: var(--space-24);
padding-inline: var(--space-16);
/* SP=縦積み（タイトル→価格→画像2枚横→2足目見出し→説明→セット価格） */
grid-template-areas:
"tmain tmain"
"price price"
"imga imgb"
"tsub tsub"
"desc desc"
"price2 price2";
}
@media (min-width: 768px) {
.sale__potential {
flex: 2 1 0;
min-width: 0;
row-gap: var(--space-16);
/* PC=2カラム（左:ポテンシャル[3行] / 右:便利な2足目[4行]） */
grid-template-areas:
"tmain tsub"
"imga imgb"
"price desc"
". price2";
}
}
.sale__pot-title--main { grid-area: tmain; }
.sale__pot-title--sub { grid-area: tsub; }
.sale__pot-text--price { grid-area: price; align-self: start; }
.sale__pot-imgwrap--a { grid-area: imga; }
.sale__pot-imgwrap--b { grid-area: imgb; }
.sale__pot-text--desc { grid-area: desc; align-self: start; }
.sale__pot-text--price2 { grid-area: price2; align-self: start; }
/* タイトル（h4・白・通常太さ） */
.sale__pot-title {
font-family: var(--font-family-base);
font-weight: 400;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
text-align: center;
}
/* 価格・説明（col1/col2で完全同一実装。SP=body）
（単品）（税込）等の小書きは親に追従（em） */
.sale__pot-text {
font-size: var(--font-body);
line-height: 1.8;
letter-spacing: 0.5px;
text-align: center;
}
.sale__pot-note-sm { font-size: 0.72em; }
/* PCのみ：タイトル・価格・説明とも列幅に追従する流体サイズ＋1行固定
（折返しで赤ブロック高がブレるのを防ぐ）。係数 vw ≒ 列幅の一定割合。下限/上限で極端値だけ抑える。 */
@media (min-width: 768px) {
.sale__pot-title {
white-space: nowrap;
font-size: clamp(18px, 2.7vw, 32px); /* h4相当（最長「COCCACU™ ポテンシャル」が列内1行に収まる係数） */
}
.sale__pot-text {
white-space: nowrap;
font-size: clamp(12px, 1.8vw, 22px);
line-height: 1.4;
}
}
/* 「便利な2足目セット！」だけは見出しでなく太字body（Figma：tmainはh4・tsubはbody太字）。
.sale__pot-title の後に置き、単一クラス同詳細度を source order で上書き。 */
.sale__pot-title--sub {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-body);
line-height: 1.8;
}
@media (min-width: 768px) {
.sale__pot-title--sub {
white-space: nowrap;
font-size: clamp(12px, 1.8vw, 22px);
}
}
/* 「セット価格：11,600円（税込）」：SP=太字h4で強調 / PC=他の価格文と同じ通常body。
.sale__pot-text と併用し、フォント系のみ上書き（source order で勝たせる）。 */
.sale__pot-text--price2 {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
}
@media (min-width: 768px) {
.sale__pot-text--price2 {
font-family: var(--font-family-base);
font-weight: 400;
white-space: nowrap;
font-size: clamp(12px, 1.8vw, 22px);
}
}
/* 画像ラップ（中央寄せ。col1/col2同一） */
.sale__pot-imgwrap {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-inline: var(--space-8);
}
/* SP=セル幅いっぱい / PC=両カラム同一幅（赤ブロックをﾚｰｽ画像高以下に保つため抑えめ） */
.sale__pot-img { width: 100%; height: auto; display: block; }
@media (min-width: 768px) {
.sale__pot-img { width: 52%; }
}
/* ③ﾚｰｽ販促画像（文言は焼き込み済み＝クロップ禁止の等倍表示）
SP=全幅 / PC=右1/3カラムを普通のflex子として配置。
赤ブロックは常にこの画像高以下に収まる設計なので、ﾚｰｽ画像が行の最大高となり等倍で全体表示される */
.sale__lace { width: 100%; }
.sale__lace-img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
.sale__lace { flex: 1 1 0; min-width: 0; }
}
/* ============================================================
セクション No.26 Set_Details_Section
- 上下に全幅の斜めストライプ帯（Frame4/5・赤→橙＋白斜線・40px）。
- 1カラム：見出し→写真→本文／区切り線／赤バッジ→特典見出し→写真→本文。
- 余白は親のFlex gapで統一（margin非依存）。中央寄せ。
- 本文のみ全幅・左寄せ。見出し/バッジ/特典見出しは中央。
============================================================ */
.sec--set-details {
padding-block: var(--space-24);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
}
/* 斜めストライプ帯（全幅・赤→橙の縦グラデ＋白斜線。No.17と同方式） */
.set-details__stripe {
width: 100%;
height: 40px;
background:
repeating-linear-gradient(110deg, transparent 0 20px, #fff 20px 38px),
var(--grad-red-yellow);
}
.set-details__inner {
padding-block: var(--space-24);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
}
/* 見出し（黒・中央） */
.set-details__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
text-align: center;
color: #000;
}
/* 写真（コンテナ幅・全幅） */
.set-details__img {
display: block;
width: 100%;
}
/* 本文（全幅・左寄せ・黒） */
.set-details__body {
width: 100%;
font-size: var(--font-body);
line-height: 1.8;
letter-spacing: 0.5px;
color: #000;
}
/* 区切り線（1px gray・全幅） */
.set-details__divider {
width: 100%;
margin: 0;
border: 0;
border-top: 1px solid var(--gray-2);
}
/* 赤バッジ（角丸・白太字・中央。SP=body / PC=h4 の2段） */
.set-details__badge {
background: var(--red);
border-radius: 16px;
padding: var(--space-16);
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-body); /* SP */
line-height: 1.2; /* SP */
letter-spacing: 0.5px;
text-align: center;
color: #fff;
}
@media (min-width: 768px) {
.set-details__badge {
font-size: var(--font-h4); /* PC */
line-height: 1.4;
letter-spacing: -0.25px;
}
}
/* 特典見出し（サブ=h4 / タイトル=h3 を密着配置） */
.set-details__gift-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #000;
}
.set-details__gift-sub {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
}
.set-details__gift-title {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
}
/* ============================================================
セクション No.27 Coupon_Section
- 見出し（グレー）＋ クーポン券（赤帯）。
- 価格2列：左=商品（グレー）/ 右=価格（赤・白文字）。PC=横並び / SP=縦積み。
- 価格の数字はFigma実測の特注サイズ（clampで2段）。
============================================================ */
.sec--coupon {
display: flex;
flex-direction: column;
align-items: center;
padding-block: 0;
}
/* --- 見出し --- */
.coupon__head {
width: 100%;
background: var(--gray);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
}
.coupon__head-text {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
padding-block: var(--space-24);
text-align: center;
}
.coupon__head-lead { font-size: var(--font-body); line-height: 1.8; letter-spacing: 0.5px; color: #000; }
.coupon__head-title { width: 100%; }
.coupon__head-line {
display: block;
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4); /* SP=h4：長文（このオファーページ限定で）の改行回避。PC=h3に復帰 */
line-height: 1.2;
letter-spacing: -0.25px;
color: #000;
}
@media (min-width: 768px) {
.coupon__head-line { font-size: var(--font-h3); }
}
.coupon__head-line--red { color: var(--red); display: none; } /* SPでは非表示（クーポン券画像と重複するため）。PCで表示 */
@media (min-width: 768px) {
.coupon__head-line--red { display: block; }
}
/* クーポン券（赤帯）＋ 会員登録CTA */
.coupon__ticket-band {
width: 100%;
background: var(--red);
display: flex;
flex-direction: column; /* 券画像→CTAボタンの縦積み */
align-items: center;
gap: var(--space-24); /* Figma：券とボタンの間 SP16 / PC24 */
padding-block: var(--space-24);
}
@media (min-width: 768px) {
.coupon__ticket-band { padding-block: var(--space-48); }
}
.coupon__ticket { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
.coupon__ticket { max-width: 640px; } /* PCはFigma実寸640pxに合わせる（SPは全幅） */
}
/* 会員登録CTAボタン（緑→ライムのpill）。幅は lp-container で SP=gutter内・PC=中央558pxに収める */
.coupon__cta-wrap { display: flex; justify-content: center; }
.coupon__cta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-24); /* 三角とテキストの間 SP16 / PC24 */
width: 100%;
max-width: 558px; /* Figma PC実寸 */
padding-block: var(--space-16); /* 高さ SP≒62 / PC≒100 を再現 */
padding-inline: var(--space-48);
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 60px;
background: var(--grad-green-lime);
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
text-decoration: none;
}
.coupon__cta-text {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
color: #fff;
white-space: nowrap;
}
/* 右向き三角（CSSのみ・白）。SP=25×30 / PC=40×50（Figma実寸） */
.coupon__cta-icon {
flex: none;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 25px solid #fff;
}
@media (min-width: 768px) {
.coupon__cta-icon {
border-top-width: 25px;
border-bottom-width: 25px;
border-left-width: 40px;
}
}
/* --- 価格2列 --- */
.coupon__compare {
width: 100%;
display: flex;
flex-direction: column; /* SP=縦 */
}
@media (min-width: 768px) {
.coupon__compare { flex-direction: row; align-items: stretch; } /* PC=横 */
}
/* 左：商品（グレー） */
.coupon__product {
background: var(--gray);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-16);
padding: var(--space-24);
}
@media (min-width: 768px) {
.coupon__product { flex: 1 1 0; min-width: 0; }
}
.coupon__product-title {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
color: #000;
text-align: center;
}
.coupon__product-img { display: block; width: 100%; height: auto; } /* Figma：カラム全幅 */
/* 右：価格（赤・白文字） */
.coupon__info {
background: var(--red);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-24);
color: #fff;
}
@media (min-width: 768px) {
.coupon__info { flex: 1 1 0; min-width: 0; }
}
.coupon__price {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
padding-block: var(--space-24);
}
.coupon__price-label { font-size: var(--font-body); line-height: 1.8; letter-spacing: 0.5px; }
.coupon__price-amount { font-family: var(--font-family-bold); font-weight: 700; white-space: nowrap; }
.coupon__yen { font-size: var(--font-h4); font-weight: 400; }
.coupon__tax { font-size: var(--font-body); font-weight: 400; }
/* 旧価格（取消線）：SP=52上限 / PC=64→112 */
.coupon__strike { font-size: clamp(40px, 14vw, 52px); text-decoration: line-through; }
@media (min-width: 768px) {
.coupon__strike { font-size: clamp(64px, calc(64px + 48 * (100vw - 768px) / 432), 112px); }
}
/* 「さらにお安く」バナー（SP=240 / PC=360） */
.coupon__sign { display: block; width: 100%; max-width: 240px; height: auto; }
@media (min-width: 768px) {
.coupon__sign { max-width: 360px; }
}
/* 最終価格：SP=64上限 / PC=72→128 */
.coupon__price--final .coupon__price-amount { font-family: var(--font-family-heading); font-weight: 800; }
/* SP=最終価格の下に白い下線 / PCは下線なし */
.coupon__price--final .coupon__price-amount { border-bottom: 5px solid #fff; padding-bottom: var(--space-8); }
@media (min-width: 768px) {
.coupon__price--final .coupon__price-amount { border-bottom: 0; padding-bottom: 0; }
}
.coupon__final-num { font-size: clamp(48px, 17vw, 64px); }
@media (min-width: 768px) {
.coupon__final-num { font-size: clamp(72px, calc(72px + 56 * (100vw - 768px) / 432), 128px); }
}
.coupon__yen-big { font-family: var(--font-family-bold); font-weight: 700; font-size: var(--font-strong); }
/* 1足あたり単価（最終価格の直下）。2クラス指定で共通リセットの詳細度を上回る */
.coupon__price--final .coupon__per-pair {
display: flex;
align-items: baseline;
justify-content: center;
margin-top: var(--space-8);
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.2;
letter-spacing: 1.5px;
}
/* ▶ は CSS で描画（テキストには含めない） */
.coupon__price--final .coupon__per-pair::before {
content: "\25B6";
margin-right: var(--space-8);
font-size: 0.7em;
}
/* 「足あたり」「円」は少し小さく＝数字を引き立てる */
.coupon__per-pair-unit { font-size: 0.6em; }
/* ============================================================
共通：情報カード（白・角丸8・影）— No.28/29/30 で共用
============================================================ */
.guarantee__card,
.faq__card,
.delivery__card {
width: 100%;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
/* ============================================================
セクション No.28 Guarantee_Section
- 青見出し＋白カード（2ブロック：30日サイズ交換 / 7日返品、間に区切り線）。
============================================================ */
.guarantee__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
}
.guarantee__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
padding-block: var(--space-16);
text-align: center;
color: var(--blue);
}
.guarantee__lead { font-size: var(--font-body); line-height: 1.8; letter-spacing: 0.5px; }
.guarantee__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
}
.guarantee__card {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: var(--space-24);
}
.guarantee__block {
display: flex;
flex-direction: column;
gap: var(--space-16);
color: var(--blue);
}
.guarantee__sub {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
text-align: center; /* SP/PC=中央 */
}
.guarantee__body { font-size: var(--font-body); line-height: 1.8; letter-spacing: 0.5px; }
.guarantee__note { font-size: var(--font-caption); line-height: 1.4; letter-spacing: 0.25px; }
.guarantee__link { color: var(--blue); text-decoration: underline; }
.guarantee__divider {
width: 100%;
height: 0;
margin: 0;
border: 0;
border-top: 1px solid var(--gray-2);
}
/* ============================================================
セクション No.29 FAQ_Section
- 青見出し＋白カード（5件のQ&A、間に破線区切り）。質問に吹き出しアイコン。
============================================================ */
.faq__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
}
.faq__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
padding-block: var(--space-16);
text-align: center;
color: var(--blue);
}
.faq__lead { font-size: var(--font-body); line-height: 1.8; letter-spacing: 0.5px; }
.faq__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
}
.faq__card {
display: flex;
flex-direction: column;
overflow: hidden; /* 角丸内に全幅破線を収める */
}
.faq__item {
display: flex;
flex-direction: column;
gap: var(--space-8); /* Q↔A を近づけ1問を1かたまりに */
padding: var(--space-24);
}
.faq__item:not(:last-child) {
border-bottom: 1px dashed var(--gray-2);
}
.faq__q {
display: flex;
align-items: center;
gap: var(--space-16);
}
.faq__icon { flex: none; width: 36px; height: 36px; }
/* 質問：太字で見出し化（回答より一段強い階層） */
.faq__q-text {
flex: 1 1 0;
min-width: 0;
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-body);
line-height: 1.4;
color: var(--blue);
}
/* 回答：質問より一段小さく・落ち着いた色 */
.faq__a {
display: flex;
flex-direction: column;
gap: var(--space-8); /* 複数段落・注釈の行間 */
font-size: var(--font-caption-l);
line-height: 1.8;
letter-spacing: 0.5px;
color: var(--ink);
}
/* PCは回答を質問テキスト位置（アイコン幅ぶん）に字下げして整列。SPは可読性優先でフル幅 */
@media (min-width: 768px) {
.faq__a { padding-left: calc(36px + var(--space-16)); }
}
/* ============================================================
セクション No.30 Delivery_Section
- 青見出し＋白カード（配送説明1文）。
============================================================ */
.delivery__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
}
.delivery__headline {
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
color: var(--blue);
text-align: center;
}
.delivery__card {
display: flex;
flex-direction: column;
gap: var(--space-16); /* 内容ブロック間の余白 */
padding: var(--space-24);
}
.delivery__body { font-size: var(--font-body); line-height: 1.8; letter-spacing: 0.5px; color: var(--blue); }
/* 注釈：本文と視覚的に分離（ハーフライン＋控えめな色・caption） */
.delivery__note {
margin-top: var(--space-8);
padding-top: var(--space-16);
border-top: 1px solid var(--gray-2);
color: var(--gray-2);
}
.delivery__note p + p { margin-top: var(--space-8); }
/* ============================================================
セクション No.31 Brand_Section
全幅2分割：PC=画像（左）＋グレーボックス（右）／SP=画像（上）＋グレー（下）
============================================================ */
.sec--brand { padding-block: var(--space-24); background: #fff; }
.brand__inner {
display: flex;
flex-direction: column; /* SP=縦積み */
}
@media (min-width: 768px) {
.brand__inner { flex-direction: row; align-items: stretch; justify-content: center; }
}
.brand__media { width: 100%; }
@media (min-width: 768px) {
.brand__media { flex: 1 1 0; min-width: 0; }
}
.brand__img {
display: block;
width: 100%;
aspect-ratio: 1200 / 1440;
object-fit: cover;
}
.brand__text {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-16);
padding: var(--space-48);
background: var(--gray);
}
@media (min-width: 768px) {
.brand__text { flex: 1 1 0; min-width: 0; }
}
.brand__lead {
width: 100%;
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h4);
line-height: 1.4;
letter-spacing: -0.25px;
color: #000;
}
.brand__headline {
width: 100%;
font-family: var(--font-family-bold);
font-weight: 700;
font-size: var(--font-h3);
line-height: 1.2;
letter-spacing: -0.25px;
color: #000;
}
.brand__accent { color: var(--red); }
.brand__body {
width: 100%;
font-size: var(--font-body-l);
line-height: 1.4;
color: #000;
}
/* =========================================================
§サイトフッター（本サイト hitotoashi.com/shop と同内容）