@charset "utf-8";

/* =========================================================
   MASA ITO’S TALKING COLOSSEUM BATTLE OF ROCK / FM802
   デザイン基準幅：1180px（コンテンツ幅 900px）
   ========================================================= */

:root {
  --gold: #bb9719;
  --gold-dark: #a8850f;
  --ink: #000;
  --white: #fff;
  --marble: #e1e1e1;

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-num: "Oxanium", var(--font-jp);
  /* 見出し・グロナビ・日付（Figma と同じ Pirata One） */
  --font-display: "Pirata One", "Times New Roman", serif;

  /* 斜めのシェブロン（Λ / V）の高さ。
     デザイン幅1180pxで100px＝8.4746%。画面幅に比例させることで
     ウィンドウサイズが変わっても山の「形（角度）」は変わらず、大きさだけ変わる。
     JS で実幅から算出して上書き（スクロールバー分のズレ回避）。 */
  --chev: 8.4746vw;
  /* カード等の傾き（デザイン実測 20px / 290px ≒ 3.95deg） */
  --skew: -3.95deg;

  --inner: 900px;
  --pad: 40px;

  /* KV 左右の縦帯。デザイン幅1180pxで マーク幅31px / 内側17.75px、柄1周期123.5px。
     タイル画像は左右・上下に透明マージンを持たせているため、帯の幅は 34px 相当 */
  --strip: calc(var(--chev) * .34);
  --strip-in: calc(var(--chev) * .1625);
  --strip-period: calc(var(--strip) * 3.6471);
  /* パンクなビート（150BPM） */
  --beat: .4s;
  /* KV左右の縦帯が1周期ぶん流れる時間（震え＋スクロールの1サイクル） */
  --strip-speed: 7s;
}

/* ---------- base ---------- */
* {
  min-width: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  /* body ではなく html 側で抑える。
     body に指定すると body がスクロールコンテナ化し、position:fixed の要素が
     スクロールバー分だけ横にはみ出して横スクロールが発生するため。 */
  overflow-x: hidden;
}

body {
  position: relative;
  margin: 0;
  background: var(--marble);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 16px;
  /* 日本語は Medium(500) を基準にして、全体を少し太く見せる。
     Pirata One（--font-display）は 400 しかないので各所で個別指定している */
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .25s ease, color .25s ease;
}

a:hover {
  opacity: .7;
}

/* 大理石テクスチャ（ページ全面）
   画像の端1pxが明るく出て線に見えることがあるため、2px外側まで広げて端を画面外へ逃がす */
.bg-marble {
  position: absolute;
  inset: -2px 0;
  z-index: -2;
  background: var(--marble) url(../img/bg_marble.jpg) center top / cover no-repeat;
  pointer-events: none;
}

.inner {
  width: min(var(--inner), 100% - var(--pad) * 2);
  margin-inline: auto;
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
  /* 幅は JS が実測した --vw を使う。
     position:fixed の基準幅にスクロールバーが含まれる環境で
     ヘッダーが右にはみ出して横スクロールが出るのを防ぐ */
  position: fixed;
  top: 0;
  left: 0;
  width: var(--vw, 100%);
  z-index: 100;
  height: 80px;
  transition: transform .35s ease, background-color .35s ease;
}

.header.is-hidden {
  transform: translateY(-100%);
}

.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: 30px;
}

.header_logo {
  display: flex;
  align-items: center;
  gap: 30px;
  line-height: 0;
}

.header_logo img {
  display: block;
}

/* FM802ロゴは白バージョンの画像を用意しているので、フィルターではなく差し替える */
.header_logo .logo_fm802 {
  width: 120px;
  height: auto;
}

.header_logo .logo_fm802--white {
  display: none;
}

.header.is-onDark .logo_fm802--dark {
  display: none;
}

.header.is-onDark .logo_fm802--white {
  display: block;
}

.header_logo img[src*="cocolo"] {
  width: 100px;
  height: auto;
}

/* ドロワー内のロゴ（SPのみ表示） */
.nav_logo {
  display: none;
}

.header_nav_list {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header_nav_list a {
  display: block;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: .02em;
  white-space: nowrap;
  position: relative;
  transition: color .12s steps(2), transform .12s steps(2);
}

.header_nav_list a:hover {
  opacity: 1;
  color: var(--gold);
  transform: translateY(-2px) rotate(-2deg);
}

.header_nav_list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.header_nav_list a:hover::after,
.header_nav_list a.is-current::after {
  transform: scaleX(1);
}

/* 背景が濃い（黒／金）区間では白抜きに */
.header.is-onDark .header_nav_list a {
  color: var(--white);
}

.header.is-onDark .header_logo img[src*="cocolo"] {
  filter: brightness(0) invert(1);
}

/* ハンバーガー */
.header_btn {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* 見出しの吹き出し線と同じ角度（-13度）の斜め2本。
   開いているときは中央で交差させて × にする */
.header_btn_bar {
  position: absolute;
  left: 9px;
  width: 26px;
  height: 2px;
  background: var(--ink);
  transition: transform .3s ease, background-color .3s ease;
}

.header_btn_bar:nth-child(1) {
  top: 16px;
  transform: rotate(-13deg);
}

.header_btn_bar:nth-child(2) {
  top: 26px;
  transform: rotate(-13deg);
}

.header.is-onDark .header_btn_bar {
  background: var(--white);
}

.header.is-active .header_btn_bar {
  background: var(--ink);
}

.header.is-active .header_btn_bar:nth-child(1) {
  transform: translateY(6px) rotate(-45deg);
}

.header.is-active .header_btn_bar:nth-child(2) {
  transform: translateY(-4px) rotate(45deg);
}

/* =========================================================
   KV
   ========================================================= */
.kv {
  position: relative;
  /* 画面内に山の頭が少しだけ出る高さ */
  height: calc(100svh - var(--chev) * 1.1);
  min-height: 520px;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.kv_strip {
  /* PCは画面に固定。スクロールしても左右に流れ続ける
     上端はヘッダー（80px）を避ける位置から */
  position: fixed;
  top: 83px;
  bottom: 0;
  z-index: -1;
  width: var(--strip);
  background-image: url(../img/deco_strip.png);
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center 0;
  pointer-events: none;
}

/* 左は上へ、右は下へ、等速で流し続ける */
.kv_strip--l {
  left: var(--strip-in);
  animation: stripUp var(--strip-speed) linear infinite;
}

.kv_strip--r {
  right: var(--strip-in);
  /* 左右で位相をずらす */
  animation: stripDown var(--strip-speed) linear calc(var(--strip-speed) / -2) infinite;
}

/* ビリビリ → スクロール → ビリビリ → スクロール の繰り返し。
   1周（--strip-speed）でちょうど1周期ぶん進むのでループが継ぎ目なくつながる。
   background-position-y をマイナスへ ＝ 柄が上へ流れる */
@keyframes stripUp {
  0% {
    background-position: center 0;
    animation-timing-function: steps(1, end);
  }

  2% {
    background-position: center 2px;
    animation-timing-function: steps(1, end);
  }

  4% {
    background-position: center -2px;
    animation-timing-function: steps(1, end);
  }

  6% {
    background-position: center 1px;
    animation-timing-function: steps(1, end);
  }

  8% {
    background-position: center -2px;
    animation-timing-function: steps(1, end);
  }

  10% {
    background-position: center 2px;
    animation-timing-function: steps(1, end);
  }

  12% {
    background-position: center -1px;
    animation-timing-function: steps(1, end);
  }

  14% {
    background-position: center 2px;
    animation-timing-function: steps(1, end);
  }

  16% {
    background-position: center -2px;
    animation-timing-function: steps(1, end);
  }

  18% {
    background-position: center 1px;
    animation-timing-function: steps(1, end);
  }

  20% {
    background-position: center -1px;
    animation-timing-function: steps(1, end);
  }

  22% {
    background-position: center 0;
    animation-timing-function: linear;
  }

  50% {
    background-position: center calc(var(--strip-period) * -.5);
    animation-timing-function: steps(1, end);
  }

  52% {
    background-position: center calc(var(--strip-period) * -.5 + 2px);
    animation-timing-function: steps(1, end);
  }

  54% {
    background-position: center calc(var(--strip-period) * -.5 - 2px);
    animation-timing-function: steps(1, end);
  }

  56% {
    background-position: center calc(var(--strip-period) * -.5 + 1px);
    animation-timing-function: steps(1, end);
  }

  58% {
    background-position: center calc(var(--strip-period) * -.5 - 2px);
    animation-timing-function: steps(1, end);
  }

  60% {
    background-position: center calc(var(--strip-period) * -.5 + 2px);
    animation-timing-function: steps(1, end);
  }

  62% {
    background-position: center calc(var(--strip-period) * -.5 - 1px);
    animation-timing-function: steps(1, end);
  }

  64% {
    background-position: center calc(var(--strip-period) * -.5 + 2px);
    animation-timing-function: steps(1, end);
  }

  66% {
    background-position: center calc(var(--strip-period) * -.5 - 2px);
    animation-timing-function: steps(1, end);
  }

  68% {
    background-position: center calc(var(--strip-period) * -.5 + 1px);
    animation-timing-function: steps(1, end);
  }

  70% {
    background-position: center calc(var(--strip-period) * -.5 - 1px);
    animation-timing-function: steps(1, end);
  }

  72% {
    background-position: center calc(var(--strip-period) * -.5);
    animation-timing-function: linear;
  }

  100% {
    background-position: center calc(var(--strip-period) * -1);
  }

}

/* プラスへ ＝ 柄が下へ流れる */
@keyframes stripDown {
  0% {
    background-position: center 0;
    animation-timing-function: steps(1, end);
  }

  2% {
    background-position: center -2px;
    animation-timing-function: steps(1, end);
  }

  4% {
    background-position: center 2px;
    animation-timing-function: steps(1, end);
  }

  6% {
    background-position: center -1px;
    animation-timing-function: steps(1, end);
  }

  8% {
    background-position: center 2px;
    animation-timing-function: steps(1, end);
  }

  10% {
    background-position: center -2px;
    animation-timing-function: steps(1, end);
  }

  12% {
    background-position: center 1px;
    animation-timing-function: steps(1, end);
  }

  14% {
    background-position: center -2px;
    animation-timing-function: steps(1, end);
  }

  16% {
    background-position: center 2px;
    animation-timing-function: steps(1, end);
  }

  18% {
    background-position: center -1px;
    animation-timing-function: steps(1, end);
  }

  20% {
    background-position: center 1px;
    animation-timing-function: steps(1, end);
  }

  22% {
    background-position: center 0;
    animation-timing-function: linear;
  }

  50% {
    background-position: center calc(var(--strip-period) * .5);
    animation-timing-function: steps(1, end);
  }

  52% {
    background-position: center calc(var(--strip-period) * .5 - 2px);
    animation-timing-function: steps(1, end);
  }

  54% {
    background-position: center calc(var(--strip-period) * .5 + 2px);
    animation-timing-function: steps(1, end);
  }

  56% {
    background-position: center calc(var(--strip-period) * .5 - 1px);
    animation-timing-function: steps(1, end);
  }

  58% {
    background-position: center calc(var(--strip-period) * .5 + 2px);
    animation-timing-function: steps(1, end);
  }

  60% {
    background-position: center calc(var(--strip-period) * .5 - 2px);
    animation-timing-function: steps(1, end);
  }

  62% {
    background-position: center calc(var(--strip-period) * .5 + 1px);
    animation-timing-function: steps(1, end);
  }

  64% {
    background-position: center calc(var(--strip-period) * .5 - 2px);
    animation-timing-function: steps(1, end);
  }

  66% {
    background-position: center calc(var(--strip-period) * .5 + 2px);
    animation-timing-function: steps(1, end);
  }

  68% {
    background-position: center calc(var(--strip-period) * .5 - 1px);
    animation-timing-function: steps(1, end);
  }

  70% {
    background-position: center calc(var(--strip-period) * .5 + 1px);
    animation-timing-function: steps(1, end);
  }

  72% {
    background-position: center calc(var(--strip-period) * .5);
    animation-timing-function: linear;
  }

  100% {
    background-position: center var(--strip-period);
  }

}

.kv_logo {
  width: min(506px, 55%);
  margin: 0;
  line-height: 0;
}

.kv_date {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* =========================================================
   斜めセクションの共通パーツ
   ========================================================= */
.sec {
  position: relative;
}

.sec_bg {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.sec_body {
  position: relative;
  z-index: 1;
}

/* ゴールドの面は、前面・背面にかかわらずヒョウ柄を敷く */
.sec_bg--gold,
.sec-concept .sec_bg--accent,
.sec-entry .sec_bg--accent,
.sec-gold .sec_bg--main {
  background-color: var(--gold);
  background-image: url(../img/bg_leopard.png);
  background-position: center top;
  background-size: 538px auto;
  background-repeat: repeat;
}

/* ---- CONCEPT（黒）---- */
.sec-concept {
  /* 箱の上端＝山の頂点（KV の下端）。斜め分は padding で逃がす */
  padding: calc(var(--chev) + 112px) 0 calc(var(--chev) + 94px);
  color: var(--white);
}

.sec-concept .sec_bg--main,
.sec-entry .sec_bg--main {
  background: var(--ink);
  clip-path: polygon(0 var(--chev),
      62.5% 0,
      100% var(--chev),
      100% calc(100% - var(--chev)),
      37.3% 100%,
      0 calc(100% - var(--chev)));
}

.sec-concept .sec_bg--accent,
.sec-entry .sec_bg--accent {
  clip-path: polygon(0 calc(var(--chev) - 7px),
      37.3% 0,
      100% calc(var(--chev) + 60px),
      100% calc(100% - var(--chev) + 4px),
      62.7% 100%,
      0 calc(100% - var(--chev) - 60px));
}

.concept_txt {
  width: min(800px, 100% - var(--pad) * 2);
  margin-inline: auto;
  /* 短いコピーをストーリーとして読ませるため、中央揃え・行間広め・少し大きめに */
  text-align: center;
  color: var(--gold);
  font-size: 21px;
  font-weight: 700;
  line-height: 2.5;
  letter-spacing: .06em;
}

.concept_txt p {
  margin: 0 0 2.5em;
}

.concept_txt p:last-child {
  margin-bottom: 0;
}

/* SPだけで改行させたい箇所（PCでは無効） */
.br-sp {
  display: none;
}

/* ---- DJ / ARTIST（ヒョウ柄ゴールド）---- */
.sec-gold {
  padding: calc(var(--chev) + 80px) 0 calc(var(--chev) + 100px);
}

.sec-gold .sec_bg--main {
  clip-path: polygon(0 var(--chev),
      37.3% 0,
      100% var(--chev),
      100% calc(100% - var(--chev)),
      62.7% 100%,
      0 calc(100% - var(--chev)));
}

.sec-gold .sec_bg--accent {
  background: var(--ink);
  clip-path: polygon(0 var(--chev),
      62.7% 0,
      100% var(--chev),
      100% calc(100% - var(--chev)),
      37.3% 100%,
      0 calc(100% - var(--chev)));
}

/* =========================================================
   見出し
   ========================================================= */
.sec_ttl {
  margin: 0 0 83px;
  line-height: 0;
}

.sec_ttl_en {
  display: block;
  font-family: var(--font-display);
  font-size: 90px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  --slam: var(--gold);
}

.sec_ttl--onGold .sec_ttl_en {
  --slam: var(--white);
}

.sec_ttl_jp {
  display: block;
  margin-top: 20px;
  color: var(--gold);
  /* Figma実測：16px / 字間0.15em（4つの見出しすべてで幅が一致） */
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .15em;
}

.sec_ttl--onGold .sec_ttl_jp {
  color: var(--white);
}

.sec-entry .sec_ttl,
.sec-info .sec_ttl {
  margin-bottom: 62px;
}

/* DJ の見出しは J のディセンダ分だけ詰める */
#dj .sec_ttl {
  margin-bottom: 0;
}

#dj .sec_ttl_jp {
  margin-top: 14px;
}

/* =========================================================
   NEWS
   ========================================================= */
.sec-news {
  padding: 116px 0 130px;
}

.news_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  /* 各カードは文字量に応じて上下に伸び縮みする */
  gap: 35px 15px;
}

.news_item a {
  display: block;
  padding: 32px 30px 28px;
  background: var(--white);
  transform: skewY(var(--skew));
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}

.news_item a>* {
  transform: skewY(calc(var(--skew) * -1));
}

.news_date {
  display: block;
  color: var(--gold);
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

.news_ttl {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: .05em;
}

/* =========================================================
   DJ
   ========================================================= */
/* 写真（約1/4サイズ）とテキストの横並び */
.dj_body {
  display: flex;
  align-items: flex-start;
  gap: 44px;
  margin-top: 50px;
}

.dj_txt {
  flex: 1 1 auto;
  /* flexアイテムが中身の最小幅で膨らむのを防ぐ */
  min-width: 0;
}

.dj_photo {
  flex: 0 0 380px;
  width: 380px;
  margin: 0;
  aspect-ratio: 900 / 600;
  /* デザインの平行四辺形（左上62px下がり／右下537.5px）をそのまま切り抜く */
  clip-path: polygon(0 10.33%, 100% 0, 100% 89.58%, 0 99.75%);
}

.dj_photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dj_role {
  margin-top: 0;
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
}

/* 名前はデザインデータの書道体アウトライン（img/dj_name.svg）を使用 */
.dj_name {
  margin-top: 20px;
  line-height: 0;
}

.dj_name img {
  display: block;
  width: 160px;
  max-width: 100%;
  height: auto;
}

/* ゲスト名（img/guests_name.svg／デザインデータの3行組をそのまま使用）。
   もとから3行に組まれているので、SPでも縮めるだけで読める */
.guests_img {
  display: block;
  width: 420px;
  max-width: 100%;
  height: auto;
}

.dj_bio {
  margin-top: 40px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0;
}

.dj_bio li {
  margin: 0 0 29px;
  padding-left: 23px;
  border-left: 1px solid var(--white);
}

.dj_bio li:last-child {
  margin-bottom: 0;
}

/* =========================================================
   ARTIST
   ========================================================= */
/* ---- CONTENTS（大理石の上）---- */
.sec-contents {
  padding: 120px 0;
}

.sec-contents .sec_ttl {
  margin-bottom: 56px;
}

/* ---- CONTENTS の各ブロック ---- */
.contents_block {
  margin-top: 96px;
}

.contents_block:first-of-type {
  margin-top: 0;
}

.contents_ttl {
  display: flex;
  align-items: center;
  gap: 25px;
  /* コンテンツ幅より少し左にはみ出させる。
     --pad（inner の左右余白）を基準にしているので、画面幅が狭くなっても
     はみ出し量が自動で縮み、横スクロールバーは出ない */
  margin: 0 0 18px calc(var(--pad) * -0.8);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}

/* Figma（node 2013:20659）に合わせた吹き出し。
   文字を約4度傾け、左側に「長い線＋短い線」の2本セットを上下に置いて
   キャラクターが喋っているように見せる（漫画の集中線のイメージ）。
   線は img/deco_ttl_lines.svg（上側は scaleY(-1) で反転）。
   span 自体が -4度 回っているので、線は rotate(4deg) で水平に戻している。 */
.contents_ttl>span {
  position: relative;
  display: inline-block;
  transform: rotate(-4deg);
  transform-origin: left center;
  /* 少しずらしたゴールドの文字を背面に敷く（ずれ印刷風）。
     ボックスの影（8px 8px 0）と同じ右下方向にそろえている */
  text-shadow: 2px 2px 0 var(--gold);
}

.contents_ttl>span::before,
.contents_ttl>span::after {
  content: "";
  position: absolute;
  left: -23px;
  width: 48px;
  height: 16px;
  background: url(../img/deco_ttl_lines.svg) center / 100% 100% no-repeat;
}

/* 上の線：反転して右上がりに */
.contents_ttl>span::before {
  top: -12px;
  transform: rotate(4deg) scaleY(-1);
}

/* 下の線：そのまま右下がり */
.contents_ttl>span::after {
  bottom: -12px;
  transform: rotate(4deg);
}

/* 見出しの頭にロゴのキャラクターを添える */
.contents_ttl::before {
  content: "";
  flex: none;
  width: 70px;
  /* 元SVGの比率 99.73 : 101.62 */
  aspect-ratio: 99.73 / 101.62;
  background: url(../img/logo_chara.svg) center / contain no-repeat;
}

/* 手描き感を出すため、ブロックごとに少しだけ角度を変える */
.contents_block:nth-of-type(1) .contents_ttl::before {
  transform: rotate(-6deg);
}

.contents_block:nth-of-type(2) .contents_ttl::before {
  transform: rotate(5deg);
}

.contents_block:nth-of-type(3) .contents_ttl::before {
  transform: rotate(-4deg);
}

.contents_txt {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0;
}

/* GUESTS： のあとで改行して、名前を次の行に置く */
.contents_label {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
}

.contents_sub {
  margin-top: 22px !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

/* SPECIAL PROGRAM のホバー時と同じ囲み（白地・黒罫・黒のベタ影） */
.contents_list {
  display: grid;
  gap: 14px;
  margin-top: 18px !important;
  font-size: 15px;
  line-height: 1.7;
}

/* 左に宝石アイコン。テキストが2行になっても縦中央に揃う */
.contents_list li {
  position: relative;
  padding: 22px 26px 22px 84px;
  border: 1px solid var(--ink);
  background: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
}

.contents_list li::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  background: url(../img/ico_treasure.svg) center / contain no-repeat;
}

/* ---- 後日特別番組（バナー枠）---- */
.program_list {
  display: grid;
  gap: 14px;
  margin-top: 24px !important;
}

.program {
  display: block;
  padding: 22px 26px;
  border: 1px solid var(--ink);
  background: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
  font-size: 15px;
  line-height: 1.7;
  transition: border-color .12s steps(2), box-shadow .12s steps(2);
}

/* ホバーで罫線とベタ影がゴールドに */
.program:hover {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 8px 8px 0 var(--gold);
}

.program img {
  display: block;
  width: 100%;
}

/* ---- ゲスト写真（1枚でも3枚でも中央に並ぶ）---- */
.artist_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 17px 15px;
  margin-top: 34px !important;
}

.artist {
  flex: 0 1 calc((100% - 30px) / 3);
  max-width: 290px;
}

/* 3人で1枚の写真パターン（1枠だけ・中央・やや大きめ） */
.artist_list--single .artist {
  flex: 0 1 590px;
  max-width: 590px;
}

/* 名前は中央揃えで1行に収める（590pxに収まるサイズ） */
.artist_list--single .artist_name {
  text-align: center;
  white-space: nowrap;
  font-size: 14px;
}

.artist_photo {
  /* 傾き分（上下各20px）を含めた箱。skewY だと枠幅ごとに
     はみ出し量が変わり、写真とテキストの間隔がズレるため clip-path で切る */
  aspect-ratio: 290 / 230;
  overflow: hidden;
  background: #ccc;
  clip-path: polygon(0 8.7%, 100% 0, 100% 91.3%, 0 100%);
}

.artist_photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist_name {
  margin-top: 26px;
  font-size: 16px;
  letter-spacing: .02em;
}

/* =========================================================
   TICKETS
   ========================================================= */
.sec-entry {
  padding: calc(var(--chev) + 120px) 0 calc(var(--chev) + 110px);
  color: var(--white);
}

/* ENTRY は情報量が多いので、他のセクション（900px）より広いコンテンツ幅にする */
.sec-entry .inner {
  width: min(1080px, 100% - var(--pad) * 2);
}

.entry_list {
  display: flex;
  justify-content: center;
}

.entry {
  flex: 0 1 50%;
  /* inner（1080px）÷2。2枠のときに左右がぴったり見出しとそろうようにしている。
     これより小さいと justify-content: center のぶん内側にズレる */
  max-width: 540px;
  /* 左右の padding ＝ 中央の区切り線と本文とのアキ */
  padding: 0 54px;
}

.entry:first-child {
  padding-left: 0;
}

.entry:last-child {
  padding-right: 0;
}

/* 区切り線は複数あるときだけ */
.entry:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, .5);
}

/* 見出しはゴールド（Figma node 2002:1100 ／ 20px Bold・#bb9719） */
.entry_ttl {
  margin: 0 0 34px;
  color: var(--gold);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
}

/* ---- 募集期間／応募方法（Figma node 2002:1099）----
   項目名は白ベタのラベル、その下に内容を置いて情報を整理している */
.entry_def {
  margin: 0;
}

.entry_label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 15px;
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: .05em;
}

/* 2つめ以降のラベルは、前の項目との間隔をあける */
.entry_val+.entry_label {
  margin-top: 34px;
}

.entry_val {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: .05em;
}

.entry_val p {
  margin: 0;
}

/* ※・★ではじまる注意書き。行頭記号ぶんをぶら下げて折り返しをそろえる */
.entry_note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.4;
}

.entry_note li {
  padding-left: 1.2em;
  text-indent: -1.2em;
}

.entry_note li+li {
  margin-top: 5px;
}

/* 注意書きの中の補足行。字下げはせず、
   ※のあとの本文と頭をそろえる（親の text-indent を打ち消すだけ） */
.entry_sub {
  display: block;
  text-indent: 0;
}

.entry_val a {
  text-decoration: underline;
}

/* ---- PLATINUM未入会の方向けの案内（白線囲み・左枠の中）---- */
.entry_notice {
  margin: 26px 0 0;
  padding: 20px 22px 22px;
  border: 1px solid var(--white);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: .04em;
}

.entry_notice p {
  margin: 0;
}

.entry_notice_ttl {
  margin-bottom: 12px !important;
  font-weight: 700;
}

.entry_notice_link {
  margin-top: 12px !important;
}

.entry_notice a {
  text-decoration: underline;
}

.sec-entry .btn-buy {
  width: 100%;
  max-width: none;
  margin: 30px 0 0;
  background: var(--gold);
}

.sec-entry .btn-buy_in {
  color: var(--ink);
}

/* ホバーは白へ反転 */
.sec-entry .btn-buy::before {
  background: var(--white);
}

.sec-entry .btn-buy:hover {
  box-shadow: 8px 8px 0 var(--gold);
}

.sec-entry .btn-buy:hover .btn-buy_in {
  color: var(--ink);
}

.btn-buy {
  display: block;
  width: 277px;
  max-width: 100%;
  margin: 27px auto 0;
  padding: 17px 0;
  background: var(--ink);
  color: var(--white);
  transform: skewX(-14.5deg);
  transition:
    opacity .25s ease,
    transform .32s cubic-bezier(.22, .61, .36, 1),
    box-shadow .32s cubic-bezier(.22, .61, .36, 1);
}

/* 左右に同じ幅の余りを作って、文字はボタンの中央・アイコンは右端に置く */
.btn-buy_in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 22px;
  transform: skewX(14.5deg);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
}

.btn-buy_txt {
  grid-column: 2;
}

.btn-buy_ico {
  grid-column: 3;
  justify-self: end;
  width: 16px;
  height: 16px;
}

/* =========================================================
   INFORMATION
   ========================================================= */
.sec-info,.sec-illust {
  padding: 130px 0 65px;
}

.info_row {
  display: grid;
  /* 1列目＝ラベルの列（固定幅なのでラベルの文字数が違っても値の頭がそろう）
     column-gap ＝ ラベルと値のアキ */
  /* 1列目の幅は「アーティストゲスト」（いちばん長いラベル）が
     つぶれずに入る幅。ラベルを増やすときはここを確認すること */
  grid-template-columns: 156px 1fr;
  column-gap: 32px;
  align-items: start;
  padding: 21px 0 19px;
  border-bottom: 1px solid #ccc;
}

.info_row dt,
.info_row dd {
  margin: 0;
}

.info_row dt {
  display: flex;
}

.info_label {
  display: inline-block;
  min-width: 94px;
  /* グリッドの列幅につぶされて文字が詰まるのを防ぐ */
  flex: none;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-align: center;
  white-space: nowrap;
}

.info_row dd {
  font-size: 15px;
  line-height: 1.85;
}

.info_row dd p {
  margin: 0;
}

.info_sub {
  font-weight: 700;
  margin-top: 1.2em !important;
}

.info_row dd>p:first-child {
  margin-top: 0 !important;
}

.info_indent {
  display: inline-block;
  padding-left: 1em;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  position: relative;
  padding-bottom: 62px;
}

.sponsor {
  width: calc(100% - 200px);
  margin-inline: auto;
  padding: 44px 30px 42px;
  background: var(--white);
}

.sponsor_label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  letter-spacing: .08em;
}

.sponsor_list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 23px !important;
}

.sponsor_list li:only-child {
  grid-column: 3 / span 2;
  justify-self: center;
}

.sponsor_list img {
  display: block;
  width: 100%;
  aspect-ratio: 160 / 78;
  object-fit: contain;
  background: #d9d9d9;
}

.footer_bottom {
  padding-top: 60px;
  text-align: center;
}

.footer_sns {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer_sns img {
  display: block;
  width: 35px;
  height: 35px;
}

.footer_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 30px !important;
  line-height: 0;
}

.footer_logo img[src*="fm802"] {
  width: 146px;
  height: auto;
}

.footer_logo img[src*="cocolo"] {
  width: 120px;
  height: auto;
}

.footer_copy {
  margin-top: 34px !important;
  font-size: 15px;
  letter-spacing: .06em;
  line-height: 1;
}

/* =========================================================
   モーション
   ========================================================= */
/* スクロールで出現 → 定位置に着いた直後に少しビリビリ震える */
@keyframes revealIn {
  0% {
    opacity: 0;
    transform: translateY(24px);
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  }

  55% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: steps(1, end);
  }

  62% {
    transform: translate(-2px, 1px) rotate(-.4deg);
    animation-timing-function: steps(1, end);
  }

  69% {
    transform: translate(2px, -1px) rotate(.4deg);
    animation-timing-function: steps(1, end);
  }

  76% {
    transform: translate(-2px, -1px) rotate(-.3deg);
    animation-timing-function: steps(1, end);
  }

  83% {
    transform: translate(1px, 2px) rotate(.3deg);
    animation-timing-function: steps(1, end);
  }

  90% {
    transform: translate(-1px, -1px) rotate(-.2deg);
    animation-timing-function: steps(1, end);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* 見出しは中の文字自体がグリッチするので、親は素直に出すだけ */
@keyframes revealPlain {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.js-reveal {
  opacity: 0;
}

.js-reveal.is-shown {
  animation: revealIn .9s var(--rd, 0s) both;
}

.sec_ttl.js-reveal.is-shown {
  animation: revealPlain .6s cubic-bezier(.22, .61, .36, 1) var(--rd, 0s) both;
}

/* ---- KV：コマ送りでガシャッと着地し、ビートに合わせて跳ねる ---- */
@keyframes kvIn {
  0% {
    opacity: 0;
    transform: scale(1.55) rotate(-8deg);
  }

  20% {
    opacity: 1;
    transform: scale(.86) rotate(5deg);
  }

  40% {
    transform: scale(1.1) rotate(-3deg);
  }

  60% {
    transform: scale(.95) rotate(1.5deg);
  }

  80% {
    transform: scale(1.03) rotate(-.6deg);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* 出現後、ときどきビリビリと震える */
@keyframes kvBuzz {
  0% {
    transform: translate(0, 0) rotate(0);
  }

  2% {
    transform: translate(-2px, 1px) rotate(-.4deg);
  }

  4% {
    transform: translate(2px, -1px) rotate(.4deg);
  }

  6% {
    transform: translate(-2px, -1px) rotate(-.3deg);
  }

  8% {
    transform: translate(1px, 2px) rotate(.35deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-.25deg);
  }

  12% {
    transform: translate(2px, 1px) rotate(.4deg);
  }

  14% {
    transform: translate(-1px, 1px) rotate(-.2deg);
  }

  16%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}

@keyframes kvDate {
  0% {
    opacity: 0;
    transform: translateY(24px) skewX(-14deg);
  }

  33% {
    opacity: 1;
    transform: translateY(-8px) skewX(8deg);
  }

  66% {
    transform: translateY(3px) skewX(-3deg);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.kv_logo {
  animation: kvIn .6s steps(1, end) both;
}

.kv_logo img {
  animation: kvBuzz 2.6s steps(1, end) .75s infinite;
}

.kv_date {
  animation: kvDate calc(var(--beat) * .9) steps(1, end) .45s both;
}

/* ---- 見出し：コマ送りのグリッチで入る ---- */
@keyframes glitchIn {
  0% {
    opacity: 0;
    transform: translate(-16px, 7px) skewX(-16deg);
    text-shadow: 14px 0 0 var(--slam);
  }

  20% {
    opacity: 1;
    transform: translate(12px, -5px) skewX(10deg);
    text-shadow: -11px 0 0 var(--slam);
  }

  40% {
    transform: translate(-7px, 3px) skewX(-6deg);
    text-shadow: 7px 0 0 var(--slam);
  }

  60% {
    transform: translate(4px, -2px) skewX(3deg);
    text-shadow: -4px 0 0 var(--slam);
  }

  80% {
    transform: translate(-2px, 1px);
    text-shadow: 2px 0 0 var(--slam);
  }

  100% {
    opacity: 1;
    transform: none;
    text-shadow: 0 0 0 transparent;
  }
}

.sec_ttl.is-shown .sec_ttl_en {
  animation: glitchIn calc(var(--beat) * 1.25) steps(1, end) both;
}

/* ---- NEWSカード：ホバーで跳ねる＋ゴールドの線 ---- */
.news_item a:hover {
  opacity: 1;
  transform: skewY(var(--skew)) translateY(-8px) rotate(-.8deg);
  box-shadow: 12px 12px 0 var(--ink);
}

/* ---- ARTIST：ホバーでズーム ---- */
.artist_photo img {
  transition: transform .2s steps(3);
}

.artist:hover .artist_photo img {
  transform: scale(1.12);
}

/* ---- 購入ボタン：ホバーでゴールドに反転 ---- */
.btn-buy {
  position: relative;
  overflow: hidden;
}

.btn-buy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-101%);
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}

.btn-buy_in {
  position: relative;
  z-index: 1;
  transition: color .3s ease;
}

.btn-buy:hover {
  opacity: 1;
  transform: skewX(-14.5deg) translateY(-3px);
  box-shadow: 8px 8px 0 var(--gold);
}

.btn-buy:hover::before {
  transform: none;
}

.btn-buy:hover .btn-buy_in {
  color: var(--ink);
}

.btn-buy_ico {
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

.btn-buy:hover .btn-buy_ico {
  transform: translate(4px, -4px);
}

/* ---- SNS：ホバー中はビリビリ震え続ける ---- */
@keyframes snsBuzz {
  0% {
    transform: translate(0, 0) rotate(0);
  }

  10% {
    transform: translate(-2px, 1px) rotate(-7deg);
  }

  20% {
    transform: translate(2px, -1px) rotate(6deg);
  }

  30% {
    transform: translate(-2px, -2px) rotate(-4deg);
  }

  40% {
    transform: translate(1px, 2px) rotate(5deg);
  }

  50% {
    transform: translate(-1px, -2px) rotate(-6deg);
  }

  60% {
    transform: translate(2px, 1px) rotate(4deg);
  }

  70% {
    transform: translate(-2px, 2px) rotate(-5deg);
  }

  80% {
    transform: translate(1px, -2px) rotate(6deg);
  }

  90% {
    transform: translate(-1px, 1px) rotate(-3deg);
  }

  100% {
    transform: translate(0, 0) rotate(0);
  }
}

.footer_sns a {
  display: block;
}

.footer_sns a:hover {
  opacity: 1;
  animation: snsBuzz .4s steps(1, end) infinite;
}

@media (hover: none) {

  .news_item a:hover {
    transform: skewY(var(--skew));
    box-shadow: none;
  }

  .btn-buy:hover {
    transform: skewX(-14.5deg);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .js-reveal,
  .js-reveal.is-shown,
  .sec_ttl.js-reveal.is-shown {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .kv_logo,
  .kv_logo img,
  .kv_date,
  .kv_strip,
  .footer_sns a:hover,
  .sec_ttl.is-shown .sec_ttl_en {
    animation: none !important;
  }
}

/* =========================================================
   ~1180px：デザイン幅より狭い場合の調整
   ========================================================= */
@media (max-width: 1180px) {
  :root {
    --pad: 30px;
  }
}

/* =========================================================
   タブレット
   ========================================================= */
@media (max-width: 991.98px) {
  :root {
    --inner: 700px;
    --pad: 28px;
  }

  .kv_logo {
    width: min(506px, 60%);
  }

  .kv_date {
    font-size: 46px;
  }

  .sec_ttl_en {
    font-size: 74px;
  }

  .header_nav_list a {
    font-size: 21px;
  }

  .sponsor_list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   スマートフォン
   ========================================================= */
@media (max-width: 767.98px) {
  :root {
    --pad: 20px;
    --skew: -3deg;
  }

  body {
    font-size: 15px;
  }

  /* ---- header ---- */
  .header {
    height: 64px;
  }

  .header_inner {
    padding-inline: 16px;
  }

  .header_logo {
    gap: 16px;
  }

  .header_logo .logo_fm802 {
    width: 88px;
  }

  .header_logo img[src*="cocolo"] {
    width: 72px;
  }

  .header_btn {
    display: block;
    z-index: 2;
  }

  /* ドロワーを開いてもロゴは見せる */
  .header_logo {
    position: relative;
    z-index: 2;
  }

  .header.is-active .header_logo img {
    filter: none;
  }

  /* ドロワー（ゴールド背景）では通常版を表示 */
  .header.is-active .logo_fm802--dark {
    display: block;
  }

  .header.is-active .logo_fm802--white {
    display: none;
  }

  .header_nav {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--vw, 100%);
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* ゴールド＋ヒョウ柄 */
    background-color: var(--gold);
    background-image: url(../img/bg_leopard.png);
    background-position: center top;
    background-size: 330px auto;
    background-repeat: repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
  }

  .header.is-active .header_nav {
    opacity: 1;
    visibility: visible;
  }

  .nav_logo {
    display: block;
    width: min(290px, 56%);
    margin: 0 0 40px;
    line-height: 0;
  }

  .header_nav_list {
    flex-direction: column;
    gap: 28px;
  }

  .header_nav_list a {
    color: var(--ink);
    font-size: 30px;
    letter-spacing: .06em;
  }

  .header_nav_list a:hover {
    color: var(--white);
  }

  .header.is-onDark .header_nav_list a {
    color: var(--white);
  }

  /* ---- KV ---- */
  .kv {
    padding-top: 64px;
    min-height: 460px;
    /* SPは画面幅が狭く --chev が小さいので、山が覗く量を多めに取る */
    height: calc(100svh - var(--chev) * 3);
  }

  /* SPでは細くなりすぎるので少しだけ太く */
  :root {
    --strip: calc(var(--chev) * .66);
    --strip-in: calc(var(--chev) * .17);
  }

  /* SPは KV の中だけに置く（コンテンツ幅が狭いため）。
     下端は山の下へもぐり込ませて断ち切る */
  .kv_strip {
    position: absolute;
    top: 72px;
    bottom: calc(var(--chev) * -2);
  }

  .kv_logo {
    width: min(506px, 66%);
  }

  .kv_date {
    margin-top: 20px;
    /* ロゴとの比率（デザイン 273/545 ≒ 0.5）を保つ */
    font-size: clamp(20px, 7vw, 34px);
  }

  /* ---- 見出し ---- */
  .sec_ttl {
    margin-bottom: 40px;
  }

  .sec_ttl_en {
    font-size: 56px;
  }

  .sec_ttl_jp {
    margin-top: 14px;
    font-size: 14px;
  }

  /* ---- CONCEPT ---- */
  .sec-concept {
    /* 山が覗く量（--chev * 3）より下から本文が始まるようにして、
       ファーストビューに本文が1行だけ出てしまうのを防ぐ */
    padding: calc(var(--chev) * 3 + 80px) 0 calc(var(--chev) * 2 + 72px);
  }

  /* アドレスバーが隠れてビューポートが伸びた分も見込む（対応ブラウザのみ） */
  @supports (height: 100lvh) {
    .sec-concept {
      padding-top: max(calc(var(--chev) * 3 + 80px),
          calc(100lvh - 100svh + var(--chev) * 3 + 48px));
    }
  }

  .br-sp {
    display: inline;
  }

  .concept_txt {
    /* SPは <br class="br-sp"> で改行位置を分けているので15pxを保てる。
       320px級の狭い端末だけ少し縮めて折り返しを防ぐ */
    font-size: clamp(13.5px, 4vw, 15px);
    line-height: 2.3;
    letter-spacing: .02em;
  }

  .concept_txt p {
    margin-bottom: 2.3em;
  }

  /* ---- NEWS ---- */
  .sec-news {
    padding: 66px 0;
  }

  .news_list {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .news_item a {
    padding: 30px 22px 26px;
  }

  /* ---- DJ ---- */
  .sec-gold {
    padding: calc(var(--chev) + 30px) 0 calc(var(--chev) + 40px);
  }

  .sec_bg--gold,
  .sec-concept .sec_bg--accent,
  .sec-entry .sec_bg--accent,
  .sec-gold .sec_bg--main {
    background-size: 330px auto;
  }

  /* SPは縦積み。写真は幅いっぱい */
  .dj_body {
    display: block;
    margin-top: 34px;
  }

  .dj_photo {
    flex: none;
    width: 100%;
  }

  .dj_role {
    margin-top: 30px;
    font-size: 13px;
  }

  .dj_name {
    margin-top: 12px;
  }

  .dj_name img {
    width: 130px;
  }

  .guests_img {
    width: 100%;
  }

  .dj_bio {
    font-size: 13px;
  }

  .dj_bio li {
    margin-bottom: 20px;
    padding-left: 16px;
  }

  /* ---- CONTENTS ---- */
  .contents_block {
    margin-top: 68px;
  }

  .contents_ttl {
    /* 「MASAのトークバトルロワイヤル」が1行に収まる大きさ。
       画面幅に応じて縮み、400px以上では20pxで頭打ち */
    font-size: clamp(15px, 5vw, 20px);
    margin-bottom: 14px;
    gap: 16px;
  }

  .contents_ttl>span::before,
  .contents_ttl>span::after {
    left: -13px;
    width: 32px;
    height: 11px;
  }

  .contents_ttl>span::before {
    top: -8px;
  }

  .contents_ttl>span::after {
    bottom: -8px;
  }

  .contents_ttl::before {
    width: 46px;
  }

  .contents_txt,
  .contents_sub,
  .contents_list {
    font-size: 13px;
  }

  .contents_list li {
    padding: 16px 18px 16px 60px;
    box-shadow: 6px 6px 0 var(--ink);
  }

  .contents_list li::before {
    left: 15px;
    width: 32px;
    height: 32px;
  }

  .program {
    padding: 16px 18px;
    font-size: 13px;
    box-shadow: 6px 6px 0 var(--ink);
  }

  .program:hover {
    box-shadow: 6px 6px 0 var(--gold);
  }

  .artist_list {
    gap: 26px 0;
    margin-top: 26px !important;
  }

  /* SPは1行につき1枚。名前が2行に折り返しても崩れない */
  .artist {
    flex: 0 0 100%;
    max-width: none;
  }

  .artist_list--single .artist {
    flex: 1 1 auto;
    max-width: none;
  }

  /* SPは幅が足りないので折り返す（中央揃えは維持） */
  .artist_list--single .artist_name {
    white-space: normal;
    font-size: 12px;
  }

  .artist_name {
    margin-top: 12px;
    font-size: 13px;
  }

  /* ---- CONTENTS ---- */
  .sec-contents {
    padding: 66px 0;
  }

  .sec-contents .sec_ttl {
    margin-bottom: 36px;
  }

  /* ---- ENTRY ---- */
  .sec-entry {
    padding: calc(var(--chev) + 60px) 0 calc(var(--chev) + 56px);
  }

  .entry_list {
    flex-direction: column;
    gap: 42px;
  }

  .entry {
    flex: 1 1 auto;
    max-width: none;
    padding: 0;
  }

  .entry:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid #b5b5b5;
    padding-bottom: 42px;
  }

  .entry_ttl {
    margin-bottom: 26px;
    font-size: 17px;
  }

  .entry_label {
    margin-bottom: 10px;
    padding: 4px 12px;
    font-size: 14px;
  }

  .entry_val+.entry_label {
    margin-top: 28px;
  }

  .entry_val {
    font-size: 14px;
  }

  .entry_note {
    font-size: 12px;
  }

  .entry_notice {
    margin-top: 22px;
    padding: 18px 16px 20px;
    font-size: 12px;
  }

  .btn-buy {
    margin-top: 24px;
    padding: 14px 0;
  }

  .btn-buy_in {
    gap: 22px;
    font-size: 14px;
  }

  /* ---- INFORMATION ---- */
  .sec-info {
    padding: 76px 0 70px;
  }

  .info_row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 0;
  }

  .info_row dd {
    font-size: 13px;
  }

  .info_label {
    font-size: 12px;
    padding: 4px 12px;
  }

  /* ---- FOOTER ---- */
  .footer {
    padding-bottom: 40px;
  }

  .sponsor {
    width: calc(100% - 32px);
    padding: 26px 18px 28px;
  }

  .sponsor_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .footer_bottom {
    padding-top: 40px;
  }

  .footer_logo {
    gap: 16px;
    margin-top: 28px !important;
  }

  .footer_logo img[src*="fm802"] {
    width: 110px;
  }

  .footer_logo img[src*="cocolo"] {
    width: 98px;
  }

  .footer_copy {
    margin-top: 24px !important;
    font-size: 12px;
  }
}

.border-frame {
  border: 1px solid #000;
  padding-right: 1rem;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
}