:root{
  --blue:#5BADE6;
  --blue-deep:#3E8FCB;
  --blue-light:#85C1E9;
  --pale-blue:#EBF5FB;
  --blue-band:#D6EAF8;
  --coral:#E8856C;
  --coral-deep:#D9714F;
  --green:#6BBF8A;
  --text:#2C3E50;
  --subtext:#5A6B7A;
  --line:#D6EAF8;
  --radius:12px;
  --radius-lg:20px;
  --shadow:0 10px 28px rgba(91,173,230,.18);
  --header-h:78px;
  --max:1180px;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  color:var(--text); background:#fff; line-height:1.75; font-size:18px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-weight:700; margin:0; line-height:1.5;}
p{margin:0;}
ul{margin:0; padding:0; list-style:none;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
.center{text-align:center; margin:0 auto;}

/* dot-grid tech texture */
.dotgrid{background-image:radial-gradient(circle, rgba(91,173,230,.35) 1.6px, transparent 1.6px); background-size:22px 22px;}

/* draft banner */
.draft-banner{background:var(--coral); color:#fff; text-align:center; font-size:15px; font-weight:700; padding:9px 16px;}

/* header */
header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); height:var(--header-h);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:var(--header-h);}
.logo img{height:46px; width:auto;}
nav.pc-nav{display:flex; align-items:center; gap:30px;}
nav.pc-nav a{font-size:18px; font-weight:700; color:var(--text); position:relative; padding:6px 0;}
nav.pc-nav a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:3px; background:var(--coral); border-radius:3px; transition:width .2s;}
nav.pc-nav a:hover::after{width:100%;}
.header-right{display:flex; align-items:center; gap:22px;}
.header-cta{
  background:var(--coral); color:#fff; font-weight:700; font-size:18px; padding:12px 24px;
  border-radius:999px; box-shadow:0 8px 18px rgba(232,133,108,.4); white-space:nowrap;
}
.header-cta:hover{background:var(--coral-deep);}
.hamburger{display:none; flex-direction:column; gap:5px; width:34px; height:34px; align-items:center; justify-content:center; border:none; background:none; cursor:pointer;}
.hamburger span{display:block; width:26px; height:3px; background:var(--text); border-radius:3px;}

/* mobile nav */
.mobile-nav{
  position:fixed; left:0; right:0; top:var(--header-h); background:#fff; border-top:1px solid var(--line);
  box-shadow:0 12px 24px rgba(44,62,80,.12); transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:all .2s; z-index:59; max-height:calc(100vh - var(--header-h)); overflow-y:auto;
}
.mobile-nav.open{transform:translateY(0); opacity:1; pointer-events:auto;}
.mobile-nav ul{padding:12px 0;}
.mobile-nav a{display:block; padding:14px 26px; font-size:16px; font-weight:700; border-bottom:1px solid var(--pale-blue);}
.mobile-nav .mn-cta{margin:16px 26px; text-align:center; background:var(--coral); color:#fff; padding:14px; border-radius:999px; font-weight:700; font-size:16px;}

/* placeholder box (shared image-placeholder convention) */
.placeholder{
  position:relative; width:100%; background:var(--pale-blue); border:2px dashed var(--blue-light);
  border-radius:22px 22px 22px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:26px; text-align:center; overflow:hidden;
}
.placeholder .tag{background:var(--blue); color:#fff; font-size:14px; font-weight:700; padding:5px 14px; border-radius:999px;}
.placeholder .cap{font-size:18px; font-weight:700; color:var(--blue-deep);}
.placeholder .sub{font-size:15px; color:var(--subtext); font-weight:500;}
.placeholder svg{width:44px; height:44px; opacity:.6; color:var(--blue);}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:18px; padding:16px 34px; border-radius:999px; transition:.15s;}
.btn-main{background:var(--coral); color:#fff; box-shadow:0 10px 24px rgba(232,133,108,.4);}
.btn-main:hover{background:var(--coral-deep); transform:translateY(-2px);}
.btn-outline{background:#fff; color:var(--blue-deep); border:2px solid var(--blue);}
.btn-outline:hover{background:var(--pale-blue);}
.micro{font-size:14px; color:var(--subtext); margin-top:10px;}

.eyebrow{display:inline-flex; align-items:center; gap:8px; background:var(--pale-blue); color:var(--blue-deep); font-weight:700; font-size:14px; padding:7px 18px; border-radius:999px; letter-spacing:.04em;}
.h2{font-size:34px; color:var(--text); margin-top:14px;}
.lead{font-size:18px; color:var(--subtext); margin-top:16px;}

/* ---- FV ---- */
.fv{position:relative; padding:64px 0 110px; overflow:hidden; background:linear-gradient(180deg,#fff 0%, var(--pale-blue) 100%);}
.fv::before{content:""; position:absolute; inset:0; z-index:0;}
.fv-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.fv h1{font-size:44px; letter-spacing:.01em; margin-top:20px;}
.fv h1 span{color:var(--blue-deep); position:relative; display:inline-block;}
.fv .lead{font-size:19px; margin-top:22px; max-width:520px;}
.fv-cta{margin-top:34px;}
.fv-visual{position:relative;}
.fv-visual .placeholder{aspect-ratio:4/3.1;}
.chat-float{
  position:absolute; background:#fff; border-radius:18px 18px 18px 4px; box-shadow:var(--shadow); padding:14px 18px;
  font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:10px; z-index:2;
}
.chat-float svg{width:22px; height:22px; flex:none;}
.cf1{top:-18px; left:-26px;}
.cf1 svg{color:var(--green);}
.cf2{bottom:-16px; right:-18px;}
.cf2 svg{color:var(--coral);}
.fv-wave{position:absolute; left:0; right:0; bottom:-2px; z-index:1; line-height:0;}

/* diagonal section divider */
.diag-top{clip-path:polygon(0 4%, 100% 0, 100% 100%, 0 100%);}
.diag-bottom{clip-path:polygon(0 0, 100% 0, 100% 96%, 0 100%);}

/* ---- trouble ---- */
.sec{padding:90px 0;}
.sec-tint{background:var(--pale-blue);}
.trouble-list{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px;}
.trouble-item{display:flex; gap:14px; background:#fff; border-radius:var(--radius-lg); padding:22px 24px; box-shadow:0 6px 18px rgba(91,173,230,.12);}
.trouble-item .chk{flex:none; width:30px; height:30px; border-radius:8px; border:2.4px solid #B9C6D1; display:flex; align-items:center; justify-content:center; margin-top:2px;}
.trouble-item .chk svg{width:18px; height:18px; color:#B9C6D1;}
.trouble-item p{font-size:18px; font-weight:600;}

/* ---- solution before/after ---- */
.ba-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:22px; margin-top:48px; align-items:stretch;}
.ba-col{display:flex; flex-direction:column; gap:18px;}
.ba-head{text-align:center; font-weight:800; font-size:18px; padding:12px; border-radius:14px 14px 0 0;}
.ba-head.before{background:#FBE7E1; color:var(--coral-deep);}
.ba-head.after{background:#E1F2E8; color:#2E7D53;}
.ba-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; font-size:17px; font-weight:600; box-shadow:0 4px 14px rgba(44,62,80,.06); min-height:88px; display:flex; align-items:center;}
.ba-arrow{display:flex; align-items:center; justify-content:center;}
.ba-arrow svg{width:34px; height:34px; color:var(--coral);}

/* ---- curriculum ---- */
.curr-meta{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:44px;}
.curr-meta div{background:#fff; border:1.5px solid var(--blue-band); border-radius:14px; padding:18px; text-align:center;}
.curr-meta .k{font-size:14px; color:var(--subtext); font-weight:700;}
.curr-meta .v{font-size:18px; font-weight:800; color:var(--blue-deep); margin-top:6px;}
.timeline{margin-top:56px; display:flex; flex-direction:column; gap:0;}
.tl-row{display:grid; grid-template-columns:64px 1fr; gap:22px; position:relative; padding-bottom:34px;}
.tl-row:last-child{padding-bottom:0;}
.tl-num{width:64px; height:64px; border-radius:999px; background:var(--blue); color:#fff; font-size:22px; font-weight:800; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; flex:none;}
.tl-row:not(:last-child) .tl-num::after{content:""; position:absolute; top:64px; left:50%; transform:translateX(-50%); width:3px; height:calc(100% + 6px); background:var(--blue-band);}
.tl-body{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 26px; box-shadow:0 6px 16px rgba(91,173,230,.1);}
.tl-body .fmt{display:inline-block; background:var(--pale-blue); color:var(--blue-deep); font-size:14px; font-weight:700; padding:4px 12px; border-radius:999px; margin-bottom:8px;}
.tl-body h4{font-size:19px; color:var(--text);}
.tl-body p{font-size:16px; color:var(--subtext); margin-top:8px;}
.curr-note{margin-top:36px; background:var(--pale-blue); border-radius:14px; padding:18px 24px; font-size:16px; color:var(--blue-deep); font-weight:700; text-align:center;}

/* ---- features ---- */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:48px;}
.feat-card{background:#fff; border-radius:var(--radius-lg); padding:32px 26px; box-shadow:0 8px 22px rgba(91,173,230,.14); text-align:left;}
.feat-num{font-size:14px; font-weight:800; color:var(--coral); letter-spacing:.08em;}
.feat-icon{width:56px; height:56px; border-radius:16px; background:var(--pale-blue); display:flex; align-items:center; justify-content:center; margin:14px 0 18px;}
.feat-icon svg{width:30px; height:30px; color:var(--blue-deep);}
.feat-card h3{font-size:19px; margin-bottom:12px;}
.feat-card ul{display:flex; flex-direction:column; gap:9px;}
.feat-card li{font-size:15px; color:var(--subtext); display:flex; gap:8px; align-items:flex-start;}
.feat-card li svg{width:16px; height:16px; color:var(--green); flex:none; margin-top:3px;}

/* ---- service ---- */
.service-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:48px;}
.service-card{background:#fff; border:1.6px solid var(--blue-band); border-radius:var(--radius-lg); padding:30px 28px; display:flex; flex-direction:column;}
.service-card .badge{display:inline-flex; align-self:flex-start; background:var(--blue); color:#fff; font-size:14px; font-weight:800; padding:6px 16px; border-radius:999px;}
.service-card h3{font-size:21px; margin:16px 0 16px;}
.service-card ul{display:flex; flex-direction:column; gap:11px; flex:1;}
.service-card li{font-size:16px; display:flex; gap:9px; align-items:flex-start;}
.service-card li svg{width:18px; height:18px; color:var(--green); flex:none; margin-top:3px;}
.service-card .sc-cta{margin-top:22px; text-align:center;}
.service-card .placeholder{margin-top:18px; aspect-ratio:16/8;}

/* ---- sample slides ---- */
.sample-frame{margin-top:52px; background:var(--text); border-radius:22px; padding:22px 22px 30px; box-shadow:0 20px 44px rgba(44,62,80,.25);}
.sample-topbar{display:flex; gap:7px; margin-bottom:16px;}
.sample-topbar span{width:11px; height:11px; border-radius:999px; background:rgba(255,255,255,.28);}
.slider-track{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;}
.slide-card{scroll-snap-align:start; flex:none; width:280px; background:#fff; border-radius:14px; padding:16px 16px 18px;}
.slide-card .placeholder{aspect-ratio:4/3; border-radius:14px 14px 14px 4px;}
.slide-card .cap-line{font-size:14px; font-weight:700; color:#fff; margin-top:10px; opacity:.9;}
.sample-note{margin-top:20px; font-size:14px; color:var(--subtext); text-align:center;}

/* ---- results ---- */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px;}
.stat-card{background:#fff; border-radius:16px; padding:26px; text-align:center; box-shadow:0 6px 18px rgba(91,173,230,.12);}
.stat-card .num{font-size:38px; font-weight:800; color:var(--blue-deep);}
.stat-card .num sub{font-size:16px; font-weight:700; margin-left:2px;}
.stat-card .lbl{font-size:15px; color:var(--subtext); margin-top:8px; font-weight:600;}
.voice-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:26px;}
.voice-card{background:#fff; border-radius:16px 16px 16px 4px; padding:26px 24px; box-shadow:0 6px 18px rgba(91,173,230,.1); position:relative;}
.voice-card .qmark{font-size:34px; color:var(--blue-light); font-weight:900; line-height:1;}
.voice-card p{font-size:16px; color:var(--text); margin-top:6px;}
.voice-card .who{font-size:14px; color:var(--subtext); margin-top:14px; font-weight:700;}
.results-note{margin-top:26px; font-size:14px; color:var(--subtext); text-align:center;}

/* ---- flow ---- */
.flow-row{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:52px; align-items:stretch;}
.flow-step{position:relative; text-align:center; padding:0 10px;}
.flow-step .circ{width:60px; height:60px; border-radius:999px; background:var(--blue); color:#fff; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; position:relative; z-index:1;}
.flow-step:not(:last-child)::after{content:""; position:absolute; top:30px; left:calc(50% + 40px); width:calc(100% - 40px); height:3px; background:var(--blue-band); z-index:0;}
.flow-step h4{font-size:16px;}
.flow-step p{font-size:14px; color:var(--subtext); margin-top:6px;}

/* ---- faq ---- */
.faq-list{margin-top:44px; display:flex; flex-direction:column; gap:14px;}
details.faq-item{background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px 24px; box-shadow:0 4px 12px rgba(91,173,230,.08);}
details.faq-item summary{list-style:none; cursor:pointer; padding:18px 34px 18px 0; font-size:18px; font-weight:700; position:relative; display:flex; gap:14px;}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary .qtag{flex:none; color:var(--blue-deep); font-weight:900;}
details.faq-item summary::after{content:"+"; position:absolute; right:0; top:14px; font-size:26px; color:var(--coral); font-weight:400;}
details.faq-item[open] summary::after{content:"−";}
.faq-a{padding:0 0 22px 34px; font-size:16px; color:var(--subtext); display:flex; gap:14px;}
.faq-a .atag{flex:none; color:var(--coral); font-weight:900;}

/* ---- contact ---- */
.contact-grid{display:grid; grid-template-columns:1.0fr; gap:48px; margin-top:44px; align-items:start;}
.contact-form{background:#fff; border-radius:var(--radius-lg); padding:38px; box-shadow:var(--shadow);}
.f-group{margin-bottom:22px;}
.f-group label{display:block; font-size:16px; font-weight:700; color:var(--text); margin-bottom:8px;}
.req{color:var(--coral); margin-left:6px; font-size:14px; background:#FBE7E1; padding:2px 8px; border-radius:999px; white-space:nowrap;}
.f-group label .opt{color:var(--subtext); margin-left:6px; font-size:14px; font-weight:500;}
.f-group input,.f-group select,.f-group textarea{
  width:100%; border:1.5px solid var(--blue-band); border-radius:10px; padding:13px 14px; font-size:16px;
  font-family:inherit; color:var(--text); background:var(--pale-blue);
}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus{outline:2px solid var(--blue); outline-offset:1px; background:#fff;}
.f-group textarea{min-height:110px; resize:vertical;}
.check-row{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--subtext); margin-bottom:22px;}
.check-row a{color:var(--blue-deep); text-decoration:underline;}
.contact-form .btn-main{width:100%;}
#thanks{display:none; margin-top:16px; background:#E1F2E8; color:#2E7D53; padding:16px; border-radius:12px; font-weight:700; text-align:center; font-size:16px;}
.form-note{font-size:14px; color:var(--subtext); text-align:center; margin-top:12px;}
.recap{display:flex; flex-direction:column; gap:18px;}
.recap-box{background:var(--pale-blue); border-radius:16px; padding:24px;}
.recap-box h4{font-size:17px; color:var(--blue-deep); margin-bottom:14px;}
.recap-box ul{display:flex; flex-direction:column; gap:11px;}
.recap-box li{font-size:15px; display:flex; gap:9px; align-items:flex-start;}
.recap-box li svg{width:17px; height:17px; color:var(--green); flex:none; margin-top:3px;}
.tel-box{background:#fff; border:1.6px solid var(--blue-band); border-radius:16px; padding:20px 22px; text-align:center;}
.tel-box .tel-num{font-size:24px; font-weight:800; color:var(--blue-deep); margin-top:6px;}
.tel-box .k{font-size:14px; color:var(--subtext); font-weight:700;}

/* ---- final CTA band ---- */
.final-cta{background:var(--pale-blue); padding:80px 0; text-align:center;}
.final-cta h2{font-size:30px;}
.final-cta .lead{max-width:600px; margin:16px auto 0;}
.final-cta .btn{margin-top:30px;}

/* ---- footer ---- */
footer{background:var(--text); color:#cbd6e0; padding:52px 0 30px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.foot-brand{font-size:18px; font-weight:800; color:#fff;}
.foot-links{display:flex; gap:22px; flex-wrap:wrap; margin-top:6px;}
.foot-links a{font-size:14px; color:#cbd6e0;}
.foot-copy{margin-top:30px; border-top:1px solid rgba(255,255,255,.14); padding-top:20px; font-size:13px; color:#93a2b2; text-align:center;}

/* sticky bottom cta (mobile) */
.sticky-cta{display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; background:#fff; padding:12px 16px; box-shadow:0 -6px 18px rgba(44,62,80,.14);}
.sticky-cta a{display:block; text-align:center;}

/* ================= responsive ================= */
@media (max-width:1023px){
  .fv-grid{grid-template-columns:1fr; gap:40px;}
  .fv .lead{max-width:100%;}
  .trouble-list{grid-template-columns:1fr;}
  .feat-grid{grid-template-columns:1fr 1fr; gap:20px;}
  .service-grid{grid-template-columns:1fr; gap:22px;}
  .stat-row{grid-template-columns:1fr 1fr;}
  .voice-grid{grid-template-columns:1fr;}
  .flow-row{grid-template-columns:1fr 1fr; row-gap:44px;}
  .flow-step:nth-child(2)::after,.flow-step:nth-child(4)::after{display:none;}
  .contact-grid{grid-template-columns:1fr; gap:32px;}
  .curr-meta{grid-template-columns:repeat(3,1fr);}
  nav.pc-nav{display:none;}
  .hamburger{display:flex;}
  .header-cta{padding:10px 18px; font-size:16px;}
}
@media (max-width:767px){
  body{font-size:14px;}
  .wrap{padding:0 18px;}
  .draft-banner{font-size:13px; padding:8px 12px;}
  header{--header-h:64px;}
  .logo img{height:34px;}
  .header-cta{display:none;}
  .eyebrow{font-size:13px; padding:6px 14px;}
  .h2{font-size:24px; margin-top:10px;}
  .lead{font-size:15px; margin-top:12px;}
  .sec{padding:56px 0;}
  .fv{padding:40px 0 70px;}
  .fv h1{font-size:27px; margin-top:14px;}
  .fv .lead{font-size:15px; margin-top:14px;}
  .fv-cta{margin-top:24px;}
  .btn{font-size:15px; padding:14px 24px;}
  .micro{font-size:13px;}
  .chat-float{font-size:13px; padding:10px 14px;}
  .chat-float svg{width:18px; height:18px;}
  .cf1{top:-12px; left:-10px;}
  .cf2{bottom:-12px; right:-8px;}
  .trouble-item{padding:16px 18px; gap:10px;}
  .trouble-item p{font-size:14px;}
  .ba-grid{grid-template-columns:1fr; gap:14px;}
  .ba-arrow{transform:rotate(90deg); margin:-4px 0;}
  .ba-card{font-size:14px; padding:16px 18px; min-height:auto;}
  .curr-meta{grid-template-columns:1fr 1fr; gap:10px;}
  .curr-meta div{padding:12px;}
  .curr-meta .v{font-size:14px;}
  .tl-row{grid-template-columns:48px 1fr; gap:14px; padding-bottom:22px;}
  .tl-num{width:48px; height:48px; font-size:16px;}
  .tl-row:not(:last-child) .tl-num::after{top:48px;}
  .tl-body{padding:16px 18px;}
  .tl-body h4{font-size:15px;}
  .tl-body p{font-size:13px;}
  .tl-body .fmt{font-size:12px;}
  .curr-note{font-size:13px; padding:14px 16px;}
  .feat-grid{grid-template-columns:1fr; gap:16px;}
  .feat-card{padding:22px 20px;}
  .feat-card h3{font-size:16px;}
  .feat-card li{font-size:13px;}
  .service-card{padding:22px 20px;}
  .service-card h3{font-size:17px;}
  .service-card li{font-size:13px;}
  .sample-frame{padding:16px 16px 22px; border-radius:18px;}
  .slide-card{width:220px;}
  .slide-card .cap-line{font-size:12px;}
  .sample-note{font-size:12px;}
  .stat-row{grid-template-columns:1fr; gap:14px;}
  .stat-card .num{font-size:28px;}
  .stat-card .lbl{font-size:13px;}
  .voice-card{padding:20px 18px;}
  .voice-card p{font-size:13px;}
  .voice-card .who{font-size:12px;}
  .results-note{font-size:12px;}
  .flow-row{grid-template-columns:1fr 1fr; gap:24px 14px;}
  .flow-step:nth-child(2)::after{display:none;}
  .flow-step .circ{width:48px; height:48px; font-size:16px;}
  .flow-step h4{font-size:13px;}
  .flow-step p{font-size:12px;}
  details.faq-item summary{font-size:14px; padding:14px 28px 14px 0;}
  .faq-a{font-size:13px; padding:0 0 16px 26px;}
  .contact-form{padding:22px;}
  .f-group label{font-size:14px;}
  .f-group input,.f-group select,.f-group textarea{font-size:14px; padding:11px 12px;}
  .check-row{font-size:12px;}
  .form-note{font-size:12px;}
  .recap-box{padding:18px;}
  .recap-box h4{font-size:15px;}
  .recap-box li{font-size:13px;}
  .tel-box .tel-num{font-size:19px;}
  .final-cta{padding:52px 0;}
  .final-cta h2{font-size:21px;}
  .final-cta .lead{font-size:14px;}
  .foot-brand{font-size:15px;}
  .foot-links a{font-size:12px;}
  .foot-copy{font-size:11px;}
  .sticky-cta{display:block;}
  body{padding-bottom:74px;}
}