*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:#FAFAF8;color:#1B2A4A;overflow-x:hidden;-webkit-font-smoothing:antialiased}

:root{
  --navy:#1B2A4A;
  --navy2:#253860;
  --sun:#FAC800;
  --sun-lt:#FFF8D6;
  --bg:#FAFAF8;
  --bg2:#F2F0EB;
  --border:rgba(27,42,74,.1);
}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:20px 56px;transition:all .35s}
nav.sc{background:rgba(250,250,248,.96);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--border)}
.nav-logo{text-decoration:none;display:flex;align-items:center}
.nav-logo img{height:36px;width:auto}
.nav-logo img.dark{display:none}
nav.sc .nav-logo img.white{display:none}
nav.sc .nav-logo img.dark{display:block}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{font-size:.75rem;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.7);text-decoration:none;transition:color .25s}
nav.sc .nav-links a{color:rgba(27,42,74,.55)}
.nav-links a:hover{color:#fff}
nav.sc .nav-links a:hover{color:var(--navy)}
.nav-cta{font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--navy);background:var(--sun);text-decoration:none;padding:10px 22px;border-radius:4px;transition:transform .25s,box-shadow .25s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(250,200,0,.35)}

/* ── HERO ── */
#hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:120px 56px 100px;text-align:center;background:var(--navy)}
.hero-blob1{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(250,200,0,.14) 0%,transparent 70%);top:-100px;right:-120px;pointer-events:none;animation:b1 9s ease-in-out infinite}
.hero-blob2{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(250,200,0,.08) 0%,transparent 70%);bottom:-60px;left:-80px;pointer-events:none;animation:b2 11s ease-in-out infinite}
@keyframes b1{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.1) translate(-20px,18px)}}
@keyframes b2{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.08) translate(14px,-12px)}}
.hero-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px);background-size:32px 32px}

.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:28px}

/* ロゴ */
.hero-logo-wrap{opacity:0;transform:translateY(-14px) scale(.9);transition:opacity .7s ease,transform .7s cubic-bezier(.34,1.3,.64,1)}
.hero-logo-wrap.show{opacity:1;transform:translateY(0) scale(1)}
.hero-logo-wrap img{width:clamp(80px,11vw,120px);height:auto}

/* Three Ps scatter text */
.scatter-title{font-size:clamp(52px,11vw,112px);font-weight:800;letter-spacing:-.02em;line-height:1;display:flex;align-items:center;color:#fff}
.sc-letter{display:inline-block;will-change:transform}
.sc-space{display:inline-block;width:.28em}
.sc-p{color:var(--sun)}
.sc-letter.fly{opacity:0 !important;transform:translate(var(--tx),var(--ty)) rotate(var(--tr)) scale(.3) !important}
.sc-letter.land{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}
.sc-letter.float{animation:scFloat var(--fd,3s) ease-in-out infinite var(--fdelay,0s);opacity:1}
@keyframes scFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(var(--fy,-8px)) rotate(var(--fr,1deg))}}

/* pill */
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(250,200,0,.12);border:1.5px solid rgba(250,200,0,.35);border-radius:999px;padding:6px 18px;font-size:.72rem;font-weight:600;letter-spacing:.1em;color:var(--sun);opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.hero-pill.show{opacity:1;transform:translateY(0)}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--sun);animation:pd 1.8s ease-in-out infinite}
@keyframes pd{0%,100%{transform:scale(1)}50%{transform:scale(1.6)}}

/* sub */
.hero-sub{font-family:'Noto Serif JP',serif;font-size:clamp(12px,1.6vw,15px);font-weight:300;letter-spacing:.18em;color:rgba(255,255,255,.42);opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.hero-sub.show{opacity:1;transform:translateY(0)}

/* CTA */
.hero-cta-wrap{display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.hero-cta-wrap.show{opacity:1;transform:translateY(0)}
.btn-primary{display:inline-flex;align-items:center;gap:12px;background:var(--sun);color:var(--navy);text-decoration:none;font-size:.84rem;font-weight:800;letter-spacing:.06em;padding:16px 36px;border-radius:6px;transition:transform .25s,box-shadow .25s}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(250,200,0,.4)}
.btn-primary svg{transition:transform .3s}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.5);text-decoration:none;font-size:.78rem;font-weight:500;transition:color .25s}
.btn-ghost:hover{color:#fff}

/* scroll */
.hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;animation:fadeUp .7s ease forwards 4s}
.hero-scroll span{font-size:.58rem;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.28)}
.sc-line{width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--sun));animation:scAnim 2s ease-in-out infinite 4.5s}
@keyframes scAnim{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fadeUp{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ── MARQUEE ── */
.mqsec{padding:22px 0;overflow:hidden;background:var(--sun)}
.mqtrack{display:flex;animation:mqS 22s linear infinite;white-space:nowrap}
.mqtrack:hover{animation-play-state:paused}
.mqitem{display:inline-flex;align-items:center;gap:20px;padding:0 24px;font-size:.72rem;font-weight:700;letter-spacing:.15em;color:rgba(27,42,74,.65);flex-shrink:0}
.mqdot{width:4px;height:4px;border-radius:50%;background:var(--navy);flex-shrink:0;opacity:.5}
@keyframes mqS{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── COMMON ── */
.sec{padding:100px 56px}
.sec-in{max-width:1080px;margin:0 auto}
.sec-tag{display:inline-flex;align-items:center;gap:8px;background:var(--sun-lt);border-radius:999px;padding:5px 14px;font-size:.68rem;font-weight:700;letter-spacing:.14em;color:#A07800;text-transform:uppercase;margin-bottom:24px;border:1px solid rgba(250,200,0,.3)}
.sec-h{font-family:'Noto Serif JP',serif;font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:400;line-height:1.55;letter-spacing:.04em;color:var(--navy)}
.sec-lead{font-size:.95rem;color:rgba(27,42,74,.55);line-height:2;letter-spacing:.03em;margin-top:16px}

/* REVEAL */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}

/* ── THREE PS ── */
#three-ps{background:#fff;border-bottom:1px solid var(--border)}
.ps-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.ps-card{padding:40px 32px;border-radius:12px;border:1.5px solid var(--border);background:#fff;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;cursor:default}
.ps-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(27,42,74,.1);border-color:var(--sun)}
.ps-card-top{position:absolute;top:0;left:0;right:0;height:4px;border-radius:12px 12px 0 0}
.pc1 .ps-card-top{background:linear-gradient(90deg,var(--navy),var(--navy2))}
.pc2 .ps-card-top{background:linear-gradient(90deg,var(--sun),#ffd940)}
.pc3 .ps-card-top{background:linear-gradient(90deg,#3D7A5E,#5aaa80)}
.ps-en{font-size:3rem;font-weight:800;letter-spacing:-.02em;line-height:1;margin-bottom:18px;color:rgba(27,42,74,.08)}
.ps-ic{margin-bottom:14px;display:block}
.ps-title{font-size:1.25rem;font-weight:800;letter-spacing:.03em;color:var(--navy);margin-bottom:4px}
.ps-sub{font-size:.7rem;font-weight:500;color:rgba(27,42,74,.38);letter-spacing:.1em;margin-bottom:14px}
.ps-desc{font-size:.8rem;color:rgba(27,42,74,.58);line-height:1.9}

/* ── CATCHCOPY ── */
#catchcopy{background:var(--navy);padding:100px 56px;text-align:center;position:relative;overflow:hidden}
.cc-bg{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(250,200,0,.07) 1px,transparent 1px);background-size:40px 40px}
.cc-in{max-width:800px;margin:0 auto;position:relative;z-index:1}
.cc-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(250,200,0,.12);border-radius:999px;padding:5px 16px;font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--sun);text-transform:uppercase;margin-bottom:32px;border:1px solid rgba(250,200,0,.25)}
.cc-copy{font-family:'Noto Serif JP',serif;font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:300;line-height:1.65;letter-spacing:.06em;color:#fff;margin-bottom:20px}
.cc-copy em{font-style:normal;color:var(--sun)}
.cc-sub{font-size:1rem;font-weight:300;color:rgba(255,255,255,.4);letter-spacing:.1em;font-family:'Noto Serif JP',serif}

/* ── DIFFERENCE ── */
#difference{background:var(--bg2)}
.diff-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;margin:40px 0 52px;border-radius:12px;overflow:hidden;border:1.5px solid var(--border)}
.diff-col{padding:36px 32px}
.diff-col.bad{background:#fff}
.diff-col.good{background:var(--navy)}
.diff-col-lbl{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.diff-col.bad .diff-col-lbl{color:rgba(27,42,74,.35)}
.diff-col.good .diff-col-lbl{color:var(--sun)}
.diff-col-lbl-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.diff-col-title{font-family:'Noto Serif JP',serif;font-size:1.1rem;font-weight:400;line-height:1.6;letter-spacing:.04em;margin-bottom:20px}
.diff-col.bad .diff-col-title{color:rgba(27,42,74,.42)}
.diff-col.good .diff-col-title{color:#fff}
.diff-items{display:flex;flex-direction:column;gap:10px}
.diff-item{display:flex;align-items:flex-start;gap:10px;font-size:.78rem;line-height:1.75}
.diff-col.bad .diff-item{color:rgba(27,42,74,.42)}
.diff-col.good .diff-item{color:rgba(255,255,255,.75)}
.di-mark{flex-shrink:0;margin-top:3px;font-size:.7rem;font-weight:700}
.diff-col.bad .di-mark{color:rgba(27,42,74,.25)}
.diff-col.good .di-mark{color:var(--sun)}
.diff-vs{display:flex;align-items:center;justify-content:center;padding:0 20px;background:#fff;border-left:1.5px solid var(--border);border-right:1.5px solid var(--border)}
.diff-vs-badge{width:40px;height:40px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:rgba(27,42,74,.32)}
.diff-flow-lbl{font-size:.68rem;font-weight:700;letter-spacing:.2em;color:#A07800;text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.diff-flow-lbl::before{content:'';width:16px;height:2px;background:var(--sun);border-radius:2px}
.diff-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:10px;overflow:hidden;border:1.5px solid var(--border);position:relative}
.df-step{background:#fff;padding:28px 22px;position:relative;transition:background .3s;cursor:default}
.df-step:hover{background:#FFFCF0}
.df-step::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1.5px;background:var(--border)}
.df-step:last-child::after{display:none}
.df-arrow{position:absolute;top:50%;right:-10px;transform:translateY(-50%);z-index:2;background:#fff;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:rgba(27,42,74,.3)}
.df-step:last-child .df-arrow{display:none}
.df-num{font-size:.62rem;font-weight:800;letter-spacing:.18em;color:#A07800;margin-bottom:10px}
.df-title{font-family:'Noto Serif JP',serif;font-size:.9rem;font-weight:400;letter-spacing:.04em;color:var(--navy);margin-bottom:8px}
.df-desc{font-size:.71rem;color:rgba(27,42,74,.5);line-height:1.8}
.diff-flow-line{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sun),rgba(250,200,0,.15));transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.diff-flow-line.on{transform:scaleX(1)}

/* ── SERVICES ── */
#services{background:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.svc-card{background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:28px;display:flex;gap:20px;align-items:flex-start;transition:transform .25s,box-shadow .25s,border-color .3s}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(27,42,74,.09);border-color:var(--sun)}
.svc-ic-wrap{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--sun-lt)}
.svc-ic-wrap svg{color:#A07800}
.svc-num{font-size:.62rem;font-weight:800;letter-spacing:.18em;color:#A07800;margin-bottom:6px}
.svc-title{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:6px;letter-spacing:.02em}
.svc-desc{font-size:.76rem;color:rgba(27,42,74,.52);line-height:1.85}

/* ── FLOW ── */
#flow{background:var(--bg2)}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.flow-step{background:#fff;border-radius:10px;border:1.5px solid var(--border);padding:32px 24px;text-align:center;position:relative;transition:transform .3s,box-shadow .3s,border-color .3s}
.flow-step:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(27,42,74,.1);border-color:var(--sun)}
.flow-step-num{width:36px;height:36px;border-radius:50%;background:var(--sun-lt);color:#A07800;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.flow-icon{color:var(--navy);margin-bottom:12px;opacity:.6}
.flow-title{font-family:'Noto Serif JP',serif;font-size:.95rem;font-weight:400;color:var(--navy);margin-bottom:8px;letter-spacing:.04em}
.flow-desc{font-size:.72rem;color:rgba(27,42,74,.5);line-height:1.85}
.flow-arrow{position:absolute;top:50%;right:-20px;transform:translateY(-50%);color:rgba(27,42,74,.18);z-index:1}
.flow-step:last-child .flow-arrow{display:none}

/* ── TARGETS ── */
#targets{background:#fff}
.tgt-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;margin-top:48px;align-items:start}
.tgt-intro{font-family:'Noto Serif JP',serif;font-size:.98rem;font-weight:300;color:rgba(27,42,74,.58);line-height:2.3;letter-spacing:.04em}
.tgt-items{display:flex;flex-direction:column;gap:10px}
.tgt-item{display:flex;align-items:center;gap:16px;padding:18px 24px;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;transition:transform .25s,box-shadow .25s,border-color .3s}
.tgt-item:hover{transform:translateX(6px);border-color:var(--sun);box-shadow:0 4px 16px rgba(27,42,74,.08)}
.tgt-ic{width:36px;height:36px;border-radius:8px;background:var(--sun-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#A07800}
.tgt-name{font-size:.9rem;font-weight:600;color:var(--navy);flex:1}
.tgt-en{font-size:.68rem;font-weight:500;color:rgba(27,42,74,.3);letter-spacing:.12em}

/* ── MESSAGE ── */
#message{background:var(--bg2);position:relative;overflow:hidden}
.msg-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(60px,12vw,170px);font-weight:800;color:rgba(27,42,74,.04);white-space:nowrap;pointer-events:none;user-select:none;animation:bgFloat 8s ease-in-out infinite}
@keyframes bgFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-10px)}}
.msg-in{max-width:680px;margin:0 auto;text-align:center;position:relative;z-index:1}
.msg-q{font-size:4.5rem;font-weight:800;color:rgba(250,200,0,.25);line-height:.6;margin-bottom:36px;display:block}
.msg-txt{font-family:'Noto Serif JP',serif;font-size:clamp(.88rem,1.3vw,1rem);font-weight:300;color:rgba(27,42,74,.72);line-height:2.6;letter-spacing:.07em;margin-bottom:48px}
.msg-div{width:36px;height:2px;background:var(--sun);border-radius:2px;margin:0 auto 18px}
.msg-role{font-size:.68rem;font-weight:600;letter-spacing:.22em;color:rgba(27,42,74,.38);margin-bottom:8px;text-transform:uppercase}
.msg-name{font-family:'Noto Serif JP',serif;font-size:1.1rem;font-weight:400;letter-spacing:.15em;color:var(--navy)}

/* ── CTA ── */
#cta{background:var(--sun);position:relative;overflow:hidden}
.cta-pat{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(27,42,74,.08) 1px,transparent 1px);background-size:28px 28px}
.cta-in{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1}
.cta-lbl{font-size:.68rem;font-weight:700;letter-spacing:.3em;color:rgba(27,42,74,.45);margin-bottom:24px;display:block;text-transform:uppercase}
.cta-h{font-family:'Noto Serif JP',serif;font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:400;color:var(--navy);line-height:1.6;letter-spacing:.06em;margin-bottom:18px}
.cta-sub{font-size:.85rem;color:rgba(27,42,74,.6);line-height:2;letter-spacing:.04em;margin-bottom:48px}
.btn-cta{display:inline-flex;align-items:center;gap:16px;background:var(--navy);color:#fff;text-decoration:none;font-size:.85rem;font-weight:700;letter-spacing:.08em;padding:20px 52px;border-radius:6px;transition:transform .3s,box-shadow .3s}
.btn-cta:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(27,42,74,.3)}
.btn-cta svg{transition:transform .3s}
.btn-cta:hover svg{transform:translateX(5px)}
.cta-note{font-size:.72rem;color:rgba(27,42,74,.42);margin-top:16px;letter-spacing:.04em}


/* ── COMPANY ── */
#company{background:var(--bg2);position:relative;overflow:hidden}
.company-table{margin-top:40px;border:1.5px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.co-row{display:flex;align-items:stretch;border-bottom:1.5px solid var(--border)}
.co-row:last-child{border-bottom:none}
.co-label{width:160px;flex-shrink:0;padding:24px 28px;font-size:.75rem;font-weight:700;letter-spacing:.1em;color:#A07800;background:var(--sun-lt);display:flex;align-items:center;border-right:1.5px solid var(--border)}
.co-val{padding:24px 32px;font-size:.95rem;font-weight:500;color:var(--navy);display:flex;align-items:center;letter-spacing:.03em}
@media(max-width:600px){
  .co-row{flex-direction:column}
  .co-label{width:100%;border-right:none;border-bottom:1.5px solid var(--border);padding:14px 20px}
  .co-val{padding:16px 20px}
}

/* ── FOOTER ── */
footer{background:var(--navy);padding:48px 56px;display:flex;justify-content:space-between;align-items:center}
.ft-logo img{height:36px;width:auto}
.ft-copy{font-size:.7rem;color:rgba(255,255,255,.25);letter-spacing:.08em}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav{padding:18px 24px}
  .nav-links{display:none}
  .sec{padding:72px 24px}
  #hero{padding:110px 24px 90px}
  #catchcopy{padding:72px 24px}
  .ps-cards{grid-template-columns:1fr;gap:14px}
  .diff-compare{grid-template-columns:1fr}
  .diff-vs{padding:12px 0;border-left:none;border-right:none;border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border)}
  .diff-flow{grid-template-columns:1fr 1fr}
  .flow-steps{grid-template-columns:1fr 1fr;gap:12px}
  .flow-arrow{display:none}
  .svc-grid{grid-template-columns:1fr}
  .tgt-grid{grid-template-columns:1fr;gap:32px}
  footer{flex-direction:column;gap:16px;text-align:center;padding:36px 24px}
}