/* ===== kotokoto cute v7 ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif; color:#222; }
:root{
  --brand:#73a7ff; --brand-2:#385898; --accent:#f2f6ff; --accent-pink:#ffeaf2;
  --bg:#fff; --muted:#6b7280; --link:#3466ff; --shadow:0 10px 24px rgba(56,88,152,.12);
}
a{ color:var(--link); text-decoration:none; } a:hover{ text-decoration:underline; }
.container{ width:min(1100px,92%); margin:0 auto; }
.header{ position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #eee; transition: box-shadow .3s, background .3s; }
.header.shrink{ box-shadow:0 4px 16px rgba(0,0,0,.06); background:rgba(255,255,255,.9); backdrop-filter: blur(6px); }
.header .inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:12px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.04em; color:var(--brand-2); }
.logo img{ width:30px; height:30px; }
.nav{ display:flex; align-items:center; gap:18px; }
.nav a{ color:#222; font-weight:700; }
.burger{ display:none; width:40px; height:40px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; align-items:center; justify-content:center; }
.burger span{ width:18px; height:2px; background:#394b7a; display:block; position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#394b7a; transition: transform .25s; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
@media (max-width:860px){
  .nav{ display:none; position:absolute; top:62px; left:0; right:0; background:#fff; border-bottom:1px solid #eee; padding:12px 4%; flex-direction:column; gap:12px; }
  .nav.open{ display:flex; } .burger{ display:flex; }
}

.hero{ padding:66px 0 46px; border-bottom:1px solid #f0f0f0;
  background:
    radial-gradient(1000px 400px at -10% -10%, var(--accent-pink) 0%, transparent 60%),
    radial-gradient(900px 380px at 110% 0%, var(--accent) 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, #fff 100%);
  position:relative; overflow:hidden;
}
.hero::after{ content:""; position:absolute; width:220px; height:220px; right:-40px; top:-40px;
  background: radial-gradient(closest-side, #ffd6e6 0%, transparent 70%);
  filter: blur(8px); opacity:.7; border-radius:50%; animation: floaty 12s ease-in-out infinite;
}
@keyframes floaty{ 0%{transform:translateY(0) translateX(0);} 50%{transform:translateY(14px) translateX(-6px);} 100%{transform:translateY(0) translateX(0);} }
.hero h1{ font-size: clamp(28px, 3.6vw, 44px); margin:0 0 14px; color:var(--brand-2); line-height:1.2; }
.hero p{ color:var(--muted); font-size:clamp(14px,1.7vw,18px); }
.cta{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; }
.btn{ position:relative; overflow:hidden; padding:12px 18px; border-radius:999px; border:1px solid #ddd; font-weight:800; display:inline-block; transition: transform .2s; }
.btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.ghost{ background:#fff; color:var(--brand-2); }
.btn:hover{ transform: translateY(-1px); }
.ripple{ position:absolute; border-radius:50%; transform: translate(-50%,-50%); pointer-events:none; background:rgba(255,255,255,.6); animation:ripple .6s ease-out; }
@keyframes ripple{ from{width:0;height:0;opacity:.8;} to{width:280px;height:280px;opacity:0;} }

.section{ padding:56px 0; } .section h2{ font-size:clamp(22px,3vw,30px); margin:0 0 8px; color:var(--brand-2); } .section p.lead{ color:var(--muted); margin:0 0 8px; }
.grid{ display:grid; grid-template-columns: repeat(12,1fr); gap:18px; }
.card{ background:#fff; border:1px solid #eee; border-radius:16px; padding:18px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.card:hover{ transform: translateY(-4px); box-shadow:0 16px 30px rgba(56,88,152,.18); }
.card h3{ margin-top:0; }
.col-4{ grid-column: span 4; } .col-6{ grid-column: span 6; } .col-8{ grid-column: span 8; } .col-12{ grid-column: span 12; }
@media (max-width:820px){ .col-4,.col-6,.col-8{ grid-column: span 12; } }
.kv{ background:#fff; border:1px dashed #e5e7eb; border-radius:12px; padding:18px; text-align:center; color:var(--muted); }
.feature-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.feature-list li{ background:#f9fafb; border:1px solid #eef2f7; padding:12px; border-radius:12px; }
@media (max-width:640px){ .feature-list{ grid-template-columns:1fr; } }
.kv-badge{ display:inline-block; background:var(--accent-pink); color:var(--brand-2); font-weight:800; padding:8px 12px; border-radius:999px; }
.table{ width:100%; border-collapse:collapse; } .table th,.table td{ border:1px solid #eee; padding:10px; text-align:left; background:#fff; }
.footer{ border-top:1px solid #eee; padding:24px 0; color:var(--muted); } small,.muted{ color:var(--muted); }
.badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; } .badge{ background:var(--accent-pink); color:#8a3b5d; padding:8px 12px; border-radius:999px; font-size:12px; font-weight:800; }
.notice{ background:#fff8e1; border:1px solid #ffe9a3; padding:12px; border-radius:12px; }
.form{ display:grid; gap:14px; } .input,textarea,select{ width:100%; padding:12px; border:1px solid #ddd; border-radius:12px; font-size:16px; }
label{ font-weight:800; display:block; margin-bottom:6px; }
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; } .reveal.in{ opacity:1; transform: translateY(0); }
/* responsive map wrapper */
.map-wrap{ position:relative; width:100%; padding-top:62%; border-radius:12px; overflow:hidden; border:1px solid #e5e7eb; background:#fafafa; }
.map-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* thanks page */
.thanks-hero{ min-height:70vh; display:grid; place-items:center; text-align:center; background:
  radial-gradient(900px 300px at -10% -10%, var(--accent-pink) 0%, transparent 60%),
  radial-gradient(800px 260px at 110% 0%, var(--accent) 0%, transparent 60%); }
.thanks-title{ font-size:clamp(28px, 7vw, 56px); color:var(--brand-2); margin:0 0 8px; font-weight:900; letter-spacing:.03em; }
.spark{ display:inline-block; animation: pop .9s ease infinite; transform-origin:center; }
@keyframes pop{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }

/* ===== Splash (company name) ===== */
#splash{
  position:fixed; inset:0; background:#fff; z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
#splash.hidden{ opacity:0; pointer-events:none; transition:opacity .5s ease; }

.splash-inner{
  display:flex; gap:.15em; font-weight:900;
  font-size:clamp(24px, 6vw, 56px); color:#1e2f57;
}
.splash-inner .ch{
  display:inline-block;
  transform:translateY(16px) scale(.98);
  opacity:0;
}
@keyframes chIn{
  to{ transform:translateY(0) scale(1); opacity:1; }
}

/* ユーザーがモーション軽減を有効化している場合はアニメ抑制 */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}