/* 親ケアナビ コンポーネント：btn / header / hero / tiles / rank-card / cmp / pr-bar / toc / breadcrumb / sticky-cta / footer */

/* ---- ボタン（立体感＝押せる感・48px以上） ---- */
.btn{display:inline-block;min-height:48px;line-height:1.3;padding:.85em 1.4em;border-radius:var(--radius);
  font-weight:700;font-size:1.0625rem;text-decoration:none;text-align:center;
  box-shadow:0 2px 0 rgba(0,0,0,.12);transition:background .15s,transform .05s;border:2px solid transparent;cursor:pointer;}
.btn:active{transform:translateY(1px);}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:var(--accent-dark);text-decoration:none;}
.btn-outline{background:#fff;color:var(--accent-dark);border-color:var(--accent);}
.btn-outline:hover{background:var(--accent-soft);text-decoration:none;}
.btn-lg{font-size:1.2rem;padding:1em 1.8em;}
.btn-block{display:block;width:100%;}
.btn .free{margin-left:.5em;background:var(--trust);color:#fff;font-size:.78em;padding:.12em .55em;border-radius:4px;vertical-align:middle;}

/* ---- ヘッダー ---- */
.site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--border);}
.site-header .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;min-height:60px;}
.brand{font-weight:800;font-size:1.25rem;color:var(--heading);text-decoration:none;white-space:nowrap;}
.brand .dot{color:var(--accent);}
.gnav{display:flex;gap:1.1rem;}
.gnav a{color:var(--text);text-decoration:none;font-weight:700;font-size:1rem;white-space:nowrap;}
.gnav a:hover{color:var(--accent-dark);}
.header-cta{margin-left:auto;}
.header-cta .btn{min-height:42px;padding:.5em 1em;font-size:.95rem;}
/* モバイル：ナビをヘッダー2段目に横スクロールで常時表示（ハンバーガー不要・JSなし） */
@media(max-width:879px){
  .gnav{order:3;flex-basis:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.15rem;gap:1.1rem;font-size:.95rem;}
}

/* ---- ヒーロー ---- */
.hero{background:linear-gradient(180deg,#fbf8f3 0%,#f2ece2 100%);}
.hero .wrap{padding-block:2.6rem 2.2rem;}
.hero-grid{display:grid;gap:1.6rem 2.4rem;align-items:center;}
@media(min-width:900px){ .hero-grid{grid-template-columns:1.15fr .85fr;} }
.hero h1{font-size:clamp(1.5rem,5vw,2.1rem);margin-bottom:.5em;}
/* 日本語の改行を文節単位にする：各かたまりは途中で折り返さず、かたまり間でのみ改行 */
.hero h1 span{display:inline-block;}
.hero .lead{max-width:34em;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem;}
.hero-note{font-size:var(--fs-small);color:var(--text-sub);margin-top:.8rem;}
/* ヒーロー右側の悩みチェックカード（空白を意味あるコンテンツで埋める） */
.hero-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.5rem;box-shadow:0 10px 28px rgba(0,0,0,.07);}
.hero-card h2{font-size:1.12rem;border:0;padding:0;margin:0 0 .9rem;color:var(--heading);}
.hero-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;}
.hero-card li{display:flex;gap:.55rem;align-items:flex-start;word-break:keep-all;}
.hero-card li::before{content:"\2713";color:var(--trust);font-weight:800;flex:0 0 auto;}
.hero-card .hc-note{font-size:var(--fs-small);color:var(--text-sub);margin:1rem 0 0;}

/* ---- 見積りCTA帯 ---- */
.cta-band{background:var(--trust);color:#fff;text-align:center;}
.cta-band .wrap{padding-block:2rem;}
.cta-band h2{color:#fff;border:0;padding:0;margin:0 0 .3em;}
.cta-band p{color:#eaf3f0;margin-bottom:1.2rem;}
.cta-band .btn-accent{box-shadow:0 3px 0 rgba(0,0,0,.25);}

/* ---- カテゴリタイル ---- */
.cat-grid{display:grid;gap:var(--gap);grid-template-columns:1fr;}
@media(min-width:680px){ .cat-grid{grid-template-columns:repeat(3,1fr);} }
.cat-tile{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem;text-decoration:none;color:var(--text);text-align:center;transition:box-shadow .15s,transform .1s;}
.cat-tile:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px);text-decoration:none;}
.cat-tile .ico{font-size:2.4rem;line-height:1;display:block;margin-bottom:.5rem;}
.cat-tile h3{margin:0 0 .3em;color:var(--heading);}
.cat-tile .tags{font-size:var(--fs-small);color:var(--text-sub);}

/* ---- ランキングカード ---- */
.rank-grid{display:grid;gap:var(--gap);grid-template-columns:1fr;}
@media(min-width:680px){ .rank-grid{grid-template-columns:repeat(3,1fr);} }
.rank-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;}
.rank-badge{position:absolute;top:-12px;left:14px;background:var(--accent);color:#fff;font-weight:800;
  font-size:.9rem;padding:.25em .8em;border-radius:20px;box-shadow:0 2px 5px rgba(0,0,0,.18);}
.rank-img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--bg-soft);border-radius:8px;margin:.6rem 0;}
.rank-name{font-size:1.1rem;margin:.4rem 0 .2rem;}
.rank-score{font-weight:700;margin:.2rem 0 .6rem;}
.rank-score .star{color:var(--star);}
.rank-meta{list-style:none;padding:0;margin:0 0 .8rem;font-size:var(--fs-small);color:var(--text-sub);}
.rank-meta li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--border);padding:.25em 0;}
.pros-cons{font-size:var(--fs-small);margin-bottom:.8rem;}
.pros b{color:var(--trust);} .cons b{color:var(--accent-dark);}
.pros-cons ul{margin:.2em 0 .8em;}
.rank-cta{display:flex;flex-direction:column;gap:.5rem;margin:0;}

/* ---- 比較表 ---- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2rem 0;border:1px solid var(--border);border-radius:8px;}
.cmp{border-collapse:collapse;min-width:620px;width:100%;font-size:1rem;}
.cmp th,.cmp td{border:1px solid var(--border);padding:.8em;text-align:center;}
.cmp thead th{background:var(--bg-soft);color:var(--heading);position:sticky;top:0;}
.cmp tbody th{background:var(--surface);text-align:left;white-space:nowrap;}
.cmp .price{color:var(--accent-dark);font-weight:700;}
.cmp .ok{color:var(--trust);font-weight:700;}

/* ---- 料金相場表 ---- */
.fee-table{width:100%;border-collapse:collapse;margin:1rem 0;}
.fee-table th,.fee-table td{border:1px solid var(--border);padding:.7em .9em;text-align:left;}
.fee-table thead th{background:var(--bg-soft);color:var(--heading);}
.fee-table .price{color:var(--accent-dark);font-weight:700;}

/* ---- 作業フロー（番号付き） ---- */
.flow{list-style:none;counter-reset:step;padding:0;margin:1.2rem 0;display:grid;gap:.7rem;}
.flow li{counter-increment:step;display:flex;gap:.9rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:.9rem 1rem;}
.flow li::before{content:counter(step);flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:800;display:grid;place-items:center;}

/* ---- 記事カード ---- */
.post-grid{display:grid;gap:var(--gap);grid-template-columns:1fr;}
@media(min-width:560px){ .post-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:880px){ .post-grid{grid-template-columns:repeat(3,1fr);} }
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;transition:box-shadow .15s;}
.post-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);text-decoration:none;}
.post-thumb{aspect-ratio:16/9;background:var(--bg-soft);display:grid;place-items:center;color:var(--text-sub);font-size:2rem;}
.post-card .body{padding:.9rem 1rem 1.1rem;}
.cat-label{display:inline-block;background:var(--accent-soft);color:var(--accent-dark);font-size:.78rem;
  font-weight:700;padding:.15em .6em;border-radius:4px;margin-bottom:.4rem;}
.post-card h3{font-size:1.05rem;margin:.2rem 0;}
.post-date{font-size:var(--fs-small);color:var(--text-sub);}

/* ---- 信頼シグナル ---- */
.trust-grid{display:grid;gap:var(--gap);grid-template-columns:1fr;}
@media(min-width:680px){ .trust-grid{grid-template-columns:repeat(3,1fr);} }
.trust-item{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.1rem;}
.trust-item .ico{font-size:1.6rem;}
.trust-item h3{font-size:1.05rem;margin:.3rem 0;}

/* ---- PR表記バー ---- */
.pr-bar{background:var(--pr-bar);color:var(--text-sub);font-size:var(--fs-small);
  padding:.6em .9em;border-radius:6px;margin:0 0 1.2em;}
.pr-badge{background:var(--text-sub);color:#fff;padding:.05em .5em;border-radius:4px;font-weight:700;margin-right:.5em;}

/* ---- 目次 ---- */
.toc{background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;padding:1rem 1.2rem;margin:1.4rem 0;}
.toc-title{font-weight:700;color:var(--heading);margin:0 0 .5em;}
.toc ol{margin:0;padding-left:1.4em;}
.toc a{color:var(--text);}

/* ---- パンくず ---- */
.breadcrumb{font-size:var(--fs-small);color:var(--text-sub);padding:.8rem 0;}
.breadcrumb a{color:var(--accent-dark);}

/* ---- 関連リンク ---- */
.related{background:var(--bg-soft);border-radius:8px;padding:1.2rem;margin:2rem 0;}

/* ---- 追従CTA（モバイル固定） ---- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--border);
  padding:.6em .8em;box-shadow:0 -2px 8px rgba(0,0,0,.08);}
.sticky-cta .btn{display:block;}
@media(min-width:768px){ .sticky-cta{display:none;} }
body{padding-bottom:80px;}
@media(min-width:768px){ body{padding-bottom:0;} }

/* ---- フッター ---- */
.site-footer{background:#2a2a2a;color:#d8d4cd;margin-top:3rem;}
.site-footer .wrap{padding-block:2rem;}
.site-footer a{color:#e9c9a8;}
.foot-nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;list-style:none;padding:0;margin:0 0 1rem;}
.foot-nav a{text-decoration:none;}
.foot-small{font-size:var(--fs-small);color:#a9a49c;}