/*
Theme Name: こそだて食ラボ Child
Template: swell
Author: こそだて食ラボ編集部
Description: SWELL child theme for kosodate-shoku.jp
Version: 1.0.0
*/

/* =========================================================
   こそだて食ラボ 追加CSS（SWELL 追加CSS欄に貼付）
   shared/14 UI/UXパターン準拠 / カラー= brand.md
   ========================================================= */
:root{
  --ks-main:#5FB98F;
  --ks-main-dark:#3E8E6C;
  --ks-cta:#F2795C;
  --ks-cta-hover:#E0623F;
  --ks-accent:#F6C453;
  --ks-bg:#FFFDF8;
  --ks-card:#FFFFFF;
  --ks-border:#EAE4D8;
  --ks-text:#3A352F;
  --ks-sub:#8A8275;
}
body{ background:var(--ks-bg); color:var(--ks-text); }

/* ---- 見出し（SWELLはfill-colorも必要） ---- */
.post_content h2{
  border-left:6px solid var(--ks-main);
  padding:.4em .7em; background:#F3FAF6;
  color:var(--ks-main-dark); -webkit-text-fill-color:var(--ks-main-dark);
  border-radius:4px;
}
.post_content h3{
  border-bottom:2px dashed var(--ks-border);
  color:var(--ks-text); -webkit-text-fill-color:var(--ks-text); padding-bottom:.2em;
}

/* ---- CTAボタン（動詞+ベネフィット+マイクロコピー） ---- */
.ks-cta{ text-align:center; margin:28px 0; }
.ks-cta a{
  display:inline-block; width:100%; max-width:520px;
  background:var(--ks-cta); color:#fff!important; text-decoration:none;
  font-weight:800; font-size:1.15rem; line-height:1.4;
  padding:18px 24px; border-radius:14px;
  box-shadow:0 4px 0 var(--ks-cta-hover); transition:.15s;
}
.ks-cta a:hover{ transform:translateY(2px); box-shadow:0 2px 0 var(--ks-cta-hover); background:var(--ks-cta-hover); }
.ks-cta .ks-micro{ display:block; font-size:.8rem; font-weight:600; opacity:.95; margin-top:4px; }

/* ---- PRラベル（ステマ規制: 冒頭/リンク付近に「広告」） ---- */
.ks-pr{
  display:inline-block; font-size:.72rem; font-weight:700; color:var(--ks-sub);
  background:#F1ECE0; border:1px solid var(--ks-border);
  padding:2px 8px; border-radius:4px; margin:0 0 8px;
}

/* ---- 比較表（スマホ横スクロール: shared/14§2-A） ---- */
.ks-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:20px 0; border:1px solid var(--ks-border); border-radius:10px; }
.ks-table{ border-collapse:collapse; min-width:680px; width:100%; background:var(--ks-card); }
.ks-table th,.ks-table td{ border:1px solid var(--ks-border); padding:12px 10px; text-align:center; font-size:.92rem; }
.ks-table thead th{ background:var(--ks-main); color:#fff; position:sticky; top:0; }
.ks-table tbody th{ background:#F3FAF6; color:var(--ks-main-dark); white-space:nowrap; }
.ks-table .ks-pick{ background:#FFF6E8; } /* イチオシ行 */
.ks-table .ks-pick td:first-child::before{ content:"★イチオシ "; color:var(--ks-cta); font-weight:800; font-size:.78rem; }
.ks-cost{ font-weight:800; color:var(--ks-cta); } /* 1食実コスト等の独自指標 */

/* ---- サービスカード（関連/おすすめ） ---- */
.ks-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin:20px 0; }
.ks-card{ background:var(--ks-card); border:1px solid var(--ks-border); border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.ks-card img{ width:100%; height:auto; display:block; }
.ks-card .ks-card-body{ padding:14px; }
.ks-card .ks-card-title{ font-weight:800; font-size:1rem; margin:0 0 6px; }
.ks-card .ks-tag{ display:inline-block; font-size:.72rem; background:#F3FAF6; color:var(--ks-main-dark); border-radius:4px; padding:2px 8px; margin-bottom:6px; }

/* ---- ヒーロー（高さ上限・他サイトの肥大化対策） ---- */
.ks-hero{ max-height:420px; overflow:hidden; border-radius:16px; }
.ks-hero img{ width:100%; height:auto; object-fit:cover; }

/* ---- 不安払拭ボックス（解約のしやすさ・添加物・送料） ---- */
.ks-reassure{ background:#F3FAF6; border:1px solid #CDE7D9; border-radius:12px; padding:16px 18px; margin:20px 0; }
.ks-reassure strong{ color:var(--ks-main-dark); }

/* ---- スマホ最適化 ---- */
@media(max-width:600px){
  .ks-cta a{ font-size:1.05rem; padding:16px 18px; }
  .post_content h2{ font-size:1.2rem; }
}

/* ===== SWELLテーマ全体のブランド色(リンク/ナビ/キャッチバー) ===== */
a{ color:#3E8E6C; }
a:hover{ color:#5FB98F; }
.l-header{ background:#ffffff; }
.c-gnavMenu__item > a:hover,.c-gnavMenu__col > a:hover{ color:#3E8E6C; }
/* キャッチコピーバー(SWELL既定の濃紺)をブランドグリーンに */
.p-catchHeader{ background-color:#3E8E6C!important; }
.p-catchHeader, .p-catchHeader *{ color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; }