/*
Theme Name: Cocoon Child (暮らしの困りごと相談所)
Theme URI: https://wp-cocoon.com/
Description: 「暮らしの困りごと相談所」専用のCocoon子テーマ。TOPページとジャンル別ピラーページの独自デザインを追加します。
Author: (運営者名を入力)
Template: cocoon-master
Version: 1.0.0
Text Domain: kurashi-soudanjo-child
*/

/* ===== 共通変数 ===== */
:root{
  --ks-accent:#2e6f9e;
  --ks-accent-bg:#eaf3fa;
  --ks-trust-bg:#f0f7ee;
  --ks-trust-border:#8bbf6b;
  --ks-border:#e2e2e2;
  --ks-text-sub:#666;
  --ks-radius:12px;
}

/* ===== TOPページ：ヒーロー ===== */
.ks-hero{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:stretch;
  gap:0;
  margin:0 0 32px;
  border-radius:var(--ks-radius);
  overflow:hidden;
}
.ks-hero-left{
  text-align:left;
  background:var(--ks-accent-bg);
  padding:40px 36px;
}
.ks-hero-nowrap{
  white-space:nowrap;
}
.ks-hero h1{
  font-size:28px;
  line-height:1.5;
  margin:0 0 14px;
}
.ks-hero p.ks-hero-sub{
  font-size:15px;
  color:var(--ks-text-sub);
  line-height:1.7;
  margin:0 0 20px;
}
.ks-hero-badge{
  display:inline-block;
  background:#fff;
  border:1px solid var(--ks-trust-border);
  color:#3e7a2b;
  font-size:13px;
  padding:6px 14px;
  border-radius:20px;
  margin-top:14px;
}
.ks-hero-right{
  text-align:center;
}
.ks-hero-img-el{
  height:100%;
  width:auto;
  display:block;
}

/* ===== お悩み別導線カード ===== */
.ks-section-title{
  font-size:20px;
  font-weight:bold;
  margin:40px 0 16px;
  border-left:5px solid var(--ks-accent);
  padding-left:12px;
}
.ks-concern-grid,
.ks-genre-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
  margin-bottom:16px;
}
.ks-concern-card{
  background:#fff;
  border:1px solid var(--ks-border);
  border-radius:var(--ks-radius);
  padding:20px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s;
}
.ks-concern-card:hover{
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.ks-concern-card .ks-card-label{
  font-size:14px;
  color:var(--ks-text-sub);
  margin:0 0 8px;
  min-height:50px;
}
.ks-concern-card .ks-card-arrow{
  color:var(--ks-accent);
  font-size:13px;
  font-weight:bold;
  margin-top:8px;
}

/* ===== 4カテゴリカード ===== */
.ks-genre-card{
  background:#fff;
  border:1px solid var(--ks-border);
  border-radius:var(--ks-radius);
  padding:24px 16px;
  text-align:center;
  text-decoration:none;
  color:inherit;
  display:block;
}
.ks-genre-card .ks-genre-icon{
  font-size:32px;
  margin-bottom:10px;
}
.ks-genre-card .ks-genre-name{
  font-weight:bold;
  font-size:16px;
  margin-bottom:6px;
}
.ks-genre-card .ks-genre-btn{
  display:inline-block;
  margin-top:10px;
  font-size:13px;
  color:#fff;
  background:var(--ks-accent);
  padding:6px 16px;
  border-radius:20px;
}

/* ===== 信頼性セクション ===== */
.ks-trust-box{
  background:var(--ks-trust-bg);
  border:1px solid var(--ks-trust-border);
  border-radius:var(--ks-radius);
  padding:24px;
  margin:32px 0;
}
.ks-trust-box h2{
  margin-top:0;
  font-size:19px;
}
.ks-trust-stats{
  font-size:14px;
  color:var(--ks-text-sub);
  background:#fff;
  display:inline-block;
  padding:8px 16px;
  border-radius:20px;
  margin:4px 0 0;
}
.ks-trust-stats strong{
  color:var(--ks-accent);
  font-size:16px;
}
.ks-trust-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.ks-trust-links a{
  background:#fff;
  border:1px solid var(--ks-trust-border);
  border-radius:20px;
  padding:6px 14px;
  font-size:13px;
  text-decoration:none;
  color:#3e7a2b;
}

/* ===== 新着/人気記事リスト ===== */
.ks-post-list{
  list-style:none;
  margin:0;
  padding:0;
}
.ks-post-list li{
  border-bottom:1px solid var(--ks-border);
  padding:12px 0;
}
.ks-post-list li a{
  text-decoration:none;
  color:inherit;
  font-size:14px;
}
.ks-post-list li .ks-post-date{
  color:var(--ks-text-sub);
  font-size:12px;
  margin-right:8px;
}

/* ===== ジャンルピラーページ：ヘッダーバナー ===== */
.ks-genre-hero{
  background:var(--ks-accent-bg);
  border-radius:var(--ks-radius);
  padding:32px 20px;
  margin-bottom:24px;
  text-align:center;
}
.ks-genre-hero h1{
  font-size:24px;
  margin:0 0 8px;
}
.ks-genre-hero p{
  color:var(--ks-text-sub);
  margin:0;
}
.ks-genre-related{
  background:#fafafa;
  border:1px solid var(--ks-border);
  border-radius:var(--ks-radius);
  padding:18px 20px;
  margin:24px 0;
}
.ks-genre-related a{
  color:var(--ks-accent);
  font-weight:bold;
  text-decoration:none;
}

@media (max-width:600px){
  .ks-hero h1{font-size:22px;}
  .ks-concern-grid,.ks-genre-grid{grid-template-columns:1fr 1fr;}
}


/* ===== 見出し(h2/h3/h4)装飾：本文との視認性向上 ===== */
.entry-content h2,
.ks-genre-content h2{
  background:var(--ks-accent-bg,#eaf3fa);
  border-left:6px solid var(--ks-accent,#2e6f9e);
  padding:14px 18px;
  margin:2.6em 0 1.3em;
  font-size:1.32em;
  line-height:1.5;
  border-radius:6px;
}
.entry-content h3,
.ks-genre-content h3{
  border-bottom:3px solid var(--ks-accent,#2e6f9e);
  padding:0 0 10px;
  margin:2.2em 0 1.1em;
  font-size:1.14em;
  line-height:1.5;
  color:var(--ks-accent,#2e6f9e);
}
.entry-content h4,
.ks-genre-content h4{
  border-left:4px solid var(--ks-trust-border,#8bbf6b);
  padding:4px 0 4px 12px;
  margin:1.8em 0 0.9em;
  font-size:1.02em;
  line-height:1.5;
}
.entry-content h2:first-child,
.entry-content h3:first-child,
.ks-genre-content h2:first-child,
.ks-genre-content h3:first-child{
  margin-top:0.4em;
}
.entry-content h2 + h3,
.ks-genre-content h2 + h3{
  margin-top:1.2em;
}


/* ===== CTAボタン統一デザイン（Cocoonデフォルトの黒ボタンを上書き） ===== */
.wp-block-button__link{
  background:var(--ks-accent,#2e6f9e) !important;
  border-radius:8px !important;
  font-weight:bold;
  padding:14px 28px !important;
  transition:opacity .2s;
}
.wp-block-button__link:hover{
  opacity:0.85;
}
.wp-block-buttons{
  justify-content:center;
}

/* ===== 記事末尾の強調CTA（比較表への回帰導線） ===== */
.ks-final-cta{
  text-align:center;
  margin:28px 0;
}
.ks-final-cta a{
  display:inline-block;
  background:var(--ks-trust-border,#8bbf6b);
  color:#fff;
  font-weight:bold;
  font-size:1.08em;
  padding:16px 36px;
  border-radius:30px;
  text-decoration:none;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.ks-final-cta a:hover{
  opacity:0.88;
}
.ks-final-cta p{
  margin:0 0 10px;
  font-size:0.9em;
  color:var(--ks-text-sub,#666);
}


/* ===== TOPページの本文幅を記事ページと統一（Cocoon既定の900px制限を解除） ===== */
body.front-top-page main.main{
  max-width:1256px !important;
}


/* ===== 比較表内のボタン型CTA（公式サイトを見る） ===== */
.ks-table-cta{
  display:inline-block;
  background:var(--ks-accent,#2e6f9e);
  color:#fff !important;
  font-size:0.88em;
  font-weight:bold;
  padding:8px 18px;
  border-radius:20px;
  text-decoration:none !important;
  white-space:nowrap;
  transition:opacity .2s;
}
.ks-table-cta:hover{
  opacity:0.82;
}
.entry-content table th:last-child,
.entry-content table td:last-child,
.ks-genre-content table th:last-child,
.ks-genre-content table td:last-child{
  text-align:center;
}


/* ===================================================
   モバイル最適化：情報量は変えず、余白・改行・階層で
   認知負荷を軽減する（PC表示は変更しない）
   =================================================== */
@media (max-width:600px){

  /* 本文の圧迫感を軽減：段落・リストの行間と余白を確保 */
  .entry-content p,
  .ks-genre-content p{
    line-height:1.9;
    margin:0 0 1.5em;
  }
  .entry-content li,
  .ks-genre-content li{
    line-height:1.8;
    margin-bottom:0.7em;
  }
  .entry-content ul,
  .entry-content ol,
  .ks-genre-content ul,
  .ks-genre-content ol{
    margin:0 0 1.5em;
    padding-left:1.3em;
  }

  /* 見出しと本文の間隔調整 */
  .entry-content h2,
  .ks-genre-content h2{
    margin:2.2em 0 1.1em;
    padding:12px 14px;
    font-size:1.15em;
  }
  .entry-content h3,
  .ks-genre-content h3{
    margin:1.8em 0 0.9em;
    font-size:1.05em;
  }
  .entry-content h2:first-child,
  .entry-content h3:first-child{
    margin-top:0;
  }

  /* カード・比較ボックス（インラインflex指定）はスマホで縦積みに */
  .entry-content div[style*="display:flex"]{
    flex-direction:column !important;
  }
  .entry-content div[style*="min-width"]{
    min-width:100% !important;
    flex:1 1 100% !important;
  }
  .entry-content div[style*="display:flex"] > div{
    margin-bottom:12px;
  }
  .entry-content div[style*="display:flex"] > div:last-child{
    margin-bottom:0;
  }

  /* 悩みBOX・おすすめ/注意点BOX・透明性表示などの余白を調整（幅を圧迫しないように） */
  .entry-content div[style*="border-radius"]{
    box-sizing:border-box;
    max-width:100%;
    padding:14px 16px !important;
  }
  .entry-content .information-box{
    box-sizing:border-box;
    padding:14px 16px;
  }

  /* 比較表：横スクロールさせず1画面に収める（縮小＋折り返し） */
  .entry-content table,
  .ks-genre-content table{
    display:table;
    width:100% !important;
    max-width:100%;
    table-layout:fixed;
    overflow-x:visible;
    white-space:normal;
    border-collapse:collapse;
  }
  .entry-content table th,
  .entry-content table td,
  .ks-genre-content table th,
  .ks-genre-content table td{
    font-size:0.72em;
    padding:6px 4px !important;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:break-word;
  }

  /* CTAボタン：横はみ出しを解消し、タップしやすい全幅ボタンに */
  .entry-content a.ks-table-cta{
    display:block !important;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    white-space:normal !important;
    text-align:center;
    padding:14px 16px !important;
    font-size:0.98em;
    line-height:1.4;
  }
  .ks-final-cta a{
    display:block;
    width:100%;
    box-sizing:border-box;
    white-space:normal;
    padding:16px 20px;
    font-size:1em;
  }

  /* 画像・埋め込みのはみ出し防止 */
  .entry-content img,
  .entry-content iframe{
    max-width:100%;
    height:auto;
  }
}


/* ===================================================
   モバイル：TOPページヘッダーのグローバルナビ行を非表示
   （ハンバーガーメニュー #navi-menu-content に同一リンクが
   格納済みのため、リンク・SEO評価は失われない）
   =================================================== */
@media (max-width:600px){
  #navi{
    display:none !important;
  }
}


/* ==========================================================
   TOPページ改善（2026-08 リニューアル）追加分
   ========================================================== */

/* ヒーロー：サービスをすぐ探せるクイックナビ */
.ks-hero-quicknav{
  margin:4px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
  align-items:center;
}
.ks-hero-quicknav a{
  background:#fff;
  border:1px solid var(--ks-accent);
  color:var(--ks-accent);
  border-radius:20px;
  padding:7px 15px;
  font-size:13px;
  text-decoration:none;
  font-weight:bold;
}
.ks-hero-quicknav a:hover{
  background:var(--ks-accent);
  color:#fff;
}

/* サービスから探す：カテゴリ→サービスの2階層 */
.ks-category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  margin-bottom:16px;
}
.ks-category-card{
  background:#fff;
  border:1px solid var(--ks-border);
  border-radius:var(--ks-radius);
  padding:22px 20px;
  display:flex;
  flex-direction:column;
}
.ks-category-card.ks-category-card-single{
  justify-content:flex-start;
}
.ks-category-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
}
.ks-category-head .ks-category-icon{
  font-size:26px;
}
.ks-category-head a.ks-category-title{
  font-size:17px;
  font-weight:bold;
  color:inherit;
  text-decoration:none;
}
.ks-category-head a.ks-category-title:hover{
  text-decoration:underline;
}
.ks-category-desc{
  font-size:13px;
  color:var(--ks-text-sub);
  margin:0 0 14px;
}
.ks-service-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ks-service-chip{
  background:var(--ks-accent-bg);
  color:var(--ks-accent);
  border-radius:20px;
  padding:9px 15px;
  font-size:13px;
  text-decoration:none;
  font-weight:bold;
  white-space:nowrap;
}
.ks-service-chip:hover{
  opacity:.8;
}
.ks-service-chip-sub{
  background:var(--ks-accent-bg);
  color:var(--ks-accent);
  font-weight:bold;
}
.ks-category-cta{
  display:inline-block;
  margin-top:4px;
  background:var(--ks-accent-bg);
  color:var(--ks-accent);
  border-radius:20px;
  padding:9px 16px;
  font-size:13px;
  font-weight:bold;
  text-decoration:none;
  align-self:flex-start;
}
.ks-category-cta:hover{
  opacity:.8;
}

/* 安心して選んでいただくために：強化分 */
.ks-trust-intro{
  margin:0 0 14px;
  font-size:15px;
}
.ks-trust-stats-lg{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
.ks-trust-stats-lg .ks-stat{
  background:#fff;
  border-radius:10px;
  padding:10px 18px;
  font-size:13px;
  color:var(--ks-text-sub);
}
.ks-trust-stats-lg .ks-stat strong{
  display:block;
  font-size:22px;
  color:var(--ks-accent);
  line-height:1.3;
}
.ks-trust-checklist{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ks-trust-checklist li{
  font-size:13px;
  color:#444;
  padding-left:22px;
  position:relative;
}
.ks-trust-checklist li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--ks-trust-border);
  font-weight:bold;
}

/* 記事から探す（人気記事・新着記事）：主役にしない控えめな見せ方 */
.ks-section-title-sub{
  font-size:17px;
  border-left-width:4px;
  margin:36px 0 12px;
  color:#333;
}
.ks-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.ks-articles-compact h3{
  font-size:15px;
  margin:0 0 6px;
  color:var(--ks-text-sub);
}
.ks-articles-compact .ks-post-list li{
  padding:9px 0;
}
.ks-articles-compact .ks-post-list li a{
  font-size:13px;
}

/* サイトについて（運営情報への導線） */
.ks-about-box{
  border-top:1px solid var(--ks-border);
  margin-top:40px;
  padding-top:24px;
  text-align:center;
}
.ks-about-box p{
  font-size:13px;
  color:var(--ks-text-sub);
  margin:0 0 12px;
}
.ks-about-box .ks-trust-links{
  justify-content:center;
}

/* ヒーロー：タブレット以下は1カラムに切り替え */
@media (max-width:768px){
  .ks-hero{
    grid-template-columns:1fr;
  }
  .ks-hero-left{
    text-align:center;
    padding:32px 20px;
  }
  .ks-hero-quicknav{
    justify-content:center;
  }
  .ks-hero-right{
    margin-top:0;
  }
  .ks-hero-img-el{
    width:100%;
    height:auto;
  }
}

/* モバイル最適化（TOPページ改善分） */
@media (max-width:600px){
  .ks-two-col{
    grid-template-columns:1fr;
    gap:4px;
  }
  .ks-trust-stats-lg{
    gap:10px;
  }
  .ks-category-card{
    padding:20px 16px;
  }

  /* ヒーロー：スマホ専用の最適化（375/390/414px想定、縦積みをそのまま伸ばさず専用調整） */
  .ks-hero-left{
    padding:22px 18px;
  }
  .ks-hero h1{
    font-size:22px;
    line-height:1.45;
    letter-spacing:-0.01em;
    margin:0 0 10px;
  }
  .ks-hero p.ks-hero-sub{
    font-size:14px;
    line-height:1.6;
    margin:0 0 14px;
  }
  .ks-hero-quicknav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:0 0 10px;
  }
  .ks-hero-quicknav a{
    padding:12px 6px;
    font-size:11px;
    text-align:center;
    white-space:nowrap;
  }
  .ks-hero-quicknav a:nth-child(3){
    grid-column:1 / -1;
  }
  .ks-hero-badge{
    margin-top:2px;
    font-size:12px;
    padding:5px 12px;
  }
  .ks-hero-right{
    margin-top:0;
  }
}


/* ~~~~~ TOPページ：ご利用の流れ ~~~~~ */
.ks-flow-box{
  background:var(--ks-accent-bg);
  border:1px solid var(--ks-border);
  border-radius:var(--ks-radius);
  padding:24px;
  margin:32px 0;
}
.ks-flow-box .ks-section-title{
  margin-top:0;
}
.ks-flow-intro{
  font-size:14px;
  color:var(--ks-text-sub);
  margin:0 0 18px;
}
.ks-flow-steps{
  display:flex;
  align-items:stretch;
  gap:10px;
  flex-wrap:wrap;
}
.ks-flow-step{
  flex:1 1 200px;
  background:#fff;
  border:1px solid var(--ks-border);
  border-radius:var(--ks-radius);
  padding:16px 14px;
  text-align:center;
}
.ks-flow-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--ks-accent);
  color:#fff;
  font-weight:bold;
  font-size:14px;
  margin-bottom:8px;
}
.ks-flow-step-title{
  font-size:14px;
  margin:0 0 6px;
}
.ks-flow-step-desc{
  font-size:12.5px;
  color:var(--ks-text-sub);
  line-height:1.6;
  margin:0;
}
.ks-flow-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:var(--ks-accent);
  flex:0 0 auto;
}

@media (max-width:600px){
  .ks-flow-steps{
    flex-direction:column;
  }
  .ks-flow-arrow{
    transform:rotate(90deg);
    margin:-4px 0;
  }
  .ks-flow-step{
    flex:1 1 auto;
  }
}