/* ============================================================
   UTAGE図鑑 - カスタムCSS（全面改善版）
   ============================================================ */

/* ---------- ヘッダー ---------- */
#masthead,.site-header,.ast-primary-header-bar{
  background:#0f1628 !important;
}

/* サイト名を表示・スタイリング */
.ast-site-identity{
  display:flex !important;
  align-items:center !important;
}
.ast-site-identity .site-title a{
  color:#c9a84c !important;
  font-size:20px !important;
  font-weight:700 !important;
  letter-spacing:2px !important;
  text-decoration:none !important;
  line-height:1 !important;
}
.ast-site-identity .ast-site-title-wrap .site-title{
  margin:0 !important;
}
.site-description{
  color:rgba(255,255,255,.55) !important;
  font-size:11px !important;
  letter-spacing:1px !important;
  margin:0 !important;
}

/* ナビメニュー */
.main-header-menu .menu-item>.menu-link,
.main-header-menu .menu-item>a{
  color:#fff !important;
  font-size:13px !important;
  letter-spacing:1px !important;
}
.main-header-menu .current-menu-item>.menu-link,
.main-header-menu .menu-item:hover>.menu-link{
  color:#c9a84c !important;
}

/* モバイルハンバーガー */
.ast-mobile-menu-trigger svg,
.ast-mobile-menu-trigger span{
  fill:#fff !important;
  background:#fff !important;
}
.ast-mobile-menu-trigger{color:#fff !important;}

/* ---------- トップページ（UTAGE図鑑ページ） ---------- */
/* 2026-08-29修正: 元は無限定セレクタでサイト全体のentry-header/entry-titleを消しており、
   記事ページのH1まで消える不具合を起こしていた。フロントページのみに.homeで限定する */
.home #primary{margin-top:0 !important;}
.home .ast-page-header-wrap,.home .entry-header,.home .ast-above-post-title{display:none !important;}
.home .ast-single-post-order,.home .entry-content{padding-top:0 !important;}
.home .entry-title,.home .ast-page-header-row,.home .ast-container .ast-page-header{display:none !important;}

/* ---------- 記事ページ タイポグラフィ ---------- */
.single .entry-content,
.single .entry-content p{
  font-size:17px !important;
  line-height:1.95 !important;
  color:#1a1a2e !important;
}
.single .entry-content,.page .entry-content{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* 見出し h2 */
.entry-content h2{
  border-left:4px solid #c9a84c !important;
  padding:10px 16px !important;
  background:#f4f4f0 !important;
  font-size:20px !important;
  font-weight:700 !important;
  margin:44px 0 20px !important;
  color:#0f1628 !important;
  line-height:1.5 !important;
}

/* 見出し h3 */
.entry-content h3{
  border-bottom:2px solid #c9a84c !important;
  padding-bottom:8px !important;
  margin:36px 0 16px !important;
  font-size:18px !important;
  font-weight:700 !important;
  color:#1a1f3c !important;
}

/* 見出し h4 */
.entry-content h4{
  margin:28px 0 12px !important;
  font-size:16px !important;
  font-weight:700 !important;
  color:#1a1f3c !important;
}

/* 記事内リンク */
.entry-content a{
  color:#c9a84c !important;
  text-decoration:underline !important;
}

/* 画像 */
.entry-content img{
  border-radius:6px !important;
  max-width:100% !important;
  height:auto !important;
}

/* ---------- フッター ---------- */
.site-footer,#colophon,.ast-small-footer{
  background:#0f1628 !important;
  border-top:1px solid rgba(201,168,76,.4) !important;
}
.ast-small-footer{
  color:rgba(255,255,255,.6) !important;
  font-size:13px !important;
  padding:20px 24px !important;
}
.ast-small-footer a{
  color:#c9a84c !important;
  text-decoration:none !important;
}
.ast-small-footer a:hover{
  text-decoration:underline !important;
}
.footer-widget-area{
  background:#111827 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

/* ---------- パンくずリスト ---------- */
.ast-breadcrumbs-wrapper{
  background:#f4f4f0 !important;
  padding:8px 24px !important;
  font-size:12px !important;
  color:#888 !important;
}
.ast-breadcrumbs-wrapper a{color:#c9a84c !important;}

/* ---------- レスポンシブ ---------- */
@media(max-width:768px){
  .single .entry-content p{font-size:15px !important;line-height:1.85 !important;}
  .entry-content h2{font-size:17px !important;}
  .entry-content h3{font-size:16px !important;}
}

/* ---------- フッター調整 ---------- */
/* "Powered by Astra"を完全に非表示 */
.ast-footer-copyright .ast-builder-html-element p{
  font-size:0 !important;
  line-height:0 !important;
}
.ast-footer-copyright .ast-builder-html-element p::after{
  content:'Copyright © 2026 UTAGE図鑑';
  font-size:13px !important;
  line-height:1.5 !important;
  color:rgba(255,255,255,.6);
}
.ast-footer-copyright .ast-builder-html-element a[href*="astra"]{ display:none !important; }

/* フッターナビ（フッターメニュー） */
.footer-nav-wrap .ast-footer-menu-items{
  display:flex !important;
  gap:20px !important;
  justify-content:center !important;
  list-style:none !important;
  padding:0 !important;
}
.footer-nav-wrap .menu-link{
  color:rgba(255,255,255,.6) !important;
  font-size:12px !important;
  text-decoration:none !important;
}
.footer-nav-wrap .menu-link:hover{
  color:#c9a84c !important;
}

/* ヘッダーのサイトタイトル - カスタマイザー設定が非表示の場合のフォールバック */
.ast-site-identity .site-title{
  font-size:20px !important;
}

/* 2026-08-29 会長指示: サイト上部のアフィリエイト開示バナー(#hk-ad-notice)をサイト全体で非表示にする。
   広告・アフィリエイトの方針はプライバシーポリシーに明記し、報酬が発生するリンクを含む記事には
   記事単位で「広告を含む」旨を表示する運用に変更したため。 */
#hk-ad-notice { display: none !important; }


/* 2026-08-25: 本文・見出しフォントを游ゴシックに変更(游ゴシックはGoogle Fontsになく日本語OS標準搭載フォントのため、CSSで直接指定) */
body, h1, h2, h3, h4, h5, h6, p, a, li, span, div, button {
  font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif !important;
}



/* 2026-08-29 会長指示: ヘッダーのロゴ(サイトタイトル)を非表示にする */
.site-header [data-section="title_tagline"]{display:none!important}

/* ---------- 記事内 関連記事カード(あわせて読みたい/関連記事、2026-08-29追加) ---------- */
/* トップページのPickupカード(.hk-card等)と同系統のデザイン。.hk-wrapはfull-bleed(画面幅いっぱい)前提の
   CSSを含むため記事本文内では使えず、記事幅(760px)に収まる別クラスとして用意した */
.entry-content .rel-articles{ margin: 32px 0; }
.entry-content .rel-articles-label{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.1em;
  color:#c9a227 !important; margin:0 0 14px !important;
}
.entry-content .rel-articles-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
}
@media(min-width:600px){
  .entry-content .rel-articles-grid{ grid-template-columns:repeat(2,1fr); }
}
.entry-content .rel-card{
  position:relative; display:block;
  border:1px solid #e7e2d6; background:#fff;
}
.entry-content .rel-card .rel-thumb{
  position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:#faf8f4;
}
.entry-content .rel-card .rel-thumb img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s;
  border-radius:0 !important; margin:0 !important;
}
.entry-content .rel-card:hover .rel-thumb img{ transform:scale(1.04); }
.entry-content .rel-card .rel-badge{
  position:absolute; left:0; bottom:0; background:#1a1a1a; color:#fff !important;
  font-size:11px; font-weight:700; letter-spacing:.06em; padding:5px 10px;
}
.entry-content .rel-card .rel-card-title{
  font-size:15px !important; font-weight:700 !important; line-height:1.5 !important;
  margin:12px 12px 6px !important;
}
.entry-content .rel-card .rel-card-title a{
  color:#1a1a1a !important; text-decoration:none !important;
}
.entry-content .rel-card .rel-card-title a::after{
  content:""; position:absolute; inset:0;
}
.entry-content .rel-card:hover .rel-card-title a{ color:#c9a227 !important; }
.entry-content .rel-card .rel-card-date{
  font-size:11px !important; color:#6b6b6b !important; margin:0 12px 12px !important;
}

/* ---------- 記事ページの著者名・日付表示、前後の投稿ナビゲーションを非表示(2026-08-29会長指示) ---------- */
/* 著者名・日付は不要、末尾の「次へ」投稿ナビゲーションは関連記事カードと機能が重複するため非表示にする。
   .single-nijudai_hokagoで20代の放課後CPTのみに限定し、UTAGE図鑑側のデザインには影響させない */
.single-nijudai_hokago .entry-meta{ display:none !important; }
.single-nijudai_hokago .post-navigation{ display:none !important; }

/* ---------- 記事冒頭のアイキャッチ画像(2026-08-29追加) ---------- */
.entry-content .rel-hero{ margin: 0 0 28px; }
.entry-content .rel-hero img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  display:block; border-radius:6px;
}

/* ---------- アフィリエイト商品カード(画像付き、2026-08-29追加) ---------- */
/* 会長指示: アフィリエイトリンクはテキストのみでなく商品画像付きで出すとクリック率が高いため、
   関連記事カード(.rel-card)と同系統だがPR表記付きの専用デザインを用意した */
.entry-content .aff-products{ margin: 24px 0; border: 1px solid #e5e0d5; background: #fafaf7; padding: 20px 20px 24px; }
.entry-content .aff-products-label{
  display:block; font-size:15px; font-weight:700; color:#1a1a1a !important;
  margin:0 0 16px !important; padding-bottom:8px; border-bottom:1px solid #e5e0d5;
}
.entry-content .aff-products-grid{
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media(min-width:600px){
  .entry-content .aff-products-grid{ grid-template-columns:repeat(3,1fr); }
}
.entry-content .aff-card{
  position:relative; display:block; background:#fff; border:1px solid #e7e2d6;
}
.entry-content .aff-card .aff-thumb{
  position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.entry-content .aff-card .aff-thumb img{
  width:100%; height:100%; object-fit:contain; display:block; padding:10px; box-sizing:border-box;
  margin:0 !important; border-radius:0 !important;
}
.entry-content .aff-card .aff-pr{
  position:absolute; top:6px; left:6px; background:#1a1a1a; color:#fff !important;
  font-size:10px; font-weight:700; padding:2px 6px; letter-spacing:.04em; text-decoration:none !important;
}
.entry-content .aff-card .aff-card-title{
  font-size:13px !important; font-weight:700 !important; line-height:1.5 !important;
  margin:10px 10px 4px !important;
}
.entry-content .aff-card .aff-card-title a{
  color:#1a1a1a !important; text-decoration:none !important;
}
.entry-content .aff-card .aff-card-title a::after{
  content:""; position:absolute; inset:0;
}
.entry-content .aff-card:hover .aff-card-title a{ color:#c9a227 !important; }
.entry-content .aff-card .aff-card-price{
  font-size:14px !important; font-weight:700 !important; color:#b3261e !important;
  margin:0 10px 4px !important;
}
.entry-content .aff-card .aff-card-desc{
  font-size:11px !important; color:#6b6b6b !important; margin:0 10px 12px !important; line-height:1.5 !important;
}

/* ---------- ASP提供バナー広告(A8.net等)用ラッパー(2026-08-29追加) ---------- */
.entry-content .aff-products-grid.aff-banner-grid{ grid-template-columns:1fr; }
@media(min-width:600px){
  .entry-content .aff-products-grid.aff-banner-grid{ grid-template-columns:repeat(2,1fr); }
}
.entry-content .aff-banner{
  background:#fff; border:1px solid #e7e2d6; padding:14px; text-align:center;
}
.entry-content .aff-banner img{
  max-width:100%; height:auto; margin:0 auto !important; border-radius:0 !important; display:inline-block;
}
.entry-content .aff-banner .aff-card-desc{
  font-size:12px !important; color:#6b6b6b !important; margin:10px 0 0 !important; line-height:1.6 !important; text-align:left;
}

/* 2026-08-29 会長指摘: ヘッダー「カテゴリー」のドロップダウンが白背景＋白文字で読めなかったため、
   ヘッダーと同じ濃紺の背景にして文字を見えるようにする */
.site-header .sub-menu, .site-header ul.children,
.ast-desktop .main-header-menu .sub-menu { background-color:#0f1628 !important; border-color:rgba(255,255,255,.12) !important; }
.site-header .sub-menu a, .site-header ul.children a { color:#ffffff !important; }
.site-header .sub-menu a:hover, .site-header .sub-menu a:focus { color:#c9a84c !important; background-color:rgba(255,255,255,.07) !important; }

/* 2026-08-29修正(再修正): ヘッダー「カテゴリー」サブメニューの文字色が背景色と衝突し見えなくなっていた問題。
   実際に開いた状態で計測すると、サブメニューの背景は紺(rgb(15,22,40))で、
   一度目の修正で入れた濃紺文字(#1a1a2e)もほぼ同化して見えなかった(現物確認して発覚)。
   紺背景に対してコントラストの取れる白文字に修正する。 */
.main-header-menu .sub-menu .menu-item>.menu-link,
.main-header-menu .sub-menu .menu-item>a{
  color:#fff !important;
}
.main-header-menu .sub-menu .menu-item:hover>.menu-link,
.main-header-menu .sub-menu .menu-item:hover>a{
  color:#c9a84c !important;
}