/* Estaluna LP 共有スタイル */
:root{
  --accent:#26369E;
  --accent-dark:#1B2570;
  --ink:#12193F;
  --body:#425466;
  --muted:#697386;
  --faint:#8593A6;
  --surface:#F6F9FC;
  --line:#E3E8EF;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:64px; }
body{ margin:0; background:#ffffff; color:var(--ink); font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Sans","Helvetica Neue",Arial,"メイリオ",sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ -webkit-tap-highlight-color:transparent; }
img{ max-width:100%; }

/* ---- レイアウト ---- */
.container{ max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,24px); }
.section{ padding:clamp(56px,7vw,96px) clamp(20px,5vw,32px); }
.section-head{ text-align:center; max-width:760px; margin:0 auto clamp(32px,4vw,48px); }
.section-head h1, .section-head h2{ margin:0; font-size:clamp(32px,5vw,56px); line-height:1.12; letter-spacing:-0.015em; font-weight:700; color:var(--ink); }
.section-head p{ margin:20px auto 0; font-size:clamp(16px,2vw,19px); line-height:1.7; color:var(--muted); }

/* ---- ヘッダー ---- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.8); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid #E9EDF4; }
.site-header .bar{ margin:0 auto; padding:0 clamp(24px,3vw,56px); height:60px; display:flex; align-items:center; gap:clamp(24px,3.5vw,56px); }
.site-header .brand{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
.site-header .brand img{ height:30px; width:auto; display:block; }
.site-nav{ display:flex; align-items:center; gap:clamp(18px,2.2vw,30px); flex:1; }
.site-nav a{ font-size:13.5px; color:var(--body); text-decoration:none; font-weight:500; transition:color .15s ease-out; }
.site-nav a:hover, .site-nav a[aria-current="page"]{ color:var(--accent); }
.site-header .actions{ display:flex; align-items:center; gap:20px; flex:0 0 auto; }
.site-header .actions .login{ font-size:13.5px; color:var(--body); text-decoration:none; font-weight:500; transition:color .15s ease-out; }
.site-header .actions .login:hover{ color:var(--accent); }
.btn{ display:inline-block; font-size:13.5px; font-weight:600; color:#ffffff; background:var(--accent); padding:8px 16px; border-radius:980px; text-decoration:none; border:none; cursor:pointer; transition:background .15s ease-out; }
.btn:hover{ background:var(--accent-dark); }
.btn-lg{ font-size:17px; padding:13px 26px; }
.btn-ghost{ color:var(--accent); background:#ffffff; border:1px solid var(--accent); }
.btn-ghost:hover{ background:#eef0f9; }
.hamburger{ display:none; align-items:center; justify-content:center; width:40px; height:40px; border:none; background:transparent; cursor:pointer; color:var(--ink); padding:0; margin-left:auto; }
.mobile-menu{ display:none; border-top:1px solid #EDF1F7; background:rgba(255,255,255,0.97); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); padding:14px clamp(18px,4vw,24px) 22px; flex-direction:column; gap:4px; }
.mobile-menu a{ font-size:16px; color:var(--ink); text-decoration:none; font-weight:500; padding:12px 0; border-bottom:1px solid #EDF1F7; }
.mobile-menu .btn{ margin-top:12px; font-size:16px; padding:13px 18px; border-radius:14px; text-align:center; }
@media (max-width:900px){
  .site-nav, .site-header .actions{ display:none; }
  .hamburger{ display:inline-flex; }
  .mobile-menu.open{ display:flex; }
}

/* ---- カード ---- */
.card{ background:#ffffff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 24px 48px -30px rgba(11,16,40,0.3); }
.tile{ background:var(--surface); border-radius:24px; padding:clamp(28px,3.5vw,40px); }
.tile h3{ margin:0; font-size:20px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; background:#ffffff; color:var(--ink); border-bottom:1px solid var(--line); }
.card-head .title svg{ color:var(--accent); }
.card-head .title{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; }
.card-head .badge{ font-size:10.5px; font-weight:600; color:var(--accent); background:#E9EDF9; padding:4px 9px; border-radius:980px; }
.check-row{ display:flex; gap:9px; align-items:flex-start; font-size:14.5px; color:var(--body); }
.check-row svg{ flex:0 0 auto; margin-top:2px; }

/* ---- フッター ---- */
.site-footer{ background:#ffffff; border-top:1px solid var(--line); }
.site-footer .inner{ max-width:1180px; margin:0 auto; padding:clamp(40px,5vw,56px) clamp(20px,5vw,32px) 32px; }
.site-footer .cols{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; }
.site-footer .col-title{ font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.site-footer .links{ display:flex; flex-direction:column; gap:9px; }
.site-footer .links a{ font-size:13px; color:var(--body); text-decoration:none; transition:color .15s ease-out; }
.site-footer .links a:hover{ color:var(--accent); }
.site-footer .legal{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:12px; color:var(--faint); }

/* ---- CTA帯 ---- */
.cta-band{ background:linear-gradient(115deg, #141C54 0%, #26369E 48%, #6D28D9 115%); padding:clamp(56px,7vw,96px) clamp(20px,5vw,32px); text-align:center; }
.cta-band h2{ margin:0; font-size:clamp(30px,4.8vw,52px); line-height:1.15; letter-spacing:-0.015em; font-weight:700; color:#ffffff; }
.cta-band p{ margin:20px auto 0; max-width:560px; font-size:clamp(15px,1.9vw,18px); line-height:1.75; color:rgba(255,255,255,0.82); }
.cta-band .btn-invert{ display:inline-block; font-size:16px; font-weight:600; color:var(--accent); background:#ffffff; padding:14px 30px; border-radius:980px; text-decoration:none; transition:transform .15s ease-out; }
.cta-band .btn-invert:hover{ transform:translateY(-2px); }
.cta-band .note{ margin-top:18px; font-size:13px; color:rgba(255,255,255,0.66); }

/* ---- フォーム ---- */
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:13.5px; font-weight:600; color:var(--ink); }
.form-field input, .form-field textarea{ font:inherit; font-size:15px; color:var(--ink); background:#ffffff; border:1px solid rgba(29,29,31,0.18); border-radius:12px; padding:11px 14px; transition:border-color .15s ease-out, box-shadow .15s ease-out; }
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(38,54,158,0.12); }
.form-status{ font-size:14px; line-height:1.7; border-radius:12px; padding:12px 16px; display:none; }
.form-status.ok{ display:block; background:#eef7f0; color:#1d5b34; }
.form-status.err{ display:block; background:#fdf0f0; color:#8a2626; }

/* ---- FAQ ---- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 4px; font-size:16px; font-weight:600; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .mark{ flex:0 0 auto; color:var(--accent); transition:transform .2s ease-out; }
.faq-item[open] summary .mark{ transform:rotate(45deg); }
.faq-item .answer{ padding:0 4px 20px; font-size:14.5px; line-height:1.85; color:var(--muted); }

/* ---- アニメーション ---- */
@keyframes rise{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none;} }
.rise{ animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
.rise-1{ animation:rise .8s cubic-bezier(.2,.7,.2,1) .1s both; }
.rise-2{ animation:rise .9s cubic-bezier(.2,.7,.2,1) .2s both; }
.rise-3{ animation:rise 1s cubic-bezier(.2,.7,.2,1) .3s both; }
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal].revealed{ opacity:1; transform:none; }
@keyframes pulse-dot{ 0%{ box-shadow:0 0 0 0 rgba(38,54,158,.45);} 70%{ box-shadow:0 0 0 7px rgba(38,54,158,0);} 100%{ box-shadow:0 0 0 0 rgba(38,54,158,0);} }
.pulse-dot{ width:6px; height:6px; border-radius:50%; background:#5fe0a6; display:inline-block; animation:pulse-dot 1.8s ease-out infinite; }
@keyframes drawloop{ 0%{ stroke-dashoffset:1; opacity:1;} 30%{ stroke-dashoffset:0;} 88%{ stroke-dashoffset:0; opacity:1;} 94%{ opacity:0;} 96%{ stroke-dashoffset:1; opacity:0;} 100%{ stroke-dashoffset:1; opacity:1;} }
.drawloop{ stroke-dasharray:1; stroke-dashoffset:1; animation:drawloop 8s cubic-bezier(.45,.1,.25,1) .4s infinite; }
@keyframes flow{ to{ stroke-dashoffset:-32; } }
.flow{ stroke-dasharray:7 9; animation:flow 1.1s linear infinite; }
@keyframes ring{ 0%{ opacity:.55; transform:scale(1);} 70%,100%{ opacity:0; transform:scale(1.16);} }
.ring{ transform-box:fill-box; transform-origin:center; animation:ring 2.2s ease-out infinite; }
@keyframes chat-in-once{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.chat{ font-size:12px; line-height:1.55; padding:8px 11px; max-width:88%; }
.chat.in{ align-self:flex-start; background:#EDF1F7; color:#425466; border-radius:13px 13px 13px 4px; }
.chat.out{ align-self:flex-end; background:#e6e9f7; color:#1d2447; border-radius:13px 13px 4px 13px; }
[data-reveal] .chat1, [data-reveal] .chat2, [data-reveal] .chat3, [data-reveal] .chat4, [data-reveal] .chat5, [data-reveal] .chat6{ opacity:0; }
.revealed .chat1{ animation:chat-in-once .8s ease-out .2s both; }
.revealed .chat2{ animation:chat-in-once .8s ease-out 1s both; }
.revealed .chat3{ animation:chat-in-once .8s ease-out 1.8s both; }
.revealed .chat4{ animation:chat-in-once .8s ease-out 2.6s both; }
.revealed .chat5{ animation:chat-in-once .8s ease-out 3.4s both; }
.revealed .chat6{ animation:chat-in-once .8s ease-out 4.2s both; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.spin{ transform-box:fill-box; transform-origin:center; animation:spin 16s linear infinite; }
@keyframes growx{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
.growx{ transform:scaleX(0); transform-box:fill-box; transform-origin:left center; }
.revealed .growx{ animation:growx 1.8s cubic-bezier(.2,.7,.2,1) .3s both; }
@keyframes growy{ from{ transform:scaleY(0);} to{ transform:scaleY(1);} }
.growy-a,.growy-b,.growy-c{ transform:scaleY(0); transform-box:fill-box; transform-origin:center bottom; }
.revealed .growy-a{ animation:growy 1.6s cubic-bezier(.2,.7,.2,1) .2s both; }
.revealed .growy-b{ animation:growy 1.6s cubic-bezier(.2,.7,.2,1) .55s both; }
.revealed .growy-c{ animation:growy 1.6s cubic-bezier(.2,.7,.2,1) .9s both; }
@keyframes donut{ from{ stroke-dasharray:0 389.5;} to{ stroke-dasharray:350.5 389.5;} }
.donut{ stroke-dasharray:0 389.5; }
.revealed .donut{ animation:donut 2.6s cubic-bezier(.2,.7,.2,1) .3s both; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---- SNS ---- */
.socials{ display:flex; gap:14px; margin-top:16px; }
.socials a{ color:var(--body); display:inline-flex; transition:color .15s ease-out; }
.socials a:hover{ color:var(--accent); }

/* ---- 遊び心（グラデーション見出し・カラードット） ---- */
.grad-text{ background:linear-gradient(92deg, #26369E 0%, #4062E8 48%, #8B5CF6 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:1px; }
@keyframes sparkle{ 0%,100%{ opacity:.12; transform:scale(.55) rotate(0deg);} 50%{ opacity:1; transform:scale(1) rotate(18deg);} }
.sparkle{ transform-box:fill-box; transform-origin:center; animation:sparkle 2.8s ease-in-out infinite; }

/* ---- ナビのドロップダウン ---- */
.nav-drop{ position:relative; display:flex; align-items:center; align-self:stretch; }
.nav-drop .drop{ display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:176px; background:rgba(255,255,255,0.92); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-radius:0 0 16px 16px; padding:12px 10px; box-shadow:0 28px 44px -30px rgba(11,16,40,0.3); z-index:60; }
.nav-drop .drop-head{ font-size:11px; font-weight:600; letter-spacing:0.04em; color:var(--faint); padding:2px 12px 8px; }
.nav-drop:hover .drop, .nav-drop.open .drop, .nav-drop:focus-within .drop{ display:block; animation:drop-in .18s ease-out; }
@keyframes drop-in{ from{ opacity:0; transform:translate(-50%,-6px);} to{ opacity:1; transform:translate(-50%,0);} }
.nav-drop .drop a{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap; padding:9px 12px; border-radius:10px; transition:color .15s ease-out, background .15s ease-out; }
.nav-drop .drop a:hover{ color:var(--accent); background:#EDF1F7; }
.nav-drop .drop a svg{ color:var(--accent); flex:0 0 auto; }
@media (prefers-reduced-motion: reduce){ .nav-drop .drop{ animation:none; } }