/* Lux Care Partners — style.css */
:root{
  --ink:#060b18;        /* 濃紺（文字・暗い背景） */
  --ink-2:#0d1737;
  --text:#1d2740;
  --muted:#59647f;
  --line:#e3e7ef;
  --bg:#f4f6fa;
  --white:#fff;
  --cyan:#34c3ff;       /* ロゴの水色 */
  --cyan-deep:#0a78b8;
  --blue:#3b5bff;       /* ロゴの青 */
  --star:#f7f0a0;       /* ロゴの星の黄色 */
  --line-green:#06c755; /* LINEの緑 */
  --radius:20px;
  --shadow:0 30px 70px -36px rgba(6,11,24,.55);
  --font:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",sans-serif;
  --font-h:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --font-en:"Outfit","Noto Sans JP",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--white);font-size:16px;line-height:1.9;letter-spacing:.03em;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan-deep)}
h1,h2,h3{font-family:var(--font-h);color:var(--ink);line-height:1.45;margin:0;word-break:auto-phrase}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
.en{font-family:var(--font-en);letter-spacing:.06em}
.nb{display:inline-block}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:12px 28px;border-radius:999px;font-weight:700;text-decoration:none;font-size:15px;letter-spacing:.06em;transition:transform .25s,box-shadow .25s,background .25s,color .25s;border:1.5px solid transparent;text-align:center;line-height:1.5}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(120deg,var(--cyan) 0%,var(--blue) 100%);color:#fff;box-shadow:0 12px 30px -12px rgba(29,63,214,.7)}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-line{background:var(--line-green);color:#fff;box-shadow:0 10px 24px -12px rgba(6,199,85,.8)}
.btn-line::before{content:"";width:18px;height:18px;border-radius:5px;background:#fff;-webkit-mask:radial-gradient(circle at 50% 46%,transparent 0 5px,#000 5.5px);mask:radial-gradient(circle at 50% 46%,transparent 0 5px,#000 5.5px)}
.btn-sm{min-height:44px;padding:8px 22px;font-size:14px}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
.hd-in{width:min(1280px,100% - 40px);margin-inline:auto;height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.hd-logo{display:block;background:#fff;border-radius:12px;padding:5px 10px}
.hd-logo img{height:46px;width:auto}
.hd.is-scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 24px -16px rgba(10,22,48,.5)}
.hd.is-scrolled .hd-logo{padding:0}
.gnav{display:flex;align-items:center;gap:26px}
.gnav ul{display:flex;gap:22px}
.gnav ul a{color:#fff;text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.05em;padding:10px 0;position:relative}
.gnav ul a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.gnav ul a:hover::after{transform:scaleX(1)}
.hd.is-scrolled .gnav ul a{color:var(--ink)}
.menu-btn{display:none}

/* ---------- hero ---------- */
.hero{position:relative;background:radial-gradient(1100px 600px at 85% 10%,#1b3a82 0%,transparent 60%),radial-gradient(800px 500px at 0% 100%,#0e3a6b 0%,transparent 60%),var(--ink);color:#fff;padding:150px 0 70px;overflow:hidden}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:linear-gradient(180deg,#000 0%,transparent 85%);mask:linear-gradient(180deg,#000 0%,transparent 85%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.eyebrow{color:var(--cyan);font-size:13px;text-transform:uppercase;letter-spacing:.24em;margin-bottom:22px;line-height:1.6}
.eyebrow::before{content:"";display:inline-block;vertical-align:middle;width:34px;height:1px;background:var(--cyan);margin:0 12px 3px 0}
.eyebrow span{color:var(--star)}
.hero h1{color:#fff;font-size:clamp(38px,5.4vw,70px);font-weight:900;line-height:1.25;letter-spacing:.04em}
.hero-sub{display:block;font-size:15px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.7);margin-bottom:14px}
.hero-lead{margin:28px 0 34px;color:rgba(255,255,255,.85);font-size:17px;max-width:34em}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px}
.hero-license{margin:30px 0 0;font-size:13px;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-license .en{font-size:11px;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:2px 10px;color:var(--star)}
.hero-visual{position:relative;padding:10px 0 30px}
.hero-photo{margin:0;border-radius:200px 200px var(--radius) var(--radius);overflow:hidden;aspect-ratio:880/939;box-shadow:0 40px 80px -40px rgba(0,0,0,.7);position:relative}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.float-card{position:absolute;background:rgba(255,255,255,.94);color:var(--text);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;line-height:1.5;font-size:12.5px;min-width:200px;animation:float 6s ease-in-out infinite}
.float-card strong{font-family:var(--font-h);font-size:16px;color:var(--ink)}
.fc-label{font-size:10.5px;color:var(--cyan-deep);text-transform:uppercase;font-weight:600}
.fc-1{left:-34px;top:16%}
.fc-2{right:-16px;bottom:8%;animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-biz{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.biz-tile{display:flex;align-items:center;gap:20px;padding:22px 26px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;transition:background .3s,border-color .3s}
.biz-tile:hover{background:rgba(255,255,255,.12);border-color:var(--cyan)}
.biz-no{font-size:28px;color:var(--cyan);font-weight:500}
.biz-name{flex:1;font-family:var(--font-h);font-weight:700;font-size:19px;line-height:1.5}
.biz-name small{display:block;font-family:var(--font);font-weight:400;font-size:13px;color:rgba(255,255,255,.65)}
.biz-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:background .3s}
.biz-tile:hover .biz-arrow{background:var(--cyan);border-color:var(--cyan)}

/* ---------- sections common ---------- */
.sec{padding:120px 0}
.sec-head{margin-bottom:52px}
.sec-head.center{text-align:center}
.sec-head.center p{margin-inline:auto;max-width:38em}
.sec-label{display:inline-flex;align-items:center;gap:12px;font-size:13px;text-transform:uppercase;letter-spacing:.22em;color:var(--cyan-deep);margin-bottom:14px;font-weight:500}
.sec-label span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--star);font-size:12px;letter-spacing:0}
h2{font-size:clamp(28px,3.4vw,42px);font-weight:900;margin-bottom:24px}
h3{font-size:21px;font-weight:700}

/* ---------- about ---------- */
.about-in{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-photo{position:relative}
.about-photo img{border-radius:var(--radius);aspect-ratio:4/4.3;object-fit:cover;object-position:40% 50%;width:100%;box-shadow:var(--shadow)}
.about-photo::before{content:"";position:absolute;inset:auto auto -22px -22px;width:58%;height:58%;border-radius:var(--radius);background:linear-gradient(135deg,var(--cyan),var(--blue));z-index:-1;opacity:.9}
.about-photo{isolation:isolate}
.photo-tag{position:absolute;right:18px;bottom:18px;margin:0;background:rgba(10,22,48,.78);color:#fff;font-size:12px;padding:6px 14px;border-radius:999px;backdrop-filter:blur(6px)}
.hl{font-weight:700;color:var(--ink);background:linear-gradient(transparent 62%,rgba(20,163,230,.22) 62%)}
.about-points{margin-top:30px;display:grid;gap:14px}
.about-points li{padding:18px 20px 18px 22px;border-radius:14px;background:var(--bg);border-left:4px solid var(--cyan);font-size:15px;line-height:1.8}
.ap-ttl{display:block;font-family:var(--font-h);font-weight:700;color:var(--ink);font-size:16px}

/* ---------- strength ---------- */
.strength{background:var(--bg)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.s-card{background:#fff;border-radius:var(--radius);padding:36px 32px;box-shadow:0 1px 0 var(--line),0 20px 40px -30px rgba(10,22,48,.3);position:relative;overflow:hidden;transition:transform .35s}
.s-card:hover{transform:translateY(-6px)}
.s-card::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(20,163,230,.16),transparent 70%)}
.s-no{font-size:44px;font-weight:300;line-height:1;margin-bottom:22px;background:linear-gradient(120deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.s-card h3{margin-bottom:14px;font-size:20px}
.s-card p{font-size:15px}
.note{font-size:13px !important;color:var(--muted);margin:0}

/* ---------- service ---------- */
.service-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.jobs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.jobs li{border:1px solid var(--line);border-radius:16px;padding:18px 20px;font-family:var(--font-h);font-weight:700;font-size:20px;color:var(--ink);line-height:1.4;transition:border-color .3s,box-shadow .3s}
.jobs li:hover{border-color:var(--cyan);box-shadow:0 14px 30px -22px rgba(20,163,230,.8)}
.job-en{display:block;font-size:11px;font-weight:500;color:var(--cyan-deep);text-transform:uppercase;margin-bottom:4px}
.service-scenes{background:var(--ink);color:#fff;border-radius:var(--radius);padding:44px 40px;position:relative;overflow:hidden}
.service-scenes::before{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 30px rgba(255,255,255,.03),0 0 0 60px rgba(255,255,255,.02)}
.service-scenes h3{color:#fff;font-size:24px;margin-bottom:6px}
.service-scenes .muted{color:rgba(255,255,255,.7)}
.scenes{display:grid;gap:12px;margin-top:20px;position:relative}
.scenes li{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:12px;background:rgba(255,255,255,.07);font-weight:500}
.scenes li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---------- flow ---------- */
.flow{background:var(--bg)}
.flow-banner{margin:0 0 40px;border-radius:var(--radius);overflow:hidden;height:240px}
.flow-banner img{width:100%;height:100%;object-fit:cover}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:s}
.steps li{position:relative;background:#fff;border-radius:16px;padding:22px 18px;font-family:var(--font-h);font-weight:700;color:var(--ink);font-size:16.5px;line-height:1.5;box-shadow:0 1px 0 var(--line)}
.steps li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:10px;height:10px;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan);transform:translateY(-50%) rotate(45deg);z-index:1}
.step-no{display:block;font-size:12px;color:var(--cyan-deep);font-weight:500;margin-bottom:6px}
.price{margin-top:64px;display:grid;grid-template-columns:.9fr 1.1fr;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.price-photo img{width:100%;height:100%;object-fit:cover;min-height:280px}
.price-text{padding:48px 48px 52px}
.price-text h3{font-size:16px;color:var(--cyan-deep);margin-bottom:10px;letter-spacing:.1em}
.price-big{font-family:var(--font-h);font-weight:900;font-size:clamp(22px,2.3vw,30px);color:var(--ink);line-height:1.5}

/* ---------- web ---------- */
.web{background:linear-gradient(180deg,#fff 0%,#eef6fc 100%)}
.web-head{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center;margin-bottom:56px}
.web-photo{margin:0;border-radius:var(--radius) var(--radius) 140px var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3.4}
.web-photo img{width:100%;height:100%;object-fit:cover}
.web-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:56px}
.web-feat li{background:#fff;border-radius:18px;padding:24px 20px;border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;line-height:1.6}
.web-feat strong{font-family:var(--font-h);color:var(--ink);font-size:16.5px}
.web-feat li>span:last-child{font-size:13.5px;color:var(--muted)}
.wf-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(20,163,230,.14),rgba(29,63,214,.14));margin-bottom:10px}
.wf-ico svg{fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{background:#fff;border-radius:var(--radius);padding:36px 30px;border:1px solid var(--line);position:relative}
.plan-reco{background:var(--ink);border-color:var(--ink);color:rgba(255,255,255,.85);box-shadow:var(--shadow)}
.plan-reco h3,.plan-reco .plan-price{color:#fff}
.plan-badge{position:absolute;top:-14px;left:30px;background:linear-gradient(120deg,var(--cyan),var(--blue));color:#fff;font-size:12.5px;font-weight:700;padding:4px 16px;border-radius:999px;margin:0}
.plan-name{font-size:12px;text-transform:uppercase;color:var(--cyan);margin-bottom:2px}
.plan-pages{font-size:14px;margin:4px 0 14px;color:inherit;opacity:.8}
.plan-price{font-family:var(--font-h);font-weight:700;color:var(--ink);font-size:16px;margin-bottom:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.plan-reco .plan-price{border-color:rgba(255,255,255,.15)}
.plan-price .en{font-size:40px;font-weight:500;letter-spacing:.02em;margin-right:2px}
.plan-price small{font-size:12px;font-weight:400;opacity:.75}
.plan-desc{font-size:14.5px;margin:0}
.plans-note{font-size:13.5px;color:var(--muted);margin:22px 0 0}
.works{margin-top:72px}
.works-ttl{font-size:22px;margin-bottom:22px;display:flex;align-items:baseline;gap:14px}
.works-ttl .en{font-size:13px;color:var(--cyan-deep);text-transform:uppercase;font-weight:500}
.works-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.work{display:flex;flex-direction:column;gap:4px;padding:28px 30px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--text);transition:transform .3s,box-shadow .3s,border-color .3s}
.work:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--cyan)}
.work strong{font-family:var(--font-h);font-size:20px;color:var(--ink)}
.work-tag{align-self:flex-start;font-size:12px;background:var(--bg);border-radius:999px;padding:2px 12px;color:var(--cyan-deep);font-weight:500}
.work-meta{font-size:14px;color:var(--muted)}
.work-link{margin-top:10px;font-size:13px;color:var(--blue)}
.web-cta{margin-top:72px;position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;display:grid;align-items:center}
.web-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 92%}
.web-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,22,48,.92) 0%,rgba(10,22,48,.75) 45%,rgba(10,22,48,.15) 100%);z-index:1}
.web-cta-in{position:relative;z-index:2;padding:48px 56px;max-width:600px}
.web-cta-ttl{font-family:var(--font-h);font-weight:900;color:#fff;font-size:clamp(22px,2.6vw,30px);line-height:1.5;margin-bottom:24px}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:rgba(255,255,255,.85);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;left:50%;top:-320px;width:900px;height:640px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(20,163,230,.25),transparent)}
.contact .wrap{position:relative}
.contact h2{color:#fff}
.contact .sec-label{color:var(--cyan)}
.contact .sec-label span{background:#fff;color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.c-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:34px 28px;display:flex;flex-direction:column}
.c-for{font-size:12.5px;color:var(--star);margin-bottom:4px}
.c-card h3{color:#fff;margin-bottom:8px}
.c-card>p:not(.c-for):not(.c-id){font-size:14.5px;flex:1}
.c-card .btn{width:100%}
.c-id{margin:12px 0 0;font-size:13px;color:rgba(255,255,255,.65);text-align:center}
.c-mail{text-align:center;margin:36px 0 0}
.c-mail a{color:#fff;font-weight:700;display:inline-block;padding:12px 0}

/* ---------- company ---------- */
.company-in{display:grid;grid-template-columns:.7fr 1.3fr;gap:64px;align-items:start}
.info{margin:0;border-top:1px solid var(--ink)}
.info div{display:grid;grid-template-columns:9em 1fr;gap:20px;padding:20px 4px;border-bottom:1px solid var(--line)}
.info dt{font-weight:700;color:var(--ink)}
.info dd{margin:0;word-break:auto-phrase}
.info a{display:inline-block;padding:10px 0;margin:-6px 0}

/* ---------- footer ---------- */
.ft{background:#060f22;color:rgba(255,255,255,.7);padding:56px 0 36px}
.ft-in{display:grid;grid-template-columns:auto 1fr;gap:28px 48px;align-items:center}
.ft-logo img{height:64px;width:auto}
.ft-nav{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:flex-end}
.ft-nav a{color:rgba(255,255,255,.8);text-decoration:none;font-size:14px;padding:12px 0}
.ft-nav a:hover{color:#fff}
.ft-copy{grid-column:1/-1;margin:0;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:12px}

/* ---------- reveal（JavaScriptが動くときだけ） ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .float-card{animation:none}
  .btn:hover,.s-card:hover,.work:hover{transform:none}
}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .menu-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;border:0;background:#fff;cursor:pointer;box-shadow:0 6px 18px -10px rgba(10,22,48,.5)}
  .menu-bar,.menu-bar::before,.menu-bar::after{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .3s,background .3s}
  .menu-bar::before,.menu-bar::after{content:"";position:absolute;left:0}
  .menu-bar::before{top:-7px}.menu-bar::after{top:7px}
  .menu-btn[aria-expanded="true"] .menu-bar{background:transparent}
  .menu-btn[aria-expanded="true"] .menu-bar::before{transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] .menu-bar::after{transform:translateY(-7px) rotate(-45deg)}
  .gnav{position:fixed;top:76px;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:12px;background:#fff;border-radius:20px;padding:14px 20px 22px;box-shadow:0 30px 60px -20px rgba(10,22,48,.45);display:none}
  .gnav.is-open{display:flex}
  .gnav ul{flex-direction:column;gap:0}
  .gnav ul a{display:block;color:var(--ink);padding:14px 4px;border-bottom:1px solid var(--line);font-size:15.5px}
  .gnav ul a::after{display:none}
  .gnav .btn{margin-top:6px}
  .hero-in{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:520px;width:100%;margin-inline:auto}
  .fc-1{left:-10px}.fc-2{right:-6px}
  .about-in,.service-in,.web-head,.company-in{grid-template-columns:1fr;gap:44px}
  .about-photo{max-width:640px}
  .web-photo{max-width:560px;aspect-ratio:16/10}
  .cards3,.contact-grid,.plans{grid-template-columns:1fr 1fr}
  .web-feat{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .steps li{display:flex;align-items:center;gap:18px}
  .steps li .step-no{margin:0;min-width:5em}
  .steps li:not(:last-child)::after{right:auto;left:42px;top:auto;bottom:-12px;transform:rotate(135deg)}
  .price{grid-template-columns:1fr}
  .price-photo img{min-height:0;aspect-ratio:16/7}
}

/* ---------- smartphone ---------- */
@media (max-width:640px){
  body{font-size:15.5px}
  .wrap{width:min(100% - 36px,1180px)}
  html{scroll-padding-top:72px}
  .hd-in{height:66px;width:calc(100% - 24px)}
  .hd-logo img{height:38px}
  .gnav{top:68px}
  .hero{padding:110px 0 48px}
  .hero h1{font-size:clamp(32px,9.4vw,44px)}
  .hero-sub{font-size:13px}
  .eyebrow{font-size:10.5px;letter-spacing:.14em;margin-bottom:16px}
  .eyebrow::before{width:22px;margin-right:8px}
  .hero-lead{font-size:15.5px;margin:22px 0 26px}
  .hero-btns .btn{width:100%}
  .float-card{min-width:0;padding:10px 14px;font-size:11.5px}
  .float-card strong{font-size:14px}
  .fc-1{left:-6px;top:10%}
  .fc-2{right:-6px;bottom:6%}
  .hero-biz{grid-template-columns:1fr;margin-top:36px;gap:12px}
  .biz-tile{padding:18px 20px;gap:16px}
  .biz-name{font-size:17px}
  .sec{padding:84px 0}
  .sec-head{margin-bottom:36px}
  .cards3,.contact-grid,.plans,.works-list,.jobs{grid-template-columns:1fr}
  .jobs{grid-template-columns:1fr 1fr}
  .jobs li{font-size:17px;padding:14px 16px}
  .job-en{font-size:9.5px;letter-spacing:.03em}
  .web-feat{grid-template-columns:1fr}
  .web-feat li{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:14px}
  .web-feat .wf-ico{margin:0}
  .web-feat strong{flex:1}
  .web-feat li>span:last-child{flex-basis:100%;padding-left:62px}
  .s-card{padding:30px 24px}
  .service-scenes{padding:34px 22px}
  .flow-banner{height:150px}
  .price-text{padding:32px 24px 36px}
  .price-text .btn{width:100%}
  .plan{padding:32px 24px}
  .plans{gap:28px}
  .web-cta-in{padding:36px 24px}
  .web-cta::before{background:linear-gradient(180deg,rgba(10,22,48,.88),rgba(10,22,48,.78))}
  .web-cta img{object-position:85% 95%}
  .web-cta .btn{width:100%}
  .info div{grid-template-columns:1fr;gap:2px;padding:16px 2px}
  .ft-in{grid-template-columns:1fr}
  .ft-nav{justify-content:flex-start;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .ft-nav a{padding:10px 0}
}

/* ---------- 404 ---------- */
.nf{min-height:100vh;display:grid;align-items:center}
.nf h1{font-size:clamp(26px,4vw,40px);margin-bottom:16px}

/* =====================================================
   v2 追加分（複数ページ化）
   ===================================================== */
.btn-outline{border-color:var(--cyan-deep);color:var(--cyan-deep);background:#fff}
.btn-outline:hover{background:var(--cyan-deep);color:#fff}
.gnav ul a[aria-current="page"]::after{transform:scaleX(1)}
.center-btn{text-align:center;margin-top:36px}

/* ---------- スライドショー ---------- */
.slider{position:relative}
.slides{position:relative}
.slides .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.4s ease,transform 7s ease-out}
.slides .slide.on{opacity:1;transform:scale(1)}
.slider-ctrl{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:6px;background:rgba(10,22,48,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:999px;padding:2px 6px;z-index:2}
.dots{display:flex}
.dot{width:44px;height:44px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.dot::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:width .3s,background .3s}
.dot.on::before{width:22px;border-radius:6px;background:#fff}
.slide-pause{width:44px;height:44px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:#fff}
.slide-pause::before{content:"";width:10px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box}
.slide-pause[aria-pressed="true"]::before{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}

/* ---------- 数字 ---------- */
.stats{background:#fff;border-bottom:1px solid var(--line)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:40px 20px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat-num{margin:0;font-size:clamp(34px,3.6vw,48px);font-weight:300;line-height:1.2;color:var(--ink)}
.stat-num small{font-size:15px;font-weight:500;margin-left:4px;font-family:var(--font)}
.stat-lbl{margin:6px 0 0;font-size:13.5px;color:var(--muted)}

/* ---------- 端末の枠（モックアップ） ---------- */
.mock-set{position:relative;padding:0 8% 40px 0}
.mock-set.solo{padding:0}
.mock-pc-screen{background:#111;border:10px solid #1b1f27;border-bottom-width:14px;border-radius:14px 14px 4px 4px;overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow)}
.mock-pc-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.mock-pc-base{height:12px;margin:0 -5%;background:linear-gradient(#d9dde5,#aeb5c2);border-radius:0 0 14px 14px;position:relative}
.mock-pc-base::before{content:"";position:absolute;left:50%;top:0;width:14%;height:5px;transform:translateX(-50%);background:#9aa1ae;border-radius:0 0 6px 6px}
.mock-sp{position:absolute;right:0;bottom:0;width:23%;min-width:96px}
.mock-sp-screen{border:6px solid #1b1f27;border-radius:22px;overflow:hidden;aspect-ratio:9/18;background:#fff;box-shadow:0 20px 40px -18px rgba(10,22,48,.6)}
.mock-sp-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.showcase-in{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.showcase-name{font-size:24px;margin:10px 0 14px}
.showcase-link{margin:6px 0 22px}
.showcase-link a{display:inline-block;padding:10px 0;font-weight:700}
.work-tag{display:inline-block;font-size:12.5px;background:var(--bg);border-radius:999px;padding:2px 12px;color:var(--cyan-deep);font-weight:500;margin:0}

/* ---------- プラン ---------- */
.plans-sec{background:var(--bg)}
.plan-ex{font-size:12.5px;margin:-6px 0 12px;opacity:.75}

/* ---------- 制作の流れ（6段） ---------- */
.steps-6{grid-template-columns:repeat(6,1fr)}
.steps li strong{display:block;font-weight:700}
.step-txt{display:block;font-family:var(--font);font-weight:400;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.65}

/* ---------- よくある質問 ---------- */
.faq-in{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px;align-items:start}
.faq-list{display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq-item[open]{border-color:var(--cyan);box-shadow:0 14px 30px -24px rgba(20,163,230,.9)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 56px 18px 20px;font-family:var(--font-h);font-weight:700;color:var(--ink);position:relative;min-height:60px;line-height:1.6}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;border-right:2px solid var(--cyan-deep);border-bottom:2px solid var(--cyan-deep);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-q{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--star);font-size:14px}
.faq-a{padding:0 22px 6px 66px;font-size:15px}
.js .faq-item[open] .faq-a{animation:faqIn .45s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 人材紹介への案内 ---------- */
.rb{position:relative;border-radius:var(--radius);overflow:hidden;min-height:380px;display:grid;align-items:center}
.rb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.rb::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,22,48,.94) 0%,rgba(10,22,48,.8) 48%,rgba(10,22,48,.2) 100%);z-index:1}
.rb-in{position:relative;z-index:2;padding:56px;max-width:600px;color:rgba(255,255,255,.88)}
.rb-in h2{color:#fff}
.rb-in .sec-label{color:var(--cyan)}
.rb-in .sec-label span{background:#fff;color:var(--ink)}

/* ---------- LINE帯 ---------- */
.cta-band{background:linear-gradient(120deg,var(--ink) 0%,#13306b 100%);color:#fff;padding:64px 0}
.cta-band-in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band-ttl{font-family:var(--font-h);font-weight:900;font-size:clamp(22px,2.4vw,30px);margin:0;line-height:1.5}
.cta-band-sub{margin:6px 0 0;color:rgba(255,255,255,.75);font-size:14.5px}

/* ---------- 下層ページの見出し ---------- */
.phero{position:relative;background:radial-gradient(900px 500px at 90% 0%,#1b3a82 0%,transparent 60%),var(--ink);color:#fff;padding:140px 0 72px;overflow:hidden}
.phero-in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.phero h1{color:#fff;font-size:clamp(32px,4.4vw,54px);font-weight:900;line-height:1.3}
.phero .hero-sub{font-size:14px}
.phero-lead{margin:22px 0 0;color:rgba(255,255,255,.85);font-size:16.5px}
.phero-photo{margin:0;border-radius:var(--radius) 120px var(--radius) var(--radius);overflow:hidden;aspect-ratio:16/10;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.phero-photo img{width:100%;height:100%;object-fit:cover}
.license{margin-top:22px;font-size:13.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.license .en{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--cyan-deep)}

/* ---------- 料金ページ ---------- */
.notes{margin-top:36px;background:#fff;border-radius:var(--radius);padding:30px 34px;border:1px solid var(--line)}
.notes h3{font-size:17px;margin-bottom:10px}
.dot-list li{position:relative;padding-left:18px;margin:6px 0;font-size:14.5px}
.dot-list li::before{content:"";position:absolute;left:2px;top:.75em;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rule-card{border-radius:var(--radius);padding:30px 28px;background:linear-gradient(160deg,#f2f8fd,#fff);border:1px solid var(--line)}
.rule-num{margin:0;font-size:52px;font-weight:300;line-height:1.1;background:linear-gradient(120deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.rule-num small{font-size:20px}
.rule-lbl{font-family:var(--font-h);font-weight:700;color:var(--ink);font-size:17px;margin:6px 0 4px}
.rule-card .muted{font-size:13.5px;margin:0}
.rule-note{margin-top:22px;font-size:14.5px}

.sim-sec{background:var(--bg)}
.sim{display:grid;grid-template-columns:1.35fr .9fr;gap:28px;align-items:start}
.sim-body{display:grid;gap:20px}
.sim-box{border:0;margin:0;background:#fff;border-radius:var(--radius);padding:26px 26px 22px;box-shadow:0 1px 0 var(--line)}
.sim-box legend{float:left;width:100%;font-family:var(--font-h);font-weight:700;color:var(--ink);font-size:18px;margin-bottom:14px;padding:0}
.sim-plans,.sim-maint{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;clear:both}
.sim-maint{margin-top:12px}
.sim-plan{position:relative;cursor:pointer}
.sim-plan input{position:absolute;opacity:0;inset:0;cursor:pointer}
.sim-plan span{display:flex;flex-direction:column;height:100%;padding:14px 14px;border:1.5px solid var(--line);border-radius:14px;line-height:1.5;transition:border-color .2s,background .2s}
.sim-plan strong{font-family:var(--font-h);color:var(--ink)}
.sim-plan small{font-size:12px;color:var(--muted)}
.sim-plan input:checked+span{border-color:var(--cyan);background:#eef8fe;box-shadow:inset 0 0 0 1px var(--cyan)}
.sim-plan input:focus-visible+span{outline:3px solid var(--cyan);outline-offset:2px}
.sim-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;clear:both;margin-bottom:10px}
.sim-opt{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;min-height:56px;line-height:1.45;font-size:14.5px}
.sim-opt small{display:block;font-size:12px;color:var(--muted)}
.sim-check{cursor:pointer}
.sim-check input{width:20px;height:20px;accent-color:var(--blue);flex:none}
.sim-qty{justify-content:space-between}
.sim-pages{margin-top:12px}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none}
.st-btn{width:44px;height:44px;border:0;background:#f2f5fa;font-size:18px;cursor:pointer;color:var(--ink)}
.st-btn:hover{background:#e3edf8}
.stepper input{width:42px;height:44px;border:0;text-align:center;font:500 16px var(--font-en);color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sim-opt.is-disabled{opacity:.45}
.sim-hint{margin:10px 0 0;font-size:13.5px;color:var(--blue);font-weight:700;min-height:1.6em}
.sim-result{position:sticky;top:96px;background:var(--ink);color:rgba(255,255,255,.85);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow)}
.sim-r-ttl{color:var(--cyan);font-size:13px;text-transform:uppercase;margin:0 0 10px}
.sim-lines{margin:0 0 16px;font-size:13.5px;max-height:260px;overflow:auto}
.sim-lines div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
.sim-lines dd{margin:0;font-family:var(--font-en);white-space:nowrap}
.sim-lines .minus dd{color:var(--star)}
.sim-total{padding:16px 0;border-top:1px solid rgba(255,255,255,.2)}
.sim-total-lbl{margin:0;font-size:13px}
.sim-total-num{margin:0;color:#fff;font-family:var(--font-h);font-weight:700;font-size:18px}
.sim-total-num .en{font-size:44px;font-weight:500;letter-spacing:.01em;margin-right:4px}
.sim-sub{margin:0;font-size:12.5px;opacity:.75}
.sim-pay{margin:0 0 14px;font-size:13.5px}
.sim-pay div{display:flex;justify-content:space-between;padding:5px 0}
.sim-pay dd{margin:0;font-family:var(--font-en);color:#fff}
.sim-note{font-size:12px;opacity:.7}
.sim-result .btn{width:100%}
.sim-reset{display:block;margin:12px auto 0;background:none;border:0;color:rgba(255,255,255,.75);text-decoration:underline;cursor:pointer;font:inherit;font-size:13px;padding:10px}
.sim-total-num.bump .en{animation:bump .4s ease}
@keyframes bump{50%{color:var(--star)}}

.ex-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ex{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column;gap:8px}
.ex h3{font-size:19px}
.ex-items{font-size:13.5px;color:var(--muted);flex:1;margin:0}
.ex-total{margin:6px 0 8px;font-family:var(--font-h);font-weight:700;color:var(--ink)}
.ex-total .en{font-size:34px;font-weight:500}
.ex-total small{display:block;font-size:12px;font-weight:400;color:var(--muted)}

.opt-in{display:grid;grid-template-columns:.6fr 1.4fr;gap:56px;align-items:start}
.tbl-wrap{overflow-x:auto;margin-bottom:28px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff}
.tbl caption{text-align:left;font-family:var(--font-h);font-weight:700;color:var(--ink);font-size:17px;padding-bottom:10px}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{background:var(--ink);color:#fff;font-weight:500;font-size:13px}
.tbl tbody th{font-weight:500;color:var(--ink)}
.tbl .num{white-space:nowrap;font-family:var(--font-en)}

/* ---------- 制作実績ページ ---------- */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.chip{min-height:44px;padding:8px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 14.5px var(--font);color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.wk-list{display:grid;gap:48px}
.wk{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;padding-bottom:48px;border-bottom:1px solid var(--line)}
.wk:nth-child(even) .mock-set{order:2}
.wk.is-hidden{display:none}
.wk h3{font-size:24px;margin:10px 0 16px}
.wk-spec{margin:0}
.wk-spec div{display:grid;grid-template-columns:6.5em 1fr;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.wk-spec dt{font-weight:700;color:var(--ink)}
.wk-spec dd{margin:0}
.wk-spec a{display:inline-block;padding:2px 0}
.wk-note{margin-top:24px;font-size:13px}

/* ---------- 人材紹介ページ ---------- */
.flow2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.flow-col{background:#fff;border-radius:var(--radius);padding:30px 28px;box-shadow:0 1px 0 var(--line)}
.flow-tag{display:inline-block;background:linear-gradient(120deg,var(--cyan),var(--blue));color:#fff;border-radius:999px;padding:2px 14px;font-size:12.5px;font-weight:700;margin:0 0 8px}
.flow-col h3{margin-bottom:16px}
.steps-v{grid-template-columns:1fr;gap:10px}
.steps-v li{display:flex;align-items:center;gap:16px;background:var(--bg);box-shadow:none;padding:14px 18px}
.steps-v li .step-no{margin:0;min-width:4.6em}
.steps-v li:not(:last-child)::after{right:auto;left:36px;top:auto;bottom:-9px;transform:rotate(135deg);width:8px;height:8px}
.contact-grid.two{grid-template-columns:1fr 1fr;max-width:820px;margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  .slides .slide{transition:opacity .8s ease;transform:none}
  .js .faq-item[open] .faq-a{animation:none}
}

@media (max-width:1080px){
  .stats-in{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .showcase-in,.faq-in,.phero-in,.opt-in,.wk,.sim{grid-template-columns:1fr;gap:36px}
  .wk:nth-child(even) .mock-set{order:0}
  .steps-6{grid-template-columns:1fr}
  .steps-6 li{flex-wrap:wrap;row-gap:0}
  .steps-6 .step-txt{flex-basis:100%;padding-left:calc(5em + 18px);margin-top:0}
  .ex-list{grid-template-columns:1fr 1fr}
  .sim-result{position:static}
  .phero-photo{max-width:640px}
}
@media (max-width:640px){
  .stat{padding:28px 10px}
  .stat-num small{font-size:12.5px}
  .stat-lbl{font-size:12px}
  .phero{padding:100px 0 52px}
  .rb-in{padding:36px 24px}
  .rb::before{background:linear-gradient(180deg,rgba(10,22,48,.9),rgba(10,22,48,.82))}
  .cta-band{padding:48px 0}
  .cta-band .btn{width:100%}
  .rule-grid,.ex-list,.flow2,.contact-grid.two{grid-template-columns:1fr}
  .sim-plans,.sim-maint{grid-template-columns:1fr}
  .sim-opts{grid-template-columns:1fr}
  .sim-box{padding:22px 16px 18px}
  .sim-result{padding:26px 20px}
  .faq-a{padding:0 18px 6px 20px}
  .faq-item summary{padding:16px 48px 16px 16px;gap:12px}
  .steps-6 .step-txt{padding-left:0}
  .notes{padding:24px 20px}
  .mock-set{padding:0 10% 28px 0}
  .wk-spec div{grid-template-columns:1fr;gap:0}
}

/* v2 調整 */
.sim-mini{display:none}
@media (max-width:1080px){
  .sim-mini{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;align-items:center;justify-content:center;gap:6px;min-height:52px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;box-shadow:0 14px 30px -12px rgba(10,22,48,.7);transform:translateY(140%);transition:transform .35s ease;pointer-events:none}
  .sim-mini strong{font-size:22px;font-weight:500;color:var(--star)}
  .sim-mini.show{transform:none;pointer-events:auto}
}
@media (max-width:640px){
  .slider-ctrl{position:static;width:max-content;margin:12px auto 0;background:rgba(255,255,255,.1)}
  .hero-visual{padding-bottom:10px}
  .tbl{font-size:13px}
  .tbl th,.tbl td{padding:10px 8px}
  .tbl tbody th{min-width:8.5em}
}

.mock-set.solo .mock-pc-base{margin:0}
@media (max-width:640px){ .hero .fc-2{bottom:78px} .hero .fc-1{top:6%} }

/* =====================================================
   v3 追加分（Instagram運用代行）
   ===================================================== */
.hero-biz{grid-template-columns:repeat(3,1fr)}
.btn-ig{background:linear-gradient(120deg,#f58529 0%,#dd2a7b 50%,#8134af 100%);color:#fff;box-shadow:0 10px 24px -12px rgba(221,42,123,.8)}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px}
.contact-grid.four{grid-template-columns:repeat(2,1fr);max-width:920px;margin-inline:auto}

.sns-band{background:linear-gradient(160deg,#fbf7f1 0%,#f3f6fb 100%)}
.sns-band-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.sns-pts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.sns-pts li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 14px;font-size:14px;font-weight:500;color:var(--ink)}
.sns-price{font-family:var(--font-h);font-weight:700;color:var(--ink);margin-bottom:20px}
.sns-price .en{font-size:36px;font-weight:500}
.sns-price small{font-size:13px;font-weight:400;color:var(--muted)}
.phones{display:flex;justify-content:center;gap:18px;align-items:flex-end}
.phones .mock-sp{position:static;width:44%;min-width:0}
.phones .mock-sp:first-child{transform:translateY(-28px) rotate(-3deg)}
.phones .mock-sp:last-child{transform:rotate(3deg)}
.mock-sp-lg .mock-sp-screen{border-width:8px;border-radius:28px}

.phero-sns{background:radial-gradient(900px 500px at 90% 0%,#7a2f6b 0%,transparent 60%),radial-gradient(700px 500px at 0% 100%,#1b3a82 0%,transparent 60%),var(--ink)}
.ig-phone{display:flex;justify-content:center}
.mock-sp-xl{position:static;width:min(300px,80%)}
.mock-sp-xl .mock-sp-screen{border-width:9px;border-radius:34px;aspect-ratio:9/18.5;background:#fff;display:flex;flex-direction:column}
.ig-head{display:flex;align-items:center;gap:10px;padding:14px 12px 10px;color:#111;line-height:1.3}
.ig-head img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.ig-head strong{display:block;font-size:13px;font-family:var(--font-en)}
.ig-head span{font-size:11px;color:#666}
.ig-screen .ig-grid{flex:1;min-height:0;width:100%;height:auto;object-fit:cover;object-position:top}

.check-list{margin:6px 0 0}
.check-list li{position:relative;padding-left:26px;margin:7px 0;font-size:14.5px}
.check-list li::before{content:"";position:absolute;left:0;top:.35em;width:17px;height:17px;border-radius:50%;background:var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat}
.plan-reco .check-list li{color:rgba(255,255,255,.9)}
.init{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 30px;margin-bottom:28px}
.init h3{margin-bottom:4px}
.init .muted{margin:0;font-size:14px}
.init .plan-price{border:0;margin:0;padding:0}
.plans + .tbl-wrap{margin-top:40px}

.cando{margin-top:40px;background:var(--ink);color:rgba(255,255,255,.85);border-radius:var(--radius);padding:36px 40px}
.cando h3{color:#fff;margin-bottom:18px}
.cando ol{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cando li{font-size:14.5px;line-height:1.75}
.cando li .en{display:block;font-size:30px;font-weight:300;color:var(--star);line-height:1.2}
.cando li strong{display:block;color:#fff;font-family:var(--font-h);font-size:17px;margin:4px 0 4px}

.case-phones{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.case-phones figure{margin:0;text-align:center}
.case-phones .mock-sp{position:static;width:100%;min-width:0}
.case-phones figcaption{margin-top:12px;font-size:14px;font-weight:500;color:var(--ink)}
.steps-5t{grid-template-columns:repeat(5,1fr)}

@media (max-width:1080px){
  .hero-biz{grid-template-columns:1fr}
  .sns-band-in{grid-template-columns:1fr}
  .phones{max-width:440px;margin-inline:auto}
  .case-phones{grid-template-columns:repeat(2,1fr)}
  .cando ol{grid-template-columns:1fr}
  .steps-5t{grid-template-columns:1fr}
  .steps-5t li{flex-wrap:wrap;row-gap:0}
  .steps-5t .step-txt{flex-basis:100%;padding-left:calc(5em + 18px);margin-top:0}
}
@media (max-width:640px){
  .contact-grid.four{grid-template-columns:1fr}
  .cta-btns .btn{width:100%}
  .cando{padding:28px 22px}
  .case-phones{gap:16px}
  .steps-5t .step-txt{padding-left:0}
  .init{padding:22px 20px}
}

.plan-limit{font-size:13px;font-weight:700;color:var(--cyan-deep);margin:0 0 8px}
.plan-reco .plan-limit{color:var(--star)}
/* v3 タップ領域 */
.gnav ul a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:640px){.hd-logo{min-height:44px;display:flex;align-items:center}}

/* =====================================================
   v4 スタイリッシュ版（見た目と動きのみ。文章・料金・構成は変更なし）
   ・外部ライブラリなし（CSS＋js/main.js のみ）
   ===================================================== */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- 全体 ---------- */
body{letter-spacing:.035em}
::selection{background:var(--cyan);color:var(--ink)}
.sec{padding:clamp(88px,11vw,150px) 0}
h2{font-size:clamp(30px,4vw,56px);line-height:1.32;letter-spacing:.02em;margin-bottom:28px}
.sec-label{font-size:12px;letter-spacing:.3em;margin-bottom:18px}
.sec-label span{width:auto;height:auto;padding:5px 13px;background:transparent;color:var(--ink);border:1px solid currentColor;letter-spacing:.1em;font-weight:500}
.contact .sec-label span,.rb-in .sec-label span{background:transparent;color:#fff}

/* ---------- 進み具合バー ---------- */
.progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:70;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--cyan),var(--blue),var(--star));pointer-events:none}

/* ---------- ボタン ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;translate:var(--bx,0) var(--by,0);transition:transform .3s,box-shadow .3s,background .3s,color .3s,translate .25s ease-out}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s ease}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-primary{background:linear-gradient(120deg,var(--cyan) 0%,var(--blue) 100%);color:#04122e;box-shadow:0 16px 36px -16px rgba(59,91,255,.8)}
.btn-ghost{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------- ヘッダー ---------- */
.hd-logo{background:none;border-radius:0;padding:0}
.hd-logo img{height:46px}
.hd.is-scrolled{background:rgba(6,11,24,.74);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.hd.is-scrolled .hd-logo{padding:0}
.hd.is-scrolled .gnav ul a{color:#fff}
.gnav ul a{font-size:13.5px;letter-spacing:.08em}
.gnav .btn-primary{color:#04122e}

/* ---------- ヒーロー ---------- */
.hero{background:var(--ink);padding:clamp(130px,14vw,170px) 0 80px}
.hero::before,.hero::after,.phero::before{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;will-change:transform}
.hero::before{width:620px;height:620px;right:-160px;top:-180px;background:rgba(59,91,255,.55);animation:drift 16s ease-in-out infinite}
.hero::after{width:520px;height:520px;left:-200px;bottom:-220px;background:rgba(52,195,255,.38);animation:drift 20s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,40px) scale(1.12)}}
.hero-grid::after{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx,72%) var(--my,26%),rgba(52,195,255,.2),transparent 62%)}
.hero-in,.hero-biz{z-index:1}
.hero h1{font-size:clamp(40px,6vw,84px);line-height:1.2;letter-spacing:.03em}
.hero h1 br+.nb{background:linear-gradient(100deg,#fff 0%,var(--cyan) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{letter-spacing:.3em}
.hero-photo{translate:0 var(--py,0px);border-radius:240px 240px var(--radius) var(--radius);box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12)}
.float-card{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.float-card strong{color:#fff}
.fc-label{color:var(--cyan)}
.biz-tile{background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.biz-no{background:linear-gradient(120deg,var(--cyan),var(--star));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:300}

/* 読み込み時の登場アニメーション（動きを減らす設定のときは無効） */
@media (prefers-reduced-motion:no-preference){
  .eyebrow,.hero-sub,.hero-lead,.hero-btns,.hero-visual,.hero-biz,.phero-in>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  .hero h1 .nb{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
  .eyebrow{animation-delay:.05s}.hero-sub{animation-delay:.15s}
  .hero h1 .nb:first-of-type{animation-delay:.25s}.hero h1 br+.nb{animation-delay:.42s}
  .hero-lead{animation-delay:.6s}.hero-btns{animation-delay:.75s}
  .hero-visual{animation-delay:.5s}.hero-biz{animation-delay:.95s}
  .phero-in>*:nth-child(2){animation-delay:.2s}
}
@keyframes rise{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:none}}

/* ---------- 流れる文字帯 ---------- */
.marquee{background:var(--ink);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;padding:20px 0;white-space:nowrap}
.marquee-track{display:flex;width:max-content;animation:marq 40s linear infinite}
.marquee-set{display:flex;gap:56px;padding-right:56px}
.marquee span{font-family:var(--font-en);font-size:clamp(22px,3.2vw,40px);font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.38)}
.marquee span:nth-child(even){-webkit-text-stroke:0;color:var(--cyan)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- 数字 ---------- */
.stat-num{font-weight:200;font-size:clamp(40px,4.6vw,66px);background:linear-gradient(120deg,var(--ink) 20%,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat{padding:52px 20px}

/* ---------- カード類 ---------- */
.web-feat li,.plan,.work,.ex,.rule-card,.flow-col,.sim-box,.notes,.init,.faq-item{border:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
.web-feat li,.ex,.work,.rule-card{transition:border-color .3s,box-shadow .35s,transform .35s}
.web-feat li:hover,.ex:hover,.work:hover,.rule-card:hover{border-color:var(--cyan);box-shadow:0 30px 60px -34px rgba(59,91,255,.55)}
.wf-ico{background:linear-gradient(135deg,rgba(52,195,255,.2),rgba(59,91,255,.2))}
.plan-name{color:var(--cyan-deep)}
.plan-reco .plan-name{color:var(--cyan)}
.plan-price .en{font-weight:300;font-size:46px}
.plan-reco{background:linear-gradient(160deg,var(--ink-2),var(--ink));border-color:transparent}
.plan-reco::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),var(--cyan),var(--blue),var(--star),var(--cyan));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 7s linear infinite;pointer-events:none}
@keyframes spin{to{--ang:360deg}}
.plan-badge{color:#04122e}
.web-photo,.phero-photo{box-shadow:0 40px 80px -44px rgba(6,11,24,.7)}
.web-photo img,.phero-photo img,.hero-photo img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.web-photo:hover img,.phero-photo:hover img{transform:scale(1.05)}
.mock-pc-screen,.mock-sp-screen{box-shadow:0 40px 70px -30px rgba(6,11,24,.7)}
.plans-sec,.sim-sec,.flow,.strength{background:var(--bg)}
.web{background:linear-gradient(180deg,#fff 0%,#eef3fb 100%)}
.sns-band{background:linear-gradient(160deg,#faf6f2 0%,#eff3fb 100%)}
.rb{box-shadow:0 50px 90px -50px rgba(6,11,24,.8)}
.cta-band{background:radial-gradient(700px 300px at 85% 0%,rgba(59,91,255,.55),transparent 70%),radial-gradient(600px 300px at 0% 100%,rgba(52,195,255,.3),transparent 70%),var(--ink)}
.steps li{border:1px solid var(--line)}
.step-no{color:var(--cyan-deep);letter-spacing:.14em}
.sim-result{background:linear-gradient(170deg,var(--ink-2),var(--ink))}
.tbl thead th{background:var(--ink)}
.chip.on{background:var(--ink)}

/* ---------- 下層ページの見出し ---------- */
.phero{background:var(--ink)}
.phero::before{width:560px;height:560px;right:-140px;top:-200px;background:rgba(59,91,255,.5);animation:drift 18s ease-in-out infinite}
.phero-sns{background:var(--ink)}
.phero-sns::before{background:rgba(160,52,175,.5)}
.phero h1{font-size:clamp(34px,4.8vw,62px)}
.phero-photo{border-radius:var(--radius) 140px var(--radius) var(--radius)}

/* ---------- ふわっと表示（順番にずらして表示） ---------- */
.js .reveal{opacity:0;transform:translateY(44px);transition:opacity 1s ease var(--d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- マウスで少し傾く（パソコンのみ・JSが付与） ---------- */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .3s,box-shadow .35s,background .3s}
.js .reveal.is-in.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .3s,box-shadow .35s}

/* ---------- タブレット・スマホ ---------- */
@media (max-width:1080px){
  .hd .gnav{background:rgba(6,11,24,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12)}
  .hd .gnav ul a{color:#fff;border-bottom-color:rgba(255,255,255,.12)}
  .hero::before{width:420px;height:420px}
  .hero::after{width:360px;height:360px}
}
@media (max-width:640px){
  .hero{padding:112px 0 52px}
  .hero h1{font-size:clamp(34px,10vw,48px)}
  .hd-logo img{height:40px}
  .marquee{padding:14px 0}
  .stat{padding:34px 10px}
}

/* ---------- 動きを減らす設定の人には、動きを止める ---------- */
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.phero::before,.plan-reco::before,.marquee-track{animation:none}
  .btn-primary::after{display:none}
  .btn{translate:none}
  .tilt,.js .reveal.is-in.tilt{transform:none}
  .web-photo:hover img,.phero-photo:hover img{transform:none}
}

/* v4 調整（読みやすさ） */
.float-card{background:rgba(6,11,24,.62);border-color:rgba(255,255,255,.22)}
.fc-2{bottom:-26px}
.stat-num{font-size:clamp(34px,3.7vw,54px);white-space:nowrap}
.stat-num small{white-space:nowrap}
@media (max-width:640px){.stat-num{font-size:clamp(30px,8.4vw,40px)}}
.phero .hero-btns{margin-top:30px}
.nf{padding:0}
.nf h1{color:#fff}
.nf-in{position:relative;z-index:1}

/* v4 監督役チェックの修正 */
/* 404：スマホで文字が右に切れないようにする */
.nf{grid-template-columns:minmax(0,1fr)}
.nf h1{font-size:clamp(28px,7.4vw,48px)}
/* ボタン・バッジ：暗い文字が読みやすいよう、青の終点を明るくする（コントラスト約5:1） */
:root{--blue-soft:#6a85ff}
.btn-primary,.plan-badge,.flow-tag{background:linear-gradient(120deg,var(--cyan) 0%,var(--blue-soft) 100%);color:#04122e}
.rule-num,.s-no{background-image:linear-gradient(120deg,var(--cyan-deep),var(--blue))}
/* 右下のカードをスライド操作バーから離す */
.fc-2{bottom:-46px}
/* スマホのメニューは背景を透けさせない */
@media (max-width:1080px){.hd .gnav{background:#060b18}}
/* 動きを減らす設定：ふわっと表示も止める */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* 2026-11-12 動きの演出・販売サイトのオプション */
.sim-sub-ttl{grid-column:1/-1;margin:12px 0 0;font-size:13.5px;font-weight:700;letter-spacing:.04em;color:var(--cyan-deep)}
.effects .ex-total{margin-bottom:auto}
.effects .showcase-link{margin:8px 0 0}
.fx-notes{margin-top:28px}