/*
Theme Name: Moppy Affiliate Trust
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: クレジットカード・FX/証券などの高単価アフィリエイトブログ向けオリジナルWordPressテーマ。比較表・ランキング表示、広告/PR表記の自動挿入、CTAボタン強調、内部リンク誘導を標準装備。
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moppy-affiliate-trust
Tags: blog, custom-colors, custom-menu, custom-logo, sticky-post, threaded-comments, translation-ready

このテーマはオリジナル設計です。子テーマを作らず直接編集して構いません。
*/

/* ===========================================================
   Design Tokens
   =========================================================== */
:root{
  /* Color */
  --color-navy-900:#0B1B30;   /* 最深部・footer等 */
  --color-navy-800:#13294B;   /* メインブランドカラー */
  --color-navy-700:#1E3A63;   /* hover等 */
  --color-navy-100:#E8EDF4;   /* 薄い背景・バッジ背景 */
  --color-amber-500:#E8A33D;  /* CTA・アクセント(唯一の強色) */
  --color-amber-600:#CC8623;  /* CTA hover */
  --color-paper:#F7F8FA;      /* ページ背景 */
  --color-white:#FFFFFF;
  --color-ink-900:#1A2233;    /* 本文テキスト */
  --color-ink-600:#4B5568;    /* 補足テキスト */
  --color-line:#DCE2EA;       /* ボーダー */
  --color-success:#2E7D5B;
  --color-pr-bg:#FFF6E8;
  --color-pr-border:#E8A33D;

  /* Type */
  --font-display:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --font-body:"Noto Sans JP","Hiragino Sans",sans-serif;
  --font-data:"Roboto Mono",monospace;

  /* Layout */
  --container-w:1080px;
  --radius-s:6px;
  --radius-m:12px;
  --radius-l:20px;
  --shadow-card:0 2px 10px rgba(11,27,48,0.07);
  --shadow-cta:0 6px 16px rgba(232,163,61,0.35);
}

/* ===========================================================
   Base
   =========================================================== */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--color-paper);
  color:var(--color-ink-900);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--color-navy-700);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--color-navy-900);
  line-height:1.4;
  margin:1.6em 0 .7em;
  font-weight:700;
}
.container{max-width:var(--container-w);margin:0 auto;padding:0 20px;}

:focus-visible{
  outline:3px solid var(--color-amber-500);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* ===========================================================
   Header
   =========================================================== */
.site-header{
  background:var(--color-navy-800);
  color:var(--color-white);
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
}
.site-branding{display:flex;align-items:center;gap:10px;}
.site-title{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  color:var(--color-white);
  margin:0;
}
.site-title a{color:var(--color-white);}
.site-description{
  display:none;
}
.custom-logo-link img{max-height:40px;}

.main-navigation ul{
  display:flex;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}
.main-navigation a{
  color:var(--color-white);
  padding:10px 14px;
  border-radius:var(--radius-s);
  font-size:14px;
  font-weight:600;
}
.main-navigation a:hover{
  background:var(--color-navy-700);
  text-decoration:none;
}
.menu-toggle{
  display:none;
  background:none;
  border:1px solid rgba(255,255,255,.4);
  color:var(--color-white);
  padding:8px 10px;
  border-radius:var(--radius-s);
}

/* ===========================================================
   PR / 広告表記(自動挿入)
   =========================================================== */
.pr-disclosure{
  background:var(--color-pr-bg);
  border-left:4px solid var(--color-pr-border);
  border-radius:var(--radius-s);
  padding:14px 18px;
  font-size:13.5px;
  color:var(--color-ink-600);
  margin:0 0 28px;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.pr-disclosure .pr-badge{
  flex:0 0 auto;
  background:var(--color-amber-500);
  color:var(--color-navy-900);
  font-weight:700;
  font-size:11px;
  padding:2px 8px;
  border-radius:4px;
  letter-spacing:.04em;
}

/* ===========================================================
   ランキング表示(シグネチャー要素)
   =========================================================== */
.ranking-list{
  list-style:none;
  margin:32px 0;
  padding:0;
  counter-reset:rank;
}
.ranking-item{
  counter-increment:rank;
  position:relative;
  display:grid;
  grid-template-columns:64px 96px 1fr;
  gap:18px;
  align-items:center;
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
  padding:20px;
  margin-bottom:18px;
}
.ranking-item .rank-badge{
  width:48px;height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--color-navy-800),var(--color-navy-700));
  color:var(--color-white);
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.ranking-item:nth-child(1) .rank-badge{
  background:linear-gradient(135deg,#9C6B0E,var(--color-amber-500));
}
.ranking-item .rank-thumb img{
  border-radius:var(--radius-s);
  border:1px solid var(--color-line);
}
.ranking-item .rank-body h3{margin:0 0 6px;font-size:18px;}
.ranking-item .rank-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0;
  font-size:13px;
}
.ranking-item .rank-meta span{
  background:var(--color-navy-100);
  color:var(--color-navy-800);
  padding:3px 10px;
  border-radius:999px;
  font-weight:600;
}
.ranking-item .rank-desc{
  font-size:14.5px;
  color:var(--color-ink-600);
  margin:8px 0 14px;
}

@media (max-width:600px){
  .ranking-item{grid-template-columns:40px 1fr;}
  .ranking-item .rank-thumb{grid-column:2;order:-1;}
}

/* ===========================================================
   比較表
   =========================================================== */
.comparison-table-wrap{
  overflow-x:auto;
  margin:28px 0;
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
}
table.comparison-table{
  width:100%;
  border-collapse:collapse;
  background:var(--color-white);
  font-size:14.5px;
  min-width:560px;
}
table.comparison-table caption{
  text-align:left;
  font-weight:700;
  padding:12px 16px;
  background:var(--color-navy-800);
  color:var(--color-white);
  border-radius:var(--radius-m) var(--radius-m) 0 0;
  font-family:var(--font-display);
}
table.comparison-table th,
table.comparison-table td{
  padding:14px 16px;
  border-bottom:1px solid var(--color-line);
  text-align:left;
  vertical-align:middle;
}
table.comparison-table thead th{
  background:var(--color-navy-100);
  color:var(--color-navy-900);
  font-weight:700;
  white-space:nowrap;
}
table.comparison-table tbody tr:hover{background:var(--color-paper);}
table.comparison-table td.is-best{
  position:relative;
  font-weight:700;
  color:var(--color-navy-800);
}
table.comparison-table .best-tag{
  display:inline-block;
  background:var(--color-amber-500);
  color:var(--color-navy-900);
  font-size:11px;
  font-weight:700;
  padding:1px 6px;
  border-radius:4px;
  margin-left:6px;
}

/* WordPress標準テーブルブロックにも適用 */
.entry-content table:not(.comparison-table){
  width:100%;
  border-collapse:collapse;
  margin:24px 0;
}
.entry-content table:not(.comparison-table) th,
.entry-content table:not(.comparison-table) td{
  border:1px solid var(--color-line);
  padding:10px 12px;
}
.entry-content table:not(.comparison-table) th{
  background:var(--color-navy-100);
}

/* ===========================================================
   CTAボタン
   =========================================================== */
.cta-button-wrap{
  text-align:center;
  margin:32px 0;
}
.cta-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--color-amber-500);
  color:var(--color-navy-900) !important;
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  padding:16px 40px;
  border-radius:999px;
  box-shadow:var(--shadow-cta);
  text-decoration:none !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta-button:hover{
  background:var(--color-amber-600);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(232,163,61,.45);
}
.cta-button::after{content:"›";font-size:20px;line-height:1;}
.cta-button.is-small{font-size:14px;padding:10px 24px;}
.cta-caption{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:var(--color-ink-600);
}

/* 記事下固定CTAバー */
.sticky-cta-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  background:var(--color-navy-900);
  color:var(--color-white);
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  transform:translateY(100%);
  transition:transform .25s ease;
  box-shadow:0 -4px 14px rgba(0,0,0,.2);
}
.sticky-cta-bar.is-visible{transform:translateY(0);}
.sticky-cta-bar span{font-size:13px;font-weight:600;}
.sticky-cta-bar .cta-button{padding:10px 24px;font-size:14px;}

/* ===========================================================
   ヒーロー(トップページ)
   =========================================================== */
.hero{
  background:linear-gradient(135deg,var(--color-navy-900),var(--color-navy-800));
  color:var(--color-white);
  padding:56px 20px;
  text-align:center;
}
.hero-inner{max-width:680px;margin:0 auto;}
.hero h1{
  color:var(--color-white);
  font-size:30px;
  margin:0 0 12px;
}
.hero p{margin:0;font-size:15px;color:rgba(255,255,255,.85);}
.section-heading{
  font-size:22px;
  border-left:6px solid var(--color-amber-500);
  padding-left:12px;
  margin-top:0;
}

/* ===========================================================
   リード獲得ブロック(LINE/メール登録)
   =========================================================== */
.lead-block{
  background:var(--color-navy-100);
  border-radius:var(--radius-m);
  padding:22px 24px;
  margin:32px 0;
}
.lead-block-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  margin:0 0 8px;
  color:var(--color-navy-900);
}
.lead-block-desc{
  font-size:13.5px;
  color:var(--color-ink-600);
  margin:0 0 14px;
}
.lead-mail-form{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.lead-mail-form input[type="email"]{
  flex:1;
  min-width:180px;
  padding:11px 14px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-s);
  font-size:14px;
}
.lead-mail-form .cta-button{padding:11px 22px;}

/* ===========================================================
   記事鮮度バッジ
   =========================================================== */
.freshness-badge{
  background:var(--color-pr-bg);
  border:1px solid var(--color-pr-border);
  border-radius:var(--radius-s);
  color:var(--color-ink-600);
  font-size:13px;
  padding:10px 14px;
  margin:0 0 24px;
}

/* ===========================================================
   広告枠(AdSense等)
   =========================================================== */
.ad-slot{
  margin:28px 0;
  text-align:center;
  min-height:100px; /* レイアウトシフト(CLS)対策の予約スペース */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ad-slot-label{
  display:block;
  font-size:11px;
  color:var(--color-ink-600);
  letter-spacing:.05em;
  margin-bottom:6px;
}
.ad-slot ins,
.ad-slot iframe{max-width:100%;}

/* ===========================================================
   パンくずリスト
   =========================================================== */
.breadcrumb{margin:0 0 18px;}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
  font-size:12.5px;
  color:var(--color-ink-600);
}
.breadcrumb li{display:flex;align-items:center;gap:6px;}
.breadcrumb a{color:var(--color-ink-600);}
.breadcrumb .sep{color:var(--color-line);}
.breadcrumb [aria-current="page"]{color:var(--color-navy-800);font-weight:600;}

/* ===========================================================
   コンテンツレイアウト
   =========================================================== */
.site-content{padding:40px 0 80px;}
.content-layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:48px;
  align-items:start;
}
.entry-content{font-size:16px;}
.entry-content h2{
  border-left:6px solid var(--color-amber-500);
  padding-left:14px;
  font-size:24px;
}
.entry-content h3{font-size:19px;}
.entry-header{margin-bottom:24px;}
.entry-title{font-size:30px;margin-top:0;}
.entry-meta{
  font-size:13px;
  color:var(--color-ink-600);
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.entry-thumb{
  margin:0 0 28px;
  border-radius:var(--radius-m);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}

/* カード(記事一覧) */
.post-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:24px;
}
.post-card{
  background:var(--color-white);
  border-radius:var(--radius-m);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .15s ease;
}
.post-card:hover{transform:translateY(-3px);}
.post-card a{color:inherit;}
.post-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--color-navy-100);}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;}
.post-card .body{padding:16px;}
.post-card .cat{
  display:inline-block;
  background:var(--color-navy-100);
  color:var(--color-navy-800);
  font-size:11px;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  margin-bottom:8px;
}
.post-card h3{font-size:16px;margin:6px 0;}
.post-card .excerpt{font-size:13px;color:var(--color-ink-600);}

/* 内部リンク誘導ブロック */
.related-links{
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-radius:var(--radius-m);
  padding:20px 22px;
  margin:32px 0;
}
.related-links h4{
  margin:0 0 10px;
  font-size:15px;
  display:flex;align-items:center;gap:6px;
}
.related-links ul{margin:0;padding-left:1.2em;}
.related-links li{margin-bottom:6px;font-size:14.5px;}

/* ===========================================================
   サイドバー
   =========================================================== */
.widget{
  background:var(--color-white);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
  padding:20px;
  margin-bottom:24px;
}
.widget-title{
  font-family:var(--font-display);
  font-size:15px;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--color-navy-100);
}
.widget ul{list-style:none;margin:0;padding:0;}
.widget li{padding:8px 0;border-bottom:1px dashed var(--color-line);font-size:14px;}
.widget li:last-child{border-bottom:none;}

/* ===========================================================
   フッター
   =========================================================== */
.site-footer{
  background:var(--color-navy-900);
  color:rgba(255,255,255,.8);
  padding:48px 0 24px;
  font-size:13.5px;
  margin-top:40px;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:32px;
  margin-bottom:32px;
}
.site-footer h4{color:var(--color-white);font-size:14px;margin:0 0 12px;}
.site-footer a{color:rgba(255,255,255,.8);}
.site-footer a:hover{color:var(--color-amber-500);}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:8px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:18px;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.55);
}

/* ===========================================================
   レスポンシブ
   =========================================================== */

/* タブレット(900px以下):サイドバーを下に回し、余白を調整 */
@media (max-width:900px){
  .content-layout{grid-template-columns:1fr;gap:32px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .container{padding:0 18px;}
  .post-card-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
}

/* タブレット縦持ち〜大型スマホ(680px以下):ヘッダーをハンバーガー化 */
@media (max-width:680px){
  .main-navigation{
    position:absolute;
    top:68px;left:0;right:0;
    background:var(--color-navy-800);
    flex-direction:column;
    display:none;
    padding:8px 16px 16px;
    max-height:calc(100vh - 68px);
    overflow-y:auto;
  }
  .main-navigation.is-open{display:block;}
  .main-navigation ul{flex-direction:column;}
  .main-navigation li{width:100%;}
  .main-navigation a{display:block;}
  .menu-toggle{display:inline-flex;}
  .footer-grid{grid-template-columns:1fr;}
  .entry-title{font-size:24px;}
  .hero{padding:40px 16px;}
  .hero h1{font-size:24px;}
  .ranking-item{padding:16px;}
  .cta-button{font-size:15px;padding:14px 28px;width:100%;justify-content:center;}
  .sticky-cta-bar{
    flex-direction:column;
    gap:8px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .sticky-cta-bar .cta-button{width:auto;}
}

/* 小型スマホ(420px以下) */
@media (max-width:420px){
  .container{padding:0 14px;}
  .site-header .container{height:60px;}
  .entry-title{font-size:21px;}
  .ranking-item .rank-badge{width:38px;height:38px;font-size:15px;}
  table.comparison-table{font-size:13px;}
  table.comparison-table th,
  table.comparison-table td{padding:10px 10px;}
}

/* 印刷時にCTA・広告・サイドバーを非表示 */
@media print{
  .site-header,.site-footer,.sticky-cta-bar,.ad-slot,.widget-area,.cta-button-wrap{display:none !important;}
}