/* ===== Home: Hero ===== */
.hero{
  position:relative;
  overflow:hidden;
  padding:48px 0 60px;
  background:
    conic-gradient(from -20deg at 90% 20%,rgba(0,0,0,.06),rgba(0,0,0,.02) 14%,transparent 20% 60%,rgba(0,0,0,.03) 80%,transparent 100%),
    radial-gradient(120rem 45rem at 95% -10%,rgba(0,0,0,.04),transparent 60%),
    var(--bg);
}
.badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:#666;
  font-weight:700;
}
.hero h1{
  line-height:1.18;
  margin:.4rem 0;
}
.hero > .container.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  align-items:center;
  gap:min(4vw,48px);
  position:relative;
  z-index:2;
}
.hero--first{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(120deg, #f8feff 0%, #ffffff 42%),
    radial-gradient(90rem 40rem at 95% -10%, rgba(0,0,0,.04), transparent 60%),
    var(--bg);
}
.hero--first::before{
  content:"";
  position:absolute;
  inset:-8rem -6rem auto -6rem;
  height:22rem;
  z-index:0;
  background:
    radial-gradient(52rem 22rem at 10% 130%, rgba(87,216,236,.18), rgba(87,216,236,0) 60%) no-repeat,
    conic-gradient(from 210deg at 65% 40%, rgba(255,255,255,.24), rgba(255,255,255,0) 35% 80%, rgba(255,255,255,.16) 92%, rgba(255,255,255,0)) no-repeat;
  border-bottom-left-radius:120px;
  border-bottom-right-radius:120px;
  mask:linear-gradient(#000, rgba(0,0,0,.85) 32%, rgba(0,0,0,0) 100%);
}
.hero--first::after{
  content:"";
  position:absolute;
  top:-288px !important;
  right:-256px !important;
  width:768px !important;
  height:768px !important;
  z-index:0;
  background:radial-gradient(closest-side, rgba(111,221,235,.22), rgba(111,221,235,0) 70%);
  filter:blur(.4px);
}
.hero__content{
  position:relative;
  z-index:2;
}
.title-main{
  font-size:clamp(1.9rem,2.6vw + 1rem,3.2rem);
  line-height:1.18;
  letter-spacing:.01em;
  word-break:keep-all;
  line-break:strict;
  margin-block-start:.2rem;
  margin-block-end:clamp(14px,1.8vw,28px);
}
.title-main .nb{white-space:nowrap}
.title-main + p{margin-top:0}
.hero__content > p{margin:0 0 75px}
.hero__content .cta-band{margin-top:0}

.cta-band{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  margin:20px 0 0;
  padding:18px 20px;
  border-radius:28px;
  width:min(100%,520px);
  color:rgba(255,255,255,.92);
  background:linear-gradient(180deg,rgba(12,12,14,.46),rgba(12,12,14,.64));
  -webkit-backdrop-filter:blur(8px) saturate(110%);
  backdrop-filter:blur(8px) saturate(110%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 18px 38px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.35);
}
.cta-band::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.cta-band::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 48%);
  opacity:.6;
}
.cta-band__copy{
  font-weight:800;
  color:rgba(255,255,255,.9);
}
.cta-band .cta-hero{margin-left:auto}

.arc-stroke{
  fill:none;
  stroke:rgba(0,0,0,.08);
  stroke-width:12;
  stroke-linecap:round;
  stroke-dasharray:1800 4200;
  stroke-dashoffset:260;
}

.hero,
.hero--first{
  position:relative;
  overflow:hidden;
}
.hero > .container.grid-2,
.hero__content,
.hero-img{
  position:relative;
  z-index:2;
}
.hero-arc{
  position:absolute !important;
  z-index:0 !important;
  pointer-events:none;
}
.hero-arc--tr{
  width:1296px !important;
  height:1296px !important;
  top:-520px !important;
  right:-520px !important;
  -webkit-mask:linear-gradient(to left,rgba(0,0,0,0) 0,#000 18%,#000 70%,rgba(0,0,0,0) 100%);
  mask:linear-gradient(to left,rgba(0,0,0,0) 0,#000 18%,#000 70%,rgba(0,0,0,0) 100%);
}
.hero-arc--bl{
  width:1296px !important;
  height:1296px !important;
  bottom:-520px !important;
  left:-520px !important;
  -webkit-mask:linear-gradient(to right,rgba(0,0,0,0) 0,#000 18%,#000 70%,rgba(0,0,0,0) 100%);
  mask:linear-gradient(to right,rgba(0,0,0,0) 0,#000 18%,#000 70%,rgba(0,0,0,0) 100%);
}

/* ===== Home: Eiken block ===== */
.eiken-list li{margin-bottom:8px}
.eiken-list .strong{
  color:#ff3e6c;
  font-weight:900;
}

.eiken-ab{
  position:relative;
  overflow:hidden;
  background:#fff;
  padding:0 0 90px;
}
.wave-top{
  position:absolute;
  left:0;
  top:20px;
  width:100%;
  height:100px;
  z-index:2;
}
.wave-top svg{
  width:130%;
  height:110px;
  display:block;
}
.eiken-ab::before{
  content:"";
  position:absolute;
  left:0;
  top:130px;
  width:100%;
  height:200%;
  background:#cceffd;
  z-index:0;
}
.eiken-ab-wrap,
.eiken-ab-panel,
.eiken-ab-img{
  position:relative;
  z-index:5;
}
.wave-bottom{
  position:absolute;
  width:1600px;
  height:1600px;
  border-radius:50%;
  background:radial-gradient(circle,
    transparent 54%,
    rgba(255,255,255,.9) 56%,
    #ffffff 65%,
    rgba(255,255,255,.9) 58%,
    transparent 67%
  );
  left:-600px;
  bottom:-1200px;
  z-index:1;
  pointer-events:none;
}
.eiken-ab-wrap{
  max-width:1000px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:38px;
  padding:0 24px;
}
.eiken-title{
  font-size:32px;
  font-weight:900;
  margin-bottom:18px;
  color:#063b52;
}
.eiken-list{
  padding-left:20px;
  margin:0;
  color:#063b52;
  line-height:1.75;
}

/* ===== Home: Why section ===== */
.why-abc{
  position:relative;
  overflow:hidden;
  background:#cceffd;
  padding:40px 0 160px;
  z-index:0;
}
.why-abc::before{
  content:"";
  position:absolute;
  width:1600px;
  height:1600px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      transparent 54%,
      rgba(255,255,255,.9) 56%,
      #ffffff 65%,
      rgba(255,255,255,.9) 58%,
      transparent 67%
    );
  left:31%;
  transform:translateX(-62%);
  top:-400px;
  z-index:1;
  pointer-events:none;
}
.why-title{
  position:relative;
  z-index:5;
  text-align:center;
  font-size:32px;
  font-weight:900;
  color:#063b52;
  margin-bottom:40px;
}
.why-base{
  position:relative;
  z-index:5;
  background:#ffffff;
  border-radius:48px;
  padding:60px 50px 80px;
  max-width:1180px;
  margin:0 auto;
  box-shadow:
    0 6px 18px rgba(0,0,0,.04),
    inset 0 0 0 1px rgba(0,0,0,.03);
}
.why-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px;
}
.why-card{
  background:#e4e4e4ba;
  padding:40px 28px;
  border-radius:32px;
  text-align:center;
  box-shadow:
    0 6px 14px rgba(0,0,0,.04),
    inset 0 0 0 1px rgba(255,255,255,.6);
}
.why-card-imgbox{
  background:#fff;
  padding:24px;
  border-radius:22px;
  margin-bottom:20px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.05),
    0 4px 10px rgba(0,0,0,.04);
}
.why-card-imgbox img{
  width:140px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
.why-card h3{
  margin:12px 0 10px;
  font-size:20px;
  font-weight:900;
  color:#063b52;
}
.why-card p{
  font-size:15px;
  line-height:1.7;
  color:#405b63;
}
.point{
  color:#ff3e6c;
  font-weight:900;
}

/* ===== Home: Accordion ===== */
.reason-accordion{
  margin-top:20px;
  border-top:1px solid #e5e7eb;
}
.r-item{
  border-bottom:1px solid #e5e7eb;
}
.r-q{
  width:100%;
  background:none;
  border:0;
  cursor:pointer;
  padding:16px 8px;
  font-size:1.06rem;
  font-weight:800;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.r-q::after{
  content:"+";
  font-size:1.4rem;
  font-weight:700;
}
.r-item.open .r-q::after{content:"−"}
.r-a{
  display:none;
  padding:0 8px 16px;
  color:#555;
  line-height:1.6;
}
.r-item.open .r-a{display:block}

/* ===== Optional free hero ===== */
.freehero{
  padding:60px 16px 70px;
  background:linear-gradient(135deg,#e9f8ff,#ffffff 60%);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.freehero__inner{
  max-width:860px;
  margin:0 auto;
  background:#fff;
  padding:40px 28px 48px;
  border-radius:28px;
  box-shadow:0 10px 28px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.05);
  position:relative;
  z-index:2;
}
.freehero__tag{
  display:inline-block;
  padding:8px 16px;
  background:#ff6a95;
  color:#fff;
  font-weight:900;
  font-size:15px;
  border-radius:999px;
  margin-bottom:16px;
  box-shadow:0 4px 14px rgba(255,0,100,.25);
}
.freehero__title{
  font-size:28px;
  font-weight:900;
  color:#063b52;
  margin-bottom:10px;
  line-height:1.35;
}
.freehero__lead{
  font-size:16px;
  color:#4a4f58;
  line-height:1.7;
  margin-bottom:26px;
}
.freehero__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  background:#0ea5e9;
  color:#fff;
  font-weight:900;
  border-radius:14px;
  font-size:17px;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,150,220,.22);
}

/* ===== Home Responsive ===== */
@media (max-width:900px){
  .hero > .container.grid-2{grid-template-columns:1fr}
  .why-cards{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
  }
  .why-card:nth-child(3){
    grid-column:1 / -1;
    max-width:290px;
    margin:0 auto;
  }
  .why-card{padding:32px 22px}
  .why-card-imgbox img{width:120px}

  .hero > .container.grid-2{
    display:flex !important;
    flex-direction:column !important;
    align-items:center;
    gap:18px;
    text-align:center;
  }
  .hero > .container.grid-2 > div:nth-child(2){
    order:-1;
    width:100%;
    position:relative;
    z-index:2;
  }
  .hero > .container.grid-2 > div:nth-child(1){
    order:0;
    width:100%;
    position:relative;
    z-index:2;
  }
  .hero-img{
    max-width:min(420px,86vw);
    margin:0 auto;
    display:block;
  }
}

@media (max-width:720px){
  .hero__content > p{margin:0 0 10px}
  .eiken-ab{
    padding-top:40px;
  }
  .eiken-ab-wrap{
    flex-direction:column;
    align-items:center;
    gap:14px;
    padding:0 14px;
  }
  .eiken-ab-img img{
    width:min(220px,70vw);
    height:auto;
    margin:0 auto;
  }
  .eiken-ab-panel{
    text-align:left;
    padding:30px 30px;
    border-radius:18px;
  }
  .eiken-title{
    font-size:1.25rem;
    margin:0 0 10px;
    text-align:left;
  }
  .eiken-list{
    text-align:left;
    padding-left:1.1em;
  }
  .eiken-list li{
    line-height:1.65;
    font-size:.98rem;
    word-break:keep-all;
    overflow-wrap:anywhere;
    line-break:strict;
  }

  .cta-band{
    box-shadow:none;
    border:1px solid rgba(255,255,255,.15);
  }
  .cta-band .cta-hero{box-shadow:none}
  .cta-band__copy{font-size:0}
  .cta-band__copy::before{
    content:"無料体験で弱点がわかる";
    font-size:.9rem;
    font-weight:800;
    white-space:nowrap;
    display:inline-block;
  }
}

@media (max-width:600px){
  .why-abc{padding:26px 0 30px}
  .why-title{
    margin-bottom:18px;
    font-size:24px;
  }
  .why-base{
    padding:25px 15px 35px;
    border-radius:28px;
  }
  .why-cards{
    grid-template-columns:1fr;
    gap:20px;
  }
  .why-card{
    margin:0;
    padding:18px 14px;
    border-radius:20px;
  }
  .why-card-imgbox{
    padding:14px;
    margin-bottom:12px;
    border-radius:16px;
  }
  .why-card-imgbox img{width:80px}
  .why-card h3{
    font-size:16px;
    margin:8px 0 0;
  }
}

@media (max-width:480px){
  .hero{
    padding:20px 0 40px;
    text-align:center;
  }
  .hero .container.grid-2{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
  }
  .hero-img{
    max-width:82%;
    margin:0 auto 10px;
  }
  .hero__content{
    width:92%;
    margin:0 auto;
    text-align:left;
  }
  .title-main{
    font-size:24px;
    line-height:1.3;
    margin-bottom:10px;
  }

  .wave-top{
    top:10px;
    height:80px;
  }
  .eiken-ab::before{top:90px}
  .eiken-ab{padding-bottom:36px}

  .why-base{
    padding:30px 16px 50px;
    max-width:95%;
  }
  .why-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  .why-card{
    padding:18px 12px;
    border-radius:22px;
  }
  .why-card-imgbox img{width:70px}
  .why-card:nth-child(3){
    grid-column:1 / -1;
    width:48%;
    margin:0 auto;
  }
  .why-card p{display:none}
  .why-card h3{
    font-size:18px;
    line-height:1.28;
    font-weight:900;
    text-align:center;
    margin:10px 0 0;
    display:flex;
    flex-direction:column;
    white-space:pre-line;
    color:#063b52;
  }
  .why-card h3 .point{
    color:#ff4d6a;
    font-weight:900;
    margin-bottom:2px;
  }
  .why-abc::before{
    left:50%;
    transform:translateX(-50%) !important;
  }

  .freehero__inner{padding:28px 20px 36px}
  .freehero__title{font-size:22px}
  .freehero__lead{font-size:15px}
}