/* =========================================================
   Alice in the concerto 2027 — メインページ
   レイアウト：PHANTOM準拠
   ・メインビジュアル … 最大1400px（画面幅いっぱい〜1400px）
   ・2枚目以降       … 本文カラム最大1100px（画像表示は最大約1020px）
   ヘッダー・背景・色・書体：現行サイト（/alice/css/style.css）に合わせています
   ========================================================= */
:root{
  /* 現行サイトと同じ値 */
  --bg:#0a0c2c;          /* ベース（深い青紫） */
  --bg-deep:#030310;     /* 最も沈む色 */
  --glow-top:#1f2168;    /* 上部の光 */
  --ink:#eceffa;
  --sub:#97a1c8;
  --gold:#c9a86a;
  --serif-en:"Cormorant Garamond",serif;
  --serif-ja:"Shippori Mincho","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;

  /* このページ用 */
  --night-deep: var(--bg-deep);
  --mist:   rgba(151,161,200,.95);
  --silver: #c9c6e4;
  --line:   rgba(201,168,106,.18);
  --violet: #8b4fc0;   /* チケット：画像の先行発売帯に合わせた紫 */
  --indigo: #3f3f9e;
  --glow:   rgba(236,226,255,.55);
  --f-ja: var(--serif-ja);
  --f-en: var(--serif-en);

  --w-main: 1400px;
  --w-body: 1100px;
  --head-h: 69px;      /* 実際の高さは main.js がヘッダーを測って上書き */
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg-deep);
  color:var(--ink);
  font-family:var(--serif-ja);font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--head-h);
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;z-index:200;top:8px;left:8px;padding:8px 14px;background:var(--bg-deep);border:1px solid var(--gold)}

/* ---------- 背景（現行サイトと同じ：固定・フラクタルノイズ 3層） ---------- */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(125% 82% at 50% -12%, var(--glow-top) 0%, transparent 60%),
    radial-gradient(85% 55% at 50% 112%, rgba(201,168,106,.09), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}
.fx__cloud,.fx__mid,.fx__grain,.fx__vig{position:absolute;inset:0}
.fx__cloud{inset:-8%;background-image:url(../img/bg-cloud.svg);background-size:cover;
  opacity:.30;mix-blend-mode:screen}
.fx__mid{background-image:url(../img/bg-mid.svg);background-size:1100px 1100px;
  opacity:.16;mix-blend-mode:screen}
.fx__grain{background-image:url(../img/bg-grain.svg);background-size:180px 180px;
  opacity:.45;mix-blend-mode:overlay}
.fx__vig{background:
  linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 18%, rgba(0,0,0,.55) 36%,
    rgba(0,0,0,.74) 50%,
    rgba(0,0,0,.55) 64%, rgba(0,0,0,.18) 82%, rgba(0,0,0,0) 100%),
  radial-gradient(64% 50% at 50% 40%, rgba(3,3,16,.30) 0%, transparent 76%)}
main,.site-foot{position:relative;z-index:2}

/* ---------- header（現行サイトと同じ） ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:90;display:flex;align-items:center;
  justify-content:space-between;gap:24px;
  padding:calc(14px + env(safe-area-inset-top,0px)) clamp(16px,3vw,40px) 14px;
  background:rgba(4,8,26,.72);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,168,106,.18)}
.hd__logo{position:relative;z-index:70;flex:0 0 auto}
.hd__logo img{height:clamp(28px,3.4vw,40px);width:auto}
.nav{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(14px,1.6vw,30px)}
.nav a,.nav .nav__item{display:block;font-family:var(--serif-ja);font-size:13px;
  font-weight:400;line-height:1.6;letter-spacing:.14em;text-indent:.14em;color:var(--sub);
  position:relative;padding:6px 2px;transition:.3s;white-space:nowrap;text-decoration:none}
.nav a::after{content:"";position:absolute;left:2px;right:2px;bottom:2px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav a:hover,.nav a.is-current{color:var(--ink)}
.nav a:hover::after,.nav a.is-current::after{transform:scaleX(1)}
/* チケットボタン */
.nav .btn-tk{flex:0 0 auto;font-size:13px;letter-spacing:.12em;padding:9px 20px;
  border:1px solid var(--gold);color:var(--gold);border-radius:2px;transition:.35s}
.nav .btn-tk::after{display:none}
.nav .btn-tk:hover{background:var(--gold);color:var(--bg-deep)}
.nav .btn-tk--2line{display:flex;flex-direction:column;align-items:center;
  line-height:1.3;padding:7px 22px}
.nav .btn-tk--2line b{font-family:var(--serif-en);font-weight:400;font-size:12.5px;
  letter-spacing:.26em;text-indent:.26em;color:rgba(201,168,106,.9)}
.nav .btn-tk--2line small{font-size:10px;letter-spacing:.05em;color:rgba(151,161,200,.95);text-indent:0}
.nav .btn-tk--2line:hover b,.nav .btn-tk--2line:hover small{color:var(--bg-deep)}

/* X（旧Twitter）ボタン：公式アカウント／ポスト */
.nav__sns{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.nav .sns{display:grid;place-items:center;grid-auto-flow:column;
  width:30px;height:30px;padding:0;border:1px solid rgba(201,168,106,.45);
  border-radius:50%;color:rgba(201,168,106,.9);transition:.35s;text-indent:0}
.nav .sns::after{display:none}
.nav .sns svg{width:12px;height:12px;fill:currentColor;display:block}
.nav .sns:hover{background:var(--gold);border-color:var(--gold);color:var(--bg-deep)}
.nav .sns--post{width:auto;height:auto;border-radius:2px;gap:8px;padding:8px 14px}
.nav .sns--post b{font-family:var(--serif-ja);font-weight:400;font-size:12px;
  line-height:1;letter-spacing:.12em;text-indent:.12em}

.burger{display:none;width:34px;height:24px;position:relative;z-index:70;
  padding:0;background:none;border:0;cursor:pointer;flex:0 0 auto}
.burger span{position:absolute;left:0;width:100%;height:1px;background:var(--ink);
  transition:.35s cubic-bezier(.6,0,.2,1)}
.burger span:nth-child(1){top:3px}
.burger span:nth-child(2){top:11px}
.burger span:nth-child(3){top:19px}
.burger.is-open span:nth-child(1){top:11px;transform:rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){top:11px;transform:rotate(-45deg)}

/* 現行サイトは860px以下でメニューに切替。このページは項目が多いため1180px以下で切替 */
@media (max-width:1180px){
  .hd{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,8,26,.95)}
  .burger{display:block}
  .nav{position:fixed;inset:0;z-index:65;background:#03060f;
    flex-direction:column;justify-content:center;gap:22px;overflow:auto;
    padding:calc(var(--head-h) + 12px) 16px 32px;
    transform:translateY(-100%);transition:.5s cubic-bezier(.6,0,.2,1)}
  .nav.is-open{transform:none}
  .nav a,.nav .nav__item{font-size:16px;letter-spacing:.2em}
  .nav__sns{margin-top:18px;gap:14px}
  .nav .sns{width:46px;height:46px}
  .nav .sns svg{width:17px;height:17px}
  .nav .sns--post{width:auto;height:auto;padding:13px 24px;gap:10px}
  .nav .sns--post b{font-size:14px}
  .nav .btn-tk{margin-top:10px;padding:13px 30px;font-size:13px}
  .nav .btn-tk--2line{padding:12px 30px}
  .nav .btn-tk--2line b{font-size:14px}
  .nav .btn-tk--2line small{font-size:11px;letter-spacing:.04em}
}
@media (max-width:860px){
  .fx__mid{background-size:700px 700px}
  .fx__vig{background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.14) 12%, rgba(0,0,0,.42) 32%,
      rgba(0,0,0,.60) 50%,
      rgba(0,0,0,.42) 68%, rgba(0,0,0,.14) 88%, rgba(0,0,0,0) 100%),
    radial-gradient(72% 46% at 50% 38%, rgba(3,3,16,.26) 0%, transparent 78%)}
}
@media (max-height:640px) and (max-width:1180px){
  .nav{justify-content:flex-start;gap:16px}
}

/* ---------------- Panels ---------------- */
main{
  width:min(100%, var(--w-body));
  margin:0 auto;
  padding:0 clamp(14px,4vw,40px) clamp(40px,8vw,96px);
}
.panel{position:relative}
.panel + .panel{margin-top:clamp(8px,2vw,24px)}
/* メインビジュアル直後は間を詰める（動画が無いとき） */
.panel.hero + .panel{margin-top:0}
.panel.hero{
  left:50%;transform:translateX(-50%);
  width:min(100vw, var(--w-main));
  margin-top:0;
}
.art{position:relative}
.art > picture img{width:100%;height:auto}

/* スクロール先（ヘッダーに隠れない位置で止める） */
.panel,.anchor{scroll-margin-top:calc(var(--head-h) + 12px)}
.panel.hero{scroll-margin-top:calc(var(--head-h) + 40px)}
.anchor{position:absolute;left:0;top:var(--y);width:1px;height:1px;pointer-events:none}

/* ---------------- お知らせ（テーマソング公開） ---------------- */
.panel.notice{padding:clamp(28px,5vw,56px) 16px clamp(24px,4vw,44px);text-align:center}
.notice__inner{
  position:relative;display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.2em .6em;margin:0;padding:.9em 0;max-width:100%;
  font-family:var(--serif-ja);color:var(--ink);line-height:1.5;
}
/* 上下の金の細線（中央が濃く、端で消える） */
.notice__inner::before,.notice__inner::after{
  content:"";position:absolute;left:-10%;right:-10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,106,.75) 50%,transparent);
}
.notice__inner::before{top:0}
.notice__inner::after{bottom:0}
.notice__label{font-size:clamp(13px,1.6vw,15px);letter-spacing:.24em;color:var(--sub)}
.notice__title{
  font-family:var(--serif-en),var(--serif-ja);font-weight:500;font-style:italic;
  font-size:clamp(24px,3.6vw,36px);letter-spacing:.04em;color:var(--gold);white-space:nowrap;
}
.notice__date{font-size:clamp(14px,1.8vw,17px);letter-spacing:.12em;white-space:nowrap}
.notice__date b{font-family:var(--serif-en);font-weight:500;font-size:1.35em;letter-spacing:.06em;margin-right:.1em}

/* ---------------- お知らせ（最新3件）：現行サイト css/style.css と同じ体裁 ---------------- */
.panel.info{max-width:920px;margin-inline:auto;padding:clamp(24px,4vw,48px) clamp(4px,1vw,0px) clamp(40px,7vw,80px)}
.info__h{text-align:center;margin-bottom:clamp(28px,5vw,46px)}
.info__h b{display:block;font-family:var(--serif-en);font-weight:400;
  font-size:clamp(24px,4vw,36px);letter-spacing:.24em;text-indent:.24em;color:var(--gold)}
.info__h span{display:block;font-size:11px;letter-spacing:.26em;color:var(--sub);margin-top:10px}
.news{border-top:1px solid rgba(255,255,255,.09)}
.news__item{border-bottom:1px solid rgba(255,255,255,.09)}
.news__head{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;
  width:100%;text-align:left;padding:24px 6px;transition:.3s;text-decoration:none;color:var(--ink)}
.news__head:hover{background:rgba(201,168,106,.06)}
.news__date{font-family:var(--serif-en);font-size:14px;letter-spacing:.14em;color:#8a7546}
.news__title{font-size:15px;line-height:1.7;letter-spacing:.04em;min-width:0}
.news__arrow{justify-self:end;font-family:var(--serif-en);font-size:16px;color:var(--sub);transition:.3s}
.news__head:hover .news__arrow{color:var(--gold);transform:translateX(4px)}
.more{display:block;width:fit-content;margin:46px auto 0;font-size:12px;
  letter-spacing:.24em;color:var(--sub);border-bottom:1px solid rgba(201,168,106,.28);padding-bottom:6px;
  transition:.3s;text-decoration:none}
.more:hover{color:var(--gold)}
@media (max-width:860px){
  .news__head{grid-template-columns:1fr auto;gap:6px 14px;padding:20px 4px}
  .news__date{grid-column:1/-1}
}
@media (max-width:640px){
  .panel.info{padding-left:16px;padding-right:16px}
}

/* ---------------- Movie ---------------- */
.panel.movie{padding:clamp(28px,6vw,72px) 0 clamp(20px,4vw,48px)}
.video-frame{
  position:relative;width:min(100%, 880px);margin:0 auto;aspect-ratio:16/9;
  border-radius:6px;overflow:hidden;background:#0b0c1d;
  box-shadow:0 0 0 1px var(--line),0 24px 70px rgba(0,0,0,.55);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-lite{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#000 center/cover no-repeat}
.yt-lite::after{
  content:"";position:absolute;left:50%;top:50%;width:68px;height:48px;transform:translate(-50%,-50%);
  border-radius:12px;background:rgba(20,20,40,.75);box-shadow:0 0 0 1px var(--silver);
}
.yt-lite::before{
  content:"";position:absolute;z-index:1;left:50%;top:50%;transform:translate(-35%,-50%);
  border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff;
}

/* ---------------- Eyes（まぶたギミック） ----------------
   閉じ目の差分画像を重ね、開くときは透明にする */
.eye{
  position:absolute;left:0;top:0;width:100%;height:auto;
  clip-path:inset(var(--t) var(--r) var(--b) var(--l));
  pointer-events:none;user-select:none;
  opacity:1;transition:opacity .07s linear;
}
.eye.is-open{opacity:0}

/* ---------------- Hotspots（画像内ボタンの疑似タップ） ---------------- */
.hot{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  display:block;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s;
  /* 左右の端をグラデーションで消す（光・押し込み・波紋すべてに効く） */
  --fade:14%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
/* 光が流れて「押せる」ことを知らせる */
.hot::before{
  content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:22%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28) 50%, transparent);
  transform:skewX(-18deg);
  animation:hot-shine 4.6s ease-in-out infinite;
  pointer-events:none;
}
.hot:nth-of-type(2n)::before{animation-delay:1.3s}
@keyframes hot-shine{
  0%,62%{left:-30%}
  92%,100%{left:120%}
}
/* ホバー：枠なし。ほんのり明るくするだけ */
@media (hover:hover){
  .hot:hover{background-color:rgba(255,255,255,.08)}
}
/* 押した瞬間：沈み込み＋波紋 */
.hot.is-press{
  background-color:rgba(8,6,24,.30);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.45);
}
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  width:12px;height:12px;margin:-6px 0 0 -6px;
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  animation:ripple .6s ease-out forwards;
}
@keyframes ripple{to{transform:scale(60);opacity:0}}

/* ---------------- Floating CTA（チケットはこちら） ---------------- */
.float-cta{
  position:fixed;z-index:80;left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%, 24px);
  width:min(400px, calc(100vw - 32px));
  display:flex;flex-direction:column;align-items:center;gap:0;
  padding:.7em 1em .65em;border-radius:0;overflow:hidden;
  text-decoration:none;color:#fff;text-align:center;
  background:linear-gradient(100deg, var(--violet) 0%, #6a45b6 48%, var(--indigo) 100%);
  box-shadow:0 10px 34px rgba(10,8,30,.6);  /* 四角・縁なし */
  opacity:0;pointer-events:none;
  transition:opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.float-cta.is-show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.float-cta::before{
  content:"";position:absolute;top:-50%;bottom:-50%;width:40px;left:-20%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4) 50%, transparent);
  transform:skewX(-18deg);animation:cta-shine 3.8s ease-in-out infinite;
}
@keyframes cta-shine{0%,55%{left:-20%}85%,100%{left:120%}}
.float-cta:active{transform:translate(-50%,2px) scale(.985)}
.fc-main{position:relative;font-weight:600;font-size:17px;letter-spacing:.2em;padding-left:.2em}
.fc-sub{position:relative;font-size:11px;letter-spacing:.12em;opacity:.85}

/* ---------------- Footer ---------------- */
.site-foot{
  padding:40px 16px calc(110px + env(safe-area-inset-bottom,0px));
  text-align:center;border-top:1px solid var(--line);background:rgba(3,3,16,.55);
}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6em 2.2em;margin-bottom:1.4em}
.foot-links a,.foot-links button{
  font:inherit;font-size:13px;letter-spacing:.1em;color:var(--mist);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px;
}
.foot-links a:hover,.foot-links button:hover{color:var(--ink)}
.copy{margin:0;font-family:var(--serif-en);font-size:12px;letter-spacing:.18em;color:var(--sub)}

/* ---------------- Legal dialog ---------------- */
.legal{
  width:min(720px, calc(100vw - 32px));max-height:calc(100dvh - 48px);
  padding:0;border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(180deg,#0f1238,#05061a);color:var(--ink);
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.legal::backdrop{background:rgba(5,5,15,.72);backdrop-filter:blur(3px)}
.legal-inner{position:relative;padding:clamp(24px,5vw,44px)}
.legal-close{position:absolute;top:10px;right:12px;width:40px;height:40px;font-size:22px;color:var(--ink);background:none;border:0;cursor:pointer}
.legal-en{margin:0;font-family:var(--f-en);font-size:11px;letter-spacing:.2em;color:var(--mist)}
.legal h2{margin:.2em 0 1.2em;font-size:clamp(17px,3vw,21px);letter-spacing:.1em}
.legal dl{margin:0;display:grid;grid-template-columns:minmax(8em,auto) 1fr;font-size:13px;line-height:1.75}
.legal dt,.legal dd{margin:0;padding:.85em .2em;border-top:1px solid var(--line)}
.legal dt{color:var(--mist);padding-right:1.2em}
.legal dd{min-width:0;overflow-wrap:anywhere}
@media (max-width:560px){
  .legal dl{grid-template-columns:1fr}
  .legal dd{border-top:0;padding-top:0}
}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;z-index:120;left:50%;top:calc(var(--head-h) + 16px);
  transform:translate(-50%,-8px);max-width:calc(100vw - 32px);
  padding:.7em 1.2em;border-radius:6px;font-size:13px;letter-spacing:.06em;
  background:rgba(13,14,32,.94);border:1px solid var(--line);color:var(--ink);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

/* ---------------- Smartphone ---------------- */
@media (max-width:640px){
  main{padding-left:0;padding-right:0}
  /* 画像左右の透過余白を少し詰め、文字を読みやすく（PHANTOMと同じ考え方） */
  .panel:not(.hero):not(.movie){overflow:hidden}
  .panel:not(.hero):not(.movie) .art{width:110%;margin-left:-5%}
  .panel.movie{padding-left:16px;padding-right:16px}
  .fc-main{font-size:15px}
  .fc-sub{font-size:10px}
}

/* ---------------- 確認用ツール ---------------- */
.review-panel{
  position:fixed;z-index:110;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;
  font:12px/1.4 system-ui,sans-serif;color:var(--ink);
  background:rgba(13,14,32,.9);border:1px dashed rgba(255,214,102,.6);border-radius:6px;
}
.review-panel button{font:inherit;color:#1a1300;background:#ffd666;border:0;border-radius:4px;padding:4px 8px;cursor:pointer}
.review-panel output{font-variant-numeric:tabular-nums;min-width:4.5em}
body.is-review .hot{background-color:rgba(255,214,102,.38)}
.review-band{display:none}
body.is-review .review-band{
  display:block;position:fixed;z-index:70;left:0;right:0;pointer-events:none;
  border-top:1px dashed rgba(127,227,255,.6);border-bottom:1px dashed rgba(127,227,255,.6);
  background:rgba(127,227,255,.05);
}
@media (max-width:640px){.review-panel{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hot::before,.float-cta::before{animation:none;display:none}
  .float-cta,.gnav{transition:none}
}
body.is-locked .review-panel{display:none}