/* Kanly LP-A — extracted from Claude Design export (visual source of truth) */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#E7E3DA;}
a{transition:transform .12s ease, filter .15s ease, box-shadow .15s ease;}
a:active{transform:scale(.985);}
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);}
[data-rv].rv-show{opacity:1;transform:none;}
@keyframes mt-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hero-finger{0%,16%{transform:translateY(0)}23%{transform:translateY(5px)}32%,100%{transform:translateY(0)}}
@keyframes hero-b1{0%{opacity:0;transform:translateY(8px)}7%{opacity:1;transform:none}92%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes hero-b2{0%,42%{opacity:0;transform:translateY(8px)}50%{opacity:1;transform:none}92%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes hero-ring{0%,18%{opacity:0;transform:scale(.6)}26%{opacity:.85;transform:scale(1)}42%{opacity:0;transform:scale(1.35)}100%{opacity:0}}
@keyframes faqIn{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){[style*="animation"]{animation:none !important}}
/* ============================================================
法務ページ共通スタイル（LP本体には影響しない .legal-* スコープ）
============================================================ */
.legal-body{background:#FAFAF7;color:#1A2E2A;font-family:'Noto Sans JP',sans-serif;font-size:16px;line-height:1.85;}
.legal-main{max-width:720px;margin:0 auto;padding:8px 20px 56px;}
.legal-eyebrow{font-size:13px;font-weight:700;letter-spacing:1px;color:#0F766E;margin:18px 0 4px;}
.legal-main h1{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:27px;line-height:1.4;color:#1A2E2A;margin:0 0 18px;}
.legal-main h2{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:19px;line-height:1.5;color:#1A2E2A;margin:34px 0 10px;padding-top:18px;border-top:1px solid #EADFC9;}
.legal-main h2:first-of-type{border-top:none;padding-top:0;}
.legal-main h3{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:16.5px;color:#1A2E2A;margin:20px 0 6px;}
.legal-main p{font-size:16px;line-height:1.85;margin:0 0 12px;color:#2C3B36;}
.legal-main ul,.legal-main ol{margin:0 0 14px;padding-left:1.4em;}
.legal-main li{font-size:16px;line-height:1.8;margin:0 0 6px;color:#2C3B36;}
.legal-main a{color:#0F766E;}
.legal-lead{font-size:16px;line-height:1.85;color:#46564F;margin:0 0 8px;}
.legal-updated{font-size:13.5px;color:#7A8A85;margin:0 0 24px;}
.legal-table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:16px;}
.legal-table th,.legal-table td{border:1px solid #EADFC9;padding:12px 14px;text-align:left;vertical-align:top;line-height:1.8;}
.legal-table th{width:34%;background:#F4ECDD;font-weight:700;color:#1A2E2A;white-space:nowrap;}
.legal-table td{background:#fff;color:#2C3B36;}
@media (max-width:520px){
.legal-table th{white-space:normal;width:40%;}
.legal-table th,.legal-table td{padding:10px 11px;font-size:15.5px;}
}
.legal-fill{color:#B45309;font-weight:700;background:#FEF3C7;border-radius:5px;padding:1px 6px;}
.legal-back{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:15px;font-weight:700;color:#0F766E;text-decoration:none;font-family:'Zen Maru Gothic',sans-serif;}
.legal-backwrap{padding-top:14px;}
/* ============================================================
PC（広い画面）レイアウト調整 — LP本体(index.html)のみ
・〜480px は一切変更しない（min-width:481px 以上にのみ適用）
・モバイルの見た目を守るため body:not(.legal-body) にスコープ
・セクション背景は画面全幅、中身だけ 880px で中央寄せ
（横paddingを max(元の値, (100%-880px)/2) に置換。縦paddingは据え置き）
・content幅 = min(880px, 100% - 左右ガター) … 481〜は流動的に拡大し
画面が広がると880pxで固定、左右は背景色で埋まる
・PC専用の上書きはすべて !important（インラインstyleを上書きするため）
============================================================ */
@media (min-width: 481px){
/* ラッパー(480px幅)を全幅に開放し、phone風の影を解除 */
body:not(.legal-body) > div[style*="max-width:480px"]{
max-width: none !important;
box-shadow: none !important;
}
/* 各セクション：中身を880pxで中央寄せ（背景は全幅のまま、縦paddingは維持） */
body:not(.legal-body) > div > section{
padding-left: max(24px, calc((100% - 880px) / 2)) !important;
padding-right: max(24px, calc((100% - 880px) / 2)) !important;
}
/* ヘッダー：中身を880pxで中央寄せ（元の横padding 18px を下限に） */
body:not(.legal-body) > div > header{
padding-left: max(18px, calc((100% - 880px) / 2)) !important;
padding-right: max(18px, calc((100% - 880px) / 2)) !important;
}
/* フッター：中身を880pxで中央寄せ（元の横padding 24px を下限に） */
body:not(.legal-body) > div > footer{
padding-left: max(24px, calc((100% - 880px) / 2)) !important;
padding-right: max(24px, calc((100% - 880px) / 2)) !important;
}
}
/* ============================================================
PC（広い画面）の本文の行長を読みやすく — LP本体(index.html)のみ
・〜480px は一切変更しない（min-width:481px 以上にのみ適用）
・対象は「中央寄せのリード文・説明文」だけ（ヒーロー導入文／GPS説明／
AI要約説明／最終CTA導入文）。これらを 38em 程度に絞って中央寄せにする。
・誤爆防止のための絞り込み:
(1) セクション直下の のみ（`section > p`）。
→ カード内の段落（`section > div… > p`）には当たらない。
(2) かつ「中央寄せ」のものだけ。
・中央寄せセクション(text-align:center)=ヒーロー/最終CTA の直下
・または
自身が text-align:center（GPS/AI の説明文）
→ 左寄せの小見出し段落(#便利通知の説明)や、見出し・パンチライン・
注釈・カード・比較ブロックには当たらない。
※ 見出し/パンチライン(25〜28px)・ラベル(14px)等が万一含まれても、
38em より自然幅が狭いため max-width は実質無効（見た目不変）。
・段落のstyle属性は実行時にJSで再シリアライズされ "text-align: center"
（コロン後にスペース）になる場合があるため、両表記をセレクタに含める。
・880px中央寄せの全体構造（上のブロック）はそのまま維持。
============================================================ */
@media (min-width: 481px){
body:not(.legal-body) > div > section[style*="text-align:center"] > p,
body:not(.legal-body) > div > section > p[style*="text-align:center"],
body:not(.legal-body) > div > section > p[style*="text-align: center"]{
max-width: 38em !important; /* 約38文字/行 ＝ 読みやすい行長 */
margin-inline: auto !important; /* 段落ブロックをセクション内で中央寄せ（上下marginは維持） */
}
}