@charset "UTF-8";
/* =========================================================
   もりおか座映画祭2026  common.css
   色・文字・ボタン・共通ヘッダー・スマホメニュー・フッター
   ========================================================= */

/* ---------- 1. 変数 ---------- */
:root {
  --teal-deep: #0e4652;   /* 濃いティール（写真の影の色） */
  --teal:      #1f7e92;   /* ティール */
  --turq:      #4c90a3;   /* ターコイズブルー：下層ヘッダー・現在ページ（白文字は太字14px以上） */
  --turq-pale: #dcebef;
  --ink:       #10303a;   /* 本文 */
  --sub:       #4d6a72;   /* 補足文字 */
  --line:      #cddfe2;
  --paper:     #f5f9f9;
  --mist:      #e8f1f2;
  --accent:    #e6f53a;   /* 黄緑（解禁・ボタン） */
  --red:       #d42a22;   /* 赤バッジ */
  --light:     #fff6cf;   /* 星の光 */
  --glass:     rgba(234, 240, 242, .82);   /* ヘッダーのすりガラス */

  --en: "Playfair Display", "Times New Roman", serif;
  --jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  --hd-h: 76px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

/* ---------- 2. ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--hd-h) + 16px); -webkit-text-size-adjust: 100%; }
/* なめらかスクロールは読み込み完了後だけ（別ページから #ゲスト に来たとき、上から長くスクロールしないように） */
html.is-ready { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.9 var(--jp); letter-spacing: .02em; }
img, svg { max-width: 100%; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--turq); outline-offset: 3px; }
.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; }

/* ---------- 3. ボタン ---------- */
.btn {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 48px; padding: 6px 18px; text-decoration: none; text-align: center;
  font: 700 14px/1.2 var(--en); letter-spacing: .12em; transition: background .2s, color .2s, transform .2s;
}
.btn small { font: 500 10.5px/1.5 var(--jp); letter-spacing: .06em; }
.btn-ticket { background: var(--accent); color: var(--teal-deep); }
.btn-ticket.is-pending { cursor: default; }
.btn-support { background: var(--turq); color: #fff; }
.btn-support:hover { background: var(--teal); }
.btn-line { border: 1.5px solid currentColor; font-family: var(--jp); letter-spacing: .08em; }
.btn-more {
  flex-direction: row; gap: 10px; min-height: 52px; padding: 0 28px; border: 1.5px solid var(--teal-deep);
  color: var(--teal-deep); font: 700 14px/1 var(--jp); letter-spacing: .1em;
}
.btn-more::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.btn-more:hover { background: var(--teal-deep); color: #fff; }

/* ---------- 4. 共通ヘッダー（フィルム帯＋すりガラス） ---------- */
.hd {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
/* フィルムの穴：上下の帯。--film はスクロールに合わせて nav.js が更新 */
.hd::before, .hd::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, .95) 7px 15px, transparent 15px 24px) var(--film, 0px) 2px / auto 5px repeat-x,
    rgba(16, 48, 58, .2);
}
.hd::before { top: env(safe-area-inset-top, 0px); }
.hd::after { bottom: 0; }
.hd-in {
  height: var(--hd-h); padding: 9px var(--gutter);
  display: flex; align-items: center; gap: 20px; max-width: 1440px; margin: 0 auto;
}
.hd-brand { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; color: var(--teal-deep); }
.hd-brand .mark { width: 50px; height: auto; fill: var(--teal-deep); }
.hd-name b { display: block; font: 700 14px/1.3 var(--jp); letter-spacing: .08em; }
.hd-name small { display: block; font: 600 12px/1.3 var(--en); letter-spacing: .08em; color: var(--sub); }

.gnav { flex: 1; min-width: 0; height: 100%; }
.gnav ul { display: flex; justify-content: flex-end; height: 100%; border-left: 1px solid rgba(16, 48, 58, .14); }
.gnav li { display: flex; }
.gnav a, .gnav .is-soon {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0 16px; border-right: 1px solid rgba(16, 48, 58, .14); text-decoration: none; white-space: nowrap; color: var(--ink);
  transition: background .25s, color .25s;
}
.gnav .en { font: 700 13.5px/1.25 var(--en); letter-spacing: .1em; }
.gnav .ja { font: 500 10px/1.5 var(--jp); letter-spacing: .08em; color: var(--sub); }
.gnav .is-soon { cursor: default; }
.gnav .is-soon .en { opacity: .4; }
.gnav .is-soon .ja { color: var(--turq); }
/* カーソルを乗せると、そのコマが映写されたように光る */
.gnav a:hover, .gnav a:focus-visible {
  background: radial-gradient(ellipse at 50% 50%, #fffef6 0%, rgba(255, 249, 220, .92) 55%, rgba(255, 246, 207, .55) 100%);
  animation: projector .34s steps(2) 2;
}
@keyframes projector { 0% { filter: brightness(1.12); } 50% { filter: brightness(.94); } 100% { filter: brightness(1); } }
/* 今いるページ・今見ているセクション */
.gnav a.is-current { background: var(--turq); color: #fff; }
.gnav a.is-current .ja { color: #fff; }

.hd-cta { display: flex; gap: 8px; flex: none; }
.hd-cta .btn { min-width: 100px; min-height: 46px; padding: 4px 14px; }

.burger { display: none; margin-left: auto; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; color: var(--teal-deep); cursor: pointer; }
.burger span { display: block; width: 26px; height: 2px; margin: 6px auto; background: currentColor; transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- 5. スマホメニュー（星座の線でつながる） ---------- */
.spmenu {
  position: fixed; inset: 0; z-index: 45; overflow-y: auto;
  padding: calc(var(--hd-h) + env(safe-area-inset-top, 0px) + 24px) 28px calc(40px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(170deg, rgba(14, 70, 82, .97), rgba(31, 126, 146, .96)); color: #fff;
}
.spmenu ul { position: relative; }
.spmenu li > a, .spmenu li > span { display: flex; align-items: baseline; gap: 14px; padding: 15px 0 15px 34px; position: relative; text-decoration: none; }
.spmenu .en { font: 700 22px/1.2 var(--en); letter-spacing: .08em; }
.spmenu .ja { font-size: 12px; opacity: .75; }
.spmenu .is-soon .en { opacity: .45; }
.spmenu .is-soon .ja { color: var(--accent); opacity: 1; }
.spmenu .st { position: absolute; left: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; }
.spmenu .st::before { content: ""; position: absolute; inset: 0; background: var(--light); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #fff3b0); }
.spmenu-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.spmenu-line polyline { fill: none; stroke: rgba(255, 246, 207, .75); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.spmenu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.spmenu-cta .btn-support { background: transparent; border: 1.5px solid #fff; }

/* ---------- 6. セクション見出し（入ると星が光る） ---------- */
.sec { max-width: var(--wrap); margin: 0 auto; padding: clamp(64px, 9vw, 112px) var(--gutter); }
.ttl { position: relative; margin: 0 0 clamp(28px, 4vw, 44px); padding-left: 30px; color: var(--teal-deep); text-wrap: balance; }
.ttl .en { display: block; font: 700 clamp(32px, 4.6vw, 52px)/1.05 var(--en); letter-spacing: .05em; }
.ttl .ja { display: block; margin-top: 8px; font: 500 13px/1.4 var(--jp); letter-spacing: .16em; color: var(--sub); }
.ttl-st { position: absolute; left: 0; top: .5em; width: 18px; height: 18px; }
.ttl-st::before { content: ""; position: absolute; inset: 0; background: var(--turq); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: scale(.5); opacity: .4; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1), opacity .4s, background .4s; }
.ttl.is-in .ttl-st::before { transform: scale(1); opacity: 1; background: #e7c64a; filter: drop-shadow(0 0 5px rgba(255, 220, 110, .9)); }
.band { background: var(--mist); }

/* ---------- 7. フッター ---------- */
.ft { background: var(--teal-deep); color: #dcebee; padding: 56px var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px)); font-size: 13px; }
.ft-in { max-width: var(--wrap); margin: 0 auto; display: grid; justify-items: center; gap: 14px; text-align: center; }
.ft .mark { width: 70px; fill: #fff; }
.ft a { color: #fff; }
.ft-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.ft-links .ig { display: inline-flex; align-items: center; gap: 6px; }
.ft-links .ig img { filter: brightness(0) invert(1); }
.ft-copy { font-family: var(--en); letter-spacing: .06em; opacity: .75; }

/* ---------- 8. 準備中リンクのお知らせ ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 12px 20px; background: var(--teal-deep); color: #fff; font-size: 13px;
  transition: opacity .3s, transform .3s;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 9. スマホ・タブレット ---------- */
@media (max-width: 1099px) {
  :root { --hd-h: 60px; }
  .gnav, .hd-cta { display: none; }
  .burger { display: block; }
  .hd-in { padding-block: 0; }
  .hd-brand .mark { width: 40px; }
  .hd::after { display: none; }
}
@media (max-width: 480px) {
  .hd-name small { display: none; }
}

/* ---------- 10. 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}