:root{
  /* カラー */
  --brand: #7a6a5e;
  --brand-ink: #f7f5f3;

  /* 暗幕（薄め） */
  --dim-to: .10;

  /* スライド（5枚想定） */
  --slide-count: 7;
  --slide-stay: 8s;                                 /* 1枚の滞在時間 */
  --slide-anim-total: calc(var(--slide-count) * var(--slide-stay));

  /* 黒縁/左右の枠対策（固定ズーム） */
  --bleed-start: 1.3;
  --bleed-end:   1.3;

  /* ロゴ（topのみ表示） */
  --logo-max: 210px;
  --logo-vw:  32vw;

  /* パネル配置・サイズ */
  --panel-left: 15vw;
  --panel-top:  15vh;
  --panel-width: clamp(280px, 74vw, 900px);
  --panel-max-h: 80vh;

  /* パネルのタイポ */
  --panel-h2:   clamp(18px, 2.4vw, 24px);
  --panel-text: clamp(13px, 1.9vw, 15px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:#000; color:var(--brand-ink);
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x:hidden;
}

/* ───────── ヘッダー（ハンバーガー） ───────── */
.site-header{
  position:fixed; inset:0 0 auto 0; height:56px;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 10px; z-index:60; pointer-events:none;
}
.nav-toggle{
  pointer-events:auto; appearance:none; border:0; background:transparent;
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
}
.nav-toggle span{
  position:relative; width:24px; height:2px; background:var(--brand-ink);
  display:block; border-radius:2px; transition:opacity .2s ease, background .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; position:absolute; left:0; width:100%; height:2px;
  background:var(--brand-ink); border-radius:2px; transform-origin:center;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle span::before{ transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY( 6px); }
/* 開いたら中央に戻してから回転（ズレ防止） */
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(0) rotate(-45deg); }

/* ───────── ヒーロー/暗幕 ───────── */
.hero{
  position:relative; min-height:100dvh; display:grid; place-items:center;
  isolation:isolate; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(0,0,0,0);
  animation: dim 2600ms ease-out forwards;
}
@keyframes dim{ to{ background:rgba(0,0,0,var(--dim-to)); } }

/* ロゴ（topのみ）。パネル表示時は完全に消す */
.brand{
  position:relative; z-index:2; opacity:0; transform: translateY(6px);
  animation: brand-in 1400ms cubic-bezier(.2,.6,.14,1) 900ms forwards;
  transition: opacity .35s ease;
}
@keyframes brand-in{ to{ opacity:1; transform:none; } }
.content-has-panel .brand{ opacity:0 !important; pointer-events:none; }
.brand img{
  display:block; width:min(var(--logo-vw), var(--logo-max)); height:auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
}

/* ───────── 背景スライド（暗転ゼロ） ───────── */
.slides{ position:absolute; inset:0; z-index:0; background:#000; }
.slide{
  position:absolute; inset:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-color:#000; opacity:0;
  will-change: transform, opacity; backface-visibility:hidden;
}

/* 読み込み完了まで白回避：1枚目だけ見せる */
#slides:not(.is-ready) .s1{ opacity:1; }

/* 読み込み後：全スライドに同一アニメ。delayは個別に2本指定（crossfade/dirft） */
#slides.is-ready .slide{
  animation-name: crossfade, drift;
  animation-duration: var(--slide-anim-total), var(--slide-anim-total);
  animation-iteration-count: infinite, infinite;
  animation-timing-function: linear, linear;
}

/* クロスフェード：重なり多め→暗転なし */
@keyframes crossfade{
  0%{opacity:0} 8%{opacity:1} 22%{opacity:1} 30%{opacity:0} 100%{opacity:0}
}

/* オーバースキャン（ふち対策） */
@keyframes drift{
  0%{ transform: scale(var(--bleed-start)) }
  100%{ transform: scale(var(--bleed-end)) }
}

/* 画像割当 + “2本とも”同じ遅延を与える */
.s1{ background-image:url("bg1.jpg"); animation-delay: calc(0*var(--slide-stay)), calc(0*var(--slide-stay)); }
.s2{ background-image:url("bg2.jpg"); animation-delay: calc(1*var(--slide-stay)), calc(1*var(--slide-stay)); }
.s3{ background-image:url("bg3.jpg"); animation-delay: calc(2*var(--slide-stay)), calc(2*var(--slide-stay)); }
.s4{ background-image:url("bg4.jpg"); animation-delay: calc(3*var(--slide-stay)), calc(3*var(--slide-stay)); }
.s5{ background-image:url("bg5.jpg"); animation-delay: calc(4*var(--slide-stay)), calc(4*var(--slide-stay)); }
.s6{ background-image:url("bg6.jpg"); animation-delay: calc(5*var(--slide-stay)), calc(5*var(--slide-stay)); }
.s7{ background-image:url("bg7.jpg"); animation-delay: calc(6*var(--slide-stay)), calc(6*var(--slide-stay)); }


/* ───────── メニュー（背景共通・文字のみ） ───────── */
.site-nav{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center end;
  padding:10vh 6vw;
  background:linear-gradient(to bottom left, rgba(0,0,0,.10), rgba(0,0,0,.06));
  backdrop-filter: blur(2px);
}
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; text-align:right; }
.site-nav a{
  color:var(--brand-ink); text-decoration:none;
  font-size:clamp(18px,2.2vw,24px); letter-spacing:.06em;
  padding:6px 4px; line-height:1.2; transition:opacity .2s ease, color .2s ease;
  opacity:.92;
}
.site-nav a:hover,.site-nav a:focus{ color:var(--brand); opacity:1; }
[hidden]{ display:none !important; }

/* ───────── コンテンツ（左寄せ/上寄せ・is-activeのみ表示） ───────── */
.content{ position:fixed; inset:0; z-index:35; pointer-events:none; }

/* デフォルトは不可視＆クリック不可。is-active だけ表示・操作可 */
.panel{
  position:absolute;
  left: var(--panel-left);
  top:  var(--panel-top);
  max-width: var(--panel-width);
  max-height: var(--panel-max-h);
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  color: var(--brand-ink);
  text-align: left;

  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
  padding: 4px 0;
  scrollbar-width: thin;
}
.panel.is-active{
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .35s ease;
}
.panel h2{ margin:0 0 8px; font-weight:500; letter-spacing:.06em; font-size:var(--panel-h2); }
.panel p, .panel li{ margin:0 0 8px; line-height:1.7; font-size:var(--panel-text); opacity:.95; }

/* パネル内リンクの統一トーン */
.panel a{
  color:var(--brand-ink); text-decoration:underline;
  text-decoration-thickness:.06em; text-underline-offset:.18em; opacity:.92;
}
.panel a:visited{ color:var(--brand-ink); }
.panel a:hover, .panel a:focus{ opacity:1; color:var(--brand); }

/* PCのスクロールバーを淡く。モバイルはOS仕様で必要時のみ表示 */
.panel::-webkit-scrollbar{ width:6px; }
.panel::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; }
/* “下に続く”ヒント */
.panel::after{
  content:""; position:sticky; bottom:-1px; left:0; right:0; height:28px;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.08));
  pointer-events:none;
}

/* 動きを抑えるユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation:none; background:rgba(0,0,0,var(--dim-to)); }
  .brand{ animation:none; opacity:1; transform:none; }
  #slides.is-ready .s1{ opacity:1; }
  #slides.is-ready .s2, #slides.is-ready .s3, #slides.is-ready .s4, #slides.is-ready .s5, #slides.is-ready .s6, #slides.is-ready .s7{ display:none; }
  .panel{ transition:none; }
}

/* モバイル微調整 */
@media (max-width:520px){
  .brand img{ width:min(36vw, 180px); }
  :root{
    --panel-left: 12vw;
    --panel-top:  15vh;
    --panel-max-h: 85vh;
  }
}

/* SR-only（視覚的に非表示） */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 見出しの強弱スケールを拡張 */
:root{
  --panel-h2:   clamp(20px, 2.6vw, 28px); /* 見出し大（既存より少しだけ強め） */
  --panel-h3:   clamp(16px, 2.1vw, 20px); /* 見出し中 */
  --panel-lead: clamp(14px, 2.2vw, 17px); /* リード文 */
}

/* 既存の h2 定義はそのままでOK。h3とリード文だけ追加 */
.panel h3{
  margin: .8em 0 .4em;
  font-weight: 500;
  letter-spacing: .04em;
  font-size: var(--panel-h3);
  opacity: .98;
}
.panel .lead{
  font-size: var(--panel-lead);
  line-height: 1.8;
  opacity: .96;
}

/* 段落間マージンをやや広めに（長文で読みやすく） */
.panel p{ margin: .7em 0; }

/* 小さな注記 */
.panel .note{ opacity:.8; font-size: clamp(12px, 1.8vw, 13px); }