/* =====================================================================
   bySENSE OFFICIAL WEBSITE — base.css
   Design tokens / reset / typography / grid / utilities
   一次ソース: Figma (fileKey 8mSqctY6FGooO6cu7T3tAW, TOP node 1:27)
   全値は各ノードの get_design_context 実測。design-spec §1-3 準拠。
   基準: 1536px デスクトップ。レイアウトは 1536 固定ステージ上の絶対座標。
   ===================================================================== */

/* ---- Fonts (Google Fonts) ---- */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@400;500;600&display=swap');

/* ---- Design tokens ---- */
:root {
  /* ---- color (Figma実測 = 権威) ---- */
  --ink: #393c41;            /* primary text / headings — warm charcoal [Figma実測] */
  --white: #ffffff;          /* reversed text on photos [Figma実測] */
  --bg: #d0d0d0;             /* page bg / footer band — neutral gray [Figma実測: (208,208,208)] */
  --bg-alt: #c6c6c6;         /* subtle面分け [派生] */
  --ink-muted: #707476;      /* footer copyright / legal small [Figma実測:sample 近似] */
  --ink-60: #4b4e54;         /* 補助テキスト [派生] */
  --line: rgba(57, 60, 65, .22);        /* hairline on light [近似] */
  --line-on-dark: rgba(255, 255, 255, .55); /* hairline on imagery [近似] */
  --img-veil: rgba(22, 18, 12, .22);    /* darken photos for white text [視認性確保] */

  /* ---- type families (Zen Old Mincho 見出し / Zen Kaku Gothic New 本文) [Figma実測] ---- */
  --serif: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* ---- type scale (1536 fixed, Figma実測) ---- */
  --fs-hero: 24px;           /* FV H1  (Mincho 400)  lh42 / tracking 6px [1:33] */
  --lh-hero: 42px;
  --tr-hero: 6px;
  --fs-head: 24px;           /* 節H2   (Mincho 500)  lh48 / tracking 3px [1:106/109/29] */
  --lh-head: 48px;
  --tr-head: 3px;
  --fs-body: 16px;           /* 本文   (Kaku 500)    lh32 [1:30/150/224] */
  --lh-body: 32px;
  --fs-nav: 16px;            /* ヘッダーナビ (Kaku 400) [1:98-102] */
  --fs-foot-nav: 16px;       /* フッターナビ (Kaku 500) lh24 [1:226] */
  --lh-foot-nav: 24px;
  --fs-label: 20px;          /* STEP / GLOW... ラベル (Kaku 500/700) lh32 [1:107実測] */
  --fs-small: 14px;          /* copyright / legal [近似] */

  /* ---- layout (Figma実測 正準値) ---- */
  --frame: 1536px;           /* 設計基準フレーム幅 */
  --floor: 1200px;           /* [Phase2.5] レスポンシブ最低幅フロア。1200〜1536流体・>1536中央寄せ・<1200は縮小表示(viewport)・<768スマホ専用 */
  --margin: 64px;            /* 左右マージン (content 64–1472) */
  --col-accent: 128px;       /* アクセント列 (FV H1 / 縦ライン / 縦組み装飾) */
  --col-main: 384px;         /* 本文主列 (節H2・本文左) */
  --col-right: 896px;        /* 右寄せ本文列 (幅384) */
  --col-2a: 385px;           /* 商品2カラム左 */
  --col-2b: 848px;           /* 商品2カラム右 */
  --readmore-w: 112px;       /* read-more 下線幅 [1:158/202 実測] */
  --header-h: 84px;          /* ヘッダー帯高 (y51, ロゴ33.7h) */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 500;                 /* 本文は Kaku Medium [Figma実測] */
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* =====================================================================
   STAGE — 1536px 固定アートボード（テキスト/グリッドは Figma 絶対座標で固定）
   各節は .stage 内に absolute / 固定 px で配置し Figma 絶対座標を忠実再現。
   アンカリング（ユーザー確定）: グリッドは常に中央寄せ。
     ・margin: auto と同義だが「はみ出す時は負マージンで中央クリップ」まで一式化:
       margin-left: calc((100vw - 1536)/2)  → wide=正(=auto相当の中央寄せ・左右均等余白)
                                              narrow=負(中央のままはみ出しをクリップ)
     ・narrow(<1536) は横スクロールさせず左右等量にクリップ（body overflow-x:hidden）。
   ※「右にずれて見える」はグリッド中央化＋各ページ側でブロック中央化の二段で解消
     （プロダクト等は Figma 上で元から右寄りのため、該当ブロックを中央へ寄せる）。
   ※スマホ等の本格レスポンシブ（グリッド/マガジン保持を解く）は全ページ完成後の別工程。
   全幅化(折衷案): フルブリード写真帯のみ .bleed で 100vw に breakout（画面端まで）。
   ===================================================================== */
.stage {
  position: relative;
  width: var(--frame);
  min-width: var(--floor);   /* [Phase2.5] フロア1200px。各ページ .{page}-stage の流体化(width:100%+max-width)と併用＝1200未満で縮まず縮小表示/スクロールへ */
  /* margin:auto 相当＋はみ出し時は負マージンで中央クリップ */
  margin-left: calc((100vw - var(--frame)) / 2);
  margin-right: 0;
  background: var(--bg);
  /* overflow:hidden は付けない = 写真帯が viewport 端まで出られる。
     横はみ出しは body{overflow-x:hidden} が吸収、各帯は個別に overflow:hidden。 */
}

/* full-bleed breakout: 親(stage/.fv/section 等)基準で viewport 全幅へ。
   stage が中央寄せ(margin-left:(100vw-1536)/2)なので、その逆数で viewport 左端へ。
   特異性 .stage .bleed (0,2,0) = 各ページ band の自前 left/width(0,1,0) を確実に上書き。 */
.stage .bleed { left: calc((var(--frame) - 100vw) / 2); width: 100vw; }

/* [セッション16] 旧 .below-fv（FV以下を 100vh−1082px 一括シフトするグローバル絶対カスケード）は
   全6ページが Phase1 でマクロセクション化フローへ移行したため撤去（新旧併存の終了）。
   各ページは hero=100vh フロー先頭 ＋ section(relative/explicit height) の積み上げで縦を構成。 */

/* narrow(<1536) は中央クリップ（横スクロールさせない）。body は常に overflow-x:hidden。 */

/* ---- Typography helpers (Figma実測値で固定) ---- */
.t-hero {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-hero); line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
}
.t-head {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-head); line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
}
.t-head-sans {                       /* H2 のサブ行 (Kaku Medium 24/48/3) [1:106 2行目] */
  font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-head); line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
}
.t-body {
  font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-body); line-height: var(--lh-body);
  letter-spacing: 0;
}
.t-label {                           /* STEP / GLOW... (Kaku 20/32) */
  font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-label); line-height: 32px; letter-spacing: 0;
}
.t-small { font-size: var(--fs-small); line-height: 1.6; }

/* ---- Utilities ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.on-dark { color: var(--white); }

/* reveal-on-scroll (progressive enhancement; JS adds .is-in) */
.reveal { opacity: 0; translate: 0 16px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
.reveal.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: 0 0; transition: none; }
  html { scroll-behavior: auto; }
}
@media (scripting: none) {
  .reveal { opacity: 1; translate: 0 0; }
}

/* =====================================================================
   48H RESET RING — 共通モーション (CONCEPT 48hサイクル / PRODUCTS リセット円)
   フィードバック: 「小円のみ→円を描画→小円がまわる」+「スクロールで時計回りに順に点灯」。
   位置・配色は各ページCSS(.c-ring-* / .p-ring-*)。トリガは既存 .reveal IO(.is-in)。
   スクロール連動の点灯(.is-lit)は site.js が時計回り順に付与。
   ===================================================================== */
/* 円の描画: SVG circle を stroke-dashoffset で一筆書き(上=12時から時計回り) */
.ring-draw { position: absolute; overflow: visible; pointer-events: none; z-index: 1; }
/* --circ = 円周(2πr)。各ページの半径に合わせて設定(concept r319→2005 / products r279→1753) */
.ring-draw circle {
  fill: none; stroke-width: 1; stroke-dasharray: var(--circ, 2005); stroke-dashoffset: var(--circ, 2005);
  transform: rotate(-90deg); transform-box: fill-box; transform-origin: center;
}
.reveal.is-in .ring-draw circle { transition: stroke-dashoffset 1.5s var(--ease) .25s; stroke-dashoffset: 0; }

/* 小円(disc): 隠れ→時計回りに stagger でスケールイン */
/* opacity/transform は登場stagger、background(点灯色)は軽いイージングで静かに変化 [user feedback 3e]
   ※ショートハンドに calc+var を混ぜると background の duration が 0 に落ちたためロングハンドで明示 */
[data-ring-disc] {
  transition-property: opacity, transform, background;
  transition-duration: .5s, .5s, .6s;
  transition-timing-function: var(--ease);
  transition-delay: calc(var(--i, 0) * .1s), calc(var(--i, 0) * .1s), 0s;
}
.reveal:not(.is-in) [data-ring-disc] { opacity: 0; transform: scale(.72); }
/* ※旧 ringChase(登場時に背景#fffで明滅一巡)は撤去 [user feedback 3e]:
   実行中/fill のアニメが background を握り .is-lit のイージングを阻害(probeで確認)、
   かつ #fff の明滅が静かなトーンと不一致だったため。循環の表現はスクロール連動の
   .is-lit(背景 .6s イージング)に一本化。 */
/* スクロール連動の点灯(時計回り。site.js が i<k に .is-lit を付与) */
[data-ring-disc].is-lit { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .reveal.is-in .ring-draw circle { transition: none; }
  [data-ring-disc] { transition: none; }
}
@media (scripting: none) {
  .ring-draw circle { stroke-dashoffset: 0; }
  [data-ring-disc] { opacity: 1; transform: none; }
}

/* =====================================================================
   SPIN RING — 濃淡で回転して見せる装飾大円 (TOP concept / PRODUCTS 48h / CONCEPT 48h 共通)
   [feedback2]「小円は止め、大きい円が回っているように見せたい(濃淡つけてタイムライン回転)」。
   構造: 常時見える faint な base 円 + その上を連続回転する gradient の sweep 円(コメット)。
   スクロール非依存の CSS animation。reduced-motion で停止(base は残す=円は消えない)。
   配色/グロー/半径は各ページが CSS変数 と SVG markup(stroke="url(#…)")で指定。
     --ring-base       : base 円のストローク色(既定=白28%)
     --ring-w          : 線幅(既定1)
     --ring-spin       : 一周の秒数(既定16s)
     --ring-glow       : sweep のグロー色(既定=透明=グローなし)
     --ring-glow-blur  : グローのぼかし(既定0)
   ===================================================================== */
.spin-ring { position: absolute; pointer-events: none; z-index: 2; }
.spin-ring__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spin-ring__svg circle { fill: none; }
/* 線幅は base/sweep を個別指定可(既定は --ring-w に揃う・後方互換)。
   --ring-w-base = 細い静止円 / --ring-w-sweep = 回転コメット [feedback3: 太い方=sweepを1.3倍] */
.spin-ring__base { stroke: var(--ring-base, rgba(255, 255, 255, .28)); stroke-width: var(--ring-w-base, var(--ring-w, 1)); }
/* sweep のみ回転(base は静止=円は常に視認)。gradient は要素と一緒に回り「濃淡が一周」する。
   [feedback4 TOP] 回転速度に強弱(イージング)を付与=既定タイミングを ease 化(--ring-ease)。
   中央が速く端でゆるむが、両端の速度を 0 にしない対称ベジェなので継ぎ目で停止せず連続回転に見える。
   linear に戻したいページは --ring-ease:linear で上書き可。 */
.spin-ring__sweep {
  stroke: url(#spinGrad); stroke-linecap: round;
  stroke-width: var(--ring-w-sweep, var(--ring-w, 1));
  transform-origin: 50% 50%;
  animation: spinRing var(--ring-spin, 16s) var(--ring-ease, cubic-bezier(0.5, 0.1, 0.5, 0.9)) infinite;
  filter: drop-shadow(0 0 var(--ring-glow-blur, 0px) var(--ring-glow, transparent));
}
@keyframes spinRing { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin-ring__sweep { animation: none; } }

/* [sp2] スマホ: コンテンツ見出しのバランス調整。FV 日本語見出し(全ページ 22px/36px に統一)を基準に、
   節見出し(.t-head / サブ行 .t-head-sans)の行高を 48px→36px に詰める(サイズ24pxは維持=FVより僅かに大きく
   自然な階層)。PC(>=768)は @media 不発火で 1536 byte 不変。各ページ固有見出し(PRODUCT 等)は各 CSS 側で調整。 */
@media (max-width: 767px) {
  .t-head, .t-head-sans { line-height: 36px; }
}