/* ==========================================================================
   オリウェブ 共通ページCSS（法定ページ・記事・診断ランディング用）
   index.html のブランド変数に準拠
   ========================================================================== */
:root{
  --ink:#1c2b20;
  --muted:#5c6b5a;
  --green:#2e8b4f;
  --green-deep:#1f6b3c;
  --accent:#f25c1f;
  --line:#e6eddd;
  --cream:#f7faf3;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.95;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--green-deep);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ---- ヘッダー ---- */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(18px,5vw,48px);
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.04em;color:var(--ink)}
.site-header .brand img{width:120px;height:auto;display:block}
.site-header .home-link{font-size:.82rem;font-weight:800;color:var(--green-deep);
  border:1.5px solid var(--green-deep);border-radius:999px;padding:.45em 1.1em;white-space:nowrap}
.site-header .home-link:hover{background:var(--green-deep);color:#fff;text-decoration:none}

/* ---- パンくず ---- */
.breadcrumb{max-width:880px;margin:0 auto;padding:18px clamp(18px,5vw,32px) 0;
  font-size:.76rem;color:var(--muted);letter-spacing:.02em}
.breadcrumb a{color:var(--muted)}
.breadcrumb span[aria-current]{color:var(--ink);font-weight:700}

/* ---- 本文コンテナ ---- */
.page{max-width:880px;margin:0 auto;padding:clamp(28px,6vw,56px) clamp(18px,5vw,32px) 80px}
.page-lead{color:var(--muted);font-size:1rem;margin:.4em 0 2em;line-height:1.9}

.page h1{font-size:clamp(1.6rem,4.5vw,2.5rem);font-weight:900;line-height:1.45;letter-spacing:.02em;margin:.2em 0 .3em}
.page h2{font-size:clamp(1.2rem,3vw,1.55rem);font-weight:800;line-height:1.5;margin:2.4em 0 .8em;
  padding-left:.6em;border-left:5px solid var(--green);}
.page h3{font-size:1.08rem;font-weight:800;margin:1.8em 0 .5em;color:var(--green-deep)}
.page p{margin:0 0 1.2em}
.page ul,.page ol{margin:0 0 1.4em;padding-left:1.4em}
.page li{margin:.4em 0}
.page strong{font-weight:800}

/* 結論サマリー（記事冒頭・AI被引用用） */
.tldr{background:var(--cream);border:1px solid var(--line);border-left:5px solid var(--green);
  border-radius:12px;padding:1.1em 1.3em;margin:0 0 2em;font-weight:700;line-height:1.85}
.tldr .tldr-label{display:inline-block;font-size:.7rem;letter-spacing:.14em;color:var(--green-deep);
  font-weight:900;margin-bottom:.35em}

/* 定義リスト（特商法など） */
.spec{width:100%;border-collapse:collapse;margin:0 0 2em;font-size:.95rem}
.spec th,.spec td{text-align:left;vertical-align:top;padding:1em 1.1em;border-bottom:1px solid var(--line)}
.spec th{width:34%;background:var(--cream);font-weight:800;color:var(--ink);white-space:nowrap}
@media (max-width:620px){
  .spec,.spec tbody,.spec tr,.spec th,.spec td{display:block;width:100%}
  .spec th{border-bottom:none;border-radius:10px 10px 0 0}
  .spec td{padding-top:.5em}
  .spec tr{margin-bottom:1em;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .spec td{border-bottom:none}
}
.todo{color:var(--accent);font-weight:800;font-size:.82rem}

/* FAQ（details） */
.faq{margin:1.5em 0}
.faq details{border:1px solid var(--line);border-radius:12px;margin:0 0 .8em;background:#fff;overflow:hidden}
.faq summary{cursor:pointer;font-weight:800;padding:1em 1.2em;list-style:none;position:relative;padding-right:2.6em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";position:absolute;right:1.1em;top:1em;color:var(--green);font-weight:900;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details .faq-a{padding:0 1.2em 1.2em;color:var(--muted);line-height:1.9}

/* 注意書き・架空注記 */
.notice{background:#fff7f2;border:1px solid #f6d9c8;border-radius:12px;
  padding:1em 1.2em;font-size:.85rem;color:#9a5230;margin:1.5em 0;line-height:1.8}

/* CTA */
.cta-band{background:var(--green-deep);color:#fff;border-radius:var(--radius);
  padding:2em clamp(1.2em,4vw,2.4em);margin:3em 0 0;text-align:center}
.cta-band h2{color:#fff;border:none;padding:0;margin:0 0 .5em;font-size:1.3rem}
.cta-band p{color:rgba(255,255,255,.85);margin:0 0 1.3em;font-size:.92rem}
.cta-btn{display:inline-block;background:var(--accent);color:#fff;font-weight:900;letter-spacing:.04em;
  border-radius:999px;padding:.9em 2em;box-shadow:0 10px 26px rgba(242,92,31,.4)}
.cta-btn:hover{text-decoration:none;transform:translateY(-2px)}

/* 記事カード（ハブ） */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:2em 0}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4em 1.4em 1.6em;box-shadow:0 14px 40px rgba(31,107,60,.06);transition:transform .25s,box-shadow .25s}
.post-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(31,107,60,.14);text-decoration:none}
.post-card .tag{align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:.08em;color:var(--green-deep);
  background:var(--cream);border-radius:999px;padding:.4em .9em;margin-bottom:.8em}
.post-card h3{margin:0 0 .5em;font-size:1.05rem;line-height:1.55;color:var(--ink)}
.post-card p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.75}

/* 記事メタ */
.post-meta{display:flex;flex-wrap:wrap;gap:.6em 1.2em;color:var(--muted);font-size:.8rem;margin:0 0 2em;
  padding-bottom:1.4em;border-bottom:1px solid var(--line)}
.post-meta b{color:var(--ink);font-weight:800}
.post-body h2:first-of-type{margin-top:1.6em}

/* フッター */
.site-footer{background:var(--cream);border-top:1px solid var(--line);
  padding:46px clamp(18px,6vw,48px);text-align:center}
.site-footer .foot-logo{width:140px;height:auto;display:block;margin:0 auto 18px}
.site-footer .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6em 1.4em;margin:0 0 16px}
.site-footer .foot-links a{font-size:.82rem;font-weight:700;color:var(--ink)}
.site-footer .foot-copy{font-size:.74rem;color:var(--muted);letter-spacing:.08em;margin:0}