/* ====== Reset / Base ====== */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #121212;
  color: #fff;
}

/* ====== Layout ====== */
main {
  margin-top: 120px;           /* ロゴ+ナビ+パンくず分のオフセット */
  padding: 0 10px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

/* ====== Site Logo (画像版) ====== */
/* HTML: <a class="site-logo"><img class="logo-pc"> <img class="logo-sp"></a> */
.site-logo {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 60px;                /* デスクトップのヘッダー高さ */
  background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
  z-index: 10000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  text-decoration: none;       /* a要素でも下線を消す */
}
.site-logo img {
  display: block;
  height: 40px;                /* PCロゴの見た目サイズ */
  width: auto;
}
.site-logo .logo-pc { display: block; }
.site-logo .logo-sp { display: none; }

/* ====== Hamburger (SPで表示) ====== */
.menu-toggle {
  display: none;
  font-size: 2rem;
  color: #ffcc66;
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 10001;
  cursor: pointer;
}

/* ====== Global Nav ====== */
.global-nav {
  background: #1a1a1a;
  padding: 10px 0;
  text-align: center;
  position: fixed;
  top: 60px;                   /* ロゴ直下 */
  width: 100%;
  z-index: 9999;
}
.global-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.global-nav li {
  display: inline-block;
  margin: 0 10px;
}
.global-nav a {
  color: #ffcc66;
  text-decoration: none;
  font-weight: bold;
}
.global-nav a:hover { color: #ffaa00; }

/* ====== Breadcrumb ====== */
.breadcrumb {
  position: fixed;
  top: 100px;                  /* ロゴ(60) + ナビ(約40) */
  width: 100%;
  background: #1a1a1a;
  padding: 8px 12px;
  z-index: 9998;
}
.breadcrumb a { color: #ffcc66; text-decoration: none; }

/* ====== Hero ====== */
.hero {
  margin-top: 140px;           /* パンくずの下に来るように */
  height: 220px;
  position: relative;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.overlay {
  position: absolute;
  top: 30%;
  left: 10%;
  color: #fff;
}
.catch { font-size: 1.5rem; font-weight: 300; }

/* ====== Index cards ====== */
.card-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 2rem auto;
  max-width: 1000px;
}
.card {
  background: #1e1e1e;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255,255,255,0.1);
  padding: 1rem;
  width: 300px;
  text-align: center;
}
.card i { color: #ffcc66; margin-bottom: 10px; }
.card h2 { color: #ffcc66; margin-top: 0; }
.card a {
  color: #ffcc66;
  text-decoration: none;
  font-weight: bold;
}
.card a:hover { text-decoration: underline; }

/* ====== Recommend: Album cards ====== */
.album-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 2rem auto;
  max-width: 1100px;
}
.album-card {
  background: #1e1e1e;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255,255,255,0.1);
  padding: 1rem;
  width: 220px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.album-card img {
  width: 100%;
  border-radius: 5px;
  object-fit: cover;
}
.album-card h3 { color: #ffcc66; font-size: 1.1rem; margin: 6px 0; }
.album-card p { flex-grow: 1; font-size: 0.9rem; margin: 4px 0; }
.album-card a {
  display: inline-block;
  margin-top: 10px;
  color: #ffcc66;
  text-decoration: none;
  font-weight: bold;
}
.album-card a:hover { color: #ffaa00; }

/* ====== Artist listing ====== */
.artist-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  margin: 2rem auto;
  width: 100%;
}
.artist-card {
  background: #1e1e1e;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255,255,255,0.1);
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.artist-card h3 { color: #ffcc66; margin-top: 0; }
.artist-card p { font-size: 1rem; line-height: 1.5; }

/* ====== Theory common ====== */
.theory-section {
  background: #1e1e1e;
  padding: 1.5rem;
  max-width: 900px;
  margin: 1rem auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255,255,255,0.1);
}
.theory-section h2 { color: #ffcc66; }

/* tables in theory */
.theory-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.theory-section th,
.theory-section td {
  border: 1px solid #444;
  padding: 8px;
  text-align: left;
}
.theory-section th {
  background: #1f1f1f;
  color: #ffcc66;
}
.theory-section td {
  background: #1a1a1a;
}

/* F-blues grid */
.blues-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 600px;
  width: 90%;
  margin: 1rem auto;
}
.blues-grid div {
  background: #1e1e1e;
  color: #ffcc66;
  border: 1px solid #444;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  border-radius: 5px;
  font-size: 1rem;
}

/* ====== Responsive ====== */
@media (max-width: 768px) {
  /* header */
  .menu-toggle { display: block; }
  .site-logo {
    height: 56px;
    padding: 8px 14px;
  }
  .site-logo img { height: 32px; }   /* SPロゴの見た目サイズ */
  .site-logo .logo-pc { display: none; }
  .site-logo .logo-sp { display: block; }

  .global-nav { top: 56px; }
  .global-nav ul { display: none; }
  .global-nav.open ul { display: block; }
  .global-nav li { display: block; margin: 5px 0; }

  .breadcrumb { top: 96px; }         /* 56 + 約40 */
  .hero { margin-top: 120px; height: 180px; }
  main { margin-top: 20px; }

  /* index / recommend cards layout */
  .card-section, .album-section { flex-direction: column; align-items: center; }
  .card, .album-card { width: 90%; }

  /* artist: モバイル完全対応（横スクロール防止） */
  .artist-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 5px !important;
    overflow-x: hidden !important;
  }
  .artist-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    font-size: 0.9rem !important;
    overflow-x: hidden !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
  .artist-card h3 { font-size: 1rem !important; }
  .artist-card p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: auto !important;
  }

  /* theory: アルバム表をカード化（縦長感を抑える） */
  .responsive-album-table { width: 100%; }
  .responsive-album-table thead { display: none; }
  .responsive-album-table tbody tr {
    display: block;
    background: #1a1a1a;
    margin-bottom: 12px;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px 12px;
  }
  .responsive-album-table tbody tr td {
    display: flex;
    flex-wrap: wrap;
    padding: 4px 0;
    font-size: 0.85rem;
    gap: 4px;
    align-items: baseline;
  }
  .responsive-album-table tbody tr td a { word-break: break-all; }
  .responsive-album-table tbody tr td:before {
    content: attr(data-label);
    flex: 0 0 120px;
    font-weight: bold;
    margin-right: 6px;
    color: #ffcc66;
  }

  /* recommend: 見た目をさらにコンパクトに（任意・悪影響なし） */
  .album-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 0 5px;
  }
  .album-card {
    padding: 8px 10px;
    gap: 4px;
    height: 100%;
    min-height: 0;
    background: #1e1e1e;
  }
  .album-card img {
    width: 100%;
    aspect-ratio: 1 / 1;      /* 正方形で縦長を抑制 */
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 4px;
  }
  .album-card h3 { font-size: 1rem; margin: 2px 0; line-height: 1.1; }
  .album-card p {
    flex-grow: 1;
    font-size: 0.75rem;
    margin: 2px 0;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;    /* 最大3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .album-card a { font-size: 0.85rem; margin-top: auto; display: inline-block; }
}
/* ==== ロゴを大きく（PC/SPともに強制） ==== */
:root{
  --headerH: 100px;   /* PCのヘッダー高さ */
  --logoH:   96px;    /* PCロゴ画像の高さ */
  --navH:    44px;    /* ナビ高さ目安 */
}
@media (max-width:768px){
  :root{
    --headerH: 86px;  /* SPのヘッダー高さ */
    --logoH:   76px;  /* SPロゴ画像の高さ */
    --navH:    44px;
  }
}

/* 位置とサイズを一括で追従（!importantで確実に上書き） */
.site-logo{height:var(--headerH) !important; padding-top:12px !important; padding-bottom:12px !important;}
.site-logo img{height:var(--logoH) !important; width:auto !important;}
.global-nav{top:var(--headerH) !important;}
.breadcrumb{top:calc(var(--headerH) + var(--navH)) !important;}
.hero{margin-top:calc(var(--headerH) + var(--navH) + 40px) !important;}
/* ==== ロゴ特大版（PC=2x / SP=1.5x） ==== */
/* 数値だけ触れば全体が自動追従します */
:root{
  --logoH: 192px;              /* PCロゴの高さ（96px の2倍） */
  --headerPadV: 8px;           /* ロゴ上下の余白 */
  --headerH: calc(var(--logoH) + var(--headerPadV) * 2);
  --navH: 44px;                /* グロナビ高さの目安 */
}
@media (max-width:768px){
  :root{
    --logoH: 114px;            /* SPロゴの高さ（76px の1.5倍 ≒ 114） */
    --headerPadV: 8px;
    --headerH: calc(var(--logoH) + var(--headerPadV) * 2);
    --navH: 44px;
  }
}

/* ヘッダー系の位置・サイズを一括で上書き */
.site-logo{
  height: var(--headerH) !important;
  padding-top: var(--headerPadV) !important;
  padding-bottom: var(--headerPadV) !important;
}
.site-logo img{
  height: var(--logoH) !important;
  width: auto !important;
}

/* ナビ／パンくず／ヒーローの位置も自動追従 */
.global-nav{ top: var(--headerH) !important; }
.breadcrumb{ top: calc(var(--headerH) + var(--navH)) !important; }
.hero{ margin-top: calc(var(--headerH) + var(--navH) + 40px) !important; }

/* ハンバーガーメニューを縦センター寄せ */
.menu-toggle{
  top: calc(var(--headerH) / 2 - 16px) !important; /* 2rem(≒32px)想定で中央に */
}
/* ===== PCだけヘッダー周りをコンパクト化（SPは無変更） ===== */
@media (min-width: 769px) {
  /* ナビとパンくずの高さ・余白を小さくする */
  :root{
    --navH: 32px;                 /* ナビの高さ目安を小さめに */
  }
  .global-nav{ padding: 6px 0 !important; }
  .breadcrumb{ padding: 4px 12px !important; }

  /* ヒーローの開始位置の“＋40px”をやめて、+8pxだけに */
  .hero{ margin-top: calc(var(--headerH) + var(--navH) + 8px) !important; }

  /* ヒーローが無いページでも本文が詰まりすぎないように */
  main{ margin-top: calc(var(--headerH) + var(--navH) + 12px) !important; }
}
/* ===========================
   PCだけ：ロゴの余白を“見た目トリミング”
   ===========================*/
@media (min-width: 769px) {
  /* 1) ヘッダー自体は低く保つ（表示領域を確保） */
  .site-logo{
    height: 140px !important;       /* ← ヘッダーの実高さをギュッと */
    padding: 6px 20px !important;
    overflow: hidden !important;     /* はみ出す分は隠す */
  }

  /* 2) ロゴ画像を大きめに表示しつつ、余白をカット */
  .site-logo .logo-pc{
    display: block !important;
    height: 200px !important;        /* ← 画像は大きく出して */
    width: auto !important;
    transform: translateY(-12%) !important;  /* ← 上方向に少し寄せる */
    /* 透明余白を疑似トリミング（数値は好みに微調整） */
    clip-path: inset(22% 6% 18% 6%) !important; /* 上 右 下 左（%）*/
  }
  .site-logo .logo-sp{ display: none !important; } /* PCでは非表示 */

  /* 3) ヘッダー高さに合わせて位置を再計算 */
  .global-nav{ top: 140px !important; }
  .breadcrumb{ top: 180px !important; }    /* 140 + ナビ約40 */
  .hero{ margin-top: 220px !important; }   /* 140 + 40 + 40(余白) */
}
/* =========================
   PCだけ：ロゴ↔ナビ間の余白＋ヒーロー下を少し広げる
   （SPは無変更）
   ========================= */
@media (min-width: 769px) {
  /* ロゴとナビの間に 16px のスキマを“確実に”作る */
  .global-nav {
    top: 156px !important;        /* ← ロゴ高 140px + 16px のギャップ */
    padding: 8px 0 !important;    /* ナビは薄めに */
  }

  /* パンくずの位置はナビの下（ナビ高さ 約40px を想定） */
  .breadcrumb {
    top: 196px !important;        /* 156 + 40 */
    padding: 6px 12px !important;
  }

  /* ヒーローの開始位置（パンくず直下） */
  .hero {
    margin-top: 196px !important; /* パンくずと同じ位置から */
  }

  /* ヒーロー“下”の余白は詰めすぎを戻して +24px に */
  main {
    margin-top: 24px !important;  /* ← 前回8pxが詰めすぎだったので緩めに */
  }
}
/* ===== PCだけ：ロゴ↔ナビを密着（ギャップ0px） ===== */
/* ※ ヘッダー高さは直前調整どおり 140px を前提にしています */
@media (min-width: 769px) {
  /* ロゴ真下にナビをピタッと */
  .global-nav { top: 140px !important; }

  /* パンくずはナビの直下（ナビ高さ 約40px 想定） */
  .breadcrumb { top: 180px !important; }

  /* ヒーローの開始位置もパンくず直下に合わせる（詰めすぎ回避のため従来どおり） */
  .hero { margin-top: 180px !important; }

  /* ヒーロー下の余白は前回より少し広め：24pxのまま（必要ならここで微調整） */
  main { margin-top: 24px !important; }
}
/* ===== PC：ロゴ↔ナビをさらに詰める（オーバーラップ） ===== */
@media (min-width: 769px) {
  :root{
    /* 現在のヘッダー高さが 140px 前提。違う場合はここを変えてください */
    --headerH-pc: 140px;
    --navH-pc:    40px;
    --navOverlap: 14px;  /* ← ここを増やすほど、もっと詰まる（例: 16, 20） */
  }

  /* ナビをロゴに重ね気味に */
  .global-nav{
    top: calc(var(--headerH-pc) - var(--navOverlap)) !important;
  }

  /* パンくずはナビの直下 */
  .breadcrumb{
    top: calc(var(--headerH-pc) - var(--navOverlap) + var(--navH-pc)) !important;
  }

  /* ヒーロー開始位置も自動追従（詰めすぎ防止のため余白は従来相当） */
  .hero{
    margin-top: calc(var(--headerH-pc) - var(--navOverlap) + var(--navH-pc)) !important;
  }

  /* ヒーロー下は少しだけ余裕を持たせる（必要なら 20〜28px で調整） */
  main{
    margin-top: 24px !important;
  }
}
/* ===== PCだけ：ロゴを50%に＆ナビ位置を正しく ===== */
@media (min-width: 769px) {
  /* 1) 以前のトリミング調整を無効化（画像側で余白を切ったため） */
  .site-logo .logo-pc{
    clip-path: none !important;
    transform: none !important;
  }

  /* 2) ロゴ実サイズ＝96px（= 以前の約50%）に、ヘッダーをそれに合わせて縮小 */
  .site-logo{
    height: 112px !important;            /* ロゴ96 + 上下8px余白 */
    padding: 8px 20px !important;
    overflow: visible !important;
  }
  .site-logo img{
    height: 88px !important;             /* ★ロゴの見た目高さ（PC） */
    width: auto !important;
  }

  /* 3) ナビ／パンくず／ヒーロー位置をヘッダーに追従 */
  .global-nav{ top: 112px !important; }  /* ヘッダー直下にピタッと */
  .breadcrumb{ top: 152px !important; }  /* 112 + ナビ高(約40) */
  .hero{ margin-top: 192px !important; } /* 112 + 40 + 40(余白) */

  /* ヒーロー下は少し余裕を戻す */
  main{ margin-top: 24px !important; }
}
/* ==== PCだけ：ロゴを50%に（高さ44pxで固定） ==== */
@media (min-width: 769px) {
  /* ヘッダー高さは現状キープ（ナビ位置を変えないため） */
  .site-logo{
    height: 112px !important;             /* いまの値のまま */
    padding: 8px 20px !important;
    display: flex !important;
    align-items: center !important;        /* ロゴを縦センター */
    overflow: visible !important;
  }
  /* ★PCロゴだけ強制的に半分へ */
  .site-logo img.logo-pc{
    height: 66px !important;               /* ← 88px の 50% */
    width: auto !important;
    clip-path: none !important;
    transform: none !important;
  }
  /* 念のため：PCではSPロゴを隠す */
  .site-logo img.logo-sp{ display: none !important; }
}

/* ===== パンくずをヒーローの下に（PC/SP共通） ===== */
.breadcrumb{
  position: relative !important;  /* 固定を解除 */
  top: auto !important;
  left: auto !important;
  width: 100%;
  background: #1a1a1a;
  padding: 8px 12px;
  margin: 8px 0 0;               /* ヒーローとの間を少しだけ空ける */
  z-index: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.breadcrumb a{ color:#ffcc66; text-decoration:none; }

/* ヒーロー直下→パンくず→本文 の余白チューニング */
.hero + .breadcrumb + main{ margin-top: 16px !important; }

/* SPは少しだけコンパクトに */
@media (max-width:768px){
  .breadcrumb{ padding: 6px 10px; margin-top: 6px; }
  .hero + .breadcrumb + main{ margin-top: 12px !important; }
}
/* ===============================
   FINAL OVERRIDES（PC/SPまとめ）
   - PC：ナビとヒーローを密着 or 極小ギャップ
   - SP：ロゴの直下にヒーロー（ナビはハンバーガー展開時のみ見える）
   =============================== */

/* PC（769px～）：ナビ↔ヒーローをくっつける */
@media (min-width: 769px) {
  :root{
    --pcHeaderH: 112px; /* ← 現在のPCヘッダー高さ（ロゴ周り） */
    --pcNavH:    40px;  /* ← PCナビ高さの目安 */
    --gapNavHero: 0px;  /* ← 少し空けたければ 6px or 8px に */
  }
  .global-nav{ top: var(--pcHeaderH) !important; }
  .hero{ margin-top: calc(var(--pcHeaderH) + var(--pcNavH) + var(--gapNavHero)) !important; }
}

/* SP（～768px）：ロゴ直下にヒーローを配置（余白ほぼゼロ） */
@media (max-width: 768px) {
  :root{
    --spHeaderH: 130px; /* ← SPのヘッダー高さ。違う場合はここだけ調整 */
    --gapSp:      4px;  /* ← ロゴとヒーローの微小ギャップ。0～8pxで好み調整 */
  }

  /* ナビはロゴ下に固定。閉じている時は高さを作らず、開いた時だけ表示 */
  .global-nav{
    top: var(--spHeaderH) !important;
    padding: 0 !important;              /* ← 余白をゼロにしてスペースを作らない */
  }
  .global-nav ul{ display: none; margin: 0; padding: 0; }
  .global-nav.open ul{ display: block; }
  .global-nav.open{ padding: 8px 0 !important; } /* ← 開いた時だけ余白 */

  /* ヒーローをロゴ直下へ */
  .hero{ margin-top: calc(var(--spHeaderH) + var(--gapSp)) !important; }
}
/* =========================
   Sitewide link color system
   ========================= */
:root{
  --link-color: #fff;      /* 既定：白 */
  --link-hover: #ffcc66;   /* ホバー：サイトのアクセント色 */
  --link-visited: #fff;    /* 既読も白に統一（見えにくい紫を禁止） */
  --focus-ring: #ffcc66;   /* キーボード操作用フォーカス枠 */
}

/* 通常のリンク（本文・見出しなど） */
a,
a:visited{
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover{ color: var(--link-hover); }
a:active{ color: var(--link-hover); }
a:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ナビ／パンくずのリンク（下線は消したい場合） */
.global-nav a,
.breadcrumb a{
  color: #fff;
  text-decoration: none;
}
.global-nav a:hover,
.breadcrumb a:hover{
  color: #ffcc66;
}

/* 重要：黄色背景のボタンは黒文字に固定（コントラスト確保） */
.amazon-link,
.cta-button,
.entry-btn,
.unl-pill{
  color: #000 !important;        /* 白文字はNG。黒が読みやすい（対比 14:1 以上） */
  text-decoration: none !important;
}

/* MP3ボタン（ダーク背景）は白文字でOK */
.amazon-link.mp3-link{
  background: #444;
  border-color: #444;
  color: #fff !important;
}

/* ボタンの既読色も統一（紫化を防止） */
.amazon-link:visited,
.cta-button:visited,
.entry-btn:visited,
.unl-pill:visited{
  color: #000 !important;
}
.amazon-link.mp3-link:visited{
  color: #fff !important;
}
/* === Jazz-Pops 追加: カード/CTA/比較表（2025-08-20） === */
.cards,
.cards--2,
.cards--3,
.cards3{ display:grid; gap:16px; }

.cards--2{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards--3, .cards3{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card, .pcard, .product-card{
  border:1px solid #e5e5e5; border-radius:16px; padding:14px;
  background:#0f0f11; color:#eee; box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.card__link{ display:block; color:inherit; text-decoration:none; }
.card__link:hover{ text-decoration:underline; }

.product-card img{ width:100%; height:180px; object-fit:contain; background:#151518; border-radius:12px; }

.bul, .bullets{ margin:8px 0 12px; padding-left:18px; }
.bul li, .bullets li{ margin:4px 0; }

.btn, .btn-primary, .btn-secondary{
  display:inline-block; padding:10px 14px; border-radius:12px; text-decoration:none; cursor:pointer;
  border:1px solid #fff; color:#fff;
}
.btn-primary{ font-weight:600; }

.cta-box, .cta-strip{
  margin:24px 0; padding:18px; border-radius:16px; background:#141416; color:#eee; border:1px solid #2a2a2d;
}

.table-scroll{ overflow-x:auto; }
.compare{ width:100%; border-collapse:collapse; font-size:14px; }
.compare th, .compare td{ border:1px solid #2b2b30; padding:8px; }
.compare thead th{ background:#151518; }

.hero--small .sublead{ opacity:.85; }
.disclosure, .disclaimer{ font-size:12px; opacity:.8; }

.breadcrumb a{ color:#bbb; text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

.home-feature{ margin-top:16px; }
/* === CTAボタン（recommend用 最優先オーバーライド）=== */
:root {
  --cta: #ff9900;         /* Amazonのコーポレートオレンジ寄り */
  --cta-hover: #e07f00;
}

/* 1) 推奨：CTAをまと めて包む .reco-ctas コンテナ内のリンクをボタン化 */
.reco-ctas a,
a.btn-cta,
a.btn-amazon,
a.btn-cd {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--cta);
  border: 1px solid var(--cta);
  color: #fff !important;           /* グレー背景上でも白文字を強制 */
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  line-height: 1.2;
}
.reco-ctas a + a,
a.btn-cta + a.btn-cta,
a.btn-amazon + a.btn-cd,
a.btn-cd + a.btn-amazon { margin-left: 10px; }

.reco-ctas a:hover,
a.btn-cta:hover,
a.btn-amazon:hover,
a.btn-cd:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  filter: saturate(110%);
}

.reco-ctas a:focus-visible,
a.btn-cta:focus-visible,
a.btn-amazon:focus-visible,
a.btn-cd:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 2) すぐ直したい方向け（HTMLを触らず）：
   recommend.html 内の Amazon/Tower 等の外部購入リンクだけを自動でボタン化 */
.recommend-page a[href*="amazon.co.jp"],
.recommend-page a[href*="amzn.to"],
.recommend-page a[href*="tower.jp"],
.recommend-page a[href*="hmv.co.jp"],
.recommend-page a[href*="rakuten.co.jp"] {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--cta);
  border: 1px solid var(--cta);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.recommend-page a[href*="amazon.co.jp"]:hover,
.recommend-page a[href*="amzn.to"]:hover,
.recommend-page a[href*="tower.jp"]:hover,
.recommend-page a[href*="hmv.co.jp"]:hover,
.recommend-page a[href*="rakuten.co.jp"]:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
}
/* === recommend CTA fix (2025-08-20) ======================= */
/* おすすめページ限定で、ボタンをオレンジ地＋白文字に統一 */
.recommend-page .cta-row .amazon-link:not(.mp3-link),
.recommend-page .entry-btn,
.recommend-page .unl-pill {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px;
  background: #ff9900;
  border: 1px solid #ff9900;
  color: #fff !important;           /* 既存の黒!importantを打ち消し */
  text-decoration: none !important;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  line-height: 1.2;
}
.recommend-page .cta-row .amazon-link:not(.mp3-link):hover,
.recommend-page .entry-btn:hover,
.recommend-page .unl-pill:hover {
  background: #e07f00;
  border-color: #e07f00;
  filter: saturate(110%);
}
.recommend-page .cta-row .amazon-link:not(.mp3-link):visited,
.recommend-page .entry-btn:visited,
.recommend-page .unl-pill:visited {
  color: #fff !important;           /* visitedの黒!importantも上書き */
}
/* === headphones-page CTA fix (2025-08-20) =============== */
/* このページ内の Amazon/Tower 等の購入リンクだけボタン化 */
.headphones-page a[href*="amazon.co.jp"],
.headphones-page a[href*="amzn.to"],
.headphones-page a.amazon-link {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px;
  background: #ff9900;
  border: 1px solid #ff9900;
  color: #fff !important;           /* 既存の黒!important を上書き */
  text-decoration: none !important;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  line-height: 1.2;
}
.headphones-page a[href*="amazon.co.jp"]:hover,
.headphones-page a[href*="amzn.to"]:hover,
.headphones-page a.amazon-link:hover {
  background: #e07f00;
  border-color: #e07f00;
}
.headphones-page a[href*="amazon.co.jp"]:visited,
.headphones-page a[href*="amzn.to"]:visited,
.headphones-page a.amazon-link:visited {
  color: #fff !important;           /* visitedの黒!importantも上書き */
}
/* home: 一覧リンクを控えめに右寄せ */
.all-articles-link { margin: 12px 0 0; text-align: right; }
.all-articles-link a {
  display: inline-block; padding: 6px 10px; border: 1px solid #ddd;
  border-radius: 999px; text-decoration: none; font-weight: 600;
}
@media (max-width: 640px){
  .all-articles-link { text-align: left; }
}
/* === monetization & add-ons for headphones page (2025-08-21) === */
.shopbox { border:1px solid #ddd; border-radius:12px; padding:12px; margin:12px 0; }
.shop-title { font-weight:800; margin-bottom:6px; }
.shop-links { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.btn-ec {
  display:inline-block; padding:10px 14px; border-radius:12px;
  background:#ff9900; border:1px solid #ff9900; color:#fff !important;
  text-decoration:none !important; font-weight:700; line-height:1.2;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.btn-ec:hover { background:#e07f00; border-color:#e07f00; }
.shop-note { display:block; opacity:.8; font-size:12px; }

/* 読み物ブロックの軽い整形 */
#genres ul{ margin-left:1em; }
#care-eq h3{ margin:.6em 0 .2em; }
.next-actions { border:1px dashed #ddd; border-radius:12px; padding:12px; margin:16px 0; }
.next-actions h2 { margin-top:0; }

/* === night-rental guide add-ons (2025-08-25) === */
#faq details { margin: 8px 0; }
#faq summary { cursor: pointer; font-weight: 700; }
#home-check ol, #store-howto ol { margin-left: 1.2em; }

/* === articles index cards === */
.post-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:12px 0}
.post-card{border:1px solid #ddd;border-radius:12px;background:#fff}
.post-card a{display:block;padding:12px 12px 10px;text-decoration:none;color:inherit}
.post-title{margin:6px 0 4px;font-weight:800;font-size:1.05rem;line-height:1.35}
.post-excerpt{opacity:.9;margin:0 0 6px}
.post-meta{font-size:.85rem;opacity:.85;display:flex;gap:8px;align-items:center}
.post-tag{border:1px solid #ddd;border-radius:999px;padding:2px 8px}
.badge-new{display:inline-block;background:#ff3366;color:#fff;border-radius:999px;padding:2px 8px;font-size:.75rem;font-weight:700;margin-right:6px}

/* === articles index (cards in list) === */
.article-list{
  list-style:none; margin:12px 0; padding:0;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.article-item{ border:1px solid #ddd; border-radius:12px; background:#fff; }
.article-item a{ display:block; padding:12px; text-decoration:none; color:inherit; }
.article-item .date{ display:block; font-size:.85rem; opacity:.8; }
.article-item .title{ display:block; font-weight:800; margin:4px 0; line-height:1.35; }
.article-item .excerpt{ display:block; opacity:.9; }
.badge-new{
  display:inline-block; background:#ff3366; color:#fff; border-radius:999px;
  padding:2px 8px; font-size:.75rem; font-weight:700; margin-right:6px;
}
/* === fix: articles index cards text color & layout (2025-08-26) === */
.article-list{
  list-style:none; margin:12px 0; padding:0;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.article-item{ border:1px solid #ddd; border-radius:12px; background:#fff; color:#111 !important; }
.article-item a{ display:block; padding:12px; text-decoration:none; color:#111 !important; }
.article-item .date{ display:block; font-size:.85rem; opacity:.8; color:#111 !important; }
.article-item .title{ display:block; font-weight:800; margin:4px 0; line-height:1.35; color:#111 !important; }
.article-item .excerpt{ display:block; opacity:.9; color:#111 !important; }
.badge-new{
  display:inline-block; background:#ff3366; color:#fff; border-radius:999px;
  padding:2px 8px; font-size:.75rem; font-weight:700; margin-right:6px;
}
/* rock-to-jazz guide addons */
#qa-more-rock details{margin:8px 0}
/* ========= Link color scoping (global hardening) ========= */
/* まず本文のデフォルト（黒地エリア） */
main a:link,
main .theory-section a:link,
main .lesson-card a:link { color:#0a58ca; text-decoration: underline; }
main a:visited { color:#0a58ca; }
main a:hover { text-decoration: none; }

/* ダークエリア（白リンクのままにしたい場所だけ限定） */
.hero a,
.global-nav a,
footer a,
.site-logo a { color:#fff; text-decoration: none; }
.hero a:hover,
.global-nav a:hover,
footer a:hover { opacity:.9; }

/* 明るいボックス内で白指定が漏れても確実に上書き */
.definition-box a:link,
.definition-box a:visited,
.related-inline a:link,
.related-inline a:visited { color:#0a58ca !important; text-decoration: underline; }
.definition-box a:hover,
.related-inline a:hover { text-decoration: none; }

/* 明るいボックスの本文色も明示（保険） */
.definition-box,
.related-inline { color:#111; }

/* 必要なら使えるユーティリティ（任意） */
.link-dark { color:#0a58ca !important; text-decoration: underline !important; }
/* === headphones-night-rental: quick-compare を読みやすく === */
#quick-compare { background:#fff; color:#111; border-radius:10px; }
#quick-compare table { width:100%; border-collapse:collapse; background:#fff !important; color:#111 !important; }
#quick-compare th,
#quick-compare td { background:#fff !important; color:#111 !important; border:1px solid #ddd; padding:6px; }
#quick-compare a:link,
#quick-compare a:visited { color:#0a58ca !important; text-decoration: underline; }
#quick-compare a:hover { text-decoration:none; }
/* === quick-compare：背景は既存のまま、文字だけ白に === */
#quick-compare th,
#quick-compare td {
  color:#fff !important;
  background: transparent !important; /* 既存のダーク背景を活かす */
  border-color: rgba(255,255,255,.25) !important; /* 枠線だけ薄い白に */
}

/* リンクは見やすいアクセント色に */
#quick-compare a:link,
#quick-compare a:visited {
  color:#ffcc66 !important;
  text-decoration: underline;
}
#quick-compare a:hover { text-decoration: none; }
/* === FIX: quick-compare は背景そのまま、文字だけ白に統一 === */
#quick-compare { background: transparent !important; color:#fff !important; }
#quick-compare table { background: transparent !important; color:#fff !important; }
#quick-compare th,
#quick-compare td { background: transparent !important; color:#fff !important;
  border-color: rgba(255,255,255,.25) !important; }

/* リンクは見やすい強調色に */
#quick-compare a:link,
#quick-compare a:visited { color:#ffcc66 !important; text-decoration: underline; }
#quick-compare a:hover { text-decoration: none; }