/* ミライレンディング — LP・お知らせ・規約ページの「ミライらしさ」の層（lp.css のあとに読み込む）
   構成・余白・文字の大きさは lp.css（RISE Lending と同じ）のまま。ここでは色の役割と、面・ボタン・光の表情だけを変える。
   方針（DESIGN.md）: 白地に濃紺の文字、ブルーは主ボタンと選択、濃紺のパネルは1画面に1か所、星（ロゴの光）は小さく。
   変数名は lp.css に合わせている（--rose = 主色のブルー、--charcoal = 濃紺の面）。 */
:root{
  --rose:#1E77EF; --rose-2:#1E77EF; --rose-dark:#0F4FB0; --rose-light:#B8D4FA;
  --rose-strong:#1868DB; --rose-hover:#1565D8;
  --charcoal:#0A2E5C;
  --navy:#0C3970; --navy-deep:#071F42; --sky:#7DB4FF; --gold:#E9C878;
  --tint:#F4F8FE; --tint-2:#EBF1F9;
  --ink:#1D3253; --ink-2:#4A5C78; --ink-3:#5A6B85;
  --line:#E1E8F2; --line-2:#C3D0E2; --line-3:#DCE5F0;
  --bar-1:#A9CCFF; --bar-2:#5B9DF5; --bar-3:#2A6FD8; --grid:#E3EAF3; --line-rose:#CFE0F8; --arrow:#C3D0E2;
  --grad:linear-gradient(135deg,#2D86F6 0%,#1E77EF 48%,#0F5BD0 100%);
  --surface-grad:linear-gradient(115deg,#F7FAFF 0%,#EAF2FE 100%);
  --panel-navy:radial-gradient(120% 90% at 100% 0%,rgba(30,119,239,.40) 0%,rgba(30,119,239,0) 58%),linear-gradient(155deg,#0C3970 0%,#0A2E5C 46%,#071F42 100%);
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.2 5.8 11.4 12 12-6.2.6-11.4 5.8-12 12-.6-6.2-5.8-11.4-12-12C6.2 11.4 11.4 6.2 12 0z'/%3E%3C/svg%3E");
  --radius:18px;
  --shadow-card:0 2px 10px rgba(12,45,92,.04),0 14px 36px rgba(12,45,92,.06);
}

/* ---------- ボタン：角を少し立てた形＋下に青い光 ---------- */
.btn{border-radius:16px}
.btn:not(.btn-outline):not(.btn-white):not(.btn-ghost){background:linear-gradient(180deg,#2A80F2 0%,#1668DF 100%);box-shadow:0 10px 26px rgba(30,119,239,.28),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-outline{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-white{color:var(--rose-dark)}
@media (hover:hover){
  .btn:not(.btn-outline):not(.btn-white):not(.btn-ghost):hover{background:linear-gradient(180deg,#1F74EA 0%,#125CCB 100%)}
  .btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--rose)}
}
.header-login,.header-cta{border-radius:10px}
.header-cta{background:linear-gradient(180deg,#2A80F2 0%,#1668DF 100%);border-color:transparent}

/* ---------- お知らせバー：濃紺の帯に金の札 ---------- */
.notice-bar{background:var(--charcoal);color:var(--white)}
.notice-tag{background:var(--gold);color:#0A2E5C}
.notice-title{color:var(--white)}
.notice-more{color:#A9CCFF}
.notice-bar:focus-visible{outline-color:var(--white)}

/* ---------- ヒーロー ---------- */
.hero-title{color:var(--navy)}
.hero-eyebrow::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.45em;vertical-align:-.05em;background:var(--rose);-webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat}
.hero-mark{border-radius:10px;box-shadow:0 14px 34px rgba(30,119,239,.26)}
/* 絵の枠は濃紺のパネル。棒は上ほど明るい光の棒、年利の札は白いまま浮かせる */
.hero-visual{background:var(--panel-navy)}
.hero-visual::before{content:"";position:absolute;inset:0;background:
  linear-gradient(rgba(125,180,255,.10) 1px,transparent 1px) 0 0/100% 25%,
  radial-gradient(60% 50% at 12% 100%,rgba(125,180,255,.16) 0%,rgba(125,180,255,0) 70%);pointer-events:none}
.hero-chart span{box-shadow:0 0 22px rgba(125,180,255,.18)}
.rate-card{box-shadow:0 16px 40px rgba(4,18,42,.34)}
.rate-tag{background:var(--navy)}
.rate-max{color:var(--navy)}

/* ---------- 数字の帯・見出し ---------- */
.sec-head h2,.sec-head h1{color:var(--navy)}

/* ---------- プレミアム（おすすめ）のカード：濃紺のパネル ---------- */
.plan-premium{background:var(--panel-navy)}
.plan-premium .plan-rows .ico{color:var(--rose)}
.plan-badge{background:var(--gold);color:#0A2E5C}
.plan-star{color:var(--rose);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

/* ---------- 比較の表（濃紺のパネル）・札 ---------- */
.btc-table{background:var(--panel-navy)}
.campaign-badge{background:#FBF3D9;color:#0A2E5C}

/* ---------- フッター ---------- */
.site-footer{background:linear-gradient(180deg,#0A2E5C 0%,#071F42 100%)}
html.ov-foot,html.ov-foot body{background:#071F42}