:root{
  --white:#fff;--mist:#f5f5f7;--hair:#d6d6d6;--ctrl:#e6e6e8;
  --ink:#1d1d1f;--slate:#707070;--steel:#86868b;--link:#0066cc;--blue:#0071e3;
  --font:'SF Pro Display','SF Pro Text','Inter','Noto Sans JP','Hiragino Sans','Yu Gothic',-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* nav (shared) */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--ctrl);color:var(--ink)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:16px;max-width:1400px}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand img{width:26px;height:26px;object-fit:contain}
.brand b{font-size:19px;font-weight:600;letter-spacing:.01em;display:block;line-height:1.2}
.brand small{font-size:10px;opacity:.8;letter-spacing:.08em;display:block;line-height:1.1}
.menu{display:flex;gap:4px;list-style:none}
.menu a{display:block;padding:6px 10px;font-size:12px;white-space:nowrap;border-radius:0;opacity:.92}
.menu a:hover{background:rgba(127,127,127,.2);opacity:1}
.menu a.cur{font-weight:600;opacity:1;background:var(--mist)}
.acts{display:flex;gap:8px;align-items:center}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:0;padding:6px 14px;font-size:12px;line-height:16px;white-space:nowrap;border:1px solid transparent;font-family:inherit;cursor:pointer;transition:background .2s,transform .2s}
.pill-out{border-color:currentColor;background:transparent}
.pill-blue{background:var(--blue);color:#fff}
.pill-blue:hover{background:#0077ed}
.pill-lg{padding:14px 30px;font-size:18px;line-height:24px}
.tl{color:var(--link)}.tl::after{content:" ›"}.tl:hover{text-decoration:underline}

/* reveal */
.rv{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

section{padding:90px 0}
.band{background:var(--mist)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--slate);margin-bottom:10px}
h2{font-size:clamp(28px,4vw,44px);line-height:1.2;font-weight:600;letter-spacing:-.015em}

/* ===== page hero ===== */
.phero{padding:150px 0 70px;text-align:center}
.phero .eyebrow{opacity:0;animation:up 1s var(--ease) .1s forwards}
.phero h1{font-size:clamp(48px,9vw,112px);line-height:1.05;font-weight:600;letter-spacing:-.03em;opacity:0;animation:up 1.1s var(--ease) .25s forwards}
@keyframes up{from{opacity:0;transform:translateY(30px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}

/* ===== concerns ===== */
.fill{font-size:clamp(26px,4.2vw,52px);line-height:1.3;font-weight:600;letter-spacing:-.02em;text-align:center;word-break:keep-all;overflow-wrap:anywhere;margin:0 auto 56px;max-width:900px}
.fill span{display:block;width:fit-content;margin:0 auto;color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(90deg,var(--ink) calc(var(--f,-.06)*100% - 6%),#cfcfd4 calc(var(--f,-.06)*100% + 6%))}
.cn-layout{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
.cn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cn{background:var(--white);border-radius:0;padding:30px 28px;display:flex;flex-direction:column;gap:22px;min-height:210px;transition:transform .4s var(--ease)}
.cn.sc{opacity:0;transform:translateY(46px) scale(.96);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.cn.sc.show{opacity:var(--o,1);transform:translateY(var(--y,0)) scale(var(--s,1))}
.cn-ico{width:52px;height:52px;border-radius:50%;background:var(--mist);display:grid;place-items:center;color:var(--blue);transition:background .3s,color .3s}
.cn:hover .cn-ico{background:var(--blue);color:#fff}
.cn-ico svg{width:24px;height:24px}
.cn p{font-size:19px;line-height:1.5;color:var(--slate)}
.cn p strong{display:block;color:var(--ink);font-weight:600;font-size:22px;line-height:1.35;margin-top:2px}
.cn-side{position:sticky;top:96px}
.stage{background:var(--white);border-radius:0;display:flex;align-items:flex-end;justify-content:center;height:min(640px,80vh);overflow:hidden}
.fpw{display:block;height:94%;width:auto;aspect-ratio:540/960;mix-blend-mode:multiply;filter:brightness(1.015) contrast(1.03);transform:translateY(var(--ty,30px));transition:transform .2s linear}

.bridge{margin-top:28px;background:var(--white);border-radius:0;padding:44px 36px;text-align:center}
.bridge p{font-size:clamp(20px,2.4vw,30px);line-height:1.55;font-weight:500;color:var(--slate)}
.bridge p strong{color:var(--ink);font-weight:600;position:relative}
.bridge p strong::after{content:"";position:absolute;left:0;bottom:-.08em;height:.12em;width:100%;background:var(--blue);border-radius:0;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .4s}
.bridge.in p strong::after{transform:scaleX(1)}

/* ===== reasons ===== */
.head{text-align:center;max-width:980px;margin:0 auto}.head h2{font-size:clamp(24px,3.5vw,40px);line-height:1.3;margin:10px 0 18px;letter-spacing:-.01em}.head p.t{font-size:16px;line-height:1.9;color:#6e6e73;margin:0}
.reasons-head{text-align:center;margin-bottom:56px}
.mlist{border-top:1px solid var(--hair);max-width:1000px;margin:0 auto}
.mrow{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:44px 4px;border-bottom:1px solid var(--hair);align-items:start}
.mnum{font-size:clamp(64px,9vw,112px);line-height:.9;font-weight:600;letter-spacing:-.04em;color:var(--hair);transition:color .9s var(--ease) .15s}
.mrow.in .mnum{color:var(--ink)}
.mrow h3{font-size:clamp(22px,2.6vw,32px);line-height:1.3;font-weight:600;letter-spacing:-.01em}
.mrow p{margin-top:14px;font-size:19px;line-height:1.7;color:var(--slate)}

/* ===== final CTA ===== */
.cta{background:var(--mist);border-radius:0;text-align:center;padding:72px 28px;display:flex;flex-direction:column;align-items:center;gap:20px}
.cta h2{font-size:clamp(26px,4vw,44px)}
.cta p{font-size:clamp(17px,1.8vw,22px);color:var(--slate)}
.cta .pill{margin-top:12px}

footer{background:var(--mist);color:var(--slate);padding:48px 0 28px;font-size:12px;margin-top:0}
.fgrid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--hair)}
.fgrid .name{color:var(--ink);font-weight:600;font-size:14px}
.fgrid p{margin-top:8px;line-height:1.8}
.fgrid ul{list-style:none;columns:2;column-gap:48px}
.fgrid li a{display:block;padding:4px 0;color:var(--ink)}
.fgrid li a:hover{text-decoration:underline}
.copy{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px}
.fab{position:fixed;right:20px;bottom:20px;z-index:40;padding:12px 20px;font-size:14px}

@media(max-width:1100px){.menu{display:none}.cn-layout{grid-template-columns:1fr 280px}}
@media(max-width:860px){
  section{padding:64px 0}
  .phero{padding:110px 0 40px}
  .cn-layout{grid-template-columns:1fr}
  .cn-side{position:relative;top:0;order:-1}
  .stage{height:420px}
  .cn-grid{grid-template-columns:1fr 1fr;gap:12px}
  .cn{padding:22px 18px;min-height:0;gap:16px;border-radius:0}
  .cn p{font-size:15px}.cn p strong{font-size:17px}
  .mrow{grid-template-columns:70px 1fr;padding:30px 2px}
  .mrow p{font-size:16px}
  .acts .pill-out{display:none}
  .fab{left:16px;right:16px;text-align:center}
}
@media(max-width:480px){.cn-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.rv,.phero .eyebrow,.phero h1{opacity:1;transform:none;animation:none;transition:none}.fill span{--f:1.06!important}.fpw{transform:none!important}.cn.sc{opacity:1;transform:none}}

.st4{background:var(--mist);padding:0 0 40px}
.st4 .fcard{position:sticky;top:var(--top,84px);display:flex;flex-direction:column;height:min(620px,78vh);min-height:440px;margin-bottom:75vh;background:#fff;border-radius:0;padding:40px 44px 0;overflow:hidden;transform:scale(var(--s,1));transform-origin:50% 0;will-change:transform;box-shadow:0 -1px 0 rgba(0,0,0,.04);color:inherit;text-decoration:none}
.st4 .fcard:last-child{margin-bottom:0}
.st4 .fhold{height:24vh}
.st4 .fcard:nth-last-child(2){margin-bottom:0}
.st4 .fcard .en{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--slate);margin:0}
.st4 .fcard h3{font-size:clamp(30px,4.4vw,48px);line-height:1.1;font-weight:600;margin:10px 0 0;letter-spacing:-.015em;color:var(--ink)}
.st4 .fcard .media{flex:1;min-height:0;margin:30px -44px 0;overflow:hidden;border-radius:0;clip-path:inset(18% 6% 0 6% round 0 20px 0 0);transition:clip-path 1.2s cubic-bezier(.22,1,.36,1) .2s}
.st4 .fcard.in .media{clip-path:inset(0 0 0 0 round 0 20px 0 0)}
.st4 .fcard .media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.14);transition:transform 1.8s cubic-bezier(.22,1,.36,1) .2s}
.st4 .fcard.in .media img{transform:scale(1)}
.st4 .fcard:hover .media img{transform:scale(1.04);transition-delay:0s;transition-duration:1.2s}
.st4 .fcard .plus{position:absolute;right:28px;top:28px;width:40px;height:40px;border-radius:50%;background:var(--mist);display:grid;place-items:center;font-size:22px;line-height:1;transition:transform .35s,background .2s,color .2s}
.st4 .fcard:hover .plus{transform:rotate(90deg);background:var(--ink);color:#fff}
@media(max-width:760px){.st4 .fcard{padding:28px 24px 0;border-radius:0;height:min(520px,74vh)}.st4 .fcard .media{margin:20px -24px 0}}
@media(prefers-reduced-motion:reduce){.st4 .fhold{display:none}.st4 .fcard{position:relative;top:auto;margin-bottom:28px;transform:none}.st4 .fcard::after{display:none}.st4 .fcard .en,.st4 .fcard h3{opacity:1;transform:none;transition:none}.st4 .fcard .media{clip-path:none}.st4 .fcard .media img{transform:none}}