@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900&family=Dela+Gothic+One&family=Shippori+Antique+B1&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  background: #e9e6e3;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: #222;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ============ font helpers ============ */
/* Onyx (ultra-condensed didone) substitute: Bodoni Moda squeezed horizontally */
.onyx {
  font-family: 'Bodoni Moda', serif;
  font-weight: 600;
  display: inline-block;
  transform: scaleX(0.5);
  transform-origin: left center;
  white-space: nowrap;
  line-height: 0.9;
  letter-spacing: 0.01em;
}
.onyx.c { transform-origin: center center; }
.onyx.wrap { white-space: normal; }
.shippori { font-family: 'Shippori Antique B1', serif; }
.jp { font-family: 'Zen Kaku Gothic New', sans-serif; }
.dela { font-family: 'Dela Gothic One', sans-serif; }

/* ============ layout shell ============ */
/* full-bleed: backgrounds span the whole viewport, content is capped by .container */
.site {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  position: relative;
}
section { position: relative; width: 100%; overflow: hidden; }
.container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

/* ============ KV ============ */
.kv img { width: 100%; height: auto; }

/* ============ NEWS ============ */
.news { background: #cd3416; display: flex; align-items: center; gap: clamp(12px, 2vw, 19px); padding: 6px 11px; }
.news .label { color: #f288b4; font-size: clamp(22px, 3.2vw, 33px); flex: none; }
.ticker { overflow: hidden; flex: 1; min-width: 0; }
.ticker-track { display: flex; gap: clamp(14px, 2.4vw, 24px); white-space: nowrap; color: #fff; font-size: clamp(15px, 1.9vw, 24px); width: max-content; animation: marquee 26s linear infinite; }
.ticker-track .date { color: #79cede; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ section heading (Latin + JP label) ============ */
.head { display: flex; flex-direction: column; }
.head .lat { line-height: 0.8; }
.head .lbl { font-size: clamp(16px, 2vw, 24px); }

/* ============ STORY ============ */
.story {
  background-color: #ece7ee;
  background-image: url(assets/texture2.png);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* DESKTOP/TABLET artful block — fluid: text + photos scale with the block width
   via container query units (cqw), so white text stays on the pink stripes at any width.
   Background = deco-asset11 (white + pink stripes) with texture2 grain on top. */
.story-art {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  aspect-ratio: 1280 / 1196;
  container-type: inline-size;
  overflow: hidden;
  background-color: #ece7ee;
  background-image: url(assets/texture2.png), url(assets/deco-asset11.png);
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
}
.story-art img { position: absolute; }

/* MOBILE stacked flow (shown < 769px) — same あしらい as decoration */
.story-flow {
  display: none;
  background-color: #ece7ee;
  background-image: url(assets/texture2.png), url(assets/deco-asset11.png);
  background-repeat: no-repeat, no-repeat;
  background-position: center center, bottom center;
  background-size: cover, 100% auto;
}
.story .container { position: relative; z-index: 1; padding-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(40px, 6vw, 70px); }

@media (max-width: 768px) {
  .story-art { display: none; }
  .story-flow { display: block; }
}
.story .head .lat { color: #f288b4; font-size: clamp(72px, 14vw, 152px); }
.story .head .lbl { color: #5fa9bd; margin-top: 4px; }
.story-intro { text-align: center; color: #cd3416; font-size: clamp(19px, 2.6vw, 28px); line-height: 1.6; margin: clamp(28px, 5vw, 56px) auto clamp(20px, 4vw, 40px); }
.story-row { display: flex; gap: clamp(24px, 4vw, 48px); align-items: center; margin: clamp(28px, 4vw, 44px) 0; }
.story-row.rev { flex-direction: row-reverse; }
.story-row .txt { flex: 1; }
.story-row .ph { flex: 1; }
.story-row .ph img { width: 100%; height: clamp(220px, 26vw, 320px); object-fit: cover; border-radius: 4px; }
.story-row .txt .red { color: #cd3416; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.7; }
.story-row .txt .sub { color: #5b4a4e; font-size: clamp(14px, 1.5vw, 18px); line-height: 1.9; margin-top: 14px; }
.story-narration { text-align: center; margin: clamp(28px, 5vw, 52px) auto; }
.story-narration .red { color: #cd3416; font-size: clamp(17px, 1.9vw, 22px); line-height: 1.7; }
.story-narration .em { color: #2b2b2b; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.9; margin-top: 18px; }
.shippori { } /* marker */

.story-band { position: relative; height: clamp(280px, 40vw, 561px); }
.story-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.story-band::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.28); }
.story-band span { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: clamp(21px, 3vw, 32px); line-height: 1.6; padding: 0 24px; }

/* profile card */
.profile { position: relative; z-index: 1; max-width: 900px; margin: clamp(40px, 6vw, 64px) auto 0; background: #17110f; border: 1px solid #f288b4; border-radius: 14px; padding: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px); }
.profile .role { color: #cd3416; font-size: clamp(24px, 3vw, 31px); line-height: 1.2; }
.profile .name { color: #fff; font-size: clamp(26px, 3.4vw, 31px); line-height: 1.2; margin-top: 2px; }
.profile .social { display: flex; gap: 6px; margin: 12px 0 18px; }
.profile .social span { width: 18px; height: 18px; border: 1px solid #fff; border-radius: 2px; display: block; }
.profile .avatar { width: 84px; height: 84px; margin: 14px 0 0; }
.profile .avatar img { width: 100%; height: 100%; object-fit: contain; }
.profile .body { color: #fff; font-size: 13px; line-height: 1.75; }
.profile .body p { margin-bottom: 12px; }
.profile .comment-h { color: #fff; font-size: clamp(16px, 2vw, 18px); margin-bottom: 14px; }
.profile .right { background: rgba(242,136,180,0.12); border-radius: 10px; padding: clamp(18px, 2.5vw, 26px); }
.profile .right .body { font-size: 14px; }

/* ============ HOW TO ENJOY ============ */
.howto { background: #cd3416; }
.howto .container { padding: clamp(44px, 6vw, 72px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 90px); }
.howto h2 { color: #73c1e1; font-size: clamp(52px, 11vw, 152px); }
.howto-block { display: flex; gap: clamp(28px, 4vw, 48px); align-items: center; max-width: 830px; margin: clamp(40px, 6vw, 80px) auto 0; }
.howto-block.rev { flex-direction: row-reverse; }
.howto-block .h { flex: 0 0 42%; color: #fff; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.6; }
.howto-block .b { flex: 1; color: #161616; font-size: clamp(13px, 1.5vw, 14px); line-height: 1.85; }
.howto-block .b p { margin-bottom: 12px; }

/* ============ CAST ============ */
.cast { height: clamp(300px, 36vw, 461px); }
.cast .bg, .cast .bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cast::after { content: ""; position: absolute; inset: 0; background: #73c1e1; mix-blend-mode: screen; }
.cast .inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 26px); }
.cast .inner .lat { color: #f5f3f3; font-size: clamp(80px, 12vw, 152px); }
.cast .inner .sub { color: #f5f3f3; font-size: clamp(24px, 4vw, 48px); }

/* ============ TICKET ============ */
.ticket { background: #f3f1f1; }
.ticket .eye { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(280px, 34vw, 540px); z-index: 0; pointer-events: none; }
/* anchored relative to the page centre so the eyes flank the content at any width */
.ticket .eye.l { left: calc(50% - 760px); }
.ticket .eye.r { right: calc(50% - 760px); transform: translateY(-50%) scaleX(-1); }
.ticket .container { position: relative; z-index: 1; padding: clamp(44px, 6vw, 72px) clamp(20px, 4vw, 40px) clamp(48px, 6vw, 80px); text-align: center; }
.ticket h2 { color: #f78fb4; font-size: clamp(92px, 16vw, 152px); }
.ticket .jp-sub { font-size: clamp(20px, 3vw, 28px); color: #000; margin-top: 2px; }
.tickets { display: flex; gap: clamp(16px, 3vw, 32px); justify-content: center; flex-wrap: wrap; margin: clamp(34px, 5vw, 56px) 0; }
.tcard { background: #d9d9d9; border-radius: 6px; width: 241px; max-width: 46%; padding: 18px 10px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tcard .lbl { font-size: clamp(18px, 2vw, 20px); color: #000; }
.tcard .price { color: #cd3416; font-size: clamp(42px, 7vw, 64px); }
.cta { max-width: 609px; margin: 0 auto; background: #cd3416; border-radius: 80px; padding: clamp(20px, 3vw, 28px); box-shadow: 0 4px 15px 5px rgba(0,0,0,0.2); display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.cta .s { color: #eebcbc; font-size: clamp(15px, 2vw, 18px); }
.cta .l { color: #fff; font-size: clamp(20px, 3vw, 28px); }

/* ============ NOTICE + ACCESS (dark) ============ */
.dark { background: #2b3135; }
.dark .container { padding: clamp(48px, 6vw, 64px) clamp(20px, 4vw, 40px) clamp(64px, 8vw, 120px); display: flex; flex-direction: column; align-items: center; gap: clamp(60px, 8vw, 107px); }
.notice { width: 100%; max-width: 649px; border: 1px solid #fff; border-radius: 20px; padding: clamp(26px, 4vw, 38px) clamp(20px, 3vw, 44px); }
.notice h3 { color: #f78fb4; text-align: center; font-size: 18px; }
.notice .sub { color: #fff; text-align: center; font-size: 12px; margin: 4px 0 20px; }
.notice ul { color: #fff; font-size: clamp(13px, 1.5vw, 14px); padding-left: 22px; }
.notice li { line-height: 1.6; margin-bottom: 10px; }
.access { width: 100%; max-width: 780px; display: flex; gap: clamp(32px, 5vw, 83px); align-items: center; }
.access .info { flex: 0 0 269px; display: flex; flex-direction: column; align-items: flex-end; }
.access h2 { color: #f78fb4; font-size: clamp(90px, 13vw, 152px); }
.access .info .det { width: 100%; }
.access .addr1 { color: #fff; font-size: clamp(20px, 2.4vw, 24px); margin-top: 14px; }
.access .addr2 { color: #fff; font-size: 12px; margin-top: 12px; }
.access hr { border: none; border-top: 1px solid #fff; margin: 14px 0; }
.access .eki-l { color: #cfcfcf; font-size: 10px; }
.access .eki { color: #fff; font-size: 11px; line-height: 1.6; margin-top: 4px; }
.access .map { flex: 1; }
.access .map img { width: 100%; border-radius: 2px; }

/* ============ TEAM ============ */
.team { background: #cd3416; }
.team .container { padding: clamp(48px, 6vw, 82px) clamp(20px, 4vw, 40px); display: flex; flex-direction: column; align-items: center; gap: clamp(48px, 6vw, 70px); }
.team .unit-wrap { width: 100%; max-width: 854px; }
.team h2 { color: #f78fb4; font-size: clamp(64px, 11vw, 120px); display: block; text-align: right; }
.team .lbl { color: #fff; font-size: clamp(14px, 1.7vw, 16px); margin: 8px 0 16px; }
.team-unit { display: flex; border: 1px solid #fff; }
.team-unit .nm { flex: 0 0 144px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; gap: 6px; border-right: 1px solid #fff; }
.team-unit .nm .ja { color: #fff; font-size: clamp(36px, 4vw, 48px); }
.team-unit .nm .en { color: #fff; font-size: clamp(20px, 2.2vw, 24px); }
.team-unit .desc { flex: 1; background: rgba(255,255,255,0.1); padding: clamp(20px, 3vw, 30px) clamp(18px, 2.5vw, 24px); color: #fff; font-size: 14px; }
.team-unit .desc p { line-height: 2; margin-bottom: 8px; }
.team-x { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.team-x .logo { width: clamp(96px, 12vw, 120px); height: auto; }
.team-x .pill { background: #fff; color: #cd3416; border-radius: 70px; padding: clamp(14px, 2vw, 18px) clamp(40px, 6vw, 64px); text-align: center; font-size: clamp(20px, 2.4vw, 24px); }
.team-x .pill p { line-height: 1.5; }

/* ============ FAQ ============ */
.faq { height: clamp(300px, 38vw, 520px); }
.faq .bg, .faq .bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.faq::after { content: ""; position: absolute; inset: 0; background: #73c1e1; mix-blend-mode: screen; }
.faq .inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.faq .inner .lat { color: #f78fb4; font-size: clamp(72px, 12vw, 120px); }
.faq .inner .sub { color: #000; font-size: clamp(15px, 1.8vw, 16px); }

/* ============ CONTACT ============ */
.contact { background: #f78fb4; }
.contact .container { padding: clamp(48px, 7vw, 80px) clamp(20px, 4vw, 40px); display: flex; flex-direction: column; align-items: center; }
.contact h2 { color: #505050; font-size: clamp(72px, 13vw, 128px); }
.contact .sub { color: #fff; font-size: clamp(15px, 1.8vw, 16px); margin: 14px 0 32px; }
.contact .btn { border: 1px solid #fff; color: #fff; text-decoration: none; padding: clamp(18px, 2.5vw, 22px) clamp(40px, 6vw, 60px); font-size: clamp(15px, 1.8vw, 16px); transition: background 0.2s; }
.contact .btn:hover { background: rgba(255,255,255,0.15); }

/* ============ FOOTER ============ */
.footer { background: #2b3135; border-radius: clamp(40px, 6vw, 81px) clamp(40px, 6vw, 81px) 0 0; }
.footer .container { max-width: 560px; padding: clamp(44px, 6vw, 56px) clamp(20px, 4vw, 40px) 48px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer .share-h { color: rgba(255,255,255,0.3); font-size: clamp(36px, 5vw, 48px); }
.footer .share { display: flex; gap: clamp(14px, 2vw, 16px); margin: 16px 0 40px; }
.footer .share span { width: clamp(60px, 7vw, 77px); height: clamp(60px, 7vw, 77px); border: 1px solid #7a7a7a; border-radius: 5px; }
.footer .staff-h { color: #9c9c9c; font-size: 16px; margin-bottom: 18px; }
.footer .staff { color: #fff; font-size: 14px; line-height: 2; }
.footer .staff2 { color: #fff; font-size: 14px; margin: 14px 0; }
.footer .staff2 p { line-height: 1.6; }
.footer .ggg { color: #6d6d6d; font-size: 16px; margin: 12px 0 20px; }
.footer .copy { color: #fff; font-size: 14px; }

/* ============ RESPONSIVE BREAKPOINTS ============ */
@media (max-width: 768px) {
  .story-row, .story-row.rev { flex-direction: column; }
  .story-row .ph img { height: clamp(200px, 50vw, 300px); }
  .profile { grid-template-columns: 1fr; }
  .howto-block, .howto-block.rev { flex-direction: column; align-items: flex-start; gap: 12px; }
  .access { flex-direction: column; align-items: stretch; gap: 28px; }
  .access .info { flex: none; align-items: flex-start; }
  .access h2 { align-self: flex-start; }
  .team-unit { flex-direction: column; }
  .team-unit .nm { flex: none; border-right: none; border-bottom: 1px solid #fff; }
  .team h2 { text-align: center; }
}

@media (max-width: 480px) {
  .ticket .eye { display: none; }
  .tcard { max-width: 47%; }
}