/*
Theme Name: Chunichi Dance Child
Theme URI: https://example.com/chunichi-dance-child
Description: Chunichi Dance 親テーマの子テーマ。ここに書いたCSSは親テーマの後に読み込まれるため、自由に上書き・追加ができます。
Author: Your Studio
Template: chunichi-dance
Version: 1.0.8
Text Domain: chunichi-dance-child
*/

/* ==========================================================
   ここから下に、管理画面デザインを微調整したい場合のCSSを
   自由に追記してください（親テーマのファイルは編集不要です）。
   例）
   :root {
       --accent: #b82323;
   }
   ========================================================== */
/* ==========================================================
   chunichi-dance-child / style.css へ追記する分
   2026-08-14  デザイン全面反映（LIGHT FEST 方向・案A）

   ※ 親テーマ（chunichi-dance）のファイルは一切触っていません。
   ※ 全部消せば元の見た目に戻ります。
   ========================================================== */


/* ==========================================================
   1. パレット
   親テーマは :root の変数で全セクションの色を組んでいるので、
   ここを上書きするだけで全体の色が一括で変わる。
   ========================================================== */
:root{
    --bg-color:     #f4f3f7;   /* 温かいベージュ → 冷たい白へ */
    --text-main:    #14131c;
    --text-sub:     #5b5867;
    --accent:       #e5185e;   /* 赤 → ややマゼンタ寄りの赤 */
    --border-color: #c8c4d4;
    --card-bg:      #ffffff;

    /* 追加 */
    --iris-cyan:    #00d6ff;
    --iris-magenta: #ff1f9c;
    --iris-violet:  #7b3cff;
    --iris-mint:    #00e0a8;
}


/* ==========================================================
   2. ページ全体の地
   四隅にうっすら虹色を含ませる。白の明るさは保つ。
   ========================================================== */
body{
    background-color:var(--bg-color);
    background-image:
        radial-gradient(46% 24% at 6% 2%,   rgba(0,214,255,.18), transparent 62%),
        radial-gradient(40% 20% at 96% 5%,  rgba(255,31,156,.15), transparent 62%),
        radial-gradient(52% 26% at 92% 97%, rgba(123,60,255,.16), transparent 64%),
        radial-gradient(44% 22% at 4% 92%,  rgba(0,224,168,.13), transparent 62%);
    background-repeat:no-repeat;
    background-size:100% 100vh;   /* fixed は描画が重いので使わない */
}


/* ==========================================================
   3. ヘッダー
   ロゴの折り返しと ENTRY NOW の重なりを解消する
   ========================================================== */
header{gap:16px}

.logo{
    white-space:nowrap;      /* 折り返さない */
    min-width:0;
    flex:0 1 auto;
    line-height:1;
}
.logo span{margin-right:6px}

nav.primary-nav a{white-space:nowrap}   /* HOUSE MAKERS を2行に折らない */

.entry-btn-nav{
    flex:0 0 auto;
    white-space:nowrap;
    background-color:var(--text-main);
}
.entry-btn-nav:hover{background-color:var(--accent)}

/* ⚠️ display は必ず min-width で囲む。
   囲まないと親テーマの @media (max-width:900px) の
   nav.primary-nav{display:none} を打ち消して、
   スマホでメニューが開きっぱなしになる。 */
@media (min-width:1101px){
    nav.primary-nav{flex:1 1 auto;display:flex;justify-content:flex-end;min-width:0}
    nav.primary-nav ul{flex-wrap:nowrap;gap:20px}
}

/* ナビ9項目は1100px以下だとロゴに 食い込む。早めにハンバーガーへ逃がす */
@media (max-width:1100px){
    nav.primary-nav{
        display:none;
        position:absolute;top:100%;left:0;width:100%;
        background:var(--bg-color);
        border-bottom:1px solid var(--border-color);
        padding:20px 24px;
    }
    nav.primary-nav.is-open{display:block}
    nav.primary-nav ul{flex-direction:column;gap:16px}
    .menu-toggle{display:flex}
}

/* ナビ9項目＋ロゴ＋ボタンは横幅を食う。段階的に詰める */
@media (max-width:1500px){
    nav.primary-nav ul{gap:14px}
    nav.primary-nav a {font-size:.72rem;letter-spacing:.06em}
    .logo             {font-size:.95rem;letter-spacing:.1em}
}
@media (max-width:1180px){
    header            {padding:20px 24px}
    nav.primary-nav ul{gap:10px}
    nav.primary-nav a {font-size:.66rem;letter-spacing:.03em}
    .logo             {font-size:.82rem;letter-spacing:.06em}
    .entry-btn-nav    {padding:9px 16px;font-size:.7rem}
}
@media (max-width:900px){
    header        {padding:16px 20px;gap:10px}
    .logo         {font-size:.8rem;letter-spacing:.06em}
    .entry-btn-nav{padding:9px 14px;font-size:.68rem;letter-spacing:.05em}
    .menu-toggle  {flex:0 0 auto}
}
@media (max-width:420px){
    header        {padding:14px;gap:8px}
    .logo         {font-size:.66rem;letter-spacing:.03em}
    .logo span    {margin-right:4px}
    .entry-btn-nav{padding:8px 10px;font-size:.6rem;letter-spacing:.03em}
}


/* ==========================================================
   4. ヒーロー
   ※ 巨大タイトル・写真帯・開催情報は template-parts/hero.php の
     差し替えが要る。ここでは差し替え後に効くCSSも先に入れてある。
   ========================================================== */
.hero{
    /* タイトルに流し込む写真。差し替えるときはここのURLだけ変える */
    --hero-photo:url("https://kids-dance-contest.chibigo-tokai.com/wp-content/uploads/2026/09/kdc-hero-title-2027.jpg");
    height:auto;
    min-height:100vh;
    padding-top:150px;
    padding-bottom:64px;
    background-color:var(--bg-color);
}

/* 背景スライドショーは使わない。
   写真はタイトルの中と写真帯で見せる設計に変えたため。 */
.hero-slideshow{display:none}
.hero::before,.hero::after{content:none}

/* 差し替え前（現行マークアップ）でも破綻しないように */
.hero-content h1{margin-bottom:20px;text-wrap:balance}

/* ---- 差し替え後：全体の組み ---- */
.hero-inner{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 48px;
    display:grid;
    grid-template-columns:1fr 360px;
    grid-template-rows:auto auto auto;
    gap:20px 48px;
    text-align:left;
    color:var(--text-main);
}
.hero-typecol{grid-column:1/2;grid-row:1/2}
.hero-shots  {grid-column:1/2;grid-row:2/3}
.hero-side   {grid-column:2/3;grid-row:1/3;align-self:end}
.hero-credits{grid-column:1/-1;grid-row:3/4}

/* ---- 右カラム ---- */
.hero-side{display:flex;flex-direction:column;gap:22px}
.hero-side h1{
    font-size:30px;font-weight:800;line-height:1.42;letter-spacing:.005em;
    text-shadow:none;margin:0;
}
.hero-side h1 em{font-style:normal;color:var(--accent)}
.hero-official{
    font-size:15px;font-weight:700;letter-spacing:.08em;line-height:1.6;
    padding-left:12px;border-left:3px solid var(--accent);margin:0;
}
/* 2行目（＠岡崎タウンマルシェ）。1行目の正式名称より一段小さく、色は本文グレー。
   ⚠️ 旧「.tmp」（仮称の注記）は名称確定にともない廃止した。 */
.hero-official .sub{
    display:block;margin-top:4px;
    font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--text-sub);
}
.hero-date{font-size:27px;font-weight:700;letter-spacing:.02em;line-height:1.2}
.hero-date small{
    display:block;font-size:12px;letter-spacing:.2em;font-weight:600;
    margin-top:5px;color:var(--text-sub);
}
.hero-meta{font-size:11.5px;line-height:2;color:#454154;letter-spacing:.02em;margin:0}
.hero-side .hero-cta{align-self:stretch;justify-content:center;padding:16px 20px}

/* ---- 下部クレジット ---- */
.hero-credits{
    display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
    border-top:1px solid var(--border-color);padding-top:16px;margin-top:14px;
    font-size:9.5px;line-height:1.85;color:var(--text-sub);
}
.hero-credits b{
    display:block;font-size:9px;letter-spacing:.16em;
    color:var(--text-main);margin-bottom:5px;
}

/* ---- 差し替え後：巨大タイトル ---- */
.hero-typecol{position:relative;width:100%;container-type:inline-size}

.hero-type{
    font-weight:900;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    /* 写真を暗く沈めてから光を screen で重ねる＝発光して見える */
    background-image:
        radial-gradient(38% 54% at 12% 22%, var(--iris-cyan)    0%, transparent 62%),
        radial-gradient(36% 50% at 86% 14%, var(--iris-magenta) 0%, transparent 62%),
        radial-gradient(50% 66% at 74% 88%, var(--iris-violet)  0%, transparent 64%),
        radial-gradient(38% 52% at 22% 92%, var(--iris-mint)    0%, transparent 62%),
        linear-gradient(rgba(12,2,44,.76),rgba(12,2,44,.76)),
        var(--hero-photo,none);
    background-size:auto,auto,auto,auto,auto,120% auto;
    background-position:center,center,center,center,center,center 30%;
    background-repeat:no-repeat;
    background-blend-mode:screen,screen,screen,screen,multiply,normal;
}
.hero-type .tline{line-height:.80}

/* KIDS / DANCE：字間は詰めすぎず、行ごとにサイズを変えて全幅に届かせる。
   ⚠️ 数値は書体で変わる。親テーマは Montserrat なので、
      書体を変えたら必ずブラウザで実測して合わせ直すこと。 */
.hero-type .l1,
.hero-type .l2{
    display:block;
    letter-spacing:.015em;
    white-space:nowrap;
    padding-right:.02em;   /* 最終文字の右が切れるのを防ぐ */
}
.hero-type .l1{font-size:min(38.1cqw,430px)}   /* KIDS  ＝ 4文字 */
.hero-type .l2{font-size:min(25.7cqw,290px)}   /* DANCE ＝ 5文字 */

/* CONTEST：白文字＋黒フチ。字間を開けて小さく */
.hero-type .l3{
    display:flex;justify-content:space-between;
    font-size:min(5.6cqw,64px);
    line-height:1.7;
    color:#fff;
    -webkit-text-stroke:2px var(--text-main);
    paint-order:stroke fill;   /* フチが文字を侵食しないようにする */
}

/* ---- 差し替え後：キッズの写真帯 ---- */
/* ⚠️ 3列固定のグリッドだったが、「ヒーロー背景」の登録が2枚のときに右が1列空いてしまう。
   枚数に追従するよう flex にした。先頭だけ少し広く見せる。 */
.hero-shots{display:flex;gap:8px}
.hero-shots figure{position:relative;overflow:hidden;background:#ded9e8;aspect-ratio:4/3;
    flex:1 1 0;min-width:0;align-self:start;   /* aspect-ratio と高さのストレッチが競合して縮むため */
}
.hero-shots figure:first-child{flex:1.35 1 0}
.hero-shots img{width:100%;height:100%;object-fit:cover}
.hero-shots figcaption{
    position:absolute;left:0;bottom:0;
    background:var(--accent);color:#fff;
    font-size:8.5px;letter-spacing:.18em;font-weight:700;padding:3px 8px;
}


/* ==========================================================
   5. セクション見出し
   ヒーローと同じ光を流し込んで、ページ全体を一続きに見せる
   ========================================================== */
.section-title{
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    background-image:linear-gradient(96deg,
        var(--text-main) 0%,
        #2a2350 34%,
        var(--iris-violet) 62%,
        var(--iris-magenta) 100%);
}
.section-title span{
    -webkit-text-fill-color:var(--accent);   /* 英字サブは単色に戻す */
    color:var(--accent);
}
.section-header{
    border-bottom:1px solid var(--border-color);
    padding-bottom:22px;
    align-items:flex-end;
}


/* ==========================================================
   6. カード類
   角は立てたまま、影ではなく細い罫で見せる
   ========================================================== */
.stats-box,
.judge-card,
.performer-card,
.exhibitor-card,
.org-card{
    border-color:var(--border-color);
    border-radius:0;
}

.performer-card,
.exhibitor-card{
    background-color:rgba(255,255,255,.78);
    transition:transform .3s, box-shadow .3s;
}
.performer-card:hover,
.exhibitor-card:hover{
    box-shadow:0 18px 44px -26px rgba(20,19,28,.5);
}

.stats-box{
    background-color:rgba(255,255,255,.78);
}
.stat-value{color:var(--accent)}

.judge-card img{filter:grayscale(12%) saturate(1.05)}
.judge-card .judge-role{color:var(--accent)}


/* ==========================================================
   7. ボタン・タブ
   ========================================================== */
.hero-cta,
.recruit-btn{
    background-color:var(--text-main);
    border-radius:0;
    transition:background-color .25s, transform .25s;
}
.hero-cta:hover,
.recruit-btn:hover{
    background-color:var(--accent);
    transform:translateY(-2px);
}

.filter-tab{
    border-radius:0;
    border-color:var(--border-color);
}
.filter-tab.is-active{
    background-color:var(--text-main);
    border-color:var(--text-main);
    color:#fff;
}

.btn-profile-link{color:var(--accent)}


/* ==========================================================
   8. フッター
   ========================================================== */
footer.site-footer{
    background-color:#0f0e18;
    background-image:
        radial-gradient(46% 60% at 12% 20%, rgba(0,214,255,.16), transparent 62%),
        radial-gradient(42% 56% at 88% 26%, rgba(255,31,156,.14), transparent 62%),
        radial-gradient(52% 66% at 70% 90%, rgba(123,60,255,.18), transparent 64%);
}
footer.site-footer p{color:#9a96ad}


/* ==========================================================
   9. レスポンシブ（ヒーロー差し替え後）
   ========================================================== */
@media (max-width:1100px){
    .hero-inner{grid-template-columns:1fr;gap:18px}
    .hero-typecol,.hero-shots,.hero-side,.hero-credits{grid-column:1;grid-row:auto}
    .hero-side{align-self:auto;margin-top:8px}
}
@media (max-width:900px){
    .hero{padding-top:112px;padding-bottom:48px;min-height:0}
    .hero-inner{padding:0 22px}
    .hero-shots{grid-template-columns:1fr 1fr}
    .hero-type .l3{-webkit-text-stroke-width:1.2px}
    .hero-side h1{font-size:24px}
    .hero-credits{grid-template-columns:1fr 1fr;gap:18px}
}


/* ==========================================================
   10. 募集要項セクション（#entry）
   template-parts/entry.php とセットで使う
   ========================================================== */
.entry-section .section-header{flex-wrap:wrap;gap:16px}

/* ---- 部門カード ---- */
.entry-cats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
    gap:12px;
    margin-bottom:64px;
}
.entry-cat{
    background:rgba(255,255,255,.78);
    border:1px solid var(--border-color);
    padding:26px 24px 22px;
    display:flex;flex-direction:column;gap:16px;
}
/* ⚠️ 1枚だけ色を変える「おすすめ」の見せ方はしない。
   部門は年齢とチームの有無で決まるもので、読み手が選べる選択肢ではないため。
   違いは「課金単位が1人あたりであること」なので、そこだけを際立たせる。 */
.entry-cat-name{
    font-size:1.15rem;font-weight:800;line-height:1.4;letter-spacing:.02em;
}
.entry-cat-name span{
    display:block;margin-top:5px;
    font-size:.62rem;font-weight:600;letter-spacing:.2em;color:var(--accent);
}
.entry-cat dl{display:flex;flex-direction:column;gap:0;margin:0}
.entry-cat dl > div{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:9px 0;border-bottom:1px solid var(--border-color);
}
.entry-cat dl > div:last-child{border-bottom:none}
.entry-cat dt{font-size:.76rem;color:var(--text-sub);letter-spacing:.06em;flex:none}
.entry-cat dd{margin:0;font-size:.95rem;font-weight:700;text-align:right}
.entry-cat dd.fee{font-size:1.7rem;font-weight:800;letter-spacing:.01em;line-height:1.2}
.entry-cat dd.fee small{font-size:.72rem;font-weight:600;margin-left:3px;color:var(--text-sub)}
.entry-cat dd.fee .per{
    font-size:.8rem;font-weight:800;letter-spacing:.04em;
    color:var(--accent);margin-left:3px;
}
.entry-cat-note{
    font-size:.8rem;line-height:1.9;color:var(--text-sub);margin:0;
    padding-top:2px;
}
.entry-cat-note b{color:var(--text-main)}

/* ---- 申し込みの流れ ---- */
.entry-h3{
    font-size:1.05rem;font-weight:800;letter-spacing:.04em;
    padding-bottom:12px;margin-bottom:22px;
    border-bottom:2px solid var(--text-main);
}
.entry-flow{margin-bottom:56px}
.entry-flow ol{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:10px;
    counter-reset:flow;
}
.entry-flow li{
    counter-increment:flow;
    background:rgba(255,255,255,.78);
    border:1px solid var(--border-color);
    padding:18px 18px 16px;
    display:flex;flex-direction:column;gap:6px;
    position:relative;
}
.entry-flow li::before{
    content:counter(flow);
    font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--accent);
}
.entry-flow li b{font-size:.95rem;line-height:1.6}
.entry-flow li span{font-size:.78rem;line-height:1.8;color:var(--text-sub)}

/* ---- 要項 ---- */
.entry-terms{margin-bottom:52px}
.entry-terms-list{margin:0;display:flex;flex-direction:column;gap:0}
.entry-terms-list > div{
    display:grid;grid-template-columns:9rem 1fr;gap:24px;
    padding:20px 0;border-bottom:1px solid var(--border-color);
}
.entry-terms-list > div:last-child{border-bottom:none}
.entry-terms-list dt{
    font-size:.86rem;font-weight:800;letter-spacing:.08em;
}
.entry-terms-list dd{margin:0;font-size:.87rem;line-height:2}
.entry-terms-list .hl{
    background:linear-gradient(transparent 62%, var(--accent-line, #fbd3e0) 62%);
    font-weight:700;
}
.entry-terms-list > div.is-important{
    background:rgba(255,255,255,.8);
    border:1px solid var(--accent);
    padding:22px 24px;
    margin:6px 0;
}
.entry-terms-list > div.is-important dt{color:var(--accent)}

/* ---- 下部CTA ---- */
.entry-cta{
    text-align:center;
    border-top:1px solid var(--border-color);
    padding-top:36px;
    display:flex;flex-direction:column;align-items:center;gap:16px;
}
.entry-cta p{font-size:.85rem;color:var(--text-sub);margin:0}

@media (max-width:768px){
    .entry-cats{margin-bottom:44px}
    .entry-cat{padding:22px 18px 18px}
    .entry-terms-list > div{grid-template-columns:1fr;gap:8px;padding:16px 0}
    .entry-terms-list > div.is-important{padding:18px}
    .entry-cta .hero-cta{width:100%;justify-content:center}
}

/* ---- 開催概要（募集要項の冒頭に再掲） ---- */
.entry-outline{
    border-top:2px solid var(--text-main);
    border-bottom:1px solid var(--border-color);
    padding:22px 0 18px;
    margin-bottom:40px;
}
.entry-outline dl{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
    gap:20px 28px;margin:0;
}
.entry-outline dl > div{display:flex;flex-direction:column;gap:5px}
.entry-outline dt{
    font-size:.62rem;font-weight:700;letter-spacing:.18em;color:var(--accent);
}
.entry-outline dd{margin:0;font-size:.95rem;line-height:1.7}
.entry-outline dd b{font-size:1.05rem;font-weight:800}
.entry-outline dd small{font-size:.74rem;color:var(--text-sub);letter-spacing:.02em}
.entry-outline-note{
    margin:16px 0 0;font-size:.78rem;color:var(--text-sub);letter-spacing:.04em;
}

/* ---- 当日について ---- */
.entry-day{margin-bottom:56px}
.entry-day-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:10px;
}
.entry-day-grid > div{
    background:rgba(255,255,255,.78);
    border:1px solid var(--border-color);
    padding:18px;
}
.entry-day-grid h4{
    font-size:.84rem;font-weight:800;letter-spacing:.06em;margin:0 0 7px;
    padding-left:9px;border-left:3px solid var(--accent);
}
.entry-day-grid p{font-size:.8rem;line-height:1.9;color:var(--text-sub);margin:0}
.entry-day-grid p b{color:var(--text-main)}
.entry-day-marche{
    margin:14px 0 0;padding:14px 18px;
    background:var(--accent-soft,#fde4ed);
    font-size:.84rem;line-height:1.9;
}
.entry-day-marche b{font-weight:700}
.entry-day-cap{
    margin:12px 0 0;font-size:.72rem;line-height:1.8;color:var(--text-sub);
}

/* ==========================================================
   2026-09-06 公開前レビューで追加
   ========================================================== */

/* ヘッダーが position:fixed なので、アンカーで飛ぶと見出しが下に潜りうる。
   親テーマの .site-section は padding-top:100px あるためぎりぎり成立しているが、
   ヘッダーの高さが変わると破綻するので明示的に逃がしておく。 */
html{scroll-behavior:smooth}
section[id],
.site-section[id]{scroll-margin-top:96px}

/* entry_line_url が未設定のあいだのCTA。
   押せないことが見て分かる状態にして、設定漏れのまま公開されるのを防ぐ。 */
.recruit-btn.is-disabled,
.hero-cta.is-disabled{
    display:inline-block;cursor:not-allowed;
    background:var(--border-color);color:var(--text-sub);
    border-color:var(--border-color);box-shadow:none;
}

/* 写真帯は未設定のコマを出力しないため、3枚とも未設定なら枠ごと消す */
.hero-shots:empty{display:none}

/* 「2,000円／人」が狭い幅で「円／」と「人」に割れるので1かたまりに固定 */
.entry-cat dd.fee{white-space:nowrap}

/* ==========================================================
   2026-09-08 追加
   ========================================================== */

/* ⚠️ エントリーフォームの固定ページ（/entry/ = page-id-60）。
      このページはテーマのヘッダーを隠しているのに、テーマの .container が
      padding-top:160px / 左右48px を持っているため、
      ・フォームが画面のかなり下から始まる
      ・左右に不要な余白が入る
      という状態になっていた。このページだけ打ち消す。
      （フォーム自身が .wrap max-width:600px と 16px のガターを持っている） */
body.page-id-60 .container{
    max-width:none;
    /* ⚠️ page.php が inline style で padding-top:160px を付けるため，
       ここだけ !important が必要。ヘッダーを出す他の固定ページでは
       その160pxは固定ヘッダーを遁げるために必要なので触らない。 */
    padding-top:0 !important;
    padding-left:0;
    padding-right:0;
}

/* ---- 審査員が未確定のあいだの表示 ---- */
.judges-comingsoon{
    margin:0;padding:56px 24px;text-align:center;
    border:1px dashed var(--border-color);border-radius:16px;background:var(--card-bg);
    font-family:'Montserrat',sans-serif;font-size:clamp(28px,5vw,44px);font-weight:800;
    letter-spacing:.06em;color:var(--accent);line-height:1.2;
}
.judges-comingsoon span{
    display:block;margin-top:14px;
    font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--text-sub);
}

/* ==========================================================
   審査員・MCの写真（2026-09-26）
   親テーマは写真の「高さを280pxに固定」し、幅だけ画面に合わせていた。
   そのため 900px以下（1列表示）では 657×280 のような横長の帯になり、
   人物写真の頭やあごが切れていた（1024pxでは逆に206×280の縦長）。
   → 枠を正方形に固定する。写真側も顔が中心の正方形に切り直してある。
   → 1列だと正方形が600px超まで大きくなるので、421〜900pxは2列にする。
   ⚠️ 主催（.producer-grid）も .judge-card を使っているので、#judges と #mc に限定している。
   ========================================================== */
#judges .judge-card img,
#mc .judge-card img{
    height:auto;
    aspect-ratio:1/1;
    object-position:50% 30%;   /* 正方形でない写真を入れたときも顔側を残す */
}
@media (min-width:421px) and (max-width:900px){
    #judges .judges-grid,
    #mc .judges-grid{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================
   主催欄のはみ出し（2026-09-26）
   「お問い合わせ」のメールアドレスは途中で改行できないため表がそれ以上縮まず、
   360px幅で主催カードが約14pxはみ出して横スクロールが出ていた
   （ヘッダーもはみ出した幅に引っ張られていた）。
   375pxでも、カードが右の余白に食い込んで左右非対称になっていた。
   → 列が中身より縮めるようにし、420px以下は「見出しの下に内容」の縦並びにする。
   ========================================================== */
.org-card{min-width:0}
.org-detail-table td{overflow-wrap:anywhere}   /* 320pxなどではメールアドレスも折り返す */
@media (max-width:900px){
    .org-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
    .org-card{padding-left:20px;padding-right:20px}
    .org-detail-table th,
    .org-detail-table td{display:block;width:auto}
    .org-detail-table th{padding-bottom:2px;border-bottom:0}
    .org-detail-table td{padding-top:0}
}

/* ==========================================================
   10. ヒーロー：メインビジュアル版（2026-10-07）
   template-parts/hero.php の hero--mv 用。名称変更で巨大文字
   「KIDS DANCE CONTEST」をやめ、メインビジュアルを全面に出す。
   ========================================================== */
.hero.hero--mv{display:block;height:auto;min-height:0;padding:0 0 56px;text-align:left}
.hero-mv{
    background:#b4b0ae;
    padding-top:92px;            /* 固定ヘッダーの高さぶん */
}
.hero-mv picture{display:block}
/* PC：横長版（2000×1125）を画面幅いっぱいに。
   高さは「画面の高さ−ヘッダー」と「横幅の16:9」の小さいほう。
   縦に余る画面では左右が少し切れるだけで、上下（タイトル・足元）は切れない。 */
.hero-mv img{
    display:block;width:100%;
    height:min(calc(100svh - 92px), 56.25vw);
    object-fit:cover;object-position:50% 50%;
}
.hero--mv .hero-inner{
    grid-template-columns:1fr;grid-template-rows:auto auto;margin-top:40px;
}
.hero--mv .hero-side{
    grid-column:1;grid-row:1;align-self:auto;
    display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:20px 48px;
}
.hero--mv .hero-official{font-size:20px}
.hero--mv .hero-official .sub{font-size:12.5px}
.hero--mv .hero-side .hero-cta{grid-column:4;align-self:center;padding:16px 32px}
.hero--mv .hero-credits{grid-column:1;grid-row:2}
@media (max-width:1100px){
    .hero--mv .hero-side{grid-template-columns:auto 1fr}
    .hero--mv .hero-side .hero-cta{grid-column:1/-1}
}
@media (max-width:900px){
    .hero-mv{padding-top:62px}
    .hero-mv img{height:auto}
    .hero--mv .hero-inner{margin-top:28px}
    .hero--mv .hero-side{grid-template-columns:1fr;gap:18px}
}
/* ヒーロー直後のABOUTとの間が空きすぎるため詰める（スマホ） */
@media (max-width:900px){
    .hero.hero--mv{padding-bottom:24px}
    #about.site-section{padding-top:56px}
}