/* ===========================================
   wakatte.com | 資料請求フォーム用 プライバシーCSS
   ファイル名：/css/privacy_styles.css
   目的：見出し配色・目次デザイン・左右余白（中央寄せ）
   =========================================== */

/* ==== Color Tokens ==== */
:root{
  --teal:#2ec4b6;         /* ワカッテ系ティール */
  --teal-600:#23ad9f;
  --coral:#f25f5c;        /* 強調ボタン系 */
  --navy:#1f3b63;         /* 見出し・ベース */
  --bg:#ffffff;
  --ink:#0f2236;
  --muted:#6b7280;
  --line:#e5e7eb;

  --container: 920px;     /* 本文幅 */
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c1220;
    --ink:#e9eef6;
    --muted:#9aa4b6;
    --line:#1d2940;
    --teal:#31d0c0;
    --teal-600:#27b7a8;
    --coral:#ff6b66;
    --navy:#2a4a7a;
    --shadow: 0 10px 26px rgba(0,0,0,.45);
  }
}

/* ==== Base ==== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  line-height:1.85;
  font-family: "Inter","Noto Sans JP","Murecho",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 中央寄せ＆左右余白（左寄せに見える問題を解消） */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding: clamp(20px, 4vw, 36px);
}

/* ==== Header / パンくず ==== */
.site-header{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.brand{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--navy); text-decoration:none; font-weight:700; letter-spacing:.02em;
}
.brand-logo{ font-size:1.05rem; }
.brand-name{ font-size:1rem; }
.breadcrumb{ margin-top:.45rem; font-size:.85rem; color:var(--muted); }
.breadcrumb a{ color:var(--muted); text-decoration:none; border-bottom:1px dashed rgba(0,0,0,.25); }
.breadcrumb a:hover{ color:var(--navy); border-bottom-color:var(--navy); }

/* ==== Typography ==== */
.policy h1{
  margin:.4rem 0 1.2rem;
  font-size: clamp(1.8rem, 3.2vw, 2.3rem);
  line-height:1.22;
  color:var(--navy);
  position:relative;
  padding-bottom:.6rem;
}
.policy h1::after{
  content:"";
  display:block;
  width:84px; height:6px; border-radius:6px;
  background:linear-gradient(90deg,var(--teal),var(--coral));
  margin-top:.6rem;
}

.lede{ color:var(--muted); margin-bottom:1.4rem; }

.policy h2{
  position:relative;
  margin:2.2rem 0 .95rem;
  font-size: clamp(1.22rem, 2.2vw, 1.5rem);
  line-height:1.35;
  color:var(--navy);
  padding-left:.9rem;
}
.policy h2::before{
  content:"";
  position:absolute; left:0; top:.2rem; bottom:.2rem;
  width:6px; border-radius:3px;
  background:linear-gradient(180deg,var(--teal),var(--coral));
}

.policy p, .policy li{ font-size: clamp(.97rem, 1.7vw, 1.06rem); }
.policy ul{ padding-left:1.2rem; }
.policy li{ margin:.28rem 0; }

/* リンク */
a{ color:var(--teal); text-underline-offset:3px; }
a:hover{ color:var(--teal-600); }

/* ==== 目次（最優先で整える） ==== */
.toc{
  margin: 1rem 0 1.6rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(46,196,182,.08), rgba(46,196,182,.03));
  padding:1rem 1.1rem;
  box-shadow:var(--shadow);
}
.toc > h2{
  margin:.2rem 0 .6rem !important;
  padding-left:0 !important;
  color:var(--navy);
}
.toc > h2::before{ display:none; }

.toc ol{
  list-style:none;
  margin:0; padding:0;
  counter-reset: toc;
}
.toc li{
  counter-increment: toc;
  padding:.28rem 0;
}
.toc li a{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--navy); text-decoration:none;
  border-radius:10px; padding:.18rem .35rem;
}
.toc li a::before{
  content: counter(toc);
  display:inline-grid; place-items:center;
  width:1.45rem; height:1.45rem;
  font-size:.82rem; font-weight:700;
  color:#fff; background:var(--navy);
  border-radius:50%;
}
.toc li a:hover{
  background: rgba(242,95,92,.12);
  color:var(--coral);
}

/* ==== 有効日表示 ==== */
.effective{
  margin-top:2rem; color:var(--muted); font-size:.92rem;
  border-top:1px dashed var(--line); padding-top:.8rem;
}

/* ==== 上へ戻るボタン ==== */
.backtop{ margin-top:2.3rem; }
#backToTop{
  position:fixed; right:1.2rem; bottom:1.2rem;
  display:inline-block; padding:.68rem .9rem;
  border-radius:999px; text-decoration:none;
  background:var(--coral); color:#fff; font-weight:600; font-size:.9rem;
  box-shadow:var(--shadow);
  opacity:0; pointer-events:none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, background .2s ease;
}
#backToTop.show{ opacity:1; pointer-events:auto; transform: translateY(0); }
#backToTop:hover{ background:#e45451; }

/* ==== Footer ==== */
.site-footer{
  border-top:1px solid var(--line);
  background:#fff;
}
.footer-inner{
  display:flex; flex-wrap:wrap; gap:.75rem 1rem;
  align-items:center; justify-content:space-between;
}
.footer-links{ display:flex; gap:1rem; }
.footer-links a{ color:var(--muted); text-decoration:none; }
.footer-links a[aria-current="page"]{ color:var(--ink); font-weight:700; }
.footer-links a:hover{ text-decoration:underline; }

/* ==== Utilities ==== */
img{ max-width:100%; height:auto; display:block; }
hr{ border:0; height:1px; background:var(--line); margin:1.5rem 0; }

/* ==== Responsive ==== */
@media (max-width: 560px){
  .container{ padding: 18px; }
  .breadcrumb{ font-size:.8rem; }
  .toc{ padding:.9rem 1rem; }
}