* { box-sizing: border-box; }
:root { --blue:#075ee8; --blue-dark:#004ec8; --ink:#082052; --text:#273a63; --muted:#6d7a98; --line:#dce8f8; --panel:rgba(255,255,255,.92); }
html { scroll-behavior: smooth; }
body { margin:0; background:linear-gradient(180deg,#fff 0%,#f8fbff 48%,#fff 100%); color:var(--ink); font-family:"BIZ UDPGothic","Meiryo","Segoe UI",sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.pricing-header { position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(0,0,0,.07); background:rgba(255,255,255,.92); backdrop-filter:blur(18px) saturate(140%); }
.pricing-header-inner { width:min(100%,1280px); height:60px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.pricing-brand img { display:block; width:99px; }
.pricing-header nav { display:flex; align-items:center; gap:22px; color:rgba(21,30,41,.58); font-size:13px; font-weight:600; }
.pricing-header nav a:hover, .pricing-header nav a.is-active { color:var(--blue); }
.pricing-login { padding:6px 12px; border:1px solid #cfe0f8; border-radius:7px; color:var(--blue); }
.pricing-main { overflow:hidden; }
.pricing-hero { position:relative; padding:78px 24px 42px; text-align:center; }
.pricing-hero::before { content:""; position:absolute; top:-160px; right:-110px; width:min(58vw,680px); height:min(58vw,680px); border-radius:50%; background:linear-gradient(145deg,rgba(202,229,255,.7),rgba(239,247,255,.12)); z-index:-1; }
.eyebrow { display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border:1px solid #cfe0f8; border-radius:999px; background:rgba(255,255,255,.82); color:var(--blue); font-size:12px; font-weight:800; text-transform:uppercase; }
.pricing-hero h1 { margin:22px 0 16px; font-size:48px; line-height:1.24; letter-spacing:0; }
.pricing-hero > p { max-width:720px; margin:0 auto 26px; color:var(--text); font-size:16px; line-height:1.9; font-weight:600; }
.beta-notice { width:min(100%,720px); margin:0 auto; padding:13px 16px; border:1px solid #cfe0f8; border-radius:10px; background:#f5f9ff; color:var(--text); font-size:13px !important; line-height:1.7 !important; }
.billing-toggle { display:inline-flex; gap:4px; padding:5px; border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow:0 14px 30px rgba(15,72,145,.08); }
.billing-toggle button { min-height:42px; padding:0 22px; border:0; border-radius:999px; background:transparent; color:var(--text); cursor:pointer; font-size:14px; font-weight:800; }
.billing-toggle button.is-active { background:var(--blue); color:#fff; }
.billing-toggle button span { display:inline-flex; align-items:center; min-height:22px; margin-left:5px; padding:0 8px; border-radius:999px; background:#e7f1ff; color:var(--blue); font-size:11px; }
.billing-toggle button.is-active span { background:rgba(255,255,255,.18); color:#fff; }
.assurance-strip, .plans-section { width:min(100%,1180px); margin:0 auto; padding-left:24px; padding-right:24px; }
.assurance-strip { padding-bottom:30px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.assurance-strip article { min-height:96px; padding:20px; display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:10px; background:var(--panel); box-shadow:0 14px 35px rgba(15,72,145,.08); }
.assurance-strip b { color:var(--blue); font-size:30px; }
.assurance-strip h2 { margin:0 0 4px; font-size:16px; line-height:1.4; }
.assurance-strip p { margin:0; color:var(--muted); font-size:12px; font-weight:700; line-height:1.5; }
.plans-section { padding-top:14px; padding-bottom:58px; }
.plans-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:stretch; }
.plan-card { position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 14px 35px rgba(15,72,145,.08); }
.pro-card { border-color:#9bc5ff; box-shadow:0 24px 58px rgba(7,94,232,.15); }
.recommend { position:absolute; top:18px; right:20px; min-height:30px; padding:0 12px; display:inline-flex; align-items:center; border-radius:999px; background:#e8f2ff; color:var(--blue); font-size:12px; font-weight:800; }
.card-head { min-height:384px; padding:32px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; }
.card-head h2 { margin:0; font-size:18px; }
.pro-title { display:flex; align-items:center; gap:12px; padding-right:102px; }
.pro-title span { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; background:var(--blue); color:#fff; font-size:12px; font-weight:800; }
.card-description { min-height:54px; margin:16px 0 22px; color:var(--text); font-size:14px; line-height:1.8; font-weight:600; }
.price-row { display:flex; align-items:baseline; gap:3px; }
.price-row .currency { align-self:flex-start; margin-top:10px; font-size:22px; font-weight:800; }
.price-row strong { font-size:58px; line-height:1; }
.price-row > span:last-child { color:var(--muted); font-size:15px; font-weight:800; }
.billing, .savings { margin:10px 0 0; color:var(--muted); font-size:12px; font-weight:700; line-height:1.6; }
.savings { min-height:20px; margin-top:2px; color:var(--blue); }
.plan-cta { width:100%; min-height:52px; margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid #a9c8f4; border-radius:10px; background:#fff; color:var(--blue); font-size:15px; font-weight:800; }
.plan-cta:hover { border-color:var(--blue); box-shadow:0 12px 24px rgba(7,94,232,.1); }
.plan-cta.primary { border-color:var(--blue); background:linear-gradient(180deg,#126fff 0%,#0359df 100%); color:#fff; box-shadow:0 18px 34px rgba(7,94,232,.24); }
.feature-list { flex:1; padding:10px 0; }
.feature-list > div { display:flex; align-items:flex-start; gap:12px; padding:13px 32px; }
.feature-list i { width:22px; height:22px; margin-top:1px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:50%; background:#edf8f3; color:#15956d; font-style:normal; font-weight:800; }
.pro-card .feature-list i { background:#e8f2ff; color:var(--blue); }
.feature-list span { flex:1; color:var(--text); font-size:14px; font-weight:700; line-height:1.55; }
.feature-list b { flex:0 0 auto; max-width:140px; padding:3px 9px; border-radius:999px; background:#f0f6ff; color:var(--blue); font-size:12px; text-align:right; }
.feature-list .is-muted { opacity:.52; }
.pricing-note { margin-top:22px; padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:26px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 14px 35px rgba(15,72,145,.08); }
.pricing-note > div { display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:16px; align-items:start; }
.pricing-note > div > b { grid-row:span 2; color:var(--blue); font-size:30px; }
.pricing-note h2 { margin:0 0 8px; font-size:18px; }
.pricing-note p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; font-weight:600; }
.pricing-note > a { min-height:46px; padding:0 18px; display:inline-flex; align-items:center; gap:10px; border-radius:8px; background:var(--blue); color:#fff; font-size:14px; font-weight:800; white-space:nowrap; }
.pricing-note > a:hover { background:var(--blue-dark); }
.pricing-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:28px max(24px, calc((100% - 1180px) / 2)); border-top:1px solid var(--line); background:#fff; color:var(--muted); font-size:12px; }.pricing-footer nav { display:flex; flex-wrap:wrap; gap:8px 20px; }.pricing-footer a { color:var(--muted); text-decoration:none; }.pricing-footer a:hover { color:var(--blue); }
@media (max-width:920px) { .assurance-strip, .plans-grid { grid-template-columns:1fr; } .assurance-strip { width:min(100%,620px); } .plans-section { width:min(100%,680px); } .pricing-note { align-items:flex-start; flex-direction:column; } }
@media (max-width:640px) { .pricing-header-inner { height:54px; padding:0 16px; } .pricing-header nav { gap:8px; font-size:12px; } .pricing-header nav a:not(.pricing-login) { display:none; } .pricing-hero { padding:56px 18px 30px; } .pricing-hero h1 { font-size:35px; } .pricing-hero > p { font-size:15px; } .billing-toggle { width:100%; max-width:360px; } .billing-toggle button { flex:1; padding:0 10px; } .assurance-strip, .plans-section { padding-left:18px; padding-right:18px; } .card-head { min-height:auto; padding:26px 22px; } .price-row strong { font-size:48px; } .feature-list > div { padding:12px 22px; } .feature-list { padding-bottom:16px; } .feature-list b { max-width:100%; } .pricing-note { padding:24px 22px; } .pricing-note > div { grid-template-columns:1fr; gap:12px; } .pricing-note > a { width:100%; justify-content:center; } }
@media (max-width:640px) { .pricing-footer { align-items:flex-start; flex-direction:column; padding:24px 18px; } }