/* =========================================================
   Veliq Living — UI v3（Veliq Finance と同じ見た目）2026-10-29
   全ページの </head> 直前で読み込み、各ページ内の旧スタイルを上書きする
   （読み込みは pipeline/mobile_polish.py が全ページに入れる）。
   設計値（Finance の ui.css と同じ）
   - 書体: SF / ヒラギノ(Apple端末)・Noto Sans JP(その他)。字間0、大見出しのみ-0.01em
   - 色: 背景#FFF / 面#F5F5F7 / 線#D2D2D7 / 文字#1D1D1F / 補助#6E6E73 / アクセント#8A6A2A
   - 角丸: 入力10 / カード18 / ボタン980(ピル)
   - 影: カード 0 2px 8px .04 + 0 12px 32px .06
   - ヘッダー: 白80%＋ぼかし、高さ56px / スマホ52px
   ========================================================= */
:root{
  --paper:#FFFFFF;--paper2:#F5F5F7;--line:#D2D2D7;--ink:#1D1D1F;--ink2:#424245;--ink3:#6E6E73;
  --gold:#8A6A2A;--gold-d:#8A6A2A;--champ:#8A6A2A;--inv:#F5F5F7;--inv2:#F5F5F7;
  --r-edit:18px;--r-ctrl:10px;
  --u-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  --u-accent:#8A6A2A;--u-accent-weak:#F5EFE3;--u-surface:#F5F5F7;
  --shadow:0 2px 8px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06);
}

/* ---------- 書体・字間・折り返し ---------- */
html body,html body *:not(svg):not(svg *):not(code):not(pre):not(kbd){font-family:var(--u-font)!important;letter-spacing:0!important;font-feature-settings:normal!important}
html body{background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.75;word-break:normal;overflow-wrap:anywhere}
html body h1{font-weight:700!important;letter-spacing:-.01em!important;line-height:1.35!important}
html body h2,html body h3,html body h4{font-weight:700!important;line-height:1.45;color:var(--ink)}
h1,h2{word-break:auto-phrase}
h3,h4{word-break:normal}
p,li,dd{text-wrap:pretty}
svg text{font-family:var(--u-font)!important}
.num,.big,.kv b,table.dt td.n,.cnt,.vl{font-variant-numeric:tabular-nums}
::selection{background:rgba(138,106,42,.18)}
.btn:focus-visible,input:focus-visible,select:focus-visible,.chip:focus-visible,summary:focus-visible,.dock a:focus-visible,a.card:focus-visible,.rel a:focus-visible{outline:2px solid var(--u-accent);outline-offset:2px}
@view-transition{navigation:none}

/* ---------- 英字の小見出し・装飾・動きは出さない ---------- */
.eyebrow,.card .en,.m-num,.m-jp small,.stamp,.inv::before,footer.site::before,#rprog{display:none!important}
.reveal,.reveal.in{opacity:1!important;transform:none!important;transition:none!important}

/* ---------- PR帯・ヘッダー ---------- */
.pr-strip{background:var(--u-surface);color:var(--ink3);font-size:12px;text-align:center;padding:6px 16px;line-height:1.5;border:0}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.hd-in{max-width:1080px;height:56px;padding:0 24px;gap:24px}
.logo{display:block;line-height:1}
.logo .lg{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em!important;white-space:nowrap}
.logo .lg b{color:var(--u-accent);font-weight:700}
nav.pc{gap:28px;font-size:14px;color:var(--ink2);align-items:center}
nav.pc a{padding:6px 0;border:0;transition:color .2s;white-space:nowrap}
nav.pc a:hover,nav.pc a.on{color:var(--ink);border:0}
nav.pc a.on{font-weight:600}
.ham{width:44px;height:44px;margin-right:-10px}
.ham span{left:13px;right:auto;width:18px}
.ham span:nth-child(1){top:18px}.ham span:nth-child(2){top:25px}.ham span:nth-child(3){display:none}
body.menu-open .ham span:nth-child(1){top:21.5px;transform:rotate(45deg)}
body.menu-open .ham span:nth-child(2){top:21.5px;opacity:1;transform:rotate(-45deg)}
@media(max-width:840px){.hd-in{height:52px;padding:0 18px}}
/* モバイルメニュー（グループ化リスト） */
.m-menu{background:var(--u-surface);padding:calc(52px + 34px + env(safe-area-inset-top)) 16px 32px;gap:0}
body.menu-open .m-menu{display:block}
.m-item{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;padding:14px 16px;min-height:50px;border:0;border-top:1px solid rgba(0,0,0,.08);color:var(--ink)}
.m-item:first-child{border-top:0;border-radius:14px 14px 0 0}
.m-item:last-child{border-radius:0 0 14px 14px}
.m-item::after{content:"";width:7px;height:7px;border-right:2px solid #C7C7CC;border-top:2px solid #C7C7CC;transform:rotate(45deg);flex-shrink:0}
.m-jp{font-size:16px;font-weight:400;flex:1}

/* ---------- 区画 ---------- */
.wrap{max-width:1080px;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 18px}}
.section{padding:80px 0}
.section.alt{background:var(--u-surface)}
.section-head{margin-bottom:32px}
.section-head h1{font-size:clamp(26px,5.4vw,40px)}
.section-head h2{font-size:clamp(22px,4.6vw,28px)}
.section-head .lead{color:var(--ink3);font-size:16px;margin-top:12px}
.lead{color:var(--ink3)}
.crumb{color:var(--ink3);font-size:12px}
.crumb a{border:0;color:var(--ink2)}
.crumb a:hover{text-decoration:underline}
@media(max-width:640px){.section{padding:56px 0}}
.section.alt+.section.alt{padding-top:0}
/* 暗い面は無くす */
.inv{background:#fff!important;color:var(--ink)!important}
.inv h1,.inv h2,.inv h3{color:var(--ink)!important}

/* ---------- トップのヒーロー（白地に黒の太字見出し） ---------- */
.hero{padding:56px 0 72px}
.hero h1{font-size:48px!important;color:var(--ink)}
.hero .hero-lead{font-size:16px;color:var(--ink3);margin-top:20px;max-width:600px}
.hero .hero-cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:640px){.hero{padding:40px 0 56px}.hero h1{font-size:30px!important}.hero .hero-lead{font-size:15px}.hero .hero-cta .btn{flex:1 1 100%}}

/* ---------- カード ---------- */
.grid{gap:16px}
.card{background:#fff;border:0!important;border-radius:18px!important;box-shadow:var(--shadow);padding:24px;transition:box-shadow .2s,transform .2s}
a.card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06),0 20px 44px rgba(0,0,0,.10)}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:14px;color:var(--ink3)}
.card .go{margin-top:12px;font-size:14px;color:var(--u-accent);font-weight:500}
@media(max-width:640px){.card{padding:20px}}

/* ---------- ボタン・入力 ---------- */
.btn{min-height:48px;padding:10px 28px;border-radius:980px!important;background:var(--ink)!important;color:#fff!important;border:0!important;font-size:16px;font-weight:600}
.btn:hover{background:#000!important}
.btn.gold{background:var(--ink)!important}
.btn.ghost{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.btn.ghost:hover{background:var(--u-surface)!important}
label.f{color:var(--ink2);font-size:14px}
label.f small{color:var(--ink3)}
input[type=text],input[type=number],input[type=email],input[type=tel],select,textarea{border:1px solid var(--line)!important;border-radius:10px!important;background:#fff!important;color:var(--ink)!important;font-size:16px!important;box-shadow:none!important;transition:border-color .2s,box-shadow .2s}
input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,select:focus,textarea:focus{outline:0!important;border-color:var(--u-accent)!important;box-shadow:0 0 0 4px rgba(138,106,42,.15)!important}
input[type=range]{accent-color:var(--u-accent)}
.chips{gap:8px}
.chip{min-height:44px;padding:8px 18px;border:1px solid var(--line);border-radius:980px;background:#fff;color:var(--ink);font-size:14px}
.chip:hover{background:var(--u-surface)}
.chip.on{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:600}

/* ---------- 結果・データ ---------- */
.result{border:0;border-radius:18px;background:#fff;box-shadow:var(--shadow);padding:24px}
.result .big{font-size:clamp(32px,8vw,44px);font-weight:700;color:var(--ink);line-height:1.2}
.result .big small{font-size:.4em;font-weight:600;color:var(--ink2)}
.kv{border-bottom:1px solid rgba(0,0,0,.08);font-size:14px}
.kv b{font-size:16px;font-weight:600}
.kv span{color:var(--ink3)}
table.dt{font-size:14px}
table.dt th,table.dt td{border:0;border-bottom:1px solid rgba(0,0,0,.08)}
table.dt th{background:transparent;color:var(--ink3);font-weight:600;font-size:13px;border-bottom:1px solid var(--line)}
table.dt td.n{font-size:15px}
.tbl-scroll .dt th:first-child,.tbl-scroll .dt td:first-child{background:#fff}
.note{color:var(--ink3)}
.src{color:var(--ink3);border-top:1px solid var(--line)}
.src a{border-bottom:1px solid var(--line)}
.ed-note{border:0;border-radius:18px;background:var(--u-surface);color:var(--ink2);padding:16px 20px}
.ed-note b{color:var(--ink)}
.bar-row .lb{color:var(--ink3)}
.bar-row .bar{background:var(--u-accent);border-radius:3px}
.bar-row .vl{font-size:14px}

/* ---------- 記事 ---------- */
.art h2{font-size:22px;border-bottom:1px solid var(--line)}
.art h3{font-size:18px}
.art p,.art ul,.art ol{color:var(--ink)}
.concl{border:0;border-radius:18px;background:var(--u-surface);padding:20px 24px;font-size:15.5px}
.concl b{color:var(--ink)}
.formula{border:0;border-radius:18px;background:var(--u-surface);font-size:15px}
details.faq{border:0;border-radius:14px;background:var(--u-surface)}
details.faq summary{min-height:48px;font-size:15px}
details.faq summary::before{display:none}
details.faq div{color:var(--ink2)}
.rel h3{color:var(--ink3);font-size:14px}
.rel a{border:1px solid var(--line);border-radius:980px;padding:9px 18px;font-size:14px}
.rel a:hover{background:var(--u-surface);border-color:var(--line)}
.art p[style*="Shippori"]{border-radius:10px!important}

/* ---------- フッター（#F5F5F7） ---------- */
footer.site{background:var(--u-surface);color:var(--ink3);font-size:12px;line-height:1.7;padding:40px 0 110px;border:0}
.ft-logo{font-size:15px;font-weight:700;color:var(--ink)}
.ft-logo b{color:var(--u-accent);font-weight:700}
.ft-tag{font-size:12px;color:var(--ink3);margin:6px 0 24px}
.ft-cols{gap:24px;font-size:12px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.ft-cols h4{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:8px}
.ft-cols a{color:var(--ink2);padding:3px 0}
.ft-cols a:hover{color:var(--ink);text-decoration:underline}
.ft-note{margin-top:0;padding-top:20px;border-top:0;font-size:12px;color:var(--ink3)}
.ft-veliq{margin-top:16px;font-size:12px;color:var(--ink3)}
.ft-veliq a{color:var(--ink2)}
.ft-veliq a:hover{text-decoration:underline}
@media(min-width:900px){footer.site{padding-bottom:40px}}

/* ---------- スマホ下部の固定ボタン ---------- */
.dock{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:10px 12px calc(10px + env(safe-area-inset-bottom));pointer-events:none}
.dock a{pointer-events:auto;background:rgba(29,29,31,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:980px;color:#fff;font-weight:600;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.18)}