/* 砂時計ボックスLP — base（リセット・タイポ・共通部品・共通アニメ層のCSS）。持ち主=主。担当は自分のcssで上書きしてよいが、ここは編集しない */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 8px)}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--f-body);font-size:16px;line-height:1.9;letter-spacing:.03em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;word-break:auto-phrase;line-break:strict}
/* 行末に1〜2字だけ落ちる改行を防ぐ（監査1周目 medium）: 文節で折り返す＋段落は pretty・見出しは balance */
p,li,dd,figcaption,summary{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
img,video,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px;border-radius:2px}
html{scrollbar-width:thin;scrollbar-color:var(--brass-lo) var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 環境層：砂の粒子感（グレイン）。静止スクショでも見える濃さ */
/* z-index 45＝区画（1）より上・固定バー/トップバーより下。暗い地では overlay だと見えない（監査1周目 Gate4）ので、明るい粒を通常合成で薄く重ねる */
body::before{content:"";position:fixed;inset:0;z-index:45;pointer-events:none;opacity:.068;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .96  0 0 0 0 .9  0 0 0 .95 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main,header,footer,section{position:relative;z-index:1}

/* レイアウト */
.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.sec{padding-block:clamp(64px,9vw,120px)}/* 同じ黒の区画が続くと境目が約300pxの空白になった（監査1周目）ので詰める */
.sec--paper{background:var(--paper);color:var(--paper-ink);--line:var(--paper-line);--muted:var(--paper-muted);--dim:var(--paper-muted)}
.sec--paper .eyebrow{color:var(--brass-lo)}
/* 紙色の帯でも質感が見えるように、暗い粒をもう1層（監査2周目 Gate 4） */
.sec--paper{isolation:isolate}
.sec--paper::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .15  0 0 0 0 .1  0 0 0 .95 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.nw{white-space:nowrap}/* かっこや数字の途中で折らない（copy.json の値で使う） */
.sec--deep{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}

/* タイポ（見出し=明朝／欧文・数字=Bodoni／本文=ゴシック） */
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--f-latin);font-weight:500;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--brass)}
.eyebrow::before{content:"";width:36px;height:1px;background:currentColor;opacity:.7}
.eyebrow .folio{font-style:italic;letter-spacing:.08em}
.h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.75rem,4.3vw,3.1rem);line-height:1.45;letter-spacing:.04em;text-wrap:balance;margin-top:20px}
.h3{font-family:var(--f-display);font-weight:700;font-size:clamp(1.12rem,1.9vw,1.36rem);line-height:1.55;letter-spacing:.04em}
.lead{color:var(--muted);font-size:clamp(.98rem,1.45vw,1.08rem);line-height:2.05;max-width:36em;margin-top:20px}
.numeral{font-family:var(--f-latin);font-weight:500;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.hr{height:1px;background:var(--line);border:0;margin:0}
.note{font-size:.8rem;line-height:1.7;color:var(--dim);letter-spacing:.04em}
.fict{font-size:.78rem;color:var(--dim);letter-spacing:.06em}/* ※架空 の注記（選手権ルール：作った声・数字の近くに必ず置く） */

/* 額装：真鍮の細線を内側に1本。四隅に小さな目盛り（時計の見返しのような） */
.frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--panel);box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.frame::after{content:"";position:absolute;inset:10px;border:1px solid rgba(201,164,104,.34);border-radius:calc(var(--radius-lg) - 4px);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) top left/14px 14px no-repeat,linear-gradient(#000 0 0) top right/14px 14px no-repeat,linear-gradient(#000 0 0) bottom left/14px 14px no-repeat,linear-gradient(#000 0 0) bottom right/14px 14px no-repeat,linear-gradient(rgba(0,0,0,.35) 0 0);
          mask:linear-gradient(#000 0 0) top left/14px 14px no-repeat,linear-gradient(#000 0 0) top right/14px 14px no-repeat,linear-gradient(#000 0 0) bottom left/14px 14px no-repeat,linear-gradient(#000 0 0) bottom right/14px 14px no-repeat,linear-gradient(rgba(0,0,0,.35) 0 0)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.sec--paper .frame{background:var(--paper-2);box-shadow:0 26px 60px -36px rgba(40,28,16,.45)}

/* ボタン（CTAは真鍮1色。ホバーは文字ロールアップ＋矢印。常時は6秒に1回、砂のきらめきが走る） */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.85em;min-height:58px;padding:0 2.3em;border-radius:999px;font-family:var(--f-body);font-weight:700;font-size:1.02rem;letter-spacing:.08em;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform var(--dur-m) var(--ease-sig),box-shadow var(--dur-m) var(--ease-sig),border-color var(--dur-s) var(--ease-fn),color var(--dur-s) var(--ease-fn)}
.btn--primary{color:#1b1309;background:linear-gradient(135deg,var(--brass-hi) 0%,var(--brass) 50%,#ad8545 100%);
  box-shadow:0 0 0 1px rgba(236,211,160,.55) inset,0 18px 46px -14px rgba(201,164,104,.6),0 2px 0 rgba(255,255,255,.35) inset}
.btn--primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 36%,rgba(255,250,236,.6) 50%,transparent 64%);transform:translateX(-120%)}
/* 光沢は「ボタンが画面に入った時に1回だけ」（motion.js が .is-sheen を付ける）。一斉に・無限に光らせない＝同時に動くもの3つまで・WCAG 2.2.2（監査2周目） */
.btn--primary.is-sheen::after{animation:btn-sheen 1.3s var(--ease-fn) 1 both}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(236,211,160,.75) inset,0 26px 60px -14px rgba(201,164,104,.75),0 2px 0 rgba(255,255,255,.4) inset}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{color:var(--bone);border:1px solid var(--line-strong);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--brass);color:var(--brass-hi)}
.btn--lg{min-height:66px;padding:0 2.8em;font-size:1.1rem}
.btn .arrow{width:1.1em;height:1.1em;flex:none;transition:transform var(--dur-m) var(--ease-sig)}
.btn:hover .arrow{transform:translateX(4px)}
@keyframes btn-sheen{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
/* 文字ロールアップ（[data-roll]） */
.roll{display:inline-block;position:relative;overflow:hidden;line-height:1.5;height:1.5em;vertical-align:middle}
.roll>span{display:block;transition:transform var(--dur-m) var(--ease-sig)}
.roll>.roll-b{position:absolute;left:0;top:100%}
[data-roll]:hover .roll>span,[data-roll]:focus-visible .roll>span{transform:translateY(-100%)}

/* 共通アニメ層（motion.js が .js と各クラスを足す。JSが無ければ全部最初から見える） */
/* 見出し：行ごとのマスクせり上げ（.mp-heading。行は <span class="ln"> で区切れる） */
.mp-heading .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mp-heading .ln>span{display:block}
.js .mp-heading.mp-arm .ln>span{transform:translateY(105%);transition:transform var(--dur-l) var(--ease-sig)}
.js .mp-heading.mp-arm.mp-in .ln>span{transform:none}
/* 本文・カード：スライドリビール（[data-reveal]、親 [data-reveal-stagger] で順番に） */
.js .mp-rev{opacity:0;transform:translateY(var(--dist));transition:opacity var(--dur-m) var(--ease-sig),transform var(--dur-l) var(--ease-sig)}
.js .mp-rev.mp-rev-in{opacity:1;transform:none}
/* 大きな画像：二層リビール（[data-clip]。子の img/video が逆スケールで戻る） */
.js .mp-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease-sig)}
.js .mp-clip.mp-clip-in{clip-path:inset(0 0 0 0)}
.js .mp-clip img,.js .mp-clip video{transform:scale(1.22);transition:transform 2s var(--ease-sig)}
.js .mp-clip.mp-clip-in img,.js .mp-clip.mp-clip-in video{transform:scale(1)}
/* 数字スロット（[data-odo]） */
.mp-odo{display:inline-flex;align-items:flex-start}
.mp-odo .d{position:relative;display:inline-block;height:1em;width:.6em;overflow:hidden;vertical-align:bottom}
.mp-odo .s{position:absolute;left:0;top:0;display:flex;flex-direction:column;transition:transform 1.6s var(--ease-sig)}
.mp-odo .s span{height:1em;line-height:1;display:block;text-align:center}
.mp-odo .c{display:inline-block;height:1em;line-height:1;width:.3em;text-align:center}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn--primary::after{animation:none;display:none}
  .js .mp-rev,.js .mp-clip,.js .mp-clip img,.js .mp-clip video,.js .mp-heading.mp-arm .ln>span{transition:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
}