:root{
  --blue:#1a5fd6;
  --blue-dark:#0e3f9c;
  --blue-soft:#eaf1fc;
  --blue-soft2:#f2f7fe;
  --ink:#1b2433;
  --gray:#5b6677;
  --line:#e4e9f1;
  --bg:#ffffff;
  --bg-soft:#f6f9fd;
  --radius:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.blue{color:var(--blue)}

/* placeholders for photos */
.ph{background:linear-gradient(135deg,#dbe6f7,#eef3fb);border-radius:14px;position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),transparent 60%)}
.ph-circle{border-radius:50%}
.ph-person{background:linear-gradient(135deg,#cdd9ee,#e9f0fa)}

/* section label */
.label{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--blue);margin-bottom:14px}
.label .num{font-family:'Montserrat',sans-serif;font-weight:800}
.sec{padding:74px 0}
.sec h2{font-size:30px;font-weight:900;letter-spacing:.01em;line-height:1.4;margin-bottom:30px}
@media(max-width:720px){.sec h2{font-size:24px}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:13px 22px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;transition:.22s var(--ease)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(26,95,214,.28)}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(26,95,214,.34)}
.btn-outline{background:#fff;color:var(--blue);border-color:#cdd9ef}
.btn-outline:hover{border-color:var(--blue);background:var(--blue-soft2);transform:translateY(-2px)}
.btn svg{width:16px;height:16px}

/* badges */
.badges{display:flex;gap:12px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#41506b;background:#fff;border:1px solid var(--line);padding:9px 14px;border-radius:30px;box-shadow:0 2px 6px rgba(20,40,80,.04);transition:.22s var(--ease)}
.badge:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(20,40,80,.1)}
.badge svg{width:15px;height:15px;color:var(--blue)}

/* ===== HEADER ===== */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.scrolled{box-shadow:0 4px 18px rgba(20,40,80,.07)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;max-width:1280px;margin:0 auto}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:19px}
.logo img{height:60px;width:auto;display:block}
.logo .mark{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--blue);display:grid;place-items:center;color:var(--blue);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;letter-spacing:.02em}
.nav-links{display:flex;gap:22px;font-size:13.5px;font-weight:500;color:#46506a}
.nav-links a{position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--blue);transition:width .25s var(--ease)}
.nav-links a:hover{color:var(--blue)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;gap:10px}
.nav-cta .btn{padding:9px 15px;font-size:12.5px}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:6px;margin:-6px;color:var(--ink)}
.menu-btn svg{width:30px;height:30px;display:block}
@media(max-width:1000px){.nav-links{display:none}.nav-cta{display:none}.menu-btn{display:block}}

/* =========================================================
   HERO (KV)
   ========================================================= */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#ffffff 0%,#eef5ff 58%,#e6f0ff 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(45% 38% at 80% 58%, rgba(150,190,250,.25), transparent 70%),
  radial-gradient(40% 30% at 12% 88%, rgba(150,190,250,.18), transparent 72%)}
/* 幅は1280pxまでフル活用（1280超は中央寄せ）。高さは低めに抑え13インチに収める */
.hero-stage{position:relative;width:min(1280px,100%);margin:0 auto;aspect-ratio:1280/824;container-type:inline-size;overflow:hidden}

/* big background wordmark */
.bgword{position:absolute;top:14.5%;left:max(6px,1.6vw);z-index:2;font-family:'Anton',sans-serif;font-weight:400;font-size:min(14.6cqw,210px);line-height:.92;letter-spacing:.005em;color:#0e1726;white-space:nowrap}

/* headline */
.hero-head{position:absolute;top:2%;left:max(18px,3vw);z-index:6}
.hero-head h1{font-size:min(4.7cqw,70px);font-weight:900;line-height:1.13;letter-spacing:.01em}
.hero-head .hot{position:relative;color:var(--blue)}
.hero-head .hot .swoosh{position:absolute;left:-8%;bottom:-.16em;width:120%;height:.42em;color:var(--blue);overflow:visible}
.hero-head .en{font-size:min(1.55cqw,23px);font-weight:800;color:var(--blue);margin-top:.5em;letter-spacing:.01em}

/* copy block (below wordmark) */
.hero-copy{position:absolute;top:45%;left:max(18px,3vw);width:min(44cqw,620px);z-index:6}
.hero-copy .prod{font-size:min(1.74cqw,21px);font-weight:700;margin-bottom:8px}
.hero-copy .lead{font-size:min(1.08cqw,15.5px);color:#46536b;margin-bottom:20px}
.hero-copy .badges{gap:12px;margin-bottom:20px}
.hero-copy .badge{font-size:min(.92cqw,13px);padding:min(.65cqw,9px) min(1cqw,14px);gap:7px;border-radius:30px}
.hero-copy .badge svg{width:min(1.1cqw,15px);height:min(1.1cqw,15px)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-copy .hero-cta{gap:12px}
.hero-copy .hero-cta .btn{font-size:min(1.05cqw,15px);padding:min(1.05cqw,15px) min(1.6cqw,23px);border-radius:10px;gap:8px}
.hero-copy .hero-cta .btn svg{width:min(1.25cqw,17px);height:min(1.25cqw,17px)}

/* background ribbon flow + geometric shapes */
.hero-flow{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

/* collage photos */
.collage .pc{position:absolute;z-index:3;margin:0;overflow:hidden;border-radius:min(1.5cqw,20px);border:3px solid #fff;box-shadow:0 22px 44px rgba(20,45,90,.17);background:linear-gradient(150deg,#dcebfb 0%,#eff6ff 100%);aspect-ratio:4/3}
.collage .pc::before{content:"";position:absolute;inset:0;background:center/34% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b6cdee'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4 21c0-4.6 4-7 8-7s8 2.4 8 7z'/%3E%3C/svg%3E");opacity:.85}
.collage .pc img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.pc1{top:11%;right:8%;width:min(15cqw,214px);transform:rotate(-5deg)}
.pc2{top:26%;right:.5%;width:min(12cqw,172px);aspect-ratio:5/6;transform:rotate(5deg)}
.pc3{top:41%;right:2.5%;width:min(18cqw,258px);aspect-ratio:3/2;transform:rotate(-3deg)}
.pc4{top:63%;right:5.5%;width:min(14.5cqw,208px);transform:rotate(4deg)}
.pc5{bottom:3%;right:1%;width:min(11.5cqw,165px);aspect-ratio:1/1;transform:rotate(-5deg)}
.pc6{bottom:-1%;left:-1%;width:min(17cqw,244px);aspect-ratio:3/2;transform:rotate(2deg)}
.pc7{bottom:-3%;left:17%;width:min(13cqw,186px);transform:rotate(-3deg)}

/* phone (tilted + floating) */
.phone{position:absolute;top:35%;left:44%;z-index:7;width:min(21.5cqw,310px);aspect-ratio:300/620;background:#0c1730;border-radius:min(3.2cqw,32px);padding:min(.55cqw,7px);box-shadow:-26px 46px 82px rgba(12,35,80,.3);container-type:inline-size;transform:rotate(7deg)}
.phone-img{position:absolute;top:21%;left:42%;z-index:7;width:min(32cqw,438px);height:auto;transform:rotate(5deg);animation:fadeIn .9s var(--ease) .3s both,floatImg 6.5s ease-in-out 1.3s infinite}
@keyframes floatImg{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-12px)}}
.phone-screen{background:#f7f9fc;border-radius:2.7cqw;height:100%;overflow:hidden;position:relative;display:flex;flex-direction:column}
.ps-body{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.ps-status{display:flex;justify-content:space-between;align-items:center;padding:3.4cqw 5cqw 1cqw;font-size:3.4cqw;font-weight:700;color:#0c1730}
.ps-status svg{height:3cqw;width:auto;color:#0c1730}
.ps-appbar{display:flex;justify-content:space-between;align-items:center;padding:.5cqw 5cqw 1.5cqw}
.ps-brand{display:flex;align-items:center;gap:1.4cqw;font-size:3.5cqw;font-weight:800}
.ps-brand .m{width:5.4cqw;height:5.4cqw;border-radius:50%;border:.9cqw solid var(--blue);color:var(--blue);display:grid;place-items:center;font-size:2.4cqw;font-weight:800;font-family:'Montserrat',sans-serif}
.ps-appbar .bell{width:4.2cqw;height:4.2cqw;color:#46536b}
.ps-hero{padding:1cqw 5cqw 0;font-size:5cqw;font-weight:800;line-height:1.32;color:#10203c}
.ps-sub{padding:1.3cqw 5cqw 0;font-size:2.9cqw;color:#5b6677}
.ps-search{margin:3cqw 5cqw;background:#fff;border:1px solid #e4e9f1;border-radius:3cqw;padding:2.7cqw 3cqw;display:flex;align-items:center;gap:2cqw;font-size:2.8cqw;color:#9aa6b8}
.ps-search svg{width:3.4cqw;height:3.4cqw}
.ps-row{display:flex;justify-content:space-between;align-items:center;padding:1.2cqw 5cqw .6cqw;font-size:3.2cqw;font-weight:700}
.ps-row .more{font-size:2.6cqw;color:var(--blue);font-weight:700}
.ps-ob{margin:1.4cqw 5cqw;background:#fff;border:1px solid #e9eef5;border-radius:3.5cqw;padding:3cqw;display:flex;gap:3cqw;box-shadow:0 2cqw 4cqw rgba(20,45,90,.06)}
.ps-ob .av{width:13cqw;height:13cqw;border-radius:3cqw;flex:none;object-fit:cover;background:#dfe7f3}
.ps-ob-name{font-size:3.5cqw;font-weight:800}
.ps-ob-meta{font-size:2.5cqw;color:#5b6677;line-height:1.45;margin:.5cqw 0 1.4cqw}
.ps-ob-line{display:flex;align-items:center;gap:2.2cqw;margin-bottom:2cqw}
.ps-cert{font-size:2.4cqw;font-weight:700;color:#fff;background:var(--blue);padding:.8cqw 2cqw;border-radius:2cqw}
.ps-star{font-size:2.8cqw;font-weight:700;color:#f5a623}
.ps-star small{color:#9aa6b8;font-weight:500}
.ps-tags{display:flex;gap:1.6cqw;flex-wrap:wrap}
.ps-tags span{font-size:2.4cqw;color:#4a73c4;background:#eef4fd;padding:1cqw 2.2cqw;border-radius:1.8cqw}
.ps-match{margin:1.4cqw 5cqw;background:#fff;border:1px solid #e9eef5;border-radius:3.5cqw;padding:2.7cqw 3cqw;display:flex;align-items:center;gap:2.6cqw}
.ps-match .av{width:9cqw;height:9cqw;border-radius:50%;flex:none;object-fit:cover;background:#dfe7f3}
.ps-m-t{font-size:3cqw;font-weight:700}
.ps-m-d{font-size:2.5cqw;color:#5b6677}
.ps-match .arr{margin-left:auto;color:#b9c4d6;font-size:4.4cqw;font-weight:700}
.ps-nav{margin-top:auto;display:flex;justify-content:space-around;align-items:center;padding:2.4cqw 2cqw;border-top:1px solid #eef1f6;background:#fff}
.ps-nav span{font-size:2.1cqw;color:#9aa6b8;display:flex;flex-direction:column;align-items:center;gap:.7cqw;font-weight:600}
.ps-nav span svg{width:4.4cqw;height:4.4cqw}
.ps-nav .on{color:var(--blue)}

/* hero mobile fallback */
@media(max-width:860px){
  .hero-stage{aspect-ratio:auto;height:auto;display:block;padding:18px 24px 40px;container-type:normal}
  .hero-head{position:static}
  .hero-head h1{font-size:34px}
  .hero-head .hot .swoosh{left:-9%;bottom:-7px;width:122%;height:20px}
  .hero-head .en{font-size:16px;margin-top:6px}
  .bgword{position:static;font-size:17vw;line-height:.92;white-space:normal;margin:12px 0 4px;letter-spacing:.01em}
  .hero-copy{position:static;width:100%;margin-top:10px}
  .hero-copy .prod{font-size:14px;margin-bottom:6px}
  .hero-copy .lead{font-size:13px;margin-bottom:18px}
  .hero-copy .badges{gap:10px;margin-bottom:18px}
  .hero-copy .badge{font-size:12.5px;padding:9px 14px;gap:6px;border-radius:30px}
  .hero-copy .badge svg{width:14px;height:14px}
  .hero-copy .hero-cta{flex-direction:column;gap:12px;align-items:stretch}
  .hero-copy .hero-cta .btn{width:100%;font-size:15px;padding:15px 20px;border-radius:12px;gap:10px;justify-content:flex-start}
  .hero-copy .hero-cta .btn svg{width:18px;height:18px}
  /* mobile visual: phone centered + photos around + flow */
  .collage{display:block;position:relative;width:100%;height:clamp(450px,124vw,580px);margin-top:30px}
  .hero-flow{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1}
  .collage .pc{border-width:3px;box-shadow:0 12px 26px rgba(20,45,90,.16);border-radius:14px}
  .pc1{top:21%;left:0;right:auto;bottom:auto;width:31%;aspect-ratio:4/3;transform:rotate(-3deg)}
  .pc2{top:0;right:0;left:auto;bottom:auto;width:33%;aspect-ratio:4/5;transform:rotate(3deg)}
  .pc3{top:49%;left:0;right:auto;bottom:auto;width:31%;aspect-ratio:4/3;transform:rotate(-3deg)}
  .pc4{top:35%;right:0;left:auto;bottom:auto;width:31%;aspect-ratio:4/3;transform:rotate(3deg)}
  .pc5{bottom:0;right:1%;left:auto;top:auto;width:30%;aspect-ratio:4/3;transform:rotate(-3deg)}
  .pc6{display:none}
  .pc7{bottom:0;left:1%;right:auto;top:auto;width:30%;aspect-ratio:4/3;transform:rotate(3deg)}
  .phone-img{position:absolute;top:2%;left:50%;right:auto;transform:translateX(-50%);width:70%;max-width:330px;animation:fadeIn .7s var(--ease) both}
}
@media(max-width:420px){.hero-head h1{font-size:29px}.bgword{font-size:18.5vw}}

/* ===== PROBLEM ===== */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.prob{padding:6px;border-radius:14px;transition:transform .25s var(--ease)}
.prob:hover{transform:translateY(-4px)}
.prob h3{font-size:16px;font-weight:700;margin:14px 0 8px}
.prob p{font-size:13px;color:var(--gray)}
.icon-lg{width:46px;height:46px;color:var(--blue)}
.icon-lg svg{width:46px;height:46px;stroke-width:1.3}
@media(max-width:860px){.grid4{grid-template-columns:repeat(2,1fr);gap:30px 22px}}
@media(max-width:480px){.grid4{grid-template-columns:1fr}}

/* ===== SOLUTION ===== */
.sol-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.sol-list{margin-top:6px}
.sol-item{display:flex;gap:13px;margin-bottom:22px}
.sol-item .ck{width:24px;height:24px;flex:none;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;margin-top:2px}
.sol-item .ck svg{width:14px;height:14px}
.sol-item h4{font-size:16px;font-weight:700;margin-bottom:3px}
.sol-item p{font-size:13px;color:var(--gray)}
.sol-visual{display:flex;align-items:center;gap:18px}
.profile-card{flex:1;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 14px 34px rgba(20,40,80,.08)}
.pc-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.pc-head .av{width:54px;height:54px;flex:none}
.pc-head .nm{font-size:15px;font-weight:700}
.pc-head .ro{font-size:11.5px;color:var(--gray)}
.pc-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pc-badges span{font-size:10px;font-weight:700;color:var(--blue);background:var(--blue-soft);padding:4px 9px;border-radius:20px}
.pc-sub{font-size:11px;font-weight:700;color:#36507e;margin-bottom:5px}
.pc-text{font-size:11.5px;color:var(--gray);margin-bottom:13px}
.pc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.pc-tags span{font-size:10.5px;color:#4a73c4;background:#eef4fd;padding:3px 8px;border-radius:6px}
.pc-list{font-size:11px;color:var(--gray);padding-left:2px}
.pc-list li{list-style:none;margin-bottom:3px;padding-left:12px;position:relative}
.pc-list li::before{content:"・";position:absolute;left:0;color:var(--blue)}
.shield-side{text-align:center;flex:none;width:120px}
.shield-side .shield{width:84px;height:84px;margin:0 auto 10px;border-radius:50%;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue)}
.shield-side .shield svg{width:42px;height:42px}
.shield-side p{font-size:12px;font-weight:700;color:#36507e}
@media(max-width:860px){.sol-grid{grid-template-columns:1fr;gap:34px}.sol-visual{flex-direction:column}.shield-side{order:-1}}

/* ===== FEATURES ===== */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat{border:1px solid var(--line);border-radius:16px;padding:26px 22px;background:#fff;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.feat:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(20,40,80,.1);border-color:#cfdcf3}
.feat .fi{width:46px;height:46px;color:var(--blue);margin-bottom:14px}
.feat .fi svg{width:46px;height:46px;stroke-width:1.3}
.feat h3{font-size:16.5px;font-weight:700;margin-bottom:8px}
.feat p{font-size:12.5px;color:var(--gray);margin-bottom:16px}
.benefit{font-size:13px;font-weight:700;color:var(--blue);background:var(--blue-soft2);border-radius:10px;padding:11px 14px}
.benefit small{display:block;font-size:9.5px;color:#8aa0c4;font-weight:700;letter-spacing:.08em;margin-bottom:2px}
@media(max-width:780px){.feat-grid{grid-template-columns:1fr}}

/* ===== HOW IT WORKS ===== */
.how-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.how-col .tab{display:inline-block;font-size:13px;font-weight:700;color:#fff;background:var(--blue);padding:7px 16px;border-radius:8px;margin-bottom:24px}
.how-col.alt .tab{color:#46506a;background:#eef2f8}
.steps{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.step{flex:1;text-align:center;position:relative}
.step .si{width:54px;height:54px;margin:0 auto 10px;border-radius:50%;border:1.5px solid #d4e0f3;color:var(--blue);display:grid;place-items:center;transition:.25s var(--ease)}
.step:hover .si{background:var(--blue);color:#fff;transform:translateY(-4px)}
.step .si svg{width:24px;height:24px}
.step .stnum{font-weight:700;font-size:13px}
.step .stnum b{color:var(--blue)}
.step h4{font-size:13px;font-weight:700;margin:2px 0 4px}
.step p{font-size:10.5px;color:var(--gray);line-height:1.5}
.step .arrow{position:absolute;top:24px;right:-12px;color:#c4d2ea}
.step:last-child .arrow{display:none}
@media(max-width:860px){.how-wrap{grid-template-columns:1fr;gap:36px}}

/* ===== TRUST ===== */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.trust-col{padding:22px 18px;border-right:1px solid var(--line)}
.trust-col:last-child{border-right:none}
.trust-col h3{font-size:13.5px;font-weight:700;color:var(--blue);margin-bottom:16px}
.flow-step{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px}
.flow-step .fs-ic{width:40px;height:40px;border:1.4px solid #d4e0f3;border-radius:10px;color:var(--blue);display:grid;place-items:center}
.flow-step .fs-ic svg{width:18px;height:18px}
.flow-step span{font-size:11px;font-weight:700;text-align:center}
.flow-step small{font-size:9.5px;color:var(--gray)}
.flow-arrow{text-align:center;color:#c4d2ea;font-size:12px;margin:1px 0}
.trust-list li{list-style:none;font-size:11.5px;color:#3f4a5d;display:flex;gap:6px;margin-bottom:10px}
.trust-list li svg{width:14px;height:14px;color:var(--blue);flex:none;margin-top:3px}
.trust-note{font-size:11px;color:var(--gray);margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.trust-col p.minds{font-size:11.5px;color:var(--gray)}
.trust-col .sign{font-size:11px;font-weight:700;color:#36507e;margin-top:12px;text-align:right}
@media(max-width:860px){.trust-grid{grid-template-columns:1fr 1fr}.trust-col:nth-child(2){border-right:none}.trust-col{border-bottom:1px solid var(--line)}}
@media(max-width:520px){.trust-grid{grid-template-columns:1fr}.trust-col{border-right:none}}

/* ===== RECRUIT ===== */
.rec-grid{display:grid;grid-template-columns:1fr 1.1fr .9fr;gap:30px;align-items:center}
.rec-list{margin-top:4px}
.rec-list li{list-style:none;display:flex;gap:10px;font-size:13.5px;font-weight:500;margin-bottom:14px}
.rec-list li svg{width:18px;height:18px;color:var(--blue);flex:none;margin-top:3px}
.rec-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rec-photos .ph{height:150px}
.rec-photos .ph img,.brand-photos .ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.rec-cta{text-align:center}
.rec-cta .ri{width:56px;height:56px;margin:0 auto 12px;color:var(--blue)}
.rec-cta p{font-size:13px;font-weight:700;margin-bottom:16px}
@media(max-width:900px){.rec-grid{grid-template-columns:1fr}.rec-photos .ph{height:120px}}

/* ===== VOICE & DATA ===== */
.voice-grid{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:24px;align-items:center}
.voice{display:flex;gap:13px;margin-bottom:22px}
.voice .av{width:50px;height:50px;flex:none;border-radius:50%;object-fit:cover}
.voice h4{font-size:14px;font-weight:700;margin-bottom:6px}
.voice p{font-size:11.5px;color:var(--gray)}
.voice .who{font-size:11px;color:#8a94a6;margin-top:6px}
.stats{display:flex;flex-direction:column;gap:14px}
.stat{background:var(--blue-soft2);border-radius:14px;padding:16px 20px;display:flex;align-items:baseline;justify-content:space-between}
.stat .lbl{font-size:12px;font-weight:700;color:#46506a}
.stat .num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:30px;color:var(--blue)}
.stat .num small{font-size:13px}
.stat .note{font-size:9.5px;color:#9aa6b8;display:block;text-align:right}
@media(max-width:860px){.voice-grid{grid-template-columns:1fr}}

/* ===== BRAND STORY ===== */
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.brand p{font-size:13.5px;color:#43505f;line-height:2}
.brand-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.brand-photos .ph{height:130px}
@media(max-width:780px){.brand-grid{grid-template-columns:1fr;gap:24px}}

/* ===== PRICING ===== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price{border:1px solid var(--line);border-radius:16px;padding:26px 22px;text-align:center;background:#fff;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.price:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(20,40,80,.09)}
.price .who{display:inline-block;font-size:12px;font-weight:700;color:#46506a;background:#eef2f8;padding:5px 14px;border-radius:20px;margin-bottom:16px}
.price .amt{font-size:26px;font-weight:900;color:var(--blue);margin-bottom:10px}
.price p{font-size:12px;color:var(--gray)}
.price.feat-stu{border-color:#bcd2f5;background:var(--blue-soft2)}
@media(max-width:780px){.price-grid{grid-template-columns:1fr}}

/* ===== FAQ ===== */
.faq{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink);padding:20px 4px;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:color .2s}
.faq-q:hover{color:var(--blue)}
.faq-q .pm{color:var(--blue);font-size:22px;font-weight:400;transition:transform .3s var(--ease);flex:none}
.faq-item.open .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-a p{font-size:13px;color:var(--gray);padding:0 4px 20px}

/* ===== CLOSING ===== */
.closing{background:linear-gradient(180deg,#f4f9ff,#e9f2ff);text-align:center}
.closing h2{font-size:34px;font-weight:900;margin-bottom:8px}
.closing .sub{font-size:15px;color:#46506a;margin-bottom:26px}
.closing .hero-cta{justify-content:center}
.closing .badges{justify-content:center;margin-top:20px}
@media(max-width:520px){.closing h2{font-size:26px}}

/* ===== FOOTER ===== */
footer{background:#0e1b33;color:#aeb9cc;padding:40px 0;font-size:12.5px}
.foot-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.foot-grid .logo{color:#fff}
.foot-grid .logo .mark{background:transparent;border-color:#5e79b3;color:#cdd9f1}
.foot-grid .logo img{height:34px;filter:brightness(0) invert(1);opacity:.92}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{transition:color .2s}
.foot-links a:hover{color:#fff}
.copy{margin-top:24px;font-size:11px;color:#6b7790;text-align:center}
.disc{font-size:10.5px;color:#586480;text-align:center;margin-top:10px}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floatY{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-12px)}}
@keyframes popIn{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.95);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal-scale.in{opacity:1;transform:none}

/* hero entrance */
.hero-head>*{animation:fadeUp .8s var(--ease) both}
.hero-head h1{animation-delay:.05s}
.hero-head .en{animation-delay:.18s}
.bgword{animation:fadeUp 1s var(--ease) .12s both}
.hero-copy{animation:fadeUp .8s var(--ease) .3s both}
.collage .pc{animation:fadeIn .7s var(--ease) both}
.pc1{animation-delay:.4s}.pc2{animation-delay:.5s}.pc3{animation-delay:.6s}
.pc4{animation-delay:.7s}.pc5{animation-delay:.8s}.pc6{animation-delay:.55s}.pc7{animation-delay:.65s}
.phone{animation:fadeIn .9s var(--ease) .3s both,floatY 6.5s ease-in-out 1.3s infinite}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-scale{opacity:1!important;transform:none!important;transition:none}
  .hero-head>*,.bgword,.hero-copy,.collage .pc,.phone-img{animation:none!important;opacity:1!important}
  *{scroll-behavior:auto!important}
}

/* =========================================================
   APPLY MODAL（新規登録モーダル）
   ========================================================= */
.modal-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(14,23,48,.52);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s var(--ease)}
.modal-overlay.open{opacity:1;visibility:visible}
body.modal-lock{overflow:hidden}

.modal{position:relative;width:100%;max-width:440px;max-height:92vh;overflow-y:auto;background:#fff;border-radius:20px;
  box-shadow:0 30px 70px -20px rgba(15,30,70,.5);padding:34px 30px 28px;
  transform:translateY(14px) scale(.97);transition:transform .3s var(--ease)}
.modal-overlay.open .modal{transform:none}
.modal::-webkit-scrollbar{width:8px}
.modal::-webkit-scrollbar-thumb{background:#dfe5ef;border-radius:8px}

.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;background:#f1f4f9;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#5b6677;transition:.2s var(--ease)}
.modal-close:hover{background:#e6ebf3;color:var(--ink)}
.modal-close svg{width:18px;height:18px}

.modal-head{margin-bottom:20px}
.modal-eyebrow{font-family:'Montserrat',sans-serif;font-weight:800;font-size:11px;letter-spacing:.12em;color:var(--blue);text-transform:uppercase}
.modal-title{font-size:21px;font-weight:900;margin:6px 0 6px}
.modal-sub{font-size:12.5px;color:var(--gray)}

.modal-field{margin-bottom:15px}
.modal-field label{display:block;font-size:12.5px;font-weight:700;color:#36425a;margin-bottom:6px}
.modal-field label small{font-weight:500;color:#9aa6b8}
.modal-field input{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#f7f9fc;
  border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;transition:.18s var(--ease)}
.modal-field input::placeholder{color:#b3bdcc}
.modal-field input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(26,95,214,.14)}
.modal-field.err input{border-color:#e0533d;background:#fdf3f1}
.field-err{display:none;font-size:11.5px;color:#d9492a;margin-top:5px}
.modal-field.err .field-err,.field-err.show{display:block}

.modal-consent{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:#46506a;margin:4px 0 2px;cursor:pointer}
.modal-consent input{width:17px;height:17px;margin-top:1px;flex:none;accent-color:var(--blue);cursor:pointer}
.modal-consent a{color:var(--blue);text-decoration:underline}

.modal-formerr{font-size:12.5px;color:#d9492a;background:#fdf3f1;border:1px solid #f3c9bf;border-radius:9px;padding:9px 12px;margin:12px 0 0}

.modal-submit{width:100%;justify-content:center;margin-top:16px;font-size:15px;padding:14px;position:relative}
.modal-submit:disabled,.modal-submit.loading{opacity:.85;cursor:default;transform:none!important}
.ms-spin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.modal-submit.loading .ms-spin{display:inline-block}
.modal-submit.loading .ms-label{opacity:.65}
@keyframes spin{to{transform:rotate(360deg)}}

.modal-note{font-size:11px;color:#9aa6b8;line-height:1.6;margin-top:13px}

.modal-success{text-align:center;padding:14px 6px 6px}
.modal-success .ms-icon{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}
.modal-success .ms-icon svg{width:32px;height:32px}
.modal-success h3{font-size:19px;font-weight:900;margin-bottom:10px}
.modal-success p{font-size:13px;color:var(--gray);margin-bottom:22px;line-height:1.8}
.modal-success .btn{width:100%;justify-content:center}

@media(max-width:480px){
  .modal-overlay{padding:0;align-items:flex-end}
  .modal{max-width:none;max-height:94vh;border-radius:20px 20px 0 0;padding:30px 22px 26px;
    transform:translateY(100%)}
  .modal-overlay.open .modal{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .modal-overlay,.modal{transition:none}
  .modal{transform:none!important}
  .ms-spin{animation-duration:1.2s}
}