:root{
  --brand:#2563eb;
  --brand2:#60a5fa;
  --accent:#1d4ed8;
  --ink:#0f172a;
  --muted:#64748b;
  --soft:#f1f5f9;
  --card:#ffffff;
  --radius:20px;
  --shadow:0 10px 30px rgba(37,99,235,.15);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#ffffff;color:var(--ink);font-family:'Noto Sans JP',system-ui,-apple-system,sans-serif;position:relative;line-height:1.7}

/* Global subtle BG (behind everything) */
body::before{
  content:"";position:fixed;inset:-14vmax;z-index:-3;pointer-events:none;filter:blur(42px) saturate(110%);background:
    radial-gradient(60vmax 60vmax at -10% 12%, rgba(96,165,250,.20), transparent 60%),
    conic-gradient(from 220deg at 82% 22%, rgba(37,99,235,.14), transparent 35%),
    conic-gradient(from 20deg at 18% 78%, rgba(59,130,246,.12), transparent 40%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.45;mix-blend-mode:soft-light;background:
    radial-gradient(120% 100% at 50% 140%, rgba(2,6,23,.05), transparent 60%),
    radial-gradient(120% 100% at 50% -40%, rgba(2,6,23,.05), transparent 60%);
}

.container{width:min(1200px,92vw);margin-inline:auto}
a{color:var(--brand);text-decoration:none}

/* Header */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(15,23,42,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo-svg{width:40px;height:40px;display:block}
.brand b{font-family:Poppins,sans-serif;font-size:1.2rem;color:var(--brand)}
.actions{display:flex;gap:10px;align-items:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;border:1px solid rgba(2,6,23,.08);background:#fff;color:var(--ink);font-weight:700;cursor:pointer;transition:.25s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:none;box-shadow:0 0 18px rgba(96,165,250,.35)}
.btn.phone{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:1px solid rgba(255,255,255,.7);box-shadow:0 0 18px rgba(96,165,250,.25)}
.btn svg{width:18px;height:18px;flex:0 0 18px}

/* Hero */
.hero{position:relative;overflow:hidden;min-height:86vh;display:grid;place-items:center;text-align:center;color:#fff}
@supports(height:100svh){.hero{min-height:100svh}}
@supports(height:100dvh){.hero{min-height:100dvh}}
.kv-media{position:absolute;inset:0;z-index:-2;pointer-events:none}
.kv-media .kv-img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(70% 50% at 50% 30%, rgba(255,255,255,.22), transparent 65%),
  linear-gradient(to bottom, rgba(3,7,18,.05) 0%, rgba(3,7,18,.18) 45%, rgba(3,7,18,.28) 100%);
}
.hero-inner{position:relative;z-index:3;max-width:900px;padding:80px 0}
.hero-panel{
  margin-inline:auto;padding:24px 28px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px) saturate(120%);
  box-shadow:0 12px 40px rgba(0,0,0,.18)
}
.hero h1{font-family:Poppins,sans-serif;font-weight:800;font-size:clamp(32px,5vw,64px);line-height:1.15;margin:0 0 14px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.lead{color:#ffffff;font-size:18px;margin:0 auto 20px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Hero particles */
.hero-canvas{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.85}

/* Sections */
section{padding:100px 0;position:relative}
.section-title{font-family:Poppins,sans-serif;font-size:clamp(24px,3vw,36px);font-weight:800;color:#0b1950;text-align:center;margin:0 0 12px}
.section-sub{text-align:center;color:var(--muted);margin:0 0 42px}
.wave::before{content:"";position:absolute;left:0;right:0;top:-9vw;height:12vw;z-index:-1;pointer-events:none;background:radial-gradient(80% 120% at 50% 120%, rgba(241,245,249,.86), rgba(255,255,255,0) 70%)}
.wave::after{content:"";position:absolute;left:0;right:0;bottom:-9vw;height:12vw;z-index:-1;pointer-events:none;background:radial-gradient(80% 120% at 50% -20%, rgba(241,245,249,.72), rgba(255,255,255,0) 70%)}
.float-panel{position:relative;z-index:2;margin-top:-8vw;background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:24px;box-shadow:0 28px 60px rgba(2,6,23,.08), 0 12px 28px rgba(37,99,235,.06);padding:clamp(18px,3vw,34px)}
.float-panel::after{content:"";position:absolute;inset:-10px;border-radius:inherit;background:radial-gradient(60% 40% at 50% 0%, rgba(96,165,250,.15), transparent 70%);z-index:-1;filter:blur(16px);opacity:.5}

/* Grid & Cards */
.grid{display:grid;gap:18px}
@media(min-width:900px){.grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-2{grid-template-columns:1.15fr .85fr}}
.card{background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:.3s}
.card:hover{transform:translateY(-4px)}
.card h3{margin:10px 0 8px;color:#0b1950}
.badge{display:inline-flex;align-items:center;gap:.4em;font-size:12px;padding:6px 12px;border-radius:999px;background:rgba(37,99,235,.12);color:#0b1950;margin-bottom:10px;width:auto;white-space:nowrap}

/* Thumbs */
.thumb{position:relative;border-radius:18px;border:1.5px solid transparent;aspect-ratio:4/3;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg, rgba(37,99,235,.25), rgba(96,165,250,.25)) border-box}
.thumb::after{content:'';position:absolute;inset:2px;border-radius:16px;background:var(--img, url('/image/scene1.jpg')) center/cover no-repeat;transition:transform .6s ease}
.card:hover .thumb::after{transform:scale(1.02)}

/* Pricing */
.price-badge{display:inline-block;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:6px 10px;border-radius:10px;font-size:12px;margin-bottom:6px;box-shadow:0 0 15px rgba(37,99,235,.3)}
.price-list{display:grid;gap:12px}
.price-row{display:flex;justify-content:space-between;align-items:center;padding:12px;background:rgba(37,99,235,.05);border-radius:12px}
.cap{font-size:12px;color:var(--muted)}
.ul{margin:10px 0 0 18px;padding:0}
.muted{margin-top:12px;color:var(--muted)}

/* Flow */
.flow-wrap{max-width:820px;margin:0 auto;position:relative}
.flow{counter-reset:step;margin-top:10px;position:relative}
.flow::before{content:'';position:absolute;left:28px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,rgba(37,99,235,.25),rgba(96,165,250,.25))}
.flow li{list-style:none;position:relative;padding-left:76px;margin:0 0 22px}
.flow li::before{counter-increment:step;content:counter(step);position:absolute;left:12px;top:0;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:grid;place-items:center;font-weight:700;box-shadow:0 4px 12px rgba(37,99,235,.25)}

/* Case */
.case-wrap{max-width:1100px;margin:0 auto;display:grid;gap:24px}
@media(min-width:900px){.case-wrap{grid-template-columns:1fr 1fr}}
.case-item{background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:16px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column}
.case-item h3{margin:0 0 8px;color:#0b1950}
.case-item .video{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.case-item iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}

/* FAQ */
.faq details{border:1px solid rgba(15,23,42,.08);border-radius:14px;padding:14px 18px;background:#fff;box-shadow:var(--shadow)}
.faq details+details{margin-top:12px}
.faq summary{cursor:pointer;font-weight:700;color:#0b1950;display:flex;align-items:center;gap:8px}
.faq summary::before{content:'❓'}
.faq details[open] summary::before{content:'💡'}
.faq .ans{margin-top:8px;color:var(--muted)}

/* Contact & Form */
.contact-center{display:grid;place-items:center}
.contact-actions{display:grid;gap:12px;grid-template-columns:1fr;align-items:stretch;justify-items:center}
@media(min-width:800px){.contact-actions{grid-template-columns:1fr 1fr}}
.btn.is-call{gap:12px}
.btn .sub{display:block;font-size:12px;opacity:.85;line-height:1.2}
.contact-actions .btn{min-height:64px;height:100%;padding:14px 20px;display:flex;align-items:center;justify-content:center;line-height:1.15}
.icon-circle{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.18);display:grid;place-items:center}

.form-card{margin-top:16px}
form.contact-form{display:grid;gap:18px}
.form-title{margin:0 0 6px;color:#0b1950}
.form-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:800px){.form-grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;color:#0b1950;font-weight:700}
.field input,.field textarea{padding:12px 14px;border:1px solid rgba(15,23,42,.12);border-radius:12px;background:#fff;outline:none;transition:.2s;box-shadow:0 0 0 0 rgba(37,99,235,0)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:rgba(37,99,235,.5);box-shadow:0 0 0 4px rgba(96,165,250,.18)}
.radio-group{display:flex;flex-wrap:wrap;gap:10px}
.radio-group label{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(15,23,42,.12);border-radius:999px;background:#fff;cursor:pointer}
.radio-group input{accent-color:#2563eb}
.privacy-box{max-height:120px;overflow:auto;padding:12px 14px;border:1px solid rgba(15,23,42,.12);border-radius:12px;background:#fff;font-size:12px;color:#64748b}
.privacy-box h4{margin:0 0 6px;font-size:12px;color:#0b1950}
.privacy-box p{margin:6px 0}
.consent{display:flex;align-items:flex-start;gap:10px}
.consent input{margin-top:2px;accent-color:#2563eb}
.submit-row{display:flex;justify-content:center}
.submit-row .btn{justify-content:center}
.notice{padding:16px;border:1px solid rgba(15,23,42,.12);border-radius:12px;background:#f0f9ff;color:#0b1950;text-align:center}
.notice.hidden{display:none}
.notice.success{background:#ecfdf5;border-color:#10b981}
.notice.error{background:#fef2f2;border-color:#ef4444}
.contact-narrow{width:100%;max-width:900px;margin:0 auto}

/* Appear */
[data-fade]{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
[data-fade].visible{opacity:1;transform:none}

/* Responsive */
@media(max-width:860px){
  .actions{flex-wrap:wrap}
  .hero{min-height:64vh}
  .hero-inner{padding:64px 0}
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
}

/* === Validation & feedback === */
.field.invalid input,.field.invalid textarea{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.field .err{color:#b91c1c;font-size:12px;line-height:1.4}

footer{
  position: relative;
  padding: 72px 0 44px;
  color: #0b1950;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(37,99,235,.06), rgba(96,165,250,.06)),
    var(--soft);
  border-top: 1px solid rgba(15,23,42,.06);
  overflow: clip; /* iOSのはみ出し対策 */
}

/* 上部に柔らかいトーンのトランジション */
footer::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -8vw; height: 10vw;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 0,
              rgba(241,245,249,.92), rgba(255,255,255,0) 70%);
}

/* 中央寄せ＆縦積み */
footer .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ロゴの見映えを少し持ち上げる */
.footer-brand{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
  filter: drop-shadow(0 8px 24px rgba(37,99,235,.15));
}

/* ロゴのサイズはデバイスに応じて最適化 */
.logo-lockup{
  width: 360px;
  max-width: 92vw;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* コピー表記のトーンを落として可読性UP */
footer .container > div:last-child{
  color: #475569;
  font-size: 13px;
  letter-spacing: .02em;
}

/* ======= Responsive ======= */
@media (max-width: 780px){
  footer{ padding: 56px 0 36px; }
  .logo-lockup{ width: 280px; }
  footer .container > div:last-child{ font-size: 12px; }
}
@media (max-width: 420px){
  footer{ padding: 48px 0 30px; }
  .logo-lockup{ width: 240px; }
}

.case-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 1.5rem;
}

.case-track {
  display: flex;
  gap: 1.2rem;
  scroll-behavior: smooth;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem;
  scrollbar-width: none;
}
.case-track::-webkit-scrollbar { display: none; }

/* 各カード設定 */
.case-item {
  flex: 0 0 calc(33.333% - 0.8rem);
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  scroll-snap-align: start;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.case-item h3 { font-size: 1rem; margin-bottom: .5rem; }
.video iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 8px;
}

/* ボタン */
.case-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background .2s;
  z-index: 10;
}
.case-btn:hover { background: white; }
.case-btn.prev { left: 8px; }
.case-btn.next { right: 8px; }

/* スマホで1枚ずつ表示 */
@media (max-width: 1024px) {
  .case-item { flex: 0 0 80%; max-width: 80%; }
}

@media (max-width: 600px) {
  .case-item { flex: 0 0 90%; max-width: 90%; }
  .case-btn { width: 32px; height: 32px; font-size: 1.2rem; }
}