/*
Theme Name: GeneratePress Child
Theme URI: https://www.aicreativeautopilot.com
Description: GeneratePress 子テーマ（ACA OS™ 標準）
Author: AKIRA
Author URI: https://www.aicreativeautopilot.com
Template: generatepress
Version: 1.2.1
*/

/* =========================================================
   基本方針
   - すべてのデザイン調整はここに集約
   - ChatGPT生成CSSはこの下に追記
   ========================================================= */

/* =========================================================
   Site-wide tokens（全体で使う共通）
   ========================================================= */
:root{
  --site-maxw: 1160px;            /* サイト全体の最大幅（ヘッダー/フッター含む） */
  --content-maxw: 820px;          /* 本文（投稿/固定）幅 */
  --content-maxw-wide: 900px;     /* やや広めにしたい場合の予備 */

  --ui-surface: #f8f9fa;
  --ui-border: #e6e8eb;
  --ui-text: #2b2f33;
  --ui-muted: #5c6670;

  --ui-radius: 12px;
  --ui-shadow: 0 6px 18px rgba(0,0,0,.05);
}

/* ベース文字設定 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", sans-serif;
  line-height: 1.8;
  color: #343a40;
  background: #ffffff;
}

/* 見出しの静音化（主張しすぎない） */
h1, h2, h3, h4 {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* リンク */
a {
  color: #495057;
  text-decoration: underline;
}
a:hover {
  color: #212529;
}

/* 余白を広めに */
.entry-content > * {
  margin-bottom: 1.8rem;
}

/* =========================================================
   ✅ 1) タイトル下の余白調整（GeneratePress）
   - タイトル周りの「詰まり/間延び」を整える
   ========================================================= */
.single .entry-header,
.page .entry-header{
  margin-bottom: 18px;
}

.entry-title{
  margin-bottom: 10px !important;
  line-height: 1.25;
}

.single .inside-article .entry-content,
.page .inside-article .entry-content{
  margin-top: 18px;
}

/* パンくず等がある場合の余白（導入があるなら残す／なければ影響ほぼ無し） */
.entry-header .breadcrumbs{
  margin-top: 10px;
}

/* =========================================================
   ✅ 2) 本文幅（Container Width）の最適化（GeneratePress）
   - “読み物”としての本文幅を固定して読みやすく
   - サイドバーありでも本文が太くなり過ぎないよう制御
   ========================================================= */

/* サイト全体の最大幅（ヘッダー/フッター含む） */
.grid-container{
  max-width: var(--site-maxw);
}

/* 投稿/固定ページの本文（コンテンツ）の最大幅 */
.single .inside-article,
.page .inside-article{
  max-width: var(--content-maxw);
  margin-left: auto;
  margin-right: auto;
}

/* 2カラム（サイドバーあり）時：本文は“読み物幅”を優先 */
@media (min-width: 769px){
  .right-sidebar .content-area,
  .left-sidebar .content-area{
    max-width: none;
  }

  /* サイドバーありのときも記事内部を読みやすい幅へ */
  .right-sidebar .inside-article,
  .left-sidebar .inside-article{
    max-width: var(--content-maxw);
  }
}

/* モバイルは自然に全幅寄り（余白は確保） */
@media (max-width: 768px){
  .single .inside-article,
  .page .inside-article{
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* =========================================================
   Product Pages (商品ページ)
   Target HTML:
   <article class="product-page"> ... </article>
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --product-bg: #ffffff;
  --product-surface: #fafafa;
  --product-text: #2b2f33;
  --product-muted: #5c6670;
  --product-border: #e6e8eb;
  --product-accent: #495057;          /* calm gray */
  --product-accent-soft: rgba(73,80,87,.08);

  --product-radius: 8px;
  --product-shadow: 0 4px 12px rgba(0,0,0,.04);

  --product-font-sans: system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic", "Meiryo", sans-serif;

  --product-maxw: 880px;
}

/* ---------- Base Container ---------- */
.product-page{
  background: var(--product-bg);
  color: var(--product-text);
  font-family: var(--product-font-sans);
  line-height: 1.8;
  font-size: 16px;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  max-width: var(--product-maxw);
  margin: 0 auto;
  padding: clamp(18px, 3.5vw, 34px);
}

/* ---------- Headings ---------- */
.product-page h2{
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.35;
  margin: 1.5rem 0 1rem;
  font-weight: 500;
  color: var(--product-text);
}

.product-page h3{
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.4;
  margin: 1rem 0 0.5rem;
  font-weight: 600;
  color: var(--product-text);
}

/* ---------- Body text ---------- */
.product-page p{
  margin: 0 0 1rem;
  color: var(--product-text);
  line-height: 1.8;
}

.product-page p:last-child{
  margin-bottom: 0;
}

/* ---------- Lists ---------- */
.product-page ul{
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  line-height: 1.8;
}

.product-page li{
  margin: 0.5rem 0;
  color: var(--product-text);
}

/* ---------- Links ---------- */
.product-page a{
  color: var(--product-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: opacity .15s ease;
}

.product-page a:hover{
  opacity: .78;
}

/* ---------- Divs with backgrounds ---------- */
.product-page > div[style*="background"]{
  border-radius: var(--product-radius);
  box-shadow: var(--product-shadow);
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 640px){
  .product-page{
    font-size: 15.5px;
    padding: 16px;
  }
}

/* =========================================================
   Article Pages (投稿記事・ガイド記事)
   Target HTML:
   <article class="article-page"> ... </article>
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --article-bg: #ffffff;
  --article-surface: #f8f9fa;
  --article-text: #2b2f33;
  --article-text-muted: #5c6670;
  --article-border: #e6e8eb;
  --article-accent: #2f6fbe;          /* calm blue for links */
  --article-accent-soft: rgba(47,111,190,.08);

  --article-radius: 10px;
  --article-shadow: 0 2px 8px rgba(0,0,0,.03);

  --article-font-sans: system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic", "Meiryo", sans-serif;

  --article-maxw: 800px;
}

/* ---------- Base Container ---------- */
.article-page{
  background: var(--article-bg);
  color: var(--article-text);
  font-family: var(--article-font-sans);
  line-height: 1.9;
  font-size: 17px;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  max-width: var(--article-maxw);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
}

/* ---------- Headings ---------- */
.article-page h2{
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.4;
  margin: 2.5rem 0 1.2rem;
  font-weight: 600;
  color: var(--article-text);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--article-border);
}

.article-page h2:first-of-type{
  margin-top: 1.5rem;
}

.article-page h3{
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.45;
  margin: 2rem 0 1rem;
  font-weight: 600;
  color: var(--article-text);
}

.article-page h4{
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.5;
  margin: 1.5rem 0 0.8rem;
  font-weight: 600;
  color: var(--article-text-muted);
}

/* ---------- Body text ---------- */
.article-page p{
  margin: 0 0 1.5rem;
  color: var(--article-text);
  line-height: 1.9;
}

.article-page p:last-child{
  margin-bottom: 0;
}

/* ---------- Lists ---------- */
.article-page ul,
.article-page ol{
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
  line-height: 1.9;
}

.article-page li{
  margin: 0.8rem 0;
  color: var(--article-text);
}

.article-page li::marker{
  color: var(--article-accent);
}

/* ---------- Links ---------- */
.article-page a{
  color: var(--article-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .25em;
  transition: all .2s ease;
}

.article-page a:hover{
  color: #1e4d8b;
  text-decoration-thickness: 2px;
}

.article-page a:focus-visible{
  outline: 3px solid rgba(47,111,190,.25);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Blockquote ---------- */
.article-page blockquote{
  margin: 2rem 0;
  padding: 1.2rem 1.5rem;
  border-left: 4px solid var(--article-accent);
  background: var(--article-surface);
  border-radius: var(--article-radius);
  color: var(--article-text-muted);
  font-style: italic;
}

/* ---------- Code blocks ---------- */
.article-page code{
  background: var(--article-surface);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'Monaco', 'Menlo', monospace;
}

.article-page pre{
  background: var(--article-surface);
  padding: 1.2rem;
  border-radius: var(--article-radius);
  overflow-x: auto;
  margin: 1.5rem 0;
}

.article-page pre code{
  background: none;
  padding: 0;
}

/* ---------- Divs with backgrounds ---------- */
.article-page > div[style*="background"]{
  border-radius: var(--article-radius);
  box-shadow: var(--article-shadow);
}

/* ---------- Images ---------- */
.article-page img{
  max-width: 100%;
  height: auto;
  border-radius: var(--article-radius);
  margin: 1.5rem 0;
}

/* ---------- SVG decorations ---------- */
.article-page svg{
  margin: 2rem auto;
  display: block;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 640px){
  .article-page{
    font-size: 16px;
    line-height: 1.85;
    padding: 20px;
  }

  .article-page h2{
    margin: 2rem 0 1rem;
  }

  .article-page h3{
    margin: 1.5rem 0 0.8rem;
  }
}

/* ---------- Print-friendly ---------- */
@media print{
  .article-page{
    max-width: none;
    padding: 0;
    font-size: 11pt;
    line-height: 1.6;
    color: #000;
  }
  .article-page a{
    color: #000;
    text-decoration: underline;
  }
}

/* =========================================================
   Legal Pages (Tokushoho / Privacy Policy)
   Target HTML:
   <article class="legal-page"> ... </article>
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --legal-bg: #ffffff;
  --legal-surface: #fafafa;
  --legal-text: #2b2f33;
  --legal-muted: #5c6670;
  --legal-border: #e6e8eb;
  --legal-accent: #2f6fbe;
  --legal-accent-soft: rgba(47,111,190,.12);

  --legal-notice-bg: #fff1f1;
  --legal-notice-border: #f4bcbc;
  --legal-notice-text: #6b1f1f;

  --legal-radius: 14px;
  --legal-shadow: 0 8px 24px rgba(0,0,0,.06);

  --legal-font-sans: system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic", "Meiryo", sans-serif;

  --legal-maxw: 880px;
}

/* ---------- Base Container ---------- */
.legal-page{
  background: var(--legal-bg);
  color: var(--legal-text);
  font-family: var(--legal-font-sans);
  line-height: 1.75;
  font-size: 16px;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  max-width: var(--legal-maxw);
  margin: 0 auto;
  padding: clamp(18px, 3.5vw, 34px);
}

.legal-page > section{
  background: var(--legal-surface);
  border: 1px solid var(--legal-border);
  border-radius: var(--legal-radius);
  padding: clamp(16px, 3vw, 22px);
  box-shadow: var(--legal-shadow);
}

.legal-page > section + section{
  margin-top: 16px;
}

/* ---------- Headings ---------- */
.legal-page h1{
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  margin: 0 0 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

.legal-page h2{
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.35;
  margin: 6px 0 12px;
  font-weight: 700;
  color: var(--legal-text);

  padding: 8px 10px;
  border-left: 4px solid var(--legal-accent);
  border-bottom: 1px solid var(--legal-border);
  border-radius: 10px;
  background: linear-gradient(
    to right,
    var(--legal-accent-soft),
    rgba(255,255,255,0)
  );
}

/* ---------- Body text ---------- */
.legal-page p{
  margin: 0 0 12px;
  color: var(--legal-text);
}

.legal-page p:last-child{
  margin-bottom: 0;
}

.legal-page small,
.legal-page .muted{
  color: var(--legal-muted);
}

/* ---------- Lists ---------- */
.legal-page ul{
  margin: 0;
  padding-left: 1.25em;
}

.legal-page li{
  margin: 6px 0;
  color: var(--legal-text);
}

.legal-page li::marker{
  color: rgba(47,111,190,.65);
}

/* ---------- Links ---------- */
.legal-page a{
  color: var(--legal-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: opacity .15s ease;
}

.legal-page a:hover{
  opacity: .78;
}

.legal-page a:focus-visible{
  outline: 3px solid rgba(47,111,190,.25);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Important Notice ---------- */
.legal-page .notice-important{
  margin: 14px 0;
  padding: 14px 14px 14px 44px;
  border: 1px solid var(--legal-notice-border);
  border-left-width: 6px;
  border-radius: var(--legal-radius);
  background: var(--legal-notice-bg);
  color: var(--legal-notice-text);
  position: relative;
}

.legal-page .notice-important::before{
  content: "!";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--legal-notice-text);
  background: rgba(244,188,188,.55);
  border: 1px solid rgba(244,188,188,.9);
}

.legal-page section .notice-important{
  box-shadow: 0 10px 24px rgba(107,31,31,.06);
}

.legal-page section > *:first-child{ margin-top: 0; }
.legal-page section > *:last-child{ margin-bottom: 0; }

@media (max-width: 640px){
  .legal-page{
    font-size: 15.5px;
    line-height: 1.8;
    padding: 16px;
  }

  .legal-page > section{
    padding: 16px;
    border-radius: 12px;
  }

  .legal-page h2{
    padding: 8px 10px;
    border-radius: 10px;
  }

  .legal-page .notice-important{
    padding: 12px 12px 12px 40px;
  }
}

@media print{
  .legal-page{
    max-width: none;
    padding: 0;
    font-size: 12pt;
    color: #000;
  }
  .legal-page > section{
    box-shadow: none;
    border: 1px solid #ddd;
  }
  .legal-page a{
    color: #000;
    text-decoration: underline;
  }
}

/* =========================================================
   Contact Page (お問い合わせフォーム)
   Target HTML:
   <article class="contact-page"> ... </article>
   ========================================================= */

.contact-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.contact-page header {
  margin-bottom: 3rem;
  text-align: center;
}

.contact-page h1 {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: #495057;
}

.contact-page .lead {
  font-size: 1.1rem;
  color: #6c757d;
  line-height: 1.8;
}

.contact-page section {
  margin-bottom: 3rem;
}

.contact-page h2 {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #dee2e6;
  color: #495057;
}

.contact-info .notice {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 1rem;
  margin: 1.5rem 0;
  border-radius: 4px;
}

.contact-info .notice p {
  margin: 0;
  color: #856404;
}

/* Contact Form 7 スタイル */
.wpcf7-form {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 8px;
}

.wpcf7-form label {
  display: block;
  margin-bottom: 1.5rem;
  font-weight: 500;
  color: #495057;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 1rem;
  margin-top: 0.5rem;
  transition: border-color 0.2s;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: #495057;
}

.wpcf7-form textarea {
  min-height: 150px;
  resize: vertical;
}

.wpcf7-form input[type="submit"] {
  background: #495057;
  color: #fff;
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.wpcf7-form input[type="submit"]:hover {
  background: #343a40;
}

/* エラー・成功メッセージ */
.wpcf7-response-output {
  margin: 1.5rem 0 0 0 !important;
  padding: 1rem !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
}

.wpcf7-validation-errors {
  background: #f8d7da !important;
  border: 1px solid #f5c6cb !important;
  color: #721c24 !important;
}

.wpcf7-mail-sent-ok {
  background: #d4edda !important;
  border: 1px solid #c3e6cb !important;
  color: #155724 !important;
}

.wpcf7-not-valid-tip {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

.faq-link {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
}

.faq-link a {
  color: #495057;
  font-weight: 500;
  text-decoration: underline;
}

.contact-footer {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid #dee2e6;
  color: #6c757d;
  font-size: 0.9rem;
}

.contact-footer a {
  color: #495057;
  text-decoration: underline;
}

/* =========================================================
   Category / Archive Pages
   ========================================================= */

/* カテゴリー説明文 */
.archive .archive-description {
  max-width: 800px;
  margin: 0 auto 3rem auto;
  padding: 1.5rem;
  background: #f8f9fa;
  border-left: 4px solid #495057;
  line-height: 1.8;
  color: #6c757d;
}

/* カテゴリータイトル */
.archive .page-header h1 {
  font-size: 2rem;
  font-weight: 500;
  color: #495057;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* 記事一覧 */
.archive .site-main article {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #dee2e6;
}

.archive .site-main article:last-child {
  border-bottom: none;
}

/* 記事タイトル */
.archive .entry-title {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.archive .entry-title a {
  color: #495057;
  text-decoration: none;
  transition: color 0.2s;
}

.archive .entry-title a:hover {
  color: #212529;
}

/* 抜粋文 */
.archive .entry-summary {
  color: #6c757d;
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* 続きを読むボタン */
.archive .read-more-link {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: #495057;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.archive .read-more-link:hover {
  background: #343a40;
}

/* ページネーション */
.archive .pagination {
  margin: 3rem 0;
  text-align: center;
}

.archive .pagination .page-numbers {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  background: #f8f9fa;
  color: #495057;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}

.archive .pagination .page-numbers:hover {
  background: #dee2e6;
}

.archive .pagination .page-numbers.current {
  background: #495057;
  color: #fff;
}

/* =========================================================
   ✅ 投稿日時と著者名を非表示（サイト全体）
   ========================================================= */
.entry-meta {
  display: none !important;
}

.posted-on,
.byline {
  display: none !important;
}

/* =========================================================
   ✅ サイドバー：必要な機能を“静かに整えて”見栄えを統一（GeneratePress）
   - Popular Posts / Categories / Archives / Meta などのウィジェットが
     “ただそこにある”状態になるよう整形
   ========================================================= */

/* サイドバー全体の間隔 */
.sidebar .widget-area{
  padding-top: 8px;
}

/* ウィジェットカード化（静かな箱） */
.sidebar .widget{
  background: #fff;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  padding: 18px 16px;
  margin: 0 0 16px;
}

/* ウィジェットタイトル */
.sidebar .widget .widget-title{
  font-size: 14px;
  font-weight: 600;
  color: var(--ui-text);
  letter-spacing: .02em;
  margin: 0 0 12px;
}

/* ウィジェット内リンク */
.sidebar .widget a{
  color: #495057;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.sidebar .widget a:hover{
  color: #212529;
}

/* リスト系（Categories / Archives / Meta） */
.sidebar .widget ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.sidebar .widget li{
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(230,232,235,.9);
}
.sidebar .widget li:last-child{
  border-bottom: none;
}
.sidebar .widget li a{
  display: block;
  text-decoration: none;   /* 行全体をクリックできるUI */
}
.sidebar .widget li a:hover{
  text-decoration: underline;
}

/* 検索ウィジェット（入れている場合） */
.sidebar .widget_search form,
.sidebar .widget.widget_search form{
  display: grid;
  gap: 10px;
}
.sidebar .widget_search input[type="search"]{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: #fff;
}
.sidebar .widget_search input[type="submit"]{
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: #495057;
  color: #fff;
  cursor: pointer;
}
.sidebar .widget_search input[type="submit"]:hover{
  background: #343a40;
}

/* モバイル：サイドバーが下に回る時も“箱感”を維持 */
@media (max-width: 768px){
  .sidebar .widget{
    padding: 16px 14px;
    border-radius: 14px;
  }
}

/* =========================
   ACA Category Page Design
   ========================= */

/* 1) 全体：余白を増やして静かに */
.aca-cat-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.2rem 1.2rem 3rem;
}

/* 2) ヒーロー（カテゴリの上部） */
.aca-cat-hero {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.02);
  padding: 2.2rem 1.6rem;
  margin: 1.2rem 0 1.8rem;
}
.aca-cat-hero.has-image {
  padding: 0;
  background: transparent;
}
.aca-cat-hero-media {
  display: block;
  width: 100%;
  height: auto;
}
.aca-cat-hero-body {
  padding: 2.2rem 1.6rem;
}
.aca-cat-hero h1 {
  margin: 0 0 0.6rem;
  line-height: 1.25;
}
.aca-cat-hero-desc {
  margin: 0;
  opacity: 0.75;
  max-width: 62ch;
}

/* 3) カテゴリーナビ（静かなリンク帯） */
.aca-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.2rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.aca-cat-nav a {
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding-bottom: 0.15rem;
  opacity: 0.75;
}
.aca-cat-nav a:hover {
  opacity: 1;
}
.aca-cat-nav .is-current a {
  opacity: 1;
  border-bottom-color: rgba(0,0,0,0.35);
}

/* 4) 記事リスト：カードではなく “静かな区切り” */
.aca-post-list {
  display: grid;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aca-post-item {
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.aca-post-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  line-height: 1.35;
}
.aca-post-title a {
  text-decoration: none;
}
.aca-post-meta {
  font-size: 0.9rem;
  opacity: 0.65;
  margin: 0 0 0.55rem;
}
.aca-post-excerpt {
  margin: 0;
  opacity: 0.85;
  max-width: 78ch;
}

/* 5) ページャーも主張しない */
.aca-pagination {
  margin-top: 2.2rem;
}
.aca-pagination .page-numbers {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  margin-right: 0.35rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.08);
  opacity: 0.75;
}
.aca-pagination .page-numbers.current,
.aca-pagination .page-numbers:hover {
  opacity: 1;
}

/* 6) 末尾の案内（迷った時の道しるべ） */
.aca-cat-footer-note {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  opacity: 0.8;
}
.aca-cat-footer-note a {
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

/* 7) 画面幅が狭い時の余白 */
@media (max-width: 600px) {
  .aca-cat-hero-body { padding: 1.6rem 1.2rem; }
  .aca-cat-wrap { padding: 1.6rem 1.0rem 2.6rem; }
}

/* =========================
   ACA Product Page (Single)
   ========================= */

.aca-product-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 2.2rem 1.2rem 3rem;
}

/* タイトル周りの余白 */
.aca-product-wrap .entry-header {
  margin-bottom: 1.2rem;
}

/* アイキャッチ（H1直下） */
.aca-featured-image {
  margin: 1.2rem 0 1.8rem;
  opacity: 0.98;
}
.aca-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* 本文の行間と落ち着き */
.aca-product-wrap .entry-content {
  line-height: 1.85;
  max-width: 78ch;
}

/* 本文見出しも主張しすぎない */
.aca-product-wrap .entry-content h2,
.aca-product-wrap .entry-content h3 {
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
  line-height: 1.35;
}

/* 末尾の案内 */
.aca-product-footer-note {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  opacity: 0.8;
}
.aca-product-footer-note a {
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

/* 商品一覧：セクション見出しの余白を安定させる */
.aca-cat-wrap h2 {
  letter-spacing: 0.02em;
}
.aca-cat-wrap h3 {
  margin: 0 0 0.35rem;
}

/* =========================================================
   Footer widgets layout
   ========================================================= */

/* 余白と視認性（控えめ） */
.footer-widgets {
  padding: 36px 0;
}

.footer-widgets .widget-title {
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

/* リンクの“押しやすさ” */
.footer-widgets a {
  text-decoration: none;
}
.footer-widgets a:hover {
  text-decoration: underline;
}

/* 4カラム想定：間隔だけ整える */
@media (min-width: 769px) {
  .footer-widgets .inside-footer-widgets {
    display: flex;
    gap: 28px;
  }

  /* GeneratePressの各widgetエリアを均等に */
  .footer-widgets .footer-widget-1,
  .footer-widgets .footer-widget-2,
  .footer-widgets .footer-widget-3,
  .footer-widgets .footer-widget-4 {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* SPは1カラムで読みやすく */
@media (max-width: 768px) {
  .footer-widgets .inside-footer-widgets {
    display: block;
  }
  .footer-widgets .widget {
    margin-bottom: 22px;
  }
}

/* Footer bar（最下段）の整え */
.site-footer .copyright-bar {
  font-size: 14px;
  opacity: 0.9;
}

/* =========================================================
   ✅ Right Sidebar Sticky (Desktop only)
   - プラグイン不要 / JS不要
   - 追尾は「サイドバー内の箱」をstickyにする
   ========================================================= */

:root{
  --sidebar-w: 320px;      /* CLS対策：サイドバー幅を固定（必要なら調整） */
  --sidebar-top: 24px;     /* 追尾開始位置（ヘッダー高さに応じて調整） */
}

/* 1) PC時：サイドバー幅を固定（CLS対策） */
@media (min-width: 769px){
  /* 右サイドバーの列そのものを固定幅へ */
  .right-sidebar .widget-area{
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    max-width: var(--sidebar-w);
  }

  /* 2) Sticky本体：右サイドバーの“内側”を追尾 */
  .right-sidebar .inside-right-sidebar{
    position: sticky;
    top: var(--sidebar-top);
    align-self: flex-start; /* flexレイアウト時の保険 */
  }
}

/* 管理バー表示時（ログイン中）のズレ対策 */
@media (min-width: 769px){
  body.admin-bar .right-sidebar .inside-right-sidebar{
    top: calc(var(--sidebar-top) + 32px);
  }
}

/* =========================================================
   Sidebar widget title - Option B (Label)
   ========================================================= */
.sidebar .widget .widget-title {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ui-text);
  margin: 0 0 12px;
  padding: 6px 10px;
  background: rgba(73,80,87,.08);
  border: 1px solid rgba(230,232,235,.95);
  border-radius: 999px;
}

/* TOC */
.aca-toc{
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  background: #fff;
  padding: 14px 14px;
}
.aca-toc-title{
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ui-text);
  margin: 0 0 12px;
  padding: 6px 10px;
  background: rgba(73,80,87,.08);
  border: 1px solid rgba(230,232,235,.95);
  border-radius: 999px;
}
.aca-toc-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.aca-toc-item a{
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: #495057;
}
.aca-toc-item a:hover{ text-decoration: underline; }
.aca-toc-item.is-h3{ padding-left: 14px; opacity: .9; }

/* Sticky内でTOCが長い時の暴れ防止（任意） */
@media (min-width: 769px){
  .right-sidebar .inside-right-sidebar .aca-toc{
    max-height: calc(100vh - 140px);
    overflow: auto;
  }
}

/* 人気記事 */
.aca-popular-title{
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ui-text);
  margin: 0 0 3px;
  padding: 6px 10px;
  background: rgba(73,80,87,.08);
  border: 1px solid rgba(230,232,235,.95);
  border-radius: 999px;
}
.aca-popular-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.aca-popular-item{
  padding: 10px 0;
  border-bottom: 1px solid rgba(230,232,235,.9);
}
.aca-popular-item:last-child{ border-bottom: none; }
.aca-popular-item a{
  display: block;
  text-decoration: none;
}
.aca-popular-item a:hover{ text-decoration: underline; }

/* =========================================================
   Version History
   ========================================================= */

/*
v1.2.1 (2026-01-08)
- タイトル下余白の最適化（GeneratePress）
- 本文幅（Container Width）最適化（読みやすさ優先）
- サイドバー（ウィジェット）を静かに統一デザインへ

v1.2.0 (2026-01-07)
- 投稿記事用CSS (.article-page) を追加
- 読みやすさ重視の設計（行間・余白・フォントサイズ）
- 商品ページとの差別化

v1.1.0 (2026-01-07)
- 商品ページ用CSS (.product-page) を追加
- インラインスタイルと併用可能な設計
- 商品ページ3件のスタイル適用不具合を解決

v1.0.0 (2026-01-06)
- 初版リリース
- Legal Pages CSS (.legal-page)
- Contact Page CSS (.contact-page)
*/