:root {
  --navy: #061f52;
  --blue: #5f789a;
  --white: #fff;
  --ease: cubic-bezier(.22,.8,.22,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body {
  overflow: hidden;
  background: #dbeaf8;
  color: var(--navy);
  font-family: "Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",system-ui,sans-serif;
}
button, a { -webkit-tap-highlight-color: transparent; }

.intro, .cover {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
}
.intro {
  z-index: 10;
  overflow: hidden;
  background: #eaf6ff;
  opacity: 1;
  visibility: visible;
  transition: opacity 1400ms var(--ease), visibility 0s linear 1400ms;
}
.intro.is-finished { opacity: 0; visibility: hidden; pointer-events: none; }

.layer { position: absolute; inset: 0; }
.layer--background {
  background: url("../images/background-main.jpg") center/cover no-repeat;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 2600ms var(--ease), transform 14000ms linear;
}
.intro.is-running .layer--background { opacity: 1; transform: scale(1); }
.layer--light {
  background:
    radial-gradient(circle at 83% 57%, rgba(255,255,255,.55), transparent 23%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.16));
  opacity: 0;
  transition: opacity 2800ms ease;
}
.intro.is-running .layer--light { opacity: 1; }

.intro-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  min-height: clamp(38px, 5vw, 56px);
  padding: 0 clamp(10px, 1.6vw, 24px);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(6,31,82,.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity 1000ms var(--ease), transform 1100ms var(--ease), visibility 0s linear 1000ms;
}
.intro-header.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.intro-header.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
}
.intro.is-finished .intro-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
}
.intro-brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px;color:var(--navy);text-decoration:none;white-space:nowrap;}
.brand-mark{display:none;}
.brand-name{font-weight:900;font-size:clamp(22px,2.2vw,34px);line-height:1.05;display:block;width:max-content;border-bottom:3px solid var(--navy);padding-bottom:4px;}
.brand-en{font-size:clamp(12px,1vw,16px);font-weight:700;letter-spacing:.02em;}
.msg-logo{display:block;height:auto;}
.msg-logo--header{width:clamp(110px, 11vw, 150px);}
.intro-header nav { margin-left:auto; display:flex; gap: clamp(10px, 1.8vw, 24px); }
.intro-header nav a { color:var(--navy); text-decoration:none; font-weight:800; font-size:12px; }
.round-menu {
  width:36px; height:36px; border:0; border-radius:50%;
  background:#f0f5fb; color:var(--navy); font-size:18px; cursor:pointer;
}

.message {
  position:absolute;
  z-index:8;
  left:7%;
  right:7%;
  top:50%;
  text-align:center;
  opacity:0;
  transform:translateY(32px);
  filter:blur(9px);
  pointer-events:none;
  transition:
    opacity 2400ms var(--ease),
    transform 2600ms var(--ease),
    filter 2400ms ease;
}
.message.is-visible { opacity:1; transform:translateY(0); filter:blur(0); }
.message.is-leaving {
  opacity:0; transform:translateY(-20px); filter:blur(7px);
  transition-duration:1500ms;
}
.message h1, .message h2, .message p { margin:0; }
.message--one { top:29%; }
.message--one h1 { font-size:clamp(56px,8.4vw,142px); line-height:1; letter-spacing:.02em; font-weight:900; margin-bottom:30px; }
.message--one p { font-size:clamp(22px,2.55vw,44px); font-weight:800; line-height:1.55; letter-spacing:.05em; }

.message--two { top:30%; }
.message--two .small { font-size:clamp(28px,4vw,66px); font-weight:850; letter-spacing:.05em; margin-bottom:16px; }
.message--two h2 { font-size:clamp(76px,12vw,195px); line-height:1; font-weight:900; }

.message--three { top:22%; }
.message--three p { font-size:clamp(34px,4.75vw,78px); font-weight:850; line-height:1.48; letter-spacing:.035em; }
.message--three .gap { margin-top:34px; }

.message--four {
  left:0.5%;
  right:auto;
  top:27%;
  width:46%;
  text-align:left;
}
.message--four p { font-size:clamp(24px,3.02vw,42px); line-height:1.65; font-weight:850; letter-spacing:.04em; white-space:nowrap; }

.miyu-layer {
  position:absolute;
  z-index:6;
  inset:76px 0 0;
  opacity:0;
  transform:translateY(80px) scale(.96);
  transition:opacity 2600ms var(--ease), transform 3200ms var(--ease);
  pointer-events:none;
}
.miyu-layer.is-visible { opacity:1; transform:translateY(0) scale(1); }
.miyu-layer img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
}
.miyu-glow { opacity:.25; filter:blur(4px); transform:scale(1.015); }
.miyu { filter:drop-shadow(0 30px 45px rgba(3,30,70,.18)); }

.chest-logo {
  position:absolute;
  z-index:9;
  left:50%;
  top:58%;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  gap:0;
  color:#fff;
  text-shadow:0 0 24px rgba(6,31,82,.35);
  pointer-events:none;
  opacity:0;
  transition:opacity 1100ms var(--ease), transform 1400ms var(--ease), filter 1100ms ease;
}
.chest-logo.is-visible { opacity:1; transform:translate(-50%, -50%) scale(1); }
.chest-logo span {
  font-size:clamp(46px,8vw,84px);
  font-weight:900;
  line-height:1;
  letter-spacing:.08em;
}
.chest-logo strong {
  font-size:clamp(22px,3vw,38px);
  font-weight:850;
  line-height:1;
  letter-spacing:.02em;
  max-width:min(54vw, 460px);
}
.skip, .replay {
  position:absolute;
  z-index:30;
  right:22px;
  bottom:22px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  padding:11px 17px;
  background:rgba(5,31,82,.42);
  color:#fff;
  font:800 11px/1 system-ui;
  letter-spacing:.14em;
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.timeline { position:absolute; z-index:25; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.25); }
.timeline span { display:block; width:0; height:100%; background:#fff; box-shadow:0 0 12px #fff; }

.cover { z-index:1; background:#dbeaf8; overflow:hidden; }
.cover>img:first-child { width:100%; height:100%; display:block; object-fit:contain; background:#dbeaf8; }

.cover-links {
  position:absolute;
  inset:0;
  margin:auto;
  aspect-ratio:3/2;
  width:min(100vw,150svh);
  height:min(100svh,66.6667vw);
  pointer-events:none;
}
.cover-links a,.cover-links button {
  position:absolute;
  pointer-events:auto;
  border:0;
  background:transparent;
  cursor:pointer;
}
.cover-links a{
  color:transparent;
  font-size:0;
  line-height:0;
  text-indent:-9999px;
  overflow:hidden;
  white-space:nowrap;
}
.support { right:8.6%; top:2.1%; width:13.3%; height:7.4%; }
.menu-hit { right:2.1%; top:2.2%; width:5.8%; height:7.3%; }
.card { top:60.2%; width:22.5%; height:12.7%; border-radius:16px; }
.card.c1 {
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:5%;
  padding:1.8% 8% 1.8% 5%;
  color:var(--navy);
  text-decoration:none;
}
.card.c1::before {
  content:"";
  position:absolute;
  left:5.8%;
  top:16%;
  width:29%;
  height:68%;
  border-radius:50%;
  background:rgba(128,128,128,.20);
  pointer-events:none;
}
.c1-label-en, .c1-label-ja {
  position:relative;
  z-index:1;
  display:block;
  font-family:"Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP",system-ui,sans-serif;
  font-weight:800;
  pointer-events:none;
}
.c1-label-en {
  width:31%;
  text-align:center;
  font-size:clamp(10px,.84vw,14px);
  line-height:1.05;
  letter-spacing:.01em;
}
.c1-label-ja {
  flex:1;
  text-align:center;
  font-size:clamp(11px,1.05vw,17px);
  line-height:1.25;
  white-space:nowrap;
}
.c1{left:2.3%}.c2{left:25.6%}.c3{left:49%}.c4{left:72.3%}
.c5,.c6,.c7,.c8{top:74.4%}.c5{left:2.3%}.c6{left:25.6%}.c7{left:49%}.c8{left:72.3%}
.foot{top:91%;height:7%}.f1{left:12.5%;width:13.8%}.f2{left:31.2%;width:13.4%}.f3{left:50.5%;width:15.4%}.f4{left:70%;width:20.8%}

.drawer { position:fixed; inset:0; z-index:50; visibility:hidden; pointer-events:none; }
.drawer.is-open { visibility:visible; pointer-events:auto; }
.drawer-backdrop { position:absolute; inset:0; border:0; background:rgba(0,17,50,.48); opacity:0; transition:opacity 300ms ease; }
.drawer.is-open .drawer-backdrop { opacity:1; }
.drawer-panel {
  position:absolute; top:0; right:0; width:min(420px,88vw); height:100%;
  padding:76px 34px 40px; background:rgba(250,253,255,.97);
  box-shadow:-20px 0 80px rgba(0,17,50,.22);
  transform:translateX(105%); transition:transform 420ms var(--ease);
}
.drawer.is-open .drawer-panel { transform:translateX(0); }
.drawer-close { position:absolute; top:20px; right:22px; width:44px; height:44px; border:0; border-radius:50%; background:#eef4fb; color:var(--navy); font-size:30px; cursor:pointer; }
.drawer-panel>p { margin:0 0 8px; color:var(--blue); font-weight:900; letter-spacing:.18em; }
.drawer-panel nav { display:grid; }
.drawer-panel nav a { padding:17px 0; border-bottom:1px solid #dce5f0; color:var(--navy); text-decoration:none; font-weight:800; }
.drawer-panel nav a::after { content:"›"; float:right; }
.anchors { position:absolute; width:0; height:0; overflow:hidden; }

@media(max-width:760px){
  .brand-en,.intro-header nav{display:none}
  .msg-logo--header{width:110px}
  .intro-header{min-height:40px;padding:0 12px}
  .message--one{top:30%}
  .message--one h1{font-size:clamp(44px,13vw,68px)}
  .message--one p{font-size:clamp(17px,5vw,26px)}
  .message--two{top:31%}
  .message--two .small{font-size:clamp(22px,6vw,32px)}
  .message--two h2{font-size:clamp(58px,18vw,96px)}
  .message--three{top:25%;left:5%;right:5%}
  .message--three p{font-size:clamp(24px,7vw,39px)}
  .message--four{top:20%;left:2%;width:96%;text-align:left}
  .message--four p{font-size:clamp(20px,5.1vw,30px); white-space:nowrap}
  .miyu-layer{inset:40px -28% 0}
  .chest-logo{top:58%}
  .cover>img:first-child{object-fit:cover}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
}


/* v7: 23秒版。滑らかさを維持しつつ全体を短縮 */
.message {
  transition:
    opacity 1450ms var(--ease),
    transform 1650ms var(--ease),
    filter 1450ms ease;
}
.message.is-leaving {
  transition-duration: 950ms;
}
.miyu-layer {
  transition:
    opacity 1500ms var(--ease),
    transform 1900ms var(--ease);
}
.chest-logo {
  transition:
    opacity 1100ms var(--ease),
    transform 1400ms var(--ease),
    filter 1100ms ease;
}

/* v8: 冒頭コーラス音源を23秒オープニングに同期 */
.start-audio {
  position: fixed;
  z-index: 100;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 24px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: rgba(4, 20, 52, .72);
  backdrop-filter: blur(12px);
}
.start-audio[hidden] { display: none; }
.start-audio span {
  font-size: clamp(24px, 4vw, 54px);
  font-weight: 900;
  letter-spacing: .04em;
}
.start-audio small {
  font-size: clamp(12px, 1.4vw, 17px);
  font-weight: 700;
  opacity: .9;
}


/* Hide legacy overlay labels that remain in index.html */
.c1-label-en,
.c1-label-ja{
  display:none !important;
}


/* Sound control */
.sound-toggle {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  z-index: 1200;
  min-width: 108px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(4,23,62,.66);
  color: #fff;
  font: 700 12px/1 Arial, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sound-toggle:hover {
  background: rgba(4,23,62,.82);
}

.sound-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .sound-toggle {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    min-width: 96px;
    height: 34px;
    padding: 0 12px;
    font-size: 11px;
  }
}