/* ============================================================
   REIMEIDO 黎明堂時計工房(架空)— 共通スタイル
   外部フォント・外部CSS・CDN 不使用。オフラインで完結する。
   ============================================================ */

:root{
  --ink:        #0b0d11;
  --ink-2:      #12151b;
  --ink-3:      #1a1f27;
  --paper:      #f4f2ed;
  --paper-2:    #e8e5dd;
  --line:       rgba(214,178,110,.28);
  --gold:       #d6b26e;
  --gold-dim:   #a98a4f;
  --text:       #e7e4dc;
  --text-dim:   #a09c93;
  --text-ink:   #23262c;
  --maxw:       1180px;
  --pad:        clamp(20px, 5vw, 64px);
  --serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "MS PMincho", serif;
  --sans:  "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.9;
  letter-spacing:.04em; overflow-x:hidden;
  font-feature-settings:"palt" 1;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.5; letter-spacing:.08em; margin:0; }
p{ margin:0 0 1.4em; }
::selection{ background:var(--gold); color:#0b0d11; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.eyebrow{
  font-size:.68rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.1em; font-family:var(--sans);
}
.lead{ color:var(--text-dim); font-size:.95rem; }
.rule{ height:1px; background:linear-gradient(90deg,var(--gold),transparent); border:0; margin:0; }

/* ---------- ヘッダ ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:24px;
  padding:14px var(--pad);
  transition:padding .4s ease;
}
/* backdrop-filter は fixed 子要素の基準枠を作ってしまうため、必ず擬似要素側に置く */
.site-head::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,13,17,.92), rgba(11,13,17,0));
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  transition:background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.site-head.is-solid::before{ background:rgba(11,13,17,.94); border-bottom-color:rgba(255,255,255,.06); }
.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.brand .mark{ width:34px; height:34px; flex:0 0 auto; }
.brand b{ font-family:var(--serif); font-size:1.02rem; letter-spacing:.28em; font-weight:500; }
.brand small{ display:block; font-size:.54rem; letter-spacing:.34em; color:var(--gold-dim); margin-top:2px; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); }
.nav a{ font-size:.76rem; letter-spacing:.2em; color:var(--text-dim); transition:color .25s; padding:6px 0; }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--gold); }
.nav .btn-cta{
  border:1px solid var(--line); padding:9px 20px; color:var(--text);
  transition:background .3s,color .3s,border-color .3s;
}
.nav .btn-cta:hover{ background:var(--gold); color:#0b0d11; border-color:var(--gold); }
.burger{ display:none; margin-left:auto; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:11px; }
.burger i{ display:block; height:1px; background:var(--text); margin:6px 0; transition:transform .3s, opacity .3s; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:860px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:26px;
    background:rgba(9,11,15,.985); transform:translateY(-100%); transition:transform .45s cubic-bezier(.6,.05,.2,1);
    margin:0;
  }
  .nav.is-open{ transform:none; }
  .nav a{ font-size:1.05rem; letter-spacing:.3em; }
}

/* ---------- 3Dスクロール区間 ---------- */
.scroll3d{ position:relative; height:520vh; }
.sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.sticky::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%, transparent 40%, rgba(6,7,10,.75) 100%);
}
#stage3d{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.stage-glow{
  position:absolute; left:50%; top:48%; width:min(78vmin,720px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(214,178,110,.16), rgba(60,90,160,.10) 42%, transparent 68%);
  filter:blur(12px); pointer-events:none;
}
.stage-caps{
  position:absolute; inset:auto 0 0 0; height:100%;
  display:flex; align-items:flex-end; pointer-events:none;
  padding:0 var(--pad) clamp(58px,9vh,120px);
}
.stage-cap{
  position:absolute; bottom:clamp(58px,9vh,120px); left:var(--pad);
  max-width:min(430px,72vw); opacity:0; will-change:opacity,transform;
}
.stage-cap h2{ font-size:clamp(1.5rem,3.2vw,2.35rem); margin:0 0 .55em; }
.stage-cap p{ color:var(--text-dim); font-size:.9rem; margin:0; }
.stage-cap .no{
  font-family:var(--serif); font-size:.72rem; letter-spacing:.4em;
  color:var(--gold); display:block; margin-bottom:1em;
}
.stage-bar{
  position:absolute; right:calc(var(--pad) - 4px); top:50%; transform:translateY(-50%);
  width:1px; height:min(38vh,300px); background:rgba(255,255,255,.12);
}
.stage-bar span{
  position:absolute; inset:0; background:var(--gold);
  transform-origin:top; transform:scaleY(.02);
}
.hero-title{
  position:absolute; left:0; right:0; top:clamp(96px,15vh,180px);
  text-align:center; pointer-events:none; padding-inline:var(--pad); z-index:3;
}
.hero-title.is-fading{ will-change:opacity,transform; }
.hero-title h1{
  font-size:clamp(2.1rem,6.4vw,4.6rem); letter-spacing:.16em; margin:0 0 .35em;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
}
.hero-title p{ color:var(--text-dim); font-size:.82rem; letter-spacing:.36em; margin:0; }
.scroll-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  font-size:.6rem; letter-spacing:.34em; color:var(--text-dim);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:opacity .5s; z-index:3;
}
.scroll-hint.is-gone{ opacity:0; }
.scroll-hint i{ width:1px; height:44px; background:linear-gradient(var(--gold),transparent); display:block; animation:drop 2.1s infinite; }
@keyframes drop{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* WebGLが無い環境の代替表示 */
.fallback3d{ display:none; position:absolute; inset:0; place-items:center; }
body.no-webgl .fallback3d{ display:grid; }
body.no-webgl #stage3d,
body.no-webgl .stage-bar{ display:none; }
body.no-webgl .scroll3d{ height:auto; }
body.no-webgl .sticky{ position:relative; height:min(100vh,760px); }
.fallback3d .spin{ width:min(56vmin,380px); animation:turn 26s linear infinite; }
@keyframes turn{ to{ transform:rotate(360deg); } }

/* ---------- 汎用セクション ---------- */
.section{ padding:clamp(80px,12vh,150px) 0; position:relative; }
.section--paper{ background:var(--paper); color:var(--text-ink); }
.section--paper .lead{ color:#5c5f66; }
.section--paper .eyebrow{ color:var(--gold-dim); }
.section--ink2{ background:var(--ink-2); }
.section-head{ max-width:720px; margin-bottom:clamp(38px,6vh,72px); }
.section-head h2{ font-size:clamp(1.6rem,4vw,2.7rem); margin-bottom:.6em; }

.grid{ display:grid; gap:clamp(18px,3vw,34px); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr)); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); }

.card{
  border:1px solid rgba(255,255,255,.09); padding:clamp(24px,3vw,36px);
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,0));
  transition:border-color .4s, transform .5s cubic-bezier(.2,.7,.3,1), background .4s;
}
.card:hover{ border-color:var(--line); transform:translateY(-6px); }
.card h3{ font-size:1.12rem; margin:0 0 .7em; }
.card p{ font-size:.88rem; color:var(--text-dim); margin:0; }
.card .num{ font-family:var(--serif); color:var(--gold); font-size:.7rem; letter-spacing:.34em; display:block; margin-bottom:1.2em; }
.section--paper .card{ border-color:rgba(0,0,0,.12); background:rgba(255,255,255,.5); }
.section--paper .card p{ color:#5c5f66; }
.section--paper .card:hover{ border-color:var(--gold-dim); }

/* 出現アニメーション */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* 数字 */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)); gap:clamp(20px,4vw,50px); }
.stat b{ font-family:var(--serif); font-size:clamp(2rem,5vw,3.2rem); color:var(--gold); display:block; line-height:1.1; font-weight:400; }
.stat span{ font-size:.74rem; letter-spacing:.24em; color:var(--text-dim); }

/* コレクション */
.piece{ display:block; border:1px solid rgba(255,255,255,.09); overflow:hidden; background:#0e1116; }
.piece .shot{
  aspect-ratio:4/3; display:grid; place-items:center; position:relative;
  background:radial-gradient(60% 60% at 50% 42%, #1d2330, #0b0d11 78%);
  overflow:hidden;
}
.piece .shot svg{ width:66%; transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.piece:hover .shot svg{ transform:scale(1.07) rotate(2deg); }
.piece .meta{ padding:22px clamp(18px,2.4vw,28px) 26px; border-top:1px solid rgba(255,255,255,.07); }
.piece .meta h3{ font-size:1.05rem; margin:0 0 .35em; }
.piece .meta .ref{ font-size:.66rem; letter-spacing:.3em; color:var(--gold); display:block; margin-bottom:.9em; }
.piece .meta p{ font-size:.82rem; color:var(--text-dim); margin:0 0 1em; }
.piece .price{ font-family:var(--serif); font-size:.94rem; color:var(--text); }

/* 年表 */
.timeline{ border-left:1px solid rgba(255,255,255,.13); padding-left:clamp(22px,4vw,44px); }
.timeline li{ list-style:none; padding:0 0 clamp(30px,5vh,56px); position:relative; }
.timeline li::before{
  content:""; position:absolute; left:calc(-1 * clamp(22px,4vw,44px) - 4px); top:.62em;
  width:7px; height:7px; background:var(--gold); border-radius:50%;
}
.timeline .yr{ font-family:var(--serif); color:var(--gold); letter-spacing:.22em; font-size:.82rem; display:block; margin-bottom:.5em; }
.timeline h3{ font-size:1.05rem; margin:0 0 .5em; }
.timeline p{ font-size:.86rem; color:var(--text-dim); margin:0; }

/* テーブル */
.spec{ width:100%; border-collapse:collapse; font-size:.86rem; }
.spec th,.spec td{ text-align:left; padding:15px 12px; border-bottom:1px solid rgba(255,255,255,.09); vertical-align:top; }
.spec th{ width:34%; color:var(--gold-dim); font-weight:400; letter-spacing:.14em; }
.spec td{ color:var(--text-dim); }
.section--paper .spec th,.section--paper .spec td{ border-color:rgba(0,0,0,.1); }
.section--paper .spec td{ color:#5c5f66; }

/* フォーム */
.form{ display:grid; gap:20px; }
.field label{ display:block; font-size:.7rem; letter-spacing:.24em; color:var(--gold-dim); margin-bottom:8px; }
.field input,.field textarea,.field select{
  width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.13);
  color:var(--text); padding:13px 15px; font:inherit; font-size:.9rem; border-radius:0;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.field textarea{ min-height:150px; resize:vertical; }
.btn{
  display:inline-block; border:1px solid var(--gold); color:var(--gold);
  padding:15px 44px; font-size:.78rem; letter-spacing:.26em; background:none;
  cursor:pointer; transition:background .35s,color .35s; font-family:var(--sans);
}
.btn:hover{ background:var(--gold); color:#0b0d11; }
.btn--fill{ background:var(--gold); color:#0b0d11; }
.btn--fill:hover{ background:none; color:var(--gold); }
.note{ font-size:.74rem; color:var(--text-dim); letter-spacing:.08em; }

/* 引用 */
.quote{ font-family:var(--serif); font-size:clamp(1.15rem,2.7vw,1.85rem); line-height:2; letter-spacing:.1em; max-width:24em; }
.quote cite{ display:block; font-size:.72rem; letter-spacing:.3em; color:var(--gold); font-style:normal; margin-top:2em; }

/* 動き続ける装飾(脱進機の往復) */
.escape{ width:min(320px,80%); }
.escape .balance{ transform-origin:120px 120px; animation:osc 1.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes osc{ 0%,100%{ transform:rotate(-34deg);} 50%{ transform:rotate(34deg);} }
.escape .pallet{ transform-origin:120px 214px; animation:pal 1.6s steps(1,end) infinite; }
@keyframes pal{ 0%,49%{ transform:rotate(-7deg);} 50%,100%{ transform:rotate(7deg);} }
.escape .escwheel{ transform-origin:120px 214px; animation:esc 8s steps(20,end) infinite; }
@keyframes esc{ to{ transform:rotate(360deg);} }

/* CTA帯 */
.cta{ text-align:center; padding:clamp(80px,13vh,160px) var(--pad); background:var(--ink-3); }
.cta h2{ font-size:clamp(1.6rem,4.4vw,2.9rem); margin-bottom:.7em; }
.cta p{ color:var(--text-dim); max-width:36em; margin-inline:auto; font-size:.9rem; }

/* フッタ */
.site-foot{ background:#07090c; padding:clamp(56px,8vh,90px) 0 34px; font-size:.8rem; }
.foot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:34px; margin-bottom:44px; }
.foot-grid h4{ font-size:.68rem; letter-spacing:.3em; color:var(--gold); margin-bottom:1.4em; font-family:var(--sans); }
.foot-grid a,.foot-grid li{ list-style:none; color:var(--text-dim); line-height:2.3; font-size:.82rem; }
.foot-grid a:hover{ color:var(--gold); }
.foot-grid ul{ margin:0; padding:0; }
.disclaimer{
  border-top:1px solid rgba(255,255,255,.08); padding-top:22px;
  color:#6d7078; font-size:.72rem; line-height:2; letter-spacing:.06em;
}
.disclaimer b{ color:var(--gold-dim); font-weight:400; }

/* 下層ページの見出し帯 */
.page-hero{
  position:relative; padding:clamp(150px,22vh,230px) 0 clamp(60px,9vh,110px);
  background:
    radial-gradient(80% 120% at 82% 12%, rgba(214,178,110,.14), transparent 62%),
    linear-gradient(180deg,#0d1015,#0b0d11);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.page-hero h1{ font-size:clamp(1.9rem,5.4vw,3.4rem); margin-bottom:.4em; }
.page-hero .lead{ max-width:34em; }
.page-hero .deco{ position:absolute; right:-8%; top:8%; width:min(48vw,540px); opacity:.16; animation:turn 90s linear infinite; }

@media (max-width:600px){
  body{ font-size:15px; line-height:1.85; }
  /* 狭い画面では本文が3Dに重なるので、下から暗幕を敷いて可読性を確保する */
  .sticky::before{
    content:""; position:absolute; inset:auto 0 0 0; height:66%; z-index:1; pointer-events:none;
    background:linear-gradient(to top, rgba(6,7,10,.94), rgba(6,7,10,.62) 42%, transparent);
  }
  .stage-caps{ z-index:2; }
  .stage-cap{ max-width:none; right:var(--pad); }
  .stage-bar{ display:none; }
  .hero-title{ top:clamp(88px,13vh,140px); }
  /* 375px幅で見出しがはみ出すと、中央寄せの要素がまとめて右へずれる */
  .hero-title h1{ font-size:clamp(1.6rem,7.8vw,2.6rem); letter-spacing:.10em; }
  .hero-title p{ font-size:.6rem; letter-spacing:.2em; }
  .scroll3d{ height:460vh; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}