:root{
  --paper:#edeae2;
  --ink:#0c0b08;
  --ink-soft:#39362e;
  --silver:#9c978b;
  --hair:rgba(22,20,15,.30);
  --hair-soft:rgba(22,20,15,.13);
  --w:rgba(237,234,226,1);
  --w70:rgba(237,234,226,.7);
  --w45:rgba(237,234,226,.45);
  --w16:rgba(237,234,226,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--ink);color:var(--ink);
  font-family:'Shippori Mincho B1','EB Garamond',serif;
  overflow-x:hidden;
  /* テキスト選択を防ぐ */
  -webkit-user-select: none;
  user-select: none;
}
::selection{background:var(--silver);color:var(--ink)}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
img{display:block;max-width:100%}

canvas#water{position:fixed;inset:0;width:100%;height:100%;z-index:0}

/* ─────────── nav ─────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 26px;
  transition:color .5s ease;
  color:var(--w);
}
body.on-paper nav{color:var(--ink)}
nav .sig{font-size:13px;letter-spacing:.34em;font-weight:600}
nav ul{display:flex;gap:24px;list-style:none}
nav ul a{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.22em;
  opacity:.78;position:relative;padding:4px 0;
}
nav ul a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .3s ease;
}
nav ul a:hover{opacity:1}
nav ul a:hover::after,nav ul a:focus-visible::after{width:100%}

/* ─────────── ① hero — 4レイヤーパララックス ─────────── */

/* Hero全体: overflow:hiddenを外す
   → canvas#water(fixed)が Hero下端でぱつんと切れなくなる
   → Hero自体は透明なのでcanvasがそのまま透けて見える */
.hero{
  position:relative;
  z-index:1;
  min-height:100svh;
  /* overflow:hidden は削除 — canvas固定背景の継続表示のため */
  color:var(--w);
  background:transparent;
}

/* ─── Layer 1: hero_bg.webp（背景画像 / 半透明でシェーダーを透かす） ─── */
/* ② bg-layerをfixedにして背景画像自体を固定 → スマホで動かず黒枠も出ない */
.hero-bg-layer{
  position:fixed; /* ②fixedに変更：スマホで背景が動かなくなる */
  inset:0;
  z-index:0; /* canvasより前、heroコンテンツより後ろ */
  overflow:hidden;
  /* Heroセクションを過ぎたら非表示（次セクションに引きずらない） */
  /* JSでhero通過後に隠す処理を追加予定。CSSでは見切れないようにする */
}
.hero-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%; /* ②fixedにしたので100%で問題なし */
  object-fit:cover;
  object-position:center center;
  will-change:transform;
  pointer-events:none;
  user-select:none;
  opacity:0.72;
}

/* ─── Layer 2: hero_main.webp（キャラクター） ─── */
.hero-char-layer{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  user-select:none;
}
.hero-char-img{
  position:absolute;
  left:50%; top: -5svh;
  bottom: clamp(-200px, -20svh, -60px);
  transform:translateX(-44%);
  height:min(200svh, 1520px);
  width:auto;
  max-width:none;
  will-change:transform;
  transition: 
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
    left 0.4s ease-out, 
    top 0.4s ease-out, 
    bottom 0.4s ease-out;
}

/* ─── Layer 3: hero_logo.webp（ロゴ） ─── */
.hero-ui{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}
.hero-logo-layer{
  position:absolute;
  bottom:12svh;
  left:50%;
  transform:translateX(-50%);
  width:min(88vw, 680px);
  will-change:transform;
}
.hero-logo-img{
  width:100%;
  height:auto;
  display:block;
}

/* ─── Hero下部フェードマスク ─────────────────────────────
   ① Hero自体のoverflowをなくしたので、このmaskはあくまで
      「hero内コンテンツを暗くする演出」として機能する。
   canvas(z-index:0)はHeroの外に自然に続くので段差ゼロ。
   ──────────────────────────────────────────────────────── */
.hero-fade-mask {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55svh;
  z-index: 3;
  pointer-events: none;
}

/* ─── テキストコンテンツ（左寄せ） ─── */
.hero-content {
  position: absolute;          /* flex子要素→絶対配置に変更 */
  z-index: 5;
  top: 50%;                    /* ビューポート中央より少し上 */
  right: 7vw;                  /* 右寄せ */
  left: auto;
  transform: translateY(-50%);
  max-width: 480px;
  padding: 0;
  /* min-height は不要になるので削除 */
}

.eyebrow-line{
  display:flex;align-items:center;gap:14px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.3em;
  color:var(--paper);margin-bottom:30px;
}
.eyebrow-line::before{content:"";width:42px;height:1px;background:var(--paper)}

.logo{width:min(82vw,500px);filter:invert(.93) sepia(.06)}

.lede{
  font-size:15px;line-height:2.3;letter-spacing:.16em;
  color:var(--paper);
}
.ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:42px}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 30px;border:1px solid var(--w45);
  font-size:13px;letter-spacing:.3em;text-indent:.1em;color:var(--w);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn .tri{font-size:9px;transform:translateY(-1px)}
.btn:hover{background:var(--w);color:var(--ink);border-color:var(--w)}
.btn.ghost{border-color:var(--w16);color:var(--w70)}
.btn.ghost:hover{border-color:var(--w45);background:transparent;color:var(--w)}

/* HUD */
.hud{
  position:absolute;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.2em;line-height:2.1;color:var(--w45);
  user-select:none;pointer-events:none;
  z-index:6;
}
.hud-bl{left:26px;bottom:30px}
.hud-br{right:26px;bottom:30px;text-align:right}

/* スクロールキュー */
.scrollcue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.4em;text-indent:.4em;
  color:var(--w45);z-index:6;
}
.scrollcue::after{
  content:"";display:block;width:1px;height:40px;margin:10px auto 0;
  background:linear-gradient(var(--w45),transparent);
  animation:drop 2.4s ease-in-out infinite;
}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ─────────── MV embed ─────────── */
#mv {
  position: relative;
  z-index: 1;
  color: var(--w);
  padding: 60px 7vw 140px;
  text-align: center;
}
.arch{
  position:relative;margin:0 auto;
  width:min(920px,100%); /* ★ 90vwから100%に変更し、はみ出しを防止 */
}

.arch::before{ /* 聖堂のアーチ(動画の背後に立つ) */
  content:"";position:absolute;left:50%;bottom:38px;transform:translateX(-50%);
  width:min(520px,64vw);height:min(560px,72vw);
  border:1px solid var(--w16);
  border-radius:999px 999px 0 0;
  pointer-events:none;
}
.player{
  position:relative;aspect-ratio:16/9;
  border:1px solid var(--w45);outline:1px solid var(--w16);outline-offset:8px;
  background:#000;overflow:hidden;
}
.player .corner{position:absolute;font-size:11px;color:var(--w45);z-index:3}
.player .corner.a{top:8px;left:12px}.player .corner.b{top:8px;right:12px}
.player .corner.c{bottom:8px;left:12px}.player .corner.d{bottom:8px;right:12px}
.player .cover{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  background:#000 center/cover no-repeat;cursor:pointer;
  display:grid;place-items:center;z-index:2;
  transition:opacity .5s ease;
}
.player .cover .play{
  width:84px;height:84px;border-radius:50%;
  border:1px solid var(--w70);background:rgba(12,11,8,.45);
  display:grid;place-items:center;color:var(--w);
  font-size:20px;padding-left:5px;
  backdrop-filter:blur(3px);
  transition:transform .3s ease,background .3s ease;
}
.player .cover:hover .play{transform:scale(1.08);background:rgba(12,11,8,.7)}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0}
.mv-caption{
  margin-top:54px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.28em;color:var(--w45);
}

/* ─────────── section common ─────────── */
main{position:relative;z-index:1}
section.band{padding:110px 7vw 130px}
.head{
  display:flex;align-items:baseline;gap:18px;margin-bottom:60px;flex-wrap:wrap;
}
.head h2{font-size:clamp(26px,4vw,36px);font-weight:500;letter-spacing:.16em}
.head .en{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.3em;
  opacity:.55;
}
.head .rule{height:1px;background:currentColor;opacity:.14;flex:1;align-self:center}
.head .no{font-family:'IBM Plex Mono',monospace;font-size:10.5px;opacity:.4;letter-spacing:.2em}

/* ─────────── ② lyrics ─────────── */
#lyrics{background:var(--paper);color:var(--ink)}
.lyrics-note{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;
  color:var(--ink-soft);opacity:.7;margin-bottom:34px;
}
.tate-wrap{position:relative}
.tate{
  width: 100%;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;
  direction: rtl; /* ★スクロールの初期位置を右端にする */
}
.tate-inner{
  direction: ltr; /* ★テキストの方向は正常に戻す */
  writing-mode:vertical-rl;
  height:min(68vh,620px);
  width: 100%;
  padding:30px 6px 38px;
  border-bottom:1px solid var(--hair-soft);
  display: inline-block;
}
.tate-inner p{
  font-size:16.5px;line-height:2.7;letter-spacing:.16em;
  margin-left:3.2em;
  color:var(--ink-soft);
}
.tate-inner p strong{font-weight:600;color:var(--ink)}
.tate-inner p .paren{opacity:.5}
.tate-hint{
  margin-top:16px;text-align:right;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.25em;
  color:var(--silver);
}

/* ─────────── ③ creators ─────────── */
#creators{background:var(--paper);color:var(--ink);padding-top:30px}
.duo{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  max-width:1100px;
  margin: 0 auto;
}
.creator{
  border:1px solid var(--hair);outline:1px solid var(--hair-soft);outline-offset:6px;
  padding:46px 28px 36px;
  text-align:center;position:relative;
  background:rgba(255,255,255,.32);
}
.creator .role{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--paper);padding:0 16px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.34em;text-indent:.34em;
  color:var(--ink-soft);
  white-space: nowrap;
}
.creator .icon{
  width:100px;height:100px;border-radius:50%;margin:0 auto 20px;
  border:1px solid var(--hair);
  display:grid;place-items:center;
  font-size:36px;font-weight:500;color:var(--ink-soft);
  background:radial-gradient(circle at 38% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  overflow:hidden;
}
.creator .icon img{width:100%;height:100%;object-fit:cover}
.creator h3{font-size:20px;font-weight:500;letter-spacing:.2em}
.creator .yomi{
  display:block;margin-top:6px;
  font-family:'EB Garamond',serif;font-style:italic;font-size:11.5px;letter-spacing:.22em;
  color:var(--silver);
}
.creator p.cmt{
  margin-top:20px;font-size:13px;line-height:2.1;letter-spacing:.1em;
  color:var(--ink-soft);text-align:left;
}
.creator .links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.creator .links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  color: var(--ink-soft);
  padding: 0;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.creator .links a:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.icon-sns {
  width: 16px;
  height: 16px;
  display: block;
}
.duo-x{
  text-align:center;font-size:26px;color:var(--silver);
  display:grid;place-items:center;
}

/* =========================================
   チーム紹介クリッカブルマップ + 周囲の浮遊額縁
========================================= */
.team-map-wrapper {
  margin-top: 80px;
  padding: 0 4vw;
  display: flex;
  justify-content: center;
  /* 額縁の絶対配置基準をここに */
  position: relative;
}

.image-map-container {
  position: relative;
  width: 100%;
  max-width: 960px;
}

.image-map-container img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--hair);
  outline: 1px solid var(--hair-soft);
  outline-offset: 6px;
  background: rgba(255, 255, 255, 0.32);
}

.clickable-area {
  position: absolute;
  display: block;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.type-tooltip .clickable-area:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.type-tooltip .clickable-area::after {
  content: attr(data-desc);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  width: 260px;
  background: rgba(12, 11, 8, 0.95);
  border: 1px solid var(--w45);
  color: var(--paper);
  padding: 16px 20px;
  font-size: 12.5px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 10;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.type-tooltip .clickable-area:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -10px);
}

/* 各アイコンの配置 */
.kanata  { top: 24.5%; left: 10.5%; width: 17.5%; height: 23.0%; }
.sumiya  { top: 24.5%; left: 35.3%; width: 17.5%; height: 23.0%; }
.azu     { top: 24.5%; left: 60.0%; width: 17.5%; height: 23.0%; }
.tsuzuki { top: 58.0%; left: 21.0%; width: 17.5%; height: 23.0%; }
.q       { top: 58.0%; left: 45.8%; width: 17.5%; height: 23.0%; }
.kandume { top: 58.0%; left: 70.5%; width: 17.5%; height: 23.0%; }

/* ═══════════════════════════════════════
   浮遊ギャラリー額縁（PC専用）
   .image-map-container の max-width:960px と同じ幅の
   コンテナを中央配置し、そこを基準に額縁を置く
═══════════════════════════════════════ */
.creators-gallery-frames {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 960px;
}
.creators-gallery-frames .frame,
.creators-gallery-frames .frame-inner,
.creators-gallery-frames button {
  pointer-events: auto;
}

.cgf {
  position: absolute;
  z-index: 2;
}

/* 16:9 シネマ比率 */
.frame--cinema .frame-inner { aspect-ratio: 16/9; }

/* 左上: 縦長 */
.cgf--tl {
  top: -30px;
  left: -170px;
  width: 160px;
  transform: rotate(-20deg);
}
/* 右上: 横長16:9 */
.cgf--tr {
  top: -60px;
  right: -160px;
  width: 240px;
}
/* 左中: 楕円 */
.cgf--ml {
  top: 55%;
  left: -280px;
  width: 220px;
  transform: translateY(-50%);
}
/* 右中: 正方形 */
.cgf--mr {
  top: 35%;
  right: -220px;
  width: 240px;
  transform: translateY(-50%);
}
/* 左下: 横長 4:3 */
.cgf--bl {
  bottom: -60px;
  left: -180px;
  width: 240px;
}
/* 右下: 縦長 */
.cgf--br {
  bottom: -90px;
  right: -200px;
  width: 240px;
  transform: rotate(20deg);
}

/* SP では非表示 */
@media (max-width: 860px) {
  .creators-gallery-frames { display: none; }
}

/* ─────────── ④ vocaduo ─────────── */
#vocaduo{background:transparent;color:var(--w)}
.vd-grid{
  display:grid;grid-template-columns:minmax(240px,330px) 1fr;
  gap:70px;align-items:center;max-width:1000px;
}
.vd-badge{position:relative;aspect-ratio:1;display:grid;place-items:center}
.vd-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vd-badge svg text{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:3.5px;
  fill:var(--w45);
}
.vd-badge::before{content:"";position:absolute;inset:13%;border:1px solid var(--w16);border-radius:50%}
.vd-core{text-align:center}
.vd-core .y{font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(34px,5vw,48px);color:var(--w)}
.vd-core .l{display:block;margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.4em;text-indent:.4em;color:var(--w45)}
.vd-text p{font-size:14.5px;line-height:2.5;letter-spacing:.12em;color:var(--w70);max-width:36em}
.vd-text p strong{color:var(--w);font-weight:500}
.vd-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.chip{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  border:1px solid var(--w16);padding:8px 16px;color:var(--w70);
  transition:border-color .3s,color .3s;
}
a.chip:hover{border-color:var(--w70);color:var(--w)}

/* ─────────── ⑤ footer ─────────── */
footer{
  position:relative;z-index:1;color:var(--w);
  padding:100px 7vw 44px;text-align:center;
  border-top:1px solid var(--w16);
}
footer .flogo{width:min(60vw,300px);margin:0 auto;filter:invert(.93) sepia(.06);opacity:.92}
.credits{
  margin-top:44px;display:inline-grid;grid-template-columns:auto auto;gap:12px 26px;
  font-size:13px;letter-spacing:.18em;text-align:left;
}
.credits dt{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.3em;color:var(--w45);align-self:center}
.credits dd{color:var(--w)}
footer .sns{display:flex;justify-content:center;gap:30px;margin-top:48px}
footer .sns a{
  font-family:'EB Garamond',serif;font-style:italic;font-size:13px;letter-spacing:.18em;
  color:var(--w70);transition:color .3s;
}
footer .sns a:hover{color:var(--w)}
footer .fine{
  margin-top:64px;font-family:'IBM Plex Mono',monospace;
  font-size:9px;letter-spacing:.28em;color:var(--w45);line-height:2.2;
}

/* ─────────── responsive ─────────── */
@media (min-width: 861px) {
  .duo { display: none; }

  /* id="mainGallery" の中にあるすべての額縁の比率を 1:1（正方形）に固定 */
  #mainGallery .frame .frame-inner {
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
  }
  /* 楕円(oval)固有の丸い枠線の装飾を、PCでは四角い装飾にリセットする */
  #mainGallery .frame--oval .frame-ornament {
    border-radius: 0 !important;
    outline: 2px solid var(--silver) !important;
    box-shadow:
      inset 0 0 0 4px rgba(237,234,226,.35),
      inset 0 0 0 6px rgba(156,151,139,.20),
      0 0 0 1px rgba(156,151,139,.35) !important;
  }
  #mainGallery .frame--oval .frame-overlay {
    border-radius: 0 !important;
    padding-bottom: 12% !important; /* 文字の高さも他の四角い額縁と統一します */
  }
}
@media (max-width:860px){
  /* ⑤ Hero: モバイル — キャラを上から配置、コンテンツは下部 */
  .hero-char-img{
    left:52.5%;
    bottom:auto;
    top:10svh;
    transform:translateX(-50%);
    height:min(200svh, 880px);
  }
  .hero-logo-layer{
    bottom:14svh;
    width:min(88vw, 440px);
  }
  .hero-content {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    max-width: none;
    z-index: 5;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
    padding-bottom: 33svh;
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .eyebrow-line{justify-content:center;margin-bottom: 5px;}
  .eyebrow-line::before{display:none}
  .hud-bl,.hud-br{display:none}
  .hero-fade-mask{height:45svh}

  /* 歌詞の横書き化 */
  .tate {direction: ltr;}
  .tate-inner {
    writing-mode: horizontal-tb;
    height: auto; display: block; padding: 20px;
  }
  .tate-inner p {
    font-size: 14px; margin: 0;
    margin-bottom: 2em;
  }
  .tate-hint {display: none;}

  /* クリエイター1列 */
  .duo{grid-template-columns: 1fr; gap: 50px;}
  .team-map-wrapper {display: none;}

  nav{padding:14px 16px}
  nav .sig{font-size:11px;letter-spacing:.22em}
  nav ul{gap:14px}
  nav ul a{font-size:9.5px;letter-spacing:.14em}
  section.band{padding:84px 6vw 100px}
  .vd-grid{grid-template-columns:1fr;gap:50px;justify-items:center;text-align:center}
  .vd-badge{width:min(64vw,280px)}
  .vd-text p{text-align:left}
  .vd-meta{justify-content:center}
}

/* タブレット（中間）向け微調整 */
@media (min-width:861px) and (max-width:1200px){
  .hero-logo-layer{
    bottom:10svh;
    width:min(76vw, 620px);
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bg-img,
  .hero-char-img,
  .hero-logo-layer,
  .scrollcue::after,
  .vd-badge svg{animation:none;transition:none}
}
/* ═══════════════════════════════════════
   GALLERY — 絵画室
═══════════════════════════════════════ */
#gallery { background: var(--paper); color: var(--ink); }

.gallery-caption {
  font-size: 13px;
  letter-spacing: .16em;
  line-height: 2.2;
  color: var(--ink-soft);
  margin-bottom: 60px;
  opacity: .75;
}

/* グリッドレイアウト */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 36px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* 額縁共通 */
.frame {
  position: relative;
  filter: drop-shadow(0 8px 28px rgba(12,11,8,.18));
  transition: filter .4s ease, transform .4s ease;
}
.frame:hover {
  filter: drop-shadow(0 16px 40px rgba(12,11,8,.28));
  transform: translateY(-4px);
}

/* 額縁装飾（CSSで重ね枠） */
.frame-ornament {
  position: absolute;
  inset: -4px;
  pointer-events: none;
  z-index: 2;
  background-image:
    radial-gradient(circle 4px at 6px 6px, var(--silver) 80%, transparent 80%),
    radial-gradient(circle 4px at calc(100% - 6px) 6px, var(--silver) 80%, transparent 80%),
    radial-gradient(circle 4px at 6px calc(100% - 6px), var(--silver) 80%, transparent 80%),
    radial-gradient(circle 4px at calc(100% - 6px) calc(100% - 6px), var(--silver) 80%, transparent 80%);
  background-repeat: no-repeat;
  outline: 2px solid var(--silver);
  outline-offset: -2px;
  border: 1.5px solid rgba(156,151,139,.45);
  box-shadow:
    inset 0 0 0 4px rgba(237,234,226,.35),
    inset 0 0 0 6px rgba(156,151,139,.20),
    0 0 0 1px rgba(156,151,139,.35);
}
.frame--oval .frame-ornament {
  border-radius: 50%;
  outline: none;
  box-shadow:
    inset 0 0 0 5px rgba(237,234,226,.3),
    inset 0 0 0 7px rgba(156,151,139,.18),
    0 0 0 1.5px var(--silver),
    0 0 0 3px rgba(156,151,139,.3),
    0 0 0 6px rgba(237,234,226,.12);
}

/* フレーム内ボタン */
.frame-inner {
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #0c0b08;
  outline: 1px solid rgba(156,151,139,.3);
  outline-offset: -1px;
}
.frame--tall   .frame-inner { aspect-ratio: 3/4; }
.frame--wide   .frame-inner { aspect-ratio: 4/3; }
.frame--square .frame-inner { aspect-ratio: 1/1; }
.frame--oval   .frame-inner { aspect-ratio: 3/4; border-radius: 50%; }

.frame-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .6s cubic-bezier(.25,1,.5,1), filter .5s ease;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}

/* ホバー: 画像ズーム */
.frame-inner:hover img { transform: scale(1.07); }

/* ホバー: オーバーレイ */
.frame-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12%;
  background: linear-gradient(to top, rgba(12,11,8,.72) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.frame--oval .frame-overlay { border-radius: 50%; padding-bottom: 22%; }
.frame-inner:hover .frame-overlay { opacity: 1; }

.frame-title {
  font-family: 'Shippori Mincho B1', serif;
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--paper);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ホバー: 光沢スイープ
   width:300% + left:-100% で左右をはみ出させ、
   端がフレームで急にスパッと切れないようにする。
   グラデーションの端もtransparentで十分フェードさせる。 */
.frame-inner::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -100%;          /* 左外側から始まる */
  width: 300%;          /* フレームの3倍幅 */
  background: linear-gradient(105deg,
    transparent        0%,
    transparent       30%,
    rgba(237,234,226,.0)  38%,
    rgba(237,234,226,.13) 48%,
    rgba(237,234,226,.0)  58%,
    transparent       70%,
    transparent      100%
  );
  opacity: 0;
  transition: opacity .3s ease, transform .7s cubic-bezier(.4,0,.2,1);
  transform: translateX(-10%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
.frame-inner:hover::after {
  opacity: 1;
  transform: translateX(60%);  /* 右外側まで走り抜ける */
}

/* モーダル */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gallery-modal[hidden] { display: none; }

.gallery-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12,11,8,.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.gallery-modal__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: min(90vw, 800px);
  max-height: 90svh;
  animation: modal-in .35s cubic-bezier(.25,1,.5,1) both;
}
@keyframes modal-in {
  from { opacity:0; transform:scale(.92) translateY(12px); }
  to   { opacity:1; transform:scale(1)  translateY(0); }
}

.gallery-modal__close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--w45);
  border-radius: 50%;
  background: rgba(12,11,8,.85);
  color: var(--paper);
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background .3s, border-color .3s, transform .3s;
  backdrop-filter: blur(4px);
}
.gallery-modal__close:hover {
  background: var(--ink);
  border-color: var(--w);
  transform: rotate(90deg);
}

/* モーダル内の額縁 */
.gallery-modal__frame-wrap {
  position: relative;
  max-height: 78svh;
  outline: 2px solid var(--silver);
  outline-offset: -2px;
  border: 1.5px solid rgba(156,151,139,.45);
  box-shadow:
    inset 0 0 0 4px rgba(237,234,226,.2),
    inset 0 0 0 6px rgba(156,151,139,.14),
    0 0 0 1px rgba(156,151,139,.3),
    0 20px 60px rgba(0,0,0,.5);
}

.gallery-modal__ornament-top,
.gallery-modal__ornament-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 12px;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, transparent, var(--silver) 20%, var(--silver) 80%, transparent),
    radial-gradient(circle 3px at center, var(--silver) 80%, transparent 80%);
  background-size: 100% 1px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat;
}
.gallery-modal__ornament-top    { top: -6px; }
.gallery-modal__ornament-bottom { bottom: -6px; }

.gallery-modal__img {
  display: block;
  max-width: 100%;
  max-height: 78svh;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.gallery-modal__caption {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: .22em;
  color: var(--w70);
  text-align: center;
}

/* 初期状態：8個目以降は非表示 */
.frame.is-overflow {
  display: none;
}

/* 展開時：フワッと表示させる */
#mainGallery.is-expanded .frame.is-overflow {
  display: block;
  animation: fadeInFrame 0.6s ease forwards;
}

.btn.ghost-paper {
  border-color: rgba(12, 11, 8, 0.2); /* インク色の薄い枠 */
  color: var(--ink-soft); /* やさしいインク色 */
}
.btn.ghost-paper:hover {
  border-color: rgba(12, 11, 8, 0.5);
  background: transparent;
  color: var(--ink);
}

@keyframes fadeInFrame {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ボタンの配置エリア */
.gallery-more-action {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 60px;
}

/* ギャラリー レスポンシブ (モバイル)
   JSで .gallery-col-left / .gallery-col-right に振り分け済み。
   各列を flex-direction:column で縦積みにする。
   額縁を追加しても JS側が自動で振り分ける。 */
@media (max-width: 860px) {
  /* gallery-grid 自体は2列のflexコンテナに */
  .gallery-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
  }
  /* JS が生成する左右の列 */
  .gallery-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-width: 0;
  }
  /* 列内の額縁はwidth:100%で引き伸ばす */
  .gallery-col .frame {
    width: 100%;
    margin-bottom: 0;
  }
  /* PC用の nth-child align-self をリセット */
  .frame:nth-child(1),
  .frame:nth-child(2),
  .frame:nth-child(3),
  .frame:nth-child(4),
  .frame:nth-child(5),
  .frame:nth-child(6) {
    grid-area: unset;
    align-self: unset;
  }

  .gallery-modal__close {
    top: -12px;
    right: -8px;
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
}