/* 読む文書（利用規約・プライバシーポリシー・特定商取引法に基づく表記・ご利用ガイド）
   views/pages/{terms,privacy,tokusho,help}.ejs と目次 _doc-toc.ejs。PC は左に目次が貼り付く */

/* 頭 */
.doc-hd { max-width: 980px; padding-bottom: clamp(24px, 2.6vw, 40px); }
.doc-hd .eyebrow { margin-bottom: var(--s-3); }
.doc-t { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: .12em; line-height: 1.45; }
.doc-lead { margin-top: var(--s-3); max-width: 40em; font-size: var(--fs-md); line-height: 2.1; color: var(--ink-2); }
.doc-upd { margin-top: var(--s-3); font-size: var(--fs-xs); letter-spacing: .14em; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 目次と本文 */
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); }
.doc-main { min-width: 0; max-width: 760px; }

.doc-toc { position: relative; }
.doc-toc__box summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; cursor: pointer; list-style: none; font-size: var(--fs-sm); letter-spacing: .2em; }
.doc-toc__box summary::-webkit-details-marker { display: none; }
.doc-toc__box summary i { position: relative; width: 12px; height: 12px; }
.doc-toc__box summary i::before, .doc-toc__box summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform var(--t-2) var(--ease); }
.doc-toc__box summary i::after { transform: rotate(90deg); }
.doc-toc__box[open] summary i::after { transform: rotate(0); }
.doc-toc ol { padding-bottom: var(--s-4); counter-reset: toc; }
.doc-toc a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 9px 0 9px 18px; font-size: var(--fs-sm); line-height: 1.7; letter-spacing: .06em; color: var(--ink-2); text-decoration: none; transition: color var(--t-1); }
.doc-toc a > span:only-child, .doc-toc a > span:first-child:not(.doc-toc__no) { grid-column: 1 / -1; }
.doc-toc a small { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .04em; }
.doc-toc a::before { content: ""; position: absolute; left: 0; top: calc(9px + .85em); width: 8px; height: 1px; background: currentColor; opacity: .4; transition: width var(--t-2) var(--ease), opacity var(--t-2); }
.doc-toc a:hover, .doc-toc a.is-on { color: var(--ink); }
.doc-toc a.is-on::before { width: 12px; opacity: 1; background: var(--moss); }
.doc-toc__no { font-family: var(--f-min); font-size: var(--fs-xs); letter-spacing: .1em; color: var(--moss); min-width: 3.4em; }
@media (max-width: 999px) {
  .doc-toc { border-bottom: 1px solid var(--rule); margin-bottom: var(--s-4); }
}
@media (min-width: 1000px) {
  .doc-grid { grid-template-columns: 240px minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); }
  .doc-toc__box { position: sticky; top: calc(var(--hd) + 32px); max-height: calc(100vh - var(--hd) - 64px); overflow-y: auto; padding-top: var(--s-5); scrollbar-width: thin; }
  .doc-toc__box summary { pointer-events: none; padding: 0 0 var(--s-3); font-size: var(--fs-xs); color: var(--ink-3); }
  .doc-toc__box summary i { display: none; }
}

/* 節 */
.doc-sec { padding-block: clamp(28px, 3.2vw, 44px); scroll-margin-top: calc(var(--hd) + 24px); }
.doc-sec + .doc-sec { border-top: 1px solid var(--rule); }
.doc-h { font-size: var(--fs-xl); letter-spacing: .1em; line-height: 1.6; scroll-margin-top: calc(var(--hd) + 24px); }
.doc-no { margin-right: .15em; color: var(--moss); font-size: .78em; letter-spacing: .14em; }
.doc-h + * { margin-top: var(--s-4); }
.doc-body { font-size: var(--fs-md); line-height: 2.1; }
.doc-body > * + * { margin-top: var(--s-4); }
.doc-body a:not(.lnk) { text-decoration: underline; text-decoration-color: var(--rule-strong); transition: text-decoration-color var(--t-1); }
.doc-body a:not(.lnk):hover { text-decoration-color: currentColor; }
.doc-body strong { font-weight: 500; background: linear-gradient(transparent 62%, var(--dew-2) 62%); }
.doc-sub { margin-top: var(--s-5) !important; font-size: var(--fs-lg); letter-spacing: .08em; }
.doc-sub + p { margin-top: var(--s-2); }

.doc-list > li { position: relative; padding-left: 1.4em; }
.doc-list > li + li { margin-top: var(--s-2); }
.doc-list > li::before { content: ""; position: absolute; left: .2em; top: 1.05em; width: .5em; height: 1px; background: var(--ink-2); }

.doc-dl { border-top: 1px solid var(--rule); }
.doc-dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.doc-dl dt { font-size: var(--fs-sm); font-weight: 500; letter-spacing: .08em; color: var(--ink-2); }
.doc-dl dd { margin: 0; line-height: 1.9; }
@media (min-width: 700px) {
  .doc-dl > div { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5); padding: 18px 0; }
}

.doc-note { padding-left: var(--s-4); border-left: 1px solid var(--rule-strong); font-size: var(--fs-sm); line-height: 2; color: var(--ink-2); }
.doc-sec--end { margin-top: var(--s-6); }
.doc-sec--end .doc-body { color: var(--ink-2); }
.doc-cta { margin-top: var(--s-4); }
.doc .lnk .ic { width: 14px; height: 14px; }

@media print {
  .doc-toc, .hd, .ft { display: none !important; }
  .doc-grid { display: block; border: 0; }
}

/* 文の切れ目で折り返す（p 以外の箱も） */
.doc-list > li, .doc-dl dd, .doc-toc a { word-break: auto-phrase; line-break: strict; text-wrap: pretty; }