/* SANDLOCK LP — base（リセット・タイポ・共通部品・アニメ層のCSS）。担当は自分のcssで上書きしてよいが、ここは編集しない */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--f-body);font-size:16px;line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video,svg{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}

/* 環境：微細なグレイン（静止画でも見える 7%） */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 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(72px,11vw,148px)}
.sec--paper{background:var(--paper);color:var(--paper-ink);--line:var(--paper-line);--muted:var(--paper-muted)}
.sec--paper .eyebrow{color:var(--brass-lo)}
.sec--deep{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}

/* タイポ */
.eyebrow{display:flex;align-items:center;gap:16px;font-family:var(--f-latin);font-weight:600;font-size:.82rem;letter-spacing:.34em;text-transform:uppercase;color:var(--brass)}
.eyebrow::before{content:"";width:40px;height:1px;background:currentColor;opacity:.7}
.h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.42;letter-spacing:.03em;text-wrap:balance;margin-top:22px}
.h3{font-family:var(--f-display);font-weight:700;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5;letter-spacing:.03em}
.lead{color:var(--muted);font-size:clamp(.98rem,1.5vw,1.1rem);line-height:2.05;max-width:38em;margin-top:22px}
.numeral{font-family:var(--f-latin);font-weight:600;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ボタン（CTAは真鍮の1色だけ。ホバーは8-3 文字ロールアップ入替） */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.9em;min-height:58px;padding:0 2.4em;border-radius:999px;font-family:var(--f-body);font-weight:700;font-size:1.02rem;letter-spacing:.08em;overflow:hidden;isolation:isolate;transition:transform var(--mp-dur-m) var(--mp-ease-out),box-shadow var(--mp-dur-m) var(--mp-ease-out),border-color var(--mp-dur-s)}
.btn--primary{color:#1a1208;background:linear-gradient(135deg,var(--brass-hi) 0%,var(--brass) 48%,#b8893f 100%);box-shadow:0 0 0 1px rgba(240,217,166,.5) inset,0 18px 48px -14px rgba(211,172,106,.55),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 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:btn-sheen 6s var(--mp-ease) 1.5s infinite}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(240,217,166,.7) inset,0 26px 60px -14px rgba(211,172,106,.7),0 2px 0 rgba(255,255,255,.4) inset}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{color:var(--cream);border:1px solid var(--line-strong);background:rgba(255,255,255,.02);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--brass);color:var(--brass-hi)}
.btn--lg{min-height:68px;padding:0 3em;font-size:1.12rem}
.btn .arrow{width:1.1em;height:1.1em;flex:none;transition:transform var(--mp-dur-m) var(--mp-ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
@keyframes btn-sheen{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
/* 8-3 文字ロールアップ入替 */
.roll{display:inline-block;position:relative;overflow:hidden;line-height:1.5;height:1.5em;vertical-align:middle}
.roll>span{display:block;transition:transform .7s var(--mp-ease-out)}
.roll>.roll-b{position:absolute;left:0;top:100%}
[data-roll]:hover .roll>span,[data-roll]:focus-visible .roll>span{transform:translateY(-100%)}

/* 1-4 マスクせり上げ（見出し） */
.mp-heading{overflow:hidden}
.mp-heading .mp-heading-inner{display:block}
.mp-heading .mp-heading-inner.mp-on-1-4{transform:translateY(110%);opacity:0;transition:transform var(--mp-dur-l) var(--mp-ease),opacity var(--mp-dur-l) var(--mp-ease);will-change:transform,opacity}
.mp-heading .mp-heading-inner.mp-on-1-4.mp-in-1-4{transform:translateY(0);opacity:1}
/* 2-4 スライド・リビール（本文・カード） */
.mp-rev{opacity:0;transform:translateY(var(--mp-dist));transition:opacity var(--mp-dur-m) var(--mp-ease-out),transform var(--mp-dur-l) var(--mp-ease-out);will-change:opacity,transform}
.mp-rev.mp-rev-in{opacity:1;transform:none}
/* 3-6 二層リビール（大きな画像） */
.mp-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--mp-ease-out)}
.mp-clip.mp-clip-in{clip-path:inset(0 0 0 0)}
.mp-clip>img,.mp-clip>picture img{transform:scale(1.3);transition:transform 2.1s var(--mp-ease-out)}
.mp-clip.mp-clip-in>img,.mp-clip.mp-clip-in>picture img{transform:scale(1)}
/* 1-20 数字スロット/オドメーター（価格） */
.mp-odo{display:inline-flex;align-items:flex-start}
.mp-odo .mp-odometer-digit{position:relative;display:inline-block;height:1em;width:.56em;overflow:hidden;vertical-align:bottom}
.mp-odo .mp-odometer-strip{position:absolute;left:0;top:0;display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.6s var(--mp-ease-out)}
.mp-odo .mp-odometer-strip span{height:1em;line-height:1;display:block;text-align:center}
.mp-odo .mp-odo-static{display:inline-block;height:1em;line-height:1;width:.28em;text-align:center}

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