/* 下層ページ（ご用意いただく書類・届出の手引き・会社概要・利用規約・個人情報の取り扱い）の部品。
   色・字・ヘッダー・フッター・ボタンは _site.css（LP と共通）。先に _site.css を読み、その上にこれを読む。
   決まり: 線は LP と同じ墨の細線（--line）と、内側の区切りだけ薄い線（--soft）。強調は clay。角丸は LP と同じ 14px（枠）・8px（小物） */

/* 本文: 読み物なので LP より少し小さく・行間を広く。1行はおよそ 40〜45 字（本文の列は 800px） */
body{font-size:17px;line-height:1.85}
@media(min-width:1000px){body{font-size:18px}}
main.wrap{max-width:840px;padding-bottom:8px}
@media(min-width:1000px){main.wrap{max-width:960px}}
p,li,dd{text-wrap:pretty}
p,li{color:var(--body)}
main a{color:var(--clay-text);text-decoration-thickness:1px;text-underline-offset:.22em}
main a:hover{text-decoration-thickness:2px}
b,strong{color:var(--ink)}
code{font-size:.9em;background:var(--paper);border:1px solid var(--soft);border-radius:4px;padding:1px 5px;word-break:break-all}

/* 見出し。語の途中で折らない（スマホで「ご用／意」のように切れないように）。<wbr> の位置か、句読点・括弧で折る */
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
h1,h2,h3{word-break:keep-all;word-break:auto-phrase;overflow-wrap:anywhere}
h1{font-size:28px;line-height:1.3;letter-spacing:-.01em;margin:40px 0 10px}
h2{font-size:23px;line-height:1.4;margin:56px 0 16px;padding-top:22px;border-top:1px solid var(--line)}
h3{font-size:19px;line-height:1.45;margin:32px 0 8px}
@media(min-width:1000px){h1{font-size:clamp(34px,3.1vw,44px);margin-top:64px}h2{font-size:28px;margin-top:72px;padding-top:26px}h3{font-size:21px}}
.crumb{margin:40px 0 0;font-size:15px;font-weight:700;color:var(--clay-text)}
.crumb a{color:inherit}
.crumb + h1{margin-top:8px}
@media(min-width:1000px){.crumb{margin-top:64px;font-size:17px}}
.meta{color:var(--faint);font-size:14px;margin:0}
.meta.end{margin-top:48px;padding-top:16px;border-top:1px solid var(--soft);line-height:1.75}
.lead{color:var(--body);margin-top:20px}
@media(min-width:1000px){.lead{font-size:19px}}
.draft{margin-top:20px;border:1px dashed var(--clay-text);border-radius:8px;color:var(--clay-text);padding:10px 14px;font-size:15px}

ol,ul{padding-left:1.4em;margin:12px 0}
li{margin:6px 0}
li::marker{color:var(--clay-text)}

/* 表: LP の料金表と同じ、墨の枠と角丸 14px */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:16px 0}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{border-top:1px solid var(--soft);padding:12px 14px;text-align:left;vertical-align:top}
thead th{border-top:0;border-bottom:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:500;padding-block:10px}
tbody tr:first-child > *{border-top:0}
thead + tbody tr:first-child > *{border-top:0}
th{color:var(--muted);font-weight:500}
td{color:var(--body)}
.tbl .who{white-space:nowrap;width:5.5em}
.tbl td{word-break:auto-phrase;overflow-wrap:anywhere}
.kv th{white-space:nowrap;width:7em}
@media(max-width:599px){th,td{padding:10px 12px}}
@media(max-width:359px){table{font-size:15px}th,td{padding:10px}}
/* 会社概要の表: スマホでは項目名を上、内容を下に */
@media(max-width:479px){.kv tr{display:block;border-top:1px solid var(--soft);padding:10px 14px}.kv tr:first-child{border-top:0}.kv th,.kv td{display:block;border:0;padding:0;width:auto}.kv th{font-size:14px}}
@media(min-width:1000px){table{font-size:17px}th,td{padding:14px 20px}}
/* 列の多い表（届出の手引き）: スマホでは1行ずつのカードにする（右が切れて読めなかった） */
@media(max-width:599px){
  .tbl.stack{border:0;border-radius:0;overflow:visible}
  .tbl.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tbl.stack tr{display:block;border-top:1px solid var(--line);padding:12px 0}
  .tbl.stack tbody tr:last-child{border-bottom:1px solid var(--line)}
  .tbl.stack td{display:grid;grid-template-columns:5.5em 1fr;gap:12px;border:0;padding:3px 0}
  .tbl.stack td::before{content:attr(data-label);color:var(--muted);font-size:14px;padding-top:2px}
  .tbl.stack td:first-child{display:block;font-weight:700;color:var(--ink);padding-bottom:6px}
  .tbl.stack td:first-child::before{content:none}
}
.tag{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--clay-text);color:var(--clay-text);font-size:12px;line-height:1.6;border-radius:3px;vertical-align:1px;white-space:nowrap}
.note{font-size:14px;color:var(--faint);margin-top:6px}
.law{font-size:15px;line-height:1.75;color:var(--muted);border-left:2px solid var(--soft);padding-left:14px}

/* 冒頭の答え（LP の「完了」と同じ、clay の上線） */
.answer{margin-top:24px;border-top:2px solid var(--clay);border-bottom:1px solid var(--soft);padding:16px 0 18px;display:grid;gap:8px}
.answer p{margin:0;color:var(--ink);line-height:1.8}
@media(min-width:1000px){.answer p{font-size:19px}}
/* 注意書き（公式ページではない等） */
.notice{font-size:15px;line-height:1.75;color:var(--muted);background:var(--paper);border-radius:8px;padding:12px 16px;margin-top:16px}
/* 問い合わせ・お申し込みへの案内 */
.contact{margin-top:32px}   /* 色の枠はつけない（2026-11-01 Leo） */
.contact p{margin:6px 0}
.contact a{font-weight:700}
/* 次にすること（申請のあと） */
.next{border-top:2px solid var(--clay);border-bottom:1px solid var(--line);padding:14px 0 16px;margin-top:16px;display:grid;gap:8px}
.next p{margin:0}

/* documents.html: 書類ごとの3項目（LP の法人の節の表と同じ形: 左に clay の見出し、行ごとに線） */
.doc{margin:10px 0 0;border-top:1px solid var(--line)}
.doc div{display:grid;grid-template-columns:8.5em 1fr;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--soft)}
.doc dt{color:var(--clay-text);font-size:15px;font-weight:700;padding-top:2px}
.doc dd{margin:0;color:var(--body)}
@media(max-width:559px){.doc div{grid-template-columns:1fr}}

/* guide*.html: 目次・欄の説明・手引きの一覧 */
/* 手順の流れ（ページの最初のサマリ）: 四角を矢印でつなぎ、押すとその節へ。画面に入ったら1回、順に点く（flow.js・2026-10-25 Leo） */
.toc{list-style:none;counter-reset:toc;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:10px}
.toc li{counter-increment:toc;margin:0;display:flex;align-items:center;transition:opacity .6s,transform .6s}
.toc li+li::before{content:"→";color:var(--clay-text);font-weight:700;margin:0 8px}
.toc a{display:flex;gap:8px;align-items:baseline;padding:9px 14px;border:1px solid var(--soft);background:var(--bg);color:var(--ink);text-decoration:none;transition:border-color .6s}
.toc a::before{content:counter(toc);color:var(--clay-text);font-weight:700;font-variant-numeric:tabular-nums}
.toc a:hover{border-color:var(--clay);color:var(--clay-text)}
.toc small{color:var(--muted);font-size:.85em}
.toc.pre li{opacity:.2;transform:translateY(4px)}
.toc.pre li.on{opacity:1;transform:none}
.toc.pre li.on a{border-color:var(--clay)}
.toc-play{display:inline-flex;margin-top:12px;font:inherit;font-size:14px;font-weight:700;color:var(--clay-text);background:none;border:1px solid var(--clay);padding:6px 12px;cursor:pointer}
.toc-play:hover{background:var(--paper)}
.toc + h2,.toc-play + h2{margin-top:44px}
@media(prefers-reduced-motion:reduce){.toc li,.toc a{transition:none}}
.fields{margin:16px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--soft)}
.fields dt{font-weight:700;color:var(--ink);padding-top:14px;border-top:1px solid var(--soft)}
.fields dt:first-child{border-top:0}
.fields dd{margin:4px 0 0;padding-bottom:14px;color:var(--body)}
.card{position:relative;border-bottom:1px solid var(--line);padding:18px 0}
h2 + .card{border-top:1px solid var(--line);margin-top:20px}
.card h3{margin:0 0 6px}
.card h3 a{display:flex;justify-content:space-between;gap:16px;color:var(--ink);text-decoration:none}
.card h3 a::after{content:"→";color:var(--clay-text);flex:none}
.card h3 a::before{content:"";position:absolute;inset:0}
.card:hover h3 a{color:var(--clay-text)}
.card p{margin:0}

/* 画面のスクリーンショット: 画面の写しと分かるように、紙色の台に窓の枠（左上の3つの点）をつけて載せる。押すと原寸で開く */
.shot{position:relative;margin:24px 0;background:var(--paper);border:1px solid var(--soft);border-radius:14px;padding:30px 12px 12px}
.shot::before{content:"";position:absolute;top:12px;left:16px;width:36px;height:8px;background:radial-gradient(circle,#c9c3b9 3.5px,transparent 4px) 0 0/12px 8px repeat-x}
.shot a{position:relative;display:block;border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(27,27,31,.14),0 2px 6px rgba(27,27,31,.08);cursor:zoom-in}
.shot a::after{content:"";position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;background:rgba(27,27,31,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/18px no-repeat}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{margin-top:10px;font-size:15px;line-height:1.6;color:var(--muted)}
.shot.half{max-width:440px}
@media(min-width:760px){.shot.half{display:inline-block;vertical-align:top;width:calc(50% - 14px);margin-right:16px}.shot.half + .shot.half{margin-right:0}}
/* スマホ: 余白の分まで画面いっぱいに広げて、画像を少しでも大きく */
@media(max-width:599px){.shot{margin-inline:-20px;border-radius:0;border-inline:0;padding:28px 8px 10px}.shot::before{left:12px}.shot figcaption{padding-inline:8px}.shot.half{max-width:none}}