/*
Theme Name: Affiliate Wave Help
Theme URI: https://wave.catch-the-web.com
Author: Catch the Web
Description: Affiliate Wave アフィリエイター向けヘルプセンター専用テーマ。
Version: 1.0.0
*/

:root{
  --sky:#0ea5e9; --sky-dark:#0284c7;
  --slate-900:#0f172a; --slate-700:#334155; --slate-500:#64748b; --slate-400:#94a3b8;
  --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--slate-50); color:var(--slate-700);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.8; font-size:15px;
}
a{ color:var(--sky); text-decoration:none }
a:hover{ color:var(--sky-dark); text-decoration:underline }
img{ max-width:100% }

.aw-container{ max-width:1080px; margin:0 auto; padding:0 20px }

/* ===== ヘッダー ===== */
.aw-header{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--slate-200);
}
.aw-header-inner{ display:flex; align-items:center; justify-content:space-between; height:60px }
.aw-logo{ display:flex; align-items:center; gap:10px; color:var(--slate-900) }
.aw-logo:hover{ text-decoration:none }
.aw-logo img{ height:26px; width:auto; display:block }
.aw-logo span{ font-size:13px; font-weight:700; color:var(--slate-500); padding-left:10px; border-left:1px solid var(--slate-200) }
.aw-portal-link{ font-size:13px; font-weight:600; color:var(--slate-500) }
.aw-portal-link:hover{ color:var(--sky) }

/* ===== レイアウト ===== */
.aw-main-area{ padding:28px 20px 64px; max-width:1080px; margin:0 auto }
.aw-grid{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start }

/* ===== サイドバー（カテゴリーナビ） ===== */
.aw-sidebar{ position:sticky; top:84px }
.aw-cat-nav{ font-size:14px }
.aw-cat-group{ margin-bottom:18px }
.aw-cat-title{ display:block; font-weight:700; color:var(--slate-900); padding:4px 0; font-size:13px; letter-spacing:.02em }
.aw-cat-title.is-current{ color:var(--sky) }
.aw-cat-nav ul{ list-style:none; margin:4px 0 0; padding:0; border-left:2px solid var(--slate-200) }
.aw-cat-nav li{ margin:0 }
.aw-cat-nav li a{ display:block; padding:5px 0 5px 14px; color:var(--slate-500); font-size:13.5px; margin-left:-2px; border-left:2px solid transparent }
.aw-cat-nav li a:hover{ color:var(--sky); text-decoration:none }
.aw-cat-nav li.is-current a{ color:var(--sky); font-weight:600; border-left-color:var(--sky) }

/* ===== 記事 ===== */
.aw-article{ background:#fff; border:1px solid var(--slate-200); border-radius:14px; padding:32px 36px; box-shadow:0 1px 3px rgba(0,0,0,.03) }
.aw-article-wide{ max-width:760px; margin:0 auto }
.aw-breadcrumb{ font-size:12.5px; color:var(--slate-400); margin-bottom:14px }
.aw-breadcrumb a{ color:var(--slate-400) }
.aw-breadcrumb a:hover{ color:var(--sky) }
.aw-article h1{ font-size:26px; line-height:1.4; color:var(--slate-900); margin:0 0 22px; font-weight:800 }

/* 本文タイポグラフィ */
.aw-prose h2{ font-size:19px; font-weight:700; color:var(--slate-900); margin:30px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--slate-100) }
.aw-prose h3{ font-size:16px; font-weight:700; color:var(--slate-900); margin:22px 0 8px }
.aw-prose p{ margin:0 0 16px }
.aw-prose ul,.aw-prose ol{ margin:0 0 16px; padding-left:24px }
.aw-prose li{ margin:4px 0 }
.aw-prose a{ text-decoration:underline }
.aw-prose strong{ color:var(--slate-900) }
.aw-prose hr{ border:0; border-top:1px solid var(--slate-200); margin:24px 0 }
.aw-prose table{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14px }
.aw-prose th,.aw-prose td{ border:1px solid var(--slate-200); padding:8px 10px; text-align:left }
.aw-prose th{ background:var(--slate-50) }
.aw-prose img{ border-radius:8px; border:1px solid var(--slate-200); margin:8px 0 }

/* 記事一覧（カテゴリーアーカイブ） */
.aw-article-list{ list-style:none; margin:8px 0 0; padding:0 }
.aw-article-list li{ border-bottom:1px solid var(--slate-100) }
.aw-article-list li a{ display:block; padding:14px 4px; color:var(--slate-700); font-weight:600 }
.aw-article-list li a:hover{ color:var(--sky); text-decoration:none }

/* ===== フロントページ ===== */
.aw-hero{ text-align:center; padding:18px 0 30px }
.aw-hero h1{ font-size:30px; font-weight:800; color:var(--slate-900); margin:0 0 8px }
.aw-hero p{ color:var(--slate-500); margin:0 }
.aw-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px }
.aw-card{ background:#fff; border:1px solid var(--slate-200); border-radius:14px; padding:22px 24px; box-shadow:0 1px 3px rgba(0,0,0,.03) }
.aw-card h2{ margin:0 0 12px; font-size:17px; font-weight:700 }
.aw-card h2 a{ color:var(--slate-900) }
.aw-card h2 a:hover{ color:var(--sky); text-decoration:none }
.aw-card ul{ list-style:none; margin:0; padding:0 }
.aw-card li{ margin:0 }
.aw-card li a{ display:block; padding:6px 0; color:var(--slate-500); font-size:14px; border-top:1px solid var(--slate-100) }
.aw-card li a:hover{ color:var(--sky); text-decoration:none }

/* ===== フッター ===== */
.aw-footer{ border-top:1px solid var(--slate-200); background:#fff }
.aw-footer .aw-container{ display:flex; align-items:center; justify-content:space-between; height:60px; font-size:13px; color:var(--slate-400) }

/* ===== レスポンシブ ===== */
@media(max-width:820px){
  .aw-grid{ grid-template-columns:1fr; gap:18px }
  .aw-sidebar{ position:static; order:2; background:#fff; border:1px solid var(--slate-200); border-radius:12px; padding:16px 18px }
  .aw-article{ padding:24px 20px }
  .aw-logo span{ display:none }
}