/* =========================================================
   FREEMIMETICS — page.css（よくある質問・利用規約・プライバシーポリシー用）

   ▼ style.css（トップページと共通）のあとに読み込みます。
     色・文字サイズ・余白は style.css の「1. 設定」をそのまま使うので、
     トップページの見た目を変えると、こちらのページにも反映されます。
   ▼ トップページ（index.html）では読み込まないので、トップには影響しません。
   ========================================================= */


/* ---------- ヘッダー右の「ホームへ」 ---------- */
.page-back{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 16px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--navy);background:var(--soft);
  transition:background .2s;
}
.page-back span{font-family:var(--font-en);transition:transform .3s var(--ease)}
.page-back:hover{background:var(--line)}
.page-back:hover span{transform:translateX(3px)}


/* ---------- 本文の器 ---------- */
.doc{
  max-width:820px;margin:0 auto;
  padding:24px var(--pad) calc(var(--sp-section) * 2);
}

/* パンくずリスト */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--muted)}
.crumb a:hover{color:var(--accent)}
.crumb span[aria-hidden]{color:#c2cad6}

/* ページの見出し */
.doc-hd{padding:40px 0 28px}
.doc-hd h1{font-size:clamp(28px,3.2vw,40px);line-height:1.3;letter-spacing:.06em;margin-bottom:16px}
.doc-lead{font-size:var(--fs-body);line-height:1.9;color:#4b5873}

/* カテゴリへのジャンプ */
.doc-toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-section)}
.doc-toc a{
  display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--navy);background:var(--glass-strong);
  transition:background .2s,color .2s;
}
.doc-toc a:hover{background:var(--accent-soft);color:var(--accent)}


/* ---------- よくある質問 ---------- */
.faq-group{margin-bottom:var(--sp-section);scroll-margin-top:calc(var(--hd) + 16px)}
.faq-group h2{font-size:var(--fs-h3);letter-spacing:.08em;color:var(--accent);margin-bottom:12px}

.faq{border-radius:var(--radius-sm);background:var(--glass);margin-bottom:8px}
.faq summary{
  position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:16px 52px 16px 18px;cursor:pointer;list-style:none;
  font-size:var(--fs-body);font-weight:700;line-height:1.6;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
/* 右の＋（開くと−） */
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:20px;top:50%;width:12px;height:2px;border-radius:2px;
  background:var(--muted);transition:transform .3s var(--ease);
}
.faq summary::after{transform:rotate(90deg)}
.faq[open] summary::after{transform:rotate(0)}
.faq summary:hover{color:var(--accent)}
.faq-q{
  flex-shrink:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font:600 12px/1 var(--font-en);color:#fff;background:var(--accent);margin-top:1px;
}
.faq-a{padding:0 18px 18px 56px;font-size:var(--fs-body);line-height:1.9;color:var(--text)}
.faq-a p + p,.faq-a p + ul,.faq-a ul + p{margin-top:10px}
.faq-a ul{list-style:none;display:grid;gap:4px}
.faq-a li{position:relative;padding-left:16px}
.faq-a li::before{content:"";position:absolute;left:2px;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.faq-a a,.doc-body a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.faq-a strong{color:var(--navy)}


/* ---------- 解決しないときは（お問い合わせ） ---------- */
.doc-contact{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 28px;border-radius:var(--radius);background:var(--accent-soft);
}
.doc-contact h2{font-size:var(--fs-h3);letter-spacing:.06em;margin-bottom:4px}
.doc-contact p{font-size:var(--fs-sm);color:#4b5873}


/* ---------- 規約・ポリシー（利用規約・プライバシーポリシー） ---------- */
/* 目次 */
.doc-index{padding:20px 24px;border-radius:var(--radius);background:var(--glass-strong);margin-bottom:var(--sp-section)}
.doc-index-h{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.doc-index ol{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
.doc-index a{font-size:var(--fs-sm);color:var(--navy)}
.doc-index a:hover{color:var(--accent)}

/* 条文 */
.doc-body{padding:8px 32px 32px;border-radius:var(--radius);background:var(--glass);margin-bottom:var(--sp-section)}
.doc-body section{padding-top:28px;scroll-margin-top:calc(var(--hd) + 16px)}
.doc-body h2{font-size:var(--fs-h3);letter-spacing:.06em;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.doc-body p,.doc-body li{font-size:var(--fs-body);line-height:1.9}
.doc-body p + ul{margin-top:8px}
.doc-body ol{list-style:none;counter-reset:n;display:grid;gap:6px}
.doc-body ol > li{position:relative;padding-left:28px;counter-increment:n}
.doc-body ol > li::before{content:counter(n);position:absolute;left:0;top:.35em;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:600 11px/1 var(--font-en);color:var(--accent);background:var(--accent-soft)}
.doc-body ul{list-style:none;display:grid;gap:4px}
.doc-body ul > li{position:relative;padding-left:16px}
.doc-body ul > li::before{content:"";position:absolute;left:2px;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* 運営者情報・日付 */
.doc-meta dl{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;padding:16px 20px;border-radius:var(--radius-sm);background:var(--soft);font-size:var(--fs-sm)}
.doc-meta dt{font-weight:700;color:var(--muted)}

/* 関連ページのボタン */
.doc-links{display:flex;flex-wrap:wrap;gap:8px}
.doc-links .btn-ghost{display:inline-flex;align-items:center;background:var(--surface)}
.doc-links .btn-ghost:hover{background:var(--soft)}


/* ---------- タブレット・スマホ ---------- */
@media (max-width:767px){
  .doc{padding-top:16px}
  .doc-hd{padding:28px 0 20px}
  .faq summary{padding:14px 44px 14px 14px;gap:10px}
  .faq summary::before,.faq summary::after{right:16px}
  .faq-a{padding:0 14px 16px 48px}
  .doc-contact{flex-direction:column;align-items:flex-start;padding:20px}
  .doc-index{padding:16px}
  .doc-index ol{grid-template-columns:minmax(0,1fr)}
  .doc-body{padding:4px 16px 20px}
}