/* ==== Noto Sans JP (4 weights, full Japanese coverage) ==== */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/noto-sans-jp-400.woff2") format('woff2');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/noto-sans-jp-500.woff2") format('woff2');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/noto-sans-jp-700.woff2") format('woff2');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("../fonts/noto-sans-jp-900.woff2") format('woff2');
}
/* ==== Montserrat (3 weights, latin coverage) ==== */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/montserrat-600.woff2") format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/montserrat-700.woff2") format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/montserrat-800.woff2") format('woff2');
}
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* ---- next block ---- */
:root {
--brand: #4169e1;
--brand-deep: #2746b8;
--brand-soft: #6a8df0;
--sky-1: #eaf1ff;
--sky-2: #f6faff;
--ink: #16213a;
--ink-2: #3a4866;
--warm: #ff7a3d; /* オレンジアクセント */
--warm-deep: #e85a1c;
--warm-soft: #ffd9c2;
--line-green: #06c755;
--line-green-deep: #04a648;
--paper: #ffffff;
--rule: #d9e3f7;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Noto Sans JP", system-ui, sans-serif;
color: var(--ink);
background: #fff;
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
.num { font-family: "Montserrat", "Noto Sans JP", sans-serif; font-weight: 800; }
/* ============ HEADER ============ */
.site-header {
height: 88px;
border-bottom: 1px solid var(--rule);
background: #fff;
display: flex;
align-items: center;
}
.site-header__inner {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.logo {
display: flex;
align-items: center;
gap: 14px;
}
.logo__mark {
height: 40px;
width: auto;
display: block;
object-fit: contain;
}
.logo__text { min-width: 0; white-space: nowrap; }
.logo__name {
font-weight: 900;
font-size: 20px;
letter-spacing: .02em;
color: var(--ink);
white-space: nowrap;
}
.logo__sub {
font-size: 11px;
color: var(--ink-2);
letter-spacing: .14em;
margin-top: 2px;
white-space: nowrap;
}
.header-right {
display: flex;
align-items: center;
gap: 24px;
flex-shrink: 0;
}
.nav {
display: flex;
gap: 22px;
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
color: var(--ink-2);
text-decoration: none;
font-size: 14px;
font-weight: 500;
}
.nav a:hover { color: var(--brand); }
.header-tel {
text-align: right;
line-height: 1.2;
}
.header-tel__hours {
font-size: 11px;
color: var(--ink-2);
letter-spacing: .08em;
}
.header-tel__urgent {
font-size: 11px;
color: var(--warm-deep);
font-weight: 700;
letter-spacing: .08em;
margin-top: 2px;
}
.header-tel__num {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 28px;
color: var(--ink);
letter-spacing: .02em;
margin-top: 2px;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.header-tel__num::before {
content: "";
flex-shrink: 0;
display: inline-block;
width: 22px;
height: 22px;
background: var(--brand);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ============ HERO ============ */
.hero {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 80% 60% at 85% 40%, #dbe6ff 0%, rgba(219,230,255,0) 60%),
linear-gradient(180deg, var(--sky-2) 0%, var(--sky-1) 60%, #e1ebff 100%);
}
/* 水紋パターン */
.hero__pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .55;
background-image:
radial-gradient(circle at 8% 18%, transparent 38px, rgba(65,105,225,0.06) 39px, rgba(65,105,225,0.06) 40px, transparent 41px),
radial-gradient(circle at 8% 18%, transparent 64px, rgba(65,105,225,0.05) 65px, rgba(65,105,225,0.05) 66px, transparent 67px),
radial-gradient(circle at 8% 18%, transparent 92px, rgba(65,105,225,0.04) 93px, rgba(65,105,225,0.04) 94px, transparent 95px),
radial-gradient(circle at 92% 88%, transparent 60px, rgba(65,105,225,0.05) 61px, rgba(65,105,225,0.05) 62px, transparent 63px),
radial-gradient(circle at 92% 88%, transparent 96px, rgba(65,105,225,0.04) 97px, rgba(65,105,225,0.04) 98px, transparent 99px);
}
.hero__bubbles {
position: absolute;
inset: 0;
pointer-events: none;
}
.bubble {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(106,141,240,.18) 60%, rgba(106,141,240,.04) 100%);
filter: blur(.3px);
}
.bubble.b1 { width: 220px; height: 220px; left: -60px; top: 80px; }
.bubble.b2 { width: 90px; height: 90px; left: 220px; top: 380px; opacity:.7; }
.bubble.b3 { width: 140px; height: 140px; right: 38%; top: -40px; opacity:.6; }
.bubble.b4 { width: 60px; height: 60px; right: 24%; bottom: 80px; opacity:.7; }
.hero__inner {
position: relative;
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 56px 32px 72px;
display: grid;
grid-template-columns: minmax(0, 1fr) 520px;
gap: 0;
align-items: stretch;
min-height: 720px;
}
/* === LEFT: copy === */
.hero__copy {
position: relative;
z-index: 3;
padding-right: 0;
padding-top: 8px;
}
.hero__subbadge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px 10px 18px;
background: #fff;
border: 1.5px solid var(--brand);
border-radius: 999px;
color: var(--brand-deep);
font-weight: 700;
font-size: 16px;
letter-spacing: .04em;
box-shadow: 0 6px 18px -10px rgba(40,70,180,.25);
}
.hero__subbadge::before {
content: "";
width: 18px;
height: 18px;
background: var(--brand);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.hero__h1 {
margin: 22px 0 0;
font-weight: 900;
font-size: 64px;
line-height: 1.18;
letter-spacing: .01em;
color: var(--ink);
text-wrap: pretty;
}
.hero__h1 .row { display: block; }
.hero__h1 .small {
font-size: 44px;
letter-spacing: .02em;
}
.hero__h1 .warm {
color: var(--warm-deep);
position: relative;
display: inline-block;
padding: 0 .04em;
}
.hero__h1 .warm::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 10px;
background: linear-gradient(90deg, rgba(255,217,194,.0), rgba(255,217,194,.95) 25%, rgba(255,217,194,.95) 75%, rgba(255,217,194,0));
z-index: -1;
border-radius: 4px;
}
.hero__h1 .bang {
color: var(--warm-deep);
font-size: .9em;
}
.hero__lede {
margin-top: 22px;
font-size: 17px;
color: var(--ink-2);
font-weight: 500;
line-height: 1.85;
max-width: 620px;
}
/* === Circle badges === */
.badges {
margin-top: 38px;
display: flex;
gap: 18px;
align-items: flex-end;
}
.badge {
--size: 196px;
width: var(--size);
height: var(--size);
border-radius: 50%;
background: #ffffff;
border: 3px solid var(--brand);
box-shadow:
0 18px 36px -18px rgba(40,70,180,.45),
inset 0 0 0 6px #fff,
inset 0 0 0 7px rgba(65,105,225,.18);
display: grid;
place-items: center;
text-align: center;
padding: 14px;
position: relative;
}
.badge:nth-child(2) { transform: translateY(-18px); }
.badge:nth-child(3) { transform: translateY(6px); }
.badge__cap {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--brand);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
padding: 5px 14px;
border-radius: 999px;
box-shadow: 0 6px 14px -6px rgba(40,70,180,.5);
white-space: nowrap;
}
.badge__cap.warm { background: var(--warm); }
.badge__icon {
width: 30px;
height: 30px;
margin-bottom: 4px;
color: var(--brand);
}
.badge__line1 {
font-size: 12px;
color: var(--ink-2);
font-weight: 700;
letter-spacing: 0;
white-space: nowrap;
}
.badge__main {
font-size: 16px;
font-weight: 900;
color: var(--ink);
line-height: 1.3;
letter-spacing: 0;
margin-top: 4px;
white-space: nowrap;
}
.badge__main em {
font-style: normal;
color: var(--brand-deep);
}
.badge__big {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
margin-top: 2px;
line-height: 1;
}
.badge__big-row {
display: block;
white-space: nowrap;
}
.badge__big .n {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 27px;
color: var(--warm-deep);
line-height: 1;
letter-spacing: 0;
}
.badge__big .unit {
font-size: 13px;
font-weight: 800;
color: var(--ink);
margin-top: 2px;
}
.badge__big .plus {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 19px;
color: var(--warm-deep);
line-height: 1;
margin-left: 2px;
}
.badge__sub {
font-size: 11px;
color: var(--ink-2);
margin-top: 2px;
font-weight: 600;
}
/* === CTAs === */
.ctas {
margin-top: 40px;
display: flex;
gap: 14px;
align-items: center;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
height: 70px;
padding: 0 28px;
border-radius: 14px;
font-weight: 800;
font-size: 18px;
letter-spacing: .04em;
text-decoration: none;
box-shadow: 0 14px 24px -14px rgba(0,0,0,.35);
border: none;
cursor: pointer;
position: relative;
}
.btn--primary {
background: linear-gradient(180deg, #ff8a52, var(--warm-deep));
color: #fff;
min-width: 340px;
white-space: nowrap;
}
.btn--primary > span { white-space: nowrap; }
.btn--primary::after {
content: "›";
font-size: 28px;
margin-left: 6px;
line-height: 1;
transform: translateY(-2px);
}
.btn--line {
background: var(--line-green);
color: #fff;
min-width: 240px;
white-space: nowrap;
}
.btn--line > span { white-space: nowrap; }
.btn--line .line-i {
width: 24px; height: 24px;
background: #fff;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.btn__sub {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
opacity: .9;
margin-bottom: 2px;
}
.btn__main { display:block; font-size: 19px; }
.ctas__note {
font-size: 12px;
color: var(--ink-2);
line-height: 1.6;
margin-left: 6px;
}
/* === RIGHT: craftsman image === */
.hero__visual {
position: relative;
grid-column: 2;
grid-row: 1;
z-index: 2;
align-self: stretch;
margin-left: -120px; /* テキストと被せる */
}
.craftsman {
position: absolute;
right: -56px;
bottom: -72px;
width: 680px;
height: 800px;
z-index: 2;
}
.craftsman__halo {
position: absolute;
inset: 30px 30px 0 30px;
border-radius: 50% 50% 0 0 / 80% 80% 0 0;
background: radial-gradient(ellipse 70% 70% at 50% 35%, #ffffff 0%, rgba(255,255,255,.7) 40%, rgba(255,255,255,0) 75%);
z-index: 1;
}
.craftsman__shadow { display: none; }
.craftsman__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom center;
z-index: 2;
filter: drop-shadow(0 24px 30px rgba(40,55,100,.22));
}
.craftsman__placeholder {
position: absolute;
inset: 40px 60px 60px 60px;
background:
repeating-linear-gradient(135deg,
rgba(65,105,225,.10) 0 14px,
rgba(65,105,225,.04) 14px 28px);
border: 1.5px dashed rgba(65,105,225,.5);
border-radius: 24px;
display: grid;
place-items: center;
z-index: 2;
}
.craftsman__placeholder span {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 13px;
color: var(--brand-deep);
text-align: center;
line-height: 1.7;
background: rgba(255,255,255,.85);
padding: 10px 16px;
border-radius: 8px;
letter-spacing: .04em;
}
/* 吹き出し（職人の上に） */
.speech {
position: absolute;
z-index: 4;
background: #fff;
border: 2px solid var(--brand);
color: var(--brand-deep);
font-weight: 800;
font-size: 16px;
padding: 12px 20px;
border-radius: 14px;
box-shadow: 0 12px 24px -14px rgba(40,70,180,.45);
letter-spacing: .04em;
}
.speech::after {
content: "";
position: absolute;
width: 16px; height: 16px;
background: #fff;
border-right: 2px solid var(--brand);
border-bottom: 2px solid var(--brand);
transform: rotate(45deg);
}
.speech.s1 {
top: 60px;
left: -10px;
}
.speech.s1::after {
bottom: -10px; left: 30px;
}
.speech.s2 {
top: 130px;
left: 40px;
background: var(--brand);
color: #fff;
border-color: var(--brand);
}
.speech.s2::after {
bottom: -10px; left: 40px;
background: var(--brand);
border-color: var(--brand);
}
/* ============ BOTTOM STATS STRIP ============ */
.stats {
background: #1b2540;
color: #fff;
}
.stats__inner {
max-width: 1320px;
margin: 0 auto;
padding: 22px 32px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.stat {
display: flex;
align-items: center;
gap: 14px;
padding: 6px 24px;
border-right: 1px solid rgba(255,255,255,.12);
}
.stat:last-child { border-right: none; }
.stat:first-child { padding-left: 0; }
.stat__big {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 34px;
line-height: 1;
color: #fff;
white-space: nowrap;
flex-shrink: 0;
}
.stat__big .small { font-size: 16px; font-weight: 700; }
.stat__big .warm { color: #ffb38a; }
.stat__txt {
font-size: 13px;
color: #c8d3ee;
line-height: 1.45;
font-weight: 500;
}
.stat__txt strong {
color: #fff;
font-weight: 800;
display: block;
font-size: 14px;
}
/* ---- next block ---- */
.achv {
position: relative;
background:
radial-gradient(ellipse 60% 40% at 90% 10%, #eaf1ff 0%, rgba(234,241,255,0) 70%),
radial-gradient(ellipse 50% 40% at 10% 90%, #eef3ff 0%, rgba(238,243,255,0) 70%),
linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
overflow: hidden;
padding: 0 0 110px;
}
/* 上部の波形セパレーター（メインビジュアルからの連続感） */
.achv__wave {
display: block;
width: 100%;
height: 80px;
}
.achv__pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .55;
background-image:
radial-gradient(circle at 6% 30%, transparent 50px, rgba(65,105,225,0.05) 51px, rgba(65,105,225,0.05) 52px, transparent 53px),
radial-gradient(circle at 6% 30%, transparent 86px, rgba(65,105,225,0.04) 87px, rgba(65,105,225,0.04) 88px, transparent 89px),
radial-gradient(circle at 6% 30%, transparent 122px, rgba(65,105,225,0.03) 123px, rgba(65,105,225,0.03) 124px, transparent 125px),
radial-gradient(circle at 95% 80%, transparent 70px, rgba(65,105,225,0.04) 71px, rgba(65,105,225,0.04) 72px, transparent 73px),
radial-gradient(circle at 95% 80%, transparent 116px, rgba(65,105,225,0.03) 117px, rgba(65,105,225,0.03) 118px, transparent 119px);
}
.achv__inner {
position: relative;
z-index: 2;
max-width: 1320px;
margin: 0 auto;
padding: 56px 32px 0;
}
/* Section header */
.achv__head { margin-bottom: 56px; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
color: var(--brand);
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: .22em;
}
.eyebrow::before {
content: "";
display: inline-block;
width: 36px;
height: 2px;
background: var(--brand);
}
.achv__h2 {
font-size: 54px;
font-weight: 900;
color: var(--ink);
letter-spacing: .02em;
margin: 14px 0 14px;
line-height: 1.2;
}
.achv__h2 .accent { color: var(--brand-deep); }
.achv__lede {
font-size: 17px;
color: var(--ink-2);
font-weight: 500;
line-height: 1.8;
}
/* Two-column grid */
.achv__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 36px;
align-items: start;
}
/* === LEFT === */
.achv-left { display: flex; flex-direction: column; gap: 24px; }
/* (a) Big result card */
.result-card {
position: relative;
background: #fff;
border-radius: 24px;
padding: 40px 44px 36px;
box-shadow:
0 30px 60px -40px rgba(40,70,180,.35),
0 2px 0 rgba(65,105,225,.08);
overflow: hidden;
}
.result-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
background: linear-gradient(90deg, var(--brand), var(--brand-soft));
}
.result-card__ripple {
position: absolute;
right: -80px;
bottom: -80px;
width: 320px;
height: 320px;
border-radius: 50%;
background:
radial-gradient(circle, transparent 110px, rgba(65,105,225,.06) 111px, rgba(65,105,225,.06) 112px, transparent 113px),
radial-gradient(circle, transparent 80px, rgba(65,105,225,.05) 81px, rgba(65,105,225,.05) 82px, transparent 83px),
radial-gradient(circle, transparent 50px, rgba(65,105,225,.04) 51px, rgba(65,105,225,.04) 52px, transparent 53px);
pointer-events: none;
}
.result-card__badge {
position: absolute;
top: 22px;
right: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
display: grid;
place-items: center;
box-shadow: 0 8px 16px -8px rgba(40,70,180,.6);
}
.result-card__badge svg { width: 30px; height: 30px; color: #fff; }
.result-card__label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 800;
color: var(--brand);
letter-spacing: .14em;
}
.result-card__label::before {
content: "";
width: 22px;
height: 2px;
background: var(--brand);
}
.result-card__cap {
font-size: 16px;
color: var(--ink-2);
font-weight: 700;
margin-top: 8px;
letter-spacing: .02em;
}
.result-card__num {
margin-top: 18px;
display: flex;
align-items: baseline;
justify-content: center;
gap: 8px;
line-height: .9;
}
.result-card__num .n {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 156px;
color: var(--ink);
letter-spacing: -.04em;
background: linear-gradient(180deg, #1b2540 0%, #2d3a5e 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.result-card__num .plus {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 80px;
color: var(--brand);
line-height: 1;
}
.result-card__num .unit {
font-size: 36px;
font-weight: 900;
color: var(--brand-deep);
}
.result-card__bar {
margin: 22px auto 0;
height: 8px;
width: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--brand) 0%, var(--brand-soft) 78%, rgba(106,141,240,.15) 78%, rgba(106,141,240,.15) 100%);
position: relative;
}
.result-card__bar::after {
content: "達成率 78%";
position: absolute;
right: 0;
top: -22px;
font-size: 11px;
font-weight: 700;
color: var(--ink-2);
letter-spacing: .04em;
}
.result-card__foot {
margin-top: 22px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--ink-2);
font-size: 13px;
font-weight: 600;
border-top: 1px dashed var(--rule);
padding-top: 18px;
}
.result-card__foot strong { color: var(--brand-deep); font-weight: 800; }
/* (b) Region banner */
.region-banner {
position: relative;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
color: #fff;
border-radius: 20px;
padding: 28px 32px;
display: flex;
align-items: center;
gap: 24px;
overflow: hidden;
box-shadow: 0 20px 40px -28px rgba(40,70,180,.7);
}
.region-banner::before {
content: "";
position: absolute;
right: -60px; top: -60px;
width: 240px; height: 240px;
border-radius: 50%;
background:
radial-gradient(circle, transparent 80px, rgba(255,255,255,.08) 81px, rgba(255,255,255,.08) 82px, transparent 83px),
radial-gradient(circle, transparent 50px, rgba(255,255,255,.06) 51px, rgba(255,255,255,.06) 52px, transparent 53px);
pointer-events: none;
}
.region-banner__icon {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 16px;
background: rgba(255,255,255,.15);
display: grid;
place-items: center;
backdrop-filter: blur(4px);
}
.region-banner__icon svg { width: 30px; height: 30px; color: #fff; }
.region-banner__txt { position: relative; z-index: 2; }
.region-banner__main {
font-size: 22px;
font-weight: 900;
letter-spacing: .04em;
line-height: 1.4;
}
.region-banner__main em {
font-style: normal;
color: #ffe1a8;
background: linear-gradient(transparent 65%, rgba(255,165,0,.35) 65%);
padding: 0 .04em;
}
.region-banner__sub {
font-size: 13px;
margin-top: 4px;
color: rgba(255,255,255,.85);
font-weight: 600;
letter-spacing: .04em;
}
/* (c) Photo grid */
.photos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.photo {
aspect-ratio: 3/4;
border-radius: 16px;
background:
repeating-linear-gradient(135deg,
rgba(65,105,225,.10) 0 12px,
rgba(65,105,225,.04) 12px 24px);
border: 1.5px dashed rgba(65,105,225,.45);
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.photo span {
background: rgba(255,255,255,.92);
border-radius: 8px;
padding: 8px 14px;
font-size: 13px;
font-weight: 700;
color: var(--brand-deep);
letter-spacing: .04em;
}
.photos-more {
margin-top: 6px;
text-align: right;
}
.photos-more a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--brand-deep);
font-weight: 800;
font-size: 14px;
text-decoration: none;
letter-spacing: .04em;
}
.photos-more a::after {
content: "→";
transition: transform .2s ease;
}
.photos-more a:hover { color: var(--brand); }
.photos-more a:hover::after { transform: translateX(4px); }
.photo--sp { display: none; } /* PCでは非表示、スマホで表示 */
/* === RIGHT: Service area === */
.area {
background: #fff;
border-radius: 24px;
padding: 32px 32px 36px;
box-shadow:
0 30px 60px -40px rgba(40,70,180,.35),
0 2px 0 rgba(65,105,225,.08);
position: relative;
overflow: hidden;
}
.area::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
background: linear-gradient(90deg, var(--brand-soft), var(--brand));
}
.area__title {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 22px;
}
.area__title h3 {
margin: 0;
font-size: 24px;
font-weight: 900;
color: var(--ink);
letter-spacing: .04em;
}
.area__title small {
font-size: 12px;
color: var(--ink-2);
font-weight: 600;
letter-spacing: .04em;
}
/* Tabs: 6 columns */
.area__tabs {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
margin-bottom: 24px;
}
.tab-btn {
appearance: none;
border: 1.5px solid var(--rule);
background: #fff;
color: var(--ink-2);
font-weight: 700;
font-size: 14px;
padding: 14px 6px;
border-radius: 10px;
cursor: pointer;
letter-spacing: .04em;
position: relative;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tab-btn:hover { border-color: var(--brand-soft); color: var(--brand-deep); }
.tab-btn.is-active {
background: linear-gradient(180deg, var(--brand), var(--brand-deep));
color: #fff;
border-color: var(--brand-deep);
box-shadow: 0 8px 18px -10px rgba(40,70,180,.6);
}
.tab-btn.is-active::after {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 14px;
height: 14px;
background: var(--brand-deep);
transform: translateX(-50%) rotate(45deg);
border-radius: 2px;
}
/* Panel */
.area__panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: #f1f6ff;
border-radius: 12px;
margin-bottom: 16px;
}
.area__panel-head .pref {
font-size: 16px;
font-weight: 900;
color: var(--brand-deep);
letter-spacing: .04em;
}
.area__panel-head .count {
font-size: 13px;
color: var(--ink-2);
font-weight: 700;
}
.area__panel-head .count strong {
font-family: "Montserrat", sans-serif;
font-size: 18px;
color: var(--brand-deep);
margin: 0 4px;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-height: 280px;
align-content: flex-start;
}
.chip {
background: #fff;
border: 1.5px solid #d9e3f7;
color: var(--ink);
font-size: 13px;
font-weight: 700;
padding: 9px 14px;
border-radius: 10px;
letter-spacing: .02em;
transition: all .15s ease;
}
.chip:hover {
border-color: var(--brand);
color: var(--brand-deep);
background: #f6faff;
}
.area__note {
margin-top: 22px;
padding: 14px 18px;
background: #fff8ef;
border-left: 4px solid var(--warm);
border-radius: 6px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.7;
font-weight: 600;
}
.area__note strong { color: var(--warm-deep); font-weight: 800; }
/* ---- next block ---- */
.worries {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 55% 40% at 12% 12%, #eef3ff 0%, rgba(238,243,255,0) 70%),
radial-gradient(ellipse 55% 40% at 88% 92%, #eaf1ff 0%, rgba(234,241,255,0) 70%),
linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
padding: 78px 0 88px;
}
.worries__pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .5;
background-image:
radial-gradient(circle at 7% 78%, transparent 56px, rgba(65,105,225,0.05) 57px, rgba(65,105,225,0.05) 58px, transparent 59px),
radial-gradient(circle at 7% 78%, transparent 92px, rgba(65,105,225,0.04) 93px, rgba(65,105,225,0.04) 94px, transparent 95px),
radial-gradient(circle at 93% 18%, transparent 70px, rgba(65,105,225,0.04) 71px, rgba(65,105,225,0.04) 72px, transparent 73px),
radial-gradient(circle at 93% 18%, transparent 116px, rgba(65,105,225,0.03) 117px, rgba(65,105,225,0.03) 118px, transparent 119px);
}
.worries__inner {
position: relative;
z-index: 2;
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
}
.worries__title {
text-align: center;
margin: 0 0 48px;
font-size: 54px;
font-weight: 900;
letter-spacing: .02em;
color: var(--ink);
line-height: 1.2;
}
.worries__title .accent { color: var(--warm-deep); }
.worries__title .sp-br { display: none; }
.worries__title-img { display: none; }
/* Worry card */
.worry-card {
position: relative;
background: #fff;
border-radius: 28px;
box-shadow:
0 34px 70px -42px rgba(40,70,180,.4),
0 2px 0 rgba(65,105,225,.06);
display: grid;
grid-template-columns: 360px 1fr;
gap: 0;
overflow: hidden;
}
.worry-card__ripple {
position: absolute;
right: -90px; bottom: -90px;
width: 320px; height: 320px;
border-radius: 50%;
background:
radial-gradient(circle, transparent 110px, rgba(65,105,225,.05) 111px, rgba(65,105,225,.05) 112px, transparent 113px),
radial-gradient(circle, transparent 75px, rgba(65,105,225,.04) 76px, rgba(65,105,225,.04) 77px, transparent 78px);
pointer-events: none;
}
/* Craftsman in card */
.worry-card__person {
position: relative;
align-self: stretch;
min-height: 460px;
background:
linear-gradient(180deg, #f1f6ff 0%, #e6eeff 100%);
display: grid;
place-items: end center;
}
.worry-card__img {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
z-index: 2;
}
.worry-card__person-ph {
width: 80%;
height: 88%;
margin-bottom: 0;
background:
repeating-linear-gradient(135deg,
rgba(65,105,225,.16) 0 12px,
rgba(65,105,225,.05) 12px 24px);
border: 1.5px dashed rgba(65,105,225,.5);
border-radius: 18px 18px 0 0;
display: grid;
place-items: center;
}
.worry-card__person-ph span {
background: rgba(255,255,255,.92);
padding: 9px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
color: var(--brand-deep);
text-align: center;
line-height: 1.6;
}
/* Worry list */
.worry-list {
position: relative;
z-index: 2;
padding: 30px 48px;
display: flex;
flex-direction: column;
justify-content: center;
}
.worry-item {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 4px;
}
.worry-item + .worry-item {
border-top: 2px dashed #dbe3f2;
}
.worry-check {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 8px;
border: 2px solid #c9d4e8;
background: #fff;
display: grid;
place-items: center;
box-shadow: inset 0 1px 3px rgba(0,0,0,.04);
}
.worry-check svg {
width: 26px;
height: 26px;
color: #e8312b;
margin: -6px -2px 0 0;
}
.worry-text {
font-size: 23px;
font-weight: 800;
color: var(--ink);
letter-spacing: .02em;
line-height: 1.4;
}
.worry-text .em { color: var(--brand-deep); }
/* Arrow connector */
.worries__arrow {
display: flex;
justify-content: center;
margin: -2px 0 0;
}
.worries__arrow svg {
width: 90px;
height: 56px;
color: var(--brand);
filter: drop-shadow(0 10px 12px rgba(40,70,180,.25));
}
/* Reassurance block */
.reassure {
text-align: center;
margin-top: 18px;
}
.reassure__big {
font-size: 56px;
font-weight: 900;
color: var(--ink);
letter-spacing: .04em;
margin: 0 0 18px;
line-height: 1.2;
}
.reassure__big .accent { color: var(--brand-deep); }
.reassure__lead {
font-size: 30px;
font-weight: 900;
line-height: 1.6;
letter-spacing: .03em;
color: var(--ink);
}
.reassure__hl {
display: inline;
background: linear-gradient(transparent 58%, #ffe14d 58%, #ffe14d 92%, transparent 92%);
padding: 0 .12em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.reassure__lead .free { color: var(--warm-deep); }
/* ---- next block ---- */
.reasons {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 50% 36% at 88% 8%, #eef3ff 0%, rgba(238,243,255,0) 70%),
radial-gradient(ellipse 50% 36% at 10% 94%, #eaf1ff 0%, rgba(234,241,255,0) 70%),
linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
padding: 70px 0 96px;
}
.reasons__pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .5;
background-image:
radial-gradient(circle at 5% 24%, transparent 56px, rgba(65,105,225,0.05) 57px, rgba(65,105,225,0.05) 58px, transparent 59px),
radial-gradient(circle at 5% 24%, transparent 92px, rgba(65,105,225,0.04) 93px, rgba(65,105,225,0.04) 94px, transparent 95px),
radial-gradient(circle at 95% 82%, transparent 70px, rgba(65,105,225,0.04) 71px, rgba(65,105,225,0.04) 72px, transparent 73px),
radial-gradient(circle at 95% 82%, transparent 116px, rgba(65,105,225,0.03) 117px, rgba(65,105,225,0.03) 118px, transparent 119px);
}
.reasons__inner {
position: relative;
z-index: 2;
max-width: 1320px;
margin: 0 auto;
padding: 0 32px;
}
/* Title block with people on sides */
.reasons__head {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 36px;
min-height: 300px;
}
.reasons__people {
flex-shrink: 0;
position: relative;
display: flex;
align-items: flex-end;
}
.reasons__people.worker { z-index: 2; }
.reasons__people-img {
display: block;
width: auto;
height: 300px;
filter: drop-shadow(0 16px 22px rgba(40,55,100,.18));
}
.reasons__people.customers .reasons__people-img { height: 270px; }
.reasons__people-ph {
position: absolute;
inset: 0;
background:
repeating-linear-gradient(135deg,
rgba(65,105,225,.15) 0 12px,
rgba(65,105,225,.05) 12px 24px);
border: 1.5px dashed rgba(65,105,225,.5);
border-radius: 18px;
display: grid;
place-items: center;
}
.reasons__people-ph span {
background: rgba(255,255,255,.92);
padding: 9px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
color: var(--brand-deep);
text-align: center;
line-height: 1.6;
}
.reasons__title-wrap {
position: relative;
text-align: center;
padding: 0 40px 24px;
flex-shrink: 0;
}
.reasons__ribbon {
display: inline-block;
position: relative;
background: var(--brand);
color: #fff;
font-size: 16px;
font-weight: 800;
letter-spacing: .08em;
padding: 8px 28px;
border-radius: 999px;
margin-bottom: 18px;
}
.reasons__ribbon::before, .reasons__ribbon::after {
content: none;
position: absolute;
bottom: 6px;
width: 3px; height: 18px;
background: var(--brand-soft);
border-radius: 2px;
}
.reasons__ribbon::before { left: -8px; transform: rotate(24deg); }
.reasons__ribbon::after { right: -8px; transform: rotate(-24deg); }
.reasons__circle {
position: absolute;
left: 50%;
top: 64px;
transform: translateX(-50%);
width: 360px;
height: 200px;
border-radius: 50%;
background: radial-gradient(ellipse, #d6e6ff 0%, #c3d8ff 60%, rgba(195,216,255,0) 72%);
z-index: -1;
}
.reasons__title {
margin: 0;
font-size: 54px;
font-weight: 900;
letter-spacing: .02em;
color: var(--ink);
line-height: 1.2;
}
.reasons__title .num6 {
color: var(--warm-deep);
font-family: "Montserrat", sans-serif;
font-size: 1.1em;
}
/* Lead box */
.reasons__lead {
max-width: 1000px;
margin: 0 auto 48px;
background: #fff;
border-radius: 20px;
padding: 28px 40px;
box-shadow: 0 20px 44px -32px rgba(40,70,180,.4);
border: 1.5px solid #eaf0fc;
}
.reasons__lead h3 {
margin: 0 0 12px;
font-size: 24px;
font-weight: 900;
color: var(--warm-deep);
letter-spacing: .02em;
}
.reasons__lead p {
margin: 0;
font-size: 15px;
line-height: 1.9;
color: var(--ink-2);
font-weight: 500;
}
/* Cards: 6 in a row */
.reasons__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
.reason-card {
position: relative;
background: #fff;
border-radius: 18px;
padding: 30px 16px 22px;
box-shadow: 0 18px 40px -28px rgba(40,70,180,.4);
border: 1.5px solid #eef3fc;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.reason-card__ribbon {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, #ff8a52, var(--warm-deep));
color: #fff;
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
padding: 6px 18px 8px;
border-radius: 0 0 10px 10px;
box-shadow: 0 6px 12px -6px rgba(232,90,28,.6);
white-space: nowrap;
}
.reason-card__img {
width: 100%;
aspect-ratio: 1 / 1;
margin: 14px 0 16px;
background:
repeating-linear-gradient(135deg,
rgba(65,105,225,.14) 0 10px,
rgba(65,105,225,.05) 10px 20px);
border: 1.5px dashed rgba(65,105,225,.45);
border-radius: 14px;
display: grid;
place-items: center;
}
.reason-card__img.has-photo {
background: none;
border: none;
padding: 0;
overflow: hidden;
}
.reason-card__img.has-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.reason-card__img span {
background: rgba(255,255,255,.9);
padding: 6px 8px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
color: var(--brand-deep);
text-align: center;
line-height: 1.4;
}
.reason-card__title {
font-size: 18px;
font-weight: 900;
color: var(--brand-deep);
letter-spacing: 0;
line-height: 1.4;
margin-bottom: 12px;
min-height: 2.8em;
display: block;
text-align: center;
white-space: nowrap;
}
.reason-card__title .hl {
font-family: "Montserrat", sans-serif;
color: var(--warm-deep);
font-size: 1.05em;
}
.reason-card__desc {
font-size: 12.5px;
line-height: 1.75;
color: var(--ink-2);
font-weight: 500;
text-align: left;
}
/* ---- next block ---- */
.cases {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 55% 40% at 10% 8%, #eef3ff 0%, rgba(238,243,255,0) 70%),
radial-gradient(ellipse 55% 40% at 90% 94%, #eaf1ff 0%, rgba(234,241,255,0) 70%),
linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
padding: 72px 0 96px;
}
.cases__pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .5;
background-image:
radial-gradient(circle at 6% 80%, transparent 56px, rgba(65,105,225,0.05) 57px, rgba(65,105,225,0.05) 58px, transparent 59px),
radial-gradient(circle at 6% 80%, transparent 92px, rgba(65,105,225,0.04) 93px, rgba(65,105,225,0.04) 94px, transparent 95px),
radial-gradient(circle at 94% 20%, transparent 70px, rgba(65,105,225,0.04) 71px, rgba(65,105,225,0.04) 72px, transparent 73px),
radial-gradient(circle at 94% 20%, transparent 116px, rgba(65,105,225,0.03) 117px, rgba(65,105,225,0.03) 118px, transparent 119px);
}
.cases__inner {
position: relative;
z-index: 2;
max-width: 1320px;
margin: 0 auto;
padding: 0 32px;
}
.cases__head { margin-bottom: 48px; }
.cases__title {
margin: 0 0 18px;
font-size: 54px;
font-weight: 900;
letter-spacing: .02em;
color: var(--ink);
line-height: 1.2;
}
.cases__note {
display: inline-block;
background: linear-gradient(180deg, #ff8a52, var(--warm-deep));
color: #fff;
font-size: 16px;
font-weight: 800;
letter-spacing: .03em;
padding: 12px 28px;
border-radius: 999px;
box-shadow: 0 10px 22px -12px rgba(232,90,28,.6);
}
.cases__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.case-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 18px 40px -28px rgba(40,70,180,.4);
border: 1.5px solid #eef3fc;
display: flex;
flex-direction: column;
}
.case-card__imgs {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
}
.case-img {
position: relative;
aspect-ratio: 1 / 1;
background:
repeating-linear-gradient(135deg,
rgba(65,105,225,.14) 0 10px,
rgba(65,105,225,.05) 10px 20px);
display: grid;
place-items: center;
}
.case-img.after {
background:
repeating-linear-gradient(135deg,
rgba(65,105,225,.2) 0 10px,
rgba(65,105,225,.08) 10px 20px);
border-left: 1.5px solid #fff;
}
.case-img__ph {
font-size: 11px;
font-weight: 700;
color: var(--brand-deep);
opacity: .5;
letter-spacing: .1em;
}
.case-img__lbl {
position: absolute;
left: 0; bottom: 0;
width: 100%;
text-align: center;
font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
padding: 5px 0;
color: #fff;
}
.case-img.before .case-img__lbl { background: rgba(90,100,120,.88); }
.case-img.after .case-img__lbl { background: var(--brand); }
.case-card__body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
flex: 1;
}
.case-card__date {
font-size: 12px;
color: var(--ink-2);
font-weight: 600;
letter-spacing: .02em;
margin-bottom: 8px;
}
.case-card__name {
font-size: 15px;
font-weight: 800;
color: var(--ink);
line-height: 1.55;
letter-spacing: .01em;
flex: 1;
}
.case-card__area {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--rule);
font-size: 13px;
color: var(--ink-2);
font-weight: 600;
}
.case-card__area .lbl {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--brand);
font-weight: 800;
}
.case-card__area .lbl svg { width: 14px; height: 14px; }
.cases__more {
margin-top: 44px;
text-align: center;
}
.cases__more a {
display: inline-flex;
align-items: center;
gap: 12px;
background: #fff;
border: 2px solid var(--brand);
color: var(--brand-deep);
font-weight: 800;
font-size: 17px;
letter-spacing: .04em;
padding: 16px 56px;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 14px 30px -18px rgba(40,70,180,.5);
transition: background .15s ease, color .15s ease;
}
.cases__more a::after { content: "→"; transition: transform .2s ease; }
.cases__more a:hover { background: var(--brand); color: #fff; }
.cases__more a:hover::after { transform: translateX(5px); }
/* ---- next block ---- */
.steps {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 55% 40% at 90% 8%, #eef3ff 0%, rgba(238,243,255,0) 70%),
radial-gradient(ellipse 55% 40% at 8% 94%, #eaf1ff 0%, rgba(234,241,255,0) 70%),
linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
padding: 72px 0 96px;
}
.steps__pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .5;
background-image:
radial-gradient(circle at 5% 22%, transparent 56px, rgba(65,105,225,0.05) 57px, rgba(65,105,225,0.05) 58px, transparent 59px),
radial-gradient(circle at 5% 22%, transparent 92px, rgba(65,105,225,0.04) 93px, rgba(65,105,225,0.04) 94px, transparent 95px),
radial-gradient(circle at 95% 84%, transparent 70px, rgba(65,105,225,0.04) 71px, rgba(65,105,225,0.04) 72px, transparent 73px),
radial-gradient(circle at 95% 84%, transparent 116px, rgba(65,105,225,0.03) 117px, rgba(65,105,225,0.03) 118px, transparent 119px);
}
.steps__inner {
position: relative;
z-index: 2;
max-width: 1320px;
margin: 0 auto;
padding: 0 32px;
}
.steps__title {
text-align: center;
margin: 0 0 52px;
font-size: 54px;
font-weight: 900;
letter-spacing: .02em;
color: var(--ink);
line-height: 1.2;
}
.steps__title .num4 {
color: var(--warm-deep);
font-family: "Montserrat", sans-serif;
font-size: 1.15em;
}
/* Steps row */
.steps__row {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: stretch;
gap: 0 14px;
}
.step-card {
position: relative;
background: #fff;
border-radius: 18px;
padding: 40px 22px 26px;
box-shadow: 0 18px 40px -28px rgba(40,70,180,.4);
border: 1.5px solid #eef3fc;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.step-card__badge {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.step-card__steplbl {
font-family: "Montserrat", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
color: var(--warm-deep);
margin-bottom: -6px;
background: #fff;
padding: 0 8px;
position: relative;
z-index: 2;
}
.step-card__no {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
color: #fff;
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 26px;
display: grid;
place-items: center;
box-shadow: 0 10px 20px -8px rgba(40,70,180,.6);
border: 3px solid #fff;
}
.step-card__icon {
width: 72px;
height: 72px;
margin: 16px 0 14px;
border-radius: 18px;
background: #f1f6ff;
display: grid;
place-items: center;
}
.step-card__icon svg { width: 38px; height: 38px; color: var(--brand); }
.step-card__title {
font-size: 22px;
font-weight: 900;
color: var(--brand-deep);
letter-spacing: .02em;
margin-bottom: 12px;
}
.step-card__desc {
font-size: 13px;
line-height: 1.8;
color: var(--ink-2);
font-weight: 500;
text-align: left;
}
.step-arrow {
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-soft);
}
.step-arrow svg { width: 30px; height: 30px; }
.step-arrow.divider {
flex-direction: column;
gap: 6px;
}
.step-arrow.divider .bar {
width: 2px;
flex: 1;
background: repeating-linear-gradient(180deg, #b9c8e8 0 6px, transparent 6px 12px);
}
.step-arrow.divider svg { color: #b9c8e8; }
/* Free line (green) */
.steps__free {
margin-top: 26px;
display: grid;
grid-template-columns: calc((100% - 42px) / 4 * 2 + 14px) 1fr;
gap: 0 14px;
align-items: stretch;
}
.steps__free-bracket {
position: relative;
background: linear-gradient(135deg, #14d164 0%, #04a648 100%);
color: #fff;
border-radius: 16px;
padding: 20px 28px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 18px 36px -22px rgba(4,166,72,.7);
}
.steps__free-bracket::before {
content: "";
position: absolute;
top: -12px;
left: 25%;
transform: translateX(-50%);
width: 22px; height: 22px;
background: #11c25d;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.steps__free-bracket::after {
content: "";
position: absolute;
top: -12px;
left: 75%;
transform: translateX(-50%);
width: 22px; height: 22px;
background: #07b150;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.steps__free-icon {
flex-shrink: 0;
width: 56px; height: 56px;
border-radius: 14px;
background: rgba(255,255,255,.2);
display: grid; place-items: center;
}
.steps__free-icon svg { width: 30px; height: 30px; color: #fff; }
.steps__free-txt .big {
font-size: 26px;
font-weight: 900;
letter-spacing: .06em;
line-height: 1.3;
}
.steps__free-txt .big em {
font-style: normal;
color: #fff8b0;
font-size: 1.15em;
}
.steps__free-txt .sub {
font-size: 14px;
font-weight: 700;
margin-top: 4px;
letter-spacing: .03em;
opacity: .95;
}
.steps__free-paid {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--brand-deep);
font-size: 15px;
font-weight: 800;
letter-spacing: .04em;
border: 2px solid var(--brand);
border-radius: 16px;
background: linear-gradient(135deg, #eaf1ff 0%, #d4e3ff 100%);
box-shadow: inset 0 0 0 4px #fff;
}
/* Aftercare block */
.aftercare {
position: relative;
margin-top: 30px;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
border-radius: 18px;
padding: 24px 32px;
color: #fff;
overflow: hidden;
box-shadow: 0 20px 40px -28px rgba(40,70,180,.6);
}
.aftercare::before {
content: "";
position: absolute;
right: -70px; top: -90px;
width: 280px; height: 280px;
border-radius: 50%;
background:
radial-gradient(circle, transparent 100px, rgba(255,255,255,.08) 101px, rgba(255,255,255,.08) 102px, transparent 103px),
radial-gradient(circle, transparent 65px, rgba(255,255,255,.06) 66px, rgba(255,255,255,.06) 67px, transparent 68px);
pointer-events: none;
}
.aftercare__txt { position: relative; z-index: 2; }
.aftercare__title {
font-size: 21px;
font-weight: 900;
letter-spacing: .03em;
margin: 0 0 8px;
}
.aftercare__title em { font-style: normal; color: #ffe1a8; }
.aftercare__desc {
font-size: 14px;
line-height: 1.8;
font-weight: 500;
color: rgba(255,255,255,.92);
max-width: 920px;
}
/* ---- next block ---- */
.after {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 55% 40% at 8% 6%, #eef3ff 0%, rgba(238,243,255,0) 70%),
radial-gradient(ellipse 55% 40% at 92% 96%, #eaf1ff 0%, rgba(234,241,255,0) 70%),
linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
padding: 76px 0 100px;
}
.after__pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .5;
background-image:
radial-gradient(circle at 6% 20%, transparent 56px, rgba(65,105,225,0.05) 57px, rgba(65,105,225,0.05) 58px, transparent 59px),
radial-gradient(circle at 6% 20%, transparent 92px, rgba(65,105,225,0.04) 93px, rgba(65,105,225,0.04) 94px, transparent 95px),
radial-gradient(circle at 94% 84%, transparent 70px, rgba(65,105,225,0.04) 71px, rgba(65,105,225,0.04) 72px, transparent 73px),
radial-gradient(circle at 94% 84%, transparent 116px, rgba(65,105,225,0.03) 117px, rgba(65,105,225,0.03) 118px, transparent 119px);
}
.after__inner {
position: relative;
z-index: 2;
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
}
.after__title {
text-align: center;
margin: 0 0 16px;
font-size: 54px;
font-weight: 900;
letter-spacing: .02em;
color: var(--ink);
line-height: 1.2;
}
.after__title .accent { color: var(--brand-deep); }
.after__eyebrow {
text-align: center;
color: var(--brand);
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: .24em;
margin-bottom: 52px;
}
/* Key message */
.after__keymsg {
text-align: center;
margin-bottom: 44px;
}
.after__keymsg .line1 {
font-size: 26px;
font-weight: 800;
color: var(--ink-2);
letter-spacing: .02em;
line-height: 1.6;
}
.after__keymsg .strike {
position: relative;
color: #9aa6c2;
white-space: nowrap;
}
.after__keymsg .strike::after {
content: "";
position: absolute;
left: -2px; right: -2px; top: 52%;
height: 4px;
background: #e8312b;
transform: rotate(-3deg);
border-radius: 2px;
}
.after__keymsg .line2 {
margin-top: 14px;
font-size: 40px;
font-weight: 900;
color: var(--brand-deep);
letter-spacing: .03em;
line-height: 1.35;
}
.after__keymsg .line2 .hl {
position: relative;
display: inline-block;
padding: 0 .08em;
}
.after__keymsg .line2 .hl::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 2px;
height: 12px;
background: rgba(255,217,194,.85);
z-index: -1;
border-radius: 4px;
}
/* Failure flow (muted) */
.failbox {
background: linear-gradient(180deg, #f7f4ef 0%, #f1ece3 100%);
border: 1.5px solid #e4dccf;
border-radius: 22px;
padding: 30px 34px 34px;
margin-bottom: 56px;
}
.failbox__head {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 26px;
color: #b06a3c;
font-size: 20px;
font-weight: 900;
letter-spacing: .03em;
}
.failbox__head svg { width: 26px; height: 26px; flex-shrink: 0; }
.failflow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: stretch;
gap: 0 6px;
}
.failstep {
background: #fff;
border: 1.5px solid #e4dccf;
border-radius: 14px;
padding: 18px 12px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.failstep__face { width: 40px; height: 40px; }
.failstep__face.ok { color: #d8a85a; }
.failstep__face.warn { color: #c98a3e; }
.failstep__face.bad { color: #d9534f; }
.failstep__txt {
font-size: 13.5px;
font-weight: 800;
color: #6b5d49;
line-height: 1.5;
}
.failstep.danger {
background: #fbece9;
border-color: #f0c4bd;
}
.failstep.danger .failstep__txt { color: #c0392b; }
.failstep__amt {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 12px;
color: #c0392b;
background: #f7d7d1;
padding: 2px 8px;
border-radius: 999px;
}
.failarrow {
display: flex;
align-items: center;
justify-content: center;
color: #c9b89c;
}
.failarrow svg { width: 22px; height: 22px; }
/* Stance block */
.stance {
margin-bottom: 60px;
}
.stance__txt .big {
font-size: 30px;
font-weight: 900;
color: var(--ink);
letter-spacing: .02em;
line-height: 1.5;
margin-bottom: 18px;
}
.stance__txt .big em {
font-style: normal;
color: var(--brand-deep);
}
.stance__txt p {
margin: 0;
font-size: 16px;
line-height: 1.95;
color: var(--ink-2);
font-weight: 500;
}
.stance__txt .point {
display: inline-block;
margin-top: 18px;
background: var(--brand);
color: #fff;
font-size: 17px;
font-weight: 800;
letter-spacing: .04em;
padding: 12px 26px;
border-radius: 12px;
box-shadow: 0 12px 24px -14px rgba(40,70,180,.6);
}
.stance__txt .point em { font-style: normal; color: #ffe1a8; }
.stance__img {
position: relative;
aspect-ratio: 4 / 5;
background:
repeating-linear-gradient(135deg,
rgba(65,105,225,.14) 0 12px,
rgba(65,105,225,.05) 12px 24px);
border: 1.5px dashed rgba(65,105,225,.5);
border-radius: 18px;
display: grid;
place-items: center;
}
.stance__img span {
background: rgba(255,255,255,.92);
padding: 9px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
color: var(--brand-deep);
text-align: center;
line-height: 1.6;
}
/* W warranty block */
.warranty {
position: relative;
background: linear-gradient(160deg, #eaf1ff 0%, #dbe7ff 100%);
border-radius: 26px;
padding: 44px 44px 48px;
overflow: hidden;
box-shadow: inset 0 0 0 2px rgba(65,105,225,.12);
}
.warranty::before {
content: "";
position: absolute;
right: -90px; top: -100px;
width: 320px; height: 320px;
border-radius: 50%;
background:
radial-gradient(circle, transparent 110px, rgba(65,105,225,.06) 111px, rgba(65,105,225,.06) 112px, transparent 113px),
radial-gradient(circle, transparent 75px, rgba(65,105,225,.05) 76px, rgba(65,105,225,.05) 77px, transparent 78px);
pointer-events: none;
}
.warranty__head {
position: relative;
text-align: center;
margin-bottom: 34px;
}
.warranty__emblem {
display: inline-flex;
align-items: center;
gap: 16px;
background: #fff;
border-radius: 999px;
padding: 12px 30px 12px 16px;
box-shadow: 0 16px 32px -18px rgba(40,70,180,.5);
}
.warranty__emblem-ico {
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
display: grid; place-items: center;
}
.warranty__emblem-ico svg { width: 30px; height: 30px; color: #fff; }
.warranty__emblem-txt {
text-align: left;
}
.warranty__emblem-txt .w {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 13px;
color: var(--brand);
letter-spacing: .1em;
}
.warranty__emblem-txt .main {
font-size: 22px;
font-weight: 900;
color: var(--ink);
letter-spacing: .02em;
}
.warranty__emblem-txt .main em {
font-style: normal;
font-family: "Montserrat", sans-serif;
color: var(--warm-deep);
font-size: 1.3em;
}
.warranty__sub {
margin-top: 16px;
font-size: 22px;
font-weight: 900;
color: var(--brand-deep);
letter-spacing: .03em;
}
.warranty__sub em {
font-style: normal;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
color: var(--warm-deep);
vertical-align: -2px;
}
.warranty__cards {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0 20px;
align-items: stretch;
}
.wcard {
background: #fff;
border-radius: 18px;
padding: 28px 28px 26px;
box-shadow: 0 18px 38px -26px rgba(40,70,180,.4);
}
.wcard__tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: #f1f6ff;
color: var(--brand-deep);
font-size: 13px;
font-weight: 800;
letter-spacing: .06em;
padding: 7px 16px;
border-radius: 999px;
margin-bottom: 14px;
}
.wcard__tag svg { width: 16px; height: 16px; }
.wcard__title {
font-size: 22px;
font-weight: 900;
color: var(--ink);
letter-spacing: .02em;
margin-bottom: 10px;
}
.wcard__desc {
font-size: 14px;
line-height: 1.85;
color: var(--ink-2);
font-weight: 500;
}
.wcard__desc .em { color: var(--brand-deep); font-weight: 800; }
.wplus {
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 38px;
color: var(--brand);
}
.warranty__doc {
position: relative;
margin-top: 26px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: var(--brand-deep);
color: #fff;
border-radius: 14px;
padding: 16px 28px;
font-size: 17px;
font-weight: 800;
letter-spacing: .04em;
}
.warranty__doc svg { width: 24px; height: 24px; flex-shrink: 0; }
.warranty__doc em { font-style: normal; color: #ffe1a8; }
/* ---- next block ---- */
.faq {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 55% 40% at 90% 6%, #eef3ff 0%, rgba(238,243,255,0) 70%),
radial-gradient(ellipse 55% 40% at 8% 96%, #eaf1ff 0%, rgba(234,241,255,0) 70%),
linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
padding: 76px 0 100px;
}
.faq__pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .5;
background-image:
radial-gradient(circle at 5% 18%, transparent 56px, rgba(65,105,225,0.05) 57px, rgba(65,105,225,0.05) 58px, transparent 59px),
radial-gradient(circle at 5% 18%, transparent 92px, rgba(65,105,225,0.04) 93px, rgba(65,105,225,0.04) 94px, transparent 95px),
radial-gradient(circle at 95% 86%, transparent 70px, rgba(65,105,225,0.04) 71px, rgba(65,105,225,0.04) 72px, transparent 73px),
radial-gradient(circle at 95% 86%, transparent 116px, rgba(65,105,225,0.03) 117px, rgba(65,105,225,0.03) 118px, transparent 119px);
}
.faq__inner {
position: relative;
z-index: 2;
max-width: 920px;
margin: 0 auto;
padding: 0 32px;
}
.faq__title {
text-align: center;
margin: 0 0 48px;
font-size: 54px;
font-weight: 900;
letter-spacing: .02em;
color: var(--ink);
line-height: 1.2;
}
.faq__list {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-item {
background: #fff;
border-radius: 16px;
border: 1.5px solid #eef3fc;
box-shadow: 0 14px 32px -26px rgba(40,70,180,.4);
overflow: hidden;
transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item.is-open {
border-color: var(--brand-soft);
box-shadow: 0 20px 40px -24px rgba(40,70,180,.5);
}
.faq-q {
display: flex;
align-items: center;
gap: 18px;
width: 100%;
padding: 22px 26px;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
}
.faq-q__badge {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
color: #fff;
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 19px;
display: grid;
place-items: center;
}
.faq-q__text {
flex: 1;
font-size: 18px;
font-weight: 800;
color: var(--ink);
letter-spacing: .01em;
line-height: 1.5;
}
.faq-q__toggle {
flex-shrink: 0;
position: relative;
width: 26px;
height: 26px;
}
.faq-q__toggle::before, .faq-q__toggle::after {
content: "";
position: absolute;
background: var(--brand);
border-radius: 2px;
transition: transform .25s ease, opacity .25s ease;
}
.faq-q__toggle::before {
left: 50%; top: 4px;
width: 3px; height: 18px;
transform: translateX(-50%);
}
.faq-q__toggle::after {
top: 50%; left: 4px;
height: 3px; width: 18px;
transform: translateY(-50%);
}
.faq-item.is-open .faq-q__toggle::before { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-a {
overflow: hidden;
max-height: 0;
transition: max-height .3s ease;
}
.faq-a__inner {
display: flex;
align-items: flex-start;
gap: 18px;
margin: 0 26px 24px;
padding: 20px 22px;
background: #f1f6ff;
border-radius: 12px;
}
.faq-a__badge {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #ff8a52, var(--warm-deep));
color: #fff;
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 19px;
display: grid;
place-items: center;
}
.faq-a__text {
flex: 1;
font-size: 15.5px;
line-height: 1.9;
color: var(--ink-2);
font-weight: 500;
padding-top: 5px;
}
/* ---- next block ---- */
.cta {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, #fff8ee 0%, #fbf3e2 28%, #eef4ff 72%, #dde8ff 100%);
padding: 0 0 100px;
}
.cta__wave-top {
display: block;
width: 100%;
height: 70px;
}
.cta__pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .55;
background-image:
radial-gradient(circle at 8% 24%, transparent 56px, rgba(65,105,225,0.05) 57px, rgba(65,105,225,0.05) 58px, transparent 59px),
radial-gradient(circle at 8% 24%, transparent 92px, rgba(65,105,225,0.04) 93px, rgba(65,105,225,0.04) 94px, transparent 95px),
radial-gradient(circle at 92% 78%, transparent 70px, rgba(65,105,225,0.05) 71px, rgba(65,105,225,0.05) 72px, transparent 73px),
radial-gradient(circle at 92% 78%, transparent 116px, rgba(65,105,225,0.04) 117px, rgba(65,105,225,0.04) 118px, transparent 119px);
}
.cta__bubbles { position: absolute; inset: 0; pointer-events: none; }
.cta__bubbles .bubble.b1 { width: 200px; height: 200px; left: -40px; top: 200px; }
.cta__bubbles .bubble.b2 { width: 110px; height: 110px; right: 10%; top: 80px; }
.cta__bubbles .bubble.b3 { width: 70px; height: 70px; right: 30%; bottom: 80px; opacity: .7; }
.cta__inner {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 64px 32px 0;
}
/* Header with people on both sides */
.cta__head {
position: relative;
text-align: center;
padding: 30px 220px 40px;
}
.cta__person {
position: absolute;
bottom: -40px;
z-index: 3;
}
.cta__person.left { left: -10px; }
.cta__person.right { right: -10px; }
.cta__person-img {
display: block;
width: auto;
filter: drop-shadow(0 18px 24px rgba(40,55,100,.2));
}
.cta__person.left .cta__person-img { height: 330px; }
.cta__person.right .cta__person-img { height: 330px; }
.cta__person-ph {
width: 100%; height: 100%;
background:
repeating-linear-gradient(135deg,
rgba(65,105,225,.15) 0 12px,
rgba(65,105,225,.05) 12px 24px);
border: 1.5px dashed rgba(65,105,225,.5);
border-radius: 16px 16px 100px 100px / 16px 16px 60px 60px;
display: grid;
place-items: center;
}
.cta__person-ph span {
background: rgba(255,255,255,.92);
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
color: var(--brand-deep);
text-align: center;
line-height: 1.5;
}
.cta__bubble {
display: inline-block;
background: #fff;
border: 2px solid var(--brand);
color: var(--brand-deep);
font-weight: 800;
font-size: 16px;
padding: 10px 22px;
border-radius: 999px;
letter-spacing: .04em;
box-shadow: 0 8px 18px -10px rgba(40,70,180,.4);
margin-bottom: 18px;
position: relative;
}
.cta__bubble::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px; height: 14px;
background: #fff;
border-right: 2px solid var(--brand);
border-bottom: 2px solid var(--brand);
}
.cta__h2 {
margin: 0;
font-size: 64px;
font-weight: 900;
line-height: 1.18;
letter-spacing: .02em;
color: var(--brand-deep);
text-shadow:
3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
0 8px 0 rgba(40,70,180,.18);
}
.cta__h2 .accent {
color: var(--warm-deep);
text-shadow:
3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
0 8px 0 rgba(232,90,28,.18);
}
.cta__eyebrow {
color: var(--brand);
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: .26em;
margin-top: 14px;
}
/* Phone CTA hero card */
.phone-cta {
position: relative;
margin-top: 40px;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
border-radius: 24px;
padding: 30px 38px;
color: #fff;
overflow: hidden;
box-shadow:
0 24px 50px -28px rgba(40,70,180,.6),
inset 0 0 0 3px rgba(255,255,255,.12);
display: block;
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
}
.phone-cta::before {
content: "";
position: absolute;
right: -100px; top: -120px;
width: 360px; height: 360px;
border-radius: 50%;
background:
radial-gradient(circle, transparent 130px, rgba(255,255,255,.10) 131px, rgba(255,255,255,.10) 132px, transparent 133px),
radial-gradient(circle, transparent 90px, rgba(255,255,255,.08) 91px, rgba(255,255,255,.08) 92px, transparent 93px),
radial-gradient(circle, transparent 50px, rgba(255,255,255,.06) 51px, rgba(255,255,255,.06) 52px, transparent 53px);
pointer-events: none;
}
.phone-cta__lbl {
display: inline-block;
background: rgba(255,255,255,.18);
color: #fff;
font-size: 14px;
font-weight: 800;
letter-spacing: .14em;
padding: 8px 16px;
border-radius: 8px;
margin-bottom: 12px;
backdrop-filter: blur(4px);
white-space: nowrap;
}
.phone-cta__title {
font-size: 25px;
font-weight: 900;
letter-spacing: .04em;
margin: 0 0 12px;
}
.phone-cta__sub {
font-size: 14px;
opacity: .85;
margin-bottom: 16px;
font-weight: 600;
}
.phone-cta__num {
display: inline-flex;
align-items: center;
gap: 18px;
background: #fff;
color: var(--brand-deep);
border-radius: 18px;
padding: 14px 28px 14px 22px;
box-shadow: 0 12px 24px -10px rgba(0,0,0,.3);
}
.phone-cta__icon {
width: 48px; height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
display: grid; place-items: center;
flex-shrink: 0;
}
.phone-cta__icon svg { width: 24px; height: 24px; color: #fff; }
.phone-cta__num-txt {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 38px;
letter-spacing: .02em;
line-height: 1;
color: var(--ink);
white-space: nowrap;
}
.phone-cta__hours {
margin-top: 12px;
font-size: 13px;
font-weight: 700;
opacity: .9;
letter-spacing: .04em;
}
.phone-cta__hours .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ffd9c2; margin: 0 8px; vertical-align: middle; }
.phone-cta__person {
position: relative;
height: 280px;
margin: -38px -44px -38px 0;
}
.phone-cta__person-ph {
position: absolute;
inset: 0 0 0 0;
background:
repeating-linear-gradient(135deg,
rgba(255,255,255,.18) 0 12px,
rgba(255,255,255,.06) 12px 24px);
border-left: 1.5px dashed rgba(255,255,255,.5);
display: grid;
place-items: center;
}
.phone-cta__person-ph span {
background: rgba(255,255,255,.92);
padding: 8px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
color: var(--brand-deep);
text-align: center;
line-height: 1.5;
}
/* Sub CTAs row */
.cta__row {
margin-top: 22px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.cta-card {
position: relative;
border-radius: 20px;
padding: 22px 26px;
color: #fff;
overflow: hidden;
display: block;
min-height: 0;
box-shadow: 0 20px 44px -28px rgba(0,0,0,.45);
text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease;
}
.cta-card:hover {
transform: translateY(-2px);
box-shadow: 0 30px 56px -28px rgba(0,0,0,.5);
}
.cta-card.line {
background: linear-gradient(135deg, #14d164 0%, #04a648 100%);
}
.cta-card.quote {
background: linear-gradient(135deg, #ff8a52 0%, #e85a1c 100%);
}
.cta-card::before {
content: "";
position: absolute;
right: -60px; top: -80px;
width: 240px; height: 240px;
border-radius: 50%;
background:
radial-gradient(circle, transparent 80px, rgba(255,255,255,.10) 81px, rgba(255,255,255,.10) 82px, transparent 83px),
radial-gradient(circle, transparent 50px, rgba(255,255,255,.08) 51px, rgba(255,255,255,.08) 52px, transparent 53px);
pointer-events: none;
}
.cta-card__head {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,.20);
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
margin-bottom: 8px;
white-space: nowrap;
}
.cta-card__head svg { width: 16px; height: 16px; }
.cta-card__title {
font-size: 23px;
font-weight: 900;
letter-spacing: .04em;
line-height: 1.3;
margin: 0 0 6px;
text-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.cta-card__sub {
font-size: 13px;
font-weight: 700;
opacity: .92;
letter-spacing: .04em;
}
.cta-card__person {
position: relative;
align-self: stretch;
margin: -26px -28px -26px 0;
}
.cta-card__person-ph {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg,
rgba(255,255,255,.20) 0 10px,
rgba(255,255,255,.06) 10px 20px);
border-left: 1.5px dashed rgba(255,255,255,.55);
display: grid;
place-items: center;
}
.cta-card__person-ph span {
background: rgba(255,255,255,.92);
padding: 6px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
color: var(--brand-deep);
text-align: center;
line-height: 1.4;
}
.cta-card__arrow {
position: absolute;
right: 16px; bottom: 14px;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.95);
color: var(--ink);
display: grid; place-items: center;
font-size: 22px;
font-weight: 800;
line-height: 1;
}
/* Trust badges */
.trust {
margin-top: 32px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.trust-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1.5px solid var(--rule);
border-radius: 999px;
padding: 10px 18px;
font-size: 13px;
font-weight: 800;
color: var(--ink);
letter-spacing: .04em;
box-shadow: 0 4px 10px -6px rgba(40,70,180,.2);
white-space: nowrap;
}
.trust-pill svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; }
.trust-pill em {
font-style: normal;
color: var(--warm-deep);
font-weight: 900;
}
/* ---- next block ---- */
/* Fixed bottom CTA bar (mobile only) */
.m-cta-bar { display: none; }
@media (max-width: 768px) {
html, body { overflow-x: hidden; }
body { padding-bottom: 76px; } /* 固定CTAバーの高さ分 */
/* ---- Header ---- */
.site-header { height: auto; }
.site-header__inner { padding: 10px 14px; gap: 10px; }
.logo { gap: 9px; }
.logo__mark { height: 30px; width: auto; }
.logo__name { font-size: 14px; }
.logo__sub { font-size: 9px; letter-spacing: .06em; }
.header-right { gap: 0; }
.nav { display: none; }
.header-tel { line-height: 1.15; }
.header-tel__hours, .header-tel__urgent { display: none; }
.header-tel__num { font-size: 19px; gap: 5px; }
.header-tel__num::before { width: 16px; height: 16px; }
/* ---- Hero layout: single column ---- */
.hero__inner {
display: flex;
flex-direction: column;
min-height: 0;
padding: 26px 20px 36px;
gap: 0;
}
.hero__copy { display: contents; }
.hero__subbadge { order: 1; align-self: center; font-size: 12px; padding: 8px 16px; margin-bottom: 4px; text-align: center; }
.hero__h1 { order: 2; margin-top: 16px; font-size: 33px; line-height: 1.26; text-align: center; }
.hero__h1 .small { font-size: 25px; }
.hero__h1 .warm::after { height: 7px; bottom: 0; }
.hero__lede { order: 3; margin-top: 16px; font-size: 13.5px; line-height: 1.8; text-align: center; max-width: none; }
.hero__lede br { display: none; }
.hero__visual { order: 4; position: relative; margin: 22px auto 0; width: 100%; max-width: 300px; height: 340px; grid-column: auto; grid-row: auto; }
.badges { order: 5; margin-top: 26px; justify-content: center; gap: 8px; }
.ctas { display: none; } /* 固定CTAバーへ移動 */
/* Craftsman image */
.speech { display: none; }
.craftsman { position: relative; right: auto; bottom: auto; left: auto; top: auto; width: 100%; height: 100%; }
.craftsman__halo { inset: 16px 16px 0 16px; }
.craftsman__shadow { left: 30px; right: 30px; bottom: 30px; height: 30px; }
.craftsman__placeholder { inset: 18px 24px 24px 24px; border-radius: 18px; }
.craftsman__placeholder span { font-size: 11px; padding: 8px 12px; }
/* Circle badges */
.badge {
--size: 104px;
padding: 8px;
border-width: 2.5px;
box-shadow:
0 10px 20px -12px rgba(40,70,180,.45),
inset 0 0 0 4px #fff,
inset 0 0 0 5px rgba(65,105,225,.18);
}
.badge:nth-child(2), .badge:nth-child(3) { transform: none; }
.badge__cap { top: -9px; font-size: 8px; padding: 3px 8px; letter-spacing: .08em; }
.badge__icon { width: 17px; height: 17px; margin-bottom: 2px; }
.badge__line1 { font-size: 8.5px; }
.badge__main { font-size: 11px; line-height: 1.3; margin-top: 2px; white-space: normal; }
.badge__big .n { font-size: 17px; }
.badge__big .unit { font-size: 8.5px; }
.badge__big .plus { font-size: 12px; }
/* ---- Stats strip: 2x2 (4セル均等) ---- */
.stats__inner { grid-template-columns: 1fr 1fr; padding: 0; }
.stat {
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
gap: 6px;
min-height: 104px;
padding: 18px 10px;
border-right: none;
border-bottom: 1px solid rgba(255,255,255,.14);
}
.stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.14); }
.stat:nth-last-child(-n+2) { border-bottom: none; }
.stat:first-child { padding-left: 10px; }
.stat__big { font-size: 24px; }
.stat__txt { font-size: 11px; text-align: center; }
.stat__txt strong { font-size: 12px; }
/* ---- Fixed bottom CTA bar ---- */
.m-cta-bar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 1000;
padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.97);
box-shadow: 0 -6px 22px rgba(20,30,60,.16);
border-top: 1px solid #e6ecfa;
}
/* ============ こんなお悩みありませんか (worries) ============ */
.worries { padding: 48px 0 56px; }
.worries__inner { padding: 0 20px; }
.worries__title { font-size: 32px; margin-bottom: 28px; line-height: 1.3; }
.worries__title .sp-br { display: inline; }
/* タイトル左に悩む男性 */
.worries__titlerow {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-bottom: 24px;
}
.worries__titlerow .worries__title { margin-bottom: 0; text-align: left; font-size: 28px; }
.worries__title-img {
display: block;
width: 96px;
height: auto;
flex-shrink: 0;
filter: drop-shadow(0 8px 12px rgba(40,55,100,.18));
}
/* カード: 職人画像を省略してリストのみ */
.worry-card { grid-template-columns: 1fr; border-radius: 20px; }
.worry-card__person { display: none; }
.worry-list { padding: 8px 22px; }
.worry-item { gap: 14px; padding: 16px 2px; }
.worry-check { width: 30px; height: 30px; border-radius: 7px; }
.worry-check svg { width: 22px; height: 22px; }
.worry-text { font-size: 17px; line-height: 1.45; }
/* 矢印 */
.worries__arrow svg { width: 64px; height: 40px; }
/* ご安心ください */
.reassure { margin-top: 14px; }
.reassure__big { font-size: 32px; margin-bottom: 12px; }
.reassure__lead { font-size: 17px; line-height: 1.7; }
/* ============ 選ばれる理由6選 (reasons) ============ */
.reasons { padding: 48px 0 60px; }
.reasons__inner { padding: 0 20px; }
/* タイトル部: 職人は非表示、お客様グループをタイトル上に表示 */
.reasons__head {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-height: 0;
margin-bottom: 26px;
}
.reasons__people {
display: block;
}
.reasons__people.worker { display: none; }
.reasons__people.customers {
position: static;
transform: none;
width: 92%;
max-width: 360px;
margin: 0 auto 8px;
}
.reasons__people-img {
width: 100%;
height: auto;
filter: none;
opacity: 1;
}
.reasons__title-wrap {
position: relative;
z-index: 3;
padding: 0 6px;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
/* 中央の白グローはスタック時不要 */
.reasons__title-wrap::before { display: none; }
.reasons__circle { top: 50%; transform: translate(-50%, -50%); width: 230px; height: 145px; opacity: .65; }
.reasons__ribbon { font-size: 13px; padding: 6px 20px; margin-bottom: 12px; margin-top: 0; }
.reasons__title { font-size: 34px; }
/* カード: 2列×3行 */
.reasons__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.reason-card { padding: 28px 12px 18px; border-radius: 16px; }
.reason-card__ribbon { font-size: 11px; padding: 5px 14px 7px; }
.reason-card__img { margin: 12px 0 12px; border-radius: 12px; }
.reason-card__img span { font-size: 10px; }
.reason-card__title { font-size: 16px; min-height: 0; margin-bottom: 10px; line-height: 1.4; white-space: nowrap; }
.reason-card__desc { font-size: 12px; line-height: 1.7; }
/* ============ 施工事例 (cases) ============ */
.cases { padding: 48px 0 56px; }
.cases__inner { padding: 0 20px; }
.cases__head { margin-bottom: 28px; }
.cases__title { font-size: 32px; margin-bottom: 14px; }
.cases__note { font-size: 12.5px; padding: 10px 18px; line-height: 1.6; border-radius: 14px; }
/* カード: 2列×4行 (SPはAfterのみ全幅表示) */
.cases__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.case-card { border-radius: 14px; }
.case-card__imgs { grid-template-columns: 1fr; }
.case-img.before { display: none; }
.case-img.after { border-left: none; }
.case-img { min-width: 0; }
.case-img__ph { font-size: 9px; }
.case-img__lbl { font-size: 10px; letter-spacing: .08em; padding: 4px 0; }
.case-card__body { padding: 12px 12px 13px; }
.case-card__date { font-size: 10.5px; margin-bottom: 6px; }
.case-card__name {
font-size: 12.5px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.case-card__area { margin-top: 10px; padding-top: 10px; font-size: 11px; gap: 5px; }
.case-card__area .lbl svg { width: 12px; height: 12px; }
.cases__more { margin-top: 28px; }
.cases__more a { font-size: 15px; padding: 14px 36px; }
/* ============ 工事完了までの4ステップ (steps) ============ */
.steps { padding: 48px 0 56px; }
.steps__inner { padding: 0 20px; display: flex; flex-direction: column; }
.steps__title { font-size: 32px; margin-bottom: 36px; order: 0; }
/* 縦1列・並び替え: STEP2の直後に無料ライン */
.steps__row { display: contents; }
.steps__row > .step-card:nth-child(1) { order: 1; }
.steps__row > .step-arrow:nth-child(2) { order: 2; }
.steps__row > .step-card:nth-child(3) { order: 3; }
.steps__free { order: 4; }
.steps__row > .step-arrow:nth-child(4) { order: 5; }
.steps__row > .step-card:nth-child(5) { order: 6; }
.steps__row > .step-arrow:nth-child(6) { order: 7; }
.steps__row > .step-card:nth-child(7) { order: 8; }
.aftercare { order: 9; }
/* カード: 横型 (左=番号+アイコン / 右=タイトル+説明) */
.step-card {
display: grid;
grid-template-columns: 64px 1fr;
grid-template-areas: "badge title" "icon desc";
column-gap: 14px;
row-gap: 4px;
align-items: center;
text-align: left;
padding: 18px 18px 18px;
margin-top: 18px;
border-radius: 16px;
}
.step-card__badge {
grid-area: badge;
position: static;
transform: none;
left: auto; top: auto;
flex-direction: row;
align-items: center;
gap: 6px;
justify-self: start;
}
.step-card__steplbl { margin-bottom: 0; background: none; padding: 0; font-size: 10px; }
.step-card__no { width: 40px; height: 40px; font-size: 20px; border-width: 2px; }
.step-card__icon {
grid-area: icon;
width: 48px; height: 48px;
margin: 4px 0 0;
justify-self: start;
border-radius: 13px;
}
.step-card__icon svg { width: 26px; height: 26px; }
.step-card__title { grid-area: title; font-size: 19px; margin-bottom: 0; align-self: end; }
.step-card__desc { grid-area: desc; font-size: 12.5px; line-height: 1.7; align-self: start; }
/* 矢印: 縦向き(下) */
.step-arrow { margin: 2px 0; }
.step-arrow svg { transform: rotate(90deg); width: 26px; height: 26px; }
.step-arrow.divider { flex-direction: row; }
.step-arrow.divider .bar { display: none; }
/* 無料ライン */
.steps__free { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.steps__free-bracket { padding: 18px 20px; gap: 14px; border-radius: 16px; }
.steps__free-bracket::before { left: 50%; }
.steps__free-bracket::after { left: 50%; display: none; }
.steps__free-icon { width: 46px; height: 46px; border-radius: 12px; }
.steps__free-icon svg { width: 26px; height: 26px; }
.steps__free-txt .big { font-size: 21px; }
.steps__free-txt .sub { font-size: 12px; line-height: 1.6; }
.steps__free-paid { padding: 14px; font-size: 14px; border-radius: 14px; }
/* アフターサービスバナー */
.aftercare { margin-top: 22px; padding: 22px 22px; border-radius: 16px; }
.aftercare__title { font-size: 18px; line-height: 1.5; margin-bottom: 8px; }
.aftercare__desc { font-size: 13px; line-height: 1.8; }
/* ============ 安心安全のアフターサービス (after) ============ */
.after { padding: 48px 0 56px; }
.after__inner { padding: 0 20px; }
.after__title { font-size: clamp(20px, 6.1vw, 32px); margin-bottom: 12px; white-space: nowrap; }
.after__eyebrow { font-size: 11px; letter-spacing: .12em; margin-bottom: 34px; line-height: 1.7; }
.after__eyebrow .ae-sep { display: none; }
.after__eyebrow .ae-en { display: block; }
.after__eyebrow .ae-jp { display: block; }
/* キーメッセージ */
.after__keymsg { margin-bottom: 34px; }
.after__keymsg .line1 { font-size: 18px; line-height: 1.6; }
.after__keymsg .strike { white-space: normal; }
.after__keymsg .line2 { font-size: clamp(18px, 5.7vw, 26px); margin-top: 10px; line-height: 1.4; white-space: nowrap; }
/* 姿勢の説明文 */
.stance { margin-bottom: 40px; }
.stance__txt p { font-size: 14.5px; line-height: 1.9; }
/* W保証ブロック */
.warranty { padding: 30px 22px 32px; border-radius: 20px; }
.warranty__head { margin-bottom: 26px; }
.warranty__emblem { flex-direction: column; gap: 10px; padding: 18px 22px; border-radius: 18px; text-align: center; }
.warranty__emblem-txt { text-align: center; }
.warranty__emblem-txt .main { font-size: 18px; line-height: 1.4; }
.warranty__sub { font-size: 18px; margin-top: 14px; }
/* カード: 縦積み */
.warranty__cards { grid-template-columns: 1fr; gap: 0; }
.wcard { padding: 24px 22px; }
.wcard__title { font-size: 20px; }
.wcard__desc { font-size: 13.5px; line-height: 1.8; }
.wplus { font-size: 32px; padding: 10px 0; }
/* ============ よくある質問 (faq) ============ */
.faq { padding: 48px 0 56px; }
.faq__inner { padding: 0 20px; }
.faq__title { font-size: 32px; margin-bottom: 28px; }
.faq__list { gap: 12px; }
.faq-item { border-radius: 14px; }
.faq-q { padding: 16px 16px; gap: 13px; }
.faq-q__badge { width: 32px; height: 32px; font-size: 16px; }
.faq-q__text { font-size: 15px; line-height: 1.45; }
.faq-q__toggle { width: 22px; height: 22px; }
.faq-q__toggle::before { top: 3px; height: 16px; }
.faq-q__toggle::after { left: 3px; width: 16px; }
.faq-a__inner { margin: 0 16px 18px; padding: 16px 16px; gap: 13px; }
.faq-a__badge { width: 32px; height: 32px; font-size: 16px; }
.faq-a__text { font-size: 13.5px; line-height: 1.85; padding-top: 4px; }
/* ============ CTA ============ */
.cta { padding: 0 0 64px; }
.cta__inner { padding: 48px 20px 0; }
/* 見出し部: 左右の人物画像を省略 */
.cta__head { padding: 0 0 24px; }
.cta__person { display: none; }
.cta__bubble { font-size: 13px; padding: 8px 18px; margin-bottom: 14px; }
.cta__bubble::after { bottom: -9px; width: 12px; height: 12px; }
.cta__h2 { font-size: 34px; line-height: 1.25; }
.cta__eyebrow { font-size: 11px; letter-spacing: .18em; margin-top: 12px; }
/* 電話CTA: 縦積み中央寄せ */
.phone-cta { padding: 26px 20px; border-radius: 20px; margin-top: 28px; text-align: center; }
.phone-cta__title { font-size: 16px; font-weight: 900; line-height: 1.3; margin-bottom: 5px; }
.phone-cta__sub { font-size: 10.5px; line-height: 1.5; margin-bottom: 14px; }
.phone-cta__num { display: inline-flex; padding: 12px 18px 12px 14px; gap: 12px; border-radius: 14px; }
.phone-cta__icon { width: 42px; height: 42px; border-radius: 11px; }
.phone-cta__icon svg { width: 22px; height: 22px; }
.phone-cta__num-txt { font-family: "Noto Sans JP", sans-serif; font-weight: 900; font-size: 16px; line-height: 1.3; letter-spacing: .04em; }
.phone-cta__hours { font-size: 11.5px; margin-top: 12px; }
.phone-cta__hours .dot { margin: 0 6px; }
/* サブCTA: 横2列のまま小さく */
.cta__row { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.cta-card { padding: 18px 14px; border-radius: 16px; }
.cta-card__head { font-size: 9.5px; letter-spacing: .06em; gap: 6px; padding: 5px 10px; margin-bottom: 8px; }
.cta-card__head svg { width: 13px; height: 13px; }
.cta-card__title { font-size: 16px; line-height: 1.3; margin-bottom: 5px; }
.cta-card__sub { font-size: 10.5px; line-height: 1.5; }
.cta-card__arrow { width: 28px; height: 28px; font-size: 17px; right: 12px; bottom: 12px; }
/* 信頼バッジ */
.trust { gap: 8px; margin-top: 26px; }
.trust-pill { font-size: 12px; padding: 8px 14px; }
/* ============ 実績と対応エリア (achv) ============ */
.achv { padding-bottom: 64px; }
.achv__inner { padding: 40px 20px 0; }
.achv__head { margin-bottom: 32px; text-align: center; }
.achv__h2 { font-size: 32px; margin: 10px 0 12px; }
.achv__lede { font-size: 13.5px; line-height: 1.8; }
/* 縦積み & 並び替え: 実績→写真→対応エリア→地域バナー */
.achv__grid { display: flex; flex-direction: column; gap: 18px; }
.achv-left { display: contents; }
.result-card { order: 1; }
.photos-block { order: 2; }
.area { order: 3; }
.region-banner{ order: 4; }
/* 実績カード */
.result-card { padding: 30px 24px 28px; border-radius: 20px; }
.result-card__badge { width: 48px; height: 48px; top: 18px; right: 18px; }
.result-card__badge svg { width: 24px; height: 24px; }
.result-card__label { font-size: 11px; letter-spacing: .1em; }
.result-card__cap { font-size: 14px; margin-top: 6px; }
.result-card__num { margin-top: 10px; gap: 5px; }
.result-card__num .n { font-size: 84px; letter-spacing: -.03em; }
.result-card__num .plus { font-size: 44px; }
.result-card__num .unit { font-size: 24px; }
.result-card__bar { margin-top: 26px; }
.result-card__foot {
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
font-size: 12px;
margin-top: 18px;
padding-top: 14px;
}
.result-card__foot span:last-child { display: none; } /* 前年比+18%は省略 */
/* 施工写真 SPは4枚 1行・全幅(フルブリード) */
.photos-block { margin-left: -20px; margin-right: -20px; }
.photos { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 10px; }
.photo--sp { display: block; }
.photo { aspect-ratio: 3 / 4.2; border-radius: 12px; }
.photo span { font-size: 10px; padding: 4px 7px; }
.photos-more { margin-right: 20px; }
.photos-more { margin-top: 10px; }
.photos-more a { font-size: 13px; }
/* 地域バナー */
.region-banner { padding: 22px 22px; gap: 16px; border-radius: 18px; }
.region-banner__icon { width: 52px; height: 52px; border-radius: 13px; }
.region-banner__icon svg { width: 26px; height: 26px; }
.region-banner__main { font-size: 18px; line-height: 1.45; }
.region-banner__sub { font-size: 12px; }
/* 対応エリア */
.area { padding: 26px 22px 30px; border-radius: 20px; }
.area__title { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 18px; }
.area__title h3 { font-size: 22px; }
.area__title small { font-size: 11px; }
/* タブ: 3列×2行 */
.area__tabs { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.tab-btn { padding: 13px 4px; font-size: 14px; }
.tab-btn.is-active::after { display: none; }
.area__panel-head { padding: 12px 14px; margin-bottom: 14px; }
.area__panel-head .pref { font-size: 14px; }
.area__panel-head .count { font-size: 12px; }
.area__panel-head .count strong { font-size: 16px; }
.chips { gap: 7px; min-height: 0; }
.chip { font-size: 12px; padding: 8px 12px; }
.area__note { font-size: 12px; padding: 12px 14px; }
}
.m-cta-bar__btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 9px 4px;
border-radius: 12px;
text-decoration: none;
color: #fff;
box-shadow: 0 6px 14px -8px rgba(0,0,0,.4);
}
.m-cta-bar__btn svg { width: 22px; height: 22px; }
.m-cta-bar__btn .lbl { font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.m-cta-bar__btn.tel { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.m-cta-bar__btn.line { background: linear-gradient(135deg, #14d164, #04a648); }
.m-cta-bar__btn.quote { background: linear-gradient(135deg, #ff8a52, var(--warm-deep)); }