@charset "UTF-8";

/* ================================================================
   JR東海 × BanG Dream! Our Notes  — あなたと紡ぐ はじまりの旅
   ベース：/oshi-tabi/bang-dream-yumemita/ の構成
   テイスト：https://bang-dream-on.bushimo.jp/（淡いグレー × ネイビー〜モーヴのグラデ、
             五線譜／グリッチ風のテープ、Josefin Sans）
   ================================================================ */

/* --------------------------------
	変数
-------------------------------- */
:root {
  /* フォント */
  --f-jp:     "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --f-head:   "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --f-en:     "Josefin Sans", sans-serif;
  --f-script: "Caveat", "Zen Kaku Gothic New", cursive;

  /* Our Notes カラー（公式サイト準拠） */
  --navy:   #131b2a;
  --deep:   #211f41;
  --violet: #413e70;
  --lav:    #ac96c6;
  --mauve:  #ac8ba1;
  --pale:   #e5e9ec;
  --gray:   #f4f4f4;
  --pink:   #cf7bb3;
  --blue:   #6273d6;
  --sky:    #75abdd;
  --mint:   #c7e5da;
  --text:   #26263a;
  --text-sub: #6b6b7e;
  --red:    #d9456f;

  /* バンドカラー */
  --millsage: #aa22ee;
  --ikka:     #ffaa33;

  /* グラデ */
  --grad-main: linear-gradient(100deg, var(--deep) 0%, var(--violet) 45%, var(--mauve) 100%);
  --grad-soft: linear-gradient(100deg, var(--pale) 0%, var(--mauve) 100%);
  --grad-blue: linear-gradient(100deg, #4454b7 0%, #62b4cc 100%);

  --card-radius: 8px;
  --shadow: 0 12px 40px rgba(19, 27, 42, .08);
}

/* --------------------------------
	基本
-------------------------------- */
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--f-jp);
  font-weight: 500;
  color: var(--text);
  background-color: var(--gray);
  line-height: 1.8;
  font-size: 15px;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .04em;
  font-feature-settings: "palt";
}
p, span, ul, li, dl, dt, dd {
  font-family: var(--f-jp);
}

/* /oshi-tabi/css/common.css のリセット（line-height:normal）を打ち消し、
   行間を body から継承させる。個別指定のあるクラスはそちらが優先される */
div, p, span, ul, ol, li, dl, dt, dd, h2, h3, h4 {
  line-height: inherit;
}
h2, h3, h4 { font-family: var(--f-head); }

img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--violet); }
a:hover { color: var(--blue); }

.pc { display: block; }
.sp { display: none; }
@media (max-width: 576px) {
  .pc { display: none; }
  .sp { display: block; }
}
br.pc { display: inline; }
br.sp { display: none; }
@media (max-width: 576px) {
  br.pc { display: none; }
  br.sp { display: inline; }
}

/* 欧文・数字は Josefin Sans に統一 */
.en, .content-head__num, .menu-card__num, .sec-tit__en,
.period-strip__date, .tbd-badge, .band-name, .sub-tit small, .benefit-label small {
  font-family: var(--f-en);
}

.Main__wrap {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  background: transparent;
  overflow: hidden;
}
@media (max-width: 576px) {
  .Main__wrap { max-width: 100%; }
}

/* --------------------------------
	共通ヘッダー（/oshi-tabi/_assets/_module/site_header.js）の高さ分を確保
	※ヘッダーは position:fixed / height:90px（common.css）
-------------------------------- */
.content_first-view { margin-top: 90px; }
@media (max-width: 768px) {
  .content_first-view { margin-top: 66px; }
}

/* --------------------------------
	背景：グラデ + 斜めの五線譜 + グリッチバー
-------------------------------- */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(172,150,198,.22) 0%, transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(117,171,221,.18) 0%, transparent 60%),
    linear-gradient(180deg, #f8f8fa 0%, #eef0f4 50%, #e5e9ec 100%);
  overflow: hidden;
}
/* 五線譜（5本線のグループを繰り返し、わずかに傾ける） */
.bg-stage::before {
  content: "";
  position: absolute;
  top: -30%; left: -30%;
  width: 160%; height: 160%;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(65,62,112,.10) 0 1px, transparent 1px 9px,
    rgba(65,62,112,.10) 9px 10px, transparent 10px 18px,
    rgba(65,62,112,.10) 18px 19px, transparent 19px 27px,
    rgba(65,62,112,.10) 27px 28px, transparent 28px 36px,
    rgba(65,62,112,.10) 36px 37px, transparent 37px 240px
  );
  transform: rotate(-7deg);
  animation: staffDrift 60s linear infinite;
  pointer-events: none;
}
/* 右上に大きなグラデの帯（ロゴの「テープ」モチーフ） */
.bg-stage::after {
  content: "";
  position: absolute;
  top: 12vh; right: -20vw;
  width: 70vw; height: 22vh;
  background: var(--grad-main);
  opacity: .06;
  transform: skewY(-7deg);
  pointer-events: none;
}
@keyframes staffDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 240px; }
}

.bg-glitch {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-glitch .bar {
  position: absolute;
  left: -30vw;
  height: 4px;
  width: 120px;
  border-radius: 1px;
  background: currentColor;
  opacity: .22;
  animation: glitchSlide 22s linear infinite;
  will-change: transform, opacity;
}
.bg-glitch .bar.bar--thin  { height: 2px; }
.bg-glitch .bar.bar--thick { height: 10px; opacity: .14; }
.bg-glitch .bar.bar--dot   { width: 6px; height: 6px; border-radius: 50%; opacity: .5; }
@keyframes glitchSlide {
  0%   { transform: translateX(0) ; opacity: 0; }
  5%   { opacity: var(--o, .22); }
  48%  { transform: translateX(70vw); }
  50%  { transform: translateX(72vw) scaleX(.6); }
  52%  { transform: translateX(74vw); }
  95%  { opacity: var(--o, .22); }
  100% { transform: translateX(160vw); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-stage::before, .bg-glitch .bar { animation: none; }
}

/* --------------------------------
	KV
-------------------------------- */
.kv img {
  display: block;
  width: 100%;
  height: auto;
}
.kv-panel {
  position: relative;
  margin: 2rem auto 0;     /* PCはKV内の権利表記を隠さないよう下に配置 */
  padding: 0 1.2rem;
  max-width: 860px;
  z-index: 2;
}
.kv-panel__inner {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  border-radius: 6px;
  padding: 1.3rem 2rem;
  position: relative;
  overflow: hidden;
}
/* 左端のグラデ・テープ */
.kv-panel__inner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--grad-main);
}
.period-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  flex-wrap: wrap;
}
.period-strip__label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  background: var(--navy);
  padding: .6rem 1.4rem .55rem;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  letter-spacing: .12em;
}
.period-strip__label small {
  font-family: var(--f-en);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: .2em;
  margin-top: .25rem;
  opacity: .85;
  text-transform: uppercase;
}
.period-strip__date {
  color: var(--deep);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: .06em;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;             /* 狭幅では「2026.11.30 Mon.」/「– 2027.2.28 Sun.」で折り返す */
  gap: .2rem;
  position: relative;
  top: .4em;                   /* 数字はディセンダ分だけ上寄りに見えるため下げて上下を均等に */
}
.period-strip__d {
  display: inline-flex;
  align-items: baseline;
  gap: .2rem;
  white-space: nowrap;
}
.period-strip__date span,
.period-strip__date b,
.period-strip__date small {
  font-family: var(--f-en);   /* 基本の span 指定（Noto）を打ち消し、数字・欧文を Josefin に統一 */
}
.period-strip__date b {
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
}
.period-strip__date small {
  font-size: 1.05rem;
  font-weight: 400;
  margin-right: .3rem;
  letter-spacing: .1em;
}
.period-strip__y { font-size: 1.35rem; font-weight: 400; }
.period-strip__dash { margin: 0 .5rem; color: var(--mauve); font-weight: 300; font-size: 2rem; }
.kv-panel__copy {
  font-family: var(--f-en);
  font-size: .65rem;
  letter-spacing: .12em;
  color: var(--text-sub);
  text-align: center;
  margin: .6rem 0 0;
}
@media (max-width: 576px) {
  .kv-panel { margin-top: .75rem; padding: 0 .9rem; }
  .kv-panel__inner { padding: 1rem 1rem .8rem 1.3rem; }
  .period-strip { gap: .8rem 1rem; }
  .period-strip__label { font-size: 1.05rem; padding: .4rem 1rem .35rem; }
  .period-strip__label small { font-size: .62rem; }
  .period-strip__date { font-size: 1.05rem; }
  .period-strip__date b { font-size: 2.1rem; }
  .period-strip__date small { font-size: .85rem; }
  .period-strip__y { font-size: 1rem; }
  .period-strip__dash { font-size: 1.4rem; margin: 0 .3rem; }
}
@media (max-width: 400px) {
  .period-strip__date { font-size: clamp(.85rem, 4.4vw, 1.05rem); letter-spacing: .03em; }
  .period-strip__date b { font-size: clamp(1.4rem, 7.4vw, 1.8rem); }
  .period-strip__y { font-size: clamp(.8rem, 4.2vw, 1rem); }
  .period-strip__date small { font-size: clamp(.7rem, 3.6vw, .85rem); margin-right: .15rem; }
  .period-strip__dash { font-size: clamp(1rem, 5.5vw, 1.4rem); margin: 0 .2rem; }
  .period-strip__date small { margin-right: .15rem; }
}

/* --------------------------------
	セクション見出し（CONTENTS）
-------------------------------- */
.sec-tit {
  text-align: center;
  margin: 0 auto 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.sec-tit__en {
  font-weight: 300;
  font-size: 3.2rem;
  letter-spacing: .12em;
  color: var(--deep);
  text-transform: none;
  position: relative;
  padding: 0 .6rem;
}
/* 「Contents」の後ろにテープ */
.sec-tit__en::before {
  content: "";
  position: absolute;
  left: -.6rem; right: -.6rem; top: 48%;
  height: .9rem;
  background: var(--grad-main);
  opacity: .16;
  transform: skewX(-24deg);
  z-index: -1;
}
.sec-tit__jp {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--mauve);
  margin-top: .7rem;
  padding-left: .3em;
}
@media (max-width: 576px) {
  .sec-tit__en { font-size: 2.4rem; }
}

/* --------------------------------
	CONTENTS 一覧
-------------------------------- */
.content_list {
  position: relative;
  padding: 6rem 1.6rem 2.5rem;
}
.contents-menu {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1160px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
@media (max-width: 1200px) {
  .contents-menu { grid-template-columns: 1fr; grid-auto-rows: 1fr; max-width: 600px; gap: .9rem; }   /* 1カラム時は3枚を等高に */
}
.menu-card {
  position: relative;
  display: grid;
  /* 長いタイトルが矢印列をカード外へ押し出さないよう、中央列の縮小を許可 */
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "num txt arrow"
    "num script arrow";
  grid-template-rows: max-content max-content;
  align-items: center;
  align-content: center;
  column-gap: 1rem;
  background: #fff;
  border: 1px solid var(--pale);
  border-radius: var(--card-radius);
  padding: 1.1rem 1.2rem 1rem 1.1rem;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 6px 24px rgba(19,27,42,.06);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
}
/* 左肩のテープ */
.menu-card::before {
  content: "";
  position: absolute;
  left: -14px; top: 0;
  width: 10px; height: 100%;
  background: var(--grad-main);
  transform: skewX(-10deg);
  transform-origin: top;
  transition: left .25s ease;
}
.menu-card::after {
  content: "";
  position: absolute;
  right: -40px; bottom: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(172,150,198,.25), transparent 70%);
}
.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(19,27,42,.12);
  border-color: rgba(172,139,161,.5);
  color: var(--text);
}
.menu-card:hover::before { left: -4px; }
.menu-card__num {
  grid-area: num;
  font-weight: 300;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--deep);
  letter-spacing: .02em;
  padding-top: .2rem;
}
.menu-card__num i { font-style: normal; color: var(--pink); }
.menu-card__txt {
  grid-area: txt;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.menu-card__txt small {
  font-size: .72rem;
  color: var(--text-sub);
  letter-spacing: .08em;
  font-weight: 500;
}
.menu-card__txt strong {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--navy);
  margin-top: .15rem;
  white-space: nowrap;
}
.menu-card__sp-line { font-family: inherit; }
@media (max-width: 400px) {
  .menu-card__txt strong { white-space: normal; }
}
.menu-card__script {
  grid-area: script;
  font-family: var(--f-script);
  font-size: 1.05rem;
  color: var(--mauve);
  line-height: 1.2;
  margin-top: .25rem;
  letter-spacing: .02em;
}
.menu-card__arrow {
  grid-area: arrow;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--pale);
  color: var(--violet);
  font-size: .85rem;
  transition: background .25s, color .25s, border-color .25s;
}
.menu-card:hover .menu-card__arrow {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.menu-card--c03::before { background: var(--grad-blue); }
@media (max-width: 576px) {
  .menu-card { padding: .9rem 1rem .85rem .95rem; column-gap: .8rem; }
  .menu-card__num { font-size: 2.1rem; }
  .menu-card__txt strong { font-size: 1.02rem; }
  .menu-card__sp-line { display: block; }
  .menu-card__script { font-size: .95rem; }
}
@media (min-width: 1201px) {
  .menu-card__sp-line { display: block; }
}

/* --------------------------------
	コンテンツセクション共通
-------------------------------- */
.main-content {
  padding-bottom: 7rem;            /* 03 とフッターの間の余白 */
}
.content-section {
  position: relative;
  margin: 6.5rem auto 0;           /* カード間（見出し「0X.」の上）の余白 */
  padding: 0 1.2rem;
  max-width: 560px;
}
.content-section:first-child { margin-top: 4.5rem; }

.content-card {
  position: relative;
  background: #fff;
  border-radius: var(--card-radius);
  border: 1px solid var(--pale);
  box-shadow: var(--shadow);
  padding: 2.6rem 1.4rem 1.8rem;
  margin: 2.2rem 0 0;
}
/* 右上の重ねテープ（グリッチ風） */
.content-card::before,
.content-card::after {
  content: "";
  position: absolute;
  right: -6px;
  height: 6px;
  background: var(--grad-main);
  transform: skewX(-30deg);
  opacity: .9;
}
.content-card::before { top: 18px; width: 70px; }
.content-card::after  { top: 28px; width: 34px; right: 14px; opacity: .55; }

/* 見出し */
.content-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num tit"
    "num script";
  column-gap: .9rem;
  align-items: center;
  margin: -3.35rem 0 1.1rem;   /* 見出しをカード上辺から少し出す */
  position: relative;
  z-index: 2;
}
.content-head__num {
  grid-area: num;
  font-weight: 300;
  font-size: 4.2rem;
  line-height: .9;
  color: var(--deep);
  background: #fff;
  padding: .2rem .5rem .2rem .2rem;
  align-self: end;
}
.content-head__num i { font-style: normal; color: var(--pink); }
.content-head__tit {
  grid-area: tit;
  position: relative;
  color: #fff;
  background: var(--grad-main);
  padding: 1.1rem 1.2rem 1.1rem 1rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  align-self: end;
}
.content-head__tit small {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  font-weight: 500;
  opacity: .9;
  line-height: 1.3;
}
.content-head__tit h3 {
  margin: .1rem 0 0;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
}
.content-head__script {
  grid-area: script;
  font-family: var(--f-script);
  font-size: 1.2rem;
  color: var(--mauve);
  padding-left: 1rem;
  line-height: 1.3;
  margin-top: .2rem;
}
@media (max-width: 576px) {
  .main-content { padding-bottom: 5rem; }
  .content-section { margin-top: 5.5rem; }
  .content-section:first-child { margin-top: 3.5rem; }
  .content_list { padding: 4.5rem 1.2rem 2rem; }
  .content-card { padding: 2.3rem 1rem 1.5rem; }
  .content-head { column-gap: .6rem; margin: -2.9rem 0 .9rem; }
  .content-head__num { font-size: 3.4rem; }
  .content-head__tit { padding: 1rem 1rem 1rem .8rem; }
  .content-head__tit h3 { font-size: 1.1rem; }
  .content-head__script { font-size: 1.05rem; padding-left: .8rem; }
}
@media (max-width: 400px) {
  .content-head__tit h3 { font-size: 1rem; letter-spacing: .02em; }
}

/* 03 は小見出しが無いため、帯の高さを 01/02（小見出し+タイトル）と揃える */
.content-section--c03 .content-head__tit { padding: 1.62rem 1.2rem 1.62rem 1rem; }
.content-section--c03 .content-head__tit h3 { margin-top: 0; }
@media (max-width: 576px) {
  .content-section--c03 .content-head__tit { padding: 1.53rem 1rem 1.53rem .8rem; }
}

/* セクション別アクセント */
.content-section--c02 .content-head__tit,
.content-section--c02 .content-card::before,
.content-section--c02 .content-card::after { background: linear-gradient(100deg, var(--deep) 0%, #5b4e8a 50%, var(--pink) 100%); }
.content-section--c03 .content-head__tit,
.content-section--c03 .content-card::before,
.content-section--c03 .content-card::after { background: var(--grad-blue); }

/* 本文 */
.lead-txt {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.9;
  margin: 0 0 1.4rem;
  color: var(--navy);
}
@media (max-width: 576px) {
  .lead-txt { text-align: left; font-size: .95rem; }
}

/* --------------------------------
	バンドブロック・メンバー
-------------------------------- */
.band-block {
  position: relative;
  border: 1px solid var(--pale);
  border-radius: 6px;
  padding: 1rem .9rem .9rem;
  margin-top: 1rem;
  background: linear-gradient(180deg, #fff 0%, #f8f8fb 100%);
}
.band-block__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .9rem;
  flex-wrap: wrap;
}
.dir-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #fff;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  padding: .3rem .8rem .3rem .7rem;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.dir-tag i { font-size: .7rem; }
.band-name {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--deep);
  letter-spacing: .04em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}
.band-block--millsage .dir-tag { background: linear-gradient(100deg, #6a1fb0, var(--millsage)); }
.band-block--ikka .dir-tag { background: linear-gradient(100deg, #e07a1e, var(--ikka)); }
.band-block--millsage .member-thumb { --ring: var(--millsage); }
.band-block--ikka .member-thumb { --ring: var(--ikka); }

.member-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));   /* パート表記の幅で列が広がらないように */
  gap: .9rem 1.2rem;
}
.member-list li {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.member-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, #fff 0%, var(--pale) 100%);
  position: relative;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ring, var(--lav));
}
.member-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.member-name {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: .6rem;
  line-height: 1.3;
  letter-spacing: 0;
  word-break: keep-all;      /* 姓と名の間（スペース）でのみ折り返す */
  overflow-wrap: normal;
}
@media (max-width: 576px) {
  .member-list { gap: .8rem .9rem; }
  .member-name { font-size: .72rem; }
  .band-name { font-size: 1.1rem; }
}
@media (max-width: 380px) {
  .member-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem .75rem; }
  .member-name { font-size: .66rem; letter-spacing: -.02em; }
}

/* --------------------------------
	実施期間 行
-------------------------------- */
.info-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.4rem;
  padding: .9rem 1rem;
  border-top: 1px solid var(--pale);
  border-bottom: 1px solid var(--pale);
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(229,233,236,.5) 6px 7px);
}
.info-label {
  flex-shrink: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  color: #fff;
  background: var(--deep);
  padding: .35rem .9rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.info-value {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  letter-spacing: .02em;
}
@media (max-width: 576px) {
  .info-row { padding: .8rem .6rem; }
  .info-value { font-size: .95rem; line-height: 1.5; }
}

/* --------------------------------
	メインCTAボタン
-------------------------------- */
.main-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--grad-main);
  color: #fff;
  font-weight: 700;
  padding: 1rem 1.2rem 1rem 1.5rem;
  border-radius: 4px;
  margin: 1.6rem auto 0;
  text-decoration: none;
  font-size: 1.15rem;
  line-height: 1.45;
  letter-spacing: .04em;
  font-family: var(--f-head);
  position: relative;
  box-shadow: 0 8px 24px rgba(33,31,65,.28);
  transition: transform .2s, box-shadow .2s;
  overflow: hidden;
}
.main-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: rgba(255,255,255,.35);
}
.main-btn .main-btn__icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--deep);
  font-size: 1.3rem;
  margin-left: 1rem;
}
.main-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(33,31,65,.34);
}
.content-section--c03 .main-btn { background: var(--grad-blue); }
@media (max-width: 576px) {
  .main-btn { font-size: 1rem; padding: .8rem .9rem .8rem 1.2rem; }
  .main-btn .main-btn__icon { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* Coming Soon / 終了 オーバーレイ */
.btn-common { position: relative; }
.btn-common.coming-soon {
  pointer-events: none;
  box-shadow: none;
}
.btn-common.coming-soon::after {
  content: "Coming Soon";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(19,27,42,.78);
  backdrop-filter: blur(2px);
  color: #fff;
  font-family: var(--f-en);
  font-weight: 300;
  font-size: 1.7rem;
  letter-spacing: .28em;
  padding-left: .28em;
  z-index: 2;
  border-radius: 4px;
}
.btn-common.coming-soon.end::after {
  content: "終了しました";
  font-family: var(--f-head);
  font-weight: 700;
  letter-spacing: .15em;
  font-size: 1.3rem;
}
@media (max-width: 576px) {
  .btn-common.coming-soon::after { font-size: 1.35rem; }
}

/* --------------------------------
	注意書き
-------------------------------- */
.notice {
  font-size: .76rem;
  line-height: 1.75;
  margin: 1.2rem 0 0;
  color: var(--text-sub);
  letter-spacing: .02em;
}
.notice p {
  margin: 0 0 .3rem;
  text-indent: -.8em;
  padding-left: .8em;
  font-weight: 500;
}
.notice .notice--red { color: var(--red); font-weight: 700; }
.notice .notice--black { color: inherit; font-weight: inherit; }
.notice a { color: var(--blue); text-decoration: underline; }
.notice--tight { margin-top: .6rem; }

/* 再生方法・引換方法（審査指示によりアコーディオン外へ表示） */
.guide-block {
  margin-top: 1.4rem;
  padding: .2rem 1rem 1rem;
  font-size: .8rem;
  line-height: 1.75;
  color: var(--text);
  border: 1px solid var(--pale);
  border-radius: 6px;
  background: #f8f8fb;
}
.guide-block h4 {
  font-size: .9rem;
  color: var(--navy);
  font-weight: 700;
  border-left: 3px solid var(--mauve);
  padding-left: .55rem;
  margin: 1rem 0 .5rem;
  letter-spacing: .06em;
}
.guide-block ul {
  list-style: none;
  padding: 0;
  margin: 0 0 .8rem;
}
.guide-block li {
  padding-left: 1.4em;
  text-indent: -1.4em;
  margin-bottom: .4rem;
  font-weight: 500;
}
.guide-block--redeem .num-list {
  list-style: decimal;
  list-style-position: outside;
  padding-left: 1.6rem;
  margin: 0 0 .8rem;
}
.guide-block--redeem .num-list li {
  list-style: decimal;
  padding-left: 0;
  text-indent: 0;
}

/* --------------------------------
	アコーディオン 注意事項
-------------------------------- */
.accordion {
  margin-top: 1.4rem;
  border: 1px solid var(--pale);
  border-radius: 6px;
  background: #f8f8fb;
  overflow: hidden;
}
.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  cursor: pointer;
  color: var(--deep);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .08em;
  position: relative;
  user-select: none;
}
.accordion__head::before {
  content: "";
  width: 4px; height: 1.1em;
  background: var(--grad-main);
  margin-right: .7rem;
  transform: skewX(-12deg);
}
.accordion__head span:first-of-type { flex: 1; }
.accordion__icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--deep);
  position: relative;
  flex-shrink: 0;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform .25s;
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__body {
  display: none;
  padding: .2rem 1rem 1rem;
  font-size: .8rem;
  line-height: 1.75;
  color: var(--text);
  border-top: 1px solid var(--pale);
}
.accordion__body h4 {
  font-size: .9rem;
  color: var(--navy);
  font-weight: 700;
  border-left: 3px solid var(--mauve);
  padding-left: .55rem;
  margin: 1rem 0 .5rem;
  letter-spacing: .06em;
}
.accordion__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 .8rem;
}
.accordion__body ul li {
  padding-left: 1.4em;
  text-indent: -1.4em;
  margin-bottom: .4rem;
  font-weight: 500;
}
.accordion__body .num-list li {
  padding-left: 2.2em;
  text-indent: -2.2em;
}
.accordion__body a { color: var(--blue); }
.ext-link {
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ext-link b {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.ext-link:hover b { color: var(--violet); }
/* 外部リンクアイコン
   Font Awesome 既定の display:inline-block だと字送りが崩れて文字に重なるため、
   inline に戻して通常の文字と同じ送りで並べる */
.ext-link .ext-link__icon {
  --fa-display: inline;      /* Font Awesome 既定の inline-block を打ち消す */
  display: inline;
  width: auto;
  font-size: .78em;
  line-height: 1;
  margin: 0 .3em 0 .65em;
  text-align: initial;
  text-decoration: none;
  font-style: normal;
  vertical-align: baseline;
}

.accordion.is-open .accordion__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.accordion.is-open .accordion__body { display: block; }

/* --------------------------------
	02 キャスト
-------------------------------- */
.sub-tit {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 1.4rem 0 .9rem;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: .1em;
  line-height: 1;
}
.sub-tit::before {
  content: "";
  width: 10px; height: 1em;
  background: var(--grad-main);
  transform: skewX(-18deg);
  align-self: center;
}
.sub-tit small {
  font-family: var(--f-script);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--mauve);
  letter-spacing: .02em;
}
.cast-coming-soon {
  display: none;
  min-height: 104px;
  align-content: center;
  justify-items: center;
  gap: .15rem;
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pale);
  border-radius: 6px;
  background: linear-gradient(180deg, #fff 0%, #f8f8fb 100%);
  color: var(--deep);
}
.cast-coming-soon::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--grad-main);
}
.cast-coming-soon span {
  font-family: var(--f-en);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-indent: .12em;
}
.cast-coming-soon small {
  font-family: var(--f-head);
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-sub);
  letter-spacing: .08em;
  text-indent: .08em;
}
.cast-area--coming-soon .cast-coming-soon { display: grid; }
.cast-area--coming-soon .cast-list { display: none; }
.cast-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 1rem;
}
.cast-list li { width: calc((100% - 2rem) / 3); }
.cast-list li {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cast-photo {
  width: 100%;
  max-width: 128px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pale);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--lav);
}
.cast-photo img { width: 100%; height: 100%; object-fit: cover; }
.cast-photo--tbd {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(-45deg, rgba(172,150,198,.12) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #f6f5fa, #eceaf3);
  color: var(--mauve);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  border: 1px dashed var(--lav);
  box-shadow: none;
}
.cast-role {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 2.8em;        /* 役名が2行になっても氏名の高さを揃える */
  font-size: .68rem;
  color: var(--text-sub);
  margin-top: .6rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .02em;
}
.cast-name {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: .1rem;
  line-height: 1.3;
}
.cast-name--tbd { min-height: 1.3em; }
@media (max-width: 576px) {
  .cast-coming-soon { min-height: 92px; }
  .cast-coming-soon span { font-size: 1.3rem; }
  .cast-list { gap: 1rem .5rem; }
  .cast-photo { max-width: 104px; }
  .cast-name { font-size: .88rem; }
  .cast-role { font-size: .62rem; }
}

/* --------------------------------
	03 乗車特典
-------------------------------- */
.benefit-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: max-content;
  max-width: 100%;
  margin: 1.6rem auto 1rem;
  padding: .5rem 1.4rem .5rem 1.1rem;
  color: #fff;
  background: var(--grad-blue);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .1em;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.benefit-label small {
  font-family: var(--f-script);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: .95;
  line-height: 1;
}
.benefit-label--second { margin-top: 2.6rem; }
.benefit-tit {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.7;
  color: var(--navy);
}
@media (max-width: 576px) {
  .benefit-tit { text-align: left; font-size: .95rem; }
}

.goods-visual, .wallpaper-visual {
  text-align: center;
  margin: 1rem 0;
}
.goods-visual__img, .wallpaper-visual__img {
  width: 82%;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.wallpaper-visual__img { aspect-ratio: 16 / 9; width: 100%; }
.goods-visual__img--tbd, .wallpaper-visual__img--tbd {
  background:
    linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.1)),
    repeating-linear-gradient(-45deg, rgba(65,62,112,.06) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #eef0f5, #e2e6ee);
  border: 1px solid var(--pale);
}
.tbd-badge {
  position: absolute;
  top: 24px; left: -46px;
  width: 220px;
  text-align: center;
  transform: rotate(-30deg);
  background: var(--navy);
  color: #fff;
  font-size: .68rem;
  letter-spacing: .22em;
  padding: .32rem 0;
  text-indent: .22em;        /* letter-spacing 分の中央ずれを補正 */
  font-weight: 400;
  text-transform: uppercase;
}
@media (max-width: 576px) {
  .tbd-badge { top: 20px; left: -40px; width: 200px; font-size: .62rem; }
}
.tbd-txt {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--violet);
  letter-spacing: .16em;
  text-indent: .16em;
  line-height: 1.7;
}
@media (max-width: 576px) {
  .tbd-txt { font-size: 1.35rem; }
}
.goods-name {
  display: block;
  margin-top: .8rem;
  font-family: var(--f-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .06em;
}
.goods-name em {
  display: block;           /* 【全N種】は改行して表示 */
  font-style: normal;
  font-size: .8rem;
  color: var(--text-sub);
  margin-top: .15rem;
  font-weight: 500;
}
.goods-note {
  display: block;
  text-align: center;
  color: var(--red);
  font-size: .76rem;
  font-weight: 700;
  margin-top: .3rem;
}
@media (max-width: 576px) {
  .goods-visual__img { width: 100%; }
}

.info-table {
  margin: 1.4rem 0 0;
  border-top: 1px solid var(--pale);
}
.info-table__row {
  display: flex;
  gap: .9rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--pale);
  align-items: flex-start;
}
.info-table dt {
  flex-shrink: 0;
  width: 8.4em;
  white-space: nowrap;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  color: #fff;
  background: var(--deep);
  text-align: center;
  padding: .3rem .4rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  margin: .15rem 0 0;
}
.info-table dt.info-table__label--wide {
  width: 9.2em;
  letter-spacing: .04em;
}
.info-table dd {
  margin: 0;
  flex: 1;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  line-height: 1.6;
}
.info-table__sub {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text);
  margin-top: .15rem;
}
.store-name {
  display: inline-block;
  color: var(--navy);
  font-size: 1.05rem;
  font-family: var(--f-en);
  font-weight: 600;
  letter-spacing: .02em;
}
.store-link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .32rem .7rem;
  border-radius: 4px;
  background: var(--grad-blue);
  color: #fff;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.store-link:hover {
  background: var(--violet);
  color: #fff;
}
.store-link i { font-size: .72em; }
@media (max-width: 576px) {
  .info-table__row { gap: .6rem; }
  .info-table dt { width: 7.6em; font-size: .74rem; letter-spacing: .04em; }
  .info-table dt.info-table__label--wide { width: 8.2em; font-size: .72rem; }
  .info-table dd { font-size: .92rem; }
}

/* --------------------------------
	フッター（yumemita 準拠）
-------------------------------- */
.content_footer {
  background-color: #fff;
}
.content_footer .credit__txt {
  font-size: 1rem;
  line-height: 1.5;      /* 本番 common.css 相当（body の 1.8 を継承させない） */
  margin: 0 0 1rem;
  color: var(--text);
}
.content_footer .link-bnr_list {
  padding: 5rem 0 0;
  margin: auto;
  justify-content: center;
}
@media (max-width: 993px) {
  .content_footer .link-bnr_list {
    width: 80%;
    justify-content: start;
  }
}
@media (max-width: 577px) {
  .content_footer .link-bnr_list {
    width: 100%;
  }
}
.content_footer .link-bnr_list__item__img {
  border: solid 1px #e6e5e5;
}
.content_footer .link-bnr_list__item__img img {
  width: 100%;
  display: block;
}

.oshitabi__footer, .footer-pankuzu, footer { background-color: #fff; }
.oshitabi__footer__button {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 40px;
}
.oshitabi__footer__button a {
  display: block;
  border: 3px solid #000;
  background-color: #fff;
  max-width: 320px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 900;
  border-radius: 20px;
  position: relative;
  text-decoration: none;
  color: #000;
  line-height: 1.5;
}
.oshitabi__footer__button a:hover { color: #000; }
.pankuzu {
  list-style: none;
  width: 96%;
  max-width: 1080px;
  margin: 10px auto;
  padding: 0 0 0 2rem;   /* yumemita は bootstrap 既定の ul padding が効いている */
}
.pankuzu li {
  display: inline-block;
  margin-right: 5px;
  font-size: 14px;
  line-height: 1.5;
}
.pankuzu li a {
  text-decoration: underline;
  color: #ed6d00;
}
.pankuzu li a:hover { text-decoration: none; }

/* --------------------------------
	ページトップボタン
-------------------------------- */
.page-top_btn {
  position: fixed;
  right: 12px;
  bottom: 20px;
  z-index: 100;
  display: none;
}
.page-top_btn.is-visible { display: block; }
.page-top_btn a { display: block; text-decoration: none; }
.page-top_btn button {
  border: none;
  background: var(--grad-main);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.1rem;
  box-shadow: 0 6px 18px rgba(33,31,65,.3);
  cursor: pointer;
}

/* --------------------------------
	anime 表示時アニメーション
-------------------------------- */
.anime {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}
.anime.is-animated {
  opacity: 1;
  transform: translateY(0);
}