:root {
  --indigo: #1f4f8a;
  --indigo-deep: #173f72;
  --ink: #102235;
  --muted: #68768a;
  --line: #e6ebf0;
  --paper: #ffffff;
  --page: #f7f8fa;
  --shadow: 0 18px 55px rgba(19, 36, 55, .18);
  font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--page); color: var(--ink); }
button { font: inherit; }
.page-shell { max-width: 760px; margin: 0 auto; padding: 28px 18px 38px; }
.site-header { text-align: center; margin-bottom: 24px; }
.brand-line { display: flex; align-items: center; justify-content: center; gap: 16px; color: #5b6f85; letter-spacing: .08em; font-size: 14px; }
.brand-line span { width: 54px; height: 1px; background: #9aa8b7; }
.brand-line p { margin: 0; }
h1 { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin: 18px 0 4px; font-size: clamp(31px, 7vw, 46px); font-weight: 500; line-height: 1.05; }
h1 b { font-weight: 400; color: #789; }
.subtitle { margin: 0; font-size: 21px; letter-spacing: .07em; color: #6b788a; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; align-items: stretch; }
.card { border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 0; box-shadow: 0 6px 18px rgba(33, 53, 74, .07); overflow: hidden; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; }
.card:active { transform: scale(.985); }
.card img { width: 100%; aspect-ratio: 2480 / 3508; object-fit: cover; display: block; flex: 0 0 auto; }
.card h2 { margin: 0; padding: 14px 12px 16px; min-height: 92px; font-size: clamp(16px, 4vw, 21px); font-weight: 500; line-height: 1.2; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.card h2 .label-ja, .card h2 .label-en { display: block; max-width: 100%; white-space: nowrap; }
.tap-hint { margin: 28px auto 0; border: 0; background: linear-gradient(135deg, #2a67ad, var(--indigo-deep)); border-radius: 16px; min-height: 86px; display: flex; justify-content: center; align-items: center; gap: 18px; color: #fff; padding: 14px 18px; box-shadow: 0 9px 18px rgba(31,79,138,.18); }
.tap-illustration { width: 54px; height: 54px; color: #fff; flex: 0 0 auto; }
.tap-illustration svg { width: 100%; height: 100%; display: block; }
.tap-hint strong, .tap-hint small { display: block; }
.tap-hint strong { font-size: 16px; }
.tap-hint small { color: rgba(255,255,255,.82); margin-top: 5px; font-size: 13px; }
[hidden] { display: none !important; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(18, 32, 47, .72); padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); backdrop-filter: blur(4px); }
.modal-card { width: min(91vw, 560px); max-height: 95dvh; overflow: auto; background: #fff; border-radius: 22px; box-shadow: var(--shadow); padding: 16px 16px 18px; scrollbar-width: none; }
.modal-card::-webkit-scrollbar { display: none; }
.modal-topbar { position: relative; min-height: 44px; display: grid; place-items: center; }
.counter { color: #69788b; font-size: 19px; }
.icon-btn { border: 0; background: transparent; color: #5b6a7c; }
.close-btn { position: absolute; right: 0; top: -8px; font-size: 42px; line-height: 1; width: 48px; height: 48px; cursor: pointer; }
.viewer { position: relative; user-select: none; }
.slides-window { overflow: hidden; border-radius: 14px; background: #eef2f6; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
.slides-track { display: flex; width: 100%; transform: translate3d(0,0,0); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.slide { flex: 0 0 100%; min-width: 0; }
.slide img { display: block; width: 100%; aspect-ratio: 2480 / 3508; object-fit: cover; background: #eef2f6; pointer-events: none; -webkit-user-drag: none; }
.nav-btn { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; border: 0; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 5px 16px rgba(0,0,0,.12); color: #173450; font-size: 42px; line-height: 40px; cursor: pointer; }
.prev { left: -13px; }
.next { right: -13px; }
.nav-btn:disabled { opacity: .28; cursor: default; }
.dots { display: flex; justify-content: center; gap: 10px; padding: 15px 0 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #dfe4e9; }
.dots i.active { background: var(--indigo); }
.modal-label { margin: 8px 0 15px; text-align: center; font-size: 23px; font-weight: 500; }
.ad-download-btn, .download-now-btn { width: 100%; border: 0; border-radius: 18px; min-height: 88px; padding: 13px 19px; display: flex; justify-content: center; align-items: center; gap: 17px; background: linear-gradient(135deg, #2a67ad, var(--indigo-deep)); color: #fff; cursor: pointer; box-shadow: 0 9px 18px rgba(31,79,138,.2); }
.ad-download-btn strong, .ad-download-btn small, .download-now-btn strong, .download-now-btn small { display: block; }
.ad-download-btn strong, .download-now-btn strong { font-family: system-ui, sans-serif; font-size: 18px; font-weight: 750; }
.ad-download-btn small, .download-now-btn small { font-family: system-ui, sans-serif; font-size: 15px; margin-top: 4px; }
.play-disc { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--indigo); font-size: 19px; padding-left: 3px; flex: 0 0 auto; }
.ad-complete { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 10px 0 12px; color: #334b66; }
.ad-complete > span { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: #dff5e8; color: #189557; font-size: 23px; }
.ad-complete p { margin: 0; }
.ad-complete strong, .ad-complete small { display: block; font-family: system-ui, sans-serif; }
.ad-complete small { color: #617084; margin-top: 2px; }
.swipe-hint { text-align: center; margin: 17px 0 0; color: #7c8796; font-size: 13px; }
.ad-overlay { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; background: rgba(9,19,30,.86); padding: 20px; }
.ad-box { width: min(90vw, 430px); border-radius: 20px; background: #fff; padding: 20px; text-align: center; box-shadow: var(--shadow); }
.ad-kicker { margin: 0 0 10px; font: 700 12px/1 system-ui, sans-serif; letter-spacing: .18em; color: #7a8795; }
.ad-placeholder { height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; border-radius: 16px; background: linear-gradient(145deg, #eef3f8, #dde8f3); color: #2e4d6f; font: 700 24px/1.2 system-ui, sans-serif; }
.ad-placeholder small { font-size: 13px; font-weight: 500; color: #6d7d8e; }
.ad-count { margin: 18px 0 12px; font: 600 15px/1.2 system-ui, sans-serif; color: #46566a; }
.ad-box button { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: var(--indigo); color: #fff; font: 700 15px/1 system-ui, sans-serif; }
.ad-box button:disabled { background: #bdc6cf; color: #fff; }
body.modal-open { overflow: hidden; }
@media (max-width: 420px) {
  .page-shell { padding-inline: 12px; }
  .gallery { gap: 14px 10px; }
  .card { border-radius: 13px; }
  .card h2 { font-size: clamp(12px, 3.8vw, 15px); }
  .modal-card { width: 95vw; padding-inline: 12px; }
  .nav-btn { width: 43px; height: 43px; font-size: 36px; }
  .ad-download-btn strong, .download-now-btn strong { font-size: 16px; }
  .ad-download-btn small, .download-now-btn small { font-size: 13px; }
}

/* v3 polish */
.tap-hint strong { letter-spacing: .01em; }
.ad-kicker { color: var(--indigo-deep); }
.ad-box { border: 1px solid rgba(23,63,114,.08); }
.ad-placeholder { border: 1px solid rgba(31,79,138,.08); }
.ad-box button:not(:disabled) { box-shadow: 0 7px 16px rgba(31,79,138,.18); cursor: pointer; }


/* All scenes directory link, shared by Scene 01-06 */
.back-home-nav {text-align:left;max-width:740px;margin:0 auto;padding:5px 0 0;}
.back-home-nav a {display:inline-flex;align-items:center;gap:.65em;padding:10px 1px;font-size:12px;line-height:1.35;letter-spacing:.02em;color:#566d82;text-decoration:none;}
.back-home-nav a span{color:#778896;font-size:11px;}
.back-home-nav a:hover{text-decoration:underline;}
.back-home-nav a:focus-visible{outline:2px solid #34689b;outline-offset:3px;}

/* Information and policy navigation is outside scene/gallery elements. */
.jcs-gallery-footer{max-width:760px;margin:0 auto;padding:0 18px 28px;font:12px/1.7 system-ui,-apple-system,Arial,sans-serif;color:#627489}
.jcs-legal-nav{display:flex;justify-content:center;gap:10px 20px;flex-wrap:wrap}
.jcs-legal-nav a{color:inherit;text-underline-offset:3px}
.jcs-legal-nav a:hover{color:var(--indigo)}