:root {
--navy: #1f3a5f;
--navy-deep: #152a47;
--ink: #24344d;
--muted: #5a6b84;
--pink: #f08bb4;
--pink-deep: #d95f96;
--blue: #5b8def;
--blue-deep: #3a6fd8;
--yellow: #ffd94d;
--yellow-pale: #fff6d8;
--pink-pale: #fdf0f5;
--blue-pale: #eef4fe;
--bg: #ffffff;
--surface: #ffffff;
--line: #e3eaf3;
--shadow: 0 10px 30px rgba(31, 58, 95, 0.1);
--shadow-soft: 0 4px 16px rgba(31, 58, 95, 0.08);
--radius-lg: 28px;
--radius-md: 20px;
}
* { box-sizing: border-box;}
html { scroll-behavior: smooth;}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto;}
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI",
"Noto Sans JP", sans-serif;
font-size: 16px;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3,.rounded {
font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
}
a { color: var(--blue-deep);}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px;}

/* ---------- header (site mock) ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.site-header .wrap {
display: flex; align-items: center; gap: 20px;
padding-top: 12px; padding-bottom: 12px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none;}
.logo .flowers { display: flex; align-items: center;}
.logo .flowers svg { display: block;}
.logo .flowers svg + svg { margin-left: -10px;}
.logo-name {
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 800; font-size: 24px; letter-spacing: 0.14em;
color: var(--navy); line-height: 1.3;
}
.logo-sub { font-size: 10px; color: var(--muted); letter-spacing: 0.08em; line-height: 1.3;}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 26px;}
.site-nav a.navlink {
color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700;
}
.site-nav a.navlink:hover { color: var(--pink-deep);}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 700;
border-radius: 999px; text-decoration: none; cursor: pointer;
border: 2px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
background: var(--navy); color: #fff; padding: 12px 26px; font-size: 15px;
box-shadow: 0 6px 16px rgba(31, 58, 95, 0.25);
}
.btn-primary:hover { transform: translateY(-2px);}
.btn-ghost {
background: var(--surface); color: var(--navy); border-color: var(--line);
padding: 12px 24px; font-size: 15px;
}
.btn-ghost:hover { border-color: var(--pink);}
.btn-small { padding: 9px 20px; font-size: 14px;}

/* ---------- hero ---------- */
.hero { padding: 64px 0 72px; position: relative; overflow: hidden;}
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;}
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: var(--yellow-pale); color: var(--navy);
font-size: 13px; font-weight: 700; border-radius: 999px; padding: 6px 14px;
}
.hero h1 {
font-size: clamp(34px, 5.2vw, 54px); font-weight: 800; line-height: 1.35;
color: var(--navy); margin: 20px 0 18px;
}
.hero h1 .hl-pink { color: var(--pink-deep);}
.hero h1 .hl-blue { color: var(--blue-deep);}
.hero-lead { font-size: 17px; color: var(--muted); margin: 0 0 28px;}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px;}
.hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px;}
.hero-points li { font-size: 14px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 7px;}
.check {
width: 20px; height: 20px; border-radius: 50%; flex: none;
background: var(--blue-pale); color: var(--blue-deep);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800;
}
.check.pink { background: var(--pink-pale); color: var(--pink-deep);}

/* hero visual: diagnosis report card */
.report-card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px;
position: relative;
}
.report-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px;}
.dot { width: 11px; height: 11px; border-radius: 50%;}
.dot.p { background: var(--pink);}.dot.b { background: var(--blue);}.dot.y { background: var(--yellow);}
.report-url {
margin-left: 6px; flex: 1; background: var(--blue-pale); color: var(--muted);
font-size: 12px; border-radius: 999px; padding: 4px 14px;
}
.report-title { font-weight: 800; font-size: 17px; color: var(--navy); margin: 0 0 4px;}
.report-sub { font-size: 13px; color: var(--muted); margin: 0 0 18px;}
.meter-row { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px;}
.meter-row .label { font-weight: 700; color: var(--navy);}
.meter { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden;}
.meter i { display: block; height: 100%; border-radius: 999px;}
.meter .before { background: #c3cede;}
.meter .after-p { background: var(--pink);}
.meter .after-b { background: var(--blue);}
.meter .after-y { background: var(--yellow);}
.meter-row .val { text-align: right; font-weight: 800; color: var(--navy); font-size: 13px;}
.report-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;}
.chip {
font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 12px;
background: var(--pink-pale); color: var(--pink-deep);
}
.chip.blue { background: var(--blue-pale); color: var(--blue-deep);}
.chip.yellow { background: var(--yellow-pale); color: #8a6d00;}
.report-float {
position: absolute; right: -8px; bottom: -26px;
background: var(--navy); color: #fff; border-radius: var(--radius-md);
padding: 14px 18px; box-shadow: var(--shadow); max-width: 250px;
}
.report-float .t { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 15px; margin: 0 0 2px;}
.report-float .s { font-size: 12px; margin: 0; opacity: 0.9; line-height: 1.6;}

/* ---------- sections ---------- */
section.block { padding: 76px 0;}
section.tint-pink { background: var(--pink-pale);}
section.tint-blue { background: var(--blue-pale);}
.sec-head { max-width: 640px; margin-bottom: 40px;}
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center;}
.sec-title {
display: flex; align-items: center; gap: 12px;
font-size: clamp(26px, 3.6vw, 34px); font-weight: 800; color: var(--navy);
margin: 0 0 12px; line-height: 1.4;
}
.sec-head.center .sec-title { justify-content: center;}
.sec-lead { color: var(--muted); margin: 0; font-size: 15.5px;}

.worry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;}
.worry {
background: var(--surface); border-radius: var(--radius-md);
box-shadow: var(--shadow-soft); padding: 24px 26px;
display: flex; gap: 16px; align-items: flex-start;
}
.worry .q {
font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800;
width: 38px; height: 38px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.worry:nth-child(odd) .q { background: var(--pink-pale); color: var(--pink-deep);}
.worry:nth-child(even) .q { background: var(--blue-pale); color: var(--blue-deep);}
.worry h3 { margin: 4px 0 6px; font-size: 17px; color: var(--navy);}
.worry p { margin: 0; font-size: 14px; color: var(--muted);}

/* services */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch;}
.price-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: 30px 26px; display: flex; flex-direction: column; position: relative;
}
.price-card.featured { border: 2px solid var(--pink); box-shadow: var(--shadow);}
.price-tag {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
background: var(--pink); color: #fff; font-size: 12px; font-weight: 800;
border-radius: 999px; padding: 4px 16px; white-space: nowrap;
font-family: "M PLUS Rounded 1c", sans-serif;
}
.price-card .step-label { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--blue-deep); margin: 0 0 6px;}
.price-card.featured .step-label { color: var(--pink-deep);}
.price-card h3 { font-size: 21px; color: var(--navy); margin: 0 0 8px;}
.price-yen { display: flex; align-items: baseline; gap: 4px; margin: 6px 0 14px; color: var(--navy);}
.price-yen .num { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 38px; line-height: 1;}
.price-yen .unit { font-size: 14px; font-weight: 700;}
.price-yen .free { color: var(--pink-deep);}
.price-card ul { list-style: none; margin: 0 0 22px; padding: 0; font-size: 14px; color: var(--muted);}
.price-card ul li { padding: 5px 0 5px 24px; position: relative;}
.price-card ul li::before { content: "✓"; position: absolute; left: 2px; color: var(--blue-deep); font-weight: 800;}
.price-card .btn { margin-top: auto;}
.price-card .plan-mini:last-of-type { margin-bottom: 22px;}
.make-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:900px;margin:32px auto 0}
.make-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px}
.make-card .step-label{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--blue-deep);margin:0 0 6px}
.make-card h3{font-size:19px;color:var(--navy);margin:0 0 12px}
.make-list{list-style:none;margin:0 0 14px;padding:0;font-size:14px}
.make-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.make-list b{color:var(--navy);white-space:nowrap}
.make-perk{font-size:13px;color:var(--muted);margin:0 0 6px}.make-perk b{color:var(--navy)}
.make-budget{margin:4px 0 10px;padding:10px 14px;border-radius:12px;background:var(--pink-pale);color:var(--pink-deep);font-weight:800;font-size:15px;text-align:center}
.make-note { max-width: 760px; margin: 28px auto 0; padding: 18px 22px; border-radius: 16px; background: var(--surface); border: 2px dashed var(--blue-deep); text-align: center; color: var(--navy); font-size: 15px;}
.make-note b { color: var(--blue-deep);}
.price-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 20px;}
.scope-box {
margin: 0 0 18px; padding: 14px 14px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
}
.scope-box .scope-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--navy); margin: 0 0 6px;}
.scope-box p { font-size: 13px; color: var(--muted); margin: 0 0 6px; line-height: 1.65;}
.scope-box p b { color: var(--navy);}
.plan-mini { border-top: 1px dashed var(--line); padding: 12px 0 4px; margin-top: 4px;}
.plan-mini:first-of-type { border-top: none; padding-top: 2px;}
.plan-mini h4 { margin: 0 0 2px; font-size: 15px; color: var(--navy); font-family: "M PLUS Rounded 1c", sans-serif; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.plan-mini .yen { font-weight: 800; color: var(--navy); font-size: 15px; margin: 0 0 6px;}
.plan-mini .yen small { font-size: 12px; color: var(--muted);}
.plan-mini p { font-size: 13px; color: var(--muted); margin: 0 0 8px; line-height: 1.65;}
.main-tag { font-size: 11px; background: var(--blue); color: #fff; border-radius: 999px; padding: 2px 9px; letter-spacing: .04em;}
.compare-wrap { margin-top: 36px;}
.compare-head { text-align: center; max-width: 680px; margin: 0 auto 20px;}
.compare-head h3 { font-size: 22px; color: var(--navy); margin: 0 0 6px;}
.compare-head p { font-size: 14px; color: var(--muted); margin: 0;}
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.compare-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px;}
.compare-card.main { border: 2px solid var(--blue); box-shadow: var(--shadow-soft);}
.compare-card .c-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; margin: 0 0 6px;}
.compare-card.light .c-label { color: var(--pink-deep);}
.compare-card.main .c-label { color: var(--blue-deep);}
.compare-card h4 { font-size: 19px; color: var(--navy); margin: 0 0 4px;}
.compare-card .c-price { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 26px; color: var(--navy); margin: 4px 0 4px;}
.compare-card .c-price span { font-size: 13px; font-weight: 700;}
.compare-card .c-fit { font-size: 13.5px; font-weight: 700; color: var(--navy); background: var(--blue-pale); border-radius: 10px; padding: 8px 10px; margin: 12px 0 14px; line-height: 1.6;}
.compare-card.light .c-fit { background: var(--pink-pale);}
.compare-card ul { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--muted);}
.compare-card ul li { padding: 5px 0 5px 22px; position: relative;}
.compare-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-deep); font-weight: 800;}
.compare-card .c-not { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.6;}

.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 52px;}
.flow-step { text-align: center; padding: 0 6px; position: relative;}
.flow-num {
width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 20px; color: #fff;
}
.flow-step:nth-child(1) .flow-num { background: var(--pink);}
.flow-step:nth-child(2) .flow-num { background: var(--blue);}
.flow-step:nth-child(3) .flow-num { background: var(--pink);}
.flow-step:nth-child(4) .flow-num { background: var(--blue);}
.flow-step h4 { margin: 0 0 4px; font-size: 15px; color: var(--navy); font-family: "M PLUS Rounded 1c", sans-serif;}
.flow-step p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.7;}

/* reasons */
.reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.reason {
background: var(--surface); border-radius: var(--radius-lg); padding: 30px 26px;
box-shadow: var(--shadow-soft);
}
.reason .no {
font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 15px;
display: inline-block; border-radius: 999px; padding: 3px 14px; margin-bottom: 14px;
}
.reason:nth-child(1) .no { background: var(--pink-pale); color: var(--pink-deep);}
.reason:nth-child(2) .no { background: var(--blue-pale); color: var(--blue-deep);}
.reason:nth-child(3) .no { background: var(--yellow-pale); color: #8a6d00;}
.reason h3 { margin: 0 0 10px; font-size: 19px; color: var(--navy); line-height: 1.5;}
.reason p { margin: 0; font-size: 14.5px; color: var(--muted);}

/* media / SPOT */
section.navy-band { background: #1f3a5f; color: #dbe7f5;}
.navy-band .sec-title { color: #fff; }
.navy-band .sec-lead { color: #b9cde6; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.media-card {
background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column;
}
.media-card .brand {
font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 21px; color: #fff;
display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.media-card .logo-plate {
border-radius: 16px; padding: 16px 18px; margin-bottom: 6px;
display: flex; align-items: center; justify-content: center;
}
.media-card .logo-plate.light { background: #fff;}
.media-card .logo-plate.dark { background: #12283f;}
.media-card .logo-plate img { display: block; max-width: 100%; height: auto; max-height: 110px; width: auto;}
.media-card .cat { font-size: 12px; font-weight: 700; color: var(--yellow); letter-spacing: 0.06em;}
.media-card p { font-size: 14px; color: #c3d5ec; margin: 12px 0 20px; flex: 1;}
.media-card a {
color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
}
.media-card a:hover { color: var(--pink);}
.media-card .soon { color: #9db4d2; font-size: 14px; font-weight: 700;}

/* about */
.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start;}
.profile-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft); padding: 30px 24px; text-align: center;
}
.avatar {
width: 110px; height: 110px; margin: 0 auto 16px; border-radius: 50%;
background: var(--blue-pale); display: flex; align-items: center; justify-content: center; gap: 0;
}
.avatar svg + svg { margin-left: -14px;}
.profile-card .name { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 21px; color: var(--navy); margin: 0;}
.profile-card .role { font-size: 13px; color: var(--muted); margin: 4px 0 0;}
.timeline { list-style: none; margin: 0; padding: 0;}
.timeline li { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line);}
.timeline li:last-child { border-bottom: none;}
.timeline .year { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; color: var(--blue-deep); font-size: 15px;}
.timeline .what { font-size: 15px;}
.timeline .what b { color: var(--navy);}
.timeline .what span { color: var(--muted); font-size: 14px; display: block;}
.about-text p { color: var(--muted); font-size: 15.5px; margin: 0 0 18px;}
.about-text p b { color: var(--navy);}

/* faq */
.faq-list { max-width: 760px; margin: 0 auto;}
details.faq {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
margin-bottom: 12px; overflow: hidden;
}
details.faq summary {
cursor: pointer; list-style: none; padding: 20px 24px;
font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 700; font-size: 16px; color: var(--navy);
display: flex; align-items: center; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none;}
details.faq summary .mark {
margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%;
background: var(--pink-pale); color: var(--pink-deep);
display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800;
transition: transform 0.2s ease;
}
details.faq[open] summary .mark { transform: rotate(45deg);}
details.faq .a { padding: 0 24px 22px; color: var(--muted); font-size: 14.5px;}
details.faq .a p { margin: 0;}

/* contact */
.contact-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow); padding: 40px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px;
}
.contact-info h2 { font-size: 28px; color: var(--navy); margin: 0 0 14px; line-height: 1.45;}
.contact-info p { color: var(--muted); font-size: 15px; margin: 0 0 20px;}
.contact-info ul { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--navy); font-weight: 700;}
.contact-info ul li { display: flex; gap: 8px; align-items: center; padding: 4px 0;}
.field { margin-bottom: 16px;}
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 6px;}
.field label.req { color: var(--pink-deep);}
.field input,.field textarea,.field select {
width: 100%; border: 1.5px solid var(--line); border-radius: 14px;
padding: 12px 14px; font-size: 15px; font-family: inherit;
background: var(--bg); color: var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus {
outline: none; border-color: var(--blue);
}
.copy-status { font-size: 13px; color: var(--blue-deep); font-weight: 700; min-height: 20px; margin-top: 10px;}

footer.site-footer { background: #1f3a5f; color: #b9cde6; padding: 48px 0 36px;}
.footer-grid { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start;}
.footer-grid .logo-name { color: #fff;}
.footer-grid .logo-sub { color: #9db4d2;}
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px;}
.footer-links a { color: #dbe7f5; text-decoration: none; font-weight: 700;}
.footer-links a:hover { color: var(--pink);}
.footer-note { font-size: 12px; color: #849cba; margin-top: 28px;}

@media (max-width: 900px) {
.site-nav a.navlink { display: none; }
.site-header .wrap { flex-wrap: nowrap; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.logo-name { font-size: 20px; }
.logo .flowers svg { width: 28px; height: 28px; }
.site-nav .btn-small { padding: 8px 16px; font-size: 13px; white-space: nowrap; }
.hero { padding: 44px 0 84px;}
.hero .wrap { grid-template-columns: 1fr; gap: 40px;}
.worry-grid,.price-grid,.reason-grid,.media-grid,.compare-grid { grid-template-columns: 1fr;}
.price-card.featured { margin-top: 12px;}
.flow { grid-template-columns: repeat(2, 1fr); gap: 26px 10px;}
.about-grid { grid-template-columns: 1fr;}
.contact-card { grid-template-columns: 1fr; padding: 28px 22px;}
section.block { padding: 56px 0;}
.report-float { right: 4px;}
}
/* ===== TOMONI brand refresh (アフロ prototype) ===== */
:root{--navy:#23468F;--navy-deep:#1B3A7A;--ink:#24345A;--muted:#5D6C88;--pink:#F08CB4;--pink-deep:#D9609A;--blue:#5B8FEE;--blue-deep:#2F5FC4;--yellow:#FFE27A;--yellow-pale:#FFF8D9;--pink-pale:#FFF1F6;--blue-pale:#EEF4FF;--line:#E4EAF6;--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}
body,h1,h2,h3,h4,.rounded{font-family:"Nunito","M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif}
body{font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;font-weight:500;overflow-x:hidden}
.logo img{display:block;height:40px;width:auto}
.footer-grid .logo img{height:38px}
.logo-sub{display:block;margin-top:2px;padding-left:2px}
.btn-primary{background:linear-gradient(135deg,var(--blue-deep),var(--blue));box-shadow:0 8px 20px rgba(47,95,196,.28);transition:transform .3s var(--ease-spring),box-shadow .3s}
.btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 26px rgba(47,95,196,.35)}
.btn-ghost:hover{transform:translateY(-2px)}
.btn .bud{display:inline-block;transition:transform .6s var(--ease-spring)}
.btn:hover .bud{transform:rotate(144deg) scale(1.2)}
.site-nav a.navlink{position:relative}
.site-nav a.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--pink),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.site-nav a.navlink:hover::after{transform:scaleX(1)}
.site-header{transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(35,70,143,.08)}
/* hero */
.hero{background:radial-gradient(60% 70% at 85% 30%,var(--blue-pale),transparent 70%),radial-gradient(50% 60% at 10% 90%,var(--pink-pale),transparent 70%)}
.hero .wrap{position:relative;z-index:2}
.hero-bloom{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-bloom svg{position:absolute;opacity:.9}
.hero-bloom .b1{width:220px;right:-40px;top:20px}
.hero-bloom .b2{width:150px;left:44%;bottom:-30px;opacity:.55}
.hero-bloom .b3{width:90px;left:-20px;top:40%;opacity:.6}
.bloom{transform-box:fill-box;transform-origin:center;animation:bloom 1.4s var(--ease-spring) both,spin 40s linear 1.4s infinite}
.b2 .bloom{animation-delay:.3s,1.7s}.b3 .bloom{animation-delay:.55s,1.95s;animation-direction:normal,reverse}
@keyframes bloom{from{transform:scale(0) rotate(-120deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero h1 .hl-pink,.hero h1 .hl-blue{display:inline-block;animation:pop .9s var(--ease-spring) .6s both}
@keyframes pop{from{transform:translateY(20px) scale(.8);opacity:0}}
.hero-anim>*{animation:rise .9s var(--ease-out) both}
.hero-anim>*:nth-child(2){animation-delay:.1s}.hero-anim>*:nth-child(3){animation-delay:.2s}.hero-anim>*:nth-child(4){animation-delay:.3s}.hero-anim>*:nth-child(5){animation-delay:.4s}
@keyframes rise{from{transform:translateY(24px);opacity:0}}
.report-card{animation:rise 1s var(--ease-out) .35s both,float 6s ease-in-out 1.4s infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.report-float{background:linear-gradient(135deg,var(--pink-deep),var(--pink))}
.meter i{transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease-out)}
.report-card.in .meter i{transform:scaleX(1)}
.report-card.in .meter-row:nth-of-type(2) i{transition-delay:.15s}
/* petals */
.petal{position:fixed;top:-30px;width:14px;height:14px;border-radius:70% 0 70% 0;pointer-events:none;z-index:40;opacity:.7;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--rot))}}
/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.sec-title svg{transition:transform 1s var(--ease-spring)}
.sec-head.reveal:not(.in) .sec-title svg{transform:scale(0) rotate(-180deg)}
/* cards */
.worry,.price-card,.reason,.compare-card,.media-card,.profile-card{transition:transform .4s var(--ease-spring),box-shadow .4s,opacity .8s var(--ease-out)}
.worry:hover,.price-card:hover,.reason:hover,.compare-card:hover,.profile-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(35,70,143,.13)}
.media-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.1)}
.worry:hover .q{animation:wiggle .5s}
@keyframes wiggle{30%{transform:rotate(-12deg)}60%{transform:rotate(10deg)}}
.flow-num{transition:transform .5s var(--ease-spring)}
.flow-step:hover .flow-num{transform:scale(1.15) rotate(-8deg)}
.price-card.featured{background:linear-gradient(180deg,var(--pink-pale),var(--surface) 40%)}
.avatar svg{animation:spin 30s linear infinite}.avatar svg+svg{animation-direction:reverse}
details.faq{transition:border-color .3s}details.faq[open]{border-color:var(--pink)}
details.faq[open] .a{animation:rise .45s var(--ease-out)}
section.navy-band,footer.site-footer{background:linear-gradient(135deg,#1B3A7A,#2F5FC4)}
section.navy-band{position:relative;overflow:hidden}
section.navy-band::before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(240,140,180,.35),transparent 70%)}
.media-card .cat{color:#FFE27A}
.wave{display:block;width:100%;height:40px}
@media (max-width:900px){.logo img{height:32px}.logo-sub{display:none}.hero-bloom .b1{width:140px;right:-50px;top:-10px}.hero-bloom .b2{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.meter i{transform:none}.petal{display:none}}


/* ===== DARK MODE START（不要ならこのブロックと <meta name="color-scheme"> と <picture> の <source> を削除） ===== */
@media (prefers-color-scheme: dark) {
:root{--navy:#DCE6FB;--navy-deep:#fff;--ink:#E6ECF8;--muted:#AAB8D4;--pink-deep:#F5A9C8;--blue-deep:#9DBCF5;
--pink-pale:#2A2036;--blue-pale:#18264A;--yellow-pale:#36301A;--bg:#0E1A36;--surface:#16264A;--line:#2A3D66;
--shadow:0 10px 30px rgba(0,0,0,.35);--shadow-soft:0 4px 16px rgba(0,0,0,.3)}
a{color:#9DBCF5}
.btn-primary{background:linear-gradient(135deg,#5B8FEE,#8DB2F7);color:#0E1A36;box-shadow:none}
.hero h1 .hl-pink{color:#F5A9C8}.hero h1 .hl-blue{color:#9DBCF5}
.chip{color:#F5A9C8}.chip.blue{color:#9DBCF5}.chip.yellow,.reason:nth-child(3) .no{color:#FFE27A}
.report-float{background:#F08CB4;color:#3A1A2A}
section.navy-band,footer.site-footer{background:linear-gradient(135deg,#0B1530,#1B3A7A)}
}
/* ===== DARK MODE END ===== */
section[id]{scroll-margin-top:90px}
.btn-line{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;background:#06C755;color:#fff;border-radius:999px;padding:12px 26px;font-weight:700;text-decoration:none}
.crumb{font-size:13px;color:#5D6C88;padding-top:14px}.sp-nav{display:none}@media (max-width:900px){.sp-nav{display:flex;gap:16px;overflow-x:auto;white-space:nowrap;padding:10px 20px;border-bottom:1px solid #E4EAF6;background:#fff;font-size:14px;font-weight:700}.sp-nav a{color:#23468F;text-decoration:none}.sp-nav a[aria-current]{color:#2F5FC4;text-decoration:underline}}.crumb a{color:#2F5FC4}.crumb ol{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}.crumb li+li:before{content:"›";margin-right:6px}
.page-head{padding-top:40px;padding-bottom:10px}.page-head h1{color:#23468F;font-size:clamp(28px,4vw,40px);margin:0 0 8px}
.site-nav a.navlink[aria-current]{color:#2F5FC4}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}