/*
Theme Name: 黄金町バザール2026（子テーマ）
Theme URI: https://koganecho.net/koganecho-bazaar-2026/
Description: 黄金町バザール＋上大岡バザール2026 特設サイトのカスタムテーマ。Twenty Twenty-Five を親とする。配色は docs/color-system.md（チラシ由来）を唯一の根拠とする。現状はアーティスト等のデータ確認用テンプレートを持つ暫定段階。
Template: twentytwentyfive
Author: penne
Version: 0.30.3
Text Domain: koganecho-child
*/

/* ============================================================
   カラートークン（docs/color-system.md が唯一の根拠。
   ここに無い色を足さない）
   ============================================================ */
:root {
  /* 面用。背景・ベタ塗り専用。文字色に使わない */
  --kb-green: #00A93A;
  /* 文字用。白/ラベンダー地の上のテキスト・リンク・小見出し */
  --kb-green-text: #008A30;
  --kb-green-deep: #006824;

  --kb-lavender: #E9E6F3;   /* カード地・画像プレースホルダ */
  --kb-yellow:   #FFE037;   /* 黄金町会場の識別色 */
  --kb-coral:    #EF8571;   /* 上大岡会場の識別色 */
  --kb-ink:      #231815;   /* 本文 */
  --kb-white:    #FFFFFF;

  /* 墨由来のヘアライン（面色ではないので許容） */
  --kb-line: rgba(35, 24, 21, 0.14);

  --kb-font: "Zen Kaku Gothic New", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --kg-max: 1040px;

  /* ============================================================
     モーション。値の正本はここ。個別のルールに秒数を直接書かない
     ============================================================ */
  --kg-dur-hover: .2s;    /* ホバー・色や不透明度の状態変化 */
  --kg-dur-fast:  .25s;   /* ロゴ縮小など小さめの遷移 */
  --kg-dur-slow:  .35s;   /* 画像のズーム・追従ナビの出入り */
  --kg-dur:       .5s;    /* メガメニューの幕・スクロールイン */
  --kg-ease:      cubic-bezier(.16, 1, .3, 1);
  --kg-stagger:   60ms;   /* 順次表示の1要素あたりの遅延 */
}

/* 動きを減らす設定のユーザーには、全モーションを実質無効化する。
   個別ルールで打ち消すのではなくここで一括で止める（書き漏らしを防ぐ）。
   完全に 0s にせず .01ms 残すのは、transitionend / animationend に依存する
   処理があっても発火させるため */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

/* iOS Safari のテキスト自動拡大（Text Autosizing）を止める予防的な指定。
   この挙動が実際に出ている箇所は今のところ確認していないが、幅が明示されて
   いないブロックで不意にフォントが拡大されることがあり、デスクトップのChromeでは
   働かないため開発者ツールでは気づけない。none ではなく 100% にするのは、
   ユーザー自身によるズームは妨げないため。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.kg {
  margin: 0;
  color: var(--kb-ink);
  font-family: var(--kb-font);
  font-weight: 400;
  line-height: 1.85;
  background: var(--kb-white);
  -webkit-font-smoothing: antialiased;
  /* WordPressコア／TT25のグローバルスタイルが body 要素に直接 letter-spacing: -0.1px
     を当てている。値自体は微小で実害は薄いが、子テーマ側で明示せず継承任せに
     しておく理由もないので上書きする */
  letter-spacing: normal;
}

/* WordPressコア（ブロックライブラリの既定スタイル）が blockquote/caption/figcaption/
   見出し/p に直接 text-wrap: pretty を当てている。この指定は要素自身への直接ルール
   のため、祖先に text-wrap を指定しても継承されず上書きできない。
   Safari の pretty 実装は日本語の狭いカラムで行末を大きく余らせることがあり、
   .kg-lead__body で実機検証したところ行末の空きが最大4.3文字分に達した
   （2026-07-23、iPhone Safari実機。Chromeでは同条件で0.8文字分と小さく再現しない）。
   pretty が意図する「行末に1単語だけ残る孤立行を避ける」効果はCJKでは
   Latin文字ほど問題にならないため、サイト全体で通常の折り返しに戻す。 */
body.kg p, body.kg h1, body.kg h2, body.kg h3, body.kg h4, body.kg h5, body.kg h6,
body.kg blockquote, body.kg caption, body.kg figcaption {
  text-wrap: wrap;
}

a { color: var(--kb-green-text); }

.kg-wrap { max-width: var(--kg-max); margin: 0 auto; padding: 32px 20px 80px; }

/* ヘッダ：背景を緑ベタにし、sticky で追従。ナビはハンバーガー（下記） */
.kg-site-head { position: sticky; top: 0; z-index: 50; background: var(--kb-green); box-shadow: 0 2px 12px rgba(35, 24, 21, .12); transition: background var(--kg-dur-fast) ease, box-shadow var(--kg-dur-fast) ease; }
.kg-site-head .kg-wrap { padding-top: 14px; padding-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: padding var(--kg-dur-fast) ease; }
.kg-site-head a { text-decoration: none; }
.kg-site-title { display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--kb-white); }
.kg-logo { display: block; height: 96px; width: auto; transition: height var(--kg-dur-fast) ease; }
/* スクロール時：ロゴを縮めてヘッダーをコンパクトに（全ページ共通） */
.kg-scrolled .kg-logo { height: 56px; }
.kg-scrolled .kg-site-head .kg-wrap { padding-top: 8px; padding-bottom: 8px; }
/* ヘッダー右側：主要リンク（GNav）＋ MENU */
.kg-headnav { display: flex; align-items: center; gap: 22px; }
.kg-gnav { display: flex; align-items: center; gap: 18px; }
.kg-gnav a { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; color: var(--kb-white); font-weight: 700; font-size: 15px; text-decoration: none; opacity: .82; padding-bottom: 5px; border-bottom: 2px solid transparent; transition: opacity var(--kg-dur-hover) ease, border-color var(--kg-dur-hover) ease; }
.kg-gnav a small { font-size: 10px; font-weight: 500; opacity: .8; letter-spacing: .06em; margin-top: 2px; }
.kg-gnav a:hover { opacity: 1; }
.kg-gnav a:focus-visible { outline: 2px solid var(--kb-white); outline-offset: 3px; }
/* カレント：緑地なので色を足さず、白の下線＋不透明度で示す（パレット外の色を使わない） */
.kg-gnav a.is-current { opacity: 1; border-bottom-color: var(--kb-white); }

/* MENU。GNavと同じ「緑地に白文字」だと7項目目のリンクにしか見えず、押す理由が伝わらない。
   白枠のピルで押せる面を与えてGNavと種類を分ける。アイコンは3本線ではなくグリッド
   （多くの項目が並ぶ記号）。ホバーで白ベタに反転させ、押せることをもう一段はっきりさせる */
.kg-navtoggle { display: inline-flex; align-items: center; gap: 9px; background: none; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; padding: 9px 16px 9px 13px; cursor: pointer; transition: background-color var(--kg-dur-hover) ease, border-color var(--kg-dur-hover) ease; }
.kg-navtoggle__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; width: 16px; height: 16px; }
.kg-navtoggle__grid span { display: block; border-radius: 1px; background: var(--kb-white); transition: background-color var(--kg-dur-hover) ease; }
.kg-navtoggle__label { color: var(--kb-white); font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1; transition: color var(--kg-dur-hover) ease; }
/* 反転時の文字・アイコンは面用の --kb-green ではなく文字用の --kb-green-text を使う */
.kg-navtoggle:hover { background: var(--kb-white); border-color: var(--kb-white); }
.kg-navtoggle:hover .kg-navtoggle__label { color: var(--kb-green-text); }
.kg-navtoggle:hover .kg-navtoggle__grid span { background: var(--kb-green-text); }
.kg-navtoggle:focus-visible { outline: 2px solid var(--kb-white); outline-offset: 3px; }

/* 狭幅ではGNavを隠しMENUに集約（6項目になったため閾値を上げる） */
@media (max-width: 980px) { .kg-gnav { display: none; } }

/* 全画面メガメニュー（緑ベタ・白文字）
   開くときは上から幕が降りる（clip-path）。opacity のフェードだけだと「その場に現れる」
   だけでアコーディオンと区別がつかないため、面が動くことで「開いた」という出来事にする。
   閉じるときは幕を上げず素早くフェードアウトさせる（戻り動作は速いほうが待たされない）。 */
.kg-drawer { position: fixed; inset: 0; z-index: 100; background: var(--kb-green); clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: clip-path var(--kg-dur-fast) ease, opacity var(--kg-dur-hover) ease, visibility var(--kg-dur-fast); }
body.kg-nav-open { overflow: hidden; }
body.kg-nav-open .kg-drawer { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; transition: clip-path var(--kg-dur) var(--kg-ease), opacity var(--kg-dur-hover) ease, visibility var(--kg-dur); }
.kg-drawer__inner { max-width: var(--kg-max); margin: 0 auto; padding: 0 20px 56px; color: var(--kb-white); }

/* 中身は幕が降りきる前に、上から順に遅れて立ち上がる（スタッガード） */
@keyframes kgMegaIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body.kg-nav-open .kg-drawer__top,
body.kg-nav-open .kg-mega__col,
body.kg-nav-open .kg-drawer__foot { animation: kgMegaIn var(--kg-dur) var(--kg-ease) both; animation-delay: var(--kg-d, 0s); }
body.kg-nav-open .kg-mega__artists { --kg-d: calc(var(--kg-stagger) * 1); }
body.kg-nav-open .kg-mega__events  { --kg-d: calc(var(--kg-stagger) * 2); }
body.kg-nav-open .kg-mega__access  { --kg-d: calc(var(--kg-stagger) * 3); }
body.kg-nav-open .kg-mega__info    { --kg-d: calc(var(--kg-stagger) * 4); }
body.kg-nav-open .kg-drawer__foot  { --kg-d: calc(var(--kg-stagger) * 5); }

/* 秒数の打ち消しは :root の共通ブロックが !important で行う。
   ここは幕（clip-path）の初期値そのものを外す指定だけ残す */
@media (prefers-reduced-motion: reduce) {
	.kg-drawer, body.kg-nav-open .kg-drawer { clip-path: none; }
}

/* 上部バー（SNS＋閉じる）はスクロールしても常に届くよう sticky */
.kg-drawer__top { position: sticky; top: 0; z-index: 2; background: var(--kb-green); display: flex; align-items: center; justify-content: space-between; padding: 16px 0 14px; margin-bottom: 8px; }
.kg-drawer__sns { display: flex; gap: 14px; }
.kg-drawer__sns a { color: var(--kb-white); display: inline-flex; }
.kg-drawer__sns .kg-icon { width: 22px; height: 22px; }
.kg-drawer__sns a:hover { opacity: .7; }
/* 閉じるは「×」1文字ではなくアイコン＋CLOSE。押せる面を持たせて操作を明示する */
.kg-drawer__close { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; color: var(--kb-white); font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1; padding: 8px 14px 8px 11px; cursor: pointer; transition: background-color var(--kg-dur-hover) ease, border-color var(--kg-dur-hover) ease; }
.kg-drawer__close .kg-icon { width: 16px; height: 16px; }
.kg-drawer__close:hover { background: rgba(255, 255, 255, .14); border-color: var(--kb-white); }
.kg-drawer__close:focus-visible, .kg-drawer__sns a:focus-visible { outline: 2px solid var(--kb-white); outline-offset: 3px; }

/* メガ本体：左＝アーティスト（広）／右＝イベント・アクセス・情報 */
.kg-mega { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; }
/* grid/flex の子は min-width が auto ＝ 中身より縮まない。アーティストの帯（overflow-x）を
   入れると左カラムが中身の幅まで膨らみ、右カラムを画面外へ押し出すため 0 を明示する */
.kg-mega__col, .kg-mega__side { min-width: 0; }
.kg-mega__side { display: flex; flex-direction: column; gap: 32px; }
.kg-mega a { color: var(--kb-white); text-decoration: none; }
/* セクション見出し：英字を小さくアイブロウとして上に置き、和文を大きく主役にする。
   4カラムすべてが同じ大きさの見出しだと視線の入口ができないため、ここで階層をつくる */
.kg-mega__h { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.kg-mega__h small { display: block; font-size: 11px; font-weight: 700; opacity: .75; margin: 0 0 4px; letter-spacing: .14em; text-transform: uppercase; }
.kg-mega__more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; margin-top: 6px; white-space: nowrap; }
.kg-mega__more .kg-icon { width: 14px; height: 14px; transition: transform var(--kg-dur-hover) ease; }
.kg-mega__more:hover { opacity: .7; }
.kg-mega__more:hover .kg-icon { transform: translateX(3px); }

/* アーティスト会場別の帯（作品写真＋名前。名前がリンクラベル、写真はalt空の装飾）。
   40pxの丸サムネは顔も作品も判別できず装飾にも情報にもなっていなかったため、
   1列の横スクロールに変えて1点あたりを大きく見せる。写真は作品が主なので矩形にする */
.kg-mega__venuegroup { margin-bottom: 28px; }
.kg-mega__venuebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.kg-mega__venuebar .kg-mega__more { margin-top: 0; }
.kg-mega__venueh { display: inline-block; font-size: 14px; font-weight: 700; color: var(--kb-ink); padding: 3px 12px; border-radius: 4px; margin: 0; }
.kg-mega__venueh.koganecho { background: var(--kb-yellow); }
.kg-mega__venueh.kamiooka { background: var(--kb-coral); }
/* 横スクロールだが2段に折る。1段だと左カラムの丈が右（4セクション積み）の半分にしかならず
   左下に大きな空白ができるうえ、1枚を大きくすると一度に3人しか見えなくなる */
.kg-mega__artistrow { list-style: none; margin: 0; padding: 0 0 12px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 128px; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.kg-mega__artistrow li { scroll-snap-align: start; }
.kg-mega__artistrow a { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1.35; }
.kg-mega__artistrow a:hover { opacity: .85; }
.kg-mega__artistrow a:hover .kg-mega__thumb img { transform: scale(1.06); }
.kg-mega__thumb { display: block; width: 128px; height: 128px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .25); }
.kg-mega__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--kg-dur-slow) ease; }
/* 帯の末尾が画面外にあることを示すため、スクロールバーは消さず細く見せる */
.kg-mega__artistrow { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .5) rgba(255, 255, 255, .15); }
.kg-mega__artistrow::-webkit-scrollbar { height: 6px; }
.kg-mega__artistrow::-webkit-scrollbar-track { background: rgba(255, 255, 255, .15); border-radius: 3px; }
.kg-mega__artistrow::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .5); border-radius: 3px; }

/* イベント（会期中・これから、サムネ付き） */
.kg-mega__eventlist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kg-mega__eventlist a { display: flex; gap: 12px; align-items: flex-start; }
.kg-mega__eventlist a:hover { opacity: .8; }
.kg-mega__ethumb { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .25); }
.kg-mega__ethumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--kg-dur-slow) ease; }
.kg-mega__eventlist a:hover .kg-mega__ethumb img { transform: scale(1.06); }
.kg-mega__einfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kg-mega__etitle { font-size: 15px; font-weight: 700; line-height: 1.35; }
.kg-mega__edate { font-size: 12px; opacity: .85; }
.kg-mega__empty { font-size: 13px; opacity: .8; margin: 0 0 10px; }
.kg-mega__empty small { font-size: 11px; margin-left: 4px; }
/* メガ内ステータスバッジ（緑地で沈まないよう白/黄で明示） */
.kg-mega .kg-estatus { align-self: flex-start; font-size: 10px; padding: 3px 7px; color: var(--kb-ink); background: var(--kb-white); }
.kg-mega .kg-estatus--upcoming { background: var(--kb-yellow); }

/* アクセス2会場 */
.kg-mega__venues { display: flex; gap: 10px; }
.kg-mega__venues a, .kg-mega__venue { color: var(--kb-ink); }
.kg-mega__venue { flex: 1; text-align: center; font-weight: 700; font-size: 14px; padding: 12px; border-radius: 6px; }
.kg-mega__venue.koganecho { background: var(--kb-yellow); }
.kg-mega__venue.kamiooka { background: var(--kb-coral); }
.kg-mega__venue:hover { filter: brightness(.95); }

/* インフォメーション */
/* インフォメーション：行の中身が和文だけだと他セクションに対して弱いので、
   英字を添えてシェブロンで「行がリンクである」ことを面として示す */
/* 4項目を縦に積むと右カラムだけが伸びて左のアーティスト帯との丈が大きく食い違うため2列に畳む */
.kg-mega__infolist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 16px; }
.kg-mega__infolist li { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.kg-mega__infolist a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px 12px 0; font-size: 16px; font-weight: 700; line-height: 1.2; transition: padding-left var(--kg-dur-hover) ease, opacity var(--kg-dur-hover) ease; }
.kg-mega__infolist a small { display: block; font-size: 10px; font-weight: 700; opacity: .7; letter-spacing: .12em; margin-top: 3px; text-transform: uppercase; }
.kg-mega__infolist .kg-icon { flex: 0 0 auto; width: 16px; height: 16px; opacity: .7; transition: transform var(--kg-dur-hover) ease; }
.kg-mega__infolist a:hover { opacity: .85; padding-left: 6px; }
.kg-mega__infolist a:hover .kg-icon { transform: translateX(3px); }

/* メガ最下部（主催・利用規約） */
.kg-drawer__foot { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .3); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.kg-drawer__foot a { color: var(--kb-white); font-size: 12px; text-decoration: none; opacity: .85; }
.kg-drawer__foot a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 820px) {
  .kg-mega { grid-template-columns: 1fr; gap: 28px; }
  /* SPは長いアーティスト一覧を最後に。イベント/アクセス/情報を先に届ける */
  .kg-mega__side { order: 1; }
  .kg-mega__artists { order: 2; }
}

/* トップ（.home）：ヘッダーを fixed で透過してFVに重ねる。
   FVを通過するまでは中身（ロゴ・GNav・MENU）ごと隠し、通過後に緑ソリッドのバーとして現す。
   MVは淡色なので、白のロゴ／ナビをMVの上に重ねない。切替の合図は JS の kg-past-fv
   （＝FVの下端にウィンドウ上端が重なった時点）。 */
.home .kg-site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; box-shadow: none; }
.home .kg-site-title,
.home .kg-headnav { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--kg-dur-fast) ease, visibility var(--kg-dur-fast) ease; }
.home.kg-past-fv .kg-site-head { background: var(--kb-green); box-shadow: 0 2px 12px rgba(35, 24, 21, .12); }
.home.kg-past-fv .kg-site-title,
.home.kg-past-fv .kg-headnav { opacity: 1; visibility: visible; pointer-events: auto; }


/* 一覧 */
.kg-page-title { font-size: 26px; font-weight: 700; margin: 0 0 2px; color: var(--kb-ink); }
.kg-page-sub { color: var(--kb-green-text); font-size: 12px; font-weight: 500; letter-spacing: .12em; margin: 0 0 32px; }
.kg-venue-head { font-size: 18px; font-weight: 700; margin: 44px 0 18px; padding-left: 12px; border-left: 5px solid var(--kb-line); color: var(--kb-ink); }
.kg-venue-head.koganecho { border-left-color: var(--kb-yellow); }  /* 黄金町 */
.kg-venue-head.kamiooka  { border-left-color: var(--kb-coral); }   /* 上大岡 */
.kg-venue-head small { font-size: 12px; color: var(--kb-green-text); font-weight: 500; letter-spacing: .12em; margin-left: 8px; }

/* アーティスト会場タブ（JS有効時のみタブ表示＋パネル切替。無効時は両会場を素で表示） */
.kg-tablist { display: none; gap: 10px; margin: 8px 0 28px; flex-wrap: wrap; }
.kg-tab { font-family: inherit; font-size: 15px; font-weight: 700; color: var(--kb-ink); background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: 999px; padding: 11px 28px; cursor: pointer; transition: background var(--kg-dur-hover) ease, border-color var(--kg-dur-hover) ease, color var(--kg-dur-hover) ease; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kg-tab__en { font-size: 11px; font-weight: 500; }
.kg-tab:hover { border-color: var(--kb-green); color: var(--kb-green-text); }
.kg-tab:focus-visible { outline: 2px solid var(--kb-green-text); outline-offset: 2px; }
.kg-tab.is-active { color: var(--kb-ink); border-color: transparent; }
.kg-tab.koganecho.is-active { background: var(--kb-yellow); }
.kg-tab.kamiooka.is-active  { background: var(--kb-coral); }
.kg-tabs.js-enabled .kg-tablist { display: flex; }
.kg-tabs.js-enabled .kg-tabpanel { display: none; }
.kg-tabs.js-enabled .kg-tabpanel.is-active { display: block; }
.kg-tabs.js-enabled .kg-venue-head { display: none; } /* タブが会場名を兼ねるので重複を隠す */

.kg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
.kg-card { text-decoration: none; color: inherit; display: block; }
.kg-card__thumb { aspect-ratio: 4 / 3; background: var(--kb-lavender); overflow: hidden; border-radius: 4px; }
.kg-card__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform var(--kg-dur-slow) ease; }
.kg-card:hover .kg-card__thumb img { transform: scale(1.04); }
.kg-card__thumb.is-empty { display: flex; align-items: center; justify-content: center; color: var(--kb-green-text); font-size: 12px; }
.kg-card__name { font-weight: 700; margin: 10px 0 2px; font-size: 15px; color: var(--kb-ink); }
.kg-card__en { color: var(--kb-green-text); font-size: 12px; font-weight: 500; }
.kg-card__cat { color: var(--kb-ink); opacity: .55; font-size: 11px; margin-top: 4px; }

/* 詳細 */
.kg-artist__cat { color: var(--kb-green-text); font-weight: 500; font-size: 12px; margin: 0 0 6px; }
.kg-artist__name { font-size: 30px; font-weight: 700; margin: 0 0 2px; color: var(--kb-ink); line-height: 1.35; }
.kg-artist__en { color: var(--kb-ink); opacity: .55; font-size: 15px; margin: 0 0 30px; }
/* イベント・ニュース詳細には英名（.kg-artist__en）が無く見出し直下が詰まるため、同じ余白を見出しに持たせる */
body.single-event .kg-artist__name,
body.single-news .kg-artist__name { margin-bottom: 30px; }
.kg-figure { margin: 0 0 30px; }
.kg-figure img { width: 100%; height: auto; border-radius: 4px; display: block; }
.kg-figure figcaption { color: var(--kb-ink); opacity: .6; font-size: 12px; margin-top: 8px; }
/* 作品写真は主役なので上部に大きく。キャプションは作品名・制作年を想定して右寄せ */
.kg-figure--work { margin-bottom: 40px; }
.kg-figure--work figcaption { text-align: right; }
/* 紹介文（左6）＋プロフィール写真（右4）。SPは縦積み */
.kg-artist__intro { display: grid; grid-template-columns: 6fr 4fr; gap: 40px; align-items: start; margin-bottom: 8px; }
.kg-artist__text { min-width: 0; }
.kg-figure--profile { margin: 0; }
.kg-bio { margin: 0 0 26px; }
.kg-bio h2 { font-size: 13px; color: var(--kb-green-text); font-weight: 700; margin: 0 0 8px; letter-spacing: .04em; }
/* 校正指示：本文より一段小さく */
.kg-bio p { margin: 0 0 1em; font-size: 15px; line-height: 1.9; }
.kg-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
/* 外部リンクのボタン（アーティストのWebサイト等）。アクセスのマップボタンと同じ体裁 */
.kg-btn-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: var(--kb-ink); color: var(--kb-white); font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; border-radius: 6px; transition: opacity var(--kg-dur-hover) ease; }
.kg-btn-link:hover { color: var(--kb-white); opacity: .85; }
.kg-btn-link:focus-visible { outline: 2px solid var(--kb-ink); outline-offset: 2px; }
.kg-btn-link::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat; }
.kg-meta { border-top: 1px solid var(--kb-line); margin-top: 32px; padding-top: 20px; font-size: 13px; color: var(--kb-ink); opacity: .7; }
.kg-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 40px; font-size: 13px; font-weight: 500; }

@media (max-width: 600px) {
  .kg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
  .kg-artist__name { font-size: 24px; }
  /* 紹介文とプロフィール写真は縦積み。写真は本文幅いっぱいにせず控えめに */
  .kg-artist__intro { grid-template-columns: 1fr; gap: 24px; }
  .kg-figure--profile { max-width: 240px; }
}

/* ============================================================
   TOP（front-page.php）
   ============================================================ */

/* セクション共通（下層は緑ベタを使わない＝地は白／ラベンダー） */
.kg-section { padding: 0; }
.kg-section > .kg-wrap { padding-top: 56px; padding-bottom: 56px; }
.kg-sec-title { font-size: 20px; font-weight: 700; color: var(--kb-ink); margin: 0 0 24px; }
.kg-sec-title small { font-size: 12px; color: var(--kb-green-text); font-weight: 500; letter-spacing: .12em; margin-left: 8px; }
.kg-sec-title--center { text-align: center; }
/* 中身がまだ無いときの共通表示（kg_empty_state）。
   薄いグレーの注記にすると「壊れている」ように見えるため、
   カード地と同じラベンダーの面に通常の文字色で置く。 */
.kg-empty { background: var(--kb-lavender); border-radius: 6px; padding: 48px 24px; margin: 24px 0; text-align: center; }
.kg-empty__title { font-size: 17px; font-weight: 700; color: var(--kb-ink); margin: 0; }
.kg-empty__title small { font-size: 12px; color: var(--kb-green-text); font-weight: 500; letter-spacing: .12em; margin-left: 4px; }
.kg-empty__note { font-size: 14px; color: var(--kb-ink); opacity: .75; margin: 10px 0 0; }
.kg-empty__action { margin: 20px 0 0; }

/* FV（メインビジュアル）
   背景＝mv-bg.svg を cover・上下左右中央で敷き、その上にタイトルSVGを中央配置する。
   下地はチラシ同様の緑ベタ。背景SVGの図形の隙間からこの緑が見える。 */
.kg-fv {
  background-color: var(--kb-green);
  background-image: url(assets/img/mv-bg.svg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.kg-fv__inner {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: 80px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kg-fv__title { margin: 0; line-height: 0; }
.kg-fv__title picture { display: block; }
/* タイトルSVGはコンテンツ幅いっぱいまで。原寸（1024px）を超えて伸ばさない */
.kg-fv__art { display: block; width: 100%; max-width: 1024px; height: auto; }

/* 狭い画面は縦長のSP版に差し替える。横長版は文字が焼き込まれていて拡大されず、
   この幅では細字が読めなくなるため（実測：390px幅で約2.5px → SP版は約6.2px）。
   タイトルSVGの切り替えは front-page.php の <picture> 側。
   FVの高さは背景SVGの比率（916:1299 ≒ 141.8%）に合わせて絵が切れないようにしつつ、
   縦に伸びすぎないよう画面高でも頭打ちにする。
   タイトルは縦長（557:758）なので、幅100%のままだと広めのSP幅で極端に背が高くなる。
   同じ高さで max-height をかけ、幅と高さの両方に収まるよう縮める。 */
@media (max-width: 900px) {
  .kg-fv {
    --kg-fv-h: min(141.8vw, 78vh);
    background-image: url(assets/img/mv-bg-sp.svg);
  }
  .kg-fv__inner { padding: 32px 16px; min-height: var(--kg-fv-h); }
  .kg-fv__art { width: auto; max-width: 100%; max-height: calc(var(--kg-fv-h) - 64px); }
}

/* クイックナビ（見出しなし・4ボックス型ボタン） */
.kg-quicknav__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kg-qbox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px 12px; border: 1px solid var(--kb-line); border-radius: 8px; background: var(--kb-white); text-decoration: none; color: var(--kb-ink); transition: border-color var(--kg-dur-hover) ease, color var(--kg-dur-hover) ease, transform var(--kg-dur-hover) ease; }
.kg-qbox:hover { border-color: var(--kb-green); color: var(--kb-green-text); transform: translateY(-2px); }
.kg-qbox .kg-icon { width: 36px; height: 36px; color: var(--kb-green-text); }
/* 動線のシェブロン（＞→←の文字ではなくアイコンで描く）。
   文字サイズに追従させ、currentColor で親の色を継承する。
   translateY はフォントの都合。align-items:center はアイコンを「フォントの
   コンテンツ領域」の中央に置くが、字面（インク）の中央はそれより下にある
   （実測 0.04〜0.07em）。そのままだとアイコンだけ上に浮いて見えるので下げる。 */
.kg-morelink .kg-icon, .kg-mega__more .kg-icon, .kg-andmore .kg-icon,
.kg-access__sub .kg-icon, .kg-back .kg-icon, .kg-page-parentlink .kg-icon,
.nav-links .kg-icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; transform: translateY(0.05em); }
.nav-links .page-numbers { display: inline-flex; align-items: center; gap: 6px; }
.kg-qbox__label { display: flex; flex-direction: column; align-items: center; gap: 3px; font-weight: 700; font-size: 14px; line-height: 1.3; }
/* 英語はGNavと同じ体裁（小さめ・少し薄く・字間広め） */
.kg-qbox__label small { font-size: 11px; font-weight: 500; opacity: .7; letter-spacing: .06em; }

/* 右サイド追従ナビ（Instagram / チケット）。FV通過後に is-visible で出す */
.kg-floatnav {
  position: fixed; right: -96px; top: 50%; transform: translateY(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden;
  transition: right var(--kg-dur-slow) ease, bottom var(--kg-dur-slow) ease, opacity var(--kg-dur-slow) ease, visibility var(--kg-dur-slow) ease;
}
.kg-floatnav.is-visible { right: 0; opacity: 1; visibility: visible; }
.kg-floatnav__btn { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 68px; padding: 13px 6px; text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: .02em; border-radius: 8px 0 0 8px; box-shadow: 0 2px 10px rgba(35,24,21,.18); }
.kg-floatnav__btn .kg-icon { width: 24px; height: 24px; }
/* Instagram＝墨（副）／チケット＝緑面＋墨文字（主・白地の上にしか出ないので沈まない） */
.kg-floatnav__btn--ig { background: var(--kb-ink); color: var(--kb-white); }
.kg-floatnav__btn--ig:hover { background: var(--kb-green-deep); color: var(--kb-white); }
.kg-floatnav__btn--ticket { background: var(--kb-green); color: var(--kb-ink); }
.kg-floatnav__btn--ticket:hover { background: var(--kb-green-deep); color: var(--kb-white); }

/* ニュース：ラベンダー地の枠 */
.kg-news > .kg-wrap { background: var(--kb-lavender); border-radius: 8px; margin-top: 0; padding: 32px 32px; }
.kg-news__list { list-style: none; margin: 0; padding: 0; }
.kg-news__list li { display: flex; gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(35,24,21,.08); font-size: 14px; }
.kg-news__list time { color: var(--kb-ink); opacity: .6; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.kg-news__list a { color: var(--kb-ink); text-decoration: none; }
.kg-news__list a:hover { color: var(--kb-green-text); }
.kg-morelink { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 500; }

/* LEAD */
.kg-lead > .kg-wrap { text-align: center; max-width: 880px; }
.kg-lead__body { text-align: left; }
.kg-lead__body p { margin: 0 0 1.2em; }
/* 狭幅では本文を小さくする。TT25のフルードタイポグラフィ任せだと375px幅でも18.2pxあり、
   1行に15文字ほどしか入らずに行末が大きく空く。特に iPhone Safari は Chrome より
   2〜3文字早く折り返すため、実機で空きが目立っていた（2026-07-22 実測）。
   .kg-pagebody（15px/14px）と同じ考え方で、リード文はそれより1段大きく保つ。 */
@media (max-width: 900px) { .kg-lead__body { font-size: 18px; } }
@media (max-width: 600px) { .kg-lead__body { font-size: 16px; } }
.kg-btn { display: inline-block; background: var(--kb-ink); color: var(--kb-white); font-weight: 700; font-size: 15px; text-decoration: none; padding: 17px 48px; border-radius: 4px; margin-top: 12px; }
.kg-btn:hover { background: var(--kb-green-deep); color: var(--kb-white); }

/* アーティスト（左右2列：左=黄金町／右=上大岡） */
.kg-artists__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 8px; }
.kg-artists__col { min-width: 0; display: flex; flex-direction: column; }
/* 会場タブ（会場色）。クリックで会場別アーカイブへ */
.kg-venue-tab { display: block; text-align: center; font-weight: 700; color: var(--kb-ink); text-decoration: none; padding: 12px; border-radius: 4px; margin: 8px 0 20px; transition: filter var(--kg-dur-hover) ease; }
.kg-venue-tab:hover { filter: brightness(0.94); }
.kg-venue-tab__ja { display: block; }
.kg-venue-tab__en { display: block; font-size: 12px; font-weight: 500; margin-top: 2px; }
.kg-venue-tab.koganecho { background: var(--kb-yellow); }
.kg-venue-tab.kamiooka  { background: var(--kb-coral); }
.kg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kg-grid--4 { grid-template-columns: repeat(4, 1fr); }
.kg-andmore-wrap { text-align: center; margin-top: auto; padding-top: 20px; }
.kg-andmore { display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: var(--kb-ink); font-weight: 700; font-size: 14px; padding: 14px; border-radius: 4px; }
.kg-andmore.koganecho { background: var(--kb-yellow); }
.kg-andmore.kamiooka  { background: var(--kb-coral); }

/* アクセス入口 */
.kg-access__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kg-access__card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--kb-ink); padding: 28px; border-radius: 6px; font-weight: 700; }
.kg-access__card.koganecho { background: var(--kb-yellow); }
.kg-access__card.kamiooka  { background: var(--kb-coral); }
.kg-access__name { font-size: 18px; }
.kg-access__name-en { font-size: 12px; font-weight: 500; }
.kg-access__sub { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }

/* フッター：緑を境界として使う */
.kg-footer { border-top: 4px solid var(--kb-green); background: var(--kb-white); }
.kg-footer .kg-wrap { padding-top: 40px; padding-bottom: 56px; text-align: center; }
.kg-footer p { margin: 0 0 8px; font-size: 12px; color: var(--kb-ink); opacity: .8; }
.kg-footer__links a { margin: 0 8px; }
/* SNS（全ページ共通）。アイコン＋サービス名。狭い画面では折り返す */
.kg-footer__sns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 0 0 24px; }
.kg-footer__sns a { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; text-decoration: none; }
.kg-footer__sns a:hover { opacity: .7; }
.kg-footer__sns .kg-icon { width: 20px; height: 20px; }
.kg-footer__org { font-weight: 700; opacity: 1 !important; line-height: 1.7; }
.kg-footer__addr { line-height: 1.9; }

/* イベント：ステータスバッジ（これから/会期中/終了） */
/* ステータスバッジ。ベースは黄地×黒字の読みやすいラベル（これからに適用）。
   会期中/終了は区別のため色替え（いずれも十分なコントラスト）。旧 --kb-lime/--kb-gray は未定義だったため廃止 */
.kg-estatus { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 10px; border-radius: 999px; vertical-align: middle; background: var(--kb-yellow); color: var(--kb-ink); }
.kg-estatus--ongoing { background: var(--kb-green); color: var(--kb-white); }
.kg-estatus--ended   { background: var(--kb-lavender); color: var(--kb-ink); }
.kg-artist__name .kg-estatus { font-size: 13px; margin-left: 10px; }

/* イベントカード（一覧） */
.kg-ecard .kg-estatus { margin: 8px 0 2px; }
.kg-ecard__date { font-size: 13px; font-weight: 700; color: var(--kb-ink); margin-top: 4px; }
.kg-ecard__venue { font-size: 12px; color: var(--kb-ink); opacity: .7; margin-top: 2px; }
.kg-grid--ended .kg-card { opacity: .65; }

/* イベント詳細：定義リスト */
.kg-edl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 20px 0 28px; font-size: 14px; }
.kg-edl dt { font-weight: 700; color: var(--kb-green-text); }
.kg-edl dd { margin: 0; }

/* 連携表示（関連イベント／関連アーティスト） */
.kg-related { margin-top: 36px; }
.kg-related h2 { font-size: 18px; margin: 0 0 14px; padding-left: 12px; border-left: 5px solid var(--kb-line); }
.kg-elist { list-style: none; padding: 0; margin: 0; }
.kg-elist li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--kb-line); }
.kg-elist a { font-weight: 700; }
.kg-elist__date { font-size: 13px; color: var(--kb-ink); opacity: .7; }

/* ニュース一覧（archive-news）と詳細（single-news） */
.kg-newslist { list-style: none; padding: 0; margin: 0; }
.kg-newsitem { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--kb-line); }
.kg-newsitem__thumb { flex: 0 0 160px; aspect-ratio: 16 / 10; background: var(--kb-lavender); border-radius: 4px; overflow: hidden; }
.kg-newsitem__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kg-newsitem__body { min-width: 0; }
.kg-newsitem time { display: block; font-size: 12px; color: var(--kb-green-text); font-weight: 700; letter-spacing: .06em; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.kg-newsitem__title { font-size: 17px; font-weight: 700; margin: 0 0 6px; line-height: 1.5; }
.kg-newsitem__title a { color: var(--kb-ink); text-decoration: none; }
.kg-newsitem__title a:hover { color: var(--kb-green-text); }
.kg-newsitem__excerpt { font-size: 13px; color: var(--kb-ink); opacity: .75; margin: 0; }
.kg-news-date { font-size: 13px; color: var(--kb-green-text); font-weight: 700; letter-spacing: .06em; margin: 0 0 8px; font-variant-numeric: tabular-nums; }

/* ============================================================
   固定ページ本文（page.php ＝ 開催概要／チケット／アクセス／応援する）
   ============================================================ */
.kg-page-title--koganecho { border-left: 6px solid var(--kb-yellow); padding-left: 14px; }
.kg-page-title--kamiooka  { border-left: 6px solid var(--kb-coral);  padding-left: 14px; }
.kg-page-parentlink { margin: 0 0 10px; font-size: 13px; font-weight: 500; }
.kg-page-parentlink a { display: inline-flex; align-items: center; gap: 6px; }

/* 会場切替（兄弟ページ） */
.kg-page-switch { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 28px; }
.kg-page-switch__btn { font-size: 14px; font-weight: 700; color: var(--kb-ink); background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: 999px; padding: 9px 22px; text-decoration: none; transition: border-color var(--kg-dur-hover) ease, background var(--kg-dur-hover) ease; }
.kg-page-switch__btn:hover { border-color: var(--kb-green); }
.kg-page-switch__btn.is-active { border-color: transparent; }
.kg-page-switch__btn.koganecho.is-active { background: var(--kb-yellow); }
.kg-page-switch__btn.kamiooka.is-active  { background: var(--kb-coral); }

/* 子ページ導線カード（アクセス親） */
.kg-page-children { margin-top: 8px; }

/* 本文タイポグラフィ（.kg-bio と別系統。見出しは緑を境界／文字色として使う） */
.kg-pagebody { font-size: 15px; }
.kg-pagebody > :first-child { margin-top: 0; }
.kg-pagebody h2 { font-size: 20px; font-weight: 700; color: var(--kb-ink); margin: 44px 0 16px; padding-left: 12px; border-left: 5px solid var(--kb-green); line-height: 1.5; }
.kg-pagebody h3 { font-size: 16px; font-weight: 700; color: var(--kb-green-text); margin: 28px 0 8px; }
.kg-pagebody p { margin: 0 0 1.1em; }
.kg-pagebody a { font-weight: 500; }
.kg-pagebody ul, .kg-pagebody ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.kg-pagebody li { margin: 0 0 .4em; }
.kg-pagebody ul.kg-notelist { list-style: none; padding-left: 0; }
.kg-pagebody ul.kg-notelist li { position: relative; padding-left: 1.4em; font-size: 13px; opacity: .85; }
.kg-pagebody ul.kg-notelist li::before { content: "※"; position: absolute; left: 0; color: var(--kb-green-text); }

/* 定義リスト（開催概要の名称・会期など） */
.kg-pagebody .kg-edl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 20px 0 28px; font-size: 14px; }
.kg-pagebody .kg-edl dt { font-weight: 700; color: var(--kb-green-text); }
.kg-pagebody .kg-edl dd { margin: 0; }

/* 開催概要：日英併記の定義リスト（Figma node 1-56）。縞＋入場料ハイライト */
.kg-pagebody .kg-outline { margin: 8px 0 0; }
.kg-outline__row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 18px 20px; align-items: start; border-radius: 4px; }
.kg-outline__row:nth-child(odd) { background: rgba(35, 24, 21, .035); }
.kg-outline__row--admission { background: #fdf4dc; } /* 入場料はクリーム（黄の淡色）でハイライト */
.kg-outline__row dt, .kg-outline__row dd { margin: 0; }
.kg-outline .ja, .kg-outline .en { display: block; }
.kg-outline dt .ja { font-weight: 700; font-size: 15px; color: var(--kb-ink); line-height: 1.5; }
.kg-outline dt .en { font-weight: 700; font-size: 11px; color: var(--kb-ink); opacity: .55; margin-top: 2px; letter-spacing: .02em; }
.kg-outline dd .ja { font-size: 15px; color: var(--kb-ink); line-height: 1.7; }
.kg-outline dd .en { font-size: 12px; color: var(--kb-ink); opacity: .55; line-height: 1.6; margin-top: 4px; }
.kg-outline__note { font-size: 13px !important; opacity: .8 !important; margin-top: 4px !important; }
.kg-outline__row--admission dd .ja strong { font-size: 16px; }

@media (max-width: 600px) {
  .kg-outline__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 12px; }
  .kg-outline dt { margin-bottom: 4px; }
}

/* 料金表 */
.kg-pagebody table, .kg-pagebody table.kg-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.kg-pagebody th, .kg-pagebody td { border: 1px solid var(--kb-line); padding: 10px 14px; text-align: left; vertical-align: top; }
.kg-pagebody thead th { background: var(--kb-lavender); font-weight: 700; }

/* 未確定アセット注記（会場マップ画像など） */
.kg-todo-note { background: var(--kb-lavender); border-radius: 6px; padding: 10px 14px; font-size: 12px; color: var(--kb-ink); opacity: .85; }

/* Googleマップ確認ボタン（アクセス各拠点。プレーンリンクより目立つボタンに） */
.kg-pagebody .kg-mapbtn { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 10px; padding: 10px 18px; background: var(--kb-green); color: var(--kb-white); font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; border-radius: 6px; transition: background var(--kg-dur-hover) ease; }
.kg-pagebody .kg-mapbtn:hover { background: var(--kb-green-deep); color: var(--kb-white); }
.kg-pagebody .kg-mapbtn:focus-visible { outline: 2px solid var(--kb-green-deep); outline-offset: 2px; }
.kg-pagebody .kg-mapbtn::before { content: ""; flex: 0 0 auto; width: 16px; height: 18px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021s6.5-5.8%206.5-10.5a6.5%206.5%200%201%200-13%200C5.5%2015.2%2012%2021%2012%2021z'/%3E%3Ccircle%20cx='12'%20cy='10.5'%20r='2.4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 会場マップ画像（アクセス黄金町） */
.kg-pagebody .kg-accessmap { margin: 0 0 20px; }
.kg-pagebody .kg-accessmap img { width: 100%; max-width: 720px; height: auto; display: block; border: 1px solid var(--kb-line); border-radius: 6px; }
.kg-pagebody .kg-accessmap figcaption { font-size: 12px; color: var(--kb-ink); opacity: .6; margin-top: 6px; }

/* 会場写真（アクセス各拠点） */
.kg-pagebody .kg-venuephoto { margin: 4px 0 14px; }
.kg-pagebody .kg-venuephoto img { width: 100%; max-width: 560px; height: auto; display: block; border-radius: 6px; }

@media (max-width: 600px) {
  .kg-pagebody { font-size: 14px; }
  /* 表は行＝カード化。thead を隠す代わりに各セルへ data-label で列見出しを添える */
  .kg-pagebody table, .kg-pagebody tbody, .kg-pagebody tr, .kg-pagebody td { display: block; width: 100%; }
  .kg-pagebody thead { display: none; }
  .kg-pagebody tbody tr { border: 1px solid var(--kb-line); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; }
  .kg-pagebody td { border: none; padding: 5px 0; display: flex; justify-content: space-between; gap: 12px; }
  .kg-pagebody td[data-label]::before { content: attr(data-label); font-weight: 700; color: var(--kb-green-text); flex: 0 0 auto; }
  .kg-pagebody td:first-child { display: block; font-weight: 700; border-bottom: 1px solid var(--kb-line); padding-bottom: 8px; margin-bottom: 6px; }
}

@media (max-width: 900px) {
  .kg-quicknav__grid, .kg-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .kg-artists__cols { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .kg-access__grid { grid-template-columns: 1fr; }
  .kg-quicknav__grid, .kg-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .kg-newsitem { flex-direction: column; gap: 10px; }
  .kg-newsitem__thumb { flex-basis: auto; width: 100%; }
  /* 下部固定の追従バー分、本文末尾が隠れないよう余白を確保 */
  body.kg { padding-bottom: 60px; }
  /* 追従ナビはSPでは下部固定バーに（FV通過後にせり上がる） */
  .kg-floatnav { top: auto; right: 0; left: 0; bottom: -100px; transform: none; flex-direction: row; gap: 0; }
  .kg-floatnav.is-visible { bottom: 0; right: 0; }
  .kg-floatnav__btn { flex: 1; flex-direction: row; justify-content: center; width: auto; border-radius: 0; font-size: 12px; box-shadow: none; }
}

/* ============================================================
   スクロールイン（#53）
   画面に入ったら下から立ち上がる。グループ内は順番に遅れて出る。

   初期状態を隠すのは html.js 配下のみ（#52）。JSが動かない環境では
   最初から見えている状態にする。

   :not(.is-inview) で隠すのは詳細度の争いを避けるため。transition は
   常に持たせておき、クラスが付いてルールが外れた瞬間に効かせる。

   遅延の元になる --kg-i は JS がグループ内の順番から設定する（CSSの
   nth-child で書くと対象セレクタの数だけ列挙が要るため）。

   下層ページの見出し（.kg-page-title）は対象にしない。ページを開いて最初に
   読む要素が遅れて動くと読みづらいため。TOPのセクション見出し
   （.kg-sec-title）はスクロールの途中で現れるので対象に含める。
   ============================================================ */
html.js .kg-quicknav__grid > *,
html.js .kg-news__list > li,
html.js .kg-newslist > li,
html.js .kg-grid > *,
html.js .kg-sec-title {
  transition: opacity var(--kg-dur) var(--kg-ease), transform var(--kg-dur) var(--kg-ease);
  transition-delay: calc(var(--kg-stagger) * var(--kg-i, 0));
  will-change: opacity, transform;
}

html.js .kg-quicknav__grid > *:not(.is-inview),
html.js .kg-news__list > li:not(.is-inview),
html.js .kg-newslist > li:not(.is-inview),
html.js .kg-grid > *:not(.is-inview),
html.js .kg-sec-title:not(.is-inview) {
  opacity: 0;
  transform: translateY(16px);
}

/* ============================================================
   画像のフェードイン（#54）
   lazy画像が視界に入った瞬間に唐突に現れるのを和らげる。

   カードのスクロールイン（位置＋不透明度）とは別レイヤー。カードが先に出て
   中身がラベンダーのプレースホルダのまま、あとから画像だけパッと入れ替わる
   現象を消すのが目的なので、こちらは不透明度だけを動かす。

   MV（.kg-fv__art）とロゴは対象外。最初に出したい要素なので遅らせない。

   is-instant はキャッシュ済み（読み込み済み）の画像に JS が付ける。
   2回目以降の訪問でいちいちフェードすると、かえって遅く感じるため瞬時に出す。
   ============================================================ */
html.js .kg-card__thumb img,
html.js .kg-newsitem__thumb img,
html.js .kg-figure img {
  transition: opacity var(--kg-dur-fast) ease;
}

html.js .kg-card__thumb img:not(.is-loaded),
html.js .kg-newsitem__thumb img:not(.is-loaded),
html.js .kg-figure img:not(.is-loaded) {
  opacity: 0;
}

/* カード内の画像はホバーで拡大もするため、transition を上書きせず両方効かせる */
html.js .kg-card__thumb img {
  transition: opacity var(--kg-dur-fast) ease, transform var(--kg-dur-slow) ease;
}

html.js img.is-instant { transition: none; }