/* ==========================================================================
   SAIGO Official Site
   ========================================================================== */

/* Base reset (Tailwind preflight 相当) ------------------------------------ */
@layer base {
  *,::before,::after,::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
  html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; }
  h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }
  b,strong { font-weight: bolder; }
  small { font-size: 80%; }
  ol,ul,menu { list-style: none; }
  img,svg,video,canvas,audio,iframe,embed,object { display: block; vertical-align: middle; }
  img,video { max-width: 100%; height: auto; }
  button,input,select,optgroup,textarea {
    font: inherit; font-feature-settings: inherit; letter-spacing: inherit;
    color: inherit; border-radius: 0; background-color: transparent; opacity: 1;
  }
  ::placeholder { opacity: 1; color: color-mix(in oklab,currentColor 50%,transparent); }
  textarea { resize: vertical; }
  button,input:where([type=button],[type=reset],[type=submit]) { appearance: button; }
  [hidden]:where(:not([hidden=until-found])) { display: none !important; }
  summary { display: list-item; }

  html { max-width: 100%; overflow-x: hidden; }
  body { min-width: 320px; max-width: 100%; height: 100svh; overflow: hidden; }
  a { color: inherit; text-decoration: none; }
}

:root {
  color: #161616;
  background: #f1efe8;
  font-family: 'Noto Sans JP', sans-serif;
  scroll-behavior: smooth;
  --orange: #f1482d;
  --black: #0d0d0f;
  --cream: #f1efe8;
}

/* Intro ------------------------------------------------------------------- */
.intro-sequence {
  position: fixed; inset: 0; z-index: 1000; display: none; overflow: hidden; color: white; background: #050608;
  animation: intro-exit 5.2s ease-in-out forwards;
}
.intro-active .intro-sequence { display: block; }
.intro-smoke { position: absolute; inset: -20%; overflow: hidden; }
.intro-smoke span {
  position: absolute; width: 58vw; height: 58vw; min-width: 420px; min-height: 420px;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle,rgba(82,118,147,.82) 0,rgba(32,61,86,.52) 34%,transparent 72%);
  filter: blur(20px); mix-blend-mode: screen; will-change: transform,opacity;
  animation: intro-smoke-bloom 2.25s ease-in-out forwards;
}
.intro-smoke span:nth-child(1) { top: -15%; left: -12%; }
.intro-smoke span:nth-child(2) { top: 22%; right: -16%; animation-delay: .18s; }
.intro-smoke span:nth-child(3) { bottom: -30%; left: 19%; animation-delay: .35s; }
.intro-smoke span:nth-child(4) { top: -28%; right: 22%; animation-delay: .52s; }
.intro-smoke span:nth-child(5) {
  top: 12%; left: 24%; width: 46vw; height: 46vw; animation-delay: .12s;
}
.intro-smoke span:nth-child(6) {
  right: 10%; bottom: -38%; width: 68vw; height: 68vw; animation-delay: .66s;
}
.intro-smoke span:nth-child(7) {
  top: -22%; left: 42%; width: 40vw; height: 40vw; animation-delay: .28s;
}
.intro-smoke span:nth-child(8) {
  bottom: -24%; left: -18%; width: 72vw; height: 72vw; animation-delay: .78s;
}
.intro-smoke span:nth-child(9) {
  top: 32%; left: 38%; width: 52vw; height: 52vw; animation-delay: .05s;
}
.intro-smoke span:nth-child(10) {
  top: -38%; left: -24%; width: 76vw; height: 76vw; animation-delay: .58s;
}
.intro-smoke span:nth-child(11) {
  right: -28%; bottom: 4%; width: 78vw; height: 78vw; animation-delay: .32s;
}
.intro-smoke span:nth-child(12) {
  top: 18%; left: -4%; width: 44vw; height: 44vw; animation-delay: .9s;
}
/* 画面中央を通る斜めの線。どの画面比率でも端から端まで届くよう長さは 160vmax */
.intro-slash {
  position: absolute; z-index: 3; top: 50%; left: 50%; width: 160vmax; height: 4px;
  transform: translate(-50%,-50%) rotate(-18deg); pointer-events: none;
}
.intro-slash::before {
  position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; opacity: 0;
  background: linear-gradient(90deg,transparent 0,#fff 12%,#cde7f4 48%,#fff 88%,transparent 100%);
  box-shadow: 0 0 12px #fff,0 0 36px #7fc8e8,0 0 80px rgba(100,185,225,.8);
  animation: intro-slash 1s cubic-bezier(.2,.8,.15,1) 1.65s forwards;
  content: '';
}
.intro-logo {
  position: absolute; z-index: 4; top: 50%; left: 50%; width: min(76vw,920px); height: auto;
  opacity: 0; transform: translate(-50%,-50%) scale(1.28) rotate(-3deg);
  filter: drop-shadow(0 0 24px rgba(255,255,255,.22));
  animation: intro-logo-in 1.25s cubic-bezier(.16,.84,.22,1) 2.35s forwards;
}
.intro-skip {
  position: absolute; right: 24px; bottom: 20px; z-index: 6; padding: 8px;
  border: 0; color: #74777b; background: transparent;
  font: 600 9px/1 'Barlow Condensed'; letter-spacing: .2em; cursor: pointer;
}
@keyframes intro-smoke-bloom {
  0% { opacity: 0; transform: scale(.58) translate3d(0,18%,0); }
  48% { opacity: .96; }
  100% { opacity: .62; transform: scale(1.3) translate3d(8%,-9%,0); }
}
@keyframes intro-slash {
  0% { opacity: 0; transform: scaleX(0); }
  12% { opacity: 1; }
  62% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes intro-logo-in {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(1.28) rotate(-3deg); filter: blur(8px) drop-shadow(0 0 45px white); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); filter: blur(0) drop-shadow(0 0 20px rgba(255,255,255,.14)); }
}
@keyframes intro-exit {
  0%,78% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* Layout ------------------------------------------------------------------ */
main {
  width: 100%; height: 100svh; overflow-x: hidden; overflow-y: auto;
  scroll-snap-type: y mandatory; scroll-padding-top: 82px;
  overscroll-behavior-y: contain; scroll-behavior: smooth;
}
.dark-shell { padding-top: 82px; color: #f4f2ed; background: var(--black); }
.snap-section {
  height: calc(100svh - 82px); min-height: calc(100svh - 82px);
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.snap-section::-webkit-scrollbar { display: none; }
.snap-section-long { scroll-snap-stop: always; }
.overview-section {
  display: grid; grid-template-columns: .9fr 1.1fr; grid-template-rows: auto auto auto 1fr;
  gap: 30px 38px; align-content: start;
  padding: 32px max(24px,calc((100vw - 1240px)/2)) 42px;
  overflow-x: hidden; overflow-y: auto; background: var(--black);
}
.overview-section .next-fight {
  grid-column: 1/-1; width: 100%; padding-inline: 24px;
}
.fight-tagline {
  grid-column: 1/-1; display: flex; min-height: 70px; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-left: 4px solid var(--orange); background: #0b0b0d;
}
.fight-tagline strong { font-size: clamp(17px,2vw,25px); letter-spacing: -.03em; }
.fight-tagline span {
  padding: 7px 11px; color: white; background: var(--orange);
  font-size: clamp(12px,1.2vw,16px); font-weight: 800; letter-spacing: .12em;
}

/* Header ------------------------------------------------------------------ */
.site-header {
  position: fixed; z-index: 100; top: 0; left: 0; display: flex; align-items: center;
  width: 100%; height: 82px; padding: 0 max(24px,calc((100vw - 1240px)/2)); color: #f4f2ed;
  background: rgba(13,13,15,.82); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
}
.logo { font: 800 26px/1 'Barlow Condensed', sans-serif; letter-spacing: .08em; }
.logo span { color: var(--orange); }
/* ヘッダーのロゴ（キャラ入り。暗い背景でも見えるよう白フチ付きの画像） */
/* ヘッダー・フッターのロゴ（白文字＋赤い I の画像） */
.logo:has(.logo-image) { display: flex; align-items: center; }
.logo-image { display: block; width: auto; height: 32px; transition: transform .2s ease; }
.logo:hover .logo-image { transform: scale(1.04); }
footer .logo-image { height: 28px; }
.menu-button {
  position: relative; z-index: 2; display: flex; width: 48px; height: 48px; margin-left: auto;
  flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px;
  border: 0; color: white; background: transparent; cursor: pointer;
}
.menu-button span { width: 27px; height: 2px; background: currentColor; transition: transform .25s ease,width .25s ease,opacity .2s ease; }
.menu-button span:nth-child(2) { width: 19px; }
.menu-button.is-open span:first-child { width: 27px; transform: translateY(8px) rotate(45deg); }
.menu-button.is-open span:nth-child(2) { opacity: 0; }
.menu-button.is-open span:last-child { transform: translateY(-8px) rotate(-45deg); }
.menu-panel {
  position: absolute; top: 67px; right: 0; display: grid; width: min(390px,calc(100vw - 30px));
  padding: 18px 24px 24px; border-top: 2px solid var(--orange); background: #171719;
  box-shadow: 0 25px 45px rgba(0,0,0,.45); opacity: 0; visibility: hidden;
  transform: translateY(-10px); transition: opacity .22s ease,transform .22s ease,visibility .22s;
}
.menu-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-panel > a {
  display: flex; align-items: center; min-height: 58px; border-bottom: 1px solid #343438;
  color: #deddd8; font-size: 13px; font-weight: 600;
}
.menu-panel > a small { width: 42px; color: var(--orange); font: 600 9px/1 'Barlow Condensed'; }
.menu-panel > a:hover { color: white; }
.menu-socials { display: flex; gap: 6px; margin: 22px 0 0 -10px; }
.menu-socials a { display: grid; width: 42px; height: 42px; place-items: center; color: #aaa9a5; transition: color .2s ease; }
.menu-socials a:hover { color: var(--orange); }
.menu-panel .menu-support {
  justify-content: space-between; min-height: 50px; margin-top: 18px; padding: 0 16px;
  border: 0; color: white; background: var(--orange); font: 700 11px/1 'Barlow Condensed'; letter-spacing: .12em;
}

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative; display: flex; align-items: center;
  width: 100%; min-height: calc(100svh - 82px); margin: auto; padding: 52px 0;
  /* 背景・人物は画面端まで。文字だけヘッダーのロゴ位置にそろえる */
  --hero-gutter: max(24px,calc((100vw - 1240px)/2));
}
/* 画面幅いっぱいの煙・人物がヒーロー枠で四角く切れないようにする（横はみ出しは main で切る） */
.hero.snap-section { overflow: visible; }
.hero::after {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,#0d0d0f 0 26%,rgba(13,13,15,.96) 39%,rgba(13,13,15,.28) 67%,transparent 85%),
    linear-gradient(0deg,#0d0d0f 0,transparent 25%);
  content: '';
}
.hero-copy { position: relative; z-index: 3; width: 60%; padding-left: var(--hero-gutter); transform: translateY(-2%); }
.hero-image {
  position: absolute; z-index: 1; top: 0; right: -3%; bottom: 0; width: 65%;
  display: flex; justify-content: center; align-items: flex-start; overflow: hidden;
}
.hero-image::before {
  position: absolute; right: 1%; bottom: 1%; width: 76%; height: 42%;
  border-radius: 50%; background: var(--orange); opacity: .1; filter: blur(75px); content: '';
}
.hero-image img {
  position: relative; z-index: 1; width: auto; height: 100%; max-width: none;
  object-fit: contain; object-position: center top;
  filter: brightness(1.18) drop-shadow(24px 16px 25px rgba(0,0,0,.55));
}
.smoke {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 100vw;
  overflow: hidden; pointer-events: none; transform: translateX(-50%);
}
.smoke-filter { position: absolute; width: 0; height: 0; }
.smoke span {
  position: absolute; bottom: -52%; width: 430px; height: 150%; border-radius: 48%;
  background:
    radial-gradient(ellipse at 46% 18%,rgba(78,107,132,.65) 0 7%,rgba(42,69,94,.32) 15%,transparent 31%),
    radial-gradient(ellipse at 62% 43%,rgba(68,98,126,.58) 0 9%,rgba(34,59,84,.28) 20%,transparent 39%),
    radial-gradient(ellipse at 35% 69%,rgba(57,87,113,.52) 0 10%,rgba(27,49,72,.24) 23%,transparent 44%),
    linear-gradient(90deg,transparent 8%,rgba(28,54,78,.18) 33%,rgba(72,102,128,.52) 50%,rgba(29,55,79,.2) 68%,transparent 92%);
  filter: url(#smoke-warp) blur(13px); mix-blend-mode: screen; opacity: 0;
}
/* ヒーローが画面外にある間は煙の描画を止める（main.js が is-offscreen を付与） */
.hero.is-offscreen .smoke span { animation-play-state: paused; }
.smoke span:nth-child(1) {
  right: 4%; bottom: -54%; left: auto; animation: aura-rise 19s ease-in-out -4s infinite;
}
.smoke span:nth-child(2) {
  right: 24%; bottom: -33%; left: auto; width: 390px; animation: aura-drift 24s ease-in-out -15s infinite;
}
.smoke span:nth-child(3) {
  right: -10%; bottom: -24%; width: 360px; animation: aura-rise 27s ease-in-out -19s infinite;
}
.smoke span:nth-child(4) {
  right: 12%; bottom: -68%; width: 520px; animation: aura-drift 31s ease-in-out -8s infinite;
}
@keyframes aura-rise {
  0%,100% { opacity: .24; transform: translate3d(4%,10%,0) scale(.82) rotate(-4deg); }
  35% { opacity: .58; transform: translate3d(-5%,-7%,0) scale(1.03) rotate(3deg); }
  68% { opacity: .38; transform: translate3d(7%,-17%,0) scale(1.16) rotate(-2deg); }
}
@keyframes aura-drift {
  0%,100% { opacity: .2; transform: translate3d(-3%,12%,0) scale(.86) rotate(5deg); }
  32% { opacity: .44; transform: translate3d(8%,-3%,0) scale(1.08) rotate(-3deg); }
  72% { opacity: .33; transform: translate3d(-8%,-14%,0) scale(1.2) rotate(4deg); }
}
.kicker,.section-label { color: var(--orange); font: 700 13px/1 'Barlow Condensed', sans-serif; letter-spacing: .24em; }
.kicker-mobile { display: none; }
.hero-name-image {
  display: block; width: min(760px,100%); height: auto; margin-top: 20px;
  filter: drop-shadow(10px 12px 0 rgba(255,255,255,.025));
}
.hero-titles { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 42px; }
.hero-title {
  display: inline-block; margin-top: 0; padding-left: 16px; border-left: 4px solid var(--orange);
  font-size: clamp(20px,2vw,28px); font-weight: 800; line-height: 1.3; letter-spacing: -.045em;
}
.hero-lead { margin: 18px 0 0 20px; color: #b2b1ad; font-size: 11px; line-height: 1.9; letter-spacing: .02em; }
.scroll-cue { display: none; }
/* JS で1文字ずつ分割するまでは非表示（チラつき防止） */
[data-stagger]:not(.is-split) { visibility: hidden; }
.reveal-character { display: inline-block; opacity: 0; transform: translateY(.8em) rotate(3deg); }
.hero-image { opacity: 0; transform: translateX(5%) scale(1.03); }
.hero-name-image { opacity: 0; clip-path: inset(0 100% 0 0); }
.hero-actions { opacity: 0; }
.top-ready .reveal-character {
  animation: character-reveal .48s cubic-bezier(.2,.72,.2,1) var(--character-delay) forwards;
}
.top-ready .hero-image { animation: person-reveal 1.15s cubic-bezier(.16,.8,.2,1) .15s forwards; }
.top-ready .hero-name-image { animation: brush-name-reveal .9s cubic-bezier(.16,.8,.2,1) .42s forwards; }
.top-ready .hero-actions { animation: element-rise .65s ease 2.05s forwards; }
.top-ready .scroll-cue { animation: element-rise .55s ease 2.3s forwards; }
@keyframes character-reveal {
  0% { opacity: 0; transform: translateY(.8em) rotate(3deg); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}
@keyframes person-reveal {
  0% { opacity: 0; transform: translateX(5%) scale(1.03); filter: brightness(.65) blur(5px); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); }
}
@keyframes brush-name-reveal {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-3%) scale(1.08); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0) scale(1); }
}
@keyframes element-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal ----------------------------------------------------------- */
/* セクションは画面に入る少し手前から短く表示する（main.js で一度だけ is-visible を付与） */
.scroll-reveal {
  opacity: 0; transition:
    opacity .45s ease-out,
    transform .55s cubic-bezier(.2,.7,.2,1);
}
.scroll-reveal.reveal-up { transform: translate3d(0,24px,0); }
.scroll-reveal.reveal-left { transform: translate3d(-24px,0,0); }
.scroll-reveal.is-visible { opacity: 1; transform: none; }
.scroll-reveal.is-visible .fight-card,
.scroll-reveal.is-visible .goods-card {
  animation: scroll-child-rise .4s both;
}
.scroll-reveal.is-visible .fight-card:nth-child(2),
.scroll-reveal.is-visible .goods-card:nth-child(2) { animation-delay: .05s; }
.scroll-reveal.is-visible .fight-card:nth-child(3),
.scroll-reveal.is-visible .goods-card:nth-child(3) { animation-delay: .1s; }
.scroll-reveal.is-visible .goods-card:nth-child(4) { animation-delay: .15s; }
@keyframes scroll-child-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-actions {
  position: absolute; bottom: 34px; left: var(--hero-gutter); z-index: 4; display: flex; gap: 12px;
}
/* トップのボタンは文字を大きめに */
.hero-actions .button { min-width: 200px; font-size: 14px; }
/* SNSアイコン（スマホのみ表示。ボタンの上に横並び） */
.hero-socials { display: none; }
/* 小さなサービス名（Instagram など）の下に丸いアイコン */
.hero-socials a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #f4f2ed; }
.hero-socials small { color: #a8a6a0; font: 600 9px/1 'Barlow Condensed',sans-serif; letter-spacing: .14em; }
.hero-social-icon {
  display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
  background: rgba(13,13,15,.45); transition: border-color .2s ease,background .2s ease;
}
.hero-socials a:hover .hero-social-icon { border-color: var(--orange); background: var(--orange); }
.hero-socials svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.hero-socials .icon-fill { fill: currentColor; stroke: none; }
.button {
  display: flex; align-items: center; justify-content: space-between; min-width: 184px; padding: 17px 20px;
  border: 1px solid #777; font-size: 11px; font-weight: 700;
}
.button.primary { border-color: var(--orange); background: var(--orange); }
.button span { font-size: 17px; line-height: 1; }

/* Next fight -------------------------------------------------------------- */
.next-fight {
  display: grid; grid-template-columns: 105px 1fr 150px auto; gap: 14px 20px; align-items: center;
  min-height: 108px; padding: 20px max(24px, calc((100vw - 1240px)/2)); border-block: 1px solid #2d2d30; background: #121214;
}
/* 対戦カード（1段目）と日時・会場（2段目）を中央列に縦積みし、それ以外は2段ぶち抜き */
.next-fight > .section-label,.next-countdown,.next-fight > a { grid-row: 1/3; }
.next-data { grid-column: 2; grid-row: 1; }
.next-venue { grid-column: 2; grid-row: 2; }
.next-countdown { grid-column: 3; }
.next-fight > a { grid-column: 4; }
.next-data,.next-venue { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.next-data small { flex-basis: 100%; color: var(--orange); font: 700 11px/1 'Barlow Condensed'; letter-spacing: .15em; }
.next-data strong { font-size: clamp(22px,2.4vw,32px); line-height: 1.2; }
.next-data strong em { margin-inline: 8px; color: #777; font: 600 13px/1 'Barlow Condensed'; }
.next-data span,.next-venue span,.next-venue > small { color: #8a8985; font-size: 13px; }
.next-venue strong { font: 800 28px/1 'Barlow Condensed'; letter-spacing: .03em; }
.next-venue strong small { color: var(--orange); font-size: 12px; }
.next-countdown {
  display: flex; min-height: 78px; flex-direction: column; justify-content: center;
  padding-left: 18px; border-left: 1px solid #3a3a3d;
}
.next-countdown > small { color: #8a8985; font-size: 8px; font-weight: 600; }
.next-countdown > strong { display: flex; align-items: baseline; margin-top: 5px; color: white; font: 800 34px/.85 'Barlow Condensed'; }
.next-countdown > strong em { margin-left: 4px; color: var(--orange); font-size: 13px; font-style: normal; }
.next-countdown time { margin-top: 7px; color: #555450; font: 500 7px/1 'Barlow Condensed'; letter-spacing: .1em; }
.next-countdown .countdown-today,.next-countdown .countdown-finished { color: var(--orange); font-size: 20px; line-height: 1; }
.next-fight > a { padding: 12px 18px; border: 1px solid #777; font-size: 10px; }

.video-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #18181b; }
.video-frame::before {
  position: absolute; top: 0; left: 0; z-index: 1; width: 4px; height: 100%; background: var(--orange);
  pointer-events: none; content: '';
}
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-facade { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s ease; }
.video-facade:hover img { opacity: 1; }
.video-play {
  position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; border-radius: 12px;
  background: var(--orange); transform: translate(-50%,-50%); box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.video-play::after {
  position: absolute; top: 50%; left: 54%; border-block: 10px solid transparent; border-left: 17px solid white;
  transform: translate(-50%,-50%); content: '';
}

/* GALLERY セクション：上に写真の立体スライダー、下に試合動画（背景は同じ黒で続ける） */
.gallery-section { background: #050506; }
/* スライダーのぼかし背景を下に向かって消し、下の試合動画と境目なくつなげる */
.gallery-section .depth-bg { -webkit-mask-image: linear-gradient(to bottom,#000 70%,transparent); mask-image: linear-gradient(to bottom,#000 70%,transparent); }
.movie-block { display: flex; flex-direction: column; gap: 28px; padding: 20px max(24px,calc((100vw - 1240px)/2)) 90px; color: #f4f2ed; }
.movie-head h3 { margin-top: 14px; font-size: clamp(25px,3vw,40px); font-weight: 800; line-height: 1.3; letter-spacing: -.04em; }
/* 試合動画：横スクロール（PCは2枚＋次がのぞく幅、スマホは1枚＋次がのぞく幅） */
.movie-list {
  display: flex; gap: 16px; margin: 0 calc(-1 * max(24px,calc((100vw - 1240px)/2)));
  padding: 0 max(24px,calc((100vw - 1240px)/2)) 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: max(24px,calc((100vw - 1240px)/2));
  list-style: none; scrollbar-width: thin; scrollbar-color: #3a3a3e transparent;
}
.movie-list:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.movie-card { flex: 0 0 min(560px,44%); scroll-snap-align: start; }
.movie-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.movie-meta span { color: var(--orange); font: 700 12px/1 'Barlow Condensed',sans-serif; letter-spacing: .14em; }
.movie-meta b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }

/* Profile ----------------------------------------------------------------- */
.profile-section,.sponsor-section { padding: 110px max(24px, calc((100vw - 1240px)/2)); }
.profile-section { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(60px,8vw,110px); background: var(--cream); }
.section-intro h2,.sponsor-head h2,.contact-section h2 {
  margin-top: 23px; font-size: clamp(36px,5vw,68px); font-weight: 800; line-height: 1.25; letter-spacing: -.065em;
}
.profile-message {
  position: relative; max-width: 600px; padding: 3px 0 3px 22px; color: #3f3d39;
  border-left: 3px solid var(--orange); font-size: 14px; font-weight: 600; line-height: 2.15;
}
/* 人物だけを切り抜いた全身の写真を、枠なしでそのまま立たせる */
.profile-photo { position: relative; max-width: 300px; margin-top: 35px; }
.profile-photo img { display: block; width: 100%; height: auto; filter: drop-shadow(14px 18px 22px rgba(30,25,15,.22)); }
.profile-photo figcaption {
  margin-top: 16px; color: #8a867e; font: 600 9px/1 'Barlow Condensed'; letter-spacing: .16em;
}
.profile-content dl { margin-top: 45px; border-top: 2px solid #161616; }
.profile-content dl div { display: grid; grid-template-columns: 30% 70%; padding: 17px 0; border-bottom: 1px solid #c7c4bb; font-size: 12px; }
.profile-content dt { color: #77736b; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.profile-content dd { font-weight: 600; }
.profile-content dd small { color: #8a867e; font-size: 9px; font-weight: 500; }
.profile-content dl .profile-title { grid-template-columns: 30% 70%; padding-block: 21px; }
.profile-title dd { color: var(--orange); line-height: 1.5; }

/* Record ------------------------------------------------------------------ */
.record-section { padding: 110px max(24px, calc((100vw - 1240px)/2)); background: #fff; }
.record-heading { display: grid; grid-template-columns: .48fr 1.52fr; gap: 48px; align-items: end; }
.record-heading h2 { margin-top: 18px; font-size: clamp(54px,7vw,92px); font-weight: 800; line-height: 1; letter-spacing: -.07em; }
.record-summary {
  position: relative; display: grid; grid-template-columns: 215px 1fr; align-items: center; gap: 28px;
  min-height: 292px; overflow: hidden; padding: 74px 32px 30px; color: white;
  background:
    linear-gradient(115deg,transparent 0 67%,rgba(241,72,45,.055) 67% 68%,transparent 68%),
    #111113;
  clip-path: polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
}
.record-summary::before {
  position: absolute; top: 0; right: 22px; left: 0; height: 3px; background: var(--orange); content: '';
}
.record-summary::after {
  position: absolute; right: -42px; bottom: -55px; color: rgba(255,255,255,.025);
  font: 900 140px/1 'Barlow Condensed'; content: 'RECORD';
}
.summary-head {
  position: absolute; top: 23px; right: 32px; left: 32px; display: flex; align-items: center;
  padding-bottom: 14px; border-bottom: 1px solid #303034; font-family: 'Barlow Condensed',sans-serif;
}
.summary-head > span { color: #74736f; font-size: 9px; font-weight: 600; letter-spacing: .22em; }
.summary-head > strong { margin-left: 20px; font-size: 14px; letter-spacing: .08em; }
.summary-head > b {
  margin-left: auto; color: #858480; font-size: 9px; font-weight: 600; letter-spacing: .14em;
}
.summary-head em {
  margin-left: 8px; color: var(--orange); font-size: 18px; font-style: normal; font-weight: 800;
}
.rate-ring {
  position: relative; display: grid; width: 184px; aspect-ratio: 1; place-self: center; place-content: center;
  border: 8px solid #242426; border-radius: 50%; color: #fff; text-align: center;
  background:
    radial-gradient(circle at center,#171719 0 56%,transparent 57%),
    conic-gradient(from -90deg,var(--orange) 0 var(--rate,0%),#353539 var(--rate,0%) 100%);
  box-shadow:
    inset 0 0 0 6px #171719,
    inset 0 0 0 7px rgba(255,255,255,.09),
    0 12px 25px rgba(0,0,0,.3);
}
@property --rate {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.record-section.is-counted .rate-ring { animation: rate-fill 1.6s cubic-bezier(.16,.8,.2,1) .15s forwards; }
@keyframes rate-fill {
  from { --rate: 0%; }
  to { --rate: 61.5%; }
}
.rate-ring::before {
  position: absolute; inset: -13px; border-radius: 50%;
  background: repeating-conic-gradient(from -90deg,#77736c 0 1deg,transparent 1deg 10deg);
  mask: radial-gradient(circle,transparent 0 79%,#000 80% 82%,transparent 83%);
  opacity: .55; content: '';
}
.rate-ring::after {
  position: absolute; top: 50%; right: -19px; width: 38px; height: 3px;
  background: var(--orange); box-shadow: 0 0 12px rgba(241,72,45,.8); content: '';
}
.rate-ring strong {
  position: relative; z-index: 1; font: 800 43px/.85 'Barlow Condensed';
  letter-spacing: -.04em;
}
.rate-ring strong small { color: var(--orange); font-size: 17px; }
.rate-ring > span {
  position: relative; z-index: 1; margin-top: 10px; color: #aaa9a5;
  font-size: 8px; font-weight: 700; letter-spacing: .28em;
}
.record-summary dl {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr);
}
.record-summary dl div {
  position: relative; display: flex; min-height: 83px; flex-direction: column; justify-content: center; gap: 8px;
  padding: 13px 20px; border-left: 1px solid #39393c;
}
.record-summary dl div:nth-child(-n+3) { border-bottom: 1px solid #39393c; }
.record-summary dl div::before {
  position: absolute; top: 15px; left: -1px; width: 2px; height: 19px; background: #67666a; content: '';
}
.record-summary dt { color: #777672; font: 600 9px/1 'Barlow Condensed'; letter-spacing: .12em; }
.record-summary dd { font: 800 29px/1 'Barlow Condensed'; letter-spacing: -.02em; }
.record-summary dl div:first-child dd,.record-summary dl div:last-child dd { color: var(--orange); }
.record-summary dl div:first-child::before,.record-summary dl div:last-child::before { background: var(--orange); }
.record-note { margin: 50px 0 15px; color: #85817a; font-size: 10px; }
.fight-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.fight-card {
  position: relative; min-height: 320px; overflow: hidden; padding: 25px 28px;
  color: #f5f3ee; background: #171719; transition: transform .22s ease, box-shadow .22s ease;
}
.fight-card::after {
  position: absolute; right: -50px; bottom: -80px; width: 210px; height: 210px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.018); content: '';
}
.fight-card:hover { z-index: 2; transform: translateY(-3px); box-shadow: 0 18px 30px rgba(20,18,15,.16); }
.fight-card-latest {
  grid-column: 1/-1; min-height: 310px; padding: 32px 36px;
  background: linear-gradient(105deg,#171719 0 65%,#211816 65% 100%);
}
.fight-card-latest::before {
  position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--orange); content: '';
}
.fight-card-top { display: flex; align-items: center; gap: 14px; }
.result { display: inline-grid; width: 51px; height: 29px; place-items: center; color: white; background: #171717; font-size: 10px; font-weight: 700; }
.result-勝利 { background: var(--orange); }
.result-敗北 { color: #aaa9a5; background: #303034; }
.result-引分,.result-ex { color: #d1d0cb; background: #55545a; }
.fight-card time { color: #8c8b87; font: 600 12px/1 'Barlow Condensed'; letter-spacing: .1em; }
.fight-number {
  margin-left: auto; color: #39393c; font: 800 29px/1 'Barlow Condensed'; -webkit-text-stroke: 1px #5a595c;
}
.fight-card-main { position: relative; z-index: 1; margin-top: 32px; }
.fight-card-main > p { color: var(--orange); font: 700 10px/1 'Barlow Condensed'; letter-spacing: .18em; }
.fight-card-main h3 { margin-top: 6px; font-size: clamp(27px,3vw,42px); font-weight: 800; line-height: 1.2; letter-spacing: -.045em; }
.decision { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.decision strong { font: 700 21px/1 'Barlow Condensed'; }
.decision span { color: #858480; font: 500 12px/1 'Barlow Condensed'; }
.fight-card-event {
  position: absolute; right: 28px; bottom: 24px; left: 28px; z-index: 1;
  padding-top: 16px; border-top: 1px solid #3b3b3e;
}
.fight-card-event strong { display: block; overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.fight-card-event p { margin-top: 6px; color: #92918c; font-size: 9px; }
.fight-card-event span { display: block; margin-top: 4px; color: #666561; font-size: 8px; }
.fight-card-latest .fight-card-event { right: 36px; left: 36px; }
.fight-more-button {
  display: flex; width: min(360px,100%); min-height: 58px; margin: 28px auto 0;
  align-items: center; justify-content: space-between; padding: 0 20px;
  border: 1px solid #262626; color: #171717; background: transparent;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; cursor: pointer;
  transition: color .2s ease,background .2s ease,border-color .2s ease;
}
.fight-more-button b { color: var(--orange); font: 500 25px/1 'Barlow Condensed'; }
.fight-more-button:hover { border-color: #171717; color: white; background: #171717; }

/* Goods ------------------------------------------------------------------- */
.goods-section { padding: 110px max(24px, calc((100vw - 1240px)/2)); background: var(--cream); }
.goods-head { display: grid; grid-template-columns: 1fr .8fr; gap: 80px; align-items: end; }
.goods-head h1,.goods-head h2 { margin-top: 18px; font: 800 clamp(64px,8vw,112px)/.9 'Barlow Condensed',sans-serif; letter-spacing: .02em; }
.goods-head > p { color: #66625b; font-size: 12px; line-height: 2; }
.goods-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 60px; }
.goods-list:first-child { margin-top: 0; }

/* SHOP 上部（ポップな見出し）------------------------------------------------
   オレンジ地に水玉、白抜きの大きな「SHOP」、ステッカー風のロゴ、下端を流れる帯 */
.shop-hero {
  --shop-yellow: #ffd84a;
  position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px;
  min-height: clamp(520px,62vh,640px); overflow: hidden; padding: 70px max(24px,calc((100vw - 1240px)/2)) 110px;
  color: #171717;
  background:
    radial-gradient(circle,rgba(255,255,255,.18) 2.2px,transparent 2.8px) 0 0/22px 22px,
    var(--orange);
}
.shop-hero-copy { position: relative; z-index: 2; }
.shop-hero-label {
  display: inline-block; padding: 8px 14px; color: white; background: #171717;
  font: 700 13px/1 'Barlow Condensed',sans-serif; letter-spacing: .24em; transform: rotate(-3deg);
}
.shop-hero-title {
  margin-top: 18px; color: white; font: 900 clamp(110px,15vw,210px)/.82 'Barlow Condensed',sans-serif; letter-spacing: .01em;
  text-shadow: 6px 6px 0 #171717; -webkit-text-stroke: 3px #171717; paint-order: stroke fill;
}
.shop-hero-lead { margin-top: 26px; color: #171717; font-size: 14px; font-weight: 700; line-height: 1.9; }
.shop-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; list-style: none; }
.shop-hero-tags li {
  padding: 8px 14px; border: 2px solid #171717; border-radius: 999px; background: white;
  font-size: 12px; font-weight: 800; box-shadow: 3px 3px 0 #171717;
}
.shop-hero-tags li:nth-child(2) { background: var(--shop-yellow); }
.shop-hero-art { position: relative; z-index: 1; display: grid; place-items: center; }
/* ロゴの後ろのギザギザ（スターバースト） */
.shop-hero-burst {
  position: absolute; width: min(520px,100%); aspect-ratio: 1; background: var(--shop-yellow);
  clip-path: polygon(50% 0,57% 14%,71% 5%,72% 21%,88% 17%,82% 32%,98% 35%,87% 47%,100% 57%,85% 63%,93% 78%,77% 78%,76% 94%,63% 86%,54% 100%,46% 87%,32% 96%,30% 80%,14% 84%,19% 68%,3% 63%,14% 51%,0 41%,15% 35%,9% 20%,25% 21%,26% 5%,40% 13%);
  animation: shop-burst-spin 40s linear infinite;
}
@keyframes shop-burst-spin { to { transform: rotate(360deg); } }
.shop-hero-logo {
  position: relative; width: min(300px,72%); height: auto; transform: rotate(-4deg);
  filter: drop-shadow(8px 10px 0 rgba(23,23,23,.9));
  animation: shop-logo-float 4s ease-in-out infinite;
}
@keyframes shop-logo-float {
  0%,100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-10px); }
}
.shop-hero-badge {
  position: absolute; top: 6%; right: 2%; display: grid; width: 108px; height: 108px; place-items: center; align-content: center;
  border: 3px solid #171717; border-radius: 50%; color: #171717; background: white;
  font: 700 12px/1.05 'Barlow Condensed',sans-serif; letter-spacing: .12em; text-align: center;
  transform: rotate(12deg); box-shadow: 4px 4px 0 #171717;
}
.shop-hero-badge b { color: var(--orange); font-size: 24px; letter-spacing: .04em; }
/* 下端を流れる帯 */
.shop-ticker {
  position: absolute; right: -2%; bottom: 26px; left: -2%; z-index: 3; overflow: hidden;
  padding: 12px 0; border-block: 3px solid #171717; background: #171717; transform: rotate(-1.5deg);
}
.shop-ticker > div { display: flex; width: max-content; animation: shop-ticker 26s linear infinite; }
.shop-ticker span { padding-right: 0; color: var(--shop-yellow); font: 800 18px/1 'Barlow Condensed',sans-serif; letter-spacing: .14em; white-space: pre; }
@keyframes shop-ticker { to { transform: translateX(-50%); } }
.goods-card {
  display: flex; flex-direction: column; overflow: hidden; background: #fff;
  transition: transform .22s ease,box-shadow .22s ease;
}
a.goods-card:hover { transform: translateY(-3px); box-shadow: 0 18px 30px rgba(20,18,15,.12); }
.goods-image { position: relative; aspect-ratio: 1; overflow: hidden; background: #171719; }
.goods-image > img:not(.goods-placeholder) {
  width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
a.goods-card:hover .goods-image > img:not(.goods-placeholder) { transform: scale(1.045); }
/* 商品画像が未定のときは筆文字ロゴを薄く敷いた仮画像にする */
.goods-placeholder { position: absolute; top: 50%; left: 50%; width: 78%; transform: translate(-50%,-50%) rotate(-6deg); opacity: .14; }
.goods-placeholder-label {
  position: absolute; right: 0; bottom: 16px; left: 0; color: #5d5c58; text-align: center;
  font: 600 9px/1 'Barlow Condensed'; letter-spacing: .2em;
}
.goods-status {
  position: absolute; top: 12px; left: 12px; padding: 6px 9px; color: white; background: var(--orange);
  font: 700 10px/1 'Barlow Condensed'; letter-spacing: .14em;
}
.is-coming .goods-status { color: #171717; background: var(--cream); }
/* 商品写真（白背景が多い）の上では黒地にして見やすくする */
.is-coming .goods-image:has(> img:not(.goods-placeholder)) .goods-status { color: white; background: #171719; }
.is-sold-out .goods-status { color: #aaa9a5; background: #303034; }
.is-sold-out .goods-image > img:not(.goods-placeholder) { filter: grayscale(1); opacity: .55; }
.goods-body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.goods-body small { color: var(--orange); font: 700 9px/1 'Barlow Condensed'; letter-spacing: .18em; }
.goods-body h3 { margin: 9px 0 16px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.goods-price {
  display: flex; min-height: 35px; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 14px;
  border-top: 1px solid #e3e0d8; font: 700 20px/1 'Barlow Condensed'; letter-spacing: .02em;
}
.goods-price span { color: var(--orange); font-size: 17px; }
.is-coming .goods-price { color: #85817a; font-family: inherit; font-size: 12px; font-weight: 600; }
.goods-note { margin-top: 26px; color: #85817a; font-size: 10px; line-height: 1.8; }
.goods-note a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

/* Sub pages（cheer.html・shop.html） ------------------------------------- */
/* 単独ページは普通のページスクロール（トップのセクションスナップ・入れ子スクロールは使わない） */
.subpage { height: auto; overflow: visible; }
.subpage main { height: auto; padding-top: 82px; overflow: visible; scroll-snap-type: none; }
html:has(.subpage) { scroll-padding-top: 82px; }
.subpage .goods-section,.subpage .cheer-section { min-height: calc(100svh - 82px - 120px); }

/* Gallery（立体スライダー：手前の写真が抜けて、奥の写真が前に出てくる） ---- */
.depth-section {
  --gutter: max(24px,calc((100vw - 1240px)/2));
  --card-h: clamp(220px,calc(100svh - 82px - 330px),500px);
  --card-w: min(calc(var(--card-h) * 1.5),72vw);
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 30px;
  overflow: hidden; clip-path: inset(0); padding: 60px 0; color: #f4f2ed; background: #050506; isolation: isolate;
}
/* 背景：いまの写真を大きくぼかして敷く */
.depth-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.depth-bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: .32;
  filter: blur(38px) saturate(1.3); transform: scale(1.2);
}
.depth-bg img.is-changing { animation: depth-bg-in .8s ease both; }
@keyframes depth-bg-in { from { opacity: 0; transform: scale(1.18); } }
.depth-section::before {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; content: '';
  background:
    radial-gradient(ellipse at 60% 55%,transparent 20%,rgba(5,5,6,.85) 75%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 80px);
}
/* 背景の大きな番号（白抜き） */
.depth-number {
  position: absolute; bottom: -.18em; left: calc(var(--gutter) - .06em); z-index: -1; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14);
  font: 800 clamp(160px,26vw,380px)/1 'Barlow Condensed',sans-serif; letter-spacing: -.02em;
}
.depth-number.is-changing { animation: depth-number-in .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes depth-number-in { from { opacity: 0; transform: translateY(30px); } }

.depth-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 0 var(--gutter); }
.depth-head h2 { margin-top: 18px; font-size: clamp(36px,4.6vw,62px); font-weight: 800; line-height: 1.2; letter-spacing: -.06em; }
.depth-controls { display: flex; align-items: center; gap: 10px; }
.depth-count { margin-right: 14px; color: #8b8a87; font: 600 15px/1 'Barlow Condensed',sans-serif; letter-spacing: .12em; white-space: nowrap; }
.depth-count b { color: #f4f2ed; font-size: 26px; font-weight: 700; }
.depth-arrow {
  display: grid; width: 52px; height: 52px; place-items: center;
  border: 1px solid rgba(255,255,255,.22); color: #f4f2ed; background: rgba(0,0,0,.2); font-size: 18px; cursor: pointer;
  transition: border-color .2s ease,background .2s ease;
}
.depth-arrow:hover { border-color: var(--orange); background: var(--orange); }

/* 舞台：遠近感をつけて、カードを奥に向かって重ねる（位置は main.js が毎フレーム計算） */
.depth-stage {
  position: relative; height: calc(var(--card-h) + 40px); margin: 0;
  perspective: 1400px; perspective-origin: 30% 40%;
  list-style: none; cursor: grab; touch-action: pan-y; user-select: none;
}
.depth-stage.is-dragging { cursor: grabbing; }
.depth-stage:focus-visible { outline: none; }
.depth-stage:focus-visible .depth-card.is-front { outline: 2px solid var(--orange); outline-offset: 6px; }
.depth-card {
  position: absolute; top: 20px; left: var(--gutter); width: var(--card-w); height: var(--card-h);
  overflow: hidden; background: #1b1b1d; transform-origin: 50% 50%;
  box-shadow: 0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  will-change: transform,opacity;
}
.depth-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
/* 奥にあるほど暗く（--shade は main.js が 0〜1 で指定） */
.depth-card::before {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; content: '';
  background: #050506; opacity: var(--shade,0);
}
.depth-card::after {
  position: absolute; inset: auto 0 0; height: 40%; pointer-events: none; content: '';
  background: linear-gradient(to top,rgba(0,0,0,.65),transparent);
}
/* 手前のカードだけキャプションを出す */
.depth-card.is-front .depth-caption { opacity: 1; transform: none; }
.depth-caption {
  position: absolute; bottom: 18px; left: 20px; z-index: 2; opacity: 0; transform: translateY(8px);
  color: white; font: 700 13px/1 'Barlow Condensed',sans-serif; letter-spacing: .22em;
  transition: opacity .35s ease .1s,transform .35s ease .1s;
}
.depth-caption b { margin-right: 10px; color: var(--orange); }
.depth-bar { position: relative; height: 2px; margin: 0 var(--gutter); background: rgba(255,255,255,.12); }
.depth-bar span {
  position: absolute; top: 0; left: 0; height: 100%; width: calc(100% / 18);
  background: var(--orange); box-shadow: 0 0 10px rgba(241,72,45,.8);
  transform: translateX(calc(var(--bar,0) * 100%)); transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.depth-hint {
  position: absolute; right: var(--gutter); bottom: 26px;
  color: rgba(255,255,255,.35); font: 600 10px/1 'Barlow Condensed',sans-serif; letter-spacing: .3em;
}

/* Support（トップの「サポーター・SHOP」入口） --------------------------------- */
.support-section {
  display: flex; flex-direction: column; justify-content: center; gap: 44px;
  padding: 90px max(24px,calc((100vw - 1240px)/2)); background: var(--cream);
}
.support-head h2 { margin-top: 18px; font-size: clamp(36px,4.6vw,62px); font-weight: 800; line-height: 1.2; letter-spacing: -.06em; }
.support-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.support-card {
  position: relative; display: flex; min-height: 340px; flex-direction: column; overflow: hidden;
  padding: 36px 36px 32px; transition: transform .25s ease,box-shadow .25s ease;
}
.support-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(20,18,15,.16); }
.support-card h3 { position: relative; margin-top: 14px; font-size: clamp(26px,3vw,40px); font-weight: 800; line-height: 1.25; letter-spacing: -.05em; }
.support-card > p:not(.section-label) { position: relative; max-width: 58%; margin-top: 16px; font-size: 12px; line-height: 1.9; }
.support-card .section-label { position: relative; }
.support-card-button {
  position: relative; display: flex; width: fit-content; min-width: 210px; margin-top: auto;
  align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px;
  font-size: 13px; font-weight: 800;
}
.support-card-button span { font-size: 18px; transition: transform .2s ease; }
.support-card:hover .support-card-button span { transform: translateX(4px); }
/* サポーター：黒地＋Tシャツ（名前が入る特典の一言を下に） */
.support-card-cheer { color: white; background: #171719; }
.support-card-cheer > p:not(.section-label) { color: #b2b1ad; }
.support-card-cheer .support-card-button { color: white; background: var(--orange); }
.support-card-tee {
  position: absolute; top: 50%; right: 26px; width: clamp(170px,17vw,220px); margin: 0; text-align: center;
  transform: translateY(-50%); /* 画像＋一言のまとまりをカードの上下中央に */
}
.support-card-tee img {
  display: block; width: 100%; height: auto; transform: rotate(-5deg);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)); transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.support-card-cheer:hover .support-card-tee img { transform: rotate(-1deg) scale(1.04); }
.support-card-tee figcaption { margin-top: 10px; color: #d6d4cf; font-size: 10px; font-weight: 700; line-height: 1.6; }
.support-card-tee figcaption b { display: block; color: var(--orange); font: 800 15px/1.2 'Barlow Condensed',sans-serif; letter-spacing: .04em; }
/* SHOP：白地＋キャラ */
.support-card-shop { color: #171717; background: #fff; }
.support-card-shop > p:not(.section-label) { color: #66625b; }
.support-card-shop .support-card-button { color: white; background: #171717; }
.support-card-shop .chara {
  position: absolute; top: 50%; right: 30px; width: clamp(110px,12vw,150px);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)); transform-origin: bottom center;
  transform: translateY(-50%); /* カードの上下中央に */
}
.support-card-shop:hover .chara { transform: translateY(calc(-50% - 6px)) rotate(6deg); }

/* Cheer (サポーター) ---------------------------------------------------------- */
/* ④ 着物の柄（入場で着ている着物の「#」のような十字柄）。背景に薄く敷いて使う */
:root {
  --kimono-beige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23d9c6a0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M11 6v16M17 6v16M6 11h16M6 17h16M39 34v16M45 34v16M34 39h16M34 45h16'/%3E%3C/g%3E%3C/svg%3E");
  --kimono-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23182446' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M11 6v16M17 6v16M6 11h16M6 17h16M39 34v16M45 34v16M34 39h16M34 45h16'/%3E%3C/g%3E%3C/svg%3E");
}

/* ① 最初の画面：「あなたの名前を、リングへ。」（紺地に着物の柄）＋名前入りTシャツのプレビュー */
.sup-hero {
  position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: clamp(460px,62svh,580px); overflow: hidden;
  padding: 40px max(24px,calc((100vw - 1240px)/2)) 96px; color: #f4f2ed; background: #111a33;
}
.sup-hero > .photo-bg { --photo-shade: linear-gradient(90deg,rgba(13,19,40,.94) 0%,rgba(13,19,40,.78) 40%,rgba(13,19,40,.25) 75%,rgba(13,19,40,.4) 100%); }
.sup-hero-copy { position: relative; z-index: 1; max-width: 620px; }
.sup-hero-label {
  display: inline-block; padding: 7px 12px; color: #111a33; background: #d9c6a0;
  font: 700 12px/1 'Barlow Condensed',sans-serif; letter-spacing: .24em; transform: rotate(-2deg);
}
.sup-hero h1 { margin-top: 20px; font-size: clamp(42px,5.6vw,80px); font-weight: 800; line-height: 1.12; letter-spacing: -.06em; }
.sup-hero-catch { margin-top: 14px; color: var(--orange); font-size: clamp(18px,2vw,26px); font-weight: 800; letter-spacing: -.02em; }
.sup-hero-lead { max-width: 30em; margin-top: 20px; color: #d6d4cf; font-size: 15px; font-weight: 600; line-height: 1.9; }
@keyframes sup-name-pop { from { transform: scale(.8); } }
/* ステッカー風のバッジ */
.sup-badge {
  position: absolute; top: 40px; right: max(24px,calc((100vw - 1240px)/2)); display: grid; width: 116px; height: 116px; place-items: center; align-content: center;
  border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--orange);
  font-size: 17px; font-weight: 900; line-height: 1.15; text-align: center; transform: rotate(12deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.35); animation: sup-badge-float 3.6s ease-in-out infinite;
}
.sup-badge small { display: block; margin-bottom: 4px; font: 800 15px/1 'Barlow Condensed',sans-serif; letter-spacing: .04em; }
@keyframes sup-badge-float { 50% { transform: rotate(8deg) translateY(-6px); } }
/* 下端を流れる帯 */
.sup-ticker {
  position: absolute; right: -2%; bottom: 22px; left: -2%; overflow: hidden; padding: 9px 0;
  background: var(--orange); transform: rotate(-1.5deg); box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.sup-ticker > div { display: flex; width: max-content; animation: shop-ticker 28s linear infinite; }
.sup-ticker span { color: #fff; font: 800 15px/1 'Barlow Condensed',sans-serif; letter-spacing: .14em; white-space: pre; }

/* ② 締め切り（次の試合の14日前まで） */
/* ② 締め切り＋申し込みまでの流れ（1本の帯。PC は左右に、スマホは上下に） */
.sup-info {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  padding: 18px max(24px,calc((100vw - 1240px)/2)); color: #171717; background: #d9c6a0;
}
.sup-deadline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.sup-deadline-text { font-size: 13px; font-weight: 700; line-height: 1.7; }
.sup-deadline-text b { color: #111a33; font-weight: 900; }
.sup-deadline-count { display: flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 800; }
.sup-deadline-count strong { color: var(--orange); font: 800 34px/1 'Barlow Condensed',sans-serif; }
.sup-deadline-count small { margin-left: 8px; color: #5f5b54; font-size: 12px; }

/* ③ 申し込みまでの流れ（1行のコンパクトな帯） */
.sup-steps { flex: 0 0 auto; }
.sup-steps ol { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; list-style: none; }
.sup-steps li { display: flex; align-items: center; gap: 10px; }
.sup-steps li:not(:last-child)::after { margin-left: 4px; color: var(--orange); font-size: 16px; font-weight: 800; content: '→'; }
.sup-step-num {
  display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%;
  color: #fff; background: #111a33; font: 700 14px/1 'Barlow Condensed',sans-serif;
}
.sup-steps b { font-size: 13px; font-weight: 800; white-space: nowrap; }

/* ⑥ キャラクターの応援（フォームの右上から顔を出す） */
.cheer-form { position: relative; }
.sup-chara { position: absolute; top: -78px; right: 16px; width: 96px; pointer-events: none; }
.sup-chara img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); animation: sup-chara-bob 2.8s ease-in-out infinite; }
@keyframes sup-chara-bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
.sup-chara-bubble {
  position: absolute; top: 14px; right: calc(100% + 10px); padding: 8px 12px; border: 2px solid #171717; border-radius: 14px;
  color: #171717; background: #fff; font-size: 12px; font-weight: 800; white-space: nowrap;
}
.sup-chara-bubble::after {
  position: absolute; top: 50%; right: -8px; width: 12px; height: 12px; border-top: 2px solid #171717; border-right: 2px solid #171717;
  background: #fff; transform: translateY(-50%) rotate(45deg); content: '';
}

/* 「¥3,000から応援する」ボタン（メッセージ欄の中） */
.cheer-hero-cta {
  display: inline-flex; align-items: center; gap: 18px; margin-top: 18px; padding: 16px 22px;
  color: white; background: var(--orange); font-size: 14px; font-weight: 800; transition: background .2s ease;
}
.cheer-hero-cta:hover { background: #d93a21; }

/* ② SAIGO からのメッセージ＋ご支援の使いみち（紺地に着物の柄） */
.cheer-message {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 200px min(560px,100%); justify-content: center; align-items: center;
  gap: clamp(32px,5vw,64px); overflow: hidden; padding: 64px max(24px,calc((100vw - 1240px)/2));
  color: #f4f2ed; background: #111a33;
}
.cheer-message::before { position: absolute; inset: 0; z-index: -1; background: var(--kimono-beige) 0 0/56px 56px; opacity: .12; content: ''; }
.cheer-message-photo { max-width: 200px; margin: 0 auto; }
.cheer-message-photo img { display: block; width: 100%; height: auto; filter: drop-shadow(18px 22px 30px rgba(0,0,0,.45)); }
.cheer-message-body h2 { margin-top: 14px; font-size: clamp(24px,2.6vw,32px); font-weight: 800; line-height: 1.3; letter-spacing: -.04em; }
.cheer-message-text { margin-top: 18px; color: #d6d4cf; font-size: 13px; line-height: 2; }
.cheer-message-sign { display: block; width: 130px; height: auto; margin: 14px 0 0 auto; transform: rotate(-6deg); opacity: .9; }

/* ③ 特典カード＋申し込みフォーム（背景にごく薄く着物の柄） */
.cheer-section {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: min(720px,100%); justify-content: center; align-content: start; gap: 56px;
  padding: 64px max(24px,calc((100vw - 1240px)/2)) 80px; background: var(--cream);
}
.cheer-section::before { position: absolute; inset: 0; z-index: -1; background: var(--kimono-navy) 0 0/56px 56px; opacity: .05; content: ''; }
.cheer-perks-heading { margin-top: 12px; font-size: clamp(24px,2.6vw,32px); font-weight: 800; letter-spacing: -.05em; }
.cheer-perk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.perk-card {
  position: relative; padding: 16px 18px; border: 1px solid #dcd8ce; background: #fff;
  opacity: .55; transition: opacity .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.perk-card-price { color: #8a867e; font: 800 26px/1 'Barlow Condensed',sans-serif; letter-spacing: .01em; transition: color .25s ease; }
.perk-card-price small { margin-left: 2px; font-size: 16px; }
.perk-card h3 { margin-top: 8px; font-size: 15px; font-weight: 800; }
.perk-card > p:not(.perk-card-price) { margin-top: 6px; color: #66625b; font-size: 11px; line-height: 1.7; }
.perk-card-badge {
  position: absolute; top: 18px; right: 18px; padding: 5px 9px; color: white; background: var(--orange);
  font-size: 11px; font-weight: 800; opacity: 0; transform: scale(.8); transition: opacity .25s ease,transform .25s ease;
}
/* 選んだ金額で受け取れる特典は光らせる */
.perk-card.is-active { border-color: var(--orange); opacity: 1; box-shadow: 0 14px 30px rgba(241,72,45,.18),0 0 0 1px var(--orange); transform: translateY(-2px); }
.perk-card.is-active .perk-card-price { color: var(--orange); }
.perk-card.is-active .perk-card-badge { opacity: 1; transform: none; }
/* ⑤ 画面下に固定する申し込みボタン（スマホのみ。PC では使わない） */
.cheer-sticky { display: none; }

.cheer-form { display: flex; flex-direction: column; gap: 26px; padding: 32px; border: 1px solid #e3e0d8; background: #faf9f6; }
.cheer-step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cheer-step legend { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 700; }
.cheer-step legend > span {
  display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%;
  color: white; background: #171717; font: 700 13px/1 'Barlow Condensed';
}
.cheer-step legend em { color: #8a867e; font-size: 11px; font-style: normal; font-weight: 500; }
.cheer-required { padding: 3px 7px; color: white; background: var(--orange); font-size: 10px; font-weight: 700; line-height: 1; }
.cheer-field-note { margin-top: -4px; color: #8a867e; font-size: 11px; line-height: 1.7; }
.cheer-field-error { margin-top: -6px; color: #d12d14; font-size: 12px; font-weight: 700; }
.cheer-field input.is-invalid { border-color: #d12d14; background: #fff6f4; }
/* 金額は「3,000 5,000 10,000」と「30,000 50,000」の2段（6列に割って、上段は2列ずつ・下段は3列ずつ使う） */
.cheer-amounts { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; }
.cheer-amounts label { grid-column: span 2; }
.cheer-amounts label:nth-child(n+4) { grid-column: span 3; }
.cheer-amounts label { position: relative; cursor: pointer; }
.cheer-amounts input { position: absolute; opacity: 0; pointer-events: none; }
.cheer-amounts span {
  display: flex; min-height: 64px; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid #d6d2c8; color: #171717; background: #fff;
  font: 700 20px/1 'Barlow Condensed'; letter-spacing: .02em;
  transition: border-color .15s ease,background .15s ease,color .15s ease;
}
/* ④ 金額はチケット風（左右に切り欠き、特典はスタンプ風） */
.cheer-amounts span {
  -webkit-mask: radial-gradient(circle at 0 50%,transparent 7px,#000 7.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 7.5px) 100% 0/51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%,transparent 7px,#000 7.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 7.5px) 100% 0/51% 100% no-repeat;
}
.cheer-amounts span small {
  padding: 3px 6px; border: 1px dashed currentColor; border-radius: 3px; color: #8a867e;
  font: 700 10px/1 'Hiragino Sans','Noto Sans JP',sans-serif; letter-spacing: 0; transform: rotate(-3deg);
}
.cheer-amounts input:checked + span small { color: rgba(255,255,255,.85); }
.cheer-amounts label:hover span { border-color: #171717; }
.cheer-amounts input:checked + span { border-color: var(--orange); color: white; background: var(--orange); }
.cheer-amounts input:focus-visible + span { outline: 2px solid #171717; outline-offset: 2px; }
.cheer-field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.cheer-field > span { color: #5f5b54; font-size: 11px; font-weight: 600; }
.cheer-field input,.cheer-field textarea {
  width: 100%; border: 1px solid #d6d2c8; outline: 0; color: #171717; background: #fff; font-size: 13px;
  transition: border-color .2s ease,background .2s ease;
}
.cheer-field input { height: 48px; padding: 0 14px; }
.cheer-field textarea { min-height: 96px; padding: 12px 14px; }
.cheer-field input:focus,.cheer-field textarea:focus { border-color: var(--orange); }
.cheer-field input:disabled { color: #a19d95; background: #eeece6; }
.cheer-count { align-self: flex-end; color: #a19d95; font-size: 10px; }
.cheer-name-hint { display: flex; align-items: center; gap: 14px; margin-top: -4px; padding: 12px 14px; border: 1px dashed rgba(241,72,45,.5); background: #fff6f2; }
.cheer-name-hint[hidden] { display: none; }
.cheer-name-hint p { color: var(--orange); font-size: 12px; font-weight: 700; line-height: 1.6; }
.cheer-name-hint small { color: #a19d95; font-weight: 500; }
/* お名前欄の下の小さなTシャツ（背中） */
.sup-tee-mini { position: relative; flex: 0 0 120px; margin: 0; }
.sup-tee-mini svg { display: block; width: 100%; height: auto; fill: #cfd3d8; }
/* 背中に名前がたくさん並ぶ（3列）。自分の名前だけ横いっぱい・オレンジ */
.sup-tee-mini-names {
  position: absolute; top: 25%; right: 25%; left: 25%; display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2px 3px; list-style: none; text-align: center;
}
.sup-tee-mini-names li { overflow: hidden; color: rgba(27,37,71,.5); font: 700 5.5px/1.25 'Barlow Condensed',sans-serif; letter-spacing: .04em; }
.sup-tee-mini-names li.is-you {
  grid-column: 1/-1; margin-block: 1px; color: var(--orange);
  font: 800 8px/1.2 'Hiragino Sans','Noto Sans JP',sans-serif; text-overflow: ellipsis; white-space: nowrap;
}
.sup-tee-mini-names li.is-you.is-empty { color: rgba(27,37,71,.75); font: 800 7px/1.2 'Barlow Condensed',sans-serif; letter-spacing: .1em; }
.sup-tee-mini-names li.is-you.is-pop { animation: sup-name-pop .35s cubic-bezier(.3,1.6,.5,1); }
.cheer-anonymous { display: flex; align-items: center; gap: 8px; width: fit-content; color: #5f5b54; font-size: 12px; cursor: pointer; }
.cheer-anonymous input { width: 16px; height: 16px; accent-color: var(--orange); }
.cheer-submit {
  display: flex; width: 100%; min-height: 62px; align-items: center; justify-content: space-between;
  padding: 0 22px; border: 0; color: white; background: var(--orange);
  font-size: 15px; font-weight: 800; cursor: pointer; transition: background .2s ease;
}
.cheer-submit:hover { background: #d93a21; }
.cheer-submit > span:last-child { font-size: 20px; }
.cheer-secure { margin-top: -14px; color: #8a867e; font-size: 10px; line-height: 1.7; text-align: center; }
.cheer-notice { margin-top: -8px; }
/* 決済完了後のお礼 */
.cheer-thanks {
  position: relative; padding: 44px 40px 40px; overflow: hidden; outline: 0;
  border: 1px solid #e3e0d8; border-top: 4px solid var(--orange); background: #faf9f6;
  animation: cheer-thanks-in .6s cubic-bezier(.2,.8,.2,1) both;
}
.cheer-thanks .chara {
  position: absolute; top: 28px; right: 32px; width: 92px;
  animation: cheer-chara-jump .9s cubic-bezier(.3,1.5,.5,1) .25s both;
}
.cheer-thanks h3 { margin-top: 16px; padding-right: 110px; font-size: clamp(26px,3vw,38px); font-weight: 800; line-height: 1.35; letter-spacing: -.05em; }
.cheer-thanks > p:not(.section-label) { margin-top: 20px; color: #66625b; font-size: 12px; line-height: 2; }
.cheer-thanks .cheer-thanks-perk { padding: 12px 14px; border-left: 3px solid var(--orange); color: #171717; background: var(--cream); font-weight: 600; }
.cheer-thanks-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.cheer-thanks-actions a {
  display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 18px;
  border: 1px solid #171717; font-size: 12px; font-weight: 700; transition: color .2s ease,background .2s ease;
}
.cheer-thanks-actions .cheer-share { color: white; background: #171717; }
.cheer-thanks-actions a:hover { color: white; background: var(--orange); border-color: var(--orange); }
@keyframes cheer-thanks-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes cheer-chara-jump {
  0% { opacity: 0; transform: translateY(30px) rotate(-8deg); }
  60% { opacity: 1; transform: translateY(-8px) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}

/* Characters -------------------------------------------------------------- */
/* 背景を抜いたキャラクターイラスト。ホバーで少しだけ動かす */
.chara {
  display: block; height: auto; pointer-events: auto; user-select: none;
  filter: drop-shadow(0 10px 14px rgba(20,18,15,.12));
  transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.chara:hover { transform: rotate(-4deg) translateY(-4px); }

/* Sponsor ----------------------------------------------------------------- */
.sponsor-section { color: white; background: #171719; }
.sponsor-head { display: grid; grid-template-columns: 1fr .8fr; gap: 80px; align-items: end; }
.sponsor-head > p { color: #8b8a87; font-size: 12px; line-height: 2; }
/* 現在のスポンサー：白いカードにロゴを中央配置。Re:SHAL はロゴの赤背景とつなげる */
.partners .sponsor-block-head { margin-top: 64px; }
.partner-logos { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 26px; }
.partner-logos li { display: flex; height: 150px; align-items: center; justify-content: center; padding: 22px; background: #fff; }
.partner-logos img { display: block; width: auto; height: auto; max-width: 84%; max-height: 106px; }
.partner-logos .partner-logo-red { padding: 0; background: #f00; }
.partner-logos .partner-logo-red img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }

/* 小見出し（ロゴ掲載例・流れ） */
.sponsor-block-head { margin-top: 90px; }
.sponsor-block-head h3 { margin-top: 14px; font-size: clamp(25px,3vw,40px); font-weight: 800; line-height: 1.3; letter-spacing: -.04em; }
/* 開始までの流れ：3ステップを横に並べ、間に矢印 */
.flow-steps { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 28px; border-top: 1px solid #3b3b3e; }
.flow-steps > li { position: relative; display: flex; min-height: 145px; flex-direction: column; padding: 25px; border-right: 1px solid #3b3b3e; }
.flow-steps > li:first-child { border-left: 1px solid #3b3b3e; }
.flow-steps > li:not(:last-child)::after {
  position: absolute; z-index: 1; top: 50%; right: -12px; display: grid; width: 23px; height: 23px; place-items: center;
  border: 1px solid #3b3b3e; border-radius: 50%; color: var(--orange); background: #171719;
  font-size: 12px; line-height: 1; transform: translateY(-50%); content: '→';
}
.flow-steps small { color: var(--orange); font: 600 9px/1 'Barlow Condensed'; letter-spacing: .15em; }
.flow-steps strong { margin-top: 25px; font-size: 15px; }
.flow-steps span { margin-top: 9px; color: #8b8a87; font-size: 10px; }
/* 最後のお問い合わせ導線 */
.sponsor-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  margin-top: 56px; padding: 30px 34px; border-left: 4px solid var(--orange); background: #1f1f22;
}
.sponsor-cta p { color: #b2b1ad; font-size: 12px; line-height: 2; }
.sponsor-cta .button { flex: 0 0 auto; min-width: 290px; gap: 24px; color: white; font-size: 12px; }

/* Contact ----------------------------------------------------------------- */
.contact-form-section {
  display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(55px,8vw,120px);
  padding: 90px max(24px,calc((100vw - 1240px)/2)); color: #171717; background: var(--cream);
}
.contact-form-intro h2 { margin-top: 24px; font-size: clamp(42px,5.5vw,76px); font-weight: 800; line-height: 1.2; letter-spacing: -.065em; }
.contact-form-intro > p:not(.section-label) { margin-top: 28px; color: #66625b; font-size: 11px; line-height: 2; }
.contact-form-intro > div { display: flex; flex-direction: column; gap: 7px; margin-top: 45px; padding-top: 18px; border-top: 1px solid #c7c4bb; }
.contact-form-intro small { color: var(--orange); font: 700 8px/1 'Barlow Condensed'; letter-spacing: .18em; }
.contact-form-intro span { color: #77736b; font-size: 9px; }
.contact-form { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form label { display: flex; flex-direction: column; gap: 10px; }
.contact-form label > span { color: #5f5b54; font-size: 10px; font-weight: 600; }
.contact-form label b { margin-left: 5px; color: var(--orange); font-size: 8px; }
.contact-form input,.contact-form select,.contact-form textarea {
  width: 100%; border: 1px solid #c7c4bb; border-radius: 0; outline: 0;
  color: #171717; background: #fff; font-size: 12px;
  transition: border-color .2s ease,background .2s ease;
}
.contact-form input,.contact-form select { height: 50px; padding: 0 14px; }
.contact-form textarea { min-height: 135px; padding: 14px; resize: vertical; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color: var(--orange); background: #fff; }
.contact-form .privacy-check { flex-direction: row; align-items: center; gap: 10px; }
.privacy-check input { width: 15px; height: 15px; accent-color: var(--orange); }
.contact-form > button {
  display: flex; width: 100%; min-height: 58px; align-items: center; justify-content: space-between;
  padding: 0 20px; border: 0; color: white; background: var(--orange);
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.form-notice { padding: 13px 15px; border-left: 3px solid var(--orange); color: #625e57; background: #e5e1d8; font-size: 10px; line-height: 1.7; }

/* Footer ------------------------------------------------------------------ */
footer {
  display: flex; align-items: center; justify-content: space-between; min-height: 120px;
  padding: 0 max(24px, calc((100vw - 1240px)/2)); color: white; background: var(--black);
  scroll-snap-align: end; scroll-snap-stop: always;
}
footer p,footer > a:last-child { color: #777; font: 500 9px/1 'Barlow Condensed'; letter-spacing: .13em; }
.footer-socials { display: flex; align-items: center; gap: 9px; }
.footer-socials a {
  display: grid; width: 40px; height: 40px; place-items: center;
  border: 1px solid #343438; border-radius: 50%; color: #aaa9a5;
  transition: color .2s ease,border-color .2s ease,background .2s ease;
}
.footer-socials a:hover { border-color: var(--orange); color: white; background: var(--orange); }
.footer-socials svg,.menu-socials svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.footer-socials .icon-fill,.menu-socials .icon-fill { fill: currentColor; stroke: none; }

/* Photo design（写真をデザインに使う） ----------------------------------------
   写真背景は .photo-bg で全ページ共通のトーンにそろえる：
   少し色を抜いて暗くし、オレンジを薄く重ねる。撮られ方がバラバラでもサイトとしてまとまって見える。
   親要素には position: relative と isolation: isolate を指定する。
   暗さの向きは --photo-shade、写真のどこを見せるかは --photo-pos で個別に調整 */
.photo-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0b0b0d; }
.photo-bg img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-pos,center);
  filter: grayscale(.4) contrast(1.08) brightness(.62);
}
.photo-bg::before {
  position: absolute; inset: 0; z-index: 1; background: var(--orange); mix-blend-mode: soft-light; opacity: .45; content: '';
}
.photo-bg::after {
  position: absolute; inset: 0; z-index: 1; content: '';
  background: var(--photo-shade,linear-gradient(90deg,rgba(8,8,10,.9) 0%,rgba(8,8,10,.6) 50%,rgba(8,8,10,.25) 100%));
}
/* スクロールで写真がゆっくり動く（main.js の initParallax）。動かす分だけ上下に大きくしておく */
/* margin の % は横幅基準になるため、top で上にずらす */
.photo-bg img[data-parallax] { position: relative; top: -12%; height: 124%; will-change: transform; }

/* 次戦：告知画像を NEXT FIGHT の帯のすぐ上に */
/* overflow: hidden を付けると PC のグリッドで高さが 0 までつぶれるので付けない */
.next-fight-poster { grid-column: 1/-1; aspect-ratio: 1024/576; margin: 0 0 -30px; background: #000; }
.next-fight-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }


/* スポンサー：ロゴの掲出位置 */
.placement { display: grid; grid-template-columns: minmax(0,.75fr) 1.25fr; gap: clamp(36px,6vw,80px); align-items: center; margin-top: 70px; }
.placement .sponsor-block-head { margin-top: 0; }
.placement-photo { position: relative; width: 100%; max-width: 420px; margin: 0; background: #242426; }
.placement-photo img { display: block; width: 100%; height: auto; filter: saturate(.92); }
.placement-lead { margin-top: 24px; color: #b2b1ad; font-size: 13px; line-height: 2; }

/* お問い合わせ：セクション全体の背景を写真に。
   セクションの並び（暗い→明るい の交互）に合わせ、ここは白黒にした写真にクリーム色を重ねて明るく見せる */
.contact-form-section:has(> .photo-bg) { position: relative; isolation: isolate; }
.contact-form-section > .photo-bg {
  --photo-shade: linear-gradient(90deg,rgba(241,239,232,.8) 0%,rgba(241,239,232,.9) 45%,rgba(241,239,232,.95) 100%);
  background: var(--cream);
}
.contact-form-section > .photo-bg img { filter: grayscale(1) contrast(1.05) brightness(1.1); }
.contact-form-section > .photo-bg::before { opacity: .2; }
.contact-form-section:has(> .photo-bg) .contact-form-intro h2 { font-size: clamp(36px,4.4vw,64px); }
.contact-form-intro > p.contact-catch { margin-top: 22px; color: var(--orange); font-size: 15px; font-weight: 800; line-height: 1.6; }

/* サポーターページ：Tシャツのイメージ・お礼画面の写真 */
/* 横長の写真を特典欄の幅いっぱいに、説明はその下に */
.cheer-thanks-photo { height: 220px; margin: -44px -40px 28px; overflow: hidden; }
.cheer-thanks-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cheer-thanks:has(.cheer-thanks-photo) .chara { top: 190px; }

/* SHOP：リングサイドでの着用写真 */
.ringside {
  display: grid; grid-template-columns: minmax(0,1.15fr) .85fr; align-items: center; gap: clamp(32px,5vw,64px);
  margin-top: 70px; overflow: hidden; color: #f4f2ed; background: #171719;
}
.ringside-photo { height: 100%; margin: 0; }
/* 横長の写真（SAIGOとセコンド2人）をそのままの比率で */
.ringside-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 1340/754; object-fit: cover; }
.ringside-body { padding: 40px 48px 40px 0; }
.ringside-body h2 { margin-top: 18px; font-size: clamp(28px,3.4vw,46px); font-weight: 800; line-height: 1.3; letter-spacing: -.05em; }
.ringside-body > p:last-child { margin-top: 20px; color: #b2b1ad; font-size: 13px; line-height: 2; }

/* オープニング：ロゴの前に試合写真を一瞬ずつ切り替える */
.intro-flash { position: absolute; inset: 0; }
.intro-flash::after { position: absolute; inset: 0; background: var(--orange); mix-blend-mode: soft-light; opacity: .5; content: ''; }
.intro-flash img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  filter: grayscale(.55) contrast(1.3) brightness(.75);
  animation: intro-flash .42s ease-out forwards;
}
.intro-flash img:nth-child(1) { animation-delay: .1s; }
.intro-flash img:nth-child(2) { animation-delay: .45s; }
.intro-flash img:nth-child(3) { animation-delay: .8s; }
.intro-flash img:nth-child(4) { animation-delay: 1.15s; }
/* スマホ（縦長の画面）では写真の中央しか映らないので、本人が写る位置に寄せる */
.intro-flash img:nth-child(2) { object-position: 70% center; }
.intro-flash img:nth-child(3) { object-position: 18% center; }
@keyframes intro-flash {
  0% { opacity: 0; transform: scale(1.14); }
  12% { opacity: .8; }
  70% { opacity: .55; }
  100% { opacity: 0; transform: scale(1.02); }
}

/* Responsive -------------------------------------------------------------- */
@media (min-width: 781px) {
  /* GALLERY は写真スライダー（1画面分）＋試合動画なので、高さを中身に合わせる（PC） */
  .gallery-section { height: auto; min-height: calc(100svh - 82px); overflow: visible; }
  .gallery-section > .depth-section { min-height: calc(100svh - 82px); }
  /* 告知画像が入って1画面に収まらないので、この欄だけ高さを中身に合わせる（PC） */
  .overview-section { height: auto; min-height: calc(100svh - 82px); overflow: visible; }
  .next-fight { grid-template-columns: 105px 1fr 210px auto; }
  .next-countdown { min-height: 110px; padding-left: 24px; }
  .next-countdown > small { font-size: 13px; }
  .next-countdown > strong { margin-top: 8px; font-size: 64px; }
  .next-countdown > strong em { margin-left: 6px; font-size: 20px; }
  .next-countdown time { margin-top: 10px; color: #77766f; font-size: 13px; }
  .next-countdown .countdown-today,.next-countdown .countdown-finished { font-size: 30px; }
  .menu-button { display: none; }
  .menu-panel {
    position: static; display: flex; width: auto; margin-left: auto; padding: 0;
    border: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible;
    transform: none; transition: none;
  }
  .menu-panel > a {
    position: relative; min-height: auto; margin-left: 30px; border: 0; color: #aaa9a5;
    font: 700 10px/1 'Barlow Condensed'; letter-spacing: .14em;
  }
  .menu-panel > a small { display: none; }
  /* 今いるページ（aria-current="page"）を強調 */
  .menu-panel > a[aria-current="page"] { color: var(--orange); }
  .menu-panel > a[aria-current="page"]::after {
    position: absolute; right: 0; bottom: -12px; left: 0; height: 2px; background: var(--orange); content: '';
  }
  .menu-panel { align-items: center; }
  .menu-socials { gap: 2px; margin: 0 0 0 22px; }
  .menu-socials a { width: 32px; height: 32px; }
  .menu-socials svg { width: 16px; height: 16px; }
}

@media (max-width: 780px) {
  .logo-image { height: 28px; }
  /* iPhone は入力欄の文字が 16px 未満だと、押したときに画面を自動で拡大してしまうので 16px にそろえる */
  input:not([type='checkbox']):not([type='radio']),select,textarea { font-size: 16px !important; }
  /* スマホはブラウザ標準のページスクロールにする。
     入れ子スクロール＋強制スナップは iOS Safari で描画が追いつかなくなるため使わない */
  html { scroll-padding-top: 68px; }
  body { height: auto; overflow: visible; }
  main { height: auto; overflow: visible; overflow-x: clip; scroll-snap-type: none; }
  .dark-shell { padding-top: 68px; }
  .snap-section,.overview-section { height: auto; min-height: 0; overflow: visible; }
  /* スマホでは負荷の高い効果を軽くする：ヘッダーのぼかし・煙のゆらぎフィルター・オープニングの煙の数 */
  .site-header { width: 100%; height: 68px; padding-inline: 15px; background: rgba(13,13,15,.96); backdrop-filter: none; }
  .intro-smoke span:nth-child(n+7) { display: none; }
  /* 煙は動かさず、合成（mix-blend-mode）もしない静止した光にする */
  .smoke span { filter: blur(13px); mix-blend-mode: normal; opacity: .32; animation: none; }
  .smoke span:nth-child(n+3) { display: none; }
  /* 日本語は端末内蔵フォント（iPhone はヒラギノ）を優先し、Webフォントのダウンロード・再描画を避ける。
     ヒラギノのない端末（Android など）は従来どおり Noto Sans JP を使う */
  :root { font-family: 'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif; }
  .menu-panel { top: 60px; }
  /* スマホは上から順に積む（文字 → ボタンは下寄せ）。画面が低い iPhone Safari でも重ならない */
  .hero {
    min-height: calc(100svh - 68px); flex-direction: column; align-items: stretch;
    padding: clamp(24px,9svh,90px) var(--hero-gutter) 62px;
    --hero-gutter: 18px;
  }
  .hero::after {
    background:
      linear-gradient(90deg,#0d0d0f 0,rgba(13,13,15,.95) 33%,rgba(13,13,15,.25) 79%,transparent 100%),
      linear-gradient(0deg,#0d0d0f 0,transparent 32%);
  }
  .hero-copy { width: auto; padding-left: 0; transform: none; }
  .hero-main { margin-top: clamp(14px,5svh,56px); }
  .hero-name-image { width: 88%; max-width: none; margin-top: 0; margin-left: -3%; }
  .hero-details { margin-top: clamp(20px,6svh,64px); }
  .hero-image { top: 4%; right: -42%; bottom: 0; width: 116%; opacity: .88; }
  .hero-image img { width: auto; height: 84%; }
  .kicker { max-width: 210px; font-size: 10px; line-height: 1.4; }
  .kicker-desktop { display: none; }
  .kicker-mobile { display: inline; }
  .hero-titles { gap: 8px; margin-top: 0; }
  .hero-title {
    max-width: 275px; margin-top: 0; padding: 0 0 0 12px; border-top: 0; border-left-width: 3px;
    font-size: clamp(18px,5.2vw,23px);
  }
  .hero-lead { max-width: 225px; margin: 18px 0 0 15px; font-size: 9px; line-height: 1.9; }
  .scroll-cue {
    position: absolute; bottom: 18px; left: 50%; z-index: 4; display: flex; align-items: center; gap: 9px;
    color: #8e8d89; font: 600 7px/1 'Barlow Condensed'; letter-spacing: .18em;
    transform: translateX(-50%);
  }
  .scroll-cue span {
    position: relative; width: 1px; height: 30px; overflow: hidden; background: #3d3d40;
  }
  .scroll-cue span::after {
    position: absolute; top: -100%; left: 0; width: 1px; height: 75%; background: var(--orange);
    animation: scroll-line 2.1s ease-in-out infinite; content: '';
  }
  @keyframes scroll-line {
    0% { transform: translateY(0); }
    70%,100% { transform: translateY(240%); }
  }
  .hero-actions {
    position: relative; inset: auto; display: flex; width: auto; margin-top: auto; padding-top: 22px;
    flex-direction: column; gap: 7px;
  }
  /* 矢印の有無で高さが変わらないよう、ボタンの高さをそろえる */
  .hero-actions .button { min-width: 0; width: 100%; min-height: 48px; padding: 12px 13px; font-size: 13px; }
  .hero-socials { display: flex; gap: 14px; margin-bottom: 8px; }
  .overview-section {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 24px 18px 48px;
  }
  .overview-section > * { flex: 0 0 auto; }
  .next-fight-poster { margin: 16px 0 0; }
  .fight-tagline { align-items: flex-start; flex-direction: column; gap: 12px; padding: 18px; }
  .overview-section .next-fight {
    display: flex; min-height: 0; flex-direction: column; align-items: stretch; gap: 15px;
    width: 100%; padding: 22px 18px;
  }
  .next-fight > a { align-self: flex-start; }
  .next-message,.next-data,.next-venue { width: 100%; gap: 6px 12px; }
  .next-data strong { font-size: 24px; }
  .next-venue strong { font-size: 24px; }
  .next-data span,.next-venue span,.next-venue > small { font-size: 11px; }
  .next-countdown {
    display: grid; grid-template-columns: 1fr auto 1fr; width: 100%; min-height: 72px;
    align-items: center; padding: 12px 15px; border: 1px solid #36363a;
    background: #171719;
  }
  .next-countdown > small { justify-self: start; }
  .next-countdown > strong { justify-self: center; margin-top: 0; font-size: 38px; }
  .next-countdown time { justify-self: end; margin-top: 0; text-align: right; }
  .movie-block { gap: 20px; padding: 10px 20px 70px; }
  .movie-list { gap: 10px; margin: 0 -20px; padding: 0 20px 10px; scroll-padding-inline: 20px; }
  .movie-card { flex-basis: 84%; }
  .movie-meta b { font-size: 14px; }
  .profile-section,.sponsor-section { padding: 75px 20px; }
  .profile-section,.sponsor-head { grid-template-columns: 1fr; gap: 45px; }
  /* スマホ：PCと同じプロフィール写真を、見出し〜メッセージの背景に透かして敷く */
  .profile-section { position: relative; isolation: isolate; overflow: hidden; }
  .profile-photo {
    position: absolute; top: 20px; right: -4%; z-index: -1; width: 62%; max-width: none; margin: 0;
    background: none; opacity: .2; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom,#000 22%,transparent 48%),linear-gradient(to left,#000 60%,transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom,#000 22%,transparent 48%),linear-gradient(to left,#000 60%,transparent 100%);
    mask-composite: intersect;
  }
  .profile-photo figcaption { display: none; }
  .profile-photo img { filter: grayscale(.3) contrast(1.05); }
  .record-section { padding: 75px 20px; }
  .record-heading { grid-template-columns: 1fr; gap: 35px; }
  .record-summary { grid-template-columns: 132px 1fr; min-height: 0; gap: 13px; padding: 68px 16px 22px; }
  .summary-head { top: 20px; right: 18px; left: 18px; }
  .summary-head > strong { display: none; }
  .summary-head > b { letter-spacing: .06em; }
  .rate-ring { width: 124px; border-width: 6px; }
  .rate-ring strong { font-size: 31px; }
  .rate-ring::after { right: -13px; width: 24px; }
  .record-summary dl { grid-template-columns: 1fr 1fr; }
  .record-summary dl div { min-height: 67px; padding: 10px 11px; }
  .record-summary dd { font-size: 19px; }
  .fight-list { grid-template-columns: 1fr; gap: 10px; }
  .fight-card,.fight-card-latest { grid-column: auto; min-height: 300px; padding: 22px; }
  .fight-card-latest .fight-card-event,.fight-card-event { right: 22px; left: 22px; }
  .fight-card-main h3 { font-size: 31px; }
  /* スマホ：戦績のキックは見出しの右に、SHOP・お問い合わせのキャラは小さめに */
  .subpage main { padding-top: 68px; }
  html:has(.subpage) { scroll-padding-top: 68px; }
  .subpage .goods-section,.subpage .cheer-section { min-height: 0; }
  /* スマホ：ギャラリーはカードを画面幅に合わせ、矢印は隠してスワイプで操作 */
  .depth-section { --gutter: 20px; --card-w: calc(100vw - 110px); --card-h: calc(var(--card-w) / 1.5); gap: 24px; padding: 70px 0 64px; }
  .depth-arrow { display: none; }
  .depth-count { margin-right: 0; }
  .depth-stage { perspective: 900px; perspective-origin: 20% 40%; }
  .depth-caption { bottom: 12px; left: 14px; font-size: 11px; }
  .depth-hint { bottom: 30px; }
  .support-section { gap: 32px; padding: 70px 20px; }
  .support-cards { grid-template-columns: 1fr; gap: 12px; }
  .support-card { min-height: 0; padding: 28px 22px 24px; }
  .support-card > p:not(.section-label) { max-width: 62%; font-size: 11px; }
  .support-card-button { min-width: 0; margin-top: 22px; padding: 14px 18px; font-size: 12px; }
  /* スマホは見出しと重ならないよう、少し小さく・少し下寄りの中央に */
  .support-card-tee { top: 56%; right: 12px; width: 112px; }
  .support-card-tee figcaption { margin-top: 6px; font-size: 8.5px; }
  .support-card-tee figcaption b { font-size: 12px; }
  .support-card-shop .chara { top: 56%; right: 14px; width: 80px; }
  .cheer-section { grid-template-columns: 1fr; gap: 80px; padding: 48px 20px 64px; } /* 特典とフォームの間は、フォーム右上のキャラの分だけ広め */
  .sup-hero { align-items: flex-end; min-height: 520px; padding: 32px 20px 96px; }
  .sup-hero > .photo-bg { --photo-pos: 70% 18% !important; --photo-shade: linear-gradient(180deg,rgba(13,19,40,.15) 0%,rgba(13,19,40,.55) 40%,rgba(13,19,40,.95) 78%); }
  .sup-hero h1 { font-size: clamp(34px,10vw,44px); }
  .sup-hero-lead { font-size: 13px; }
    .sup-badge { top: 20px; right: 16px; width: 84px; height: 84px; font-size: 13px; }
  .sup-badge small { font-size: 12px; }
  .sup-ticker { bottom: 24px; }
  .sup-ticker span { font-size: 15px; }
  .sup-info { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 16px; }
  .sup-deadline { justify-content: center; text-align: center; }
  .sup-deadline-text { font-size: 12px; }
  .sup-deadline-count strong { font-size: 30px; }
  .sup-steps ol { justify-content: center; }
  .sup-steps ol { flex-wrap: nowrap; gap: 6px; }
  .sup-steps li { gap: 5px; }
  .sup-steps li:not(:last-child)::after { margin-left: 1px; font-size: 12px; }
  .sup-step-num { width: 20px; height: 20px; font-size: 12px; }
  .sup-steps b { font-size: 11px; white-space: nowrap; }
  .sup-chara { top: -60px; right: 10px; width: 74px; }
  .sup-chara-bubble { top: 8px; font-size: 11px; }
  .cheer-message { grid-template-columns: 110px 1fr; gap: 18px; align-items: start; padding: 48px 20px; }
  .cheer-message-photo { max-width: 110px; }
  .cheer-message-text { font-size: 13px; }
  .cheer-message-sign { width: 130px; }
        .perk-card { padding: 14px 12px; }
  .perk-card-price { font-size: 22px; }
  .perk-card h3 { font-size: 13px; }
  .perk-card-badge { top: 10px; right: 10px; padding: 3px 6px; font-size: 10px; }
  /* ⑤ 画面下に固定する申し込みボタン */
  .cheer-sticky:not([hidden]) { display: block; }
  .cheer-sticky {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 90; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(13,13,15,.92); backdrop-filter: blur(10px); box-shadow: 0 -8px 24px rgba(0,0,0,.25);
  }
  .cheer-sticky-button {
    display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: space-between; padding: 0 18px;
    border: 0; color: white; background: var(--orange); font-size: 14px; font-weight: 800; cursor: pointer;
  }
  .cheer-sticky-button > span:last-child { font-size: 18px; }
  .subpage:has(.cheer-sticky:not([hidden])) footer { padding-bottom: 96px; }
  .cheer-form { gap: 24px; margin-inline: -4px; padding: 22px 16px; }
  /* 金額はスマホでは上段2つ＋下段3つ */
  .cheer-amounts span { min-height: 58px; font-size: 19px; }
  .cheer-submit { min-height: 58px; font-size: 14px; }
  .cheer-thanks { margin-inline: -4px; padding: 30px 18px 22px; }
  /* キャラは1行目「サポートいただき、」の右の空きに置き、見出しは全幅で使う */
  .cheer-thanks .chara { top: 14px; right: 14px; width: 56px; }
  .cheer-thanks h3 { padding-right: 0; font-size: 22px; }
  .cheer-thanks > p:not(.section-label) { font-size: 11px; }
  .cheer-thanks > p br { display: none; }
  .cheer-thanks-actions { grid-template-columns: 1fr; }
  .goods-section { padding: 75px 20px; }
  .goods-head { grid-template-columns: 1fr; gap: 28px; }
  /* スマホ：SHOP 上部はロゴを上、文字を下に */
  .shop-hero { grid-template-columns: 1fr; gap: 10px; min-height: 0; padding: 36px 20px 96px; }
  .shop-hero-art { order: -1; }
  .shop-hero-burst { width: min(330px,88vw); }
  .shop-hero-logo { width: min(190px,50vw); }
  .shop-hero-badge { top: 2%; right: 4%; width: 82px; height: 82px; font-size: 10px; }
  .shop-hero-badge b { font-size: 18px; }
  .shop-hero-title { margin-top: 14px; font-size: 104px; text-shadow: 4px 4px 0 #171717; }
  .shop-hero-lead { margin-top: 18px; font-size: 12px; }
  .shop-hero-lead br { display: none; }
  /* タグはスマホでも3つ横一列に（画面幅に合わせて文字を少し小さく） */
  .shop-hero-tags { flex-wrap: nowrap; gap: 6px; }
  .shop-hero-tags li { flex: 0 1 auto; padding: 6px 8px; border-width: 1.5px; font-size: clamp(9px,2.8vw,11px); white-space: nowrap; box-shadow: 2px 2px 0 #171717; }
  .shop-ticker { bottom: 22px; }
  .shop-ticker span { font-size: 15px; }
  .goods-list { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; }
  .goods-body { padding: 14px 14px 16px; }
  .goods-body h3 { font-size: 12px; }
  .goods-price { font-size: 18px; }
  .goods-status { top: 8px; left: 8px; padding: 5px 7px; font-size: 9px; }
  .goods-placeholder-label { bottom: 10px; font-size: 8px; }
  .sponsor-block-head { margin-top: 60px; }
  .partners .sponsor-block-head { margin-top: 48px; }
  .partner-logos { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
  .partner-logos li { height: 104px; padding: 14px; }
  .partner-logos img { max-height: 76px; }
  .sponsor-block-head h3 { font-size: 24px; }
  .flow-steps { grid-template-columns: 1fr; }
  .flow-steps > li,.flow-steps > li:first-child { min-height: 0; padding: 22px 4px 26px; border: 0; border-bottom: 1px solid #3b3b3e; }
  .flow-steps strong { margin-top: 14px; }
  .flow-steps > li:not(:last-child)::after { top: auto; right: auto; bottom: -12px; left: 50%; transform: translateX(-50%) rotate(90deg); }
  .sponsor-cta { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 40px; padding: 24px 20px; }
  .sponsor-cta p { font-size: 11px; }
  .sponsor-cta p br { display: none; }
  .sponsor-cta .button { min-width: 0; font-size: 11px; }
  .contact-form-section { grid-template-columns: 1fr; gap: 45px; padding: 65px 20px; }
  .form-row { grid-template-columns: 1fr; }
  footer { flex-wrap: wrap; gap: 20px; padding-block: 32px; }
  footer p { order: 3; width: 100%; }
  /* スマホ：写真を使ったデザイン */
  .placement { grid-template-columns: 1fr; gap: 30px; margin-top: 56px; }
  .placement-photo { max-width: 320px; margin-inline: auto; }
  .cheer-thanks-photo { height: 170px; margin: -30px -18px 22px; }
  .cheer-thanks:has(.cheer-thanks-photo) .chara { top: 150px; }
  .ringside { grid-template-columns: 1fr; gap: 0; margin-top: 50px; }
  .ringside-photo img { height: auto; }
  .ringside-body { padding: 28px 22px 32px; }
}

/* 縦が短めのスマホ（iPhone SE 2/3 など）：SNSアイコンを少し小さくして、ボタンまで1画面に収める */
@media (max-width: 780px) and (max-height: 700px) {
  .hero-socials { gap: 12px; margin-bottom: 4px; }
  .hero-socials a { gap: 4px; }
  .hero-social-icon { width: 36px; height: 36px; }
  .hero-socials svg { width: 16px; height: 16px; }
}

/* iPhone SE など縦が短いスマホ：ヒーローを詰めてボタンまで1画面に収める */
@media (max-width: 780px) and (max-height: 620px) {
  .hero { padding-top: 18px; padding-bottom: 20px; }
  .hero-name-image { width: 72%; }
  .hero-main { margin-top: 10px; }
  .hero-details { margin-top: 14px; }
  .hero-lead { margin-top: 10px; }
  .hero-actions { padding-top: 14px; gap: 6px; }
  .hero-actions .button { min-height: 42px; padding-block: 10px; }
  .scroll-cue { display: none; }
}

@media (max-width: 430px) {
  .record-summary { grid-template-columns: 1fr; padding-top: 74px; }
  .rate-ring { width: 145px; margin-block: 6px 14px; }
  .record-summary dl { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sup-badge,.sup-ticker > div,.sup-chara img { animation: none; }
  .rate-ring { --rate: 61.5%; }
  .scroll-reveal,.scroll-reveal * { animation: none !important; transition: none !important; }
  .scroll-reveal { opacity: 1; transform: none; }
  .reveal-character,.hero-image,.hero-name-image,.hero-actions,.scroll-cue {
    animation: none !important; opacity: 1; transform: none; clip-path: none; filter: none;
  }
  .smoke span { animation: none; opacity: .08; }
  .shop-hero-burst,.shop-hero-logo,.shop-ticker > div { animation: none; }
  .scroll-cue span::after { animation: none; top: 25%; }
}