:root{
  --color-primary:#4591c5;
  --color-primary-dark:#2f6f9f;
  --color-primary-light:#eef7fc;
  --color-primary-soft:#f6fbfe;
  --color-accent:#ffa500;
  --color-accent-light:#fff5e4;
  --color-line:#1fc55c;
  --color-text:#26343d;
  --color-text-muted:#6c7b84;
  --color-border:#d9e4ea;
  --color-white:#ffffff;
  --color-footer:#25343d;
  --shadow-card:0 14px 36px rgba(46,75,92,.07);
  --radius-card:24px;
  --container-max:1180px;
  /* Vertical rhythm: values are PER-SIDE; adjacent sections' padding sums to the
     visual gap. compact(tight)+compact=32-40px sum, default+default=64px sum,
     large+large=80px sum at SP. Redefined per breakpoint below. */
  --space-section-compact:20px;
  --space-section-default:32px;
  --space-section-large:40px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--color-text);
  background:var(--color-white);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.8;
  letter-spacing:.02em;
}
body.is-menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%;height:auto}
button,a{outline-offset:4px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(69,145,197,.45)}

.container{width:min(var(--container-max),calc(100% - 28px));margin-inline:auto}
.section{padding:var(--space-section-default) 0}
.section-sm{padding:var(--space-section-compact) 0}
.center{text-align:center}
.muted{color:var(--color-text-muted)}
.blue{color:var(--color-primary-dark)}
.orange{color:#dd8700}
.pill{border-radius:999px}

.section-title{
  margin:0 0 20px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(30px,8vw,42px);
  line-height:1.35;font-weight:500;letter-spacing:.02em;
}
.section-lead{max-width:760px;margin:0 auto;color:var(--color-text-muted);font-size:15px}
.icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;background:var(--color-primary-light);color:var(--color-primary-dark);
  font-size:20px;font-weight:700;
}

/* Header */
.header{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(217,228,234,.85);
}
.header-inner{
  min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.logo{display:flex;align-items:center}
.logo-img{height:34px;width:auto;display:block}
.header-cta{display:none}
.hamburger{
  width:44px;height:44px;display:grid;place-content:center;gap:4px;
  border:1px solid var(--color-border);border-radius:12px;background:#fff;cursor:pointer
}
.hamburger span{display:block;width:20px;height:2px;background:var(--color-text);transition:.2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav{
  position:fixed;inset:64px 0 auto 0;z-index:29;
  display:none;flex-direction:column;align-items:stretch;gap:0;
  padding:12px 16px 20px;background:#fff;border-bottom:1px solid var(--color-border);
  box-shadow:0 14px 30px rgba(38,52,61,.08)
}
.nav.is-open{display:flex}
.nav a{padding:16px 8px;border-bottom:1px solid #eef2f4;color:#40515c;font-size:14px}

/* Hero - SP: stacked layout (full-bleed photo band, then copy).
   No masks here: faces must stay clear. The layered PC composition
   (absolute photo panels behind centred copy) returns from 48rem up. */
.hero{
  position:relative;overflow:hidden;
  display:block;
  background:#fff;
}
.hero-media{position:relative;display:block}
.hero-inner{
  position:relative;z-index:2;text-align:center;
  padding:90px 20px 56px; /* leaves room for the overlapping father-son card */
}
.hero-plant{display:none}
.hero-title{
  margin:0 0 20px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight:500;line-height:1.32;
  font-size:clamp(34px,9vw,42px);letter-spacing:.01em;
}
.hero-title .first,.hero-title .second{display:block;white-space:nowrap}
.hero-title .first{color:var(--color-primary-dark)}
.hero-title .second{color:#283942;font-size:.88em}
.hero-swoosh{
  width:min(240px,62vw);height:18px;border-top:2px solid var(--color-primary);
  border-radius:50%;margin:-4px auto 24px;position:relative
}
.hero-swoosh::before{
  content:"";position:absolute;left:-3px;top:-6px;width:9px;height:9px;border-radius:50%;
  background:var(--color-accent)
}
.hero-text{margin:0 auto 24px;max-width:34rem;color:#4f606a;font-size:15px;line-height:1.9}
.hero-points{display:grid;grid-template-columns:1fr;gap:0;margin:24px 0 28px}
.hero-point{
  position:relative;text-align:left;
  padding:16px 4px 16px 60px;font-size:14px;line-height:1.7;color:#40515c;
}
.hero-point+.hero-point{border-top:1px solid var(--color-border)}
.hero-point .icon{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  margin:0;width:44px;height:44px;color:var(--color-primary);
}
.hero-point .icon svg{width:24px;height:24px}
.hero-actions{display:grid;grid-template-columns:1fr;gap:16px}
.hero-actions .btn-primary{min-height:56px;font-size:16px}
.hero-actions .btn-secondary{min-height:50px;font-size:15px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 24px;border-radius:999px;border:1px solid transparent;
  font-weight:700;text-align:center
}
.btn-primary{background:var(--color-accent);color:#fff;box-shadow:0 8px 18px rgba(255,165,0,.18)}
.btn-secondary{background:#fff;color:var(--color-primary-dark);border-color:#9ec6df}
.btn-line{background:var(--color-line);color:#fff}
.hero-photo{
  position:static;width:100%;height:auto;
  aspect-ratio:4/3;overflow:hidden;
}
.hero-photo--left{left:0}
.hero-photo--right{
  right:16px;bottom:0;display:block;position:absolute;width:47%;height:auto;
  aspect-ratio:4/3;border:5px solid #fff;border-radius:18px;z-index:2;
  transform:translateY(35%);
  box-shadow:0 8px 20px rgba(38,52,61,.12)
}
.hero-photo picture,.hero-photo img{
  display:block;width:100%;height:100%;object-fit:cover;
}
.hero-photo--left img{
  object-position:55% 45%;
  -webkit-mask-image:none;
  mask-image:none;
}
.hero-photo--right img{
  object-position:40% 18%;
}

/* FV photo-edge wave overlay: same idea as PC but a calmer, shallower flow on SP.
   Its lowest layer is section 02's base tone, so wave -> scroll cue -> 02 read as
   one continuous pale-blue field (no separate white transition band). */
.hero-waves{
  display:block;position:absolute;left:0;right:0;bottom:0;height:52px;z-index:2;
  pointer-events:none;
}
.hero-waves-art{display:block;width:100%;height:100%}
.hero-waves-art--tablet,.hero-waves-art--pc{display:none}
.hero-wave--back{fill:#d4e9f7}
.hero-wave--front{fill:#f6fafd}

/* FV -> 02 transition: scroll cue sitting on section 02's own field */
.hero-transition{
  position:relative;overflow:visible;
  display:flex;align-items:center;justify-content:center;
  background:#f6fafd;margin-top:0;padding:28px 0 12px;
}
.hero-scroll{
  position:relative;z-index:1;padding:0 24px;
  color:var(--color-primary-dark);font-size:19px;font-weight:600;line-height:1.3;text-align:center;
  animation:heroScrollFloat 2s ease-in-out infinite;
}
.hero-scroll span{display:block;margin-top:12px;font-size:15px;line-height:1.2}
@keyframes heroScrollFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(8px)}
}
@media (prefers-reduced-motion:reduce){
  .hero-scroll{animation:none;transform:none}
}

/* Common cards */
.third{
  background:linear-gradient(180deg,#f6fafd 0%,#fff 100%);
  padding-top:24px;padding-bottom:var(--space-section-compact);
}
.third-heading{max-width:900px;margin:0 auto 44px;text-align:center}
.third-heading .top{
  display:block;font-size:clamp(20px,5vw,28px);
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif
}
.third-heading .main{
  display:block;margin-top:8px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(28px,7.4vw,52px);line-height:1.3;font-weight:500
}
/* keep "第三の選択肢。" intact so SP breaks after the comma, not mid-phrase */
.third-heading .main .orange{white-space:nowrap}
.compare-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch}
.compare-card{border:1px solid var(--color-border);background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-card)}
.compare-card.featured{border:2px solid var(--color-primary);position:relative;order:-1}
.compare-card .head{
  min-height:68px;display:flex;align-items:center;justify-content:center;gap:12px;
  background:#78868f;color:#fff;font-size:21px;font-weight:700
}
.compare-card.featured .head{background:var(--color-primary)}
.compare-card.lawyer .head{background:#c6a36b}
.recommend{
  position:absolute;top:0;right:20px;background:var(--color-accent);color:#fff;
  padding:8px 12px;border-radius:0 0 12px 12px;font-size:12px;font-weight:800
}
.compare-body{padding:24px 20px}
.compare-sub{font-weight:800;margin-bottom:20px;color:#344650}
.compare-list{display:grid;gap:16px;margin:0;padding:0;list-style:none;color:#566771;font-size:14px}
.compare-list li{display:flex;gap:12px;align-items:flex-start}
.compare-list li::before{content:"✓";color:var(--color-primary);font-weight:900}
.note{margin-top:24px;padding:16px;border-radius:16px;background:#f8fafb;color:#667780;font-size:13px}
.featured .note{background:var(--color-accent-light);color:#c97800}

.grid-5{display:grid;grid-template-columns:1fr;gap:16px}
/* SP: portrait cards read fine two-up; value cards carry prose, so they stay full width */
.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 12px}
.grid-4 .card{padding:18px 16px}
.values .grid-4{grid-template-columns:1fr;gap:16px}
.values .grid-4 .card{padding:20px}
.card{
  background:#fff;border:1px solid var(--color-border);border-radius:22px;
  padding:24px;box-shadow:0 10px 26px rgba(46,75,92,.04)
}
.card h3{font-size:18px;line-height:1.5;margin:16px 0 12px}
.card p{margin:0;color:var(--color-text-muted);font-size:14px}
/* 03 Concerns: infographic scene — illustration + unboxed annotations (mobile-first) */
.concern{background:#fff;padding-top:var(--space-section-compact)}
/* Keep 03's own heading group tightly bound to its infographic (scoped to .concern only) */
.concern .section-title{margin-bottom:28px}
.concern-scene{
  position:relative;margin-top:40px;
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.concern-illustration-wrap{
  position:relative;width:100%;max-width:340px;padding:20px 0;
  display:flex;justify-content:center;align-items:center;
}
.concern-illustration-wrap::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse at center,var(--color-primary-light) 0%,rgba(238,247,252,0) 72%);
}
.concern-illustration{position:relative;z-index:1;width:100%;height:auto;display:block}
.concern-lines{display:none}
.concern-bubble{
  width:100%;max-width:400px;position:relative;padding-left:20px;
}
.concern-bubble::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:var(--color-primary-light);
}
.concern-num{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-style:italic;
  font-size:22px;font-weight:600;line-height:1;color:var(--color-primary);
}
.concern-num::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--color-primary);flex-shrink:0}
.concern-bubble h3{font-size:18px;line-height:1.55;margin:0 0 8px;font-weight:700}
.concern-bubble p{margin:0;color:var(--color-text-muted);font-size:15px;line-height:1.75}

/* 03 scroll-in reveal (progressive enhancement: hidden state only applies once
   .js is on <html>, so content is never lost without JS). Base = SP/Tablet: a
   quiet vertical fade-up, no horizontal slide. PC overrides add the per-item
   direction and leader-line draw-in further down. */
.js .concern-illustration-wrap{
  opacity:0;
  transform:translateY(8px) scale(.985);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.js .concern-illustration-wrap.is-visible{opacity:1;transform:none}
.js .concern-bubble{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
}
.js .concern-bubble.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .concern-illustration-wrap,
  .js .concern-bubble{
    opacity:1;transform:none;transition:none;
  }
  .js .concern-line{transition:none}
}

/* Bridge: 03 -> 04, large wave surface (not a boxed section) */
.bridge{
  position:relative;overflow:hidden;text-align:center;
  padding:32px 0 40px;background:var(--color-primary-light);
}
.bridge-wave{display:block;position:absolute;top:0;left:0;width:100%;height:64px;line-height:0}
.bridge-wave-layer--3{fill:var(--color-primary-light)}
.bridge-wave-layer--2{fill:var(--color-primary-soft)}
.bridge-wave-layer--1{fill:#fff}
.bridge-content{position:relative;padding-top:16px}
.bridge-lead{
  margin:0 0 12px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(22px,5.5vw,30px);font-weight:500;line-height:1.5;
  color:var(--color-primary-dark);
}
.bridge-sub{margin:0 auto;max-width:480px;color:var(--color-text-muted);font-size:14px}
.bridge-cue{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:8px}
.bridge-arrow{display:block;width:28px;height:36px;color:var(--color-primary)}

/* 04 Cases: unboxed columns — vertical rule + number + line icon + tinted progress band */
.cases{background:var(--color-primary-soft)}
.cases-grid{display:grid;grid-template-columns:1fr;gap:32px}
.case-card{
  min-height:0;display:flex;flex-direction:column;position:relative;
  background:none;border:0;box-shadow:none;border-radius:0;padding:0 0 0 20px;
}
.case-card::before{
  content:"";position:absolute;left:0;top:4px;bottom:0;width:2px;
  background:var(--color-primary-light);
}
.case-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.case-icon{
  width:auto;height:auto;flex-shrink:0;
  background:none;border-radius:0;color:var(--color-primary);
}
.case-icon svg{width:22px;height:22px}
.case-num{display:flex;flex-direction:column;gap:2px}
.case-num small{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--color-text-muted)}
.case-num small::after{content:""}
.case-num strong{
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-style:italic;font-weight:600;
  font-size:34px;line-height:1;color:#bcdcef;
}
.case-progress{
  margin-top:16px;padding:16px;border-top:0;border-radius:8px;
  display:flex;align-items:flex-start;gap:8px;
  background:var(--color-primary-light);
  color:var(--color-primary-dark);font-size:13px;font-weight:700;line-height:1.6;
}
.case-progress svg{width:16px;height:16px;flex-shrink:0;margin-top:4px;color:var(--color-primary)}
.case-progress-body{flex:1;min-width:0;display:flex;flex-direction:column}
.case-progress-label{
  display:block;font-size:11px;font-weight:800;letter-spacing:.08em;
  color:var(--color-primary);margin-bottom:4px;
}
.case-progress-text{color:var(--color-primary-dark);font-weight:700}

/* CTA band */
.cta-band{padding:48px 0;background:#fff}
.cta-box{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:400px;margin-inline:auto;padding:0 20px;
}
.cta-box h3{margin:0 0 16px;font-size:22px;line-height:1.45}
.cta-box p{margin:0 0 24px;color:#62756a;font-size:15px;line-height:1.8}
.cta-box .btn{width:100%;max-width:320px}

/* Flow */
.flow{background:#fff}
.flow-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:44px;position:relative}
.flow-grid::before{display:none}
.step{
  display:grid;grid-template-columns:58px 1fr;column-gap:16px;
  position:relative;z-index:1;text-align:left;align-items:start
}
.step-no{
  width:54px;height:54px;border-radius:50%;margin:0;
  background:#fff;border:2px solid var(--color-primary);display:grid;place-items:center;
  color:var(--color-primary-dark);font-weight:800
}
.step h3{margin:0 0 8px;font-size:16px}
.step p{margin:0;color:var(--color-text-muted);font-size:14px;line-height:1.7}
.flow-note{max-width:760px;margin:28px auto 0;text-align:center;color:#89959c;font-size:12px;line-height:1.8}

/* Pricing */
.pricing{background:linear-gradient(180deg,#f8fbfd,#fff)}
.price-wrap{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch;margin-top:48px}
.price-card{
  border:2px solid var(--color-primary);border-radius:26px;padding:28px 24px;
  background:#fff;box-shadow:var(--shadow-card);height:auto;min-height:0;align-self:stretch;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center
}
.price-card-label{font-size:18px;font-weight:700;line-height:1.5;color:var(--color-text);margin-bottom:12px}
.price-name{font-size:18px;font-weight:800;color:var(--color-primary-dark)}
.price{font-size:clamp(42px,12vw,54px);font-weight:800;letter-spacing:-.03em;margin:16px 0 8px}
.price small{font-size:15px;font-weight:600}
.price-description{margin:0 0 4px;color:var(--color-text-muted);font-size:14px;line-height:1.7}
.company-info{display:grid;grid-template-columns:180px 1fr;margin:40px auto 0;max-width:760px;border-top:1px solid var(--color-border)}
.company-info dt,.company-info dd{margin:0;padding:16px 18px;border-bottom:1px solid var(--color-border);line-height:1.7}
.company-info dt{font-weight:700;color:var(--color-text);background:var(--color-primary-light)}
.company-info dd{color:var(--color-text-muted)}
.footer-certification{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:11px;line-height:1.5;color:var(--color-text-muted)}
.footer-certification img{width:150px;height:auto;display:block}
@media (max-width:47.9375rem){.company-info{grid-template-columns:1fr;margin-top:28px}.company-info dt{padding-bottom:6px;border-bottom:0}.company-info dd{padding-top:6px}}
.includes-box{width:100%;max-width:430px;margin:12px auto 0;padding:18px 20px;background:var(--color-primary-light);border-radius:14px;text-align:left}
.includes-title{margin:0 0 12px;text-align:center;font-size:16px;line-height:1.5}
.includes{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.includes li{position:relative;padding-left:28px;font-size:14px;line-height:1.7}
.includes li::before{content:"✓";position:absolute;left:0;top:0;color:var(--color-primary);font-weight:800}
.subsidy{border-radius:26px;padding:28px 24px;background:#fff;border:1px solid var(--color-border)}
.subsidy h3{margin-top:0}
.subsidy-lead{margin:0;color:var(--color-text-muted);font-size:14px;line-height:1.8}
.subsidy-list{margin-top:20px;padding:8px 20px;background:var(--color-primary-soft);border:1px solid var(--color-border);border-radius:14px}
.subsidy-item{display:flex;gap:12px;padding:18px 0;border-top:1px solid var(--color-border)}
.subsidy-item:first-child{padding-top:0;border-top:0}
.subsidy-icon{flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--color-primary-dark);font-weight:800}
.subsidy-item h4{margin:0 0 4px;color:var(--color-text);font-size:15px;line-height:1.5}
.subsidy-item p{margin:0;color:var(--color-text-muted);font-size:13px;line-height:1.75}

/* Mediators */
.mediators{background:#fff}
.person-card{padding:0;overflow:hidden}
.person-photo{
  aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(160deg,#e8edf0,#f7f9fa);
}
.person-photo img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center top;
}
.person-photo--matsuoka img{transform:scale(1.1);transform-origin:50% 24%}
.person-body{padding:14px 12px 16px}
.person-body h3{margin:0 0 4px;font-size:15px;line-height:1.5}
.person-body small{color:var(--color-text-muted);font-size:12px;line-height:1.5}

/* Values */
.values{background:var(--color-primary-soft)}
.value-card{min-height:0}
.value-card .value-lead{margin-bottom:8px;color:var(--color-text);line-height:1.7}

/* FAQ */
.faq{background:#fff}
.faq-list{max-width:920px;margin:44px auto 0;display:grid;gap:12px}
.faq-category{display:grid;gap:12px}
.faq-category h3{margin:28px 0 0;padding:0 4px;color:var(--color-primary-dark);font-size:17px;line-height:1.6}
.faq-category:first-child h3{margin-top:0}
details{border:1px solid var(--color-border);border-radius:16px;background:#fff;overflow:hidden}
summary{cursor:pointer;list-style:none;padding:20px 56px 20px 24px;font-weight:700;position:relative;line-height:1.7}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"＋";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  color:var(--color-primary);font-size:20px;line-height:1;
}
details[open] summary::after{content:"－"}
details p{padding:0 24px 24px;margin:0;color:var(--color-text-muted);font-size:14px}

/* Final */
.final{background:linear-gradient(135deg,#eef8fd,#fff8ec);text-align:center}
.final .section-title{max-width:820px;margin-inline:auto}
.final p{max-width:720px;margin:0 auto 32px;color:var(--color-text-muted);font-size:15px;line-height:1.85}
.final .btn{min-height:56px;font-size:16px;width:100%;max-width:320px}
.footer{padding:36px 0;background:var(--color-footer);color:#dbe3e7;font-size:12px}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer a{text-decoration:underline;text-underline-offset:2px}
.footer a:hover{color:#fff}

/* Back-to-top: auxiliary UI, appears after scrolling past ~500px */
.page-top{
  position:fixed;right:16px;bottom:16px;z-index:40;
  width:48px;height:48px;border-radius:50%;border:0;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:var(--color-primary);color:#fff;
  box-shadow:0 4px 12px rgba(46,75,92,.16);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.page-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.page-top svg{width:20px;height:20px}
.page-top:hover{background:var(--color-primary-dark)}

/* Static content page (privacy policy, etc.): plain white body, no card chrome,
   left-aligned long-form text with a readable measure. */
.policy{background:#fff}
.policy-wrap{max-width:760px;margin:0 auto;text-align:left}
.policy-back{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:24px;
  color:var(--color-primary-dark);font-size:14px;font-weight:700;
}
.policy-back svg{width:16px;height:16px}
.policy-eyebrow{
  display:block;margin-bottom:12px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-primary);
}
.policy-wrap h1{
  margin:0 0 40px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:500;
  font-size:clamp(28px,7vw,36px);line-height:1.4;color:var(--color-text);
}
.policy-intro{margin:0 0 40px;font-size:15px;line-height:1.9;color:var(--color-text)}
.policy-wrap h2{
  margin:40px 0 16px;padding-top:24px;border-top:1px solid var(--color-border);
  font-size:18px;line-height:1.5;font-weight:700;color:var(--color-primary-dark);
}
.policy-wrap h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.policy-wrap h3{margin:24px 0 8px;font-size:15px;line-height:1.6;font-weight:700;color:var(--color-text)}
.policy-wrap p{margin:0 0 20px;font-size:15px;line-height:1.9;color:var(--color-text)}
.policy-wrap ul{margin:0 0 20px;padding-left:20px}
.policy-wrap li{margin-bottom:10px;font-size:15px;line-height:1.85;color:var(--color-text)}
.policy-wrap li:last-child{margin-bottom:0}
.terms-body h2{margin-top:40px}
.terms-body h2:first-child{margin-top:0}
.terms-body .terms-item{margin-bottom:10px;padding-left:1em;text-indent:-1em}
.terms-divider{margin:64px 0 24px;border-top:2px solid var(--color-border)}
.terms-subtitle{margin:-8px 0 28px!important;color:var(--color-text-muted)!important;font-size:14px!important}
.terms-flow{display:block;width:100%;max-width:100%;height:auto;margin:24px 0 32px;border:1px solid var(--color-border);border-radius:12px}

/* Tablet: 768px+ */
@media (min-width:48rem){
  :root{
    --space-section-compact:28px;
    --space-section-default:40px;
    --space-section-large:48px;
  }
  .container{width:min(var(--container-max),calc(100% - 48px))}
  .header-inner{min-height:72px}
  .logo-img{height:38px}
  .page-top{right:20px;bottom:20px;width:52px;height:52px}
  .page-top svg{width:22px;height:22px}

  .hero{display:block;min-height:560px}
  .hero-media{
    position:absolute;inset:0;z-index:1;
    display:block;padding:0;gap:0;
  }
  .hero-inner{
    order:initial;position:relative;z-index:2;
    max-width:504px;margin-inline:auto;padding:48px 20px;
  }
  .hero-photo{
    position:absolute;top:0;bottom:0;height:100%;
    width:24%;border-radius:0;aspect-ratio:auto;
  }
  .hero-photo--left{left:0}
  .hero-photo--left img{
    object-position:60% 30%;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 40%,transparent 88%);
    mask-image:linear-gradient(to right,#000 0%,#000 40%,transparent 88%);
  }
  .hero-photo--right{
    right:0;display:block;
    -webkit-mask-image:linear-gradient(to left,#000 0%,#000 40%,transparent 88%);
    mask-image:linear-gradient(to left,#000 0%,#000 40%,transparent 88%);
  }
  .hero-photo--right img{
    object-position:44% 26%;
    transform:scale(1.14);
    transform-origin:50% 34%;
  }
  .hero-title{font-size:clamp(40px,6vw,52px);line-height:1.28;margin-bottom:24px}
  .hero-text{margin-bottom:28px;line-height:2.05}
  .hero-points{grid-template-columns:repeat(3,1fr);gap:0;margin:28px 0}
  .hero-point{position:static;display:block;text-align:center;padding:0 8px;font-size:13px;line-height:1.8}
  .hero-point .icon{position:static;transform:none;margin:0 auto 12px;width:40px;height:40px}
  .hero-point .icon svg{width:22px;height:22px}
  .hero-point+.hero-point{border-top:0;border-left:1px solid var(--color-border)}
  .hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:nowrap}
  .hero-actions .btn-primary,.hero-actions .btn-secondary{min-height:52px;font-size:inherit}
  .hero-scroll{font-size:28px}
  .hero-scroll span{font-size:20px}
  .hero-waves{height:72px}
  .hero-transition{padding:32px 0 16px}
  .hero-scroll span{margin-top:16px}

  .grid-5{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:16px}
  .grid-4 .card{padding:24px}
  .values .grid-4{grid-template-columns:repeat(2,1fr)}
  .person-body{padding:20px}
  .person-body h3{font-size:18px}
  .person-body small{font-size:inherit}
  .compare-grid{grid-template-columns:1fr}

  .concern-scene{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:32px 40px;margin-top:56px;
  }
  .concern-illustration-wrap{grid-column:1/3;justify-self:center;max-width:420px;margin-bottom:8px}
  .concern-bubble{max-width:none}
  .concern-bubble--5{grid-column:1/3;justify-self:center;max-width:360px;text-align:center;padding-left:0}
  .concern-bubble--5::before{display:none}
  .concern-bubble--5 .concern-num{justify-content:center}

  .bridge{padding:0 0 88px}
  .bridge-wave{height:120px}
  .bridge-content{padding-top:72px}

  .cases-grid{grid-template-columns:repeat(2,1fr);gap:40px 32px;align-items:stretch}
  .case-card{height:100%}
  .case-progress{margin-top:auto}
  .case-num strong{font-size:44px}
  .flow-grid{grid-template-columns:repeat(3,1fr);gap:28px}
  .flow-grid::before{
    content:"";display:block;position:absolute;left:8%;right:8%;top:36px;
    height:1px;background:#cfe1ec;z-index:0
  }
  .step{display:block;text-align:center}
  .step-no{
    width:72px;height:72px;margin:0 auto 20px;box-shadow:0 0 0 8px #fff
  }
  .price-card,.subsidy{padding:36px}
  .cta-box{max-width:600px;padding:0}
  .cta-box h3{margin-bottom:18px}
  .cta-box p{margin-bottom:28px}
}

/* Tablet only: 768px - 1023px. FV gets a dedicated layout: photos sit in normal
   flow above the copy (not layered behind it as absolute panels), so nothing
   masks the faces and the copy column isn't squeezed between two photo strips.
   PC (1024px+, below) keeps the layered composition. */
@media (min-width:48rem) and (max-width:63.9375rem){
  .hero-media{
    position:static;z-index:auto;inset:auto;
    display:flex;height:320px;
  }
  .hero-photo{
    position:static;width:50%;height:100%;
    aspect-ratio:auto;border-radius:0;
  }
  .hero-photo--left img,.hero-photo--right img{
    -webkit-mask-image:none;mask-image:none;
  }
  .hero-photo--left img{object-position:55% 22%}
  .hero-photo--right img{object-position:42% 18%;transform:none}

  .hero-inner{
    max-width:600px;margin-inline:auto;
    padding:40px 24px 76px;
  }
  .hero-title{font-size:clamp(40px,5vw,48px);line-height:1.3;margin-bottom:20px}
  .hero-text{font-size:16px;line-height:1.9;margin-bottom:24px}
  .hero-points{gap:0;margin:24px 0 28px}
  .hero-point{font-size:14px;line-height:1.7}
  .hero-actions{gap:16px}

  .hero-waves{height:64px}
  .hero-waves-art--tablet{display:block}
  .hero-waves-art--sp,.hero-waves-art--pc{display:none}
  .hero-transition{padding:32px 0 16px}
}

/* PC: 1024px+ */
@media (min-width:64rem){
  :root{
    --space-section-compact:36px;
    --space-section-default:48px;
    --space-section-large:64px;
  }
  .section-title{font-size:clamp(34px,3.2vw,48px)}
  .section-lead{font-size:16px}
  .page-top{right:24px;bottom:24px;width:56px;height:56px}
  .page-top svg{width:24px;height:24px}

  .header-inner{height:78px}
  .logo-img{height:42px}
  .hamburger{display:none}
  .nav{
    position:static;display:flex!important;flex-direction:row;align-items:center;
    gap:28px;padding:0;background:transparent;border:0;box-shadow:none
  }
  .nav a{padding:0;border:0}
  .header-cta{
    display:inline-flex;align-items:center;gap:12px;
    padding:12px 20px;border-radius:999px;background:var(--color-accent);
    color:#fff;font-weight:700;white-space:nowrap
  }

  .hero{display:block;min-height:620px}
  .hero-media{
    position:absolute;inset:0;z-index:1;
    display:block;padding:0;gap:0;
  }
  .hero-inner{
    order:initial;position:relative;z-index:3;
    max-width:700px;margin-inline:auto;padding:56px 24px 100px;
  }
  .hero-title{font-size:clamp(46px,4.25vw,62px)}
  .hero-text{max-width:560px}
  .hero-photo{
    position:absolute;top:0;bottom:0;height:100%;
    width:35%;border-radius:0;
  }
  /* PC keeps the mother-daughter and shoulder-ride photos as paired side visuals. */
  .hero-photo--left{left:0;display:block}
  .hero-photo--right{right:0;display:block;border:0;transform:none}
  .hero-photo--left img{
    object-position:58% 30%;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 48%,transparent 92%);
    mask-image:linear-gradient(to right,#000 0%,#000 48%,transparent 92%);
  }
  .hero-photo--right{
    -webkit-mask-image:linear-gradient(to left,#000 0%,#000 48%,transparent 92%);
    mask-image:linear-gradient(to left,#000 0%,#000 48%,transparent 92%);
  }
  .hero-photo--right img{
    object-position:46% 30%;
    transform:scale(1.18);
    transform-origin:50% 36%;
  }
  .hero-actions{flex-wrap:nowrap;gap:16px}
  .hero-actions .btn{white-space:nowrap;min-height:56px;padding:0 32px}
  .hero-scroll{font-size:32px;font-weight:600}
  .hero-scroll span{margin-top:8px;font-size:22px}

  .hero-points{margin:32px 0}
  .hero-point{padding:0 24px;font-size:14px}
  .hero-point .icon{width:46px;height:46px}
  .hero-point .icon svg{width:24px;height:24px}

  .hero-plant{
    display:block;position:absolute;left:0;bottom:0;z-index:2;
    width:clamp(130px,10.5vw,192px);height:auto;opacity:.95;pointer-events:none;
  }
  /* FV -> 02: one continuous coloured surface. hero-waves carries the flow into the
     photo; its lowest layer is section 02's own base tone, so the wave, the scroll cue
     and section 02 all sit on the same pale-blue field — no separate white transition band. */
  .hero-waves{height:150px}
  .hero-waves-art--sp{display:none}
  .hero-waves-art--pc{display:block}

  .hero-transition{padding:40px 0 16px;background:#eef2f9}
  .hero-scroll span{margin-top:20px}
  .third{background:linear-gradient(180deg,#eef2f9 0%,#fff 100%)}

  .third-heading{margin-bottom:48px}
  .compare-grid{grid-template-columns:1fr 1.12fr 1fr;gap:24px}
  .compare-card.featured{order:initial;transform:translateY(-14px)}
  .compare-body{padding:28px 28px 32px}

  .grid-5{grid-template-columns:repeat(5,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}

  /* 03: infographic scene — illustration + leader lines + unboxed annotations */
  .concern-scene{
    display:block;position:relative;
    min-height:640px;margin-top:32px;padding:0 20px;
  }
  .concern-illustration-wrap{
    display:flex;position:absolute;left:50%;top:50%;z-index:1;
    transform:translate(-50%,-50%);
    width:min(560px,42vw);aspect-ratio:3/2;padding:0;
  }
  .concern-illustration-wrap::before{
    background:radial-gradient(ellipse at center,var(--color-primary-light) 0%,rgba(238,247,252,0) 68%);
  }
  .concern-illustration{width:100%;height:100%;object-fit:contain}
  .concern-lines{
    display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;
  }
  .concern-lines path{fill:none;stroke:var(--color-primary);stroke-width:1.2;opacity:.45;vector-effect:non-scaling-stroke}
  .concern-bubble{
    position:absolute;z-index:1;max-width:280px;
    background:none;border:0;box-shadow:none;padding:0;margin:0;transform:none;
  }
  .concern-bubble::before{display:none}
  .concern-bubble--1{left:0;top:4%}
  .concern-bubble--2{right:0;top:4%;text-align:right}
  .concern-bubble--3{left:0;top:44%}
  .concern-bubble--4{right:0;top:44%;text-align:right}
  .concern-bubble--5{left:50%;top:86%;transform:translateX(-50%);text-align:center;max-width:300px}
  .concern-num{
    display:inline-flex;align-items:center;gap:8px;
    width:auto;height:auto;background:none;border-radius:0;margin-bottom:10px;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-style:italic;
    font-size:32px;font-weight:600;color:var(--color-primary);
  }
  .concern-num::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-primary);flex-shrink:0}
  .concern-bubble--2 .concern-num,.concern-bubble--4 .concern-num{flex-direction:row-reverse}
  .concern-bubble--1 h3,.concern-bubble--3 h3,.concern-bubble--1 p,.concern-bubble--3 p{margin-left:0}

  /* 03 scroll-in reveal (PC): the whole section triggers once, then a short stagger
     plays across illustration -> 01 -> 05 with a gentle per-item left/right nudge.
     Positioning transforms (centering) are composed with, never replaced by, the
     reveal transform. */
  .js .concern-illustration-wrap{
    transform:translate(-50%,-50%) translateY(8px) scale(.985);
  }
  .js .concern-illustration-wrap.is-visible{transform:translate(-50%,-50%)}
  .js .concern-bubble{
    transform:translateY(12px);
    transition-duration:.6s;
  }
  .js .concern-bubble--1,.js .concern-bubble--3{transform:translate(-8px,12px)}
  .js .concern-bubble--2,.js .concern-bubble--4{transform:translate(8px,12px)}
  .js .concern-bubble--5{transform:translateX(-50%) translate(0,12px)}
  .js .concern-bubble.is-visible{transform:none}
  .js .concern-bubble--5.is-visible{transform:translateX(-50%)}
  .js .concern-line{
    transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1);
  }

  /* Bridge: large wave transition */
  .bridge{padding:0 0 48px}
  .bridge-wave{height:160px}
  .bridge-content{padding-top:104px}
  .bridge-sub{max-width:760px}
  .bridge-arrow{width:32px;height:22px}

  /* 04: unboxed columns — vertical rule + big number + tinted progress band */
  .cases-grid{grid-template-columns:repeat(4,1fr);gap:32px;align-items:stretch}
  .case-card{
    height:100%;
    background:none;border:0;box-shadow:none;border-radius:0;
    padding:4px 0 0 20px;
  }
  .case-card::before{
    content:"";position:absolute;left:0;top:4px;bottom:0;width:2px;
    background:var(--color-primary-light);
  }
  .case-card-top{
    flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:20px;position:relative;
  }
  .case-num{display:flex;flex-direction:column;gap:2px}
  .case-num small{
    font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--color-text-muted);
  }
  .case-num small::after{content:""}
  .case-num strong{
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-style:italic;font-weight:600;
    font-size:48px;line-height:1;color:#bcdcef;
  }
  .case-icon{
    width:auto;height:auto;background:none;border-radius:0;color:var(--color-primary);
    position:absolute;right:0;top:0;
  }
  .case-icon svg{width:26px;height:26px}
  .case-card h3{font-size:16px}
  .case-progress{
    margin-top:auto;padding:16px 18px;border-top:0;border-radius:8px;
    background:var(--color-primary-light);align-items:flex-start;
  }
  .case-progress-label{
    display:block;font-size:11px;font-weight:800;letter-spacing:.08em;
    color:var(--color-primary);margin-bottom:4px;
  }
  .case-progress-text{color:var(--color-primary-dark);font-weight:700}

  .cta-band{padding:56px 0}
  .cta-box{max-width:760px;padding:0}
  .cta-box h3{font-size:22px;margin-bottom:20px}
  .cta-box p{font-size:15px;margin-bottom:32px}
  .cta-box .btn{width:auto;min-width:280px;height:56px;padding:0 32px}
  .price-wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .price-card{padding:40px}
  .subsidy{padding:36px}
  .value-card{min-height:220px}
}

/* Large PC fine tuning: 1280px+ */
@media (min-width:80rem){
  .hero{min-height:660px}
  .hero-photo{width:34%}
}

/* Wide screen: prevent over-expansion */
@media (min-width:96rem){
  :root{
    --space-section-compact:40px;
    --space-section-default:56px;
    --space-section-large:72px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important
  }
}

/* 03 reveal, reduced motion at PC: restore the essential centring transforms
   (removed by the generic reduced-motion reset above) without reintroducing
   any animation offset. Placed last so it wins the specificity tie. */
@media (min-width:64rem) and (prefers-reduced-motion:reduce){
  .js .concern-illustration-wrap{transform:translate(-50%,-50%)}
  .js .concern-bubble,
  .js .concern-bubble--1,
  .js .concern-bubble--2,
  .js .concern-bubble--3,
  .js .concern-bubble--4{transform:none}
  .js .concern-bubble--5{transform:translateX(-50%)}
}

/* Terms of Service styles */
.terms-content h2{margin-top:40px;margin-bottom:16px;padding-top:24px;border-top:1px solid var(--color-border);font-size:16px;line-height:1.7;font-weight:700;color:var(--color-text)}
.terms-content h2:first-child{margin-top:0;padding-top:0;border-top:0}
.terms-content h3{margin:28px 0 12px;font-size:15px;line-height:1.6;font-weight:700;color:var(--color-text)}
.terms-content p{margin:0 0 16px;font-size:15px;line-height:1.9;color:var(--color-text)}
.terms-content ul{margin:0 0 20px;padding-left:28px}
.terms-content li{margin-bottom:12px;font-size:15px;line-height:1.85;color:var(--color-text)}
.terms-content li:last-child{margin-bottom:0}
.terms-content a{color:var(--color-primary);text-decoration:underline;font-weight:500}
.terms-content a:hover{color:var(--color-primary-dark)}

.terms-section-title{margin-top:60px;margin-bottom:8px;font-size:18px;line-height:1.7;font-weight:700;color:var(--color-text);border-top:none;padding-top:0}
.terms-legal-basis{margin:0 0 32px;font-size:14px;line-height:1.6;color:var(--color-text-muted);font-weight:600}

.terms-flow-image{margin:32px 0;text-align:center}
.terms-flow-image img{max-width:100%;height:auto;display:inline-block;border:1px solid var(--color-border);border-radius:8px}

.terms-date{margin-top:32px;margin-bottom:8px;font-size:14px;color:var(--color-text-muted)}
.terms-company{margin:0;font-size:14px;font-weight:600;color:var(--color-text)}

/* Application form test embed */
.application-test{background:#fff}
.application-frame-wrap{max-width:var(--container-max);margin:40px auto 0}
.application-frame{display:block;width:100%;height:560px;min-height:0;border:0;background:#fff}
.application-fallback{margin:12px 0 0;text-align:center;font-size:13px;color:var(--color-text-muted)}
.application-fallback a{color:var(--color-primary-dark);text-decoration:underline}

@media (max-width:47.9375rem){
  .application-frame{height:700px}
}

@media (min-width:48rem) and (max-width:63.9375rem){
  .application-frame{height:620px}
}