/* STEP03–05 共通の下層ページデザイン */
.step-page{--step-accent:#129eea;--step-tint:#effaff}
.step-page .breadcrumb ol{flex-wrap:wrap;gap:4px 8px}
.step-page .breadcrumb li{flex:none}
.step-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.step-hero{position:relative;display:flex;align-items:center;min-height:clamp(350px,34vw,455px);overflow:hidden;background:#e9f7ff}
.step-hero__image,.step-hero__shade{position:absolute;inset:0;width:100%;height:100%}
.step-hero__image{object-fit:cover;object-position:center 52%}
.step-hero__shade{background:linear-gradient(90deg,#fffffff2 0%,#ffffffd6 30%,#ffffff13 67%)}
.step-hero__content{position:relative;z-index:2;padding-block:40px}
.step-hero__number{display:inline-block;margin:0 0 12px;padding:4px 12px;border-radius:5px;color:#fff;background:#07519a;font-size:.98rem;font-weight:900;letter-spacing:.05em;line-height:1.3}
.step-hero h1{max-width:20em;margin:0 0 12px;color:#093967;font-size:clamp(2.15rem,4vw,3.9rem);font-weight:900;letter-spacing:.025em;line-height:1.18}
.step-hero__lead{margin:0 0 12px;color:#0b3766;font-size:clamp(1.1rem,1.7vw,1.45rem);font-weight:850;line-height:1.55}
.step-hero__note{max-width:39em;margin:0;color:#173f60;font-size:.9rem;font-weight:700;line-height:1.7}
.step-hero__dogs{position:absolute;z-index:1;right:max(3vw,18px);bottom:-9px;width:clamp(190px,26vw,370px);height:auto;filter:drop-shadow(0 9px 12px #17466847)}
.step-page--electrical .step-hero__image{object-position:center 20%;transform:scaleX(-1)}
.step-page--electrical .step-hero__shade{background:linear-gradient(90deg,#fffffff7 0%,#ffffffe4 32%,#ffffff10 64%)}
.step-page--handover .step-hero__image{object-position:center 57%}
.step-page--handover .step-hero__shade{background:linear-gradient(90deg,#fffffff2 0%,#ffffffc8 32%,transparent 66%)}
.step-body{padding-bottom:34px}
.step-intro{margin-block:20px 25px;padding:24px clamp(20px,3vw,38px);border-left:5px solid var(--step-accent);border-radius:0 15px 15px 0;background:linear-gradient(110deg,var(--step-tint),#fff);box-shadow:0 4px 17px #0e3a630a}
.step-intro p{max-width:84em;margin:0 0 11px;font-size:.96rem;line-height:1.85}
.step-intro p:last-child{margin-bottom:0}
.step-intro strong{color:var(--color-primary)}
.step-section{margin-block:24px 38px}
.step-section--tint{padding:26px clamp(16px,3vw,36px);border-radius:16px;background:linear-gradient(120deg,var(--step-tint),#f9fdff)}
.step-section__heading{margin:0 0 15px;color:var(--color-primary);font-size:clamp(1.4rem,2.3vw,2.05rem);font-weight:900;line-height:1.35;text-align:center}
.step-section__heading--left{text-align:left}
.step-section__lead{max-width:65em;margin:0 auto 20px;text-align:center;font-size:.94rem;line-height:1.8}
.step-concerns{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:20px;align-items:stretch}
.step-concerns__image{width:100%;height:100%;max-height:300px;object-fit:cover;border-radius:10px}
.step-checklist{display:grid;align-content:center;gap:9px;margin:0;padding:0;list-style:none}
.step-checklist li{position:relative;padding-left:29px;color:#123b65;font-size:.94rem;font-weight:800;line-height:1.55}
.step-checklist li::before{position:absolute;top:.24em;left:0;display:grid;place-items:center;width:19px;height:19px;border-radius:5px;color:#fff;background:var(--step-accent);content:'✓';font-size:.82rem;line-height:1}
.step-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.step-card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.step-card{min-width:0;padding:18px 14px;border:1px solid #e4edf4;border-radius:11px;background:#fff;box-shadow:0 3px 12px #0e3a630d;text-align:center}
.step-card__icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 10px;border-radius:50%;color:#fff;background:var(--step-accent);font-size:1.55rem;font-weight:800;line-height:1}
.step-card:nth-child(4n+2) .step-card__icon{background:#f58b10}
.step-card:nth-child(4n+3) .step-card__icon{background:#0bad63}
.step-card:nth-child(4n+4) .step-card__icon{background:#8653d7}
.step-card h3{margin:0 0 8px;color:var(--color-primary);font-size:1.06rem;line-height:1.4}
.step-card p{margin:0;font-size:.84rem;line-height:1.75}
.step-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.step-photo-card{min-width:0;overflow:hidden;border:1px solid #e0eaf1;border-radius:10px;background:#fff;box-shadow:0 3px 11px #0e3a630d}
.step-photo-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.step-photo-card h3{margin:0;padding:9px;color:var(--color-primary);font-size:.9rem;text-align:center}
.step-work-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.step-work-list li{padding:12px 10px;border:1px solid #dce8f1;border-radius:8px;background:#fff;color:var(--color-primary);font-size:.9rem;font-weight:800;text-align:center}
.step-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.step-comparison__panel{min-width:0;padding:18px;border:1px solid #e6edf2;border-radius:12px;background:#f8fafb}
.step-comparison__panel--brand{border-color:#a8d7f1;background:#f0faff}
.step-comparison__panel h3{margin:0 0 12px;padding:8px;border-radius:6px;color:var(--color-primary);background:#e7e8eb;font-size:1.05rem;text-align:center}
.step-comparison__panel--brand h3{color:#fff;background:#078ce1}
.step-comparison__panel .step-checklist li{font-size:.86rem;font-weight:700}
.step-comparison__panel--ordinary .step-checklist li::before{background:#8395a4}
.step-before-after{display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:14px;align-items:center}
.step-before-after__card{overflow:hidden;border:1px solid #dce8f0;border-radius:10px;background:#fff;box-shadow:0 3px 13px #0e3a630d}
.step-before-after__card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.step-before-after__card h3{margin:0;padding:10px;color:#fff;background:#7c8790;font-size:1rem;text-align:center}
.step-before-after__card--after h3{background:#0879ca}
.step-before-after__card p{margin:0;padding:12px 15px;font-size:.87rem;line-height:1.75}
.step-before-after__arrow{color:#0879ca;font-size:2.2rem;font-weight:900;text-align:center}
.step-illustration-note{margin:9px 0 0;color:#587286;font-size:.78rem;line-height:1.6}
.step-navigation{margin-block:22px 0;padding:19px;border-radius:12px;background:#eef8fd}
.step-navigation h2{margin:0 0 11px;color:var(--color-primary);font-size:1.22rem;text-align:center}
.step-navigation ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0;padding:0;list-style:none}
.step-navigation a{display:grid;place-items:center;min-height:66px;padding:8px 5px;border:1px solid #cce1ee;border-radius:7px;background:#fff;color:var(--color-primary);font-size:.77rem;font-weight:800;text-align:center;line-height:1.4}
.step-navigation a[aria-current="page"]{border-color:var(--step-accent);color:#fff;background:var(--step-accent)}
.step-navigation a span{display:block;font-size:.69rem}
.step-navigation a:hover:not([aria-current="page"]){border-color:var(--step-accent);background:#f6fcff}
.step-final{padding-block:22px;background:linear-gradient(110deg,#fff9ea,#fff 60%,#fff7ec)}
.step-final__inner{display:grid;grid-template-columns:75px minmax(0,1fr) auto 150px;align-items:center;gap:14px}
.step-final__house{color:var(--color-primary);font-size:5rem;line-height:1;text-align:center}
.step-final h2{margin:0 0 6px;color:var(--color-primary);font-size:clamp(1.2rem,1.8vw,1.65rem)}
.step-final p{margin:0;font-size:.81rem;line-height:1.65}
.step-final__actions{display:flex;gap:8px}
.step-final__actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:8px 13px;border-radius:7px;color:#fff;font-size:.83rem;font-weight:800;white-space:nowrap}
.step-final__line{background:#08b45e}
.step-final__contact{background:#f44b7a}
.step-final__dogs{width:150px;height:auto;align-self:end}
@media(max-width:1050px){
.step-final__inner{grid-template-columns:60px minmax(0,1fr) auto}
.step-final__dogs{display:none}
.step-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.step-card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:767px){
.step-hero{min-height:410px;align-items:flex-start}
.step-hero__image{object-position:65% center}
.step-page--electrical .step-hero__image{object-position:28% 20%}
.step-page--handover .step-hero__image{object-position:77% center}
.step-hero__shade,.step-page--electrical .step-hero__shade,.step-page--handover .step-hero__shade{background:linear-gradient(180deg,#fffffff2 0%,#ffffffde 38%,#ffffff25 78%)}
.step-hero__content{padding-top:24px}
.step-hero__number{margin-bottom:7px;font-size:.82rem}
.step-hero h1{margin-bottom:8px;font-size:clamp(1.8rem,7.5vw,2.35rem)}
.step-hero__lead{max-width:22em;margin-bottom:8px;font-size:.93rem}
.step-hero__note{max-width:28em;font-size:.75rem;line-height:1.5}
.step-hero__dogs{right:1px;bottom:-6px;width:clamp(135px,44vw,190px)}
.step-body{padding-bottom:18px}
.step-intro{margin-block:13px 20px;padding:17px 16px}
.step-intro p{font-size:.86rem;line-height:1.75}
.step-section{margin-block:21px 27px}
.step-section--tint{padding:19px 13px}
.step-section__heading{font-size:1.3rem}
.step-section__lead{font-size:.83rem}
.step-concerns,.step-comparison,.step-before-after{grid-template-columns:1fr;gap:10px}
.step-concerns__image{max-height:225px}
.step-checklist li{font-size:.84rem}
.step-card-grid,.step-card-grid--3,.step-photo-grid{grid-template-columns:1fr}
.step-card{display:grid;grid-template-columns:45px minmax(0,1fr);gap:2px 10px;padding:13px;text-align:left}
.step-card__icon{grid-column:1;grid-row:1/3;width:38px;height:38px;margin:0;font-size:1.3rem}
.step-card h3{grid-column:2;margin:0;font-size:.98rem}
.step-card p{grid-column:2;font-size:.82rem}
.step-photo-card{display:grid;grid-template-columns:37% minmax(0,1fr);align-items:center}
.step-photo-card img{height:100%;aspect-ratio:auto}
.step-photo-card h3{font-size:.88rem;text-align:left}
.step-work-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.step-work-list li{font-size:.8rem}
.step-before-after__arrow{transform:rotate(90deg);line-height:1}
.step-before-after__card img{max-height:230px}
.step-navigation{padding:12px}
.step-navigation ol{grid-template-columns:1fr}
.step-navigation a{display:flex;justify-content:flex-start;gap:9px;min-height:44px;text-align:left;font-size:.86rem}
.step-navigation a span{font-size:.75rem}
.step-final__inner{grid-template-columns:42px minmax(0,1fr);gap:7px}
.step-final__house{font-size:3.1rem}
.step-final h2{font-size:1.05rem}
.step-final p{font-size:.74rem}
.step-final__actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:6px}
.step-final__actions a{min-height:48px;padding:8px 5px;font-size:.78rem}
}