@charset "UTF-8";
/* =========================================================
   北原ミレイ オフィシャルサイト  C案
   2026-09-09 の顧客リクエストを反映した案。A案（style.css）から派生。

   決めごと
   ・文字色はガンメタ／ダークグレー。強調は「色」ではなく太字とサイズで作る
   ・差し色はライム1色。オレンジは「速報！」のように注目させたい文字だけ
   ・下地はどの階層も白。区切りは面ではなく1pxの罫線と余白で作る
   ・書体は明朝を使わない（M PLUS 1p／ご挨拶だけ Klee One）。2026-10-02 に差し替え
   ========================================================= */

/* ---------- 変数 ---------- */
:root {
  --bg:          #ffffff;

  /* 文字の濃さは3段。★濃い＝重要、ではない。
     現行の公式サイトは「見出しほど薄いグレー」で組まれており、
     顧客指示の「強調する際は文字色のダークグレーを太字又はサイズＵＰ」も
     ＝色は変えず、太字とサイズで強調する、という意味。
     ここを濃くすると現行サイトと逆の印象になる。 */

  /* 本文。公式サイトの #414141 と同じ明るさ。白地とのコントラスト 10.0 */
  --ink:         #3f4448;
  /* セクション見出し。公式サイトの #6e6e6e 相当。同 5.0 */
  --ink-head:    #6b7176;
  /* ご挨拶の1行目。もとは公式サイトの #919191 相当（#8d9296／コントラスト3.1）だったが、
     19px・太字700・薄いグレーの組み合わせで画数の多い和文がにじんで見えたため、
     2026-09-10 に太さを500へ落とし、色をここまで濃くした。
     ★太字をやめると「大きい太字」の例外が使えなくなり、コントラスト4.5が要る。
       3.1 のまま細くすると読めなくなるので、色と太さは必ずセットで動かすこと。 */
  --ink-lead:    #6b7176;   /* コントラスト 4.9 */
  /* 補助情報（時間・お問合せ先など）。同 4.8。14px でも読める下限 */
  --ink-soft:    #6d747a;
  /* A案から引き継いだ名前。中身は本文と同じ（濃くしない） */
  --ink-strong:  var(--ink);

  /* 差し色のライム。
     白地に白抜き文字を載せてコントラスト 4.75 ／
     白地に文字色として置いても 4.75。ボタンの地にも文字にも同じ1色で足りる。
     これより明るいライム（#66861a など）にすると白抜き文字が 4.2 まで落ち、
     基準の 4.5 を割るので上げないこと。 */
  --lime:        #5f7d16;
  --lime-dark:   #4c6511;   /* ホバー時 */
  --lime-pale:   #f2f6e7;   /* ごく薄い地。ホバーの下地だけに使う */
  --lime-line:   #a9c24a;   /* 装飾の細線だけ。文字には使わない（比 2.2） */

  /* 注目させたい文字だけに使うオレンジ。白地とのコントラスト 4.60。
     面（ボタンの地・帯）には使わない。顧客指示「速報！等の注目させる文字色」 */
  --orange:      #c0530a;
  /* ヘッダーの筆記体ロゴ・メニューの英語と同じ濃いオリーブ。白地とのコントラスト 7.1 */
  --lime-deep:   #46600f;

  /* ごく薄いオリーブの地（2026-10-02 顧客指示）。
     --olive-wash … テロップの地「本当に薄いオリーブ」
     --olive-mist … フッターの地「薄い軽いオリーブ」。テロップより一段だけ濃い
     ★この上の文字は --ink（本文色）にする。--ink-soft はフッター地で 3.9 しかなく、
       14px の住所・電話番号が基準4.5を割る */
  --olive-wash:  #f0f5e6;   /* 本文色とのコントラスト 8.9 */
  --olive-mist:  #e5ead7;   /* 本文色とのコントラスト 8.0 */

  /* テロップの強調色（2026-10-02 顧客ご相談「オリーブに似合う強調色」）。
     --accent    … 「速報！」。朱赤。オリーブの地で 5.4。オレンジ（4.2）より読みやすい
     --title-c   … 新曲の曲名。葡萄色（ワインのような赤紫）。「酒」「酔いしれて」から。
                   黄緑（オリーブ）の反対側の色なので、少ない面積でもよく目立つ。同 9.1
     ★2色とも pattern.html の「テロップの強調色」に他の候補と並べてある */
  --accent:      #b8321e;
  --title-c:     #632a6e;
  /* テロップの強調色（2026-10-20 確定）。
     --telop-hot   … 「速報！」。赤 #dc0016。20px太字＝大きい文字。薄いオリーブの地で 4.66
     --telop-title … 曲名。ブルー① #0a4fd6（コバルト）。薄いオリーブの地で 6.10
                     経緯：2026-10-20 に最初「ブルー③（#0a6ee8）」の回答があり、その後の別のメールで
                     「ブルー①でお願いします」と変更された。後のメールが有効。
     新曲スライドの曲名＝--telop-hot、キャッチコピー＝--telop-title に連動している
     （顧客「タイトル色は速報の赤、キャッチコピーの色はテロップのタイトルの色」） */
  --telop-hot:   #dc0016;
  --telop-title: #0a4fd6;

  /* ボタンにマウスを乗せたときの地。2026-10-19 顧客「少し薄くでお願いします」で確定。
     2026-10-08 は --lime-line（#a9c24a）だったが、薄い3段階から「少し薄く」（#cbda92）を選ばれた。
     文字は --ink（濃いグレー）のまま。この地の上で 8以上のコントラスト。
     ★ふだんのボタンの地は --lime-pale（#f2f6e7）。これより濃くしないと、乗せた変化が分からなくなる */
  --hover-bg:    #cbda92;

  --line:        #e3e6e8;
  --line-soft:   #eef0f1;

  /* 書体。明朝は使わない。
     var(--serif) は A案から引き継いだページ内の指定（会社案内・お問合せなど）が
     参照しているので、名前だけ残して中身をゴシックに差し替えている。
     ここを消すと、それらの箇所だけ書体が外れる。 */
  /* 2026-10-17 顧客回答「フォントはＤで行きたい。ただもしもの為Ａはキープ」により
     本文書体を Zen Maru Gothic（フォントD）に確定した。
     A（Zen Kaku Gothic New）は ?font=a を付けると全ページに当たる形で残してある（script-c.js）。
     ★--sans を変えたら、下の html[data-font="a"] の並びも見直すこと */
  --sans:  "Zen Maru Gothic", "游ゴシック体", YuGothic, "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --serif: var(--sans);
  /* ご挨拶だけ。顧客回答「ご挨拶はＡ案」＝ Klee One（ペン字風）。太字は無く最大600 */
  --pen:   "Klee One", "游ゴシック体", YuGothic, "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  --script: "Parisienne", "Segoe Script", cursive;

  --wrap: 1160px;
  --read: 780px;
  --side: 360px;   /* トップページ右カラムの幅 */

  /* A案から引き継いだ色名の受け皿。
     build2.py は3案で共通なので、生成されるHTMLの inline style に
     A案の色名（--citrus-dark など）が残っている箇所がある。
     未定義のまま参照すると、その宣言だけが無効になって
     ★エラーも出さずにそこの色や書体だけ外れる。
     実際に contact.html の「個人情報の保護について」で起きていた。
     A案側を直すとA案の生成物まで変わってしまうので、C案側で受ける。 */
  --citrus:      var(--lime);
  --citrus-dark: var(--lime-dark);
  --citrus-pale: var(--lime-pale);
  --bg-soft:     #ffffff;   /* 地色は全階層とも白 */
  --bg-soft2:    #ffffff;
}

/* ---------- 保管用：本文フォントA（Zen Kaku Gothic New）への切り替え ----------
   顧客回答（2026-10-17）「Ｄで行く。ただもしもの為Ａはキープ」。
   URLに ?font=a を付けると、script-c.js が <html data-font="a"> を付け、Aだけを
   Google Fonts から読み込む。ページを移っても続く（sessionStorage）。
   ふだんのお客様には何も出ない（Dが標準）。?font=d で標準に戻る。 */
html[data-font="a"] { --sans: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "Hiragino Sans", Meiryo, sans-serif; }
.font-preview {
  position: fixed; left: 12px; bottom: 12px; z-index: 300;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 14px; font-size: 14px; line-height: 1.5;
  color: #fff; background: rgba(40,44,48,.92); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.font-preview a { color: #fff; }

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: var(--lime-dark); }

/* ---------- 基本 ---------- */
body {
  font-family: var(--sans);
  font-size: 17px;          /* 顧客指示の基準サイズ。50代以上が主な閲覧者 */
  line-height: 1.9;
  color: var(--ink);
  background: var(--bg);
  letter-spacing: .03em;
  -webkit-font-smoothing: antialiased;
}
.wrap  { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
/* 見出しをすべて左寄せにしたので、本文（幅780px）の左端も .wrap の左端に揃える。
   中央寄せのままだと、見出しだけ左に飛び出して段差になる。
   50% は親（body）の幅を基準にした値なので、縦スクロールバーの分も自動で入る。 */
.read  {
  width: min(100% - 40px, var(--read));
  margin-left: max(20px, calc(50% - var(--wrap) / 2));
  margin-right: auto;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 太字は色を変えない。顧客指示は「文字色のダークグレーを太字」なので、
   まわりの文字色を受け継いだまま太らせるのが正しい */
strong, b { font-weight: 700; }
/* 作品名・イベント名などの短い見出しは、語の切れ目で折り返す（Chrome・Edge）。
   「酔いしれ／て」「焼／肴」のように語の途中で割れるのを防ぐ。
   対応していないブラウザ（Safari など）では従来どおり1文字単位で折り返すだけで、崩れはしない */
.hr-title, .product-name, .sched-body .title, .mv-caption h3, .disc-title, .banner-card .cap { word-break: auto-phrase; }

/* =========================================================
   ヘッダー
   左上に筆記体ロゴ →  日本語のサイト名 → 罫線 → 電話番号。
   ★2026-10-08 までは罫線を .brand の列幅（40%）いっぱいに引いていたが、
   「電話番号の上の線はロゴ幅と同じくらいに」との指示で、ロゴ・サイト名の
   中身の幅に合わせる形に変更した（.brand-head を参照）。
   列幅（40%）自体はメニューの開始位置を決める値として残っている。
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(8px);
}
/* 2026-10-17 顧客「写真枠の上部の細い線も写真幅で収めて」。
   ヘッダー下の線を画面いっぱいから .wrap 幅（写真枠・テロップと同じ）に変更。
   線は .site-header ではなく .header-inner に引く */
.header-inner {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  column-gap: 28px; align-items: end;
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--line);
  transition: padding .25s ease;
}
.brand { min-width: 0; width: max-content; max-width: 100%; }   /* 幅を罫線に合わせる（TELのセンター合わせ用） */
/* 罫線はロゴ・サイト名の幅（中身の幅）に合わせる（2026-10-08 顧客指示
   「電話番号の上の線はロゴ幅と同じくらいに」）。
   以前は列の幅いっぱい（45%→40%）に引いていたが、ロゴ・サイト名より明らかに長く伸びていた。
   ★中身（.brand-mark）が width:max-content で中央寄せなので、ここも同じく
   max-content にすれば、線の長さが自動でロゴ・サイト名の幅に揃う。
   ★2026-10-17 顧客指示「筆記体ロゴを写真枠の左一杯（頭合わせ）に」で、中央寄せをやめて
     左端（＝ヘッダー・写真枠・テロップと同じ .wrap の左端）に揃えた。Telも同じ左端 */
.brand-head {
  width: max-content; max-width: 100%; margin-inline: 0;
  padding-right: 70px;   /* 罫線をロゴ幅＋70px に（顧客「アンダーバーもう少し長く」。2026-10-17） */
}
/* ★罫線は「右に細くなる形」に確定（顧客「右に細く雰囲気があって最高」2026-10-19）。
   見出し（.section-head h2::after）と同じ向きの作りで、左端2px→右端1pxへ細くなる。
   見出しは右端を0まで絞って淡くするが、ここは右端を1px・不透明寄りに残した
   （「短く見える」との指摘で。右端まで見えないと、均一な線より短く感じる）。
   ★::after は padding の内側（中身の幅）にしか引けないので、右の padding 分は
     負の余白で外へ出している。これを忘れると線が padding-right 分（70px）短くなる。
     padding を残しているのは、TELのセンター合わせが罫線の幅を基準にしているため */
.brand-head::after {
  content: ""; display: block; height: 2px; margin: 9px -70px 0 0;
  background: linear-gradient(to right, var(--lime), var(--lime-line) 80%, rgba(169,194,74,.75));
  clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 100%);
}
/* ロゴの幅ちょうどの箱。サイト名はこの中で中央に寄る（顧客指示 2026-10-02
   「筆記体の下にセンター合わせ」）。ロゴ画像の幅が箱の幅を決める */
.brand-mark { display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 100%; }
.brand-logo { display: block; text-decoration: none; line-height: 0; }
/* 筆記体ロゴ。元画像は3031×721あるので大きくしてもにじまない。
   色は img/logo-c.png に焼き込んである（mkimg_c.py）。CSSでは変えられない。 */
.brand-logo img {
  height: 70px; width: auto; display: block;
  transition: height .25s ease;
}
/* サイト名。2026-10-17 顧客回答「サイト名は④でお願いします」で確定。
   2026-10-02 の「太字で詰める」指定（Noto Sans JP の palt）は、2026-10-07 の
   「イメージが違った」で見送り済み。④は太字で詰めるのをやめ、本文と同じ書体
   （--sans）のウェイト500・字間を広めにした静かな組み方。
   ★本文書体に追従するので Noto Sans JP の読み込みは不要（build.py から外した）。
     サイト名の文言を変えても書体が外れることはない */
.brand-ja {
  font-family: var(--sans);
  font-size: 15.5px; font-weight: 500; line-height: 24px;   /* 行の高さは書体を替えても変わらないよう px で固定。15文字×15.5＝232px で、枠（約242px）に約10pxの余裕 */
  white-space: nowrap;   /* 2026-10-20 どんな状況でも折り返さない（枠との余裕が1pxしか無く、折れて乱れていた） */
  letter-spacing: 0;
  color: var(--ink); padding: 4px 0 0;
  text-align: justify; text-align-last: justify; text-justify: inter-character;
}
/* ★2026-10-19 顧客「サイト名の横幅を、筆記体ロゴの Ki の i から Mi の i まで（ロゴの一部の幅）で収めて。
   小さくなっていい」。ロゴ画像（1100×202）の中で、Ki の i の左端が左から約21%、
   Mi の i の「足」（文字の下端）の右端が約84.5%（＝幅 約63.5%）。実測は logo-c.png を拡大して読んだ値。
   ★当初は i の「点」（斜体で右へ流れるので約87.6%）まで取ったが、文字の下にいる日本語の右端が
     i を通り越して r の下まで伸びて見えると指摘された（2026-10-19）。i の足のほうで取るのが正しい。
   .brand-mark の幅はロゴ画像で決まるので、サイト名は割合で位置と幅を指定し、
   両端揃え（均等割り付け）で、その幅ぴったりに広げる。ロゴの大きさが変わっても自動で追従する。
   ★ロゴを差し替えたら、この21%・63.5%も測り直すこと。
   ★1行・折り返さない（white-space:nowrap）。文字が枠より多いと右へはみ出して見えるので、
     サイト名の文言を長くするときは、文字サイズを下げて余裕を持たせること。
   ★スマホ・タブレット（1199px以下）は、この幅だと文字が10px前後になり読めないので、ロゴ全幅にする */
@media (min-width: 1200px) {
  .brand-ja { align-self: flex-start; margin-left: 21%; width: 63.5%; }
}
/* ★2026-10-20 スマホ・タブレットのサイト名。経緯：
   ①「PCと同じように Ki の i から Mi の i に」→ ②（携帯で見て）「ロゴより少し広く見える。ロゴより
   少しだけ狭く。ただしPC同様（i〜i）では小さすぎる」。②が最終。
   ロゴ幅の93%を、ロゴの中央に置く。文字は、その幅に15文字が収まる大きさ
   （ロゴ幅 = 画面幅−135px、上限272px。文字 = ロゴ幅×0.93÷15.3）。
   PC（1200px以上）は従来どおり Ki の i 〜 Mi の i。 */
@media (max-width: 1199px) {
  .brand-ja { align-self: flex-start; margin-left: 8%; width: 84%; }   /* 2026-10-21 顧客「もう少しだけ狭めて」93→84%（約1割減。中心は据え置き） */
}
/* 「Tel」と数字の両方を筆記体に（顧客ご相談「ＴＥＬから数字も筆記体はどうか」→
   2026-09-10 に採用）。pattern.html の「電話B」。
   ★サイズは「Tel」27px に対して数字23px。Parisienne は数字の字面が大文字より
     大きく作られているので、同じ px にすると数字のほうが大きく見える。
     見た目の高さを揃えるために数字だけ落としてある。片方だけ触ると不揃いになる。
   ★ヘッダーはデザインを優先する方針（2026-09-10 に決定）。
     掛けるために読み取る番号はフッターに読みやすい書体で置いてあるので、
     ここは大きさより見た目のまとまりを取る。
   ★フッターの電話番号は素直な書体のままにしておくこと。両方を筆記体にしない。 */
/* ★太字（2026-10-02 顧客指示）。Parisienne には太字が無い（400のみ）。
     font-weight:700 にするとブラウザが機械的に太らせ、ブラウザごとに太さが変わる。
     かわりに文字の輪郭に同じ色の線を足して太らせている（-webkit-text-stroke）。
     Safari・Chrome・Edge・Firefox のどれでも同じ太さになる。0.7px より太くすると
     「0」「6」「9」の中の穴がつぶれ始める */
/* 2026-10-07 顧客指示「Telももう少し小さく」で 27px/23px → 24px/20px */
.brand-tel {
  margin-top: 9px;
  font-family: var(--script); font-size: 24px; letter-spacing: .03em; line-height: 1.15;
  color: var(--lime-deep); white-space: nowrap;   /* 2026-10-19 顧客「文字色を全て筆記体ロゴと同じオリーブに」（ロゴは --lime-deep と同色 #46600f） */
  /* 2026-10-17 顧客「TELはセンター合わせで」→ 2026-10-19 「Kitahara Mirei の筆記体に対してセンター」。
     罫線は右へ70px長いので、その分（70px）を右から引き、ロゴ画像と同じ幅の中で中央に置く。
     （スマホは .brand-tel を出していないので関係ない） */
  text-align: center; margin-right: 70px;
}
.tel-label {
  font-family: var(--script); font-size: 24px; color: var(--lime-deep);
  margin-right: 9px; letter-spacing: 0;
  -webkit-text-stroke: .6px currentColor;
}
/* 2026-10-17 顧客「数字を薄く見せて」。数字だけ太らせ（text-stroke）をやめ、色も一段淡くした。
   ★「もう少し濃く」（同日）で --ink-head（#6b7176）と本文色（#3f4448）の中間 #565c61 にした（コントラスト約6.9）。
   「Tel」の文字は従来どおり太らせたまま */
.brand-tel a { font-size: 20px; color: var(--lime-deep); text-decoration: none; font-weight: 400; }
.brand-tel a:hover { color: var(--lime-dark); }

/* メニュー（罫線の右）
   ★padding-bottom は「メニューをどれだけ上へ持ち上げるか」の値。
     .gnav は align-self:end で下端に揃えているので、下の余白を増やすと文字が上がる。
     37px にすると、選択中の項目の下線がサイト名の罫線とちょうど同じ高さに乗る
     （実測：罫線 y=135 / 下線 y=164 の差 29px ＋ もとの 8px）。
     ロゴや電話番号の大きさを変えたら、この値も測り直すこと。 */
.gnav { align-self: end; padding-bottom: 35px; min-width: 0; }   /* 2026-10-19 サイト名の行の高さを24px固定にしたので、38→35pxに測り直し（選択中メニューの下線と罫線の下端を揃える。実測で両方 y=125〜126） */
.gnav ul {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2px; flex-wrap: wrap;
}
.gnav a {
  display: block; padding: 8px 6px; text-align: center;
  font-size: 16px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink); text-decoration: none;
  position: relative; transition: color .2s; white-space: nowrap;
}
/* 日本語の上に重ねる英語。ロゴ・電話番号と同じ筆記体で、色は濃いグリーン。
   ★読み上げソフトには聞こえないようにしてある（HTML側で aria-hidden）。
     「Home ホーム」と二重に読まれると、目の見えない方には冗長なため。
   ★行の高さは px で固定する。小数にすると、画面の拡大率125%のときに
     項目ごとに1pxの下線が2ドットに割れて太さがまちまちに見える。 */
.nav-en {
  display: block; margin-bottom: 1px;
  font-family: var(--script); font-size: 18px; line-height: 19px;
  color: var(--lime-deep); letter-spacing: .02em;
  /* ★Parisienne は 400 しか無い。選択中の項目は日本語が太字になるが、
     ここまで太字にするとブラウザが機械的に太らせて線がにじむ。400 で固定する。 */
  font-weight: 400;
}
.nav-ja { display: block; line-height: 22px; }
.gnav a::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px;
  height: 1px; background: var(--lime);
  transform: scaleX(0); transform-origin: center; transition: transform .25s;
}
.gnav a:hover, .gnav a:focus-visible { color: var(--lime-dark); }
.gnav a:hover::after, .gnav a:focus-visible::after { transform: scaleX(1); }
.gnav a[aria-current="page"] { color: var(--lime-dark); font-weight: 700; }
.gnav a[aria-current="page"]::after { transform: scaleX(1); height: 2px; }
/* ミュージックビデオ・ブログはPCではフッターとトップから行く。
   スマホのドロワーには出す（画面が狭く、フッターまで遠いため） */
.gnav .nav-extra { display: none; }
.gnav .nav-tel { display: none; }

/* ハンバーガー */
.nav-toggle {
  display: none; width: 52px; height: 52px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; color: var(--ink);
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background: currentColor; transition: transform .25s, opacity .25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ★2026-10-20 ヘッダーをスマホ用（ハンバーガー）に切り替える幅を 900px → 1199px に上げた
   （顧客「窓の幅でサイト名の文字列が乱れるのを、筆記体ロゴのように固定してほしい」）。
   以前は 901〜1199px の間だけ、ロゴが窓に合わせて縮み（罫線の右の余白70pxを除いた幅しか
   使えないため）、サイト名が2行に折れ、メニューも「お問合せ」が2行目へ回っていた。
   実測：ロゴが固定の381pxで出るのは窓の幅が約1200px以上。そこで 1200px以上は
   ロゴ・サイト名・メニューがすべて固定の大きさ、1199px以下はスマホ用の表示にした。
   途中の「縮む」状態を作らないのが狙い。 */
@media (max-width: 1199px) {
  .site-header { position: sticky; }
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; padding: 12px 0; position: relative;
  }
  .brand-logo img { height: 50px; }   /* 44→48→50px（2026-10-20）。サイト名を Ki〜Mi の幅に収めても文字が小さくなりすぎないように。390pxでハンバーガーと並んで収まる限度付近 */
  /* 幅が狭いと罫線が画面いっぱいになり、ただの線に見えるので外す */
  .brand-head { padding-right: 0; }
  .brand-head::after { display: none; }   /* 幅が狭いと罫線が画面いっぱいになり、ただの線に見えるので外す */
  .brand-ja { font-size: clamp(9px, calc((100vw - 135px) * .054), 16px); line-height: 22px; padding-top: 3px; }
  /* ↑ ロゴの幅は「画面幅 − 135px」（上限272px）。サイト名の枠はその93%、15文字の幅は 文字サイズ×15。
     ちょうど収まる大きさ = (画面幅−135px)×0.0608。0.06 で少し余裕を持たせた */
  .brand-tel { display: none; }   /* ドロワーの中に「お電話」を出している */
  .nav-toggle { display: block; }
  .gnav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; padding-bottom: 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .gnav.is-open { max-height: 90vh; overflow-y: auto; }
  .gnav ul { display: block; width: 100%; padding: 4px 0 12px; }
  .gnav a {
    padding: 15px 22px; font-size: 17px;
    border-bottom: 1px solid var(--line-soft);
  }
  .gnav a::after { display: none; }
  .gnav a[aria-current="page"] { background: var(--lime-pale); }
  .gnav .nav-extra { display: block; }
  .gnav .nav-tel {
    display: block; padding: 16px 22px; font-size: 20px;
    color: var(--lime-dark); text-decoration: none; border-bottom: 0; font-weight: 500;
  }
}

/* =========================================================
   ヒーロー（スライドショー）
   2026-09-09 の顧客指示「枠一杯に」で全幅にしていたが、
   2026-10-07「スライドショー枠の横幅を、TelのTの字～お問合せのせの字幅
   （＝ヘッダー・テロップの帯と同じ幅）に揃えたい。枠が他より広く、
   写真が寸足らずに見える」との指示を受け、.wrap と同じ幅に戻した。
   枠の幅が決まったので、高さも vw の可変指定をやめて固定にした
   （下の「固定にしてほしい」との指示への対応も兼ねる）。
   ★2026-10-02 から写真は切り取らない。顧客「本人がつぶれて窮屈」を受け、
     写真（16:9）を枠の高さいっぱいに中央へ置き、左右の空きは
     写真の左端・右端を外へ引き伸ばしたもの（.side）で継ぎ足している（本人指示）。
     写真全体をぼかして敷く方式は、人物がグレーの影のように映り込んで不自然だったので採らなかった
     以前の cover で敷く形に戻すと、写真の上下が大きく切れる
   6枚のうち2枚が新曲（.hero-release）。HTMLで組んでいる（build.py の _release_slide）
   ========================================================= */
.hero { position: relative; background: #fff; overflow: hidden; }
/* --h は枠の高さ。継ぎ足しの幅（＝(枠の幅 − 写真の幅) ÷ 2）の計算にも使う。
   枠自体を .wrap 幅に収めたので、.side の計算式（50% 基準）はそのままで正しく動く */
.hero-stage {
  position: relative; aspect-ratio: 16 / 9;
  width: min(100% - 40px, var(--wrap)); margin-inline: auto;
}
/* ★見えていないスライドは visibility:hidden にする。
   opacity:0 だけだと透明なまま重なっていて、DOMで後ろにある新曲スライドのリンクが
   上にかぶさり、写真をクリックすると見えない商品ページが開いてしまう。
   Tab キーでも見えないリンクに止まる。
   消えるときは opacity の変化（1.2秒）が終わってから隠す（visibility の遅延） */
.hero-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; overflow: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }
.hero-slide .bg { display: none; }   /* A案のぼかし背景。使わない */
/* 写真本体。枠いっぱい（枠が16:9なので、16:9の写真は切れずにそのまま収まる）。
   2026-10-17 顧客「写真の両サイドのグレー（継ぎ足し）をなくし、枠を写真ぴったりに」で、
   枠の高さを幅から決める形（aspect-ratio 16/9）に変え、継ぎ足し（.side）を廃止した。
   旧サイト（960×540）と同じ見え方。
   ★16:9でない写真（04: 1600×970）だけは上下が約7%切れる。人物の頭が切れていないか、
     写真を差し替えたら必ず見ること */
.hero-slide > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 0; box-shadow: none;
}

/* ---- 新曲のスライド ---- */
.hero-release { background: var(--olive-wash); }
/* .hero-stage がすでに .wrap 幅に収まっているので、中身はここでは100%のまま。
   以前はヒーローが全幅だったため、ここで .wrap 幅に絞っていた名残り */
/* 2026-10-19 顧客「やさしいタイプで。写真を右置きにし、上下右を枠一杯に広げてオリーブが見えない
   ように。左にくる文言のタイトル色は速報の赤、キャッチコピーの色はテロップの曲名の色」。
   ジャケットを右端に置き、枠の上・下・右の縁いっぱいに広げた（余白・影・額縁なし）。
   左に文言。DOMの順はジャケット→文言のままで、見た目の順は order で入れ替えている
   （読み上げ・Tab の順を変えないため）。 */
.hr-link {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 100%;
  align-items: center; gap: 0;
  padding: 0;
  text-decoration: none; color: var(--ink);
}
/* ジャケットは枠の高さいっぱいの正方形。右・上・下の縁に接する */
.hr-jacket {
  order: 2; display: block; height: 100%; aspect-ratio: 1 / 1;
  background: #fff; line-height: 0;
}
.hr-jacket img { width: 100%; height: 100%; object-fit: cover; }
.hr-nojacket {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; line-height: 1.6; text-align: center;
  font-family: var(--script); font-size: 52px; color: var(--lime);
  border: 1px solid var(--lime-line);
}
.hr-nojacket small { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); letter-spacing: .1em; }
.hr-body { order: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 30px 32px 34px 48px; }
/* ★ここから .hr-title までは、以前は clamp() で画面幅（vw）に応じて
   連続的に拡大縮小していた。ヒーロー枠がもう全幅ではなく .wrap 幅に
   固定されたので、vw 基準の指定は意味を失ったうえ、
   「ウィンドウ幅を変えると文字の大きさまで連動する」という顧客の違和感の
   原因そのものでもあったため、固定pxにした（旧 clamp の上限値）。 */
.hr-en {
  font-family: var(--script); font-size: 34px; line-height: 1.2;
  color: var(--lime);
}
/* 曲名はカギ括弧なしで大きく見せる（括弧を付けると12字＋2字で1行に収まらない）。
   ★34px より大きくすると、幅1160pxで「酔いしれ／て」と語の途中で折り返す */
.hr-title {
  margin: .1em 0 .1em;
  font-size: 34px; font-weight: 700; line-height: 1.35;
  letter-spacing: .02em; font-feature-settings: "palt"; color: var(--telop-hot);   /* 顧客指定：テロップ「速報！」と同じ鮮やかな赤 */
}
.hr-date { font-size: 20px; font-weight: 700; letter-spacing: .04em; }
/* キャッチコピー（2026-10-17 顧客送付「人生は束の間、さあ飲んで踊ってケセラセラ！
   そんな強がる女が主人公！」）。曲名・発売日の下に、朱赤の縦線を添えて引用のように置く。
   ジャケットの赤と呼応する色（--accent）。2行目は本文色で一段小さく */
.hr-quote { display: block; margin-top: 1.1em; padding-left: 16px; border-left: 3px solid var(--telop-title); }   /* 色は顧客指定：キャッチコピーはテロップの曲名の色（?tc= の選択に追従） */
.hr-catch { text-wrap: balance; display: block; font-size: 25px; font-weight: 700; line-height: 1.5; color: var(--telop-title); letter-spacing: .03em; }
.hr-sub   { display: block; margin-top: .35em; font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--telop-title); }
.hr-credit { margin-top: .7em; font-size: 14px; line-height: 1.75; color: var(--ink-soft); }
.hr-go {
  margin-top: 1.2em; display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px;
  font-size: 14px; font-weight: 500; letter-spacing: .08em;
  color: var(--lime-dark); background: #fff; border: 1px solid var(--lime-line); border-radius: 999px;
  transition: background .2s, color .2s, border-color .2s;
}
.hr-link:hover .hr-go, .hr-link:focus-visible .hr-go { background: var(--hover-bg); border-color: var(--hover-bg); color: var(--ink); }

.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 10px; z-index: 3;
}
/* 点は「白い縁＋オリーブの中身」。白だけだと新曲スライドの薄い地の上で見えなくなる */
.hero-dots button {
  width: 11px; height: 11px; padding: 0; border-radius: 50%;
  border: 1px solid #fff; background: rgba(70,96,15,.3);
  cursor: pointer; transition: background .2s, transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.hero-dots button[aria-selected="true"] { background: var(--lime); transform: scale(1.3); }
/* 新曲スライドの文字は枠の幅で縮むので、狭い画面では説明文から順に外す */
/* 新曲スライドの左の文言が、狭い窓（タブレット・小さいノートPC）で枠からはみ出さないよう、
   窓の幅に応じて文字と余白を詰める。2026-10-19 に幅を細かく刻んで実測（701〜1280px）して決めた。
   ★ここを触ったら、701・800・900・1000・1100・1280pxで「文言の最下部が枠の下端を超えない／
     最上部が枠の上端を超えない／キャッチの2行目が折り返さない」を測り直すこと */
@media (max-width: 1200px) {
  .hr-catch { font-size: 23px; letter-spacing: .02em; }
  .hr-body { padding-right: 24px; }
}
@media (max-width: 1000px) {
  .hr-link { grid-template-columns: minmax(0, 1fr) 42%; }
  .hr-jacket { width: 100%; aspect-ratio: auto; }   /* 枠が低いので、ジャケットは幅42%で左右を少し切る（スマホと同じ考え方） */
  .hr-body { padding: 20px 18px 24px 30px; }
  .hr-en { font-size: 26px; }
  .hr-title { font-size: 27px; }
  .hr-date { font-size: 16px; }
  .hr-quote { margin-top: .8em; }
  .hr-catch { font-size: 19px; }
  .hr-sub { font-size: 15px; margin-top: .25em; }
  .hr-credit { font-size: 13px; margin-top: .5em; }
  .hr-go { margin-top: .9em; min-height: 36px; }
}
@media (max-width: 860px) {
  .hr-credit { display: none; }
}
/* スマホ：ジャケットと文字は横並びのまま。ジャケットの大きさは画面の幅で決める
   （高さで決めると、枠が縦長のぶんジャケットが画面の7割を占めてしまう） */
@media (max-width: 700px) {
  /* ★2026-10-20 顧客「携帯でもジャケ写を完璧に見せたい」→ 本人（アプス）の判断で
     「PCで見えている状態がそのまま見えるように」。ジャケットは削らず、枠の高さいっぱいの正方形を
     右の縁に置く（PCと同じ配置）。左の文言はその残りの幅に収める。
     枠の縦横比を 2:1 にして（16:9 より少し横長）、文言の列に幅を確保した。
     写真のスライドも同じ枠なので、上下が約11%切れる。
     ★文言は幅に応じて小さくなる（390pxで曲名約14px・キャッチ約12px）。
       「文字が読みにくくなる」ため以前は削っていた形なので、顧客に「修正後要確認」とされている。 */
  .hero-stage { aspect-ratio: 2 / 1; }
  .hr-link { grid-template-columns: minmax(0, 1fr) auto; }
  .hr-jacket { width: auto; height: 100%; aspect-ratio: 1 / 1; }
  .hr-body { padding: 8px 6px 14px 14px; }
  .hr-credit, .hr-go { display: none; }
  .hr-en { font-size: 17px; }
  .hr-title { font-size: clamp(12px, calc((50vw - 36px) / 11.4), 15px); margin: .05em 0; }
  .hr-date { font-size: 11.5px; letter-spacing: 0; }
  .hr-wd { display: none; }   /* 曜日を外して「2026年11月18日発売」を1行に収める */
  .hr-quote { margin-top: .5em; padding-left: 6px; border-left-width: 2px; }
  .hr-catch br { display: none; }   /* 幅が足りないので強制改行をやめ、均等に折り返す（text-wrap: balance） */
  .hr-catch { font-size: 12px; line-height: 1.4; letter-spacing: 0; }
  .hr-sub { font-size: 11px; margin-top: .2em; line-height: 1.4; letter-spacing: 0; }
  .hr-nojacket small { font-size: 11px; letter-spacing: 0; }
  .hero-dots { bottom: 6px; gap: 8px; }
  .hero-dots button { width: 9px; height: 9px; }
}
/* 幅380px以下の小さいスマホ：16:9だと枠が低すぎて新曲スライドの文字が枠からはみ出す
   （320pxで実測）。枠の高さだけ固定で確保する。写真は左右が少し切れる */
@media (max-width: 380px) {
  .hr-body { padding: 6px 4px 12px 10px; }
  .hr-catch { font-size: 11px; }
  .hr-sub { font-size: 10.5px; }
  .hr-nojacket { font-size: 30px; }
  .hr-nojacket small { font-size: 9px; letter-spacing: 0; }
}
@media (max-width: 340px) {
  .hr-en, .hr-sub { display: none; }   /* 320pxの端末は文言の列が約130pxしか取れないため、飾りの英字と補足の一文を外す */
}

/* =========================================================
   流れるテロップ
   2026-10-02 顧客指示で、地を「本当に薄いオリーブ」に、文字を少し大きく太く。
   「速報！」はもう少し大きく、色をオリーブに合う強調色（朱赤）に。
   曲名は別の色（葡萄色）・太字にして、押すと商品ページへ飛ぶ。
   帯の高さは、以前の顧客指示「色を入れるならもう少しだけ狭く」に従い 56px → 48px。
   ★地の幅は .wrap と同じ。画面いっぱいに伸ばすと本文の左右端と揃わない
     （顧客指示 2026-09-10「線＝テロップの幅として見える」）
   ========================================================= */
.telop { background: #fff; padding-top: 14px; }
.telop-inner {
  display: flex; align-items: stretch;
  width: min(100% - 40px, var(--wrap));   /* ＝ .wrap と同じ */
  margin-inline: auto;
  background: var(--olive-wash);
}
.telop-track {
  flex: 1 1 auto; min-width: 0;   /* これが無いと中身の長さで横スクロールが発生する */
  position: relative; overflow: hidden;
  display: flex; align-items: center; min-height: 48px;
}
.telop-run {
  display: flex; flex: 0 0 auto; white-space: nowrap;
  animation: telop-scroll 24s linear infinite;   /* JSが文の長さに応じて上書きする */
}
.telop-run > span {
  /* 2026-10-07「もう少し小さく」で 18.5px → 17.5px（以前の小さいサイズと今回の間） */
  padding-right: 4em; font-size: 17.5px; font-weight: 700; color: var(--ink);
}
/* 「速報！」。面には使わず文字色だけ。本文より一回り大きい */
.telop-run em { font-style: normal; font-weight: 700; font-size: 20px; color: var(--telop-hot); }
/* 曲名。押すと商品ページへ。下線は乗せたときだけ */
.telop-title { color: var(--telop-title); font-weight: 700; text-decoration: none; }
.telop-title:hover, .telop-title:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.telop-track:hover .telop-run { animation-play-state: paused; }
@keyframes telop-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* 動きを抑える設定の環境では流さず、折り返して全文を見せる。
   全文セクションを廃止しているので、ここを消すと内容が読めなくなる */
@media (prefers-reduced-motion: reduce) {
  .telop-run { animation: none; flex-wrap: wrap; white-space: normal; }
  .telop-run > span[aria-hidden="true"] { display: none; }
  .telop-run > span { padding-right: 0; }
  .telop-track { min-height: 0; padding: 12px 16px; }
  .hero-slide { transition: none; }
}
@media (max-width: 700px) {
  .telop { padding-top: 10px; }
  .telop-inner { width: min(100% - 24px, var(--wrap)); }
  .telop-run > span { font-size: 17px; }
  .telop-run em { font-size: 19px; }
}

/* =========================================================
   新曲告知（ヒーローから移した告知バナー）
   ★2026-10-02 からC案のトップでは使っていない（新曲はスライドショーの中へ）。
     顧客の「取り合えずやめます」なので、戻すときのために残してある
   バナーは横長の絵に文字が入っているので、切らずに 16:9 のまま出す。
   高さを固定して cover で切ると「北原ミレイ」の縦書きと55周年のバッジが欠ける。
   ========================================================= */
.release { padding: 30px 0 0; }
.release-card {
  display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  align-items: center;
  text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #fff; transition: border-color .3s, box-shadow .3s;
  max-width: 900px; margin-inline: auto;   /* 顧客指示によりセンター寄せ */
}
.release-card:hover { border-color: var(--lime); box-shadow: 0 6px 20px rgba(60,70,60,.08); }
.release-visual { overflow: hidden; line-height: 0; }
.release-visual img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.release-card:hover .release-visual img { transform: scale(1.03); }
.release-body { padding: 20px 30px; display: flex; flex-direction: column; }
.release-en {
  font-size: 13px; font-weight: 500; letter-spacing: .26em;
  color: var(--lime); text-transform: uppercase;
}
.release-title { font-size: 26px; font-weight: 700; letter-spacing: .1em; margin-top: 4px; }
.release-sub { font-size: 15px; color: var(--ink-soft); margin-top: 6px; line-height: 1.75; }
.release-go {
  margin-top: 12px; font-size: 15px; color: var(--lime-dark);
  display: inline-flex; align-items: center; gap: 10px;
}
.release-go::after { content: ""; width: 24px; height: 1px; background: var(--lime); transition: width .3s; }
.release-card:hover .release-go::after { width: 40px; }
@media (max-width: 860px) {
  .release-card { grid-template-columns: 1fr; }
  .release-body { padding: 18px 20px 22px; }
  .release-title { font-size: 23px; }
}

/* =========================================================
   セクション共通
   下地はどの階層も白。A案の .alt / .alt2 の塗り分けは廃止し、
   区切りは罫線と余白で作る。
   ========================================================= */
.section { padding: 52px 0; }
.section.alt, .section.alt2 { background: #fff; }

.section-head { text-align: left; margin-bottom: 22px; }
.section-head .en {
  display: block; font-size: 13px; font-weight: 500;
  letter-spacing: .28em; color: var(--lime); text-transform: uppercase;
}
/* 見出しのウェイトは 500。顧客指示で 700 から落とした（2026-09-10）。
   ★M PLUS 1p に 600 は無い（100/300/400/500/700/800/900。読み込んでいるのは 400/500/700）ので、700 の下は 500。
     600 と書くとブラウザが 500 に丸めるだけで、指定した意味が伝わらない。
     400 まで落とすと本文と区別がつかなくなる（実測：インク量 6.0% ≒ 本文） */
/* 2026-10-02 顧客指示「もう少しだけ小さく」で 26px → 22px（PC）。
   2026-10-07「もう少し小さく」でさらに19pxへ。
   ★ vw での可変指定（clamp）をやめ、固定pxにした。
   「ウィンドウ幅を変えると見出しの大きさまで連動して変わる」という
   顧客の違和感への対応。幅で変わるのはスマホ用の1段階だけにする（下記）。 */
.section-head h2 {
  font-size: 19px; font-weight: 500;
  letter-spacing: .08em; margin-top: 2px; color: var(--ink-head);
}
@media (max-width: 480px) {
  .section-head h2 { font-size: 18px; }
}
/* 見出しの下線。顧客指示（2026-10-02）「少し長く、右に向かうに従い細くなるように。
   太くはしたくない」。
   左端の太さは以前と同じ 2px のまま、右端で 0 になる細長い三角形に切り抜いている。
   色も右へ行くほど淡くして、線の終わりを溶かしている。
   ★高さは px の整数で持つこと。小数にすると拡大率125%で線がにじむ */
.section-head h2::after {
  content: ""; display: block; width: 150px; max-width: 100%; height: 2px;
  margin: 12px 0 0;
  background: linear-gradient(to right, var(--lime), var(--lime-line) 70%, rgba(169,194,74,.35));
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.section-note { font-size: 14px; color: var(--ink-soft); margin: -8px 0 18px; }

/* ボタン ── 顧客指示で「小さく」「地に色を入れる」。差し色はライムに統一 */
/* ボタンは全部「淡いライムの地＋濃いライムの文字」に統一（顧客指示 2026-09-10）。
   ディスコグラフィーの「購入する」（.disc-buy）と同じ色づかい。
   もとは主ボタンがライムの塗りつぶし＋白抜き文字だった。
   ★文字のコントラストはむしろ上がっている（白×ライム 4.74 → 濃ライム×淡 6.02）。
     弱くなったのは「地の色」で、淡いライムと白地の差は 1.10 しかない。
     押せることが枠線だけで伝わる状態なので、枠を薄くしないこと。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px;
  font-size: 15px; font-weight: 500; letter-spacing: .08em;
  color: var(--lime-dark); background: var(--lime-pale); border: 1px solid var(--lime-line);
  border-radius: 999px; text-decoration: none;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
/* 乗せると明るいオリーブの塗り＋濃いグレー文字（2026-10-08 顧客指示「マウスを乗せた時は
   現在の濃いオリーブより真ん中の明るめのオリーブに」）。
   ★白抜きのままだと明るい地でコントラスト比4.5を割る（実測2.99）ため、
   文字を白から本文と同じ濃いグレーに変えて地を明るくした（実測4.92）。
   地の色は見出し下線と同じ --lime-line（#a9c24a） */
.btn:hover, .btn:focus-visible {
  color: var(--ink); background: var(--hover-bg); border-color: var(--hover-bg); box-shadow: none;
}
/* .ghost はもと「副ボタン」。主と同じ見た目になったので受け皿だけ残してある。
   HTMLは生成物なので class="btn ghost" の記述はそのままにしている */
.btn.ghost { color: var(--lime-dark); background: var(--lime-pale); border-color: var(--lime-line); }
.btn.ghost:hover, .btn.ghost:focus-visible { color: var(--ink); background: var(--hover-bg); border-color: var(--hover-bg); box-shadow: none; }
.btn.sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn-center { text-align: center; margin-top: 32px; }
.btn-left {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 20px;
}
/* ページの一番下に置く「閉じる／トップページへ戻る」。
   本文の左端に付けると一覧の左下に埋もれるので、ここだけ中央に置く */
.btn-left.is-center { justify-content: center; margin-top: 34px; }

/* =========================================================
   ご挨拶
   顧客指示：センター寄せをやめて左寄せ、文字と行間を詰めてコンパクトに。
   本人の言葉なので書体だけ変えている。2026-10-02 に丸ゴシックから
   Klee One（ペン字風）へ（顧客回答「ご挨拶はＡ案」）。
   大きさ・行間は顧客が「バッチリ」としたものなので変えていない。
   ========================================================= */
.greeting { max-width: none; text-align: left; }
.greeting .lead {
  font-family: var(--pen);
  font-size: 16px; line-height: 2.0; letter-spacing: .02em;
}
/* ご挨拶の1行目。本文より大きく、色は本文より薄い。
   ★Klee One は 400 と 600 しか無い。500 と書くと 400 に丸められて本文と同じ太さになる */
.greeting .lead-1 {
  display: block; margin-bottom: 10px;
  font-size: 19px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-lead);
}
/* 1行目は「昭和４５年にデビューし、」「歌いつづけて５５年！」の2つの塊で折り返す。
   スマホで「歌いつづけ／て５５年！」と語の途中で割れていた（2026-10-02 に発見） */
.greeting .nw { display: inline-block; }
/* 署名は右寄せ。本文は左寄せのままなので、ここだけ text-align を効かせる。
   右端にぴたりと付くと窮屈なので 50px 空けている（顧客指示 2026-09-10）。
   ★署名PNGの右側に透明な余白が15pxほど入っているので、見た目は約65px空く */
.greeting .sign { display: block; margin-top: 16px; text-align: right; padding-right: 50px; }
.greeting .sign img { height: 40px; width: auto; max-width: 100%; }
@media (max-width: 900px) {
  .greeting .lead { font-size: 15.5px; line-height: 1.95; }
  .greeting .lead .br-pc { display: none; }   /* PC用の固定改行を解除 */
  .greeting .sign img { height: 35px; }
}

/* =========================================================
   トップページの2カラム
   左＝スケジュールとミュージックビデオ、右＝商品購入とリンク。
   顧客指示「空いた右側スペースに商品購入・ＭＶ・各ＳＮＳ・宣材データを配置し
   あまりスクロールしなくてもある程度把握できるように」。
   左右の高さは揃わないが、それぞれ上端から始まるので不自然には見えない。
   ========================================================= */
.top-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side);
  gap: 0 48px; align-items: start;
  padding: 46px 0 64px;
}
/* ご挨拶と新着スケジュールの間。顧客指示で 42px から 20px 足した（2026-09-10）。
   署名を右寄せにしたぶん、次の見出しが近く見えていたため */
.top-cols .block + .block { margin-top: 62px; }
.top-side { min-width: 0; }
.top-main { min-width: 0; }
@media (max-width: 1000px) {
  /* 右カラムを下に回す。この幅では2列にすると両方とも狭くなって読みづらい */
  .top-cols { grid-template-columns: 1fr; gap: 0; }
  .top-side { margin-top: 42px; }
  /* 1カラムに戻ると左右の高さを揃える必要がないので、スケジュールは6件だけ出す。
     10件のままだとスマホでスクロールが増え、「あまりスクロールしなくても
     把握できるように」という狙いと逆になる。件数は build.py の TOP_SCHED_N。 */
  .top-main .sched-list > li:nth-child(n+7) { display: none; }
}

/* =========================================================
   スケジュール
   顧客指示で文字・行間・横幅を詰めた。
   2026-10-07「新着情報の各枠ももう少しコンパクトに」で、枠の余白をさらに詰めた。
   一覧ページ（schedule.html）でも同じ見た目になる。
   ========================================================= */
.sched-list { display: grid; gap: 8px; max-width: 920px; }
.sched-item {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 1px 18px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 14px;   /* 2026-10-19 顧客「各日程の枠の縦幅をほんの少しだけ大きく」。10→13px（1枠 約6px 高く）。横幅は「バッチリ」なので変えない */
  transition: border-color .2s, box-shadow .2s;
}
.sched-item:hover { border-color: var(--lime-line); box-shadow: 0 3px 12px rgba(60,70,60,.06); }
.sched-date {
  font-size: 17px; font-weight: 700; color: var(--ink);
  letter-spacing: .02em; line-height: 1.45;
}
.sched-date .y {
  display: block; font-size: 12px; font-weight: 400;
  color: var(--lime); letter-spacing: .18em;
}
.sched-body .title { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.sched-body .place { font-size: 14px; color: var(--ink); line-height: 1.55; }
.sched-body .time  { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.sched-body .contact { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.sched-more, .press-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 16px; white-space: nowrap;
  font-family: inherit; font-size: 13px; letter-spacing: .06em;
  color: var(--lime-dark); background: var(--lime-pale); border: 1px solid var(--lime-line);
  border-radius: 999px; text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.sched-more:hover, .sched-more:focus-visible,
.press-card:hover .press-btn, .press-card:focus-visible .press-btn { color: var(--ink); background: var(--hover-bg); border-color: var(--hover-bg); }
@media (max-width: 860px) {
  .sched-item { grid-template-columns: 1fr; padding: 11px 14px; gap: 3px; }
  .sched-date { font-size: 16px; }
  .sched-date .y { display: inline; font-size: 12px; margin-right: 8px; }
  .sched-more { margin-top: 8px; justify-self: start; }
}

/* 年度タブ */
.year-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.year-tabs a, .year-tabs button {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  font-family: inherit; font-size: 15px; letter-spacing: .04em;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; cursor: pointer; transition: all .2s;
}
.year-tabs a:hover, .year-tabs button:hover { border-color: var(--lime); color: var(--lime-dark); }
/* 選択中の年。塗りつぶしをやめたので、枠を濃いライムにして
   「いまどれを見ているか」が分かるようにしている。★枠を薄くしないこと */
.year-tabs [aria-selected="true"] {
  background: var(--lime-pale); border-color: var(--lime); color: var(--lime-dark); font-weight: 700;
}

/* =========================================================
   ディスコグラフィー
   ========================================================= */
.disc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 28px 22px;
}
.disc-item { text-align: center; min-width: 0; }
.disc-jacket {
  position: relative; aspect-ratio: 1 / 1; margin-bottom: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.disc-jacket img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
a.disc-jacket:hover img { transform: scale(1.04); }
.disc-jacket .noimg { font-size: 14px; color: #b3b8bb; letter-spacing: .1em; }
.disc-date { display: block; font-size: 13px; letter-spacing: .1em; color: var(--lime); }
.disc-title { font-size: 17px; font-weight: 700; line-height: 1.55; margin: 3px 0 5px; color: var(--ink); }
.disc-credit { font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.disc-buy {
  display: inline-block; margin-top: 9px; padding: 5px 14px;
  font-size: 13px; color: var(--lime-dark); text-decoration: none;
  background: var(--lime-pale);
  border: 1px solid var(--lime-line); border-radius: 999px;
  transition: background .2s, border-color .2s;
}
.disc-buy:hover, .disc-buy:focus-visible { color: var(--ink); background: var(--hover-bg); border-color: var(--hover-bg); }
@media (max-width: 600px) {
  /* ★2026-10-20 スマホのアルバム一覧で、右の列が画面の外へはみ出して崩れていた（顧客の指摘）。
     原因：1fr は「中身の最小幅」を下限にするため、折り返せない長い作品名
     （例「北原ミレイプレミアムベスト～焼肴～」）の列だけが広がり、もう片方が押し出される。
     minmax(0, 1fr) にして列を必ず同じ幅にし、長い題名は折り返す */
  .disc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .disc-title { font-size: 16px; overflow-wrap: anywhere; }
}

/* =========================================================
   商品購入
   トップでは右カラムに入れるので2列。
   2026-10-02 顧客指示「各ジャケ写のサイズをもう少し小さく」で、ジャケットだけ
   セルの幅の80%（約172px → 約138px）にした。
   2026-10-07「ジャケ写・タイトルも少しだけコンパクトに、発売日もタイトルに寄せ、
   ブロック自体を締まった感じに」で、ジャケットを70%・行間の余白を詰めた。 */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; }
.top-side .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.top-side .product-thumb { width: 70%; margin-inline: auto; }
.product-item { text-align: center; min-width: 0; }
.product-item a { display: block; text-decoration: none; color: inherit; }
.product-thumb {
  aspect-ratio: 1 / 1; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.product-item a:hover .product-thumb {
  border-color: var(--lime-line); box-shadow: 0 6px 16px rgba(60,70,60,.1); transform: translateY(-2px);
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; }
/* 発売前でジャケットが無いもの（新曲）。ディスコグラフィーの .noimg と同じ扱い */
.noimg.is-soon { font-size: 14px; line-height: 1.6; color: var(--ink-soft); letter-spacing: .08em; text-align: center; }
.product-thumb:has(.is-soon), .disc-jacket:has(.is-soon) { background: var(--olive-wash); }
.product-name {
  display: block; margin-top: 6px;
  font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--ink);
  /* 作品名が1行のものと2行のものが混ざるので、2行分の高さを確保して
     発売日の位置を横一列に揃える */
  min-height: 2.9em;
}
.product-sub { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 1000px) {
  /* 1カラムに戻るので、右カラム用の2列指定を4列（狭い画面では2列）に戻す */
  .top-side .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; }
  .top-side .product-thumb { width: 90%; }
  .product-name { font-size: 14.5px; }
}
@media (max-width: 700px) {
  .product-grid, .top-side .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .product-name { min-height: 0; }
}

/* =========================================================
   ミュージックビデオ
   トップでは左カラムに3本を横並び。一覧ページは従来どおり自動で折り返す。
   ========================================================= */
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px 22px; }
.top-side .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.top-side .mv-caption { padding: 8px 9px 10px; }
.top-side .mv-caption h3 { font-size: 13px; }
.top-side .mv-caption p { font-size: 11.5px; }
.top-side .mv-icon { width: 42px; height: 42px; }
.top-side .mv-icon::after { border-width: 8px 0 8px 13px; }
.mv-item { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mv-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.mv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mv-caption { padding: 11px 13px 14px; }
.mv-caption h3 { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.mv-caption p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
/* 一覧ページは情報量が多いので少し大きめのまま */
.section .mv-caption h3 { font-size: 16px; }
.section .mv-caption p { font-size: 14px; }
@media (max-width: 1000px) {
  /* 1カラムに戻るので、MVも一覧と同じ大きさに戻す */
  .top-side .mv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 18px; }
  .top-side .mv-caption { padding: 11px 13px 14px; }
  .top-side .mv-caption h3 { font-size: 15px; }
  .top-side .mv-caption p { font-size: 13px; }
  .top-side .mv-icon { width: 56px; height: 56px; }
  .top-side .mv-icon::after { border-width: 10px 0 10px 17px; }
}
/* スマホでもトップは2列のまま。1列だと4本で約1,200pxになり、スクロールがかさむ
   （2026-10-02 のスマホ確認で変更）。一覧ページ（music-video.html）は1列のまま */
@media (max-width: 700px) {
  .top-side .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .top-side .mv-caption { padding: 8px 9px 10px; }
  .top-side .mv-caption h3 { font-size: 14px; }
  .top-side .mv-caption p { font-size: 12px; }
  .top-side .mv-icon { width: 42px; height: 42px; }
  .top-side .mv-icon::after { border-width: 8px 0 8px 13px; }
}

/* ---------- ミュージックビデオ 再生ボタン ---------- */
.mv-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: #000; cursor: pointer;
  display: block; overflow: hidden;
}
.mv-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s, opacity .35s; }
.mv-play:hover img { transform: scale(1.04); opacity: .85; }
.mv-icon {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: background .25s, transform .25s;
}
.mv-icon::after {
  content: ""; position: absolute; left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--lime);
}
.mv-play:hover .mv-icon { background: #fff; transform: translate(-50%, -50%) scale(1.08); }
.mv-play:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.section .mv-icon { width: 70px; height: 70px; }
.section .mv-icon::after { border-width: 12px 0 12px 21px; }

/* =========================================================
   ブログ・SNS・宣材データ
   トップの右カラムでは横長の小さな行にして、縦の場所を取らないようにしている。
   ========================================================= */
.link-list { display: grid; gap: 10px; }
.link-row {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px;
  align-items: center; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: inherit; background: #fff;
  transition: border-color .25s, box-shadow .25s;
}
.link-row:hover { border-color: var(--lime-line); box-shadow: 0 4px 14px rgba(60,70,60,.08); }
.link-row img { width: 88px; height: 60px; object-fit: cover; border-radius: 6px; display: block; }
.link-row .link-body { min-width: 0; }   /* 長い文でグリッドの列が広がるのを防ぐ */
.link-row .cap { display: block; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.link-row .sub { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-top: 2px; }

/* ---- ブログ・X のバナー ----
   2026-10-02「旧PC位に大きく」で右カラム幅いっぱいの1列にしたところ、
   2026-10-07「今回は大き過ぎるので半分位に」と指示があったため、
   トップでは常に2列（＝約半分の幅）にした。画面幅が変わっても列数を変えない
   （1列に戻すとまた大きくなってしまうため）。
   一覧ページなど他の場所で使うときのために .banner-list 自体は1列のまま、
   .top-side の中だけ2列にしている。 */
.banner-list { display: grid; gap: 14px; }
.banner-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff;
  transition: border-color .25s, box-shadow .25s;
}
.banner-card:hover { border-color: var(--lime-line); box-shadow: 0 4px 14px rgba(60,70,60,.08); }
.banner-card img { display: block; width: 100%; height: auto; }
.banner-card .cap { display: block; padding: 10px 14px 0; font-size: 15.5px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.banner-card .sub { display: block; padding: 2px 14px 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.top-side .banner-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.top-side .banner-card .cap { padding: 7px 9px 0; font-size: 13px; }
.top-side .banner-card .sub { padding: 2px 9px 9px; font-size: 11.5px; }

/* ---- 宣材データ（2026-10-02 顧客指示「単独でブロックを作って、文言も少し大きく」） ---- */
.press-card {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 16px; align-items: center;
  padding: 16px 18px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color .25s, box-shadow .25s;
}
.press-card:hover { border-color: var(--lime-line); box-shadow: 0 4px 14px rgba(60,70,60,.08); }
.press-card img { grid-row: span 2; width: 72px; height: auto; display: block; }
.press-lead { font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--ink); text-align: center; }   /* 2026-10-21 顧客「文言とボタンをセンター合わせ」 */
/* 2026-10-20 顧客「宣材データにもボタンを」。スケジュールの「詳しくはこちら」（.sched-more）と同じ形。
   カード全体が <a> なので、ボタンは <span>。カードにマウスを乗せると色が変わる */
/* 形（カードの中・丸い・色）はスケジュールの「詳しくはこちら」に合わせ、
   文字の大きさ・太さ・字間・高さは右カラムのボタン（.btn.sm）に合わせた（2026-10-20 本人の指示）。
   右カラムのボタンはカードの外にあるが、宣材データはカードの中に置くため */
.press-btn { justify-self: center; min-height: 40px; padding: 0 18px; font-size: 14px; font-weight: 500; letter-spacing: .08em; }

/* A案から引き継いだ大きいカード（下層ページで使う場合のため残す） */
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.link-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 24px 20px 22px; text-decoration: none; color: inherit;
  transition: border-color .25s, box-shadow .25s;
}
.link-card:hover { border-color: var(--lime-line); box-shadow: 0 8px 22px rgba(60,70,60,.1); }
.link-card img { border-radius: 6px; margin-bottom: 14px; }
.link-card .cap { font-size: 17px; font-weight: 700; color: var(--ink); }
.link-card .sub { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
.link-card .go { margin-top: 12px; font-size: 14px; color: var(--lime-dark); }

/* =========================================================
   プロフィール
   ========================================================= */
.profile-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.profile-table th, .profile-table td {
  padding: 15px 10px; border-bottom: 1px solid var(--line);
  font-size: 16px; text-align: left; vertical-align: top;
}
/* 顧客方針「強調は色ではなく太字またはサイズで」に合わせ、
   項目名はライムではなくダークグレーの太字にしている */
.profile-table th {
  width: 9em; font-weight: 700; color: var(--ink);
  letter-spacing: .14em; white-space: nowrap;
}
@media (max-width: 560px) {
  .profile-table th, .profile-table td { display: block; border: 0; padding: 4px 0; }
  .profile-table th { letter-spacing: .1em; padding-top: 14px; }
  .profile-table td { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
}

/* 年表 */
.bio { position: relative; }
.bio > li { position: relative; padding: 0 0 26px 30px; border-left: 1px solid var(--line); }
.bio > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.bio > li::before {
  content: ""; position: absolute; left: -6px; top: 12px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2px solid var(--lime);
}
.bio .era { display: block; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .06em; margin-bottom: 3px; }
.bio p { font-size: 16px; }

/* =========================================================
   お問合せフォーム
   ========================================================= */
.form-block { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px 32px; }
.form-row { margin-bottom: 22px; }
.form-row label { display: block; font-size: 16px; font-weight: 700; letter-spacing: .06em; margin-bottom: 7px; }
.req {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  font-size: 12.5px; font-weight: 500; color: #fff;
  background: var(--lime); border-radius: 4px; letter-spacing: .06em; vertical-align: 2px;
}
.opt {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  background: #f1f3f4; border-radius: 4px; letter-spacing: .06em; vertical-align: 2px;
}
.form-row input, .form-row textarea {
  width: 100%; padding: 13px 15px;
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid #ccd2d5; border-radius: 8px;
  transition: border-color .2s, box-shadow .2s;
}
.form-row input:focus, .form-row textarea:focus {
  outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(95,125,22,.15);
}
.form-row textarea { min-height: 180px; line-height: 1.85; resize: vertical; }
.form-submit { text-align: center; margin-top: 30px; }
.form-submit button { min-width: 240px; cursor: pointer; font-family: var(--sans); }
.form-error {
  background: #fdf1ee; border: 1px solid #e0b4aa; border-radius: 10px;
  padding: 15px 18px; margin-bottom: 22px; font-size: 15px; color: #9d3520;
}
.privacy { font-size: 14px; color: var(--ink-soft); margin-top: 30px; }
@media (max-width: 560px) { .form-block { padding: 22px 18px; } }

/* =========================================================
   会社案内テーブル
   ========================================================= */
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td {
  padding: 16px 12px; border-bottom: 1px solid var(--line);
  font-size: 16px; text-align: left; vertical-align: top;
}
.info-table th { width: 11em; font-weight: 700; color: var(--ink); letter-spacing: .1em; white-space: nowrap; }
@media (max-width: 560px) {
  .info-table th, .info-table td { display: block; border: 0; padding: 4px 0; }
  .info-table th { padding-top: 14px; }
  .info-table td { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
}

/* =========================================================
   下層ページ見出し ── 地は白。左寄せ
   ========================================================= */
.page-head {
  background: #fff; padding: 40px 0 30px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.page-head .wrap { width: min(100% - 40px, var(--wrap)); }
.page-head .en { display: block; font-size: 13px; font-weight: 500; letter-spacing: .3em; color: var(--lime); }
/* 下層ページの見出し。トップの見出しと同じ役割なのでウェイトも揃える。
   ★vw の可変指定をやめ固定pxにした（ウィンドウ幅で連動して変わらないように） */
.page-head h1 {
  font-size: 28px; font-weight: 500;
  letter-spacing: .1em; margin-top: 5px; color: var(--ink-head);
}
@media (max-width: 480px) {
  .page-head h1 { font-size: 23px; }
}

/* パンくず */
.breadcrumb { padding: 14px 0; font-size: 14px; color: var(--ink-soft); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li::after { content: "›"; margin-left: 8px; color: #b9bfc2; }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--lime-dark); text-decoration: underline; }

/* =========================================================
   フッター
   ========================================================= */
/* 2026-10-02 顧客指示で、濃いグリーンの地 → 「薄い軽いオリーブ色」の地に本文色の文字。
   （2026-09-10 から濃いグリーン地に白文字だった）
   ★ロゴ img/logo-footer-c.png は色を画像に焼き込んである。地を薄くしたので
     本文色で焼き直した（mkimg_c.py の FOOTER_INK）。CSSでは変えられない。
     地の色を濃く戻すときは、必ずロゴも白で焼き直すこと。忘れると濃い地に濃い色で消える。
   ★補助の文字にも --ink-soft は使わない。この地の上では 3.9 で、14px が基準を割る */
/* 2026-10-17 顧客「フッターの幅を上の諸々の幅内に収めて」。
   地色を画面いっぱいの .site-footer から、中の .wrap（ヘッダー・写真枠と同じ幅）に移した。
   中身は地の内側に40px（スマホは20px）入る */
.site-footer { color: var(--ink); }
.site-footer > .wrap { background: var(--olive-mist); padding: 44px 40px 24px; }
@media (max-width: 560px) { .site-footer > .wrap { padding: 36px 20px 22px; } }
.footer-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: start; }
.footer-about { text-align: left; }
/* ロゴの色は画像に焼き込んである（img/logo-footer-c.png / mkimg_c.py）。
   本文色を変えたらこの画像も作り直すこと */
.footer-logo { height: 42px; width: auto; max-width: 100%; }
.footer-name { font-size: 16px; font-weight: 700; letter-spacing: .08em; margin-top: 12px; color: var(--ink); }
.footer-info { margin-top: 10px; font-size: 14.5px; line-height: 2.0; color: var(--ink); }
.footer-info a { color: var(--ink); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 2px 10px; justify-content: start; }
.footer-nav a {
  position: relative; display: block;
  padding: 7px 13px; line-height: 28px;   /* ← px で固定する。下の注意を参照 */
  font-size: 14.5px; color: var(--ink); text-decoration: none; white-space: nowrap;
}
/* ホバーの下線は ::after を絶対配置して scaleX で伸ばす。
   width を伸ばすとリンクの箱ごと広がり、グリッドの列幅が動いて周りがずれる。
   ★行の高さは必ず px で固定すること。比率（1.9 など）だと 1行 45.25px のように
     小数になり、画面の拡大率125%のとき端数のたまった行だけ1pxの線が
     2ドットに割れて「その行だけ線が太い」ように見える（B案で実際に指摘された）。
     7 + 28 + 7 + 2 = 44px ちょうどなら、1.25倍で55、1.5倍で66、2倍で88と
     どの拡大率でも整数に収まる。 */
.footer-nav a::after {
  content: ""; position: absolute; left: 13px; bottom: 8px;
  width: 14px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left center; transition: transform .25s;
}
.footer-nav a:hover { color: var(--ink); }
.footer-nav a:hover::after { transform: scaleX(1); }
@media (max-width: 820px) {
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
  .footer-about { text-align: center; }
  .footer-nav { justify-content: center; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-nav a { text-align: center; white-space: normal; }
  .footer-nav a::after { display: none; }
}
/* スマホでもひとまわり小さくするが、住所・電話・メールを読み取る必要があるので
   14px を下限にする（コピーライトだけ例外） */
@media (max-width: 560px) {
  .footer-logo { height: 38px; }
  .footer-name { font-size: 15px; }
  .footer-info { font-size: 14px; line-height: 1.95; }
  .footer-nav a { font-size: 14px; padding: 7px 8px; }
  .copyright { font-size: 12.5px; }
}
.copyright {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(70,96,15,.18);
  text-align: center; font-size: 13px; color: var(--ink); letter-spacing: .06em;
}

/* ページトップ */
.pagetop {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--lime);
  color: var(--lime-dark); text-decoration: none; font-size: 19px;
  box-shadow: 0 4px 12px rgba(60,70,60,.18);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.pagetop.is-visible { opacity: 1; visibility: visible; }
.pagetop:hover { background: var(--lime-pale); border-color: var(--lime); }

/* =========================================================
   ライトボックス（チラシ拡大）
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(30,36,40,.88); padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: 4px; background: #fff; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 50px; height: 50px; border-radius: 50%;
  background: #fff; border: 0; color: var(--ink); font-size: 23px; cursor: pointer;
}

/* =========================================================
   宣材データ
   ========================================================= */
.data-note { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px 32px; text-align: left; }
.data-note h2 { font-size: 21px; font-weight: 500; letter-spacing: .06em; margin-bottom: 12px; color: var(--ink-head); }
.data-note p { font-size: 16px; }
.data-note .btn { margin-top: 22px; }
@media (max-width: 560px) { .data-note { padding: 22px 18px; } }

/* =========================================================
   宣材データ（php/press.php の一覧）
   ========================================================= */
.press-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 22px 16px; margin-top: 20px;
}
.press-item a {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.press-item a:hover { border-color: var(--lime); box-shadow: 0 4px 14px rgba(60,70,60,.1); }
.press-thumb {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: #fafafa;
}
/* ★cover ではなく contain。宣材は縦位置と横位置が混ざっていて、
   cover だと横位置の写真が上下だけ残って何の絵か分からなくなる。
   ここは「見て選ぶ」ための一覧なので、切らずに全部見せる。 */
.press-thumb img { width: 100%; height: 100%; object-fit: contain; }
.press-noimg { font-size: 13px; color: #a9afb3; letter-spacing: .08em; }
.press-no {
  display: inline-block; margin-top: 9px; padding: 1px 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: #fff; background: var(--lime); border-radius: 4px;
}
.press-name { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5; word-break: break-all; }
.press-size { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); }

.press-files { display: grid; gap: 8px; margin-top: 6px; }
.press-files a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; font-size: 16px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; transition: border-color .2s;
}
.press-files a:hover { border-color: var(--lime); color: var(--lime-dark); }
.press-files .press-size { margin-top: 0; white-space: nowrap; }
/* ログイン後の連絡先（php/press.php の PRESS_CONTACT） */
.press-contact {
  margin-top: 36px; padding: 18px 22px;
  background: var(--olive-wash); border-radius: 10px; font-size: 15.5px;
}
.press-contact-mail { margin-top: 4px; font-size: 18px; font-weight: 700; }

/* =========================================================
   印刷
   ========================================================= */
@media print {
  .site-header, .telop, .pagetop, .hero { display: none !important; }
  body { font-size: 12pt; }
}