/* pop web デザインの統一「80年代UKのファンジン / 7インチ盤」(2026-10 採用。案は _work_v2/uk80/)
   peri.css と各ページの CSS の後(</head> の直前)に読み込み、上書きするだけ(内容・色の基本は変えない)。
   後から読むので、同じ強さのセレクタならスマホ用の指定(各ページの @media)にも勝つ。スマホの欄には PC と違う値だけを書く。
   数値はスマホも実寸(10e の ×0.62 の縮小はかけない)。!important は使わない。

   決まりごと
   - 色の役割: 文字=#4d4d4d / 見出し=紺(ロゴと同じ) / 押せるもの=青 / 音に関わるもの=オレンジ / 線・ミシン目=薄い青
   - 書体: ロゴ・ページ名・小見出し・日付・番号 = タイプライター(Special Elite)。本文・作品名 = 今のまま
   - 形: 角は四角(角丸なし)。丸は「再生」「ページの上へ」「再生リストの再生」だけ
   - 区切り: 小見出しの下と、ページ下(フッター)の上はチケットのミシン目
   - 作品の見出し: 新レビュー=帯なしで頭に■(ブログと同じ) / 旧レビュー・レーベル特集=薄いグレーの帯(品番の文字だけレーベルの色)
   - ジャケット: 細い枠+右下にずらした薄い影(レコードのスリーブ) */

:root {
  --ink: #4d4d4d;
  --navy: #2f4f6f;
  --blue: #3e7bac;
  --orange: #f60;
  --line: #dde6ee;
  --mist: #f2f6f9;
  --gray: #efefef;
  --mute: #8a96a3;
  --edge: #c9d8e6;
  --frame: rgba(0, 0, 0, 0.14);
  --kc: #006400;
  --sl: #1e90ff;
  --pp: red;
  --sans: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --tw: 'Special Elite', 'Courier New', 'Hiragino Kaku Gothic ProN', Meiryo, monospace;
  --perf: radial-gradient(circle, #c3d4e3 2.2px, transparent 2.6px);
}

/* ---------- PC: 左寄せのまま、画面の左端から少し離す(「上へ」ボタンも同じだけ右へ) ---------- */
@media screen and (min-width: 601px) {
  body { margin-left: 30px; }
  .pagetop { left: 680px; }
}

/* ---------- 上のメニュー: 青い線も今のページの太線も背景で描き、どの画面倍率でも下端がそろうようにする ---------- */
.gnav { border-bottom: 0; background: linear-gradient(var(--blue), var(--blue)) left bottom / 100% 2px no-repeat; }
.gnav > a { position: relative; margin-bottom: 0; border-bottom: 0; padding-bottom: 6px; }
.gnav > a.on:after, .gnav .site-search:focus-within:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--blue); }
/* 検索窓(PC): 自分の下線はやめ、メニューの文字と同じ高さに置いて青い線を下線にする。入力中はメニューの「今のページ」と同じ太線 */
.gnav .site-search { align-self: flex-end; margin-bottom: 0; }
.gnav .site-search input { border-bottom: 0; padding: 0 4px 6px 20px; font-size: 1.3rem; line-height: 1.7; }
.gnav .s-icon { top: calc(50% - 3px); }

/* ---------- 見出し(3段階) ---------- */
/* ページ名: タイプライター。文字が上寄りの書体なので少し下げ、■の真ん中とそろえる */
div.underline h1, div.underline h2 { font-family: var(--tw); font-weight: normal; color: var(--navy); font-size: 2.1rem; letter-spacing: 0.01em; position: relative; top: 0.14em; }

/* 小見出し(トップ・Radio・A–Z の頭文字): タイプライター+ミシン目 */
.sh, .rhead, .blocka:not(:has(+ .blockb)) {
  display: block; font-family: var(--tw); font-weight: normal; color: var(--navy); font-size: 1.8rem; line-height: 1.4;
  background: var(--perf) left bottom / 12px 8px repeat-x; padding: 0 0 12px; margin: 2.2rem 0 0.8rem; text-shadow: none;
}
.sh small { font-family: var(--sans); }

/* 作品の見出し: 旧レビュー・レーベル特集=薄いグレーの帯 / 新レビュー=帯なしで頭に文字と同じ色の■(ブログの記事見出しと同じ形) */
.blocka:has(+ .blockb), div.blockold, div.blockkindercore, div.blockpancake, div.blockshelflife {
  background: var(--gray); color: var(--ink); text-shadow: none; font-weight: bold; font-size: 1.45rem; line-height: 1.45;
  padding: 7px 10px; margin: 2.6rem 0 1rem; border: 0;
}
.blocka:has(+ .blockb) { background: none; color: var(--navy); padding: 0 0 0 18px; }
/* ■は見出しの1行目の文字の並びに置き、下端を「文字の基準線+大文字の高さの半分-4px」に。書体(Windows・iPhone)が変わっても文字の真ん中にそろう */
.blocka:has(+ .blockb) h2:before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 0 -18px; background: currentColor; vertical-align: calc(0.36em - 4px); }
div.blockold:after { display: none; }
div.blocka h2 { font: inherit; color: inherit; }
/* 規格(CD・7" など)は品番シール、品番(kc003 など)はタイプライターでレーベルの色 */
.fmt { display: inline-block; margin-left: 6px; padding: 1px 5px 0; border: 1px solid #d6d6d6; color: #999; background: #fff; font-size: 1rem; line-height: 1.4; vertical-align: 2px; letter-spacing: 0.04em; }
.cat { font-family: var(--tw); font-weight: normal; font-size: 1.2rem; margin-right: 8px; }
div.blockkindercore .cat { color: var(--kc); }
div.blockshelflife .cat { color: var(--sl); }
div.blockpancake .cat { color: var(--pp); }
/* レーベル特集の切り替えタブ: 今のレーベルの下線もレーベルの色 */
body:has(div.blockkindercore) .subnav span { border-bottom-color: var(--kc); }
body:has(div.blockshelflife) .subnav span { border-bottom-color: var(--sl); }
body:has(div.blockpancake) .subnav span { border-bottom-color: var(--pp); }

.artist h3 { color: var(--navy); border-bottom: 1px solid var(--line); padding-bottom: 2px; }

/* ---------- ジャケット: どのページも同じ細い枠。大きいものは右下に薄い影 ---------- */
img.left, div.labell img, .pj img, .rjacket, .strip img, .rtoc img, .jgrid img, .jgrid a:hover img, .work img { border: 1px solid var(--frame); box-sizing: border-box; }
img.left, div.labell img, .pj img, .rjacket { box-shadow: 4px 4px 0 var(--mist); }

/* ---------- ボタン: 四角・細い枠・今の選択だけ青く塗る(マウスを乗せても変えない) ---------- */
.gctrl button, .controls button, .pagination button, .rbtns button, .letters a, .aznav li a, .rnum a, .rnum b {
  font-family: inherit; border: 1px solid var(--edge); background: #fff; color: var(--blue); border-radius: 0; font-weight: bold;
}
/* 各ページの「マウスを乗せたら枠・地・文字を青くする」指定を打ち消す(色だけ。書体には触れない) */
.gctrl button:hover:not(.active), .controls button:hover:not(.active), .pagination button:hover:not(.active),
.rbtns button:hover, .letters a:hover, .aznav li a:hover, .rnum a:hover { border-color: var(--edge); background: #fff; color: var(--blue); }
.gctrl button, .controls button, .pagination button, .rbtns button { font-size: 1.2rem; padding: 6px 11px; line-height: 1.2; }
.gctrl button.active, .controls button.active, .pagination button.active, .rnum b.cur { background: var(--blue); border-color: var(--blue); color: #fff; }
.letters a.off, .rnum b.off, .pagination button:disabled, .pagination button:disabled:hover { color: #c5ced6; border-color: #edf1f4; }
.letters a small, .rnum a, .rnum b { font-family: var(--tw); font-weight: normal; }
.letters a small { color: var(--mute); }
.rnum a, .rnum b { font-size: 1.3rem; }
.rnum .ar { font-family: var(--sans); }
/* Radio: 音を出すボタンだけオレンジ */
.rbtns button { display: inline-flex; align-items: center; gap: 6px; }
.rbtns button.rmain, .rbtns button.rmain:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.options select, .search-box input { border-color: var(--edge); border-radius: 0; background-color: #fff; }
.search-box .search-icon { color: var(--blue); }

/* ---------- 丸いもの(音と「上へ」だけ) ---------- */
/* 中身が ▶ の文字でも Font Awesome の再生マークで見せる(スクリプトで作る Up Next も同じ見た目) */
.rplay { border: 1px solid var(--blue); color: var(--blue); background: #fff; font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
.rplay:before { font-family: FontAwesome; content: "\f04b"; font-size: 8px; line-height: 1; margin-left: 2px; }
.rlist li.cur { background: #fff4ea; }
.rlist li.cur .rplay { background: var(--orange); border-color: var(--orange); color: #fff; }
/* 順位は丸(=再生)と見分けるため、紺の四角に番号 */
.pj b { border-radius: 0; background: var(--navy); font-family: var(--tw); font-weight: normal; font-size: 1.25rem; left: 0; top: 0; }

/* ---------- 小さな印: MP3=オレンジ、区分(Review など)=枠だけ ---------- */
.rtoc .dot, .jgrid .jg-mp3, .badge-mp3, .wl-mp3, em.b.b-mp3, .badge-section, .wl-sec, em.b.b-r {
  border-radius: 0; font-weight: bold; letter-spacing: 0.05em; font-size: 0.95rem; line-height: 1.3; padding: 1px 5px;
}
.rtoc .dot, .jgrid .jg-mp3, .badge-mp3, .wl-mp3, em.b.b-mp3 { background: var(--orange); color: #fff; }
.badge-section, .wl-sec, em.b.b-r { background: #fff; color: var(--mute); border: 1px solid var(--edge); padding-top: 0; padding-bottom: 0; }

/* ---------- 補足の文章・枠 ---------- */
.gnote, .rnote, .ixnote, .listnote, .gcount, .result-count, .crumbs { color: var(--mute); }
div.description { float: none; width: auto; margin: 6px 0 18px; padding: 10px 14px; border: 0; background: var(--gray); font-size: 1.3rem; color: #666; }
.feat a, .feat a:hover { border: 0; background: var(--mist); padding: 10px 14px; }

/* ---------- 一覧の行: 区切りは薄い青の線。マウスを乗せたときの地の色は1色、文字の色は変えない ---------- */
.pick, .results li, .worklist li, .rlist li, .work { border-bottom-color: #e8eef3; }
.results li:hover, .worklist li:hover, .work:hover { background: var(--mist); }
.rlist li { align-items: center; font-size: 1.3rem; }   /* Radio の曲のリストは本文より一段小さく */
.rlist small { font-size: 1.05rem; }
.rlist a:hover, .jgrid a:hover, .wl-row:hover { color: var(--ink); }

/* ---------- 曲名・日付・入手先リンク ---------- */
figcaption, a.rf { font-size: 1.15rem; }
.date { font-family: var(--tw); color: var(--mute); font-size: 1.3rem; margin-left: 14px; }

/* ---------- 検索ページ: 選択欄はどのブラウザでも同じ形(矢印も自前)、件数とページ番号はタイプライター ---------- */
.options select {
  -webkit-appearance: none; appearance: none; font-family: inherit; color: var(--ink); line-height: 1.2; padding: 6px 26px 6px 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233e7bac' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 9px center;
}
.result-count, .pagination button { font-family: var(--tw); font-weight: normal; }
.result-count { font-size: 1.3rem; }
/* 検索結果の行: 左にジャケット、真ん中にアーティスト名と作品名、右端に印 */
.results li a.result-row { display: flex; align-items: center; gap: 12px; }
.result-thumb { flex: none; width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--frame); box-sizing: border-box; }
.result-main { display: block; flex: 1; min-width: 0; }
.result-artist, .result-album { display: block; line-height: 1.4; }
.result-album { font-size: 1.25rem; font-weight: normal; }
.result-tags { flex: none; display: flex; gap: 4px; }

/* ---------- Radio: ジャケットの右に曲の情報 ---------- */
.rbox { display: grid; grid-template-columns: 240px 1fr; column-gap: 18px; align-items: start; border-top: 1px solid var(--line); border-bottom: 0; padding: 14px 0 4px; }
.rbox .rjacket { width: 240px; height: 240px; margin: 0 0 4px; }
.rinfo { min-width: 0; }
.rbox .pw-player, .rbox .rbtns, .rbox audio { grid-column: 1 / -1; }
.rartist { margin-top: 0; }

/* ---------- フッター: ミシン目の上に、タイプライターのコピーライト ---------- */
div.footer:not(:has(div.footer)) { background: var(--perf) left top / 12px 8px repeat-x; padding-top: 18px; margin-top: 3rem; }
div.footer a { font-weight: normal; font-size: 1.2rem; }
div.footer a[href="https://popweb.jp"] { font-family: var(--tw); color: var(--navy); }

/* ---------- スマホ(PC と違う値だけ) ---------- */
@media screen and (max-width: 600px) {
  .gnav > a, .gnav .gfind { padding-bottom: 7px; }
  div.underline h1, div.underline h2 { font-size: 1.95rem; }
  .sh, .rhead, .blocka:not(:has(+ .blockb)) { font-size: 1.7rem; }
  .rbox { grid-template-columns: 40% 1fr; column-gap: 12px; }        /* ジャケットは画面幅の4割、紹介文は省く */
  .rbox .rjacket { width: 100%; height: auto; aspect-ratio: 1; }
  .rartist { font-size: 1.5rem; }
  .rtext { display: none; }
  .rreview { display: block; }                                       /* Read Review と入手先リンクは縦に並べる */
  .rrf { margin-left: 0; }
}