/* ©SCHNEID
SAMURAI BLUE Project for FIFA World Cup 2026™️『ONE CREATURE』無数の個性、ひとつの生きもの。公式サイト
Kazumi Nishibayashi */
@charset "UTF-8";
:root {
 --heading-size: clamp(4rem, 6vw, 8rem); /* NEWS・TRAILER 見出しの文字サイズ（1st Leg バナーの高さもこれに合わせる） */
 --primary-color: #1D3D87; /* MV原稿の帯色（実測） */
 --accent-color: #00A651;
 --text-color: #4a4a4a;
 --bg-color: #FFFFFF;
 --gray-color: #D3DBE2;
 --gray-bg: #F5F5F7;
 --border-color: #1D3D87;
 --font-heading: 'Roboto Condensed', 'Noto Sans JP', sans-serif;
 --font-body: 'Noto Sans JP', sans-serif;
 --transition-slow: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
 --transition-fast: all 0.3s ease;
}
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 border-radius: 0;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, nav, section, time, mark, audio, video {
 font-size: 1em;
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 background: transparent;
 vertical-align: bottom;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
 display: block;
}
html {
 font-size: 62.5%;
 scroll-behavior: smooth;
}
body {
 -webkit-text-size-adjust: 100%;
 overflow-x: hidden;
 font-size: 1.6rem;
 line-height: 2em;
 font-family: var(--font-body);
 background-color: var(--bg-color);
 color: var(--primary-color);
 font-style: inherit;
 font-weight: 500;
}
img {
 max-width: 100%;
 height: auto;
 display: block;
}
a {
 text-decoration: none;
 color: inherit;
 transition: var(--transition-fast);
}
ul {
 list-style: none;
}
p {
 font-size: clamp(1.5rem, 2vw, 1.8rem);
 line-height: 2em;
}
/* Loader */
.loader {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: var(--primary-color) url("../images/band-texture.webp") repeat;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 9999;
 transition: opacity 2s cubic-bezier(0.23, 1, 0.32, 1);
 will-change: opacity;
}
.loader-text {
 color: #fff;
 font-family: var(--font-heading);
 font-size: 3rem;
 font-weight: 700;
 letter-spacing: 0.1em;
 animation: loaderScaleUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 width: 70%;
 max-width: 600px;
 display: block;
 margin: auto;
 opacity: 0;
}
.loader-text img {
 width: 600px;
 height: auto;
}
/* アニメーション名を内容に合わせて変更 */
@keyframes loaderScaleUp {
 from {
  opacity: 0;
  transform: scale(0.8); /* 少し小さめの状態から開始 */
 }
 to {
  opacity: 1;
  transform: scale(1); /* 元のサイズで停止 */
 }
}
/* Header */
.header {
 position: absolute;
 top: 0;
 width: 100%;
 padding: 30px 40px;
 display: flex;
 align-items: center;
 z-index: 900;
 background: transparent;
}
.logo a {
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: 2rem;
 color: #fff; /* Initial white on hero image */
 letter-spacing: 0.05em;
}
.header-sns {
 display: flex;
 gap: 20px;
}
.header-sns a {
 color: #fff;
 font-size: clamp(2rem, 3vw, 3rem);
}
/* Hero */
/* MVはIllustrator原稿の書き出し（写真＋帯パーツ）を重ねて原稿どおりに再現する → DDR-001 */
.hero {
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
 display: block;
 overflow: hidden;
 background: #0b1630;
}
@media (max-width: 912px) {
 .header-sns {
  gap: 16px;
 }
}
.hero-bg {
 position: absolute;
 inset: 0;
 overflow: hidden;
 background: #0b1630;
}
.hero-stage {
 position: absolute;
 inset: 0;
 transform: scale(1.08);
 transform-origin: 50% 40%;
 transition: transform 7s cubic-bezier(0.16, 1, 0.3, 1);
 will-change: transform; /* 拡大縮小中に再ラスタライズさせない（横縞のちらつき対策） */
}
.hero-bg.is-loaded .hero-stage {
 transform: scale(1);
}
.hero-photo,
.hero-part {
 position: absolute;
 inset: 0;
 display: block;
 width: 100%;
 height: 100%;
}
.hero-part img {
 display: block;
 width: 100%;
 height: 100%;
}
.hero-photo img,
.hero-part img {
 object-fit: cover;
}
.hero-photo {
 will-change: transform;
}
.hero-photo img {
 display: block;
 width: 100%;
 height: 100%;
 opacity: 0;
 transition: opacity 2.4s ease-out;
}
.hero-bg.is-loaded .hero-photo img {
 opacity: 1;
}
/* 帯は clip-path の矩形を閉じた状態から原稿の位置まで開く（画素は原稿のまま）
   閉じた矩形は幅0でも1px の線として描かれるため、開き始めるまで visibility で隠す */
.hero-part {
 clip-path: inset(var(--t) calc(100% - var(--l)) var(--b) var(--l));
 visibility: hidden;
 transition: clip-path 1s cubic-bezier(0.77, 0, 0.18, 1), visibility 0s;
 transition-delay: var(--d, 0s);
}
.hero-part.is-vertical {
 clip-path: inset(var(--t) var(--r) calc(100% - var(--t)) var(--l));
}
.hero-part.is-fade {
 clip-path: inset(var(--t) var(--r) var(--b) var(--l));
 opacity: 0;
 transition: opacity 1.2s ease-out, visibility 0s;
 transition-delay: var(--d, 0s);
}
.hero-bg.is-loaded .hero-part {
 clip-path: inset(var(--t) var(--r) var(--b) var(--l));
 visibility: visible;
 opacity: 1;
}
/* 座標は原稿（1920×1080）の帯の外形を％にしたもの */
.hero-part--b1 { --t: 14.074%; --r: 61.667%; --b: 78.519%; --l: 17.344%; --d: .5s; }
.hero-part--b2 { --t: 21.759%; --r: 42.344%; --b: 70.556%; --l: 22.188%; --d: .7s; }
.hero-part--b3 { --t: 29.722%; --r: 22.552%; --b: 49.907%; --l: 22.188%; --d: .9s; }
.hero-part--logo { --t: 51.389%; --r: 17.448%; --b: 42.130%; --l: 56.979%; --d: 1.5s; }
.hero-part--v1 { --t: 0%; --r: 3.646%; --b: 72.130%; --l: 93.594%; --d: 1.9s; }
.hero-part--v2 { --t: 14.074%; --r: 6.823%; --b: 65%; --l: 90.365%; --d: 2.2s; }
.hero-part--emblem { --t: 57.778%; --r: 44.896%; --b: 32.685%; --l: 45.729%; --d: 2.4s; }
.hero-part--credit { --t: 68.519%; --r: 37.5%; --b: 23.796%; --l: 37.448%; --d: 2.6s; }
.hero-part--date { --t: 82.685%; --r: 3.229%; --b: 4.722%; --l: 84.167%; --d: 2.8s; }
.hero-part--copy { --t: 94.259%; --r: 77.813%; --b: 4.074%; --l: 3.646%; --d: 2.8s; } /* 右端は「製作委員会」まで（原稿の続きの1行は表示しない → DDR-008） */
/* SPは縦型ポスター（仕上がり2064×2919）の帯の外形。エンブレム〜コピーライトは1.2倍で一つのまとまりに組み直した → DDR-005 */
@media (max-width: 912px) {
 .hero {
  aspect-ratio: 2064 / 2919;
 }
 .hero-part--b1 { --t: 31.244%; --r: 52.810%; --b: 64.714%; --l: 17.345%; }
 .hero-part--b2 { --t: 35.526%; --r: 28.343%; --b: 60.158%; --l: 21.076%; }
 .hero-part--b3 { --t: 40.048%; --r: 0%; --b: 48.441%; --l: 21.076%; }
 .hero-part--logo { --t: 52.587%; --r: 0%; --b: 42.720%; --l: 52.277%; }
 .hero-part--v1 { --t: 0%; --r: 2.132%; --b: 84.652%; --l: 94.234%; }
 .hero-part--v2 { --t: 8.051%; --r: 6.395%; --b: 80.850%; --l: 89.922%; }
 .hero-part--emblem { --t: 64.371%; --r: 41.424%; --b: 29.394%; --l: 41.618%; }
 .hero-part--credit { --t: 71.600%; --r: 35.223%; --b: 24.632%; --l: 35.417%; }
 .hero-part--copy { --t: 83.213%; --r: 40.891%; --b: 16.118%; --l: 41.037%; } /* 下端は1行目まで → DDR-008 */
 .hero-part--date { --t: 76.567%; --r: 42.345%; --b: 17.472%; --l: 42.490%; }
}
@media (prefers-reduced-motion: reduce) {
 .hero-stage,
 .hero-photo img,
 .hero-part {
  transition: none;
 }
}
/* Scroll Reveal Animation */
.reveal {
 opacity: 0;
 transform: translate3d(0, 20px, 0);
 transition: opacity 2.5s cubic-bezier(0.16, 1, 0.3, 1), transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
 will-change: opacity, transform;
}
.reveal.active {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
 .reveal {
  opacity: 1;
  transform: none;
  transition: none;
 }
}
/* Section Common */
.section {
 padding: 120px 0;
 width: 86%;
 max-width: 1260px;
 margin: 0 auto;
}
.section-title {
 font-family: var(--font-heading);
 font-size: var(--heading-size);
 font-weight: 700;
 margin-bottom: 60px;
 letter-spacing: -0.02em;
 line-height: 0.9;
 text-align: center;
}
/* 見出しはMVの帯と同じ見せ方（表示時に左から開く） */
.section-title,
.news-ttl {
 display: table;
 padding: 0.14em 0.32em 0.1em;
 color: #fff;
 background: var(--primary-color) url("../images/band-texture.webp") repeat;
 clip-path: inset(0 100% 0 0);
 transition: clip-path 0.85s cubic-bezier(0.65, 0, 0.25, 1) 0.15s;
}
.section-title {
 margin-inline: auto;
}
.reveal.active .section-title,
.reveal.active .news-ttl {
 clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
 .section-title,
 .news-ttl {
  clip-path: none;
  transition: none;
 }
}
.visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 overflow: hidden;
 clip: rect(0 0 0 0);
 white-space: nowrap;
 border: 0;
}
/* 予告映像が決まるまでの枠 */
.video-soon {
 position: absolute;
 inset: 0;
 display: grid;
 place-items: center;
 background: #0b1630 url("../images/mv_photo_1920.webp") center / cover no-repeat;
}
.video-soon::before {
 content: "";
 position: absolute;
 inset: 0;
 background: rgba(11, 22, 48, 0.72);
}
.video-soon p {
 position: relative;
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: clamp(2.4rem, 4vw, 4.8rem);
 letter-spacing: 0.08em;
 color: #fff;
}

/* Trailer */
.trailer-section {
 max-width: 900px;
}
.video-wrapper {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
}
.video-wrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.video-buttons {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 8px;
 margin-top: 15px;
 margin-bottom: 20px;
 width: 100%;
}
.video-btn {
 background: #707070;
 color: #fff;
 border: none;
 font-family: var(--font-body);
 font-size: clamp(1.3rem, 2vw, 2rem);
 font-weight: 500;
 cursor: pointer;
 transition: var(--transition-fast);
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 line-height: 1.3;
 min-height: 48px;
 box-sizing: border-box;
 font-feature-settings: "palt" 1;
}
.video-btn:hover {
 background: #4a4a4a;
}
.video-btn.active {
 background: var(--primary-color) url("../images/band-texture.webp") repeat;
}
@media (max-width: 912px) {
 .video-buttons {
  gap: 6px;
 }
 .video-btn {
  min-height: 40px;
 }
}

/* Introduction */
.introduction-section {
 position: relative;
 color: #fff;
 text-align: center;
 background-color: #002715;
 padding: 120px 0;
 overflow: hidden;
 max-width: 100%;
 width: 100%;
}
.introduction-section .section-title {
 color: #fff;
}
.introduction-bg {
 position: absolute;
 top: -25%;
 left: 0;
 width: 100%;
 height: 150%;
 background-image: url('../images/main_yoko.jpg');
 background-size: 100% auto;
 background-position: center top 40%;
 opacity: 0.2;
 z-index: 1;
 will-change: transform;
}
.introduction-section .container {
 position: relative;
 z-index: 2;
 width: 86%;
 max-width: 1000px;
 margin: 0 auto;
}
.introduction-catch {
 font-family: var(--font-body);
 font-size: clamp(1.8rem, 2.5vw, 2.8rem);
 font-weight: 700;
 line-height: 1.8;
 margin-bottom: 50px;
 letter-spacing: 0.05em;
}
.introduction-text {
 font-size: clamp(1.5rem, 2.2vw, 2.8rem);
 line-height: 2.2;
 text-align: center;
 font-weight: 500;
 letter-spacing: 0.05em;
}
.introduction-text p {
 margin-bottom: 2em;
}
.introduction-text p:last-child {
 margin-bottom: 0;
}
@media (min-width: 913px) {
 .intro-sp-br {
  display: none;
 }
}
@media (max-width: 912px) {
 .introduction-bg {
  background-image: url('../images/main.jpg');
  background-size: 106% auto;
  background-position: center top 30%;
 }
 .introduction-catch {
  margin-bottom: 30px;
 }
 .introduction-text {
  text-align: left;
  text-align: justify;
 }
 .intro-pc-br {
  display: none;
 }
}

/* Ticket */
.ticket-section {
 background: transparent;
}
.ticket-header {
 text-align: center;
}
.ticket-header.sale {
 margin-bottom: 30px;
}
.ticket-info-title {
 font-size: clamp(2rem, 3vw, 3.6rem);
 line-height: 1.4em;
 font-weight: 700;
 margin-bottom: 8px;
 color: var(--primary-color);
}
.ticket-info-desc {
 font-size: clamp(1.5rem, 2vw, 1.8rem);
 line-height: 1.8;
}
.ticket-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 30px;
 max-width: 820px;
 margin: 0 auto 60px;
}
.card-large {
 grid-column: span 2;
}
.card-large-content {
 display: flex;
 gap: 40px;
 align-items: stretch;
}
.card-large-content .ticket-image {
 flex: 1;
 margin-bottom: 0;
 display: flex;
 align-items: center;
 justify-content: center;
}
.card-large-content .ticket-buy {
 flex: 1;
 margin-top: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.ticket-card {
 background: #fff;
 padding: 30px;
 border: 1px solid var(--border-color);
 display: flex;
 flex-direction: column;
}
.ticket-method {
 font-size: clamp(1.6rem, 2vw, 2rem);
 font-weight: 700;
 color: var(--primary-color);
 margin-bottom: 20px;
 text-align: center;
 border-bottom: 2px solid var(--primary-color);
 padding-bottom: 10px;
}
.ticket-image {
 margin-bottom: 20px;
 text-align: center;
}
.ticket-image img {
 height: auto;
 max-width: 300px;
 width: 60%;
 margin: 0 auto;
}
.ticket-note {
 font-size: 1.4rem;
 color: #4a4a4a;
 margin-bottom: 20px;
 flex-grow: 1;
}
.ticket-note-list {
 display: inline-block;
 text-align: left;
 list-style: none;
 padding-left: 0;
 margin-top: 20px;
}
.ticket-note-list li {
 font-size: 1.4rem;
 color: #4a4a4a;
 line-height: 1.6;
 margin-bottom: 5px;
 position: relative;
 padding-left: 1.2em;
}
.ticket-note-list li::before {
 content: "※";
 position: absolute;
 left: 0;
 top: 0;
}
.ticket-buy {
 margin-top: auto;
}
.ticket-buy > p {
 font-size: 1.4rem;
 font-weight: 700;
 margin-bottom: 10px;
 text-align: center;
}
.ticket-btn-group {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.ticket-btn {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 40px;
 background: var(--primary-color) url("../images/band-texture.webp") repeat;
 color: #fff;
 text-align: center;
 padding: 5px;
 font-size: 1.4rem;
 font-weight: 700;
 transition: var(--transition-fast);
 letter-spacing: 0.05em;
 border: 1px solid var(--primary-color);
}
.ticket-btn:hover {
 background: #fff;
 color: var(--primary-color);
}
.ticket-caution {
 max-width: 800px;
 margin: auto;
}
.ticket-caution p {
 font-size: 1.4rem;
}
@media (min-width: 913px) {
 .ticket-btn {
  min-height: 50px;
 }
 .card-large-content .ticket-buy {
  max-width: 333px;
 }
 .ticket-card--online .ticket-buy {
  width: 100%;
  max-width: 333px;
  margin-left: auto;
  margin-right: auto;
 }
 .ticket-card--online .ticket-note {
  text-align: center;
 }
}
/* Comment */
.comment-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 120px;
 position: relative;
}
.comment-header {
 margin-bottom: 30px;
}
.comment-role,
.music-role {
 font-family: var(--font-heading);
 font-size: clamp(1.4rem, 1.8vw, 1.6rem);
 font-weight: 700;
 font-feature-settings: "palt" 1;
 color: var(--primary-color);
 display: block;
 margin-bottom: 5px;
}
.comment-name {
 font-size: clamp(4rem, 5vw, 5.2rem);
 line-height: 1em;
 font-weight: 700;
}
.comment-body p {
 text-align: justify;
}
@media (min-width: 913px) {
 .comment-grid .comment-card:first-of-type {
  position: relative;
 }
 .comment-grid .comment-card:first-of-type::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -60px;
  width: 1px;
  background-color: var(--border-color);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.4s cubic-bezier(0.77, 0, 0.18, 1) 0.6s;
 }
 .reveal.active .comment-grid .comment-card:first-of-type::after {
  transform: scaleY(1);
 }
}
/* Narration */
.narration-content {
 flex-direction: row-reverse;
}
.narration-tabs {
 display: flex;
 gap: 8px;
 margin-bottom: 24px;
 border-bottom: 1px solid var(--border-color);
}
.music-info > .narration-tabs {
 margin-top: 10px;
}
.narration-tab {
 background: none;
 border: 1px solid transparent;
 padding: 10px 22px;
 font-family: var(--font-heading);
 font-size: clamp(1.4rem, 1.8vw, 1.6rem);
 font-weight: 700;
 letter-spacing: 0.05em;
 color: #888;
 cursor: pointer;
 margin-bottom: -1px;
 transition: color 0.3s ease, border-color 0.3s ease;
}
.narration-tab:hover {
 color: var(--primary-color);
}
.narration-tab.is-active {
 color: var(--primary-color);
 border: 1px solid var(--border-color);
 border-bottom-color: #fff;
}
.narration-tab:focus-visible {
 outline: 2px solid var(--primary-color);
 outline-offset: 2px;
}
.narration-panels {
 position: relative;
}
.narration-panel {
 will-change: opacity;
 /* アクティブ化時：旧パネルがフェードアウトしてからフェードイン（0.2s後に開始） */
 transition: opacity 0.2s ease 0.2s, visibility 0s 0s;
}
.narration-panel:not(.is-active) {
 /* 非アクティブパネルは流れから外して、コンテナ高はアクティブ側に追従させる */
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 visibility: hidden;
 opacity: 0;
 pointer-events: none;
 /* 非アクティブ化時：先にフェードアウト、終わってからvisibility:hiddenに */
 transition: opacity 0.2s ease 0s, visibility 0s 0.2s;
}
.narration-panel[data-panel="profile"] p {
 font-feature-settings: "palt" 1;
 letter-spacing: 1px;
}
/* Music */
.music-content,
.narration-content {
 display: flex;
 gap: 60px;
}
.music-image,
.narration-image {
 flex: 1;
}
.music-info,
.narration-content > .comment-card {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.music-artist {
 font-size: clamp(2.6rem, 3.2vw, 4rem);
 font-weight: 700;
 color: var(--primary-color);
 margin-bottom: 16px;
}
.music-title {
 font-size: clamp(2.6rem, 3.2vw, 4rem);
 font-weight: 700;
 line-height: 1.2em;
 margin-bottom: 24px;
 padding-bottom: 24px;
 font-feature-settings: "palt"1;
 border-bottom: 1px solid var(--border-color);
}
.music-desc {
 line-height: 1.9;
 text-align: justify;
}
.music-content + .music-content {
 margin-top: 80px;
 padding-top: 80px;
 border-top: 1px solid var(--border-color);
}
.music-content + .music-content .music-title {
 font-size: clamp(3.8rem, 3.84vw, 4.8rem);
}
/* Billing */
.billing-section {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 30px;
 margin-bottom: 60px;
}
.billing-section .flag {
 max-width: 240px;
 width: 40%;
 margin: 0 auto 5px;
}
.billing-section .billing {
 max-width: 500px;
 width: 100%;
 margin: 0 auto;
}
.billing-section .roadshow {
 max-width: 180px;
 width: 30%;
 margin: 0 auto;
}
@media (min-width: 913px) {
 .billing-section .flag {
  width: 20%;
 }
 .billing-section .roadshow {
  width: 20%;
 }
}
/* Footer */
.footer {
 padding: 80px 20px 30px;
 background: var(--primary-color) url("../images/band-texture.webp") repeat;
 color: #fff;
}
.footer-sns {
 display: flex;
 justify-content: center;
 gap: 40px;
 margin-bottom: 60px;
}
.footer-sns a {
 font-size: 3rem;
 color: #fff;
}
.footer-bottom {
 max-width: 480px;
 width: 100%;
 margin: auto;
}
/* Mobile Adjustments */
@media (max-width: 912px) {
 .section {
  padding: 60px 0;
 }
 .section-title {
  margin-bottom: 30px;
 }
 .ticket-grid {
  grid-template-columns: 1fr;
  gap: 20px;
 }
 .card-large {
  grid-column: span 1;
 }
 .card-large-content {
  flex-direction: column;
  gap: 20px;
 }
 .card-large-content .ticket-image {
  margin-bottom: 20px;
 }
 .comment-grid {
  grid-template-columns: 1fr;
  gap: 60px;
 }
 .comment-header, .music-role, .music-title, .music-artist {
  text-align: center;
 }
 .music-desc {
  text-align: left;
  text-align: justify;
 }
 .music-content + .music-content {
  padding-top: 0;
  border-top: none;
 }
 .music-title {
  margin-bottom: 20px;
  padding-bottom: 20px;
 }
 .music-artist {
  margin-bottom: 12px;
 }
 .music-content,
 .narration-content {
  flex-direction: column;
  gap: 30px;
 }
 .header {
  padding: 12px 14px;
 }
 .logo a {
  font-size: 1.5rem;
 }
}
/* News */
#news {
 padding: 120px 0;
 width: 86%;
 max-width: 1260px;
 margin: 0 auto;
}
.news {
 display: flex;
 gap: 30px;
 align-items: flex-start;
}
.news-ttl {
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: var(--heading-size);
 line-height: 0.9;
 letter-spacing: -0.02em;
 flex-shrink: 0;
}
.newsbox {
 flex: 1;
 min-width: 0;
}
.article-list {
 list-style: none;
}
.article-list-item {
 border-top: 1px solid var(--gray-color);
}
.article-list-item:last-child {
 border-bottom: 1px solid var(--gray-color);
}
.article-list-item a {
 display: block;
 padding: 22px 0 28px;
 transition: var(--transition-fast);
}
.article-list-item a[href]:hover {
 opacity: 0.65;
}
.article-list-item dl {
 display: flex;
 gap: 40px;
 align-items: baseline;
}
.article-list-item dl dt {
 font-family: var(--font-heading);
 font-weight: 700;
 color: var(--primary-color);
 font-size: clamp(1.4rem, 1.6vw, 1.8rem);
 white-space: nowrap;
 flex-shrink: 0;
 letter-spacing: 0.03em;
}
.article-list-item dl dd {
 color: var(--text-color);
 font-size: clamp(1.5rem, 1.6vw, 1.8rem);
 line-height: 1.8em;
}
.news-more {
 display: flex;
 justify-content: flex-end;
 margin-top: 20px;
}
.news-more .more {
 background: var(--primary-color) url("../images/band-texture.webp") repeat;
 color: #fff;
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: clamp(1.5rem, 1.8vw, 2rem);
 padding: 2px 28px;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 min-height: 40px;
 min-width: 160px;
 transition: var(--transition-fast);
}
.news-more .more:hover {
 background: #4a4a4a;
 color: #fff;
}
@media (max-width: 912px) {
 #news {
  padding: 60px 0;
 }
 .news {
  flex-direction: column;
  gap: 20px;
  align-items: center;
 }
 .news-ttl {
  width: auto;
  text-align: center;
 }
 .newsbox {
  width: 100%;
 }
 .article-list-item a {
  padding: 14px 0 20px;
 }
 .article-list-item dl {
  flex-direction: column;
  gap: 6px;
 }
 .news-more {
  justify-content: center;
 }
}
/* ------------------------------
	バナー
------------------------------ */
.banner-area {
 position: relative;
 padding-top: 30px;
 padding-bottom: 30px;
}
.banner-area a {
 display: block;
}
/* 1st Leg バナー（TOPのMVとNEWSの間）。他作品サイトの横長バナー（370×73）程度に控えめに置く */
.banner-1stleg {
 width: 370px;
 max-width: 86%;
 margin: 0 auto;
 padding: 80px 0 0;
}
.banner-1stleg img {
 display: block;
 width: 100%;
 height: auto;
 transition: opacity 0.3s ease;
}
.banner-1stleg a:hover img {
 opacity: 0.8;
}
/* PCは NEWS 見出し（.news-ttl）と同じ高さにする。見出しの高さ＝文字サイズ×(line-height 0.9＋上下padding 0.24em) */
@media (min-width: 913px) {
 .banner-1stleg {
  width: auto;
  max-width: none;
 }
 .banner-1stleg a {
  width: fit-content;
  margin: 0 auto;
 }
 .banner-1stleg img {
  width: auto;
  height: calc(var(--heading-size) * 1.14);
 }
}
@media (max-width: 912px) {
 .banner-1stleg {
  padding-top: 56px;
 }
}
.ticket-mvtk {
 width: 100%;
 max-width: 1200px;
 list-style: none;
 margin: auto;
}
.ticket-mvtk div {
 margin: auto;
 margin-bottom: 20px;
}
.banner {
 width: 90%;
 max-width: 1200px;
 list-style: none;
 margin: auto;
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 justify-content: center;
}
.banner li {
 max-width: 260px;
 width: 23%;
}
.banner li a {
 display: block;
}
@media screen and (max-width : 812px) {
 .banner {
  gap: 10px;
 }
 .banner li {
  width: 48%;
 }
}

/* ------------------------------
	モーション：奥行きと疾走感 → DDR-006
	向きはMVの帯と同じ「左→右」に揃える
------------------------------ */
main {
 overflow-x: clip; /* 背景の大文字を画面幅で切る（横スクロールを出さない） */
}
/* 奥の層：ボールに見立てた線の円。NEWS〜MUSIC の背面に置き、script.js でスクロールに慣性つきで追従させる
   どの円も必ず左右どちらかが画面外にはみ出す（はみ出し幅＞横移動＋縮小分）。上下はエリア内に収め、円を欠けさせない（script.js で制限） */
.ball-area {
 position: relative;
 isolation: isolate;
}
.ball-lines {
 position: absolute;
 inset: 0;
 z-index: -1;
 pointer-events: none; /* 横のはみ出しは main の overflow-x: clip で切る */
}
.ball-line {
 position: absolute;
 display: block;
 height: auto;
 aspect-ratio: 1;
 overflow: visible;
 will-change: transform;
}
.ball-line circle {
 fill: none;
 stroke: rgba(29, 61, 135, 0.2);
 stroke-width: 1px;
 vector-effect: non-scaling-stroke;
}
.ball-line--1 { width: 70vw; top: 0; left: -24vw; }
.ball-line--2 { width: 56vw; top: 28%; right: -14vw; } /* 1つ目と横並びに見えないよう下げる */
.ball-line--3 { width: 46vw; top: 44%; left: -14vw; }
.ball-line--4 { width: 62vw; top: 64%; right: -12vw; }
/* セクション下の罫線は左から引く */
.has-line {
 position: relative;
}
.has-line::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 1px;
 background: var(--border-color);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 1.6s cubic-bezier(0.77, 0, 0.18, 1) 0.1s;
}
/* 線が画面に入ったときに引く（.is-lined は script.js §2.5。セクションの表示演出とは別に判定する） */
.has-line.is-lined::after {
 transform: scaleX(1);
}
/* 写真：紺の帯が左から開き、帯が右へ抜けて写真が現れる。奥に帯色の板をずらして重ねる */
.photo-reveal {
 position: relative;
 isolation: isolate;
}
.photo-reveal::before {
 content: "";
 position: absolute;
 z-index: -1;
 inset: 28px -28px -28px 28px;
 background: var(--primary-color) url("../images/band-texture.webp") repeat;
 opacity: 0;
 transform: translate3d(-28px, -28px, 0);
 transition: opacity 1s ease-out 1.5s, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1.5s;
}
.reveal.active .photo-reveal::before {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}
.photo-frame {
 position: relative;
 overflow: hidden;
 clip-path: inset(0 100% 0 0);
 transition: clip-path 1s cubic-bezier(0.77, 0, 0.18, 1) 0.35s;
}
.photo-frame::after {
 content: "";
 position: absolute;
 inset: 0;
 background: var(--primary-color) url("../images/band-texture.webp") repeat;
 transform-origin: right center;
 transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1) 1.3s;
}
.reveal.active .photo-frame {
 clip-path: inset(0 0 0 0);
}
.reveal.active .photo-frame::after {
 transform: scaleX(0);
}
.photo-parallax {
 will-change: transform;
}
.photo-parallax img {
 width: 100%;
 transform: scale(1.18);
 transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1) 1.3s;
}
.reveal.active .photo-parallax img {
 transform: scale(1.08); /* 視差（上下±3.5%）で縁が出ない余白を残す */
}
.photo-credit {
 position: absolute;
 right: 10px;
 bottom: 6px;
 z-index: 1;
 font-size: 1rem;
 line-height: 1.4;
 letter-spacing: 0.02em;
 color: rgba(255, 255, 255, 0.85);
 text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
 opacity: 0;
 transition: opacity 0.8s ease-out 2.2s;
}
.reveal.active .photo-credit {
 opacity: 1;
}
/* 長文の最終行に1〜2字だけ残る改行を避ける */
.comment-body p,
.music-desc {
 text-wrap: pretty;
}
/* NARRATION・COMMENT の人物写真は縦位置なので幅を絞る。文が長い行でも写真の枠（奥の帯の板）が縦に伸びないよう上揃え */
.narration-image--portrait {
 flex: 0 0 min(36%, 440px);
 align-self: flex-start;
}
/* クレジット（©JFA）が画像の端に焼き込まれた写真は、拡大・視差で端を切らない（最終的に等倍で全体を見せる） */
.photo-reveal--credit .photo-parallax img {
 transform: scale(1.1);
}
.reveal.active .photo-reveal--credit .photo-parallax img {
 transform: scale(1);
}
/* COMMENT は NARRATION と同じ「写真＋文」の行を人物ごとに重ね、写真の左右を交互にする */
.comment-row + .comment-row {
 margin-top: 120px;
}
@media (min-width: 913px) {
 .narration-content--photo-left {
  flex-direction: row;
 }
 /* COMMENT の文は写真の上端から始める（NARRATION は縦中央のまま） */
 .comment-row > .comment-card {
  justify-content: flex-start;
 }
}
/* COMMENT の本文：写真の高さを超える分は隠して下端をぼかし、「Read MORE」で開く（高さは script.js §10） */
.comment-row .comment-body {
 position: relative;
 overflow: hidden;
}
/* 表示時の演出（opacity・transform）に、開閉の max-height を足す（片方の transition 指定で上書きされないよう1か所にまとめる） */
.reveal.comment-row .comment-card > .comment-body {
 transition: opacity 1.2s ease-out var(--td, 0.9s), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--td, 0.9s), max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
@media (prefers-reduced-motion: reduce) {
 .reveal.comment-row .comment-card > .comment-body {
  transition: none;
 }
}
.comment-row .comment-body::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 4em;
 background: linear-gradient(rgba(255, 255, 255, 0), #fff);
 opacity: 0;
 transition: opacity 0.3s ease;
 pointer-events: none;
}
.comment-row .comment-body.is-clamped::after {
 opacity: 1;
}
.comment-more .more {
 border: 0;
 cursor: pointer;
}
/* .news-more の display: flex が hidden 属性より優先されるため、隠すときは明示する */
.comment-more[hidden] {
 display: none;
}
/* PCはタブを切り替えても位置が動かないよう、COMMENT と PROFILE を同じマスに重ねて高さを長い方にそろえる（縦中央揃えのずれ防止） */
@media (min-width: 913px) {
 .narration-section .narration-panels {
  display: grid;
 }
 .narration-section .narration-panel,
 .narration-section .narration-panel:not(.is-active) {
  grid-area: 1 / 1;
  position: static;
 }
}
/* 文字：肩書き・名前は下から差し上がり、本文はあとから左→右へ */
.reveal .comment-role,
.reveal .comment-name,
.reveal .music-role,
.reveal .music-title,
.reveal .music-artist {
 clip-path: inset(100% -0.2em -0.3em -0.2em);
 transform: translate3d(0, 0.6em, 0);
 transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
 transition-delay: var(--td, 0.5s);
}
.reveal .comment-name,
.reveal .music-title {
 --td: 0.6s;
}
.reveal .music-artist {
 --td: 0.75s;
}
.reveal.active .comment-role,
.reveal.active .comment-name,
.reveal.active .music-role,
.reveal.active .music-title,
.reveal.active .music-artist {
 clip-path: inset(-0.3em -0.2em -0.3em -0.2em);
 transform: translate3d(0, 0, 0);
}
.reveal .comment-card > .comment-body,
.reveal .narration-tabs,
.reveal .narration-panels,
.reveal .music-desc {
 opacity: 0;
 transform: translate3d(-24px, 0, 0);
 transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
 transition-delay: var(--td, 0.9s);
}
.reveal .narration-panels,
.reveal .music-desc {
 --td: 1s;
}
.reveal.active .comment-card > .comment-body,
.reveal.active .narration-tabs,
.reveal.active .narration-panels,
.reveal.active .music-desc {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}
@media (max-width: 912px) {
 .ball-line--1 { width: 120vw; left: -55vw; }
 .ball-line--2 { width: 100vw; right: -50vw; }
 .ball-line--3 { width: 90vw; left: -45vw; }
 .ball-line--4 { width: 110vw; right: -55vw; }
 .photo-reveal::before {
  inset: 14px -14px -14px 14px;
  transform: translate3d(-14px, -14px, 0);
 }
 .comment-row + .comment-row {
  margin-top: 60px;
 }
 .narration-image--portrait {
  flex: none;
  width: 72%;
  max-width: 360px;
  margin: 0 auto;
 }
}
@media (prefers-reduced-motion: reduce) {
 .has-line::after,
 .comment-grid .comment-card:first-of-type::after,
 .photo-reveal::before,
 .photo-parallax img,
 .photo-credit,
 .reveal .comment-role,
 .reveal .comment-name,
 .reveal .music-role,
 .reveal .music-title,
 .reveal .music-artist,
 .reveal .comment-card > .comment-body,
 .reveal .narration-tabs,
 .reveal .narration-panels,
 .reveal .music-desc {
  transition: none;
  transform: none;
  clip-path: none;
  opacity: 1;
 }
 .photo-frame {
  clip-path: none;
  transition: none;
 }
 .photo-frame::after {
  display: none;
 }
}
/* MENU からの移動で演出を再生するとき、未表示へ戻す一瞬だけ transition・animation を止める（script.js §4.9）
   各演出の指定（クラス2〜4個）より強くするため :not(#_) で ID 1個分の詳細度を足している（important 指定は使わない） */
.is-replay:not(#_),
.is-replay:not(#_)::before,
.is-replay:not(#_)::after,
.is-replay *:not(#_),
.is-replay *:not(#_)::before,
.is-replay *:not(#_)::after {
 transition: none;
 animation: none;
}