:root{
  --bg:#f7f8fa;--fg:#0f172a;--muted:#5b6475;
  --brand:#0ea5e9;--brand-2:#0284c7;--ok:#16a34a;
  --card:#ffffff;--border:#e5e7eb;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04);
  --shadow-md:0 8px 24px rgba(2,8,23,.08),0 2px 8px rgba(2,8,23,.06);
  --shadow-lg:0 24px 48px rgba(2,8,23,.1),0 8px 24px rgba(2,8,23,.08)
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;color:var(--fg);
  font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.75;
  background:linear-gradient(180deg,#fbfdff 0%,#f6faff 60%,#f7f8fa 100%)
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none;transition:opacity .2s ease,transform .2s ease}
a:hover{opacity:.9}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* Header */
.topbar{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{
  width:44px;height:44px;border-radius:12px;
  background:radial-gradient(75% 75% at 20% 20%, #38bdf8 0%, #0ea5e9 40%, #0369a1 100%);
  display:grid;place-items:center;color:white;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px rgba(14,165,233,.35)
}
.brand__name{font-weight:800;letter-spacing:.02em}
.nav__links{display:flex;gap:14px;flex-wrap:wrap}

/* ヘッダー/CTAの自動隠し表示 */
.topbar--hidden { transform: translateY(-100%); }
.cta-bar--hidden { transform: translateY(100%); }
.topbar, .cta-bar { transition: transform .25s ease; will-change: transform; }

/* ハンバーガー */
.nav-toggle{
  display:none; border:1px solid #cfe8ff; background:#fff; border-radius:10px;
  padding:8px 10px; font-size:16px; box-shadow:var(--shadow-sm);
}

/* モバイル時のナビ展開 */
@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  /* デフォは畳む */
  #site-nav{ 
    position:absolute; right:16px; top:58px; /* ヘッダー下 */
    background:#fff; border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow-lg); padding:10px; display:none; flex-direction:column; gap:10px;
    width: min(88vw, 360px);
  }
  #site-nav.is-open{ display:flex; }
  /* ヘッダーは少し低くする */
  .nav{ padding:8px 0; }
  .brand__name{ font-size:14px; }
  .brand__logo{ width:38px; height:38px; }

  /* スマホはヘッダーを“常時固定”→ではなく、必要時だけ表示。スクロールで隠れる */
  .topbar{ position:sticky; top:0; z-index:40; }

  /* 下部CTAもスクロールで隠れる */
  .cta-bar{ position:sticky; bottom:0; z-index:30; }

  /* コンテンツが被らないように上下の余白を自動確保（見た目を保ちながら） */
  main{ padding-top: 4px; padding-bottom: 70px; } /* 下部CTAの高さぶん */
}

/* 入力フォーカス中は下部CTAを隠して入力欄を広く（モバイルキーボード対策） */
.input:focus ~ .cta-bar,
:focus-within .cta-bar { display:none; }

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--brand);
  background:linear-gradient(180deg,#38bdf8,#0ea5e9);
  color:#fff;padding:12px 16px;border-radius:12px;font-weight:800;
  box-shadow:0 6px 14px rgba(14,165,233,.28);
  transform:translateY(0);
  transition:transform .15s ease,box-shadow .2s ease,opacity .2s
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(14,165,233,.35)}
.btn--ghost{background:transparent;color:var(--brand);border-color:#bae6fd;box-shadow:none}
.btn--ghost:hover{background:#e0f2fe}
.btn--accent{
  background:linear-gradient(180deg,#34d399,#16a34a);
  border-color:#22c55e;box-shadow:0 6px 14px rgba(34,197,94,.28)
}

/* Hero */
.hero{padding:68px 0 32px 0}
.hero__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
.badge{
  display:inline-block;background:linear-gradient(90deg,#e0f2fe,#e6fffb);
  color:#075985;border:1px solid #bae6fd;padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.02em;box-shadow:var(--shadow-sm)
}
h1{font-size:clamp(26px,4vw,40px);line-height:1.2;margin:12px 0 10px;letter-spacing:.01em}
.lead{color:var(--muted);font-size:clamp(15px,2.2vw,18px)}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* 抽象ヒーロービジュアル（写真不使用） */
.hero-visual{
  height:280px;border-radius:20px;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(2,132,199,.25), transparent 60%),
    radial-gradient(100% 100% at 0% 100%, rgba(14,165,233,.25), transparent 60%),
    linear-gradient(135deg,#e0f2fe 0%,#f0fdfa 100%);
  position:relative; overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--border);
}
.hero-visual::before{
  /* ブロブ形状のマスク */
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(50% 50% at 50% 50%, #38bdf8 0%, #0ea5e9 40%, #0369a1 100%);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><path d="M93,225C64,148,139,61,236,62c97,1,128,58,197,66,69,9,136-21,141,44,5,66-64,93-121,115-58,22-92,53-155,54-63,1-131-31-205-116Z" fill="white"/></svg>') no-repeat center/90% 90%;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><path d="M93,225C64,148,139,61,236,62c97,1,128,58,197,66,69,9,136-21,141,44,5,66-64,93-121,115-58,22-92,53-155,54-63,1-131-31-205-116Z" fill="white"/></svg>') no-repeat center/90% 90%;
  opacity:.75; filter:saturate(1.1) blur(.3px);
}
.hero-visual::after{
  /* 微細ノイズで質感付与 */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.08;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
  background-size:140px 140px; mix-blend-mode:multiply;
}

/* Quick section links */
.section-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid #e0f2fe;background:#f0f9ff;box-shadow:var(--shadow-sm);font-weight:700}

/* Sections */
.section{padding:48px 0}
.section.alt{background:#f8fbff}

/* Cards & Grid */
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow-md)}
.card:hover{box-shadow:var(--shadow-lg)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

h2{
  font-size:clamp(22px,3vw,30px);margin:0 0 16px;font-weight:900;letter-spacing:.01em;position:relative
}
h2::after{
  content:"";display:block;width:72px;height:4px;border-radius:6px;
  background:linear-gradient(90deg,#38bdf8,#0ea5e9);margin-top:8px
}
h3{margin:8px 0;font-weight:800}
.muted{color:var(--muted)}

/* Staff list */
.staff{padding-left:18px}

/* Timeline */
.timeline{display:grid;gap:14px}
.step{display:flex;gap:12px;align-items:flex-start}
.step span{
  width:28px;height:28px;border-radius:999px;background:linear-gradient(180deg,#38bdf8,#0ea5e9);
  color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:var(--shadow-sm);flex:0 0 auto
}

.avatar{
  width:36px;height:36px;border-radius:50%;
  display:inline-grid;place-items:center;margin-right:8px;
  font-weight:900;color:#fff;background:linear-gradient(180deg,#38bdf8,#0ea5e9);
  box-shadow:var(--shadow-sm);vertical-align:middle;
}


/* ダミー画像風フレーム（写真なし） */
.fake-img{
  height:120px;border-radius:12px;margin-bottom:10px;
  background:linear-gradient(135deg,#e9f5ff 0%,#f2fff8 100%);
  border:1px dashed #cfe8ff; position:relative; overflow:hidden;
}
.fake-img::before{
  content:""; position:absolute; inset:12px;
  border-radius:10px; border:1px solid #e5eefb;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}


/* KPI chips */
.kpis{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.kpi{
  flex:1;min-width:180px;background:linear-gradient(180deg,#ffffff,#f9fbff);
  border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;box-shadow:var(--shadow-sm)
}
.kpi .muted{font-size:12px;text-transform:uppercase;letter-spacing:.08em}

/* Table */
table{
  width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden
}
th,td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top}
tr:nth-child(even) td{background:#fbfdff}
tr:last-child td{border-bottom:none}
thead th{background:linear-gradient(180deg,#f0f9ff,#eaf6ff);text-align:left;font-weight:800}

/* FAQ */
.faq details{
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;
  box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .15s ease
}
.faq details:not([open]):hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.faq details summary{cursor:pointer;font-weight:800;list-style:none}
.faq details summary::-webkit-details-marker{display:none}
.faq details summary::after{content:"＋";float:right;font-weight:900;color:#0ea5e9;transition:transform .2s ease}
.faq details[open] summary::after{content:"−";transform:scale(1.1)}
.faq details[open]{outline:2px solid #c7e6ff}

/* CTA bar & Footer */
.cta-bar{
  position:sticky;bottom:0;z-index:30;background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(2,8,23,.06)
}
.cta-bar__inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0}
.cta-bar__btns{display:flex;gap:10px;flex-wrap:wrap}

footer{background:linear-gradient(180deg,#0b1220,#0a1326);color:#dbeafe;margin-top:24px}
footer a{color:#93c5fd}
.footer__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;padding:32px 0}
.copy{text-align:center;padding:12px 0;border-top:1px solid #122239;color:#93c5fd}

/* Buttons common */
.pill{
  padding:6px 12px;background:linear-gradient(90deg,#ecfeff,#f0fdfa);
  border:1px solid #cffafe;border-radius:999px;font-size:12px;box-shadow:var(--shadow-sm)
}
.input{
  width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;margin-bottom:12px;background:#fff;
  box-shadow:inset 0 1px 0 #fff,0 0 0 3px transparent;transition:box-shadow .15s ease,border-color .15s ease
}
.input:focus{outline:none;border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.15)}

/* To top button */
#totop{
  position:fixed;right:16px;bottom:84px;width:44px;height:44px;border-radius:999px;border:1px solid #cfe8ff;
  background:linear-gradient(180deg,#f1f9ff,#e7f2ff);box-shadow:var(--shadow-md);cursor:pointer;display:none;font-weight:900
}

/* Responsive */
@media (max-width:1024px){.container{padding:0 16px}}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
}

.next-action {
  text-align: right;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.next-action a {
  color: #0a84ff;
  text-decoration: underline;
  font-weight: 500;
}