:root{
  --red:#e6362e;
  --red-dark:#bd241e;
  --ink:#17181a;
  --muted:#62656a;
  --line:#dedfe2;
  --base:#f6f6f7;
  --white:#fff;
  --green:#06c755;
  --gold:#caa04a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP",sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}
.util{background:var(--ink);color:#fff;font-size:13px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:8px}
.util strong{color:#ffd88a}
.util a{font-weight:900}
header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:13px}
.logo{display:flex;align-items:center;gap:12px;line-height:1.3}
.logo-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:9px;background:var(--ink);color:#fff;font-weight:900}
.logo b{display:block;font-size:18px}
.logo small{display:block;color:var(--muted);font-size:11px}
.head-actions{display:flex;align-items:center;gap:10px}
.back{font-size:14px;font-weight:800;padding:10px 12px;border-radius:8px}
.back:hover{background:var(--base)}
.line-btn{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
  border-radius:10px;
  background:var(--green);
  color:#fff;
  font-weight:900;
  box-shadow:0 7px 18px rgba(6,199,85,.24);
}
.line-btn:hover{transform:translateY(-2px)}
.breadcrumb{padding-block:17px;color:var(--muted);font-size:13px}
.breadcrumb a{text-decoration:underline;text-underline-offset:3px}
.detail-hero{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:#fff;
}
.detail-hero::before,
.detail-hero::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(2px);
  opacity:.18;
  animation:drift 11s ease-in-out infinite alternate;
}
.detail-hero::before{left:-160px;top:-220px;background:var(--red)}
.detail-hero::after{right:-170px;bottom:-260px;background:var(--gold);animation-delay:-4s}
@keyframes drift{
  from{transform:translate3d(-12px,-8px,0) scale(.96)}
  to{transform:translate3d(22px,18px,0) scale(1.08)}
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.08fr;gap:54px;align-items:center;padding-block:56px}
.eyebrow{color:#ff817b;font-size:13px;font-weight:900;letter-spacing:.18em}
.hero-copy h1{font-size:clamp(34px,6vw,60px);line-height:1.22;margin:8px 0 18px;letter-spacing:.02em}
.hero-copy p{color:#e4e5e7;font-size:clamp(16px,2vw,19px)}
.hero-note{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero-note span{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}
.hero-image{overflow:hidden;border-radius:20px;aspect-ratio:3/2;background:#2b2d31;box-shadow:0 20px 45px rgba(0,0,0,.28)}
.hero-image img{width:100%;height:100%;object-fit:cover}
main section{padding-block:76px}
.alt{background:var(--base)}
.section-label{text-align:center;color:var(--red);font-size:13px;font-weight:900;letter-spacing:.2em}
h2{font-size:clamp(26px,4vw,40px);line-height:1.4;text-align:center;margin:6px 0 10px}
.lead{text-align:center;color:var(--muted);max-width:740px;margin:0 auto 38px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.card .num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;font-size:13px;font-weight:900;margin-bottom:14px}
.card h3{font-size:19px;line-height:1.55;margin-bottom:8px}
.card p{font-size:15px;color:#45484d}
.steps{display:grid;gap:18px;margin-inline:auto}
.steps-4{grid-template-columns:repeat(4,1fr);max-width:1120px}
.steps-6{grid-template-columns:repeat(3,1fr);max-width:1000px}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:visible;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.step:not(:last-child)::after{content:"→";position:absolute;z-index:3;right:-18px;top:76px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;font-size:20px;font-weight:900;box-shadow:0 4px 12px rgba(230,54,46,.22)}
.steps-6 .step:nth-child(3)::after{display:none}
.step-visual{display:grid;place-items:center;height:150px;border-radius:15px 15px 0 0;background:linear-gradient(145deg,#fff5f4,#edf0f3);overflow:hidden}
.step-visual svg{width:100%;height:100%;display:block}
.step-copy{padding:25px 20px 24px}
.step-no{position:absolute;z-index:2;left:16px;top:132px;display:grid;place-items:center;min-width:52px;height:32px;padding-inline:10px;border-radius:999px;background:var(--ink);color:#fff;font-weight:900;font-size:12px;border:3px solid #fff}
.step h3{font-size:18px;line-height:1.45;margin:3px 0 8px}
.step p{color:#4b4e53;font-size:14px;line-height:1.75}
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:850px;margin-inline:auto}
.check{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 18px 18px 48px;font-weight:700}
.check::before{content:"✓";position:absolute;left:18px;color:var(--red);font-weight:900}
.notice{max-width:850px;margin:30px auto 0;padding:18px 20px;border-left:5px solid var(--red);border-radius:9px;background:#fff7f6;font-size:14px}
.profile{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start}
.profile-photo{position:sticky;top:100px;overflow:hidden;border-radius:20px;aspect-ratio:4/5;background:#e8e9eb}
.profile-photo img{width:100%;height:100%;object-fit:cover}
.profile-copy h1{font-size:clamp(32px,5vw,52px);line-height:1.3;margin:4px 0 6px}
.profile-copy .sub{color:var(--muted);font-weight:700;margin-bottom:28px}
.profile-copy h2{text-align:left;font-size:clamp(22px,3vw,30px);margin:34px 0 10px}
.profile-copy p{margin-top:14px}
.profile-copy .principle{margin-top:28px;padding:24px;border-left:5px solid var(--red);background:#fff6f5;border-radius:10px;font-size:18px;font-weight:700}
.cta{background:var(--ink);color:#fff;text-align:center}
.cta h2{font-size:clamp(27px,4vw,42px)}
.cta p{color:#d3d4d6;margin:8px auto 24px;max-width:680px}
.cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.phone-btn{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:10px 20px;border:2px solid rgba(255,255,255,.55);border-radius:10px;font-weight:900}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related a{display:flex;justify-content:space-between;align-items:center;min-height:64px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:900}
.related a:hover{border-color:var(--red);color:var(--red)}
footer{background:#0e0f10;color:#d4d5d7;padding:38px 0 86px}
.foot{display:flex;justify-content:space-between;gap:28px;align-items:flex-start}
.foot b{display:block;color:#fff;font-size:18px}
.foot p{font-size:13px;margin-top:6px}
.cooling{max-width:820px;color:#aeb0b4;font-size:11px;line-height:1.8}
.mobile-cta{display:none}
:focus-visible{outline:3px solid #ff9c97;outline-offset:3px}
@media(min-width:821px){
  .util{position:sticky;top:0;z-index:40;box-shadow:0 2px 10px rgba(0,0,0,.08)}
  .util .wrap{min-height:42px}
  header{top:42px;z-index:39}
}
@media(max-width:820px){
  body{padding-bottom:62px}
  .util .wrap{justify-content:center}
  .util span:last-child{display:none}
  .back{display:none}
  .head-actions .line-btn{display:none}
  .hero-grid{grid-template-columns:1fr;gap:28px;padding-block:42px}
  .hero-image{order:-1}
  .cards,.related{grid-template-columns:1fr}
  .steps-4,.steps-6{grid-template-columns:repeat(2,1fr)}
  .step:not(:last-child)::after,.steps-6 .step:nth-child(3)::after{display:none}
  .profile{grid-template-columns:1fr;gap:28px}
  .profile-photo{position:static;max-width:420px;width:100%;margin-inline:auto}
  .checklist{grid-template-columns:1fr}
  .foot{display:block}
  .cooling{margin-top:18px}
  .mobile-cta{position:fixed;z-index:30;display:grid;grid-template-columns:1fr 1fr;left:0;right:0;bottom:0;box-shadow:0 -4px 18px rgba(0,0,0,.18)}
  .mobile-cta a{display:grid;place-items:center;min-height:62px;color:#fff;font-weight:900}
  .mobile-cta .mobile-line{background:var(--green)}
  .mobile-cta .mobile-phone{background:var(--red)}
}
@media(max-width:520px){
  .wrap{width:min(100% - 28px,1120px)}
  .logo b{font-size:16px}
  .logo small{font-size:10px}
  main section{padding-block:58px}
  .detail-hero::before,.detail-hero::after{width:300px;height:300px}
  .hero-copy h1{font-size:34px}
  .card{padding:23px 20px}
  .steps-4,.steps-6{grid-template-columns:1fr;gap:34px}
  .step:not(:last-child)::after,.steps-6 .step:nth-child(3)::after{display:grid;content:"↓";right:auto;left:50%;top:auto;bottom:-35px;transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}