:root{
  --bg:#ffffff; --bg-2:#fbfcff; --ink:#1d2a3a; --muted:#5f6f86;
  --gold-1:#ffd26a; --gold-2:#d4a11d; --border:rgba(8,21,40,.10);
  --shadow:0 12px 30px rgba(24,39,75,.10); --radius:18px;
  --ok:#18a957; --accent:#ffbf40;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic Pro","Yu Gothic","Meiryo",sans-serif;color:var(--ink);
  background:
    radial-gradient(1200px 680px at 85% -10%, rgba(255,216,124,.36), transparent 60%),
    radial-gradient(900px 500px at -10% 25%, rgba(255,243,211,.60), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* 顶部阳光动效 */
.top-ribbon{position:fixed;inset:0 0 auto 0;height:220px;pointer-events:none;z-index:0;
  background:conic-gradient(from 210deg at 10% 50%, rgba(255,214,102,.45), rgba(255,240,182,.35), rgba(255,214,102,.45));
  filter:blur(36px) saturate(120%);opacity:.65;mask:linear-gradient(#000,transparent);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateY(-8px)}to{transform:translateY(8px)}}
@keyframes ping{
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity:.8; }
  70%  { opacity:.15; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity:0; }
}

/* 底部金色波浪 */
.bottom-waves{position:fixed;inset:auto 0 -1px 0;height:180px;z-index:0;overflow:hidden;pointer-events:none}
.wave{position:absolute;left:-5%;width:110%;height:120px;border-radius:50% 50% 0 0;opacity:.18;filter:blur(1.5px)}
.wave.w1{bottom:-18px;background:linear-gradient(90deg,var(--gold-1),var(--gold-2));animation:wave 14s linear infinite}
.wave.w2{bottom:-38px;background:linear-gradient(90deg,#fff0c9,var(--gold-1));animation:wave 18s linear infinite reverse;opacity:.14}
.wave.w3{bottom:-56px;background:linear-gradient(90deg,#ffe9a1,var(--gold-1));animation:wave 22s linear infinite;opacity:.10}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-10%)}}

header{position:sticky;top:0;z-index:10;backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.65));border-bottom:1px solid var(--border)}
.nav{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.brand-badge{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--gold-1),var(--gold-2));box-shadow:0 8px 22px rgba(212,161,29,.35)}
.nav-spacer{margin-left:auto}
.cta{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;font-weight:800;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));box-shadow:var(--shadow);white-space:nowrap}

h1,h2{font-family:Poppins,Inter,system-ui,sans-serif;font-weight:800;letter-spacing:.2px}
h1{text-shadow:0 6px 18px rgba(212,161,29,.20), 0 1px 0 #fff}
h2{ text-shadow:0 4px 14px rgba(212,161,29,.16) }

/* Hero */
.hero{position:relative;z-index:1;max-width:1200px;margin:36px auto 0;padding:36px 20px 10px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.hero-visual{position:relative;isolation:isolate}
.sun-blob{width:100%;aspect-ratio:16/10;border-radius:22px;background:
  radial-gradient(120% 120% at 10% 10%, rgba(255,223,137,.9), rgba(255,223,137,.6) 26%, transparent 56%),
  linear-gradient(135deg,#fff5d6,#ffe9a1);
  box-shadow:0 20px 50px rgba(212,161,29,.20), inset 0 0 0 1px rgba(8,21,40,.06);position:relative;overflow:hidden}
.float-badge{position:absolute;right:14px;top:14px;padding:8px 12px;border-radius:999px;font-weight:700;font-size:12px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}
.rays{position:absolute;inset:-40% -10% auto -10%;height:160%;background:conic-gradient(from 0deg, rgba(255,214,102,.45), transparent 30% 60%, rgba(255,214,102,.35));
  filter:blur(18px);mix-blend:multiply;animation:spin 28s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-copy h1{font-size:clamp(28px,2.6vw,48px);line-height:1.12;margin:10px 0 14px}
.hero-copy p{color:var(--muted);font-size:clamp(14px,1.1vw,16px)}
.btn{padding:12px 18px;border-radius:12px;font-weight:800;letter-spacing:.2px;border:1px solid var(--border);
  background:linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 70%);color:#3a2a00;box-shadow:0 12px 34px rgba(212,161,29,.28);white-space:nowrap}
.btn:hover{filter:brightness(1.05)}
.hero-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:grid;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{background:linear-gradient(180deg,#fff,#fff7e1);border:1px solid rgba(212,161,29,.26);border-radius:14px;padding:14px;box-shadow:0 8px 20px rgba(212,161,29,.10)}
.kpi b{font-size:clamp(18px,2.1vw,28px)}.kpi small{display:block;color:var(--muted)}
.hero-img{position:absolute;inset:auto 0 0 0;width:100%;height:100%;object-fit:cover;opacity:.85;mix-blend:multiply;animation:hoverFloat 6s ease-in-out infinite alternate}
@keyframes hoverFloat{from{transform:translateY(4px) scale(1.02)}to{transform:translateY(-4px) scale(1.03)}}

/* Sections / Cards */
.section{position:relative;z-index:1;max-width:1200px;margin:30px auto;padding:10px 20px 40px}
.section h2{font-size:clamp(22px,2vw,32px);margin:10px 0 18px}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card-visual{aspect-ratio:16/9;background:linear-gradient(135deg,#fff3c2,#ffe9a1);display:flex;align-items:center;justify-content:center}
.card-visual img{width:100%;height:100%;object-fit:cover}
.card-body{padding:18px}
.card h3{margin:6px 0 8px;font-weight:800}.card p{color:var(--muted);margin:0}

/* FAQ */
.faq{position:relative;z-index:1;max-width:1200px;margin:10px auto 30px;padding:0 20px}
.faq h2{font-size:clamp(20px,1.8vw,28px);margin:6px 0 12px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);margin:10px 0;overflow:hidden}
.faq-q{width:100%;text-align:left;background:linear-gradient(180deg,#fff,#fff9e9);padding:14px 16px;border:0;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.faq-q .ico{flex:0 0 auto;width:18px;height:18px;display:inline-block;position:relative}
.faq-q .ico::before,.faq-q .ico::after{content:"";position:absolute;background:#a37300;border-radius:2px}
.faq-q .ico::before{width:18px;height:2px;top:8px;left:0}
.faq-q .ico::after{width:2px;height:18px;top:-1px;left:8px;transition:.2s}
.faq-q[aria-expanded="true"] .ico::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;background:#fff}
.faq-a-inner{padding:0 16px 14px;color:var(--muted)}

/* Testimonials */
.t-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.t-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:grid;gap:12px}
.t-head{display:flex;gap:12px;align-items:center}
.t-ava{width:44px;height:44px;border-radius:50%;object-fit:cover}
.t-name{font-weight:800}
.t-role{font-size:12px;color:var(--muted)}
.t-body{color:var(--ink)}
@media (max-width:1080px){.t-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.t-grid{grid-template-columns:1fr}}

/* 悬浮申请按钮（滚动后显示） */
.apply-float{position:fixed;right:18px;bottom:80px;z-index:11;opacity:0;transform:translateY(10px);pointer-events:none;transition:.28s ease}
.apply-float.show{opacity:1;transform:translateY(0);pointer-events:auto}
.apply-btn{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:16px 16px 16px 6px;font-weight:800;letter-spacing:.3px;box-shadow:0 12px 34px rgba(212,161,29,.35);
  background:linear-gradient(135deg,var(--gold-1) 0%, var(--gold-2) 70%);border:none;cursor:pointer;color:#3a2a00;white-space:nowrap}

/* 图标脉冲叠加到图标容器 */
.ico-wrap{position:relative;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;margin-right:8px}
.ico-wrap svg{position:relative;z-index:2;display:block}
.apply-btn .ping,.cta .ping{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1}
.apply-btn .ping::before,.cta .ping::before{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(0.6);border-radius:50%;border:2px solid rgba(212,161,29,.55);animation:ping 1.6s ease-out infinite}

/* 模态 */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:20}
.modal{width:min(560px,92vw);background:linear-gradient(180deg,#ffffff,#fffdf5);border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 70px rgba(212,161,29,.25);overflow:hidden;transform:translateY(8px) scale(.98);opacity:0;transition:.25s ease}
.modal.open{transform:translateY(0) scale(1);opacity:1}
.modal-head{display:flex;align-items:center;justify-content:center;padding:16px 18px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fff,#fff8e6)}
.modal-title{font-weight:800}
.modal-body{padding:18px;display:grid;gap:14px}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px}
label{font-size:13px;color:var(--muted);font-weight:700}
input[type="text"],input[type="tel"],input[type="number"],select{padding:12px 12px;border-radius:12px;border:1px solid var(--border);outline:none;color:var(--ink);background:#fff}
.id-options{display:grid;gap:8px;padding:10px;border:1px dashed var(--border);border-radius:12px;background:#fffef4}
.id-options label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;color:#394b63}
.modal-foot{display:flex;justify-content:flex-start;gap:10px;padding:16px 18px;border-top:1px solid var(--border);background:linear-gradient(180deg,#fff,#fff8e6);}
.btn.ghost{background:#fff;border:1px solid var(--border);color:#1d2a3a}

/* 成功演出（保留接口，现未使用弹窗成功页） */
.success-hero{position:relative;height:150px;background:
  radial-gradient(600px 200px at 20% 10%, rgba(255,231,170,.9), transparent 60%),
  linear-gradient(135deg,#fff4cc,#ffe29a,#ffd26a 70%);border-bottom:1px solid var(--border);overflow:hidden}
.success-hero::after{content:"";position:absolute;inset:-40% -20% auto -20%;height:220%;background:conic-gradient(from 0deg, rgba(255,214,102,.55), transparent 30% 60%, rgba(255,214,102,.45));filter:blur(22px);animation:spin 26s linear infinite}
.ok-mark{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:110px;height:110px}
.ok-mark svg{width:100%;height:100%}
.ok-mark .circle{stroke:var(--ok);stroke-width:6;fill:none;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;animation:draw 1s ease forwards .1s;filter:drop-shadow(0 6px 16px rgba(24,169,87,.35))}
.ok-mark .tick{stroke:var(--ok);stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .8s ease forwards .4s}
@keyframes draw{to{stroke-dashoffset:0}}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#fff;padding:12px 16px;border-radius:999px;display:none;z-index:30}

/* フッター */
footer{position:relative;z-index:1;border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.6));margin-top:40px}
.footer-wrap{max-width:1200px;margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:1fr 2fr;gap:18px;align-items:center}
.footer small{color:var(--muted)}
.footer .cta{white-space:nowrap;display:inline-flex;align-items:center}

@media (max-width:1080px){
  .hero{grid-template-columns:1fr}
  .hero-card{order:-1}
  .features{grid-template-columns:1fr 1fr}
  .modal .row{grid-template-columns:1fr}
  .footer-wrap{grid-template-columns:1fr}
}
@media (max-width:620px){
  .features{grid-template-columns:1fr}
  .apply-btn{border-radius:16px;padding:14px}
  .footer .cta{padding:10px 14px;font-size:14px}
}
@media (max-width:420px){
  .footer .cta{padding:8px 12px;font-size:13px}
}