/* ==============================================
   infit通信 LP — Premium Corporate Design
   Navy / White / Minimal / High-end SaaS style
   ============================================== */

/* ── Variables ── */
:root{
  --n900:#060D1B;--n850:#0A1528;--n800:#0E1D35;--n700:#152744;
  --n600:#1C3055;--n500:#243B67;--n400:#3A5282;--n300:#5E7AA3;
  --n200:#8DA3C4;--n100:#C4D0E3;--n50:#EDF1F7;
  --white:#FFFFFF;--off:#FAFBFD;--warm:#F5F7FA;--border:#E4E8EF;
  --text:#0F1A30;--text2:#4A5568;--text3:#8494AB;
  --accent:#2E5C9A;--accent-light:#4A7BC4;
  --font:'Noto Sans JP','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --en:'Inter',var(--font);
  --ease:cubic-bezier(.4,0,.2,1);
  --container:1120px;
  --r:6px;--r-lg:10px;
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);color:var(--text);line-height:1.85;background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:.3s var(--ease)}
button{cursor:pointer;border:0;background:0;font-family:inherit}
ul{list-style:none}
input,select,textarea{font-family:inherit;font-size:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
.sp{display:none}

/* ── HEADER ── */
.header{position:fixed;top:0;left:0;width:100%;z-index:1000;transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--container);margin:0 auto;padding:0 32px;height:76px}
.logo{display:flex;align-items:center;gap:10px;z-index:10}
.logo-img{height:32px;width:auto;filter:brightness(0) invert(1);transition:filter .4s var(--ease)}
.logo-text{font-family:var(--en);font-size:1.05rem;font-weight:700;color:var(--white);letter-spacing:-.01em;transition:color .4s var(--ease);line-height:1.2}
.logo-text small{font-family:var(--font);font-size:.65rem;font-weight:400;opacity:.7;display:block;margin-top:1px}
.header.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--border)}
.header.scrolled .logo-img{filter:none}
.header.scrolled .logo-text{color:var(--n800)}
.nav{display:flex;gap:36px}
.nav a{font-size:.78rem;font-weight:500;color:rgba(255,255,255,.65);letter-spacing:.06em;transition:.3s var(--ease);position:relative}
.nav a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:var(--white);transition:width .3s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after{width:100%}
.header.scrolled .nav a{color:var(--text2)}
.header.scrolled .nav a::after{background:var(--n700)}
.header.scrolled .nav a:hover{color:var(--text)}
.header-cta{padding:8px 24px;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:.76rem;font-weight:500;letter-spacing:.08em;border-radius:var(--r);transition:.3s var(--ease)}
.header-cta:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.header.scrolled .header-cta{border-color:var(--n700);color:var(--n700)}
.header.scrolled .header-cta:hover{background:var(--n800);color:#fff;border-color:var(--n800)}
.burger{display:none;flex-direction:column;gap:5px;padding:8px;z-index:10}
.burger i,.burger i::before,.burger i::after{display:block;width:20px;height:1.5px;background:#fff;transition:.3s var(--ease);position:relative}
.burger i::before,.burger i::after{content:'';position:absolute;left:0}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.header.scrolled .burger i,.header.scrolled .burger i::before,.header.scrolled .burger i::after{background:var(--n800)}
.burger.open i{background:transparent}
.burger.open i::before{top:0;transform:rotate(45deg)}
.burger.open i::after{top:0;transform:rotate(-45deg)}

/* Mobile overlay */
.mob-nav{display:none;position:fixed;inset:0;background:var(--n900);flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;pointer-events:none;transition:.4s var(--ease);z-index:999}
.mob-nav.open{opacity:1;pointer-events:all}
.mob-nav a{color:rgba(255,255,255,.75);font-size:1rem;font-weight:400;letter-spacing:.08em}
.mob-nav a:hover{color:#fff}
.mob-nav .mob-cta{margin-top:16px;padding:14px 44px;border:1px solid rgba(255,255,255,.25);border-radius:var(--r)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 40px;font-weight:500;font-size:.875rem;letter-spacing:.06em;border-radius:var(--r);transition:.35s var(--ease);cursor:pointer;border:0;white-space:nowrap}
.btn--white{background:#fff;color:var(--n800);box-shadow:0 4px 20px rgba(0,0,0,.1)}
.btn--white:hover{background:var(--n50);box-shadow:0 8px 36px rgba(0,0,0,.15);transform:translateY(-2px)}
.btn--ghost-light{background:0;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.2);font-size:.825rem}
.btn--ghost-light svg{opacity:.65}
.btn--ghost-light:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.btn--navy{background:var(--n800);color:#fff}
.btn--navy:hover{background:var(--n700);box-shadow:0 8px 28px rgba(14,29,53,.22);transform:translateY(-1px)}
.btn--full{width:100%;padding:17px;font-size:.9rem}

/* ══════════════════════════════════════════════
   HERO — Ocean Photo + Dark Luxury Overlay
   ══════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  padding:160px 0 120px;
  background:#050c18 url('../images/hero-ocean.jpg') center center / cover no-repeat;
}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,
      rgba(5,10,24,.72) 0%,
      rgba(8,18,40,.42) 32%,
      rgba(6,14,32,.35) 55%,
      rgba(4,10,22,.55) 78%,
      rgba(3,8,16,.72) 100%
    ),
    radial-gradient(ellipse 80% 60% at 50% 45%,transparent 0%,rgba(3,8,18,.25) 100%),
    linear-gradient(90deg,rgba(5,10,24,.35) 0%,transparent 25%,transparent 75%,rgba(5,10,24,.35) 100%);
}
.hero-wave{position:absolute;bottom:-1px;left:0;width:100%;height:120px;z-index:2}
.hero-grid{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-content{max-width:720px}
.hero-badge{
  display:inline-block;font-family:var(--en);font-size:.65rem;font-weight:600;
  letter-spacing:.32em;color:rgba(255,255,255,.6);text-transform:uppercase;
  margin-bottom:32px;padding:6px 16px;
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  background:rgba(255,255,255,.04);backdrop-filter:blur(8px);
}
.hero h1{font-size:clamp(1.75rem,4.5vw,3.1rem);font-weight:700;color:#fff;line-height:1.55;letter-spacing:.01em;margin-bottom:28px}
.hero h1 em{font-style:normal;color:#8ec5e5;font-weight:700;text-shadow:0 0 60px rgba(100,170,230,.15)}
.hero-sub{font-size:.92rem;color:rgba(255,255,255,.55);line-height:2.1;font-weight:300;margin-bottom:48px}

.hero-actions{display:flex;gap:16px;margin-bottom:72px;justify-content:center}

/* Hero stat cards */
.hero-stats{display:flex;gap:16px}
.stat-card{
  flex:1;text-align:center;padding:28px 20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:.35s var(--ease);
}
.stat-card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);transform:translateY(-3px)}
.stat-number{display:block;font-family:var(--en);font-size:2rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.stat-number small{font-size:.8rem;font-weight:400;opacity:.55;margin-left:2px}
.stat-label{display:block;margin-top:10px;font-size:.68rem;color:rgba(255,255,255,.45);letter-spacing:.08em;font-weight:400}

/* ══════════════════════════════════════════════
   Section Commons
   ══════════════════════════════════════════════ */
.sec-head{text-align:center;margin-bottom:72px}
.sec-label{
  font-family:var(--en);font-size:.6rem;font-weight:700;letter-spacing:.35em;
  color:var(--accent);text-transform:uppercase;display:inline-block;
  margin-bottom:16px;padding:4px 14px;
  border:1px solid rgba(46,92,154,.15);border-radius:20px;
  background:rgba(46,92,154,.04);
}
.sec-label--light{color:var(--n200);border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.sec-head h2{font-size:clamp(1.35rem,2.8vw,1.85rem);font-weight:700;letter-spacing:.03em;color:var(--text);line-height:1.5}
.sec-head--light h2{color:var(--n50)}
.sec-sub{margin-top:18px;font-size:.875rem;color:var(--text3);font-weight:300;line-height:2}
.sec-head--light .sec-sub{color:rgba(255,255,255,.45)}

/* ══════════════════════════════════════════════
   ② PROBLEMS
   ══════════════════════════════════════════════ */
.problems{background:var(--white);padding:120px 0 110px}
.problems-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:56px}
.problem-card{
  position:relative;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:40px 24px 36px;text-align:center;
  transition:.4s var(--ease);overflow:hidden;
}
.problem-card::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-light));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.problem-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(14,29,53,.08);border-color:transparent}
.problem-card:hover::before{transform:scaleX(1)}
.problem-num{font-family:var(--en);font-size:.6rem;font-weight:700;letter-spacing:.2em;color:var(--n200);margin-bottom:20px}
.problem-icon-wrap{width:52px;height:52px;margin:0 auto 22px;color:var(--accent);opacity:.7}
.problem-icon-wrap svg{width:100%;height:100%}
.problem-card h3{font-size:.88rem;font-weight:600;line-height:1.7;color:var(--text);margin-bottom:10px}
.problem-card p{font-size:.76rem;color:var(--text3);line-height:1.8;font-weight:300}

.problems-cta{text-align:center}
.problems-arrow{width:48px;height:48px;margin:0 auto 16px;color:var(--accent);opacity:.4;animation:arrowBounce 2s var(--ease) infinite}
@keyframes arrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.problems-cta p{font-size:.95rem;color:var(--text2);font-weight:300}
.problems-cta strong{color:var(--text);font-weight:700}

/* ══════════════════════════════════════════════
   ③ SERVICES
   ══════════════════════════════════════════════ */
.services{background:var(--warm);padding:120px 0 130px;position:relative}
.services::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.svc-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:44px 32px 36px;transition:.4s var(--ease);position:relative;
  display:flex;flex-direction:column;
}
.svc-card:hover{transform:translateY(-8px);box-shadow:0 24px 56px rgba(14,29,53,.08);border-color:transparent}
.svc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.svc-num{font-family:var(--en);font-size:2.2rem;font-weight:800;color:var(--n50);letter-spacing:-.02em;line-height:1;opacity:.7}
.svc-icon{width:48px;height:48px;color:var(--accent);opacity:.65}
.svc-icon svg{width:100%;height:100%}
.svc-card h3{font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:16px;letter-spacing:.02em}
.svc-card p{font-size:.84rem;color:var(--text2);line-height:2;font-weight:300;margin-bottom:24px}
.svc-card ul{display:flex;flex-direction:column;gap:8px;margin-bottom:28px;flex:1}
.svc-card li{font-size:.78rem;color:var(--text2);padding-left:18px;position:relative;font-weight:400}
.svc-card li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:1.5px;background:var(--accent);opacity:.5}
.svc-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.76rem;font-weight:600;color:var(--accent);letter-spacing:.04em;
  padding-top:16px;border-top:1px solid var(--border);margin-top:auto;transition:.3s var(--ease);
}
.svc-link:hover{gap:10px;color:var(--n700)}

/* ══════════════════════════════════════════════
   ④ STRENGTHS
   ══════════════════════════════════════════════ */
.strengths{position:relative;background:var(--n800);padding:120px 0 130px;overflow:hidden}
.strengths-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 80% at 20% 50%,rgba(46,92,154,.12),transparent),
    radial-gradient(ellipse 50% 80% at 80% 30%,rgba(30,60,120,.08),transparent);
}
.str-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.str-card{
  position:relative;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg);padding:44px 24px 40px;text-align:center;
  transition:.4s var(--ease);overflow:hidden;
}
.str-accent{position:absolute;top:0;left:50%;transform:translateX(-50%);width:40px;height:2px;background:var(--accent-light);opacity:.5;transition:.4s var(--ease)}
.str-card:hover{background:rgba(255,255,255,.07);transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.2)}
.str-card:hover .str-accent{width:100%;opacity:.7}
.str-num{font-family:var(--en);font-size:.6rem;font-weight:700;letter-spacing:.25em;color:var(--n300);display:block;margin-bottom:24px}
.str-icon{width:44px;height:44px;margin:0 auto 24px;color:var(--n200);opacity:.65}
.str-icon svg{width:100%;height:100%}
.str-card h3{font-size:.95rem;font-weight:600;color:var(--n50);margin-bottom:14px;letter-spacing:.03em}
.str-card p{font-size:.8rem;color:rgba(255,255,255,.4);line-height:2;font-weight:300}

/* ══════════════════════════════════════════════
   ⑤ RESULTS — 導入実績・改善効果
   ══════════════════════════════════════════════ */
.results{background:var(--white);padding:120px 0 130px}

/* 数値ブロック */
.results-hero{text-align:center;margin-bottom:64px}
.results-number-block{margin-bottom:24px}
.results-big{
  display:block;font-family:var(--en);font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:300;color:var(--text);letter-spacing:.02em;line-height:1.4;
}
.results-big em{
  font-style:normal;font-size:clamp(3.2rem,8vw,5rem);font-weight:900;
  color:var(--n700);letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--n700),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.results-big small{font-size:.55em;font-weight:500;-webkit-text-fill-color:var(--n700);color:var(--n700)}
.results-avg{
  display:inline-block;font-size:.85rem;font-weight:400;color:var(--text2);
  margin-top:8px;padding:6px 20px;
  border:1px solid var(--border);border-radius:20px;background:var(--off);
}
.results-desc{
  font-size:.9rem;color:var(--text2);font-weight:300;line-height:2.1;
  text-align:center;max-width:480px;margin:0 auto;
}

/* 改善内容カード */
.improve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
.improve-card{
  background:var(--off);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:36px 28px 32px;text-align:center;transition:.4s var(--ease);
}
.improve-card:hover{transform:translateY(-5px);box-shadow:0 16px 44px rgba(14,29,53,.06);border-color:transparent}
.improve-icon{width:48px;height:48px;margin:0 auto 20px;color:var(--accent);opacity:.55}
.improve-icon svg{width:100%;height:100%}
.improve-card h4{font-size:.92rem;font-weight:600;color:var(--text);margin-bottom:10px;letter-spacing:.02em}
.improve-card p{font-size:.78rem;color:var(--text3);line-height:1.95;font-weight:300}

/* まとめ */
.results-summary{
  text-align:center;font-size:.95rem;color:var(--text);font-weight:400;
  line-height:2;margin-bottom:72px;letter-spacing:.02em;
}
.results-summary strong{font-weight:700}

/* 導入事例 Before/After */
.case-study{
  max-width:820px;margin:0 auto;
  background:var(--off);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:48px 44px;
}
.case-head{text-align:center;margin-bottom:40px}
.case-badge{
  display:inline-block;font-family:var(--en);font-size:.58rem;font-weight:700;
  letter-spacing:.3em;color:var(--accent);text-transform:uppercase;
  padding:4px 14px;border:1px solid rgba(46,92,154,.15);
  border-radius:20px;background:rgba(46,92,154,.04);margin-bottom:14px;
}
.case-head h3{font-size:1.1rem;font-weight:600;color:var(--text);letter-spacing:.03em}

.case-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:start}
.case-arrow{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--white);border:1px solid var(--border);
  color:var(--accent);align-self:center;flex-shrink:0;
  box-shadow:0 2px 12px rgba(14,29,53,.04);
}

.case-before,.case-after{
  padding:28px 24px;border-radius:var(--r-lg);
}
.case-before{background:var(--white);border:1px solid var(--border)}
.case-after{background:var(--n800);border:1px solid var(--n700)}

.case-label{
  display:inline-block;font-family:var(--en);font-size:.6rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;padding:3px 12px;
  border-radius:4px;margin-bottom:18px;
}
.case-label--before{background:var(--warm);color:var(--text3)}
.case-label--after{background:rgba(46,92,154,.2);color:var(--accent-light)}

.case-before ul,.case-after ul{display:flex;flex-direction:column;gap:14px}
.case-before li,.case-after li{font-size:.84rem;line-height:1.7;font-weight:300;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.case-before li{color:var(--text2)}
.case-after li{color:rgba(255,255,255,.65)}

.case-item-label{font-size:.72rem;font-weight:500;letter-spacing:.06em;flex-shrink:0}
.case-before .case-item-label{color:var(--text3)}
.case-after .case-item-label{color:var(--n200)}

.case-item-val{font-family:var(--en);font-weight:400}
.case-item-val strong{font-size:1.4rem;font-weight:800;margin:0 2px}
.case-before .case-item-val{color:var(--text)}
.case-before .case-item-val strong{color:var(--text)}
.case-after .case-item-val{color:#fff}
.case-after .case-item-val strong{color:#fff}
.case-item-val small{font-size:.72rem;opacity:.6}

.case-item-tag{
  font-size:.65rem;font-weight:600;letter-spacing:.06em;
  padding:2px 10px;border-radius:3px;
  background:rgba(46,92,154,.2);color:var(--accent-light);
}

/* ══════════════════════════════════════════════
   ⑥ FLOW
   ══════════════════════════════════════════════ */
.flow{background:var(--warm);padding:120px 0 130px;position:relative}
.flow::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.flow-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:960px;margin:0 auto}
.flow-line{position:absolute;top:22px;left:48px;right:48px;height:1.5px;background:linear-gradient(90deg,var(--border),var(--n200),var(--border));z-index:0}
.flow-step{position:relative;z-index:1;text-align:center;padding:0 12px}
.flow-dot{
  width:46px;height:46px;margin:0 auto 24px;
  background:var(--white);border:2px solid var(--n200);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:.35s var(--ease);box-shadow:0 2px 8px rgba(14,29,53,.04);
}
.flow-dot span{font-family:var(--en);font-size:.65rem;font-weight:700;color:var(--n400);letter-spacing:.02em}
.flow-step:hover .flow-dot{background:var(--n700);border-color:var(--n700);transform:scale(1.08);box-shadow:0 6px 20px rgba(21,39,68,.2)}
.flow-step:hover .flow-dot span{color:#fff}
.flow-body{}
.flow-step h3{font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:10px;letter-spacing:.02em}
.flow-step p{font-size:.74rem;color:var(--text3);line-height:1.85;font-weight:300}

/* ══════════════════════════════════════════════
   ⑦ MID CTA
   ══════════════════════════════════════════════ */
.mid-cta{position:relative;overflow:hidden;background:#050c18 url('../images/hero-ocean.jpg') center 40% / cover no-repeat;padding:110px 0;text-align:center}
.mid-cta-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,10,22,.72) 0%,rgba(6,14,32,.52) 50%,rgba(4,10,22,.72) 100%),
    radial-gradient(ellipse 60% 50% at 50% 50%,transparent 0%,rgba(3,8,18,.35) 100%);
}
.mid-cta-inner{position:relative;z-index:2;max-width:620px;margin:0 auto}
.mid-cta-badge{
  display:inline-block;font-family:var(--en);font-size:.6rem;font-weight:600;
  letter-spacing:.3em;color:rgba(255,255,255,.5);text-transform:uppercase;
  margin-bottom:24px;padding:5px 14px;
  border:1px solid rgba(255,255,255,.1);border-radius:20px;
  background:rgba(255,255,255,.03);
}
.mid-cta-inner h2{font-size:clamp(1.25rem,3vw,1.65rem);font-weight:600;color:#fff;margin-bottom:18px;letter-spacing:.04em;line-height:1.65}
.mid-cta-inner p{font-size:.875rem;color:rgba(255,255,255,.45);font-weight:300;line-height:2.1;margin-bottom:40px}
.mid-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ══════════════════════════════════════════════
   ⑧ FAQ
   ══════════════════════════════════════════════ */
.faq{background:var(--white);padding:120px 0}
.faq-list{max-width:740px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 0;font-size:.9rem;font-weight:500;color:var(--text);
  cursor:pointer;list-style:none;letter-spacing:.02em;transition:.3s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';font-family:var(--en);font-size:1.2rem;font-weight:300;
  color:var(--n300);transition:.3s var(--ease);flex-shrink:0;margin-left:24px;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:50%;
}
.faq-item[open] summary::after{content:'−';border-color:var(--accent);color:var(--accent)}
.faq-item summary:hover{color:var(--accent)}
.faq-item p{padding:0 0 28px;font-size:.84rem;color:var(--text2);line-height:2.1;font-weight:300}

/* ══════════════════════════════════════════════
   COMPANY
   ══════════════════════════════════════════════ */
.company{background:var(--n800);padding:120px 0 130px}
.co-table{width:100%;max-width:760px;margin:0 auto;border-collapse:collapse}
.co-table tr{border-bottom:1px solid rgba(255,255,255,.06)}
.co-table th,.co-table td{padding:20px 0;font-size:.84rem;vertical-align:top;text-align:left;line-height:1.95}
.co-table th{width:140px;color:var(--n200);font-weight:500;letter-spacing:.06em;white-space:nowrap;padding-right:32px}
.co-table td{color:rgba(255,255,255,.7);font-weight:300}
.co-table td a{color:var(--n100);border-bottom:1px solid rgba(255,255,255,.15);transition:.3s}
.co-table td a:hover{color:#fff;border-color:#fff}

/* ══════════════════════════════════════════════
   ⑨ CONTACT
   ══════════════════════════════════════════════ */
.contact{background:var(--off);padding:120px 0 130px}
.contact-layout{display:grid;grid-template-columns:340px 1fr;gap:48px;max-width:920px;margin:0 auto;align-items:start}
.contact-sidebar{position:sticky;top:100px}
.trust-box{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:36px 28px;margin-bottom:20px}
.trust-title{font-size:.78rem;font-weight:600;color:var(--text);letter-spacing:.04em;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.trust-item{display:flex;align-items:center;gap:12px;font-size:.84rem;color:var(--text2);font-weight:300;padding:9px 0}
.trust-item svg{color:var(--accent);opacity:.6;flex-shrink:0}
.trust-item strong{font-weight:600;color:var(--text)}
.tel-box{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;text-align:center}
.tel-label{font-size:.68rem;color:var(--text3);letter-spacing:.08em;display:block;margin-bottom:10px}
.tel-num{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--en);font-size:1.5rem;font-weight:700;color:var(--text);letter-spacing:.03em;margin-bottom:6px}
.tel-num svg{color:var(--accent);opacity:.5}
.tel-num:hover{color:var(--accent)}
.tel-hours{font-size:.68rem;color:var(--text3)}

/* Form */
.c-form{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:44px 40px;min-height:500px}
.formrun-wrapper{min-height:600px;overflow:hidden}
.formrun-embed{width:100%}
.formrun-embed iframe{width:100%!important;min-height:600px!important;border:0!important}
.fg{margin-bottom:24px}
.fg label{display:block;font-size:.78rem;font-weight:500;color:var(--text);margin-bottom:8px;letter-spacing:.03em}
.req{font-size:.58rem;color:#C62828;font-weight:600;margin-left:6px;padding:1px 6px;background:rgba(198,40,40,.06);border-radius:3px}
.opt{font-size:.58rem;color:var(--text3);margin-left:6px}
.fg input,.fg select,.fg textarea{
  width:100%;padding:12px 16px;
  border:1px solid var(--border);border-radius:var(--r);
  font-size:.88rem;color:var(--text);background:var(--off);
  transition:.3s var(--ease);line-height:1.6;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,92,154,.08);background:var(--white)}
.fg input::placeholder,.fg textarea::placeholder{color:var(--n100)}
.fg select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M5 6L0 0h10z' fill='%238DA3C4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chk{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 0}
.chk input[type="checkbox"]{width:16px;height:16px;accent-color:var(--n700);cursor:pointer;flex-shrink:0}
.chk span{font-size:.8rem;color:var(--text2)}
.chk a{color:var(--accent);border-bottom:1px solid rgba(46,92,154,.3)}
.chk a:hover{color:var(--n700)}
.fg-privacy{margin:28px 0 32px}

/* Form success */
.form-ok{grid-column:1/-1;text-align:center;padding:80px 32px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg)}
.form-ok svg{margin-bottom:28px;opacity:.6}
.form-ok h3{font-size:1.1rem;font-weight:600;color:var(--text);margin-bottom:12px;letter-spacing:.04em}
.form-ok p{font-size:.84rem;color:var(--text2);font-weight:300;line-height:2.1}

/* ══════════════════════════════════════════════
   LINE BUTTONS — LP統一デザイン
   ══════════════════════════════════════════════ */
/* Hero: 半透明ボーダーボタン（他2つと並列） */
.btn--line{
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.2);
}
.btn--line svg{opacity:.65}
.btn--line:hover{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.4)}

/* Mid-CTA: アウトラインボタン */
.btn--line-outline{
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.18);font-size:.825rem;
}
.btn--line-outline svg{opacity:.55}
.btn--line-outline:hover{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.1)}

/* Sidebar: ネイビーボタン */
.btn--line-side{
  width:100%;padding:13px;font-size:.82rem;font-weight:500;letter-spacing:.06em;
  background:var(--n800);color:#fff;border-radius:var(--r);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:.35s var(--ease);
}
.btn--line-side svg{opacity:.6}
.btn--line-side:hover{background:var(--n700);box-shadow:0 6px 24px rgba(14,29,53,.18);transform:translateY(-1px)}

/* Sidebar LINE box */
.line-box{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px 28px;text-align:center;margin-top:16px;
}
.line-box-label{font-size:.68rem;color:var(--text3);letter-spacing:.08em;display:block;margin-bottom:12px}
.line-box-sub{display:block;margin-top:10px;font-size:.65rem;color:var(--text3);font-weight:300}

/* Footer LINE */
.footer-line{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:.75rem;color:var(--n400);transition:.3s var(--ease);
}
.footer-line svg{opacity:.5}
.footer-line span{border-bottom:1px solid transparent}
.footer-line:hover{color:var(--n200)}
.footer-line:hover span{border-color:var(--n300)}

/* ══════════════════════════════════════════════
   FLOATING CTA
   ══════════════════════════════════════════════ */
.fab{
  position:fixed;bottom:28px;right:28px;z-index:999;
  display:flex;align-items:center;gap:8px;
  padding:13px 28px;background:var(--n800);color:#fff;
  font-size:.76rem;font-weight:500;letter-spacing:.08em;
  border-radius:var(--r);box-shadow:0 8px 32px rgba(6,13,27,.25);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:.4s var(--ease);
}
.fab svg{opacity:.6}
.fab.show{opacity:1;transform:translateY(0);pointer-events:all}
.fab:hover{background:var(--n700);box-shadow:0 12px 44px rgba(6,13,27,.3);transform:translateY(-2px)}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.footer{background:var(--n900);padding:64px 0 0}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.05)}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.logo-img--footer{height:28px;filter:brightness(0) invert(1);opacity:.6}
.footer-logo .logo-text{color:rgba(255,255,255,.7);font-size:.95rem}
.footer-logo .logo-text small{color:rgba(255,255,255,.35)}
.footer-brand p{font-size:.78rem;color:var(--n400);line-height:2;font-weight:300}
.footer-nav{display:flex;flex-direction:column;gap:12px}
.footer-nav-head{font-size:.68rem;font-weight:600;letter-spacing:.15em;color:var(--n300);text-transform:uppercase;margin-bottom:4px;display:block}
.footer-nav a{font-size:.78rem;color:var(--n400);transition:.3s}
.footer-nav a:hover{color:#fff}
.footer-info{display:flex;flex-direction:column;gap:4px}
.footer-info p{font-size:.78rem;color:var(--n400);font-weight:300}
.footer-info a{color:var(--n300);transition:.3s}
.footer-info a:hover{color:#fff}
.footer-addr{margin-top:10px;font-size:.72rem;color:rgba(255,255,255,.2);line-height:1.85}
.footer-copy{text-align:center;padding:28px 0}
.footer-copy p{font-size:.62rem;color:rgba(255,255,255,.2);letter-spacing:.08em}

/* ══════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════ */
[data-a]{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-a].in{opacity:1;transform:translateY(0)}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media(max-width:1024px){
  .problems-grid{grid-template-columns:repeat(2,1fr)}
  .str-grid{grid-template-columns:repeat(2,1fr)}
  .improve-grid{grid-template-columns:repeat(3,1fr)}
  .case-ba{grid-template-columns:1fr auto 1fr}
  .flow-track{grid-template-columns:1fr;max-width:440px;gap:0}
  .flow-line{display:none}
  .flow-step{text-align:left;display:grid;grid-template-columns:46px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--border)}
  .flow-step:last-child{border-bottom:0}
  .flow-dot{margin:0}
  .flow-step h3,.flow-step p{text-align:left}
  .contact-layout{grid-template-columns:1fr;max-width:620px}
  .contact-sidebar{position:static}
}
@media(max-width:768px){
  .container{padding:0 20px}
  .sp{display:inline}
  .nav,.header-cta{display:none}
  .burger{display:flex}
  .mob-nav{display:flex}
  .header-inner{height:64px}
  .hero{min-height:auto;padding:130px 0 80px}
  .hero h1{font-size:1.55rem}
  .hero-actions{flex-direction:column;gap:12px}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-stats{flex-direction:column;gap:12px}
  .stat-card{padding:20px}
  .stat-number{font-size:1.6rem}
  .problems{padding:80px 0}
  .problems-grid{grid-template-columns:1fr 1fr;gap:14px}
  .services{padding:80px 0 90px}
  .services-grid{grid-template-columns:1fr}
  .strengths{padding:80px 0 90px}
  .str-grid{grid-template-columns:1fr}
  .results{padding:80px 0 90px}
  .improve-grid{grid-template-columns:1fr}
  .case-study{padding:32px 24px}
  .case-ba{grid-template-columns:1fr;gap:16px}
  .case-arrow{transform:rotate(90deg);margin:0 auto}
  .case-before,.case-after{padding:24px 20px}
  .flow{padding:80px 0 90px}
  .mid-cta{padding:80px 0}
  .mid-cta-actions{flex-direction:column;align-items:center}
  .mid-cta-actions .btn{width:100%;max-width:320px}
  .faq{padding:80px 0}
  .company{padding:80px 0 90px}
  .contact{padding:80px 0 90px}
  .fg-row{grid-template-columns:1fr}
  .chk-grid{grid-template-columns:1fr}
  .c-form{padding:28px 22px}
  .footer-inner{grid-template-columns:1fr;gap:32px}
  .fab{bottom:20px;right:20px;padding:11px 22px;font-size:.72rem}
  .sec-head{margin-bottom:48px}
}
@media(max-width:480px){
  .hero{padding:110px 0 60px}
  .hero h1{font-size:1.35rem}
  .hero-badge{font-size:.55rem}
  .problems-grid{grid-template-columns:1fr}
  .results-big em{font-size:3rem}
  .co-table th{display:block;width:100%;padding-bottom:4px}
  .co-table td{display:block;padding-top:0;padding-bottom:20px}
}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--off)}
::-webkit-scrollbar-thumb{background:var(--n200);border-radius:4px}
::selection{background:var(--n700);color:#fff}