/* Agreed why-section design v3d. Scoped to #why. Mobile keeps right photo as full-card stage. */
#why{
  /* Local accents stay why-specific for agreed v3d look; ink/muted/line consume shared tokens */
  --navy:#0a304b;
  --blue:#0e6f98;
  --ink:var(--esp-ink, #254354);
  --muted:var(--esp-muted, #536e7d);
  --line:var(--esp-line, #d4e1e7);
  padding:0;
  font-family:var(--gothic, "Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif);
  background:#f7f9fa
}
#why .wrap{max-width:1640px;margin:auto;padding:170px clamp(22px,4.5vw,75px) 95px} /* +100px hero-to-intro breathing room */
#why .intro{margin-bottom:34px}
#why .intro h2{margin:0 0 10px;color:var(--navy);font-size:clamp(31px,3vw,46px);letter-spacing:.02em;line-height:1.35}
#why .intro p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
#why .cards{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;isolation:isolate;background:#fff}
#why .card{--card-x:clamp(32px,3.3vw,58px);position:relative;min-width:0;overflow:hidden;padding:39px var(--card-x) 46px;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:6px;background:#fff;background-clip:padding-box;/* v1.4.75: negative spread keeps navy shadow out of the 32px gutter */box-shadow:0 18px 28px -16px rgba(13,48,66,.14)}
#why .card--left{background:#fff}
#why .card--left::after{content:"";position:absolute;z-index:1;right:-2%;bottom:0;width:72%;height:58%;background:url('../img/why/external-to-internal.png') 48% 58%/cover no-repeat;opacity:.28;mask-image:linear-gradient(90deg,transparent 0%,transparent 10%,rgba(0,0,0,.08) 32%,rgba(0,0,0,.35) 58%,#000 82%,#000 100%),linear-gradient(0deg,#000 0%,#000 32%,rgba(0,0,0,.5) 62%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 10%,rgba(0,0,0,.08) 32%,rgba(0,0,0,.35) 58%,#000 82%,#000 100%),linear-gradient(0deg,#000 0%,#000 32%,rgba(0,0,0,.5) 62%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in;pointer-events:none}
#why .card--right{display:flex;flex-direction:column;padding-bottom:0;background:rgba(255,255,255,.18);/* v1.4.75: tighter under-card shadows — no blue wash into gap */box-shadow:0 22px 34px -18px rgba(13,48,66,.16),0 6px 12px -8px rgba(13,48,66,.08)}
#why .card-head{position:relative;z-index:2;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:18px;min-height:138px;margin:-39px calc(-1 * var(--card-x)) 26px;padding:26px var(--card-x) 24px;background:linear-gradient(105deg,#eaf4f8 0%,#f9fcfd 49%,#fff 100%);border-bottom:1px solid #b9d0dc}
#why .card--right .card-head{margin-bottom:0;opacity:1;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;isolation:isolate}
#why .head-mark{display:grid;place-items:center;width:52px;height:52px;background:var(--navy);box-shadow:6px 6px 0 #b7d1df}
#why .icon{width:27px;height:27px;color:#fff}
#why .head-copy{min-width:0}
#why .head-label{display:block;margin-bottom:8px;color:var(--blue);font:700 12px/1.4 "Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;letter-spacing:.12em}
#why .card-head h3{margin:0;color:var(--navy);font-size:clamp(25px,1.9vw,32px);line-height:1.35;letter-spacing:.015em}
#why .group{position:relative;z-index:2}
#why .group h4{margin:0 0 14px;color:var(--navy);font-size:clamp(17px,1.24vw,20px);font-weight:800;letter-spacing:.035em;line-height:1.4}
#why .group--policy{margin:30px calc(-1 * var(--card-x)) -46px;padding:26px var(--card-x) 42px;background:transparent}
#why .group--policy::before{content:"";position:absolute;top:0;left:var(--card-x);right:var(--card-x);height:2px;background:var(--navy)}
#why .card--left .list{list-style:none;margin:0;padding:0}
#why .card--left .list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:7px 0;color:var(--ink);font-size:clamp(15.5px,1.08vw,17.5px);line-height:1.62;font-weight:600}
#why .card--left .list li b{padding-top:4px;color:var(--blue);font:700 11px Georgia,serif}
#why .card--left .list li+li{border-top:none;background-image:linear-gradient(90deg,#dce7eb88 0%,#dce7eb88 42%,transparent 72%);background-size:100% 1px;background-repeat:no-repeat;background-position:0 0}
#why .list{list-style:none;margin:0;padding:0}
#why .list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;padding:9px 0;color:var(--ink);font-size:clamp(17px,1.18vw,19px);line-height:1.66;font-weight:600}
#why .list li b{padding-top:5px;color:var(--blue);font:700 12px Georgia,serif}
#why .list li+li{border-top:none;background-image:linear-gradient(90deg,#dce7eb88 0%,#dce7eb88 42%,transparent 72%);background-size:100% 1px;background-repeat:no-repeat;background-position:0 0}
#why .right-content{position:relative;z-index:3;width:auto;max-width:100%;margin:auto clamp(8px,1.1vw,16px);padding:28px clamp(22px,2.3vw,32px) 26px;background:linear-gradient(105deg,rgba(255,255,255,.80),rgba(255,255,255,.65));backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1px solid rgba(255,255,255,.48);box-shadow:0 10px 28px #0d30420d}
#why .right-content .lead{margin:0 0 12px;padding:0 0 16px;border-bottom:1px solid #d4e1e7aa;color:var(--navy);font-size:clamp(21px,1.6vw,27px);font-weight:700;line-height:1.55;letter-spacing:.015em}
#why .right-content .lead small{display:block;margin-bottom:12px;color:var(--blue);font:700 12px/1.4 "Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;letter-spacing:.12em}
#why .right-content .list li{padding:11px 0;font-size:clamp(17px,1.2vw,19px);line-height:1.65}
#why .right-content .list li b{color:var(--blue)}
#why .right-content .list li+li{background-image:linear-gradient(90deg,#dce7eb99 0%,#dce7eb99 38%,transparent 68%);background-size:100% 1px;background-repeat:no-repeat;background-position:0 0}
#why .right-art{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
#why .right-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:88% 48%;opacity:.5;filter:saturate(.72) contrast(.98) brightness(1.08)}
#why .right-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(239,247,249,.20) 0%,rgba(255,255,255,.08) 28%,rgba(215,233,239,.05) 54%,rgba(37,99,121,.14) 78%,rgba(6,44,68,.26) 100%)}
#why .card--right::after{content:"";position:absolute;z-index:2;inset:auto 0 0 0;height:31%;background:linear-gradient(180deg,transparent 0%,rgba(9,47,73,.05) 42%,rgba(9,47,73,.14) 100%);pointer-events:none}
#why .closing{margin-top:32px;padding:35px clamp(30px,4vw,60px);border-left:4px solid var(--blue);background:linear-gradient(100deg,#f0f6f9f0,#ffffffe8);color:var(--navy);font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-size:clamp(24px,2vw,32px);font-weight:500;line-height:1.75;letter-spacing:.04em;max-width:none;text-align:left}
#why .closing p{margin:0}
#why .card li::before{content:none}
#why .card-head h3::before,#why .group h4::before{content:none}
@keyframes why-scene-drift{from{transform:scale(1.05) translateX(-1.5%)}to{transform:scale(1.12) translateX(1.5%)}}
@media (prefers-reduced-motion: no-preference){
#why .right-art img{animation:why-scene-drift 9s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion: reduce){
#why .right-art img{animation:none;transform:none}
}
/* Stack cards, but keep right photo as absolute full-card wash (same as desktop stage) */
@media(max-width:1000px){
#why .cards{display:block}
#why .card{--card-x:24px;padding:27px var(--card-x) 36px}
#why .card+.card{margin-top:20px}
#why .card-head{margin-top:-27px;min-height:120px}
#why .card--left .list li{font-size:15px;padding:7px 0}
#why .list li,#why .right-content .list li{font-size:16px}
#why .card-head h3{font-size:23px}
#why .card--right{position:relative;padding-bottom:0}
#why .card--right .right-art{position:absolute;z-index:1;inset:0;order:unset;flex:unset;width:auto;height:auto;margin:0}
#why .card--right .right-art img{object-position:72% 42%;opacity:.5}
#why .card--right .right-content{position:relative;z-index:3;margin:auto 10px;padding:22px 18px 20px}
#why .card--right .card-head{position:relative;z-index:4}
}
@media(max-width:760px){
#why .wrap{padding:107px 16px 65px} /* +60px mobile, proportional to desktop */
#why .intro{margin-bottom:25px}
#why .intro h2{font-size:29px}
#why .intro p{font-size:13px}
#why .card{--card-x:22px;padding:24px var(--card-x) 35px}
#why .card+.card{margin-top:18px}
#why .card-head{grid-template-columns:43px 1fr;gap:14px;min-height:100px;margin-top:-24px;margin-bottom:18px;padding-top:18px;padding-bottom:18px}
#why .head-mark{width:42px;height:42px;box-shadow:4px 4px 0 #b7d1df}
#why .icon{width:22px;height:22px}
#why .head-label{font-size:11px;margin-bottom:5px;letter-spacing:.1em}
#why .card-head h3{font-size:22px}
#why .group--policy{margin-top:22px;margin-bottom:-35px;padding-top:22px;padding-bottom:32px}
#why .card--left .list li{font-size:13.5px;line-height:1.68;padding:6px 0}
#why .list li,#why .right-content .list li{font-size:14px;line-height:1.7}
#why .right-content .lead{font-size:18px}
#why .right-content .lead small{font-size:11px}
#why .card--right{padding-bottom:0}
#why .card--right .right-content{margin:auto 6px;padding:20px 16px 18px}
#why .card--right .right-art img{object-position:68% 40%}
#why .closing{margin-top:16px;padding:20px 16px;font-size:17px;line-height:1.65;letter-spacing:.02em}
}

/* ---- v1.4.68: why intro L→R — CSS-first (JS only toggles .is-in) ---- */
#why .intro .esp-why-intro{
  opacity:0;
  transform:translateX(-64px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
#why .intro h2.esp-why-intro{transition-delay:0s}
#why .intro p.esp-why-intro{transition-delay:.14s}
#why .intro .esp-why-intro.is-in{
  opacity:1;
  transform:translateX(0);
}
#why .intro .esp-why-intro[data-esp-motion-state="complete"]{
  will-change:auto;
}
@media (prefers-reduced-motion: reduce){
  #why .intro .esp-why-intro,
  #why .intro h2,
  #why .intro p{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
}
@media print{
  #why .intro .esp-why-intro,
  #why .intro h2,
  #why .intro p{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
}