/* Doreco 公開サイト（doreco.jp）。アプリと同じ「Dorecoグリーン」と判子のデザイン */
:root {
  --green: #00A83D;
  --green-d: #007F2E;
  --green-dd: #003D1A;
  --green-p: #E2F4E8;
  --ink: #121613;
  --muted: #5B6360;
  --line: #DDE4DE;
  --bg: #F4F7F3;
  --red: #C8372D;
  --amber: #FFF4D6;
  --line-green: #06C755;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif; color: var(--ink); background: #fff; line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: var(--green-d); }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* ヘッダー */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.logo { font-weight: 900; font-size: 22px; letter-spacing: .02em; color: #0F2343; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.logo i { width: 30px; height: 30px; border-radius: 7px; display: inline-block; background: url('/app/icon.svg') center / contain no-repeat; }
.site-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: 14px; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--green-d); }
@media (max-width: 720px) { .site-nav a:not(.btn) { display: none; } }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 800; text-decoration: none; padding: 14px 26px; font-size: 16px; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-2px); }
.btn.line { background: var(--line-green); color: #fff; box-shadow: 0 6px 20px rgba(6,199,85,.3); }
.btn.green { background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-dd); }
.btn.ghost { background: #fff; color: var(--green-dd); border: 2px solid var(--green); }
.btn.small { padding: 9px 16px; font-size: 14px; }
.btn svg { width: 20px; height: 20px; }
.note-sm { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ヒーロー */
.hero { background: linear-gradient(180deg, #EAF6EE 0%, #fff 100%); padding: 56px 0 40px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.eyebrow { display: inline-block; background: #fff; border: 1px solid #BFE3CB; color: var(--green-d); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 5px 14px; }
.hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.2; margin: 16px 0 14px; font-weight: 900; letter-spacing: -.01em; text-wrap: balance; word-break: auto-phrase; }
.hero h1 em { font-style: normal; color: var(--green-d); background: linear-gradient(transparent 62%, #CDEFD8 62%); }
.hero p.lead { font-size: 17px; color: #333; margin: 0 0 24px; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero .badges span { font-size: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; color: #333; }
.phones { position: relative; height: 560px; }
.phone { position: absolute; width: 250px; border-radius: 34px; border: 8px solid #10160F; background: #10160F; box-shadow: 0 30px 60px rgba(0,61,26,.25); overflow: hidden; }
.phone img { border-radius: 26px; }
.phone.p1 { left: 0; top: 30px; transform: rotate(-5deg); }
.phone.p2 { right: 0; top: 0; transform: rotate(4deg); z-index: 2; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .phones { height: 430px; max-width: 380px; margin: 0 auto; width: 100%; }
  .phone { width: 190px; border-width: 6px; border-radius: 28px; }
}

/* セクション */
section.block { padding: 72px 0; }
section.block.alt { background: var(--bg); }
.kicker { color: var(--green-d); font-weight: 800; font-size: 13px; letter-spacing: .12em; }
h2.title { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.3; margin: 6px 0 14px; font-weight: 900; text-wrap: balance; word-break: auto-phrase; }
p.sub { color: #333; margin: 0 0 32px; max-width: 760px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .grid3, .grid2 { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: #333; font-size: 15px; }
.icon { width: 44px; height: 44px; border-radius: 12px; background: var(--green-p); display: grid; place-items: center; font-size: 22px; margin-bottom: 10px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: var(--green-p); color: var(--green-dd); }
.tag.pro { background: #10160F; color: #fff; }

/* 法律のこと */
.facts { display: grid; gap: 10px; }
.fact { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 12px; padding: 14px 16px; }
.fact b { display: block; }
.fact small { color: var(--muted); }

/* 見本の画面（横に並ぶ） */
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.shots figure { margin: 0; }
.shots img { border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.shots figcaption { font-size: 13px; color: #333; margin-top: 8px; text-align: center; font-weight: 700; }
@media (max-width: 860px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 料金 */
.toggle { display: inline-flex; background: #E6ECE7; border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.toggle button { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--muted); font-family: inherit; }
.toggle button[aria-pressed=true] { background: #fff; color: var(--green-dd); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 860px; }
.plans.plans3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; }
@media (max-width: 960px) { .plans.plans3 { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px; position: relative; }
.plan.reco { border: 2px solid var(--green); box-shadow: 0 12px 30px rgba(0,168,61,.12); }
.plan .ribbon { position: absolute; top: -13px; left: 20px; background: var(--green); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 999px; }
.plan h3 { margin: 0; font-size: 22px; }
.price { font-size: 40px; font-weight: 900; margin: 6px 0 0; letter-spacing: -.02em; }
.price small { font-size: 14px; color: var(--muted); font-weight: 500; }
.per { color: var(--green-d); font-weight: 800; font-size: 15px; }
.plan ul { padding-left: 0; list-style: none; margin: 14px 0 0; }
.plan li { padding: 6px 0 6px 26px; position: relative; border-top: 1px dashed #E6ECE7; font-size: 14px; }
.plan li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 12px; height: 7px; border-left: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(-45deg); }
.plan li.no { color: #8B938F; }
.plan li.no::before { border: 0; width: 10px; height: 2px; background: #B9C2BC; transform: none; top: 16px; }
.founder { background: #FFF8E5; border: 1px solid #F3D98B; border-radius: 16px; padding: 14px 18px; margin-top: 18px; max-width: 860px; }

/* 表 */
table.tbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; font-size: 14px; }
table.tbl th, table.tbl td { border-bottom: 1px solid #E6ECE7; padding: 10px 12px; text-align: left; vertical-align: top; }
table.tbl thead th { background: #EEF5F0; font-size: 13px; }
table.tbl td.c, table.tbl th.c { text-align: center; }
table.tbl thead th, table.tbl td:first-child b { white-space: nowrap; }
table.tbl td.c { white-space: nowrap; }
@media (max-width: 560px) { table.tbl { font-size: 13px; } table.tbl th, table.tbl td { padding: 9px 8px; } table.tbl td.c { white-space: normal; min-width: 3.5em; } }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.yes { color: var(--green-d); font-weight: 900; }
.no { color: #A3ACA7; }

/* よくある質問 */
details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; }
details summary { font-weight: 800; cursor: pointer; list-style: none; position: relative; padding-right: 24px; }
details summary::after { content: '＋'; position: absolute; right: 0; top: 0; color: var(--green-d); }
details[open] summary::after { content: '－'; }
details p { margin: 10px 0 0; color: #333; font-size: 15px; }

/* 最後のCTA */
.cta { background: var(--green-dd); color: #fff; text-align: center; padding: 72px 0; }
.cta h2 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 10px; }
.cta p { color: #CFEBD8; margin: 0 0 24px; }

/* フッター */
footer.site-foot { background: #0A1830; color: #A9B4AD; padding: 40px 0; font-size: 13px; }
footer.site-foot a { color: #DCE6DF; text-decoration: none; margin-right: 18px; }
footer.site-foot .links { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px 0; }

/* 文書のページ（規約など） */
.doc { padding: 40px 0 72px; }
.doc h1 { font-size: 28px; margin: 0 0 6px; }
.doc .draft { background: var(--amber); border: 1px solid #F3D98B; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 14px 0 24px; }
.doc h2 { font-size: 19px; margin: 30px 0 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.doc h3 { font-size: 16px; margin: 18px 0 6px; }
.doc p, .doc li { font-size: 15px; }
.doc ol, .doc ul { padding-left: 1.4em; }
.doc dl { display: grid; grid-template-columns: 220px 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0; }
.doc dt, .doc dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.doc dt { background: #F2F6F3; font-weight: 700; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.doc th { background: #F2F6F3; font-weight: 700; }
@media (max-width: 640px) { .doc table { font-size: 13px; } .doc th, .doc td { padding: 6px; } }
@media (max-width: 640px) { .doc dl { grid-template-columns: 1fr; } .doc dt { border-bottom: 0; } }

/* 使い方（取扱説明書） */
.guide-toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 18px 0 30px; }
.guide-toc a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--ink); font-weight: 700; }
.step { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; margin: 26px 0; }
.step img { border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.step ol { margin: 0; padding-left: 1.3em; }
.step ol li { margin-bottom: 6px; }
.tip { background: var(--green-p); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-top: 10px; line-height: 1.7; }
.tip.warn { background: var(--amber); border: 1px solid #F3D98B; }
.guide h2 { scroll-margin-top: 76px; }
.guide .step p, .guide .step li { font-size: 15px; line-height: 1.8; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 14px 0 6px; }
.vids figure { margin: 0; }
.vids video { width: 100%; max-width: none; aspect-ratio: 9 / 16; object-fit: cover; }
.vids figcaption { font-size: 13px; font-weight: 700; margin-top: 6px; text-align: center; }
.guide figure.wide { margin: 14px 0; max-width: 520px; }
.guide figure.wide img { border-radius: 16px; border: 1px solid var(--line); }
.guide figure.wide figcaption { font-size: 13px; color: #555; margin-top: 6px; }
.faq-list { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0; }
.faq-list dt { background: #F2F6F3; font-weight: 700; padding: 10px 14px; font-size: 15px; }
.faq-list dd { margin: 0; padding: 10px 14px 14px; font-size: 15px; border-bottom: 1px solid var(--line); }
.print-only { display: none; }
@media (max-width: 760px) { .step { grid-template-columns: 1fr; } .step img { max-width: 300px; } }
video { width: 100%; max-width: 360px; border-radius: 22px; border: 1px solid var(--line); background: #000; }

/* 表示のアニメーション（動きを減らす設定の人には出さない） */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn:hover { transform: none; } }
@media print {
  .site-head, .cta, footer.site-foot, .guide-actions, .vids, .guide-toc { display: none !important; }
  .print-only { display: block; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { font-size: 12px; }
  .doc { padding: 0; }
  .guide h1 { font-size: 22pt; }
  .guide h2 { font-size: 15pt; break-after: avoid; page-break-after: avoid; margin-top: 18px; }
  .step { grid-template-columns: 46mm 1fr; gap: 7mm; margin: 10px 0; break-inside: avoid; page-break-inside: avoid; }
  .step img { box-shadow: none; border-radius: 10px; width: 100%; max-width: 100% !important; }
  .step > * { min-width: 0; }
  .guide .step p, .guide .step li { font-size: 10.5pt; line-height: 1.65; }
  .tip { font-size: 10pt; }
  .guide figure.wide { max-width: 110mm; break-inside: avoid; }
  table.tbl, .faq-list { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}
.soon { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #FFF4E5; color: #8A4B00; font-size: 12px; font-weight: 700; vertical-align: middle; }
.soon-note { color: #8A4B00; }

/* 記録用紙（/templates）：画面では見本として、印刷ではA4の用紙として */
.tpl .sheet { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 28px 0; overflow-x: auto; }
.tpl .sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tpl .sheet-bar h2 { border: 0; margin: 0; padding: 0; font-size: 18px; }
.tpl .sheet h3 { font-size: 14px; margin: 14px 0 6px; }
.tpl .sheet-head { display: flex; justify-content: space-between; font-size: 13px; margin: 10px 0 0; padding-bottom: 4px; border-bottom: 1px solid #333; }
.tpl .sheet-head span:first-child { min-width: 50%; }
.tpl .sheet-scroll { overflow-x: auto; }
.tpl table.form { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: auto; margin: 0 0 6px; }
.tpl table.form th, .tpl table.form td { border: 1px solid #555; padding: 4px 6px; vertical-align: top; text-align: left; }
.tpl table.form thead th { background: #F1F4F2; font-weight: 700; text-align: center; vertical-align: middle; white-space: nowrap; }
.tpl table.form tbody td { height: 30px; white-space: nowrap; color: #666; }
.tpl table.form.kv th { background: #F1F4F2; white-space: nowrap; width: 1%; }
.tpl table.form.kv td { height: 28px; white-space: normal; }
.tpl table.form small { font-weight: 400; font-size: 10px; }
.tpl .sheet-foot { font-size: 11px; color: var(--muted); margin: 6px 0 0; }
.tpl .tpl-cta { background: #EEF5F0; border-radius: 14px; padding: 18px 20px; margin-top: 28px; }
.tpl .tpl-cta h2 { border: 0; margin-top: 0; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .tpl .tpl-text, .tpl .sheet-bar button { display: none !important; }
  .tpl .sheet { border: 0; padding: 0; margin: 0; border-radius: 0; }
  .tpl #rollcall, .tpl #daily { break-after: page; page-break-after: always; }
  body.print-one .tpl .sheet { break-after: auto !important; page-break-after: auto !important; }
  .tpl .sheet-bar h2 { font-size: 14pt; }
  .tpl .sheet { overflow: visible; }
  .tpl .sheet h3 { margin: 3mm 0 1.5mm; font-size: 10.5pt; }
  .tpl table.form { font-size: 8.5pt; margin-bottom: 1mm; }
  .tpl table.form th, .tpl table.form td { padding: 1mm 1.6mm; }
  .tpl table.form tbody td { height: 7.2mm; }
  .tpl table.form.kv td { height: 6.5mm; }
  .tpl .sheet-foot { margin-top: 1.5mm; font-size: 8pt; }
  .tpl .sheet-scroll { overflow: visible; }
  body.print-one .tpl .sheet:not(.print-target) { display: none !important; }
}
/* 1分チェック・割に合う？の計算 */
[data-anzen-check] fieldset, [data-calc] fieldset { border: 0; padding: 0; margin: 0 0 14px; }
[data-anzen-check] legend, [data-calc] legend { font-weight: 700; margin-bottom: 6px; }
[data-anzen-check] label { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 6px 0; }
[data-calc] .grid-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
@media (max-width: 640px) { [data-calc] .grid-in { grid-template-columns: 1fr; } }
[data-calc] label.in, .estimate label.in { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
[data-calc] [hidden], [data-anzen-result][hidden], .estimate [hidden] { display: none !important; }
[data-calc] input[type=text], [data-calc] input[inputmode], .estimate input[inputmode] { border: 1px solid var(--line, #DDE5DF); border-radius: 10px; padding: 10px 12px; font-size: 16px; }
.calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.calc-out div { background: #fff; border: 1px solid #DDE5DF; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.calc-out small { color: #5B6360; }
.calc-out b { font-size: 18px; }
.calc-out .big { background: #F4FBF6; border-color: #BFE3CB; }
.calc-out .big b { font-size: 24px; color: #00752B; }
@media (max-width: 640px) { .calc-out { grid-template-columns: 1fr; } }
/* 会社向けページ：料金の目安を計算する（印刷すると、この目安だけが1枚に出る） */
.estimate { margin-top: 22px; background: #fff; border: 1px solid #CFE3D6; border-radius: 16px; padding: 18px 20px; }
.estimate h3 { margin: 0 0 6px; font-size: 18px; }
.estimate fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.estimate legend { font-weight: 700; margin-bottom: 6px; }
.estimate fieldset label { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 6px 0; }
.estimate .grid-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-bottom: 12px; }
@media (max-width: 640px) { .estimate .grid-in { grid-template-columns: 1fr; } }
.estimate .est-sum { margin: 6px 0 8px; }
.estimate .est-tbl td.num, .estimate .est-tbl th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.estimate .est-tbl tr.sub td { border-top: 2px solid var(--line); }
.estimate .est-tbl tr.total td { font-weight: 800; font-size: 1.05em; }
.estimate .est-head { justify-content: space-between; border-bottom: 1px solid #333; padding-bottom: 4px; margin-bottom: 8px; }
@media print {
  body.print-estimate > *:not(#est-print) { display: none !important; }
  #est-print .estimate { border: 0; padding: 0; margin: 0; }
  #est-print .no-print { display: none !important; }
  #est-print .est-head { display: flex !important; }
}
#est-print { display: none; }
@media print { body.print-estimate #est-print { display: block; } }
/* 料金の目安：ラジオボタンを、文字ごと大きく押せるように（総合検証 10/17） */
.estimate fieldset label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 4px; cursor: pointer; }
.estimate input[type=radio] { width: 22px; height: 22px; }

/* ============ トップページ（2026-10 改訂）：LINEの背景画像と同じ紺×黄×緑 ============ */
body.lp { --navy: #0F2343; --navy-2: #16305A; --navy-3: #0A1830; --yellow: #FFD23F; --ink-2: #2B3340; }
.lp .site-head { background: rgba(255,255,255,.94); }
.lp .site-nav a.btn { color: #fff; }
.btn.big { padding: 17px 30px; font-size: 17px; }
.btn.big svg { width: 22px; height: 22px; }

/* ファーストビュー */
.lp-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(110% 90% at 20% 0%, #1B3866 0%, #0F2343 52%, #0A1830 100%); }
.lp-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: rgba(255,255,255,.08); }
.lp-hero > .wrap { display: grid; grid-template-columns: 1.08fr .92fr; gap: 32px; align-items: center; padding-top: 64px; padding-bottom: 40px; }
.lp-eyebrow { display: inline-block; background: var(--yellow); color: var(--navy); font-weight: 800; font-size: 13px; border-radius: 999px; padding: 6px 14px; letter-spacing: .02em; }
.lp-hero h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.18; margin: 18px 0 18px; font-weight: 900; letter-spacing: -.01em; text-wrap: balance; word-break: auto-phrase; }
.lp-hero h1 em { font-style: normal; color: var(--yellow); }
.lp-lead { font-size: 17px; line-height: 1.85; color: #D5DFEE; margin: 0 0 26px; max-width: 34em; }
.lp-lead b { color: #fff; }
.lp-hero .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.lp-textlink { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 2px; }
.lp-textlink:hover { border-color: var(--yellow); color: var(--yellow); }
.lp-checks { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: #C9D6EA; }
.lp-checks li { position: relative; padding-left: 20px; }
.lp-checks li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 10px; height: 5px; border-left: 2.5px solid #2EE06A; border-bottom: 2.5px solid #2EE06A; transform: rotate(-45deg); }
.lp-hero-phone { position: relative; height: 560px; }
.lp-phone { position: absolute; width: 252px; border-radius: 38px; padding: 7px; background: #05101F; box-shadow: 0 40px 80px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.lp-phone img { border-radius: 31px; }
.lp-phone.front { right: 6%; top: 0; z-index: 2; }
.lp-phone.back { left: 2%; top: 64px; transform: scale(.88); transform-origin: left top; opacity: .55; filter: saturate(.7); }
.lp-float { position: absolute; z-index: 3; left: 0; bottom: 70px; display: flex; align-items: center; gap: 8px; background: #fff; color: var(--navy); font-weight: 800; font-size: 14px; border-radius: 14px; padding: 12px 16px; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.lp-float svg { width: 22px; height: 22px; color: #fff; background: var(--green); border-radius: 50%; padding: 3px; flex: none; }
/* 期限のおび */
.lp-deadline { background: rgba(0,0,0,.28); border-top: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.lp-deadline .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 14px; padding-bottom: 14px; }
.lp-deadline-label { color: #C9D6EA; }
.lp-deadline-date { color: #fff; font-size: 16px; }
.lp-deadline-left { color: var(--yellow); font-weight: 700; }
.lp-deadline-left b { font-size: 22px; font-variant-numeric: tabular-nums; }
.lp-deadline-note { color: #93A4BF; font-size: 12.5px; }
.lp-deadline a { margin-left: auto; color: #fff; font-weight: 700; text-decoration: none; }
.lp-deadline a:hover { color: var(--yellow); }
@media (max-width: 860px) {
  .lp-hero > .wrap { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 8px; gap: 8px; }
  .lp-hero-phone { height: 400px; max-width: 360px; width: 100%; margin: 8px auto 0; }
  .lp-phone { width: 196px; border-radius: 30px; padding: 6px; }
  .lp-phone img { border-radius: 25px; }
  .lp-phone.front { right: 4%; }
  .lp-phone.back { left: 0; top: 48px; }
  .lp-float { bottom: 36px; font-size: 13px; padding: 10px 12px; }
  .lp-deadline a { margin-left: 0; }
}
@media (max-width: 400px) { .lp-hero-phone { height: 360px; } .lp-phone { width: 176px; } }

/* 法令：3つのこと */
.lp-risks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-risk { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 20px; border-top: 4px solid var(--navy); }
.lp-risk.strong { background: var(--navy); color: #fff; border-color: var(--navy); border-top-color: var(--yellow); }
.lp-risk-amount { font-weight: 900; color: var(--navy); font-size: 18px; line-height: 1.2; min-height: 56px; display: flex; align-items: flex-end; gap: 2px; flex-wrap: wrap; }
.lp-risk-amount b { font-size: 46px; letter-spacing: -.02em; line-height: 1; }
.lp-risk-amount span { color: #B3261E; }
.lp-risk.strong .lp-risk-amount { color: var(--yellow); }
.lp-risk-big { color: var(--yellow) !important; font-size: 24px; line-height: 1.3; }
.lp-risk h3 { font-size: 17px; margin: 12px 0 6px; }
.lp-risk p { margin: 0; font-size: 14.5px; color: #3A4250; line-height: 1.8; }
.lp-risk.strong p { color: #D5DFEE; }
.lp-risk.strong b { color: #fff; }
.lp-source { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.lp-duty { margin-top: 40px; }
.lp-duty-title { font-size: 19px; margin: 0 0 12px; }
.lp-duty-tbl td:nth-child(2), .lp-duty-tbl td:nth-child(3) { white-space: nowrap; }
.lp-duty-tbl .yes { font-size: 18px; }
@media (max-width: 860px) { .lp-risks { grid-template-columns: 1fr; } .lp-risk-amount { min-height: 0; } }
@media (max-width: 560px) { .lp-duty-tbl td:nth-child(2) { white-space: normal; } }

/* 使い方の3つ */
.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-steps li { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.lp-steps h3 { margin: 8px 0 6px; font-size: 19px; }
.lp-steps p { margin: 0; font-size: 15px; color: #333; }
.lp-step-no { display: inline-block; background: var(--navy); color: #fff; font-weight: 800; font-size: 13px; border-radius: 8px; padding: 3px 12px; }
.lp-shot { margin: 0; }
.lp-steps .lp-shot { aspect-ratio: 600 / 760; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: #F2F4F7; }
.lp-steps .lp-shot img { width: 100%; }
@media (max-width: 860px) {
  .lp-steps { grid-template-columns: 1fr; gap: 14px; }
  .lp-steps li { flex-direction: row; align-items: flex-start; padding: 14px; gap: 14px; }
  .lp-steps .lp-shot { width: 38%; flex: none; aspect-ratio: 600 / 900; border-radius: 12px; }
  .lp-steps h3 { font-size: 17px; margin-top: 6px; }
  .lp-steps p { font-size: 14px; }
}

/* 左右に並べる（文と画面） */
.lp-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.lp-split.reverse { grid-template-columns: .85fr 1.15fr; }
.lp-shot.wide-phone { max-width: 300px; margin: 0 auto; border-radius: 34px; padding: 7px; background: #0B1220; box-shadow: 0 30px 60px rgba(15,35,67,.22); }
.lp-shot.wide-phone img { border-radius: 28px; }
.lp-points { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; }
.lp-points li { padding-left: 18px; border-left: 3px solid var(--green); }
.lp-points b { display: block; font-size: 17px; }
.lp-points span { display: block; color: #3A4250; font-size: 15px; }
.lp-points.light li { border-left-color: var(--yellow); }
.lp-points.light span { color: #C9D6EA; }
@media (max-width: 860px) {
  .lp-split, .lp-split.reverse { grid-template-columns: 1fr; gap: 28px; }
  .lp-split.reverse > figure { order: 2; }
  .lp-shot.wide-phone { max-width: 240px; }
}
section.block.lp-dark { background: var(--navy); color: #fff; }
.lp-dark .kicker { color: var(--yellow); }
.lp-dark p.sub { color: #D5DFEE; }

/* 紙との比べ */
.lp-compare th[scope], .lp-compare tbody th { background: #F6F8FA; font-size: 14px; white-space: nowrap; width: 1%; }
.lp-compare td { color: #5B6360; }
.lp-compare .lp-col-d { color: var(--ink); font-weight: 700; background: #F1FAF4; }
.lp-compare thead .lp-col-d { background: var(--green); color: #fff; }
@media (max-width: 560px) { .lp-compare tbody th { white-space: normal; width: auto; } }

/* 料金 */
.lp-plan-for { margin: 2px 0 4px; color: var(--muted); font-size: 14px; }

/* 安心 */
.lp-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.lp-trust > div { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.lp-trust svg { width: 30px; height: 30px; color: var(--navy); margin-bottom: 10px; }
.lp-trust b { display: block; font-size: 16px; margin-bottom: 4px; }
.lp-trust p { margin: 0; font-size: 14px; color: #3A4250; }
@media (max-width: 960px) { .lp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-trust { grid-template-columns: 1fr; } }

/* 会社の方へ */
.lp-company { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.lp-company p { color: #333; margin: 0 0 20px; }
.lp-company img { border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
@media (max-width: 860px) { .lp-company { grid-template-columns: 1fr; gap: 24px; } }

/* 最後の呼びかけ */
.cta.lp-cta { background: radial-gradient(100% 120% at 50% 0%, #1B3866 0%, #0F2343 60%, #0A1830 100%); }
.cta.lp-cta p { color: #C9D6EA; }
.cta.lp-cta .lp-cta-sub { margin: 20px 0 0; font-size: 14px; }
.cta.lp-cta .lp-cta-sub b { color: var(--yellow); font-size: 18px; }


.lp h3, .lp h2 { text-wrap: balance; word-break: auto-phrase; }
.lp table.tbl thead th { background: #EEF2F8; }
.lp-dark .lp-shot.wide-phone { background: #05101F; box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.1); }
@media (max-width: 860px) {
  .lp-shot.wide-phone { max-width: 250px; }
  .lp-shot.wide-phone img { aspect-ratio: 600 / 860; object-fit: cover; object-position: top; }
}
.lp .lp-compare thead th.lp-col-d { background: var(--green); color: #fff; }
section.block.lp-dark { overflow: hidden; }
/* /anzen：罰則と期限 */
.anzen-risk { background: #0F2343; color: #fff; border-radius: 16px; padding: 18px 20px; margin: 10px 0 14px; border-top: 4px solid #FFD23F; }
.anzen-risk p { margin: 0; }
.anzen-risk-main { font-size: 17px; font-weight: 700; }
.anzen-risk-main b { color: #FFD23F; font-size: 1.15em; }
.anzen-risk-left { margin-top: 8px !important; color: #C9D6EA; font-size: 14px; }
.anzen-risk-left b { color: #FFD23F; font-size: 20px; }

/* 見出しの字間（日本語のつめ）：大きい文字を締まって見せる */
h1, h2.title, .lp-hero h1, .lp-risk h3, .lp-steps h3, .cta h2, .lp-eyebrow, .btn { font-feature-settings: "palt"; }
h1, h2.title, .cta h2 { letter-spacing: .01em; }
@media (max-width: 560px) {
  .lp-trust { gap: 10px; }
  .lp-trust > div { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 16px; }
  .lp-trust svg { grid-row: span 2; margin: 0; width: 28px; height: 28px; }
}