@charset "utf-8";
/* フルスロ TOP デザイン（実装フェーズ）
   1280幅ステージ＋全面レイヤー背景。content=中央960。 */

:root{
  --gold:#c8a24a; --gold2:#e7cf86; --ink:#1c1a14;
  --stage:1280px; --content:960px; --leather:#141210;
  --edge:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--ink);
  /* 基調背景＋ヘッダー上部コーナーの大きなダイヤ(dia_top_01/02)。他のダイヤ装飾は各セクションに分割配置＝下部「背景ダイヤ帯」参照 */
  background-color:#e9e3d6;
  background-image:
    url("../img/dia/sparkle_top.png"),
    url("../img/dia/sparkle_bottom.png"),
    url("../img/dia/dia_fv.png"),
    url("../img/bg_line_top.png"),
    url("../img/bg_line_bottom.png"),
    url("../img/bg.jpg");
  background-position: center 250px, center calc(100% - 100px), center 200px, center top, center bottom, center top;
  background-size: 100% auto, 100% auto, 100% auto, 100% auto, 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
  /* キラキラ(上・下)は発光表現なので screen で合成（素材のゴールド味が黄色く乗るのを防ぐ）＝総評ページと同じ扱い。他レイヤーは通常合成 */
  background-blend-mode: screen, screen, normal, normal, normal, normal;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  line-height:1.7; -webkit-text-size-adjust:100%; overflow-x:hidden;
}
/* 総評ページ(/review/)：グローバル背景(body)に キラキラ(sparkle_review_top)＋上部ライン(bg_line_review)＋base(bg) を全幅レイヤーで配置。
   キラキラは最上層・幅100%/高さauto/center top＝グローバル背景と同じ扱い（.siteの1280クリップを受けず全幅で表示）。ダイヤはロゴ起点の.rev-heroへ移設済み */
body.is-review{
  background-image:
    url("../img/dia/sparkle_review_top.png"),
    url("../img/dia/sparkle_bottom.png"),
    url("../img/bg_line_review.png"),
    url("../img/dia/dia_review.png"),
    url("../img/bg_line_bottom.png"),
    url("../img/bg_review.jpg");
  /* 下部(sparkle_bottom / bg_line_bottom)の配置はTOPと同値に統一 */
  background-position: center top, center calc(100% - 100px), center top, center 200px, center bottom, center top;
  background-size: 100% auto, 100% auto, 100% auto, 100% auto, 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
  /* キラキラ(上・下)は発光表現なので screen で合成（素材のゴールド味が黄色く乗るのを防ぐ）＝TOPと同じ扱い。他レイヤーは通常合成 */
  background-blend-mode: screen, screen, normal, normal, normal, normal;
}
img{max-width:100%;height:auto;vertical-align:bottom}
a{color:inherit;text-decoration:none}
html.splash-lock{overflow:hidden}
/* 左ナビ/フッターナビのアンカー(#schedule/#result/#performer)クリック時をスムーススクロールに */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* スクロール先がビューポート上端に張り付かないよう少し余白を確保 */
#schedule, #result, #performer{scroll-margin-top:24px}

/* ===== スプラッシュ ===== */
.splash{position:fixed; inset:0; z-index:9999; background:#0e0d0b url("../img/bg_splash.png") repeat; display:flex; align-items:center; justify-content:center; opacity:1; visibility:visible}
.splash.is-hide{opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s ease}
/* --splash-w = ロゴ幅。タイトルもこの幅に両端揃えするので、ロゴサイズを変えれば字間も自動で追従する */
.splash__inner{text-align:center; padding:24px; --splash-w:min(84vw,430px)}
.splash__logo,.splash__title,.splash__sub{opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s ease}
.splash__logo{display:block; width:var(--splash-w); margin:0 auto}
/* スプラッシュの文字はゴシック（本文の明朝を上書き）・白
   タイトルはロゴと同じ幅に text-align-last:justify で両端揃え＝字間がロゴ幅いっぱいに広がる */
.splash__title{width:var(--splash-w); margin:10px auto 6px; line-height:1.3; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; color:#fff; font-size:clamp(13px,4vw,19px); letter-spacing:0; text-indent:0; text-align:justify; text-align-last:justify; font-weight:700}
/* サブ行もロゴ／タイトルと同じ幅。罫線は flex:1 で余りを埋めるので、テキスト長が変わっても両端は常に一致する */
.splash__sub{width:var(--splash-w); margin:0 auto; display:flex; align-items:center; justify-content:center; gap:12px; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; color:#fff; font-size:clamp(11px,3.2vw,14px); letter-spacing:.16em}
.splash__txt{flex:none}
/* 伸びる演出は width ではなく scaleX（flex:1 と width アニメは併用できないため）。テキスト側から外へ伸ばす */
.splash__line{flex:1 1 auto; height:1px; background:#fff; transform:scaleX(0); transition:transform .7s ease}
.splash__line:first-child{transform-origin:right center}
.splash__line:last-child{transform-origin:left center}
.splash.is-play .splash__logo{opacity:1; transform:none; transition-delay:.05s}
.splash.is-play .splash__title{opacity:1; transform:none; transition-delay:.55s}
.splash.is-play .splash__sub{opacity:1; transform:none; transition-delay:1.05s}
.splash.is-play .splash__line{transform:scaleX(1); transition-delay:1.2s}
@media (prefers-reduced-motion:reduce){.splash__logo,.splash__title,.splash__sub{transition:none;opacity:1;transform:none}
  .splash__line{transition:none; transform:scaleX(1)}}

/* ===== reveal（スクロールフェードイン／TIGERGATE方式） =====
   ブラー＋移動でふわっと出す。data-reveal で方向を指定（既定=下から）。
   ※blur等のfilterは position:fixed の基準を作ってしまうため、
     固定ナビを内包する .fv 系には filter を使わない（下の .fv 用指定を参照） */
.reveal,.reveal-onload{
  opacity:0; filter:blur(8px);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), filter .7s cubic-bezier(.2,.7,.2,1);
}
.reveal:not(.is-inview),.reveal-onload:not(.is-inview){transform:translate3d(0,24px,0)}
.reveal[data-reveal=fade]:not(.is-inview),.reveal-onload[data-reveal=fade]:not(.is-inview){transform:none}
.reveal[data-reveal=fade-left]:not(.is-inview),.reveal-onload[data-reveal=fade-left]:not(.is-inview){transform:translate3d(-24px,0,0)}
.reveal[data-reveal=fade-right]:not(.is-inview),.reveal-onload[data-reveal=fade-right]:not(.is-inview){transform:translate3d(24px,0,0)}
.reveal.is-inview,.reveal-onload.is-inview{opacity:1; transform:none; filter:none}
/* FVは固定ナビ(position:fixed)を含むのでブラーを使わない */
.fv.reveal-onload,.fv.reveal-onload.is-inview{filter:none}
@media (prefers-reduced-motion:reduce){.reveal,.reveal-onload{opacity:1!important;transform:none!important;filter:none!important;transition:none}}

/* ===== ステージ（1280）＝全面レイヤー背景 ===== */
/* overflow:hidden を外す＝各セクション横のダイヤ(.sec__title::before/.sec__body::before は width:100vw)が1280で切られず全幅で出る。
   横スクロールは body{overflow-x:hidden} で抑止済み */
.site{position:relative; max-width:var(--stage); margin:0 auto}

/* ===== コンテンツ（中央960） ===== */
.content{position:relative; z-index:2; max-width:var(--content); margin:0 auto; padding:0 16px}

/* FV（z-indexをフッター(2)より上に＝固定した左右フロートナビをフッター前面に重ねる） */
.fv{position:relative; z-index:20; text-align:center; padding-top:0}
/* 総評ヘッダーはロゴをtranslateY(-16px)で上げているため、上端の余白を維持（0にすると見切れる） */
.fv--review{padding-top:18px}
.fv__logo img{width:min(88vw,600px)}
/* TOPヘッダー：大ダイヤをロゴ起点で左右配置（ビューポート幅基準をやめる）＝総評(.rev-hero)と同方式。
   ダイヤの内側端を「ロゴ中心(50%)±(ロゴ半幅min(44vw,300px)+隙間)」にアンカーするので、画面が広くてもロゴの両脇に留まる */
.fv-hero{position:relative; max-width:1080px; margin:0 auto}
.fv-hero .fv__logo{position:relative; z-index:2}
.fv-hero::before, .fv-hero::after{content:""; position:absolute; top:34px; z-index:1; width:clamp(170px,19vw,269px); aspect-ratio:269/226; background:center/contain no-repeat; pointer-events:none}
.fv-hero::before{right:50%; margin-right:calc(min(44vw,300px) + 16px); background-image:url("../img/dia_top_01.png")}
.fv-hero::after{left:50%;  margin-left:calc(min(44vw,300px) + 16px); background-image:url("../img/dia_top_02.png")}
/* 総評ヘッダーのバランス（目標デザイン準拠）：ロゴ大きめ＋総評タイトルをロゴ直下へ寄せる */
.fv--review .fv__logo img{width:min(88vw,600px)}
/* 総評バナーの上下余白を詰める（上=section padding-top / 下=title margin-bottom + section padding-bottom）
   ※.sec{padding:40px 0} が後方にあり後勝ちするため、詳細度を上げて(.sec.sec--review)確実に上書き */
.sec.sec--review{padding:0 0 25px}
.sec--review .sec__title{margin-bottom:2px}
/* 総評タイトルバナーは review だけ大きく（TOPの各セクションタイトルは 8.5vw/最大100pxのまま） */
.sec--review .sec__title img{height:clamp(96px,12vw,160px)}
/* 大ダイヤはロゴ起点で左右配置＝中央寄せ固定幅コンテナ(.rev-hero max1080)の左右端に置く。
   ビューポートでなくこのコンテナ基準なので、画面が広くてもロゴの両脇に留まる（絶対配置＝コンテナ高さに縛られず見切れない） */
.rev-hero{position:relative; max-width:1080px; margin:0 auto}
.rev-hero .fv__logo{position:relative; z-index:2; transform:translateY(-16px)}
/* ダイヤの内側端を「ロゴ中心(50%)±(ロゴ半幅min(40vw,255px)+隙間)」にアンカー＝サイズを変えても常にロゴの両脇に付く（TOPとは別画像 dia_top_review0*） */
.rev-hero::before, .rev-hero::after{content:""; position:absolute; top:8px; z-index:1; width:clamp(150px,16vw,220px); aspect-ratio:186/156; background:center/contain no-repeat; pointer-events:none}
.rev-hero::before{right:50%; margin-right:calc(min(44vw,300px) + 16px); background-image:url("../img/dia/dia_top_review01.png")}
.rev-hero::after{left:50%;  margin-left:calc(min(44vw,300px) + 16px); background-image:url("../img/dia/dia_top_review02.png")}
.fv__area{position:relative; max-width:820px; margin:0 auto}
.fv__slider{position:relative}
/* 額縁（bg_slider.png）＝常時表示・高さを規定 */
.fv__frame{display:block; width:100%; height:auto; position:relative; z-index:1}
/* スライドは額縁の内側開口部に収める（インセットは金線の内側に合わせて調整） */
.fv__slides{position:absolute; z-index:2; top:7%; left:6.4%; right:6.4%; bottom:8%; overflow:hidden}
.fv-slide{position:absolute; inset:0; opacity:0; transition:opacity .9s ease}
.fv-slide.is-active{opacity:1}
.fv-slide a{display:block; width:100%; height:100%}
.fv-slide img{width:100%; height:100%; object-fit:cover; display:block}

/* ===== ナビ（スライダーエリア基準・左右にぴったり寄せ） ===== */
.side-nav{position:absolute; z-index:60}
.side-nav a{transition:transform .2s ease}
.side-nav a:hover{transform:translateY(-2px)}
/* 左：スライダー左端に寄せ・下辺揃え（シャドウ約2.4%を除外／外へ押し出し＋18pxオーバーラップ） */
.side-nav--left{left:0; bottom:2.4%; transform:translateX(calc(-100% - 6px)); display:flex; flex-direction:column; gap:8px}
.side-nav--left a img{width:clamp(110px,12.5vw,160px); display:block; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
/* 右：スライダー右端に寄せ・上下揃え（フレーム可視部＝上0.4%/下2.4%を除外・18pxオーバーラップ） */
.side-nav--right{right:0; top:0.4%; bottom:2.4%; transform:translateX(calc(100% + 6px)); display:flex; align-items:stretch}
.side-nav--right img{height:100%; width:auto; filter:drop-shadow(0 3px 8px rgba(0,0,0,.4)); transition:transform .2s ease}
/* 右バナーも左ナビと同じ持ち上がりホバー（imgを動かす＝位置決めtransformと競合させない） */
.side-nav--right:hover img{transform:translateY(-2px)}

/* ===== セクション ===== */
.sec{position:relative; z-index:2; clear:both; padding:40px 0}
.sec__title{text-align:center; margin:0 0 22px}
/* 高さで揃える＝各タイトルの文字サイズを均一化（画像は全て高さ109px・幅だけ違うため）。幅はmax-widthで溢れ防止 */
.sec__title img{height:clamp(64px,8.5vw,100px); width:auto; max-width:92vw}
.placeholder{text-align:center; color:#8a7f66; border:1px dashed var(--gold); border-radius:10px; padding:48px 12px; background:rgba(255,255,255,.55)}
.notice{position:relative; z-index:2; max-width:760px; margin:8px auto 30px; font-size:clamp(13px,1.15vw,16px); font-weight:700; color:#6b6455; text-align:center}

/* ===== ページャー（スケジュール/結果/総評 共通） ===== */
.pager{position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:26px auto 0}
.pager__num,.pager__nav{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border:1px solid var(--gold);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,238,222,.92)); color:#6b5c33; font-weight:700; font-size:14px; letter-spacing:.02em;
  text-decoration:none; border-radius:3px; transition:background .2s ease, color .2s ease, transform .2s ease}
.pager__num:hover,.pager__nav:hover{background:linear-gradient(180deg,var(--gold2),var(--gold)); color:#3a2f14; transform:translateY(-2px)}
.pager__num.is-current{background:linear-gradient(180deg,var(--gold2),var(--gold)); color:#3a2f14; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:default}
.pager__nav.is-disabled{opacity:.38; pointer-events:none}
.pager__dots{color:#8a7f66; padding:0 2px}
@media (max-width:1200px){
  .pager{gap:1.2vw; margin-top:5vw}
  .pager__num,.pager__nav{min-width:9vw; height:9vw; padding:0 2.4vw; font-size:3.2vw; border-radius:0.6vw}
}

/* ===== 背景ダイヤ帯（全幅・各セクション背面・左右マージン配置）＝dia_img分割素材 =====
   各素材は1280幅で背景と同幅＝width:100vwで背景に一致。中央は透過(コンテンツ用)。 */
.sec__title, .sec__body{position:relative}
.fv::before, .sec__title::before, .sec__body::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:100vw; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-position:center top; background-size:100% auto;
}
/* FV（上部コーナー＋左右のダイヤ＋金スパークル） */
/* sparkle_top / dia_fv とも body 背景の全幅レイヤーへ移設済み（.site の1280クリップを避けるため）＝この擬似要素は不要 */
.fv::before{ display:none }
/* 総評ヘッダーの擬似要素装飾は無効（キラキラは body 背景の全幅レイヤーへ移設・TOP専用の sparkle_top/dia_fv も出さない） */
.fv--review::before{ display:none }
/* セクションタイトル横（バンドをタイトルに縦センター） */
#schedule  .sec__title::before{ background-image:url("../img/dia/dia_schedule_title.png"); height:calc(100vw*290/1280); top:calc(50% + 30px); transform:translate(-50%,-50%) }
#result    .sec__title::before{ background-image:url("../img/dia/dia_result_title.png");   height:calc(100vw*277/1280); top:calc(50% + 30px); transform:translate(-50%,-50%) }
#performer .sec__title::before{ background-image:url("../img/dia/dia_review_title.png");   height:calc(100vw*263/1280); top:calc(50% + 30px); transform:translate(-50%,-50%) }
/* セクションコンテンツ部（バンドをコンテンツ上部に） */
#schedule  .sec__body::before{ background-image:url("../img/dia/dia_schedule_content.png"); height:calc(100vw*237/1280); top:50%; transform:translate(-50%,-50%) }
#result    .sec__body::before{ background-image:url("../img/dia/dia_result_content.png");   height:calc(100vw*162/1280); top:50%; transform:translate(-50%,-50%) }
#performer .sec__body::before{ background-image:url("../img/dia/dia_review_content.png");   height:calc(100vw*179/1280); top:50%; transform:translate(-50%,-50%) }
/* フッター上のダイヤ：側面(side)＝フッター直上の左右／中央クラスタ(center)＝フッター上辺に少し被る */
/* フッターの外に置いた装飾用要素（高さ0・フッター上端が基準）。z-index:5 = セクション装飾(2)より前・フッター(10)より奥
   ※フッターの子(擬似要素)にするとフッター背景より必ず前面になるため、外に出している */
.footer-dia{position:relative; z-index:5; height:0}
.footer-dia::before, .footer-dia::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:100vw; pointer-events:none; background-repeat:no-repeat; background-position:center top; background-size:100% auto;
}
/* sparkle_bottom は body 背景レイヤーへ移設（ページ背景と screen 合成するため）。ここはダイヤのみ */
.footer-dia::before{ background-image:url("../img/dia/dia_footer_side.png"); background-position:center bottom; height:calc(100vw*539/1280); top:calc(-1 * (100vw*450/1280)) }
.footer-dia::after{ background-image:url("../img/dia/dia_footer_center.png"); height:calc(100vw*179/1280); top:50px }

/* ===== スケジュールカレンダー（※セル地はダミー。ヘッダー背景画像は支給後に差し替え） ===== */
.cal{max-width:1040px; margin:0 auto}
/* 罫線＝gapから覗くコンテナ背景の1本のみ（各セルのborderは付けない＝二重線になるため）。
   曜日ヘッダーとセルで同じゴールドグラデを敷き、ヘッダーからセルまで線が連続して見えるようにする。
   ヘッダー下の区切りは margin ではなく padding-bottom＝自身の背景(金)が出るので線が途切れない */
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:2px 2px 0; margin-bottom:0; background:linear-gradient(180deg,var(--gold2),var(--gold))}
.cal-wd{background:url("../img/bg_calender_header.png") center/cover no-repeat; color:#e7d9b6; text-align:center; padding:9px 0; font-size:clamp(12px,1.25vw,16px); font-weight:700; letter-spacing:.06em}
.cal-wd--0{color:#e58a92} .cal-wd--6{color:#84b2e2}
.cal-clip{overflow:hidden; transition:max-height .42s cubic-bezier(.4,0,.2,1)}
/* padding=外周の枠線（内側の罫線と同じgap幅・同じ金グラデ）。上paddingが曜日ヘッダーとの区切り線を兼ねる */
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:2px; background:linear-gradient(180deg,var(--gold2),var(--gold))}
.cal-cell{position:relative; min-height:98px; background:url("../img/bg_calender.png") center/cover no-repeat; padding:3px; display:flex; align-items:center; justify-content:center}
.cal-cell.is-past{opacity:.38}
.cal-cell.is-today{box-shadow:0 0 0 2px var(--gold) inset}
.cal-date{position:absolute; top:4px; left:6px; font-size:12px; color:#6b6455; font-weight:700; letter-spacing:.02em}
.cal-cell.cal-wd--0 .cal-date{color:#d0656e} .cal-cell.cal-wd--6 .cal-date{color:#5c8dc0}
.cal-cell.is-today .cal-date{color:var(--gold)}
.cal-mo{color:var(--gold)}
.cal-logo{display:flex; align-items:center; justify-content:center; border:none; background:none; padding:0; cursor:pointer; transition:transform .15s ease}
.cal-logo:hover{transform:scale(1.06)}
.cal-logo img{max-width:48px; max-height:48px; width:auto; height:auto}
.cal-badge{width:30px; height:30px; border-radius:50%; border:1px solid #f2e0a6; background:linear-gradient(145deg,var(--gold2),var(--gold)); color:#241a04; font-weight:800; font-size:15px; line-height:1; cursor:pointer; box-shadow:0 0 0 3px rgba(200,162,74,.16)}
.cal-pop{position:absolute; z-index:30; left:50%; top:calc(100% + 4px); transform:translateX(-50%); min-width:190px; max-width:240px; background:#fff; border:1px solid var(--gold); border-radius:9px; box-shadow:0 10px 28px rgba(0,0,0,.28); padding:10px 12px; text-align:left}
.cal-pop--up{top:auto; bottom:calc(100% + 4px)}
/* 端の列は中央寄せ(left:50%)だとポップアップが画面外へ見切れる（土曜=右端が特に顕著）。
   左2列(日月)はセル左端そろえ・右2列(金土)はセル右端そろえに切り替える */
.cal-cell.cal-wd--0 .cal-pop,
.cal-cell.cal-wd--1 .cal-pop{left:0; right:auto; transform:none}
.cal-cell.cal-wd--5 .cal-pop,
.cal-cell.cal-wd--6 .cal-pop{left:auto; right:0; transform:none}
.cal-pop[hidden]{display:none}
.cal-pop__ttl{font-size:12px; color:var(--gold); font-weight:700; margin-bottom:6px}
.cal-pop__row{display:flex; align-items:center; gap:9px; padding:6px 0; border-top:1px solid #eee}
.cal-pop__logo{width:32px; height:32px; object-fit:contain; flex:none}
.cal-pop__meta{font-size:12px; line-height:1.5}
.cal-toggle{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:12px; padding:10px; background:transparent; border:none; color:var(--gold); font-size:13px; letter-spacing:.12em; cursor:pointer}
.cal-toggle__chev{font-size:10px; transition:transform .3s}
.cal.is-open .cal-toggle__chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.cal-clip{transition:none}}
@media (max-width:600px){
  /* SPはセルが低く、中央配置のロゴが左上の日付と重なる。
     ロゴ/バッジを下端寄せ(align-items:flex-end)にして「上=日付・下=ロゴ」に分離する。
     日付は絶対配置なので影響を受けない */
  .cal-cell{min-height:62px; align-items:flex-end; padding-bottom:4px}
  .cal-logo img{max-width:30px; max-height:30px}
  .cal-badge{width:24px; height:24px; font-size:12px}
  .cal-date{font-size:10px}
}

/* ===== スケジュールカード列 ===== */
.sch-list{max-width:1040px; margin:30px auto 0; display:flex; flex-direction:column; gap:8px}
.sch-empty{text-align:center; color:#8a7f66; margin:24px 0; font-size:14px}
.sch-card{position:relative; aspect-ratio:951/246; background:url("../img/card_bg_schedule.png") center/100% 100% no-repeat}
/* 日付＝レザー帯(縦15.04〜38.62%)の上下センター。%指定なのでサイズ変化に常に連動
   基準サイズ＝数字の大きさ。月/日/曜日（かっこ含む）は em で小さく。 */
.sch-card__date{position:absolute; top:15.04%; left:6%; right:6%; height:23.58%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:"Noto Serif JP",serif; font-weight:600; font-size:clamp(17px,2.4vw,29px); letter-spacing:.04em; line-height:1}
/* 内側はインラインでベースライン揃え（数字大・単位小が同じベースラインに乗る） */
.sch-card__date .d-inner{white-space:nowrap}
.sch-card__date .d-num{font-size:1em}
.sch-card__date .d-u{font-size:.66em; margin:0 .02em 0 .01em}
.sch-card__date .d-w{font-size:.66em; margin-left:.16em}
/* ボディ枠の中央=57.5%(マーブル中央)＝企画名/店名はこの中央に固定。ロゴ/写真だけ後述のtransformで下げる */
.sch-card__body{position:absolute; left:5%; right:7%; top:35.5%; bottom:20.5%; display:flex; align-items:center; gap:clamp(8px,1.6vw,18px)}
/* ロゴ/写真は名前(57.5%)から独立して下方向へずらす（名前は動かさない）。%は自身の高さ基準＝カードにスケール連動 */
.sch-card__logo{height:86%; width:auto; max-width:24%; object-fit:contain; transform:translateY(15%)}
.sch-card__photo{height:88%; width:auto; aspect-ratio:1; object-fit:cover; box-shadow:0 2px 5px rgba(0,0,0,.2); background:#171717; transform:translateY(15%)}
/* 演者なし（企画のみ）の空枠：写真と同サイズを確保しつつ見た目は空白（テキスト位置を揃えるため） */
.sch-card__photo--empty{background:transparent; box-shadow:none}
/* 企画名＋店名＝横並び・上下中央揃え（店名が改行しても、企画名は店名の全高に対して中央揃えを維持） */
.sch-card__names{display:flex; flex-direction:row; align-items:center; gap:clamp(6px,1vw,12px); min-width:0; flex:1 1 auto; height:100%}
.sch-card__kikaku{flex:none; font-weight:700; color:#5d5442; font-size:clamp(13px,1.7vw,21px); white-space:nowrap; max-width:45%; overflow:hidden; text-overflow:ellipsis}
/* 店名ボックス：残り幅を取るだけ（高さ=店名の自然な高さ）。names側のalign-items:centerで企画名と中央揃え */
.sch-card__storebox{flex:1 1 auto; min-width:0}
/* 店名：縮小せず基準サイズ固定。長ければ自然に改行（中央揃えのまま上下に伸びる）。line-height:1で縦詰め
   overflow-wrap:anywhere＝半角スペース無しの長い名前も単語途中で折り返す（横あふれ防止） */
.sch-card__store{width:100%; font-weight:800; color:#5d5442; font-size:clamp(18px,2.9vw,35px); letter-spacing:.02em; font-family:"Times New Roman","Noto Serif JP",serif; white-space:normal; overflow-wrap:anywhere; line-height:1; display:block}
@media (max-width:600px){
  .sch-card__body{gap:7px; left:5%; right:7%}
  .sch-card__store{font-size:17px}
  .sch-card__date{font-size:18px}
}

/* ===== 結果カード列（黒帯なし・企画ロゴ＋【企画名】店名＋総評ボタン） ===== */
.res-list{max-width:1040px; margin:30px auto 0; display:flex; flex-direction:column; gap:8px}
.res-empty{text-align:center; color:#8a7f66; margin:24px 0; font-size:14px}
.res-card{position:relative; aspect-ratio:962/190; background:url("../img/card_bg_result.png") center/100% 100% no-repeat}
/* 左：企画ロゴ＋【企画名】店名。総評ボタン手前まで。カード縦中央に配置 */
/* 内容はマーブル部(上枠12%〜ドット装飾ライン68%)の中央≒42%に。bottomで枠を上へ寄せ、ロゴ高さは%で相殺しサイズ維持 */
.res-card__main{position:absolute; left:6%; right:17%; top:0; bottom:16%; display:flex; align-items:center; gap:clamp(10px,1.8vw,22px)}
/* ロゴ＝result_logo_bg.png(黒レザー)の正方形コンテナ。中のバッジはコンテナ基準%で収めてレザー枠を見せる。
   テキストは42%固定のまま、ロゴだけtranslateYで金フレーム上下センター(カード50%)へ下げる */
.res-card__logo{flex:none; height:67%; aspect-ratio:1; background:url("../img/result_logo_bg.png") center/cover no-repeat; display:flex; align-items:center; justify-content:center; transform:translateY(11%)}
.res-card__logo img{max-width:80%; max-height:80%; width:auto; height:auto; object-fit:contain}
/* 企画名＋店名＝横並び・上下中央（スケジュールと同様、長い店名は改行して中央維持） */
.res-card__names{display:flex; flex-direction:row; align-items:center; gap:clamp(6px,1vw,12px); min-width:0; flex:1 1 auto}
.res-card__kikaku{flex:none; font-weight:700; color:#5d5442; font-size:clamp(13px,1.7vw,21px); white-space:nowrap; max-width:40%; overflow:hidden; text-overflow:ellipsis}
.res-card__store{flex:1 1 auto; min-width:0; font-weight:800; color:#5d5442; font-size:clamp(18px,3vw,38px); letter-spacing:.02em; font-family:"Times New Roman","Noto Serif JP",serif; white-space:normal; overflow-wrap:anywhere; line-height:1}
/* 右：総評ボタン（btn_review.png・円） */
/* 総評ボタンは金フレーム中央からほんの少し上 */
.res-card__btn{position:absolute; right:3.5%; top:48%; transform:translateY(-50%); display:block; height:66%; transition:transform .2s ease}
.res-card__btn:hover{transform:translateY(-50%) scale(1.05)}
.res-card__btn img{height:100%; width:auto; display:block}
@media (max-width:600px){
  .res-card__store{font-size:18px}
}

/* ===== 演者一覧グリッド（3列・bg_performer.png＝marble+ゴールド円+角飾り／円内に顔写真＋ネームプレート） ===== */
.perf-grid{max-width:1040px; margin:34px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.4vw,30px)}
.perf-empty{text-align:center; color:#8a7f66; margin:24px 0; font-size:14px}
/* 白背景を最背面に敷き、くり抜き/素材の透過部からグローバル背景が透けないようにする */
/* 白はフレームの開口（円）の内側だけに置く。カード全体に background:#fff を敷くと
   フレーム外周の透過部から白い四角がはみ出す（開口径=幅80%・中心50%,49%は実測値） */
.perf-card{position:relative; display:block; aspect-ratio:302/309;
  background:radial-gradient(circle closest-side, #fff 0 99%, transparent 100%) 50% 49%/80% 78.2% no-repeat}
/* 写真＝奥(z-index:0)。フレーム(bg_performer02)の中央くり抜き円が写真をマスク＝可視円はくり抜きと完全一致。
   写真はくり抜きを覆うサイズにするだけ（円形指定不要） */
.perf-card__photo{position:absolute; z-index:0; left:50%; top:47%; transform:translate(-50%,-50%); width:77%; aspect-ratio:1; object-fit:cover; object-position:center top; transition:transform .2s ease}
/* くり抜き円の内側だけにインナー影（写真の手前・フレームの奥）。円=くり抜き実測(径80%/中心50%,49%)に合わせ縁ピッタリ。
   わずかに大きめ(81%)＝はみ出しはフレームがマスク、内縁にだけ影が乗る */
.perf-card::before{content:""; position:absolute; z-index:1; left:50%; top:49%; transform:translate(-50%,-50%); width:81%; aspect-ratio:1; border-radius:50%; box-shadow:inset 0 0 14px 4px rgba(0,0,0,.5); pointer-events:none}
/* フレーム＝手前(z-index:2)。中央くり抜きから奥の写真が透ける */
.perf-card::after{content:""; position:absolute; z-index:2; inset:0; background:url("../img/bg_performer02.png") center/100% 100% no-repeat; pointer-events:none}
.perf-card:hover .perf-card__photo{transform:translate(-50%,-50%) scale(1.03)}
/* ネームプレート（単色・透過・手前z-index:3） */
.perf-card__name{position:absolute; z-index:3; left:4.8%; right:4.8%; bottom:9.5%; padding:clamp(4px,0.7vw,8px) 6px; background:rgba(74,55,20,.8); color:#fff; text-align:center; font-family:"Noto Serif JP",serif; font-weight:700; font-size:clamp(13px,1.6vw,20px); letter-spacing:.04em; box-shadow:0 1px 3px rgba(0,0,0,.3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.perf-card__hon{font-size:.66em; font-weight:600; margin-left:.18em}
@media (max-width:600px){
  .perf-grid{gap:1.8vw}
  .perf-card__name{font-size:12px; bottom:8%}
}

/* ===== 総評ページ（/review/）＝支給素材(title_review/bg_filter/bg_review_card/review_badge_*)で構成 ===== */
/* フィルターバー（ビューポート全幅・bg_filter.png）
   ※page-review.php で .site(max1280) の外に出しているため width:100% = 画面全幅。帯だけ全幅・中身(.rev-filter)は960中央寄せ */
.rev-filterbar{position:relative; z-index:2; width:100%; background:#0e0c0a url("../img/bg_filter.png") center/100% 100% no-repeat; padding:clamp(10px,1.4vw,16px); margin:2px 0 28px}
.rev-filter{max-width:var(--content); margin:0 auto; display:flex; align-items:center; justify-content:center; gap:clamp(6px,1vw,12px); flex-wrap:wrap}
.rev-filter__sel{position:relative; display:block}
.rev-filter__sel::after{content:"▼"; position:absolute; right:11px; top:50%; transform:translateY(-50%); font-size:9px; color:#6b6455; pointer-events:none}
.rev-filter select,.rev-filter input[type=text]{appearance:none; -webkit-appearance:none; border:1px solid #cfc7b4; border-radius:4px; background:#fff; color:#5d5442; font-family:inherit; font-size:clamp(12px,1.1vw,14px); padding:9px 30px 9px 12px; min-width:clamp(118px,12vw,152px); line-height:1.2}
.rev-filter input[type=text]{padding-right:12px; min-width:clamp(140px,15vw,190px)}
.rev-filter select:focus,.rev-filter input:focus{outline:2px solid var(--gold); outline-offset:1px}
.rev-filter__submit{flex:none; border:none; border-radius:4px; background:#e4007f; color:#fff; font-family:inherit; font-weight:700; font-size:clamp(12px,1.1vw,14px); letter-spacing:.08em; padding:10px clamp(16px,1.8vw,24px); cursor:pointer; transition:opacity .2s ease}
.rev-filter__submit:hover{opacity:.85}
/* 総評カード（2列）※デザイン準拠でcontent(960)より広い専用ラッパー＝カード実寸≒543px */
.rev-wrap{position:relative; z-index:2; max-width:1120px; margin:0 auto; padding:0 16px}
.rev-list{margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.8vw,22px)}
.rev-empty{text-align:center; color:#8a7f66; margin:30px 0; font-size:14px}
/* カード＝bg_review_card.png(543×232・マーブル+金枠+企画名バー焼き込み)。要素は実測値で絶対配置
   実測: 企画名バー top29.3% / 高さ10.4% / left36.5% / right2.6% ＝右エリアの基準 */
.rev-card{position:relative; aspect-ratio:543/232; background:url("../img/bg_review_card.png") center/100% 100% no-repeat}
/* 演者写真＝TOP(.perf-card)の演者写真と同仕様に統一：写真=奥(z0) → インナー影(::before) → フレーム=手前(::after)。
   ※フレーム素材のみ文脈差でTOP=bg_performer02(カード全体枠)／総評=performer_frame(リング)。リングは中央・四隅が透過のため
     写真は border-radius:50% の円形指定が必須＝この1点だけTOPと構造が異なる（他は object-position/サイズ/影を揃える） */
/* 白backing＝写真の裏だけを埋める小さめの円(radial-gradient)。開口(実測79%)より内側の径78%で止め、フレームの装飾の透け間から
   白がはみ出さないようにする（隙間からはカードのマーブルが自然に透ける）。白は写真(81%)の裏に隠れる。中心は開口実測中心に一致 */
.rev-card__photo{position:absolute; left:1.5%; top:50%; transform:translateY(-50%); width:37%; aspect-ratio:210/214; background:radial-gradient(circle closest-side at 51.4% 49.5%, #fff 0 80%, transparent 81%)}
/* 中心=フレーム内円開口の実測中心。金リング内縁まで上下左右のレイキャストで均等化した中心(51.4%,49.5%)。
   写真径77%はTOP(cutout80%/写真77%)同率で開口より小さく奥へ引っ込める＝差に白backing＋インナー影のリングが出てフレーム内縁が写真に被さる（TOPと同構造） */
.rev-card__photo img{position:absolute; z-index:0; left:51.4%; top:49.5%; transform:translate(-50%,-50%); width:81%; aspect-ratio:1; border-radius:50%; object-fit:cover; object-position:center top}
/* インナー影＝写真の手前・フレームの奥。開口より僅かに大きい円で外縁はフレーム下に隠れ内縁側だけ影が乗る＝TOP .perf-card::before と同treatment */
.rev-card__photo::before{content:""; position:absolute; z-index:1; left:51.4%; top:49.5%; transform:translate(-50%,-50%); width:81%; aspect-ratio:1; border-radius:50%; box-shadow:inset 0 0 8px 2px rgba(0,0,0,.5); pointer-events:none}
.rev-card__photo::after{content:""; z-index:2; position:absolute; inset:0; background:url("../img/performer_frame02.png") center/contain no-repeat; pointer-events:none}
/* 演者名（▶◀・バーの上） */
.rev-card__name{position:absolute; left:36.5%; right:2.6%; top:6%; height:21%; margin:0; display:flex; align-items:center; justify-content:center; padding:0 1.6em; min-width:0; font-family:"Noto Serif JP",serif; font-weight:700; font-size:clamp(13px,1.5vw,22px); letter-spacing:.05em; white-space:nowrap; overflow:hidden;
  /* 演者名＝縦グラデ(上を明るく下を落ち着かせた茶ゴールド)を文字にクリップ */
  background:linear-gradient(180deg,#a08c5d 0%,#6d5f44 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
/* ▶◀＝三角にも縦グラデ(やや明るめのゴールド)をクリップ。text-fill-colorをtransparentにしglyphへグラデを表示 */
.rev-card__name::before{content:"▶"; position:absolute; left:0.6em; top:0; bottom:0; display:flex; align-items:center; line-height:1; font-size:1.15em; background:linear-gradient(180deg,#c1a35b 0%,#937438 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.rev-card__name::after{content:"◀"; position:absolute; right:0.6em; top:0; bottom:0; display:flex; align-items:center; line-height:1; font-size:1.15em; background:linear-gradient(180deg,#c1a35b 0%,#937438 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
/* 企画名＝焼き込みバーの上に載せる */
.rev-card__kikaku{position:absolute; left:36.5%; right:2.6%; top:29.3%; height:10.4%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:clamp(8px,.95vw,13px); font-weight:700; letter-spacing:.14em; white-space:nowrap; overflow:hidden}
/* 日付／店舗名＝バッジ画像(ラベル焼き込み)＋値 */
/* 高さは badge の aspect-ratio(154/28) に委ね、伸縮させない＝縦横比維持。gapを詰めて横幅を最大化（横はほぼ画像原寸が上限） */
.rev-card__meta{position:absolute; left:36.5%; right:2.6%; top:43.5%; display:flex; align-items:center; gap:1.5%}
.rev-card__mi{position:relative; flex:1 1 0; min-width:0; aspect-ratio:154/28; background-repeat:no-repeat; background-size:100% 100%}
.rev-card__mi--date{background-image:url("../img/review_badge_date.png"); left:0.4em}
.rev-card__mi--store{background-image:url("../img/review_badge_store.png")}
/* 値はバッジ実測の空きエリア(ラベル塊の右35%〜右飾り手前92%)に配置 */
.rev-card__val{position:absolute; left:35%; right:8%; top:50%; transform:translateY(-50%); text-align:center; font-size:clamp(6px,.68vw,8.5px); font-weight:700; color:#5d5442; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1; letter-spacing:-.02em}
/* 日付は短く1行で収まるので少し大きく */
.rev-card__mi--date .rev-card__val{font-size:clamp(8px,1vw,13px)}
/* 店舗名は長い名称でも省略せず全て見せる＝改行を許可（nowrap/ellipsisを解除） */
.rev-card__mi--store .rev-card__val{white-space:normal; overflow-wrap:anywhere; text-overflow:clip; overflow:visible; line-height:1.15}
.rev-card__sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* コメント */
.rev-card__ch{position:absolute; left:36.5%; right:2.6%; top:59%; text-align:center; font-size:clamp(7px,.8vw,11px); font-weight:700; color:#8a7f66; letter-spacing:.24em; text-indent:.24em; line-height:1}
/* コメントは3行でクランプ＋…省略（カードは固定アスペクト＝文字数上限は運用ルール／目安80文字） */
/* コメント＝各行の下に点線罫線（完成デザイン準拠）。行高(1.7em)ごとに点をタイル配置し行末に点線を敷く */
.rev-card__comment{position:absolute; left:39%; right:5%; top:65.5%; bottom:5%; overflow:hidden; font-size:clamp(7px,.82vw,11px); line-height:1.5; color:#5d5442; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3;
  /* 点線は3本固定。repeat(縦横)だと枠の余白に4本目が出るため、1本＝1レイヤーにして repeat-x(横のみ)で敷く */
  background-image:
    radial-gradient(circle at 50% 100%, #c6b98f 0 0.7px, transparent 1.1px),
    radial-gradient(circle at 50% 100%, #c6b98f 0 0.7px, transparent 1.1px),
    radial-gradient(circle at 50% 100%, #c6b98f 0 0.7px, transparent 1.1px);
  background-size:4px 1.5em, 4px 1.5em, 4px 1.5em;
  background-position:0 0, 0 1.5em, 0 3em;
  background-repeat:repeat-x, repeat-x, repeat-x}
.rev-card__nocomment{color:#a2977e}
@media (max-width:820px){
  .rev-list{grid-template-columns:1fr}
  .rev-filter{gap:6px}
  .rev-filter select,.rev-filter input[type=text],.rev-filter__submit{font-size:13px}
}

/* ===== フッター（背景=bg_footer.png／縦横比1279:245で画像全体を表示・高さは画像固定） ===== */
/* z-index:10＝各セクション装飾(.sec z-index:2 の中のダイヤ)より確実に前面へ。FV(20)/固定ナビ(60)より下は維持 */
.site-footer{position:relative; z-index:10; width:100%; aspect-ratio:1279/245; background:url("../img/bg_footer.png") center top/100% 100% no-repeat; color:#efe7d2; margin-top:10px}
/* コンテンツはアーク下のレザー部（下68%）に絶対配置＝アスペクト比を崩さない
   [ナビ縦積み] │ [フルスロロゴ] │ [X]（│＝ゴールド縦仕切り） */
.site-footer__inner{position:absolute; z-index:2; left:0; right:0; bottom:0; height:68%; max-width:min(1180px,96vw); margin:0 auto; padding:clamp(6px,1.7vw,18px) clamp(12px,3vw,28px) 0; display:flex; align-items:center; justify-content:center; gap:clamp(10px,2.6vw,30px); flex-wrap:nowrap}
/* 左：ナビ横並び＋直下に装飾ライン */
/* PC=ナビ横並び＋直下に装飾ライン（従来通り）／SP=ナビ縦積み＋ロゴ+X下に装飾ライン。装飾は下で出し分け */
.footer-navcol{flex:none; display:flex; flex-direction:column; align-items:center; gap:clamp(4px,1vw,10px)}
.footer-brandcol{flex:0 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center; gap:clamp(4px,0.9vw,10px)}
/* gapは .site-footer__inner と同値にして、ナビ〜仕切り〜ロゴ〜仕切り〜X の余白を全て均等にする */
.footer-brandrow{display:flex; align-items:center; gap:clamp(10px,2.6vw,30px)}
.footer-brandcol{gap:clamp(4px,0.9vw,10px)}
.footer-nav{display:flex; flex-direction:row; gap:clamp(10px,1.8vw,24px); align-items:center}
.footer-nav img{height:clamp(20px,2.9vw,40px); width:auto; display:block}
/* 横並びナビ3つの直下の装飾ライン（footer_decoration.png 546×16・親=ナビ列幅100%） */
/* ロゴ+X列の幅いっぱいに横断させる。
   ※width:0 + min-width:100% ＝ 画像の自然幅(546px)が親の幅を決めてしまうのを防ぎつつ、親の幅いっぱいに広げる */
.footer-deco{display:block; width:0; min-width:100%; height:auto; opacity:.92}
/* PCはナビ直下(--pc)のみ表示。SP用(--sp)はメディアクエリで切替 ※.footer-deco より後に置いて確実に上書き */
.footer-deco--sp{display:none}
/* フルスロロゴ左右のゴールド縦ライン仕切り */
.footer-divider{flex:none; align-self:center; width:2px; height:clamp(44px,7.6vw,94px); background:var(--gold)}
/* 中央：フルスロロゴ（flex:none＝詰まっても縮ませない） */
.footer-brand{flex:none}
.footer-brand img{width:clamp(165px,22vw,300px); height:auto; display:block}
/* 右：Xロゴ */
.footer-x{display:block; flex:none}
.footer-x img{width:clamp(40px,5.6vw,78px); height:auto; display:block}
/* フッターリンクのホバー＝左右ナビ(.side-nav)と同じ挙動に統一 */
.footer-nav a, .footer-brand, .footer-x{transition:transform .2s ease}
.footer-nav a:hover, .footer-brand:hover, .footer-x:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  .footer-nav a, .footer-brand, .footer-x{transition:none}
  .footer-nav a:hover, .footer-brand:hover, .footer-x:hover{transform:none}
}

/* ===== レスポンシブ ===== */
/* ===== タブレット〜SP =====
   デザイン(D1768 w375)準拠：SPでもPCと同じ「左ナビ／中央スライダー／右バナー」の横並びを維持（下部固定バーにしない）。
   ナビはスライダーの外側に絶対配置されるため、スライダー幅を狭めて左右に居場所を作る。
   ヘッダーのロゴ/ダイヤもvw基準に切替え、ダイヤのアンカーはロゴ半幅(29vw)に同期させて画面外へ出ないようにする。 */
@media (max-width:1200px){
  .fv__area{max-width:64%}
  .side-nav--left{gap:5px}
  .side-nav--left a img{width:12.5vw}
  /* 右バナーは height:100%(スライダー高) × width:auto のままで自動的に収まる */
  .fv__logo img{width:min(58vw,520px)}
  .fv-hero::before, .fv-hero::after{width:21vw; top:-1vw}
  .fv-hero::before{margin-right:30.6vw}
  .fv-hero::after{margin-left:30.6vw}
  /* スクロールでFVが画面上に見切れたら下部固定バーへ切替（js/nav-sticky.js が body.is-nav-bottom を付与）。
     初期はデザイン通りスライダー横に置き、見切れた後だけ追従させる */
  body.is-nav-bottom .side-nav{position:fixed; z-index:60; top:auto; bottom:10px; transform:none; transition:opacity .25s ease, visibility .25s ease}
  /* フッターに差し掛かったら重なるのでフェードアウト（js が body.is-nav-hidden を付与） */
  body.is-nav-hidden .side-nav{opacity:0; visibility:hidden; pointer-events:none}
  /* 3点ナビは縦積みのまま画面左下に固定（右バナーと同じ下端揃え）。flex-direction はベースの column を維持 */
  body.is-nav-bottom .side-nav--left{left:8px; right:auto; gap:5px}
  body.is-nav-bottom .side-nav--left a img{width:min(12vw,48px)}
  body.is-nav-bottom .side-nav--right{left:auto; right:8px; height:auto; align-items:flex-end}
  body.is-nav-bottom .side-nav--right img{height:min(22vh,160px); width:auto}
}
/* ===== SP フッター（デザイン D1768 w375 準拠）=====
   ナビを縦積みにし、固定アスペクト(1279/245)だと高さが足りないので解除してコンテンツ基準に。
   footer_decoration.png は幅546px固定でSPでは横あふれの原因＋デザインにも無いため非表示。 */
@media (max-width:600px){
  /* SP専用素材：下部ライン(bg_line_bottom_sp)／下部キラキラ(sparkle_bottom_sp)。上部ラインはPC素材(bg_line_top)を流用。
     ※body背景はフッターより奥のため、下部ラインを center bottom にするとフッターに隠れる。
       フッター高(100vw*324/750)ぶん上げてフッター上端に接するように配置する */
  body{
    background-image:
      url("../img/dia/sparkle_top_sp.png"),
      url("../img/dia/sparkle_bottom_sp.png"),
      url("../img/dia/dia_fv_sp.png"),
      url("../img/bg_line_top_sp.png"),
      url("../img/bg_line_bottom_sp.png"),
      url("../img/bg.jpg");
    /* 縦オフセットもvw基準に統一：装飾はbackground-size:100% autoで幅基準に描画されるため、
       縦もvwにすると画面幅が変わっても装飾同士の相対位置が保たれる（vhは画面高さ依存でコンテンツとズレるため不採用） */
    /* 2層目 sparkle_bottom_sp は、フッター上の中央ダイヤ(dia_bottom_sp)の周囲に散るよう、
       ページ下端ではなくフッター上端付近へ持ち上げる（center bottom だとフッター裏に隠れる） */
    background-position: center 6vw, center calc(100% - 28vw), center 16vw, center top, center calc(100% - 1vw), center top;
    /* 2層目(sparkle_bottom_sp)だけ縮小＝中央ダイヤの周囲に散る程度のサイズに（他は全幅100%） */
    background-size: 100% auto, 72% auto, 100% auto, 100% auto, 100% auto, 100% auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
    background-blend-mode: screen, screen, normal, normal, normal, normal;
  }
  /* スケジュール以降のコンテンツ幅を少し内側へ（SPは全てvw基準＝画面幅に比例） */
  .content{padding:0 5.9vw}
  /* セクションタイトル：clampの最小値(64px)で高さが固定される一方 max-width:92vw で幅だけ圧縮され、
     縦横比が最大30%歪んでいた。max-widthに当たらない高さ(11.5vw)にして width:auto を効かせ比率を維持する
     （最も横長の title_schedule 比7.72 でも 11.5vw×7.72 = 88.8vw < 92vw に収まる） */
  .sec__title img{height:9.5vw}
  /* セクションタイトル下の余白＝タイトルのmargin-bottom(22px)＋各リストのmargin-top(30〜34px)。両方詰める */
  .sec__title{margin-bottom:3vw}
  .sch-list, .res-list, .perf-grid{margin-top:3vw}
  /* スケジュール／結果カード間の余白を詰める（PCは16pxのまま） */
  .sch-list, .res-list{gap:0.8vw}
  /* セクション間の余白を詰める（PCは40px上下のまま） */
  .sec{padding:4vw 0}
  /* 注釈テキスト：本文に<br>があり2行構成。2行目が33文字あるため、.content(padding 5.9vw)の幅331pxだと
     末尾「い。」が溢れて3行になる。フォントを下げつつ負マージンで注釈だけ左右に広げて2行に収める */
  .notice{font-size:2.3vw; margin-bottom:12vw}
  /* セクションタイトル横のダイヤを外側へ（画面外に見切れてOK）。
     左右端にダイヤが入った全幅装飾なので、幅を112vwに広げると両端のダイヤが外へ移動する。
     background-size:100% auto のため高さも同率(112vw基準)にしないと縦が切れる */
  /* 100vwを超える装飾は横スクロールを生むため html 側でもクリップ。
     clip は hidden と違いスクロールコンテナを作らないので scroll-behavior:smooth / sticky を壊さない */
  html{overflow-x:clip}
  .sec__title::before, .sec__body::before{width:112vw}
  #schedule  .sec__title::before{height:calc(112vw*290/1280)}
  /* フッター上のダイヤ：側面(dia_footer_side)はSPでは出さず、中央クラスタ(dia_footer_center)のみ上へ */
  .footer-dia::before{display:none}
  /* 中央クラスタはSP専用素材へ。142×132の小さな素材なので background-size を明示（100vwに引き伸ばさない）
     ※要素幅は100vwのまま＝background-position:center で水平中央に配置される */
  .footer-dia::after{background-image:url("../img/dia/dia_bottom_sp.png"); background-size:25vw auto; height:calc(25vw*132/142); top:-8vw}
  /* 結果は演者一覧と同じ見せ方に統一（dia_result_titleはダイヤが上寄りで下が空くため、dia_review_titleへ差し替え） */
  #result    .sec__title::before{background-image:url("../img/dia/dia_review_title.png"); height:calc(112vw*263/1280)}
  #performer .sec__title::before{height:calc(112vw*263/1280)}
  #schedule  .sec__body::before{height:calc(112vw*237/1280)}
  #result    .sec__body::before{height:calc(112vw*162/1280)}
  #performer .sec__body::before{height:calc(112vw*179/1280)}
  /* カード内テキストはvw基準の可変に。clampの最小値(17〜18px等)がSPで効くとカード幅に対して大きすぎ、
     予期せぬ段落ち・はみ出しの原因になるため、カード幅に比例して縮むvw指定で上書きする */
  .sch-card__date{font-size:3.7vw}
  /* 企画名の占有幅を絞って店名に幅を回す（長い店名の段落ち低減） */
  .sch-card__kikaku{font-size:2.4vw; max-width:32%}
  .sch-card__store{font-size:3.5vw}
  .res-card__kikaku{font-size:2.4vw; max-width:30%}
  .res-card__store{font-size:3.5vw}
  .perf-card__name{font-size:2.9vw; padding:0.6vw 1vw}
  /* フッターもSP専用素材。縦横比750/324を最低高さに、コンテンツが増えれば伸びる。padding-topは金アーチ分を確保 */
  /* padding-top を厚めにしてコンテンツを下寄せ（金アーチ分＋余白） */
  .site-footer{background-image:url("../img/bg_footer_sp.png"); aspect-ratio:auto; min-height:43.2vw; padding:16vw 0 2.7vw}
  /* 余白は全てvw可変の同値に。中央寄せ＋均等gapで「ナビ|仕切り|ロゴ|仕切り|X」の間隔が揃い、
     要素幅もvw基準なので画面幅に応じて全体がゆとりを保ったままスケールする */
  .site-footer__inner{position:static; height:auto; max-width:100%; padding:0 4vw; gap:5.2vw; justify-content:center; align-items:flex-end}
  .footer-brandrow{gap:5.2vw}
  /* ロゴ行と装飾ラインの間隔を広げる＝下端揃えのまま「ロゴ|X」だけが上がる */
  .footer-brandcol{gap:4vw}
  /* SPはナビ縦積み／仕切りは細線＆Xロゴと同寸（PCは従来のまま）。装飾ラインはロゴ+X下のものに切替 */
  .footer-nav{flex-direction:column; align-items:flex-start}
  .footer-deco--pc{display:none}
  .footer-deco--sp{display:block}
  /* 仕切りの線幅だけはpx（vwだとサブピクセルになり端末によって消えるため）。高さ以降は全てvw */
  .footer-divider{width:1px; height:9vw}
  .footer-nav{gap:1vw}
  /* 3点は自然幅が異なる(141〜196px)が高さは揃っている(40〜41px)ため、高さ基準で揃える（幅統一だと中身の縮尺がバラつく） */
  .footer-nav img{height:5vw; width:auto}
  .footer-brand img{width:33vw}
  .footer-x img{width:9vw}
}

/* ===== 総評ページ SP（デザイン D1769 w375 準拠） ===== */
@media (max-width:600px){
  /* 背景をSP素材に切り替え。上部ラインは bg_line_top_sp（TOPと共通素材）、下部はTOPと同じSP素材で揃える */
  body.is-review{
    background-image:
      url("../img/dia/sparkle_top_review_sp.png"),
      url("../img/dia/dia_top_review_sp.png"),
      url("../img/dia/sparkle_bottom_sp.png"),
      url("../img/flare_review_sp.png"),
      url("../img/bg_line_review_sp.png"),
      url("../img/dia/dia_review.png"),
      url("../img/bg_line_bottom_sp.png"),
      url("../img/bg_review.jpg");
    /* flare は bg_line_review_sp の直上に重ね、screen で光として自然に乗せる */
    background-position: center top, center 18vw, center calc(100% - 28vw), center top, center top, center 30vw, center calc(100% - 1vw), center top;
    background-size: 100% auto, 100% auto, 72% auto, 100% auto, 100% auto, 100% auto, 100% auto, 100% auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
    background-blend-mode: screen, normal, screen, screen, normal, normal, normal, normal;
  }
  /* ヘッダー：ロゴを縮小し、大ダイヤはロゴ起点で画面端へ。
     PC値(clamp最小150px＋アンカー181px)のままだとSPでは画面外に飛んで見えなくなる */
  .fv--review .fv__logo img{width:56vw}
  /* デザイン準拠：ダイヤが最上部・ロゴはその下。PC用の translateY(-16px) を解除し margin-top で下げる
     （transformはレイアウトを動かさないため、後続の総評タイトルと重なってしまう。marginなら押し下がる） */
  .rev-hero .fv__logo{transform:none; margin-top:3vw}
  /* ロゴ〜総評タイトルの間隔を詰める／タイトル下の余白も縮小（PCは従来の25pxのまま） */
  .sec--review .sec__title{margin-top:-2vw; margin-bottom:0}
  .sec.sec--review{padding-bottom:1vw}
  .rev-hero::before, .rev-hero::after{width:25vw; top:-10vw}
  .rev-hero::before{margin-right:24vw}
  .rev-hero::after{margin-left:24vw}
  /* 総評タイトル：clamp最小96pxだと幅が557px必要になり max-width:92vw(345px) に当たって横に潰れる。
     当たらない高さ(12.5vw≒47px→幅272px)にして width:auto を効かせ比率を維持 */
  .sec--review .sec__title img{height:12.5vw}
  /* カード同士の縦余白をTOPのカード列(.sch-list/.res-list)と同値に揃える */
  .rev-list{gap:0.8vw}
  /* カード列とフッターの間隔を広げる */
  .sec--review-list{padding-bottom:16vw}
  /* フィルター：4項目＋検索を1行に収める（min-width:118pxのままだと合計472pxで3行に折り返す） */
  .rev-filter{gap:1.2vw; flex-wrap:nowrap}
  .rev-filter__sel, .rev-filter__text{flex:1 1 0; min-width:0}
  .rev-filter select, .rev-filter input[type=text]{width:100%; min-width:0; font-size:2.5vw; padding:1.8vw 4.5vw 1.8vw 1.8vw}
  .rev-filter__sel::after{right:1.5vw; font-size:2vw}
  .rev-filter__submit{flex:none; font-size:2.6vw; padding:1.8vw 2.5vw}
}