/* 懐かしの昭和歌謡に触れる帳：共通の base.css を使わない、このサイトだけの装い。
   2026-10-25 殿「コンセプトは懐かしむ　御老体がメインターゲット　なので優しいサイトにして」
   ・字は大きく（本文19px・行間1.9）、濃く（薄い灰色の字は使わない）。見やすさのための BIZ UDPゴシック、見出しだけ明朝。
   ・クリーム色の紙にこげ茶の字。飾りは控えめ。押す所は大きく（高さ52px以上）、角はやさしく丸める。
   ・一本道：年を選ぶ → その年の歌とCD。細かい仕掛けは置かない。 */
:root {
  color-scheme: light;
  --paper: #fbf5e8; --card: #fffdf7; --ink: #2b211a; --sub: #4a3c31; --line: #d9c9ad;
  --red: #9b2f2f; --red-deep: #7a2222; --mustard: #c99a2e; --navy: #2f4a6b;
  --sans: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 19px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.9; -webkit-text-size-adjust: 100%; }
a { color: var(--navy); text-underline-offset: 4px; }
a:focus-visible, .btn:focus-visible { outline: 4px solid var(--mustard); outline-offset: 3px; }
img { max-width: 100%; }

.pr-bar { background: #efe3c8; color: var(--ink); font-size: 15px; line-height: 1.7; text-align: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.site-header { max-width: 980px; margin: 0 auto; padding: 18px 16px 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-family: var(--mincho); font-weight: 700; font-size: 24px; line-height: 1.4; }
.brand img { width: 46px; height: 46px; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.nav a { display: inline-block; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 17px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 8px 16px; }
.nav a:hover { border-color: var(--red); color: var(--red); }

main { max-width: 980px; margin: 0 auto; padding: 0 16px 64px; }
h1, h2, .year-head h1 { font-family: var(--mincho); font-weight: 700; }
h2 { font-size: 28px; line-height: 1.5; margin: 52px 0 12px; padding-bottom: 8px; border-bottom: 3px double var(--red); }
h3 { font-size: 22px; margin: 28px 0 10px; }
.lead { font-size: 18px; color: var(--sub); margin: 0 0 18px; }
.kicker { margin: 0; color: var(--red); font-weight: 700; letter-spacing: .15em; font-size: 17px; }

/* はじめのページの挨拶：看板の絵の上に、白い紙を重ねて字を読みやすく */
.welcome { margin: 18px 0 8px; padding: clamp(28px, 6vw, 56px) clamp(18px, 4vw, 44px); border-radius: 20px; border: 2px solid var(--line);
  background: linear-gradient(90deg, rgba(251, 245, 232, 0) 0%, rgba(251, 245, 232, .92) 46%), url("hero.jpg") left center / cover no-repeat; }
.welcome > * { max-width: 30em; margin-left: auto; }
.welcome h1 { font-size: clamp(32px, 6vw, 46px); line-height: 1.4; margin: 6px 0 14px; }
.welcome p:not(.kicker) { font-size: 19px; background: rgba(255, 253, 247, .9); border-radius: 12px; padding: 12px 16px; }

/* 年のボタン：大きく、2列〜5列 */
.years { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.years a { display: flex; flex-direction: column; gap: 2px; min-height: 128px; padding: 16px 18px; text-decoration: none; color: var(--ink);
  background: var(--card); border: 2px solid var(--line); border-radius: 16px; box-shadow: 0 3px 0 var(--line); }
.years a:hover { border-color: var(--red); box-shadow: 0 3px 0 var(--red); }
.years b { font-family: var(--mincho); font-size: 26px; color: var(--red-deep); line-height: 1.3; }
.years span { font-size: 18px; font-weight: 700; }
.years small { font-size: 15px; color: var(--sub); line-height: 1.6; margin-top: 4px; }

/* 箱 */
.box { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 4px 24px 22px; margin-top: 36px; }
.box h2 { margin-top: 22px; }
.box ul { padding-left: 1.3em; }
.box li { margin: 6px 0; }
.hits { margin: 0; padding-left: 2.2em; font-size: 20px; }
.hits li { margin: 10px 0; padding-left: .3em; }
.hits li::marker { font-family: var(--mincho); font-weight: 700; color: var(--red); }
.hits b { font-weight: 700; margin-right: .6em; }
.hits span { color: var(--sub); white-space: nowrap; }
.facts li { font-size: 19px; }

/* 年の頁の見出し */
.crumbs { font-size: 16px; margin: 16px 0 0; }
.year-head { margin: 10px 0 0; padding: 26px 28px 22px; background: var(--card); border: 2px solid var(--line); border-left: 10px solid var(--red); border-radius: 16px; }
.year-head h1 { font-size: clamp(34px, 7vw, 48px); line-height: 1.3; margin: 2px 0 10px; }
.year-head p:last-child { font-size: 20px; margin: 0; }

/* CD：表紙を大きく、横に説明。せまい画面では縦に */
.discs { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.disc { display: flex; gap: 18px; padding: 16px; background: var(--card); border: 2px solid var(--line); border-radius: 16px; }
.jacket { flex: 0 0 150px; display: block; }
.jacket img { display: block; width: 150px; height: 150px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.disc-body { display: flex; flex-direction: column; min-width: 0; }
.disc h4 { margin: 0; font-size: 19px; line-height: 1.6; }
.disc p { margin: 2px 0; }
.disc .who { font-weight: 700; color: var(--sub); }
.disc .when { font-size: 17px; }
.disc .price { font-size: 22px; font-weight: 700; color: var(--red-deep); }
.disc .price small { display: block; font-size: 15px; font-weight: 400; color: var(--sub); }
.disc .go { margin-top: auto; padding-top: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 22px; text-decoration: none; font-weight: 700; font-size: 18px;
  color: #fff; background: var(--red); border-radius: 12px; box-shadow: 0 3px 0 var(--red-deep); }
.btn:hover { background: var(--red-deep); }
.btn.big { font-size: 19px; min-height: 58px; }
.more { text-align: center; margin: 22px 0 0; }
.artist h3 { padding-left: 12px; border-left: 6px solid var(--mustard); }

/* 前の年・次の年 */
.year-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin: 44px 0 0; }
.year-nav .btn:first-child { justify-self: start; }
.year-nav .btn:last-child { justify-self: end; }
.year-nav .home { background: var(--navy); box-shadow: 0 3px 0 #1d3049; }

.site-footer { max-width: 980px; margin: 0 auto; padding: 26px 16px 40px; border-top: 2px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 16px; }
.site-footer a { color: var(--navy); }

@media (max-width: 640px) {
  html { font-size: 18px; }
  h2 { font-size: 24px; }
  .welcome { background: linear-gradient(180deg, rgba(251, 245, 232, .2) 0%, rgba(251, 245, 232, .95) 38%), url("hero.jpg") center top / cover no-repeat; padding-top: 140px; }
  .welcome > * { margin-left: 0; }
  .years { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discs { grid-template-columns: 1fr; }
  .disc { flex-direction: column; align-items: center; text-align: center; }
  .jacket { flex: none; }
  .jacket img { width: 200px; height: 200px; }
  .disc .go .btn { width: 100%; }
  .year-nav { grid-template-columns: 1fr; }
  .year-nav .btn { justify-self: stretch !important; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

/* 2026-10-25 ジャケットを出さぬ間（楽天の返事待ち）：文字だけのカード */
.disc.noimg { display: block; border-left: 8px solid var(--mustard); }
.disc.noimg .go .btn { width: 100%; }

/* 2026-10-26 ジャケット（楽天アフィリエイト「リンク作成」の原文）を出した札と字だけの札で、ボタンの幅をそろえる（花輪君の次の案） */
.disc-body { flex: 1; }
.disc .go .btn { width: 100%; }
@media (max-width: 640px) { .disc-body { align-self: stretch; } }
/* 2026-10-26 花輪君の一の案：スマホでトップの「ぜんぶ見る」ボタンが2行に折れる（高さ92px）→ 1行に */
@media (max-width: 640px) {
  .more .btn { display: flex; width: 100%; padding-left: 10px; padding-right: 10px; font-size: 18px; }
}
/* 2026-10-27 昭和40年代を足した：年の一覧を年代ごとに。歌手から選ぶ頁（kashu.html） */
.decade { font-family: var(--mincho); font-size: 22px; color: var(--red-deep); margin: 26px 0 12px; }
.kashu { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kashu li { background: var(--paper); border: 2px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.kashu b { display: block; font-size: 20px; line-height: 1.5; margin-bottom: 6px; }
.kashu span { display: flex; flex-wrap: wrap; gap: 8px; }
.kashu a { display: inline-block; font-size: 17px; font-weight: 700; text-decoration: none; color: var(--navy); background: var(--card); border: 2px solid var(--line); border-radius: 10px; padding: 6px 12px; }
.kashu a:hover { border-color: var(--red); color: var(--red); }
.artist { scroll-margin-top: 16px; }
/* 2026-10-27 花輪君の点検（昭和40年代・歌手から選ぶ）：字だけの札のボタンをそろえる・歌手の札の余白と押しやすさ・見出しの1字落ち・年のボタンの高さをそろえる */

/* 1. 字だけの札も、ボタンを札の下にそろえる（PCでジャケットの札と並ぶ段で、ボタンが浮いて下に空きが出る） */
.disc.noimg { display: flex; }

/* 2. 字だけの札のボタン：スマホで「（ジャケット／も見られます）」と割れる → 括弧の前で折る */
.disc.noimg .go .btn { word-break: keep-all; overflow-wrap: anywhere; }

/* 3. 歌手の札：.box ul の左の字下げ（1.3em）を外し、年のボタンを 52px に */
.box .kashu { padding-left: 0; }
.box .kashu li { margin: 0; }
.kashu a { display: inline-flex; align-items: center; min-height: 52px; padding: 6px 14px; }

/* 4. 見出しの1字落ち（「…活躍した歌/手」「…レコー/ド」）を防ぐ */
h2 { text-wrap: balance; word-break: auto-phrase; }

/* 5. スマホ：歌手の札を「名前 ― 年のボタン」の1段に（頁の長さ 15,200px → 約11,100px）。名前が長い時はボタンが下の段へ（名前は途中で割らない） */
@media (max-width: 640px) {
  .kashu { gap: 10px; }
  .kashu li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px 10px 16px; }
  .kashu b { flex: 1 0 auto; max-width: 100%; margin: 0; word-break: auto-phrase; }
  .kashu span { justify-content: flex-end; }
}

/* 6.（小）年のボタンの高さを同じ段でそろえる */
.years li { display: flex; }
.years a { flex: 1; }

/* 2026-10-27 花輪君：昭和歌謡（40年代・歌手から選ぶ・ジャケット469枚）の上げる前の点検で、直すとなおよい所（theme.css の末尾に足す案。楽天の原文・img には触れない） */

/* 1. PCのトップの看板：見出し「あの頃の歌に、もう一度。」だけが左の絵の上に乗り、上の「昭和40年代・50年代の流行歌」と下の文は右の列。
      見出しも右の白い列にそろえる（.welcome h1 の margin:6px 0 14px が margin-left:auto を打ち消していた）。スマホは今のまま。 */
@media (min-width: 641px) {
  .welcome > * { max-width: 570px; }
  .welcome h1 { margin-left: auto; }
}

/* 2. 歌手から選ぶ頁の下のボタン（2つ）：PCで「年から選ぶ」が真ん中に来て左右がふぞろい → 右の端へ（スマホは縦に2つのまま） */
@media (min-width: 641px) {
  .year-nav .btn:nth-child(2):last-child { grid-column: 3; }
}

/* 3.（小）字の割れ：年のボタンの曲名「北酒/場」「襟裳/岬」、歌手の名前「ブルーコメ/ッツ」「バ/ンド」
      （ヒット5曲の「オールナイ/ト」は text-wrap:pretty・auto-phrase とも試して良くならず＝今のままに） */
/*   年のボタン：CSSだけなら keep-all（「霧氷」「北酒場」などは割れずに次の行へ。長い2曲「いいじゃないの幸/せならば」「シクラメンのかほ/り」だけは割れる） */
.years small { word-break: keep-all; overflow-wrap: anywhere; }
/*   なおよいのは作りの側で曲名を span に分ける：<small>レコード大賞<span>「霧氷」</span></small> と、下の1行（上の keep-all の代わりに）。
     手元で試した＝全20曲が「シクラメンの/かほり」「いいじゃないの/幸せならば」のように句の切れ目で折れる。頁はスマホで約200px、PCで約80px伸びる。
.years small span { display: block; word-break: auto-phrase; }
*/
.kashu b { text-wrap: balance; word-break: auto-phrase; }

/* 4.（小・前からの癖）スマホの上の名前「懐かしの昭和歌謡に触れ/る帳」→「懐かしの昭和歌謡に/触れる帳」（字の大きさ24pxはそのまま。手元で確かめた） */
.brand { text-wrap: balance; word-break: auto-phrase; }

/* 2026-10-27 夜 花輪君（60年代を足した版の点検）：ヒット5曲の1字落ち・s50 の歌手名のはみ出し、年のボタンの曲名を句で折る（build.py で「レコード大賞」の後ろに改行） */
.hits b { word-break: auto-phrase; }
.hits span { display: inline-block; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.years small { word-break: keep-all; overflow-wrap: anywhere; word-break: auto-phrase; }

/* 2026-10-27 夜 花輪君（30年代を足した版）：歌手の頁で、年のボタンが多い歌手と同じ段の箱が空に見える（PC）・最後の1個が右下に取り残される（スマホ）→ 中身なりの高さ・左から並べる */
.kashu { align-items: start; }
@media (max-width: 640px) {
  .kashu span { justify-content: flex-start; }
}

/* 2026-10-27 夜 殿「両方進めて」（花輪君）：年代へ飛ぶ大きなボタン（トップの年から選ぶ・歌手から選ぶの頭）と、昭和30年代の見出しの下の一言 */
.decade-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 18px; }
.decade-nav .btn { min-height: 56px; padding: 8px 10px; font-size: 18px; background: var(--navy); box-shadow: 0 3px 0 #1d3049; }
@media (max-width: 640px) { .decade-nav { grid-template-columns: repeat(2, 1fr); } }
.decade-note { font-size: 17px; color: var(--sub); margin: -4px 0 12px; }
.decade, .box[id^="k"] { scroll-margin-top: 12px; }
/* 花輪君：紺のボタンにも指を乗せた時の色（赤の「楽天ブックスで見る」と見分けるため紺のまま濃く） */
.decade-nav .btn:hover, .year-nav .home:hover { background: #24394f; }
/* 2026-10-27 夜 殿「進めて」（花輪君の二の案）：歌手から選ぶの各年代の終わりに、頭の年代ボタンへ戻るリンク */
.back-dec { text-align: right; margin: 14px 0 0; }
.back-dec a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; font-size: 18px; font-weight: 700; }
#kdec { scroll-margin-top: 12px; }


/* 2026-10-27 深夜 歌手の頁を足した時の花輪君の点検（見本1〜4） */
/* 1.【上げる前に】kashu.html：歌手名のリンク（li > b > a）が、前からの「.kashu a」（年のボタンの装い）を受け、
      年のボタンと同じ白い箱・17px になっている（名前と年の見分けがつかない・名前が20px→17pxに縮んだ）。
      名前は箱にせず、紺の太字20px＋下線（年の頁の歌手の見出しのリンクと同じ見え方）に。押せる高さは48px。
      スマホの頁の長さも 19,012px → 18,655px に縮む。 */
.kashu b a {
  display: inline-block; min-height: 0; padding: 8px 0; line-height: 1.6;
  background: none; border: 0; border-radius: 0;
  font-size: 20px; color: var(--navy);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.kashu b a:hover { color: var(--red); border: 0; }

/* 2.（直すとなおよい）歌手の頁「この帳に残る記録」：スマホで年のリンクの後ろに文が続くため
      「NHK紅/白歌合戦」「日本レコ/ード大賞」と語の途中で折れる → スマホだけ、年を1行目（太字）、記録を2行目に。句の切れ目で折る（ひばりの頁 7,318px → 7,329px）。
      記録の文の頭の全角の空き（　）が2行目の1字下げとして残る＝読み物らしい形。 */
@media (max-width: 640px) {   /* PCは1行に収まって読みやすいので今のまま（PCで2行にすると ひばりの頁が 544px 伸びる） */
  .facts li > a:first-child { display: table; font-weight: 700; }
  .facts li:has(> a:first-child) { margin: 0 0 12px; line-height: 1.7; word-break: auto-phrase; }   /* 年の頁の .facts（リンクなし）は変わらない */
}

/* 3.（直すとなおよい）歌手の頁の名前（h1 34px）：スマホで「和田弘とマヒナス/ターズ」「ピンキーとキラ/ーズ」など18人が語の途中で折れる。
      歌手の頁だけ（パンくずに「歌手から選ぶ」がある頁）、スマホで30px＋句で折る。年の頁・新しく出たCDなどの見出しは変わらない。
      → 「和田弘と/マヒナスターズ」「ジャッキー吉川と/ブルーコメッツ」「ザ・スパイダース」（1行に）。
      残る割れ：「ハナ肇と/クレージーキャッ/ツ」「サザンオールスタ/ーズ」（長い一語。今より悪くはならない）。 */
.crumbs:has(a[href="kashu.html"]) + .year-head h1 { text-wrap: balance; word-break: auto-phrase; }
@media (max-width: 640px) {
  .crumbs:has(a[href="kashu.html"]) + .year-head h1 { font-size: 30px; }
}

/* 4.（小）年の頁の歌手の見出し（section.artist > h3 > a）：見え方は今のままで良い（紺・下線・左の芥子色の線）。
      押せる高さだけ約33px → 48px に。 */
.artist h3 a { display: inline-block; padding: 7px 0; line-height: 1.5; }

/* 2026-10-28 殿「1行にまとめる」：歌手の頁で紅白のトリ・大トリを1行に。年は押しやすい小さな札で並べる */
.facts li.rec-sum b { display: block; font-weight: 700; margin: 0 0 6px; }
.facts li.rec-sum span { display: flex; flex-wrap: wrap; gap: 8px; }
.facts li.rec-sum span a { display: inline-flex; align-items: center; min-height: 48px; padding: 4px 12px; font-size: 17px; font-weight: 700;
  text-decoration: none; color: var(--navy); background: var(--card); border: 2px solid var(--line); border-radius: 10px; }
.facts li.rec-sum span a:hover { border-color: var(--red); color: var(--red); }
.facts li.rec-sum b { word-break: auto-phrase; }   /* 花輪君：「（11回）」が数の途中で折れぬよう */
@media (max-width: 640px) { .facts li.rec-sum { margin-bottom: 12px; } }

/* 2026-10-29 買いどきの目安（Claude）。build.py の TIMING から出る。大きな字・濃い字のまま */
.timing > .eyebrow { margin: 52px 0 0; color: var(--red); font-weight: 700; letter-spacing: .15em; font-size: 17px; }
.timing > h2 { margin-top: 4px; }
.timing-sub { font-size: 18px; color: var(--sub); margin: 0 0 18px; }
.timing > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.timing li { display: flex; flex-direction: column; min-width: 0; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 20px 20px 16px; }
.timing-ico { display: block; width: 60px; height: 60px; padding: 12px; border-radius: 50%; background: #efe3c8; color: var(--red-deep); }
.timing-ico svg { display: block; width: 100%; height: 100%; }
.timing h3 { font-family: var(--mincho); font-size: 21px; line-height: 1.5; margin: 12px 0 6px; }
.timing li p { font-size: 17px; line-height: 1.85; margin: 0 0 10px; }
.timing-go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-size: 17px; font-weight: 700; }
@media (max-width: 640px) {
  .timing > ul { grid-template-columns: 1fr; gap: 14px; }
}

/* 2026-10-29 デビュー年（殿「デビューしたとしでもわかったほうが」）。年の頁の棚の理由・デビューした歌手の欄・歌手の頁の頭・kashu の名前の横。大きな字のまま */
.artist .why { font-size: 17px; line-height: 1.8; color: var(--sub); margin: 0 0 12px; }
.debut-names { font-size: 19px; line-height: 2; margin: 0; }
.debut-head { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.kashu b small.debut-y { display: block; font-size: 16px; font-weight: 400; color: var(--sub); margin-top: 2px; }

/* 2026-10-29 殿「売っているもの一緒なのも変」：盤を並べない歌手の1行（棚より軽く。字は大きいまま） */
.artist-line { font-size: 18px; line-height: 1.8; margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--line); }
.artist-line b a { display: inline-block; padding: 7px 0; }
.artist-line small { font-size: 17px; color: var(--sub); }