@charset "utf-8";
/* =========================================================================
   privacy.css — プライバシーポリシー（/privacy/）固有スタイル
   共通（ヘッダー/フッター/パンくず/色変数/タイポ/基準線）は common.css。
   本文は2カラム（目次TOC + 本文）。.read は使わず専用に組む。
   左端は基準線に揃え、2カラムブロックは左寄せ（センター寄せにしない）。
   ========================================================================= */

html{ scroll-behavior:smooth }

/* ============ ページヒーロー（生成り） ============ */
.phero{ position:relative; background:var(--cream); color:#000; padding:80px 0 60px; border-bottom:2px solid #000; overflow:hidden }
.phero-inner{ position:relative; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:grid; grid-template-columns:1.5fr .9fr; gap:32px; align-items:end }
.phero-text{ padding-top:24px; z-index:2 }
.phero-text .eyebrow{ color:var(--red); opacity:1 }
.phero-text h1{ font-family:var(--jp); font-weight:900; font-size:clamp(60px,8.5vw,140px); line-height:.95; letter-spacing:-0.04em; margin:24px 0 16px; text-wrap:balance; color:#000 }
.phero-text h1 .en{ font-family:var(--en); font-weight:900; font-size:.6em; margin-right:.3em; opacity:.4 }
.phero-text p{ font-size:16px; line-height:1.85; max-width:44ch; margin:0; opacity:.85 }
.phero-mascot{ display:flex; justify-content:center; align-items:flex-end; position:relative; z-index:2 }
.phero-mascot img{ height:340px; width:auto; filter:drop-shadow(0 10px 0 rgba(0,0,0,0.15)) }

/* ============ 本文（白・2カラム） ============ */
.doc{ background:#fff; color:#000; padding:96px 0 120px; border-bottom:2px solid #000 }
/* 2カラム本文ブロック：行長1080px・センター寄せ */
.doc-inner{
  width: min(1080px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  display:grid; grid-template-columns:240px 1fr; gap:64px; align-items:flex-start;
}

/* 目次（スティッキー） */
.toc{ position:sticky; top:calc(var(--header-h) + 32px); font-family:var(--jp) }
.toc .toc-title{ font-family:var(--en); font-weight:900; font-size:12px; letter-spacing:.2em; color:var(--red); text-transform:uppercase; margin-bottom:18px; padding-bottom:10px; border-bottom:2px solid #000 }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:2px }
.toc li{ counter-increment:toc }
.toc a{ display:flex; gap:12px; align-items:baseline; padding:8px 10px; font-size:13.5px; line-height:1.5; border-left:2px solid transparent; transition:border-color .15s,background .15s,color .15s }
.toc a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--en); font-weight:800; font-size:12px; color:var(--red); letter-spacing:.05em; flex:0 0 auto }
.toc a:hover{ background:var(--cream); border-left-color:var(--red) }

/* 本文カラム */
.doc-main{ min-width:0 }
.doc-lead{ font-family:var(--jp); font-weight:500; font-size:17px; line-height:1.95; margin:0 0 16px; max-width:60ch }
.doc-updated{ display:flex; gap:24px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; letter-spacing:.1em; opacity:.6; margin:32px 0 56px; padding:16px 0; border-top:2px solid #000; border-bottom:2px solid #000 }
.doc-updated strong{ font-family:var(--jp); font-weight:900; color:#000; opacity:1; letter-spacing:0 }

/* 各条 */
.art{ margin:0 0 56px; scroll-margin-top:calc(var(--header-h) + 40px) }
.art h2{ font-family:var(--jp); font-weight:900; font-size:clamp(22px,2.2vw,30px); line-height:1.4; letter-spacing:-0.02em; margin:0 0 20px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline; padding-bottom:14px; border-bottom:3px solid #000 }
.art h2 .art-no{ font-family:var(--en); font-weight:900; font-size:clamp(28px,3vw,44px); line-height:.85; letter-spacing:-0.02em; color:var(--red) }
.art p{ font-family:var(--jp); font-weight:500; font-size:16px; line-height:1.95; letter-spacing:.01em; margin:0 0 1em; max-width:62ch; text-wrap:pretty }
.art p:last-child{ margin-bottom:0 }
.art ul{ margin:1em 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; max-width:62ch }
.art ul li{ padding-left:24px; position:relative; font-size:15.5px; line-height:1.8 }
.art ul li::before{ content:""; position:absolute; left:0; top:12px; width:12px; height:2px; background:var(--red) }

/* お問い合わせ窓口ボックス（最終条） */
.contact-box{ margin-top:20px; padding:32px 36px; background:var(--cream); border:2px solid #000; max-width:62ch; box-shadow:8px 8px 0 var(--red) }
.contact-box dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:14px 24px; align-items:baseline }
.contact-box dt{ font-family:var(--en); font-weight:900; font-size:12px; letter-spacing:.15em; color:var(--red); text-transform:uppercase; white-space:nowrap }
.contact-box dd{ margin:0; font-family:var(--jp); font-weight:700; font-size:16px; line-height:1.6 }
.contact-box dd a{ border-bottom:2px solid var(--red); padding-bottom:1px; font-weight:700 }
.contact-box dd a:hover{ background:var(--red); color:#fff }
.contact-box .tel-num{ font-family:var(--en); font-weight:900; font-size:26px; letter-spacing:-0.01em; line-height:1; color:#000; display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap }
.contact-box .tel-num small{ font-family:var(--jp); font-weight:500; font-size:13px; letter-spacing:0; opacity:.7 }

.doc-foot{ margin-top:64px; padding-top:24px; border-top:2px solid #000; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap }
.doc-foot .estab{ font-family:var(--jp); font-weight:900; font-size:15px; letter-spacing:-0.01em }
.doc-foot .estab small{ font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.15em; opacity:.5; display:block; margin-bottom:2px }
.doc-foot .gotop-link{ font-family:var(--en); font-weight:800; font-size:13px; letter-spacing:.12em; border:2px solid #000; padding:10px 18px; transition:background .15s,color .15s }
.doc-foot .gotop-link:hover{ background:#000; color:#fff }

/* =========================================================================
   レスポンシブ（≤960px：1カラム・目次は静的）
   ========================================================================= */
@media (max-width:960px){
  .phero{ padding:48px 0 40px }
  .phero-inner{ grid-template-columns:1fr; gap:24px }
  .phero-text{ padding-top:8px }
  .phero-mascot{ justify-content:center }
  .phero-mascot img{ height:220px }

  .doc{ padding:64px 0 80px }
  .doc-inner{ grid-template-columns:1fr; gap:36px }
  .doc-lead{ font-size:16px }
  /* SP：制定日・運営は縦並び（design-source準拠） */
  .doc-updated{ flex-direction:column; gap:8px; margin:24px 0 48px }
  .art h2 .art-no{ font-size:30px }
  .art p{ font-size:15.5px }
  .art ul li{ font-size:15px }
  .toc{ position:static; border:2px solid #000; padding:20px 18px; background:var(--cream) }
  .contact-box{ padding:24px 22px }
  .contact-box dl{ grid-template-columns:1fr; gap:6px 0 }
  .contact-box dt{ margin-top:10px }
  .contact-box .tel-num{ font-size:28px }
  .contact-box .tel-num small{ font-size:12px }
}