/* =====================================================================
   bySENSE OFFICIAL WEBSITE — about.css  (STORY page-specific)
   Figma frame 1:673 (1536×9155) を再現。
   ── Phase1 レスポンシブ flow/grid化（セッション16）──
   旧: .below-fv + 各要素 top:px のグローバル絶対カスケード ＋ .about-stage{height:calc}。
   新: 縦の背骨を「マクロセクション」へ sectionize。各 .ab-sec は position:relative・
       width:100%・Figma縦スパンを explicit height で保持し、順にフローする
       （ページ高は自動＝旧 calc(100vh+7960px) と一致）。
       重なり島（写真帯上の白文字・brand-feat 177px重なり・design-graphic seam跨ぎ・
       design-labels）は各セクション内の absolute 島として封じ込め、local top で配置。
   幅: frame/本文measure を 100%/min() に相対化（固定px幅をゼロに）。
       left オフセット(128/384/896…)・帯の高さ(1024…)・型スケールは px 据置き（Phase1）。
       → Phase2 で section height・島オフセットを clamp 化する土台。
   一次ソース: Figma get_metadata / get_design_context 実測（権威）。
   共通トークン/部品は base.css・components.css（編集禁止）を使用。
   色/オーバーレイ方針:
     HERO H1/H2 = 白(写真上) / brandstory左・philosophy・craft+design見出し = 濃#393c41(無地)
     brandstory右・SENSE・[S+]ラベル = 白(写真上)
   ===================================================================== */

/* stage: 固定高を撤廃しフロー化（旧 height:calc(100vh+7960px) を削除）。 */
.about-stage { /* flow（height は子セクションの積み上げで自動） */ }

/* ============ [Phase2] stage 流体化（.about-stage スコープ＝他5ページ無影響・FAQと同方式） ============
   base.css .stage は width:1536固定＋margin-left:calc((100vw-1536)/2)（narrow は負マージンで
   左右クリップ＝左端欠け）。Phase2 は width:100%+max-width で 1536超は中央寄せ(現状維持)、
   1536未満で縮む(左端クリップ解消)。全6ページ移行後に base.css へ昇格（新旧併存）。 */
.stage.about-stage {
  width: clamp(var(--floor), 100vw, var(--frame));
  margin-left: calc((100vw - clamp(var(--floor), 100vw, var(--frame))) / 2);
  margin-right: 0;
}
/* bleed 再定義: stage が中央寄せ(margin auto)の限り stage幅非依存で viewport 全幅へ。
   left:50%(=stage中心=viewport中心) → margin-left:-50vw(viewport左端) → width:100vw。
   旧 .stage .bleed の left:calc((1536-100vw)/2)（1536固定前提・<1536破綻）を上書き。 */
.stage.about-stage .bleed {
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
}

/* ── [Phase2] 水平座標の比例化（マガジングリッドを1536基準%で一律スケール） ──
   絶対配置コンテンツの left と本文 measure を Npx → calc(N/1536*100%) へ。
   stage≤1536 なので % は常に Npx 以下＝1536で完全一致(totalDiffPx=0)・<1536で比例縮小し
   右端はみ出し(narrow clip)を解消。据置き: 帯/セクションの height・島内部の固定幅(deco 47/62)・内部grid。 */

/* マクロセクション: relative・幅100%・Figma縦スパンを explicit height で保持。
   セクションは順にフロー → 各島は内部 absolute（local top）で封じ込め。
   height は「帯の高さ」と同類の保持px（Phase2 で clamp 化）。 */
.ab-sec { position: relative; width: 100%; }
.ab-sec--brand { height: 2309px; }   /* Figma 1082→3391 (HERO下端→PHILOSOPHY) */
.ab-sec--philo { height: 1585px; }   /* Figma 3391→4976 */
.ab-sec--sense { height: 1120px; }   /* Figma 4976→6096 */
.ab-sec--cd    { height: 2321px; }   /* Figma 6096起点。デザイン哲学スライダーはband2ヴェール上へのオーバーレイのため section 自体は伸びない（末尾余白80=band2終端2241+80）[feedback9] */

/* ============ SECTION 01 | HERO (0–1082 → 縦100vh×横100vw) ============ */
/* hero=画面高(100vh)・写真=100vw(.bleed)。フロー先頭の relative 子。
   前景(H1/H2/線/dots)は 1082px高の下端固定ラッパ(.ab-hero__fg)＝自己完結の島。 */
.ab-hero { position: relative; width: 100%; height: 100vh; }
.ab-hero__slider { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; }   /* + .bleed → 100vw */
.ab-hero__track { position: absolute; inset: 0; }
/* クロスフェード(site.js が .is-active をトグル / TOP と同一機構) */
.ab-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2s var(--ease); }
.ab-hero__slide.is-active { opacity: 1; }
.ab-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* 100vw×100vh cover */
/* 明るい写真上の白文字の可読性を確保する微かな下方グラデ（視認性のみ）— 100vw 層に乗せる */
.ab-hero__slider::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,18,14,0) 46%, rgba(20,18,14,.30) 78%, rgba(20,18,14,.42));
}
/* 前景ラッパ: 1082px高・FV下端固定。子は Figma 原寸 top のまま=縦構図を厳密保持。 */
.ab-hero__fg { position: absolute; left: 0; bottom: 0; width: 100%; height: 1082px; z-index: 3; }
/* H1 "STORY" 1:683 x128 y768 — Zen Kaku Gothic New Regular 24/42/6px・白 */
.ab-hero__h1 {
  position: absolute; left: calc(128 / 1536 * 100%); top: 768px; width: min(672px, calc(672 / 1536 * 100%));
  font-family: var(--sans); font-weight: 400;
  font-size: 24px; line-height: 42px; letter-spacing: 6px; color: var(--white);
}
/* H2（Figma 1:682 は〇プレースホルダ→STRUCTURE採用） x128 y865 — Mincho 500 24/48/3・白 */
.ab-hero__h2 {
  position: absolute; left: calc(128 / 1536 * 100%); top: 865px; width: min(672px, calc(672 / 1536 * 100%));
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; line-height: 48px; letter-spacing: 3px; color: var(--white);
}
/* 縦ライン 1:680 x128 y1022 h120 */
.ab-hero__vline { position: absolute; left: calc(128 / 1536 * 100%); top: 1022px; height: 120px; border-left: 1px solid rgba(255,255,255,.65); }
/* hero下フル幅線 1:681 y1082(=ラッパ下端=FV下端) — フレーム相対幅 */
.ab-hero__hline { position: absolute; left: 0; top: 1082px; width: 100%; border-top: 1px solid var(--line); }

/* ============ SEC02 BRAND STORY (.ab-sec--brand / Figma 1082基準) ============ */
/* 縦組み装飾 1:684 x129 y1184 → local 102 */
.ab-brand-deco { position: absolute; left: calc(129 / 1536 * 100%); top: 102px; width: 47px; height: 308px; opacity: .85; }
/* 左本文 Group122 1:734 x384 y1184 → local 102（濃文字・無地） */
.ab-brand-left { position: absolute; left: calc(384 / 1536 * 100%); top: 102px; width: min(672px, calc(672 / 1536 * 100%)); z-index: 2; }
.ab-brand-left__h { color: var(--ink); }
/* H2(96h) → 本文 の縦差 144px → 見出し下余白 */
/* [Phase2] 子要素の幅は親(列)基準の % を維持（calc(N/1536) は親が1536幅のトップレベル列のみ）。 */
.ab-brand-left__body { margin-top: 48px; width: min(448px, 100%); color: var(--ink); }
/* 写真帯 1:679 x0 y1680 → local 598 / w1536 h1024 */
.ab-brand-band { position: absolute; left: 0; top: 598px; width: 100%; height: 1024px; overflow: hidden; z-index: 1; }   /* + .bleed → 横100vw */
.ab-brand-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 右本文 1:733 x896 y1730 → local 648 / w384（白文字・写真上）。糀見出し「糀の哲学との出会い」を含む。 */
.ab-brand-right { position: absolute; left: calc(896 / 1536 * 100%); top: 648px; width: min(384px, calc(384 / 1536 * 100%)); z-index: 3; color: var(--white); }
.ab-brand-right__h { color: var(--white); visibility: hidden; }   /* [fb7] 画像上の重複見出しを非表示（削除）。見出し分の高さは余白として保持＝本文(.ab-brand-right__body)は上に詰めない */
.ab-brand-right__body { margin-top: 40px; }                 /* 見出し→本文の余白（他見出しの余白感に合わせる） */
/* 糀(BRAND STORY) 右下インセット写真 (about-brandstory-feat.jpg)。
   Figma原寸 node 1:765 IMG_0123: x384 y2527 → local 1445 / w1152 h768。
   茶バンド(～2704=local 1622)の下端に177px重なり(z-index:2で写真上)、右寄せ(左384=右端1536)。 */
.ab-brand-feat { position: absolute; left: calc(384 / 1536 * 100%); top: 1445px; width: min(1152px, calc(1152 / 1536 * 100%)); height: 768px; overflow: hidden; z-index: 2; }
.ab-brand-feat img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ SEC03 PHILOSOPHY (.ab-sec--philo / Figma 3391基準) ============ */
/* 左本文 Group138 1:737 x384 y3391 → local 0（濃文字・無地） */
.ab-philo { position: absolute; left: calc(384 / 1536 * 100%); top: 0; width: min(672px, calc(672 / 1536 * 100%)); z-index: 2; }
.ab-philo__h { color: var(--ink); }
/* H2 → 本文 縦差144。詳細版を写真帯(local 560)までに収めるため本文列を 672 measure に拡幅。 */
.ab-philo__body { margin-top: 48px; width: min(672px, 100%); color: var(--ink); }
/* 写真帯 1:678 x-1 y3951 → local 560 / w1538 h1025（テキストなし） */
.ab-philo-band { position: absolute; left: 0; top: 560px; width: 100%; height: 1025px; overflow: hidden; z-index: 1; }   /* + .bleed → 横100vw */
.ab-philo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ SEC04 WHAT IS SENSE (.ab-sec--sense / Figma 4976基準) ============ */
/* 写真帯 1:677 x1 y4976 → local 0 / w1535 h1024 */
.ab-sense-band { position: absolute; left: 0; top: 0; width: 100%; height: 1024px; overflow: hidden; z-index: 1; }   /* + .bleed → 横100vw */
.ab-sense-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 左側に白文字が載るため、視認性確保の左→右減衰ヴェール */
.ab-sense-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,18,14,.46) 0%, rgba(20,18,14,.22) 36%, rgba(20,18,14,0) 62%);
}
/* H2 1:771 x386 y5105 → local 129 / w384（白文字・写真上） */
.ab-sense__h { position: absolute; left: calc(386 / 1536 * 100%); top: 201px; width: min(384px, calc(384 / 1536 * 100%)); z-index: 3; color: var(--white); }   /* [2026-06-30] テキストブロックを少し下げ(129→201) [user] */
/* 本文 1:772 x386 y5233 → local 257 / w384（白文字・写真上） */
.ab-sense__body { position: absolute; left: calc(386 / 1536 * 100%); top: 329px; width: min(384px, calc(384 / 1536 * 100%)); z-index: 3; color: var(--white); }   /* [2026-06-30] テキストブロックを少し下げ(257→329・H2と同量+72) [user] */

/* ============ SEC05 CRAFT + DESIGN (.ab-sec--cd / Figma 6096基準) ============ */
/* 見出し Group276 1:740 x384 y6096 → local 0 / w672（濃文字・無地）2見出し連続。 */
.ab-cd-titles { position: absolute; left: calc(384 / 1536 * 100%); top: 0; width: min(672px, calc(672 / 1536 * 100%)); z-index: 2; }
.ab-cd__h { color: var(--ink); }
.ab-cd__h + .ab-cd__h { margin-top: 0; }   /* lh48 で2行が連続（Figma 1:741 は96h=2行ぶん） */

/* CRAFTSMANSHIP 写真帯 1:675 y6288 → local 192 / 2枚目 1:676 y7313 → local 1217 */
.ab-craft-band { position: absolute; overflow: hidden; z-index: 1; }
.ab-craft-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-craft-band--1 { left: 0; top: 192px; width: 100%; height: 1025px; }
.ab-craft-band--2 { left: 0; top: 1217px; width: 100%; height: 1024px; }
.ab-craft-band--2::after {     /* 可読性ヴェール（feedback9でデザイン哲学スライダーを内包する分、より広く・濃く） */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,14,0) 15%, rgba(20,18,14,.72) 45%, rgba(20,18,14,.86) 100%);
}

/* DESIGN 図解SVG 1:778 x384→320(中央化) y7184 → local 1088 / w896（band1底=local1217と band2頭を跨ぐ島・白線） */
.ab-design-graphic {
  position: absolute; left: calc(320 / 1536 * 100%); top: 1088px; width: min(896px, calc(896 / 1536 * 100%)); height: 274px; z-index: 3;
  --fill-0: rgba(255,255,255,.85);
}
.ab-design-graphic img { width: 100%; height: auto; display: block; }

/* デザイン哲学スライダー（ロゴ／白銀比／パッケージ・band2の可読性ヴェール上にオーバーレイ・feedback9）。
   1topicずつ表示＋前後矢印（PC=カード外側フランキング／スマホはカード下＋フリック）で切替
   （site.js [data-design-slider]）。カードは CONCEPT `.c-sus-card` と同じ透過白背景（.08）を踏襲。
   ★padding は track ではなく各 slide 自身に付与する★＝position:absolute;inset:0 の子要素は
   containing block（親の padding box）をそのまま埋めるため親の padding を無視する（実測で判明した
   CSS挙動・trackにpaddingを置いても効かず天面/左右が0になっていた）。slide自身にpaddingを持たせれば
   通常のbox-model計算になり正しく効く。
   height は site.js が現在アクティブなslideの自然高を実測して都度セット（`fitHeight`）＝常にその
   topicの内容ぴったりの高さになり、幅が変わっても（1200-1536pxのフルードレンジ）追従する。CSSの
   670pxはJS無効時のフォールバック値のみ（stage floor=1200px相当で3slide中の最大自然高を実測）。
   ⚠height に transition は付けない：実機検証で「JSが数値を設定してもgetComputedStyleが古い値の
   ままになり続ける」不具合を確認（Chromiumの既知の癖＝transition対象プロパティに極めて早いタイミング
   でinlineスタイルを設定すると、トランジションが開始値のまま止まってしまい二度と解決しない）。
   高さの変化自体は瞬時（テキストのopacityクロスフェードだけで十分な体感の滑らかさが出る）。 */
.ab-design-slider {
  position: absolute; left: calc(320 / 1536 * 100%); top: 1460px; width: min(896px, calc(896 / 1536 * 100%)); z-index: 4;
}
.ab-design-slider__track {
  position: relative; height: 670px; overflow: hidden;   /* height はJSが実測値で都度上書き（フォールバックのみ） */
  background: rgba(255,255,255,.08);
}
.ab-design-slider__slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  padding: 44px 48px;
  transition: opacity .5s var(--ease);
}
.ab-design-slider__slide.is-active { opacity: 1; pointer-events: auto; }
.ab-design-note__h { color: var(--white); }
.ab-design-note__body { margin-top: 48px; color: rgba(255,255,255,.92); }

/* 前後矢印: PCはカードの外側左右にフランキング（vertically centered・写真上なので白系）。
   site.js の ARROW_SVG を .read-more と共用（prev は scaleX(-1) で反転）。
   hoverは塗りopacityの変化のみ（枠線は変えない＝白枠が急に明るくなる主張の強さを解消）。 */
.ab-design-slider__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.45); cursor: pointer; padding: 0;
  color: var(--white); transition: background .3s var(--ease);
}
.ab-design-slider__arrow:hover { background: rgba(255,255,255,.28); }
.ab-design-slider__arrow .arrow { width: 14px; height: 11px; display: inline-block; line-height: 0; }
.ab-design-slider__arrow .arrow svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.ab-design-slider__arrow--prev { left: -64px; }
.ab-design-slider__arrow--prev .arrow { transform: scaleX(-1); }
.ab-design-slider__arrow--next { right: -64px; }

/* スライダー共通kicker（連番＋区切り罫線＋英ラベル）。3項目固定のため番号は直書き（CSS counterの抽象化は不要）。
   写真オーバーレイ上のため白系（モバイルは無地背景に降りるため var(--ink) 系へ上書き＝下記 @media 参照）。 */
.ab-design-note__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ab-design-note__num { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.ab-design-note__rule { width: 32px; height: 1px; background: rgba(255,255,255,.45); flex: none; }
.ab-design-note__label { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--white); }

/* ============ 画像クレジット (麹画像2枚・各 absolute 親内で右下) ============ */
/* [fb] 縮小時に右寄せ feat 画像(.ab-brand-feat)が右下に重なるため左下へ。 */
.ab-brand-band__credit { position: absolute; left: 16px; right: auto; bottom: 14px; }
.ab-brand-feat__credit { position: absolute; right: 16px; bottom: 14px; }

/* ============ 注釈エリア (.ab-sec--cd 直後にフロー / footer 直上) ============ */
/* グリッド左 left128・幅 上限1280（フレームより狭ければ追従）。無地(var(--bg))上で濃文字。
   .ab-sec--cd の末尾96px余白を内包しているため margin-top は不要。 */
.ab-page-notes {
  position: relative; margin-left: calc(128 / 1536 * 100%); width: min(1280px, calc(1280 / 1536 * 100%)); z-index: 2;
}

/* ============ FOOTER (フロー・page-notes 直後) ============ */
#site-footer { position: relative; width: 100%; z-index: 2; margin-top: 80px; }   /* 注釈後の余白を全ページ80に統一(従来0→80) */

/* =====================================================================
   [Phase3] スマホ専用 (<768) — STORY
   マクロセクション(.ab-sec)を height:auto 化、絶対配置の島を relative フローへ。
   写真帯=全幅(aspect 3/2)・本文=1カラム(24pxガター)。写真上の白文字(brand-right/sense)は
   無地グレー上に降りるため濃文字へ(可読性)。HERO は白文字オーバーレイ維持(FAQ同型)。
   design 図解SVG は白線のため濃パネルに載せる。一般的なモバイル積み(元余白は再現しない)。
   全ルール <768 ガード＝1536/デスクトップ回帰ゼロ。
   ===================================================================== */
@media (max-width: 767px) {
  /* stage floor 除去 + bleed の水平オフセット中和(全幅=viewport) */
  .stage.about-stage { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
  .stage.about-stage .bleed { left: 0; margin-left: 0; width: 100%; }
  .ab-sec { height: auto; }

  /* HERO: 前景島→左下1カラム(白文字オーバーレイ維持) */
  .ab-hero { height: 100svh; }
  .ab-hero__fg { height: auto; top: auto; bottom: 0; left: 0; width: 100%; padding: 0 24px 56px; }
  .ab-hero__h1 { position: static; left: auto; top: auto; width: auto; font-size: 20px; letter-spacing: 4px; }
  .ab-hero__h2 { position: static; left: auto; top: auto; width: auto; margin-top: 6px; font-size: 22px; line-height: 36px; }
  /* [FV hairline] TOP同型: 左下の縦ヘアライン(スクロール誘導)＋hero下端のフル幅水平ベースライン。
     vline=白.6/left:24px・hero下端まで伸びる、hline=白.28/フル幅・hero下端近く。タイトルはpadding増で上へ。 */
  /* [sp2 fix] 他5ページと同値へ統一: hline は hero下端(bottom:0)＝以前 bottom:26px で「他より上＋謎の横線」に見えていた。
     vline は bottom:-40/height:96 で下端を跨ぐ scroll-cue に統一。 */
  .ab-hero__vline { display: block; left: 24px; right: auto; top: auto; bottom: -40px; height: 96px; border-left: 1px solid rgba(255,255,255,.6); }
  .ab-hero__hline { display: block; left: 0; right: auto; top: auto; bottom: 0; width: 100%; border-top: 1px solid rgba(255,255,255,.28); }

  /* 写真帯(共通): 全幅・relative・3:2 */
  .ab-brand-band, .ab-philo-band, .ab-sense-band, .ab-craft-band, .ab-brand-feat {
    position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 2;
  }
  .ab-craft-band--1, .ab-craft-band--2 { left: 0; top: auto; width: 100%; height: auto; }
  /* PHILOSOPHY/SENSE の2枚は全幅の縦長(3:4)へ。他帯(brand/craft/feat)は3:2のまま。 */
  .ab-philo-band { aspect-ratio: 3 / 4; }
  .ab-sense-band { aspect-ratio: 3 / 4; }
  /* SENSE: 白文字を画像内へ重ねるため可読ヴェールを再点灯（CONCEPT method帯と同調）。craft-band--2 は引き続き不要。 */
  .ab-craft-band--2::after { display: none; }
  .ab-sense-band::after { display: block; background: linear-gradient(180deg, rgba(20,18,15,.5), rgba(20,18,15,.14) 52%, rgba(20,18,15,.30)); }

  /* BRAND STORY */
  .ab-brand-deco { display: none; }
  .ab-brand-left { position: relative; left: auto; top: auto; width: auto; padding: 56px 24px 36px; }
  .ab-brand-left__body { width: auto; margin-top: 28px; }
  .ab-brand-right { position: relative; left: auto; top: auto; width: auto; color: var(--ink); padding: 36px 24px 0; }
  .ab-brand-right__h { display: none; }
  .ab-brand-right__body { margin-top: 0; }
  .ab-brand-feat { margin-top: 40px; }

  /* PHILOSOPHY */
  .ab-philo { position: relative; left: auto; top: auto; width: auto; padding: 56px 24px 36px; }
  .ab-philo__body { width: auto; margin-top: 28px; }

  /* WHAT IS SENSE: 白文字を2枚目画像(.ab-sense-band)内へオーバーレイ（デスクトップSENSE同型）。
     セクション(=.ab-sec relative)を基準に absolute 配置。in-flowは band のみ→高さは band(3:4)が規定。 */
  .ab-sec--sense { position: relative; }
  .ab-sense__h { position: absolute; left: 0; right: 0; top: 64px; width: auto; padding: 0 28px; color: var(--white); z-index: 3; }
  .ab-sense__body { position: absolute; left: 0; right: 0; top: 150px; width: auto; padding: 0 28px; color: rgba(255,255,255,.92); z-index: 3; }

  /* CRAFT + DESIGN */
  .ab-cd-titles { position: relative; left: auto; top: auto; width: auto; padding: 56px 24px 32px; }
  /* DESIGN 図解SVG: 濃パネル撤去。2枚のcraft写真の継ぎ目を跨ぐ島へ（in-flowのまま負マージンで上下に食い込み・z-index:2でband(=1)上に描画）。
     [sp2 fix] 白い線画が明るい写真上で潰れるため、SVGの透明部から透ける極薄ラジアルスクリム（中心.5→端0=ハードな枠なし）で
     局所的にコントラストを補う。旧 #27272b の不透明パネルとは別物（写真に溶ける淡い暈し）。 */
  .ab-design-graphic { position: relative; z-index: 2; left: auto; top: auto; width: min(420px, calc(100% - 48px)); height: auto; margin: -56px auto; padding: 0; background: radial-gradient(ellipse at center, rgba(20,18,15,.5) 0%, rgba(20,18,15,.24) 56%, rgba(20,18,15,0) 82%); }
  .ab-design-graphic img { width: 100%; max-width: none; margin: 0; }
  /* デザイン哲学スライダー: PCの写真オーバーレイをやめ、2枚目craft写真の直後・無地背景にin-flowで配置
     （現行踏襲＝「画像下にコンテンツ」）。表示方式はPCと同じ1topicずつ＋前後矢印＋フリック
     （display切替＝absolute/opacity不要・高さは表示中のslideに自動追従）。
     カード＝ベタ塗りではなくサイト共通の薄い透過（var(--line)と同系統・境界線で輪郭を出す）を採用。
     padding は（PC同様）slide自身に付与＝track側には置かない。 [feedback9] */
  .ab-design-slider { position: relative; left: auto; top: auto; width: auto; padding: 32px 24px 0; }
  .ab-design-slider__track {
    height: auto; overflow: visible; transition: none;
    background: rgba(255,255,255,.4); border: 1px solid var(--line);
  }
  .ab-design-slider__slide {
    position: relative; inset: auto; display: none; opacity: 1; transition: none;
    padding: 32px 24px 56px;
  }
  .ab-design-slider__slide.is-active { display: block; }
  .ab-design-note__h { color: var(--ink); }
  .ab-design-note__body { margin-top: 28px; color: var(--ink); }
  .ab-design-note__num { color: var(--ink-60); }
  /* 前後矢印: PCのカード外側フランキングをやめ、カード内下部に小さく配置（主操作はフリック）。無地に載るため濃色系。 */
  .ab-design-slider__arrow {
    position: absolute; top: auto; bottom: 16px; translate: none;
    width: 36px; height: 36px;
    background: transparent; border-color: var(--line); color: var(--ink);
  }
  .ab-design-slider__arrow:hover { background: rgba(57,60,65,.06); }
  .ab-design-slider__arrow--prev { left: 16px; }
  .ab-design-slider__arrow--next { right: 16px; }
  .ab-design-note__rule { background: var(--line); }
  .ab-design-note__label { color: var(--ink-60); }
  .ab-design-note__kicker { margin-bottom: 20px; }

  /* 注釈: [sp2] パッケージデザイン(トリプティク末尾)と注釈の間に罫線(24pxガター内・他の罫線と同色) */
  .ab-page-notes { margin: 28px 24px 0; width: auto; padding: 36px 0 0; border-top: 1px solid var(--line); }
  /* PC統一で追加した footer margin-top:80 をスマホへ波及させない（従来のモバイル間隔0を維持） */
  #site-footer { margin-top: 0; }
}

/* [2026-06-30] SENSEバンド差し替え比較ブロックのCSSは確定（0170採用）につき撤去。 */