/* ====== Global Theme ====== */
:root{
  --ink:#141518; --ink-soft:#5a5f6a; --bg:#ffffff;
  --aqua:#CFEFF4; --dark:#2f2f31;
  --hot:#ff3e6c; --hot-2:#ff5c86; --hot-3:#ff2f60;
  --line:#e9ebef; --radius:20px; --radius-xl:36px; --radius-xxl:56px;
  --container:min(1120px,92vw);
}

/* ===== Reset-ish ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  line-height:1.65 }
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ===== Utils ===== */
.container{width:var(--container);margin-inline:auto}
.center{text-align:center}
.grid-2{display:grid;gap:min(4vw,48px);grid-template-columns:1.1fr 1fr}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.small{color:#7a808d;font-size:.92rem}
.section{padding:48px 0}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid #eee;box-shadow:0 6px 24px rgba(0,0,0,.04)}
.header__in{width:var(--container);margin:auto;padding:.9rem 0;
  display:flex;align-items:center;gap:1rem;justify-content:space-between}
.brand{font-weight:800;font-size:1.4rem;letter-spacing:.02em;position:relative;z-index:1;padding-inline:10px}
.brand::before{
  content:"";position:absolute;inset:-10px -22px;z-index:-1;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.65),rgba(255,255,255,.35) 55%,rgba(255,92,134,.25));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 1px rgba(0,0,0,.06)
}
.header__nav{display:flex;gap:18px;color:#333;font-weight:600;flex-wrap:wrap}
.cta-pill{display:inline-flex;align-items:center;gap:.6rem;background:#fff;color:#ff3e6c;border-radius:999px;padding:.6rem 1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08), inset 0 0 0 2px rgba(255,62,108,.15); font-weight:800}

/* ===== 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 50:50 */
.hero > .container.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  align-items:center;
  gap:min(4vw,48px);

  /* ★根本：文字・画像（コンテンツ）を必ず前面に固定 */
  position:relative;
  z-index:2;
}
@media (max-width:900px){
  .hero > .container.grid-2{grid-template-columns:1fr}
}

/* ヒーロー背景強化 */
.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:-18rem;
  right:-16rem;
  width:48rem;
  height:48rem;
  z-index:0;
  background:radial-gradient(closest-side, rgba(111,221,235,.22), rgba(111,221,235,0) 70%);
  filter:blur(.4px);
}

/* 文字側は前面（既存のままでもOKだけど念押し） */
.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}

/* 透け黒グラス帯 */
.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}

/* ピンクCTA */
.cta-hero{
  --h1:var(--hot-2);--h2:var(--hot);--h3:var(--hot-3);
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:18px 28px;border-radius:999px;
  color:#fff;font-weight:900;font-size:1.08rem;
  background:linear-gradient(180deg,var(--h1),var(--h2) 55%,var(--h3));
  box-shadow:0 18px 40px rgba(255,62,108,.35),
             0 4px 14px rgba(255,62,108,.25),
             inset 0 1px 0 rgba(255,255,255,.35),
             inset 0 -6px 12px rgba(0,0,0,.10);
  text-decoration:none;transition:.2s transform ease,.2s box-shadow ease,.2s filter ease
}
.cta-hero::before{
  content:"";position:absolute;inset:2px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 48%);
  opacity:.5
}
.cta-hero:hover{transform:translateY(-2px);filter:saturate(1.05);
  box-shadow:0 26px 50px rgba(255,62,108,.45),
             0 6px 18px rgba(255,62,108,.28),
             inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -6px 12px rgba(0,0,0,.08)}
.cta-hero .icon{
  width:1.3em;height:1.3em;display:grid;place-items:center;
  flex:0 0 auto;background:#fff;color:var(--hot);
  border-radius:50%;
  box-shadow:0 6px 16px rgba(255,62,108,.35),inset 0 1px 0 rgba(0,0,0,.06);
  font-weight:900;line-height:1
}
@media (max-width:560px){
  .cta-hero{padding:16px 22px;font-size:1rem}
}

/* 背景の太い弧 */

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


/* ===== Aqua ===== */
.aqua{
  position:relative;z-index:1;overflow:hidden;padding:72px 0;
  background:linear-gradient(120deg, rgba(111,221,235,.18) 0%, rgba(111,221,235,0) 38%),
             radial-gradient(70rem 32rem at 90% -10%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
             radial-gradient(90rem 40rem at 50% 120%, rgba(0,0,0,.05), rgba(0,0,0,0) 60%),
             #E7F7FA;
  border-bottom-left-radius:56px;border-bottom-right-radius:56px
}
.panel{
  background:radial-gradient(120rem 40rem at 110% -20%, rgba(255,255,255,.65), rgba(255,255,255,0) 60%),
             linear-gradient(180deg,#fff,#fafbfd);
  border-radius:32px;
  padding:clamp(28px,3.6vw,56px);
  box-shadow:0 18px 50px rgba(12,60,90,.08),
             inset 0 1px 0 rgba(0,0,0,.06);
  border:1px solid rgba(12,60,90,.06)
}
.panel h2{margin-top:0}

/* ===== Dark + Ribbon ===== */
.dark{
  position:relative;color:#fff;padding:0 0 64px;
  background:radial-gradient(150rem 40rem at 110% 10%,rgba(255,255,255,.05),transparent 60%),
            conic-gradient(from 200deg at 70% 40%,rgba(255,255,255,.06),transparent 35% 70%,rgba(255,255,255,.05) 85%,transparent 100%),
            var(--dark)
}

.ribbon{
  background:var(--hot);color:#fff;text-align:center;
  font-weight:800;border-radius:20px;padding:18px 22px;
  box-shadow:0 14px 28px rgba(255,62,108,.3)
}
.ribbon--below{margin-top:48px}

/* ===== Case band ===== */
.case-band{
  position:relative;isolation:isolate;background:#fff;
  overflow:hidden;padding:48px 0
}
.case-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,transparent 0 40%,rgba(0,0,0,.02),transparent 70%) no-repeat,
             linear-gradient(to right,#74E7F3,#57D8EC) no-repeat;
  clip-path:polygon(55% 58%,100% 40%,100% 72%,45% 90%);
  opacity:.95
}
.case-card{
  background:#fff;border-radius:18px;padding:18px;
  box-shadow:0 8px 18px rgba(0,0,0,.06)
}

/* ===== Cards ===== */
.cardlist{
  display:grid;gap:24px;
  grid-template-columns:repeat(3,1fr)
}
.card{
  background:#fff;border-radius:18px;padding:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.06)
}
@media (max-width:960px){.cardlist{grid-template-columns:1fr}}
/* ===== Pricing（安全版） ===== */
.soft-frames{
  padding:68px 0;background:#fff
}
.soft-card{
  position:relative;border-radius:28px;padding:28px;
  background:linear-gradient(180deg, rgba(12,12,14,.02), rgba(12,12,14,.05));
  box-shadow:0 18px 40px rgba(0,0,0,.06),
             inset 0 0 0 1px rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.06)
}
@media (max-width:640px){
  .soft-card{padding:22px;border-radius:22px}
}

.pricing{
  margin-top:20px;border-radius:20px;overflow:hidden;
  border:1px solid #e9ebef;background:#fff;position:relative;z-index:0
}
.pr-row{
  display:grid;grid-template-columns:1.1fr 1fr 1fr
}
.pr-row>div{
  padding:16px;border-bottom:1px solid #eef0f3
}
.pr-row:nth-child(odd)>div{background:#fafbfc}
.pr-head{background:#222;color:#fff}

/* アクセント列（切れない縁取り） */
.pr-accent{
  box-shadow:inset 0 0 0 3px rgba(255,62,108,.35);
  border-radius:16px;overflow:hidden
}

/* ===== FAQ ===== */
.faq{padding:64px 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;text-align:left;background:#fff;border:0;
  padding:18px 0;font-size:1.05rem;
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.faq-q .q{color:var(--hot);font-weight:800;margin-right:10px}
.faq-a{
  display:block;padding:6px 0 18px;color:var(--ink-soft)
}
.faq-item .faq-a[hidden]{display:none}
.faq-plus{
  width:28px;height:28px;border-radius:50%;
  border:2px solid #222;font-weight:800;
  display:grid;place-items:center;line-height:1;font-family:system-ui
}

/* ===== Contact ===== */
.contact{
  padding:68px 0;background:#fff
}
.contact-wrap{
  position:relative;display:grid;
  gap:min(4vw,48px);
  grid-template-columns:1.1fr .9fr;
  align-items:start
}
@media (max-width:960px){
  .contact-wrap{grid-template-columns:1fr}
}
.contact-panel{
  background:linear-gradient(180deg,var(--hot-2),var(--hot));
  color:#fff;border-radius:44px;
  padding:clamp(24px,3vw,48px);position:relative
}
.contact-panel::after{
  content:"";position:absolute;right:0;bottom:0;
  width:46%;height:46%;
  border-bottom-right-radius:44px;
  border-bottom-left-radius:120px;
  border-top-left-radius:44px;
  background:linear-gradient(180deg,var(--hot),var(--hot-3));
  filter:saturate(110%);z-index:-1
}
.input,.select,.textarea{
  width:100%;border:0;border-radius:16px;
  background:rgba(0,0,0,.04);color:#111;
  padding:14px 16px;outline:none;font-size:1rem;margin:10px 0
}
.textarea{min-height:140px;resize:vertical}
.submit{
  display:inline-flex;justify-content:center;align-items:center;
  width:100%;padding:16px 18px;border-radius:999px;
  border:0;background:#111;color:#fff;font-weight:800;
  margin-top:10px;box-shadow:0 10px 22px rgba(0,0,0,.15)
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0
}

/* ===== Footer ===== */
.footer{
  position:relative;padding:48px 0;
  background:
    radial-gradient(120rem 20rem at -10% 120%,rgba(0,0,0,.05),transparent 60%),
    radial-gradient(120rem 20rem at 110% 120%,rgba(0,0,0,.05),transparent 60%),
    #fff
}
.footer .grid-2{align-items:center}

/* ===== 見出しアクセントライン ===== */
h2{
  position:relative;display:inline-block;padding-bottom:.35rem
}
h2::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:8px;
  background:linear-gradient(90deg,rgba(255,62,108,.7),rgba(255,62,108,.25));
  border-radius:999px;opacity:.85
}

/* ページ全体の緩い弧 */
body.page-arcs::before{
  content:"";position:fixed;
  inset:auto -10vw -28vh -10vw;height:50vh;
  z-index:-1;pointer-events:none;
  background:
    radial-gradient(120rem 40rem at 10% 120%, rgba(0,0,0,.05), transparent 60%) no-repeat,
    radial-gradient(120rem 40rem at 110% 120%, rgba(0,0,0,.05), transparent 60%) no-repeat;
  filter:blur(.2px)
}

/* ====== Text ====== */
.eiken-text-block{
  max-width:560px;
}

.eiken-list li{
  margin-bottom:8px;
}
.eiken-list .strong{
  color:#ff3e6c;
  font-weight:900;
}

/* =========================================================
   ABC英語塾が選ばれる理由（ドーナツ帯バージョン）
========================================================= */

/* 全体の背景（水色） */
.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%);/* ★微調整：-55〜-70で好みに合わせる */
  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);
}


/* =========================================================
   カードレイアウト（PC）
========================================================= */

.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;
}

.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;
}

/* =========================================================
   中型スマホ（600〜900px）
   → 上2枚横並び＋下に1枚中央配置
========================================================= */
@media(max-width:900px){

  .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;
  }
}


/* =========================================================
   小型スマホ（〜600px）
   → 完全縦並び
========================================================= */
@media(max-width:600px){

  .why-cards{
    grid-template-columns:1fr;
    gap:20px;
  }

  .why-card{
    margin:0;
    padding:28px 18px;
  }

  .why-card-imgbox img{
    width:110px;
  }
}


/* =========================================================
   📱 iPhone 13〜15（〜480px）完全モバイル最適化
========================================================= */
@media (max-width: 480px){

/* ===== Hero（順番修正＋画像を最上段へ） ===== */
.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;
}

.title-main{
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 10px;
}


/* ===== 女の子画像 ===== */
.eiken-photo-frame{
  max-width:200px;
  margin:0 auto 18px;
  transform:none !important;
}

/* ===== 選ばれる理由：白い外枠を縮める ===== */
.why-base{
  padding:30px 16px 50px;
  max-width:95%;
}


/* =========================================================
   📌 選ばれる理由：カード（スマホ最適化）
========================================================= */

/* 上2枚横並び */
.why-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

/* カード縦長防止：padding調整 */
.why-card{
  padding:18px 12px;
  border-radius:22px;
}

/* アイコン小さくしてバランスUP */
.why-card-imgbox img{
  width:70px;
}

/* 下1枚を上と同じ幅で中央配置 */
.why-card:nth-child(3){
  grid-column:1 / -1;
  width:48%;
  margin:0 auto;
}


/* =========================================================
   📌 モバイル時のみ：説明文を非表示・タイトルを赤＋黒に
========================================================= */

/* 説明文OFF */
.why-card p{
  display:none;
}

/* タイトル（赤＋黒2段） */
.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; /* 黒（2行目） */
}

/* 赤文字（上段） */
.why-card h3 .point{
  color:#ff4d6a;
  font-weight:900;
  margin-bottom:2px;
}

}

/* =========================================================
   お問い合わせセクション（左フォーム × 右実績ボックス）
========================================================= */

.contact-section{
  padding:60px 0;
}

.contact-grid{
  max-width:1080px;
  margin:0 auto;
  padding:0 16px;
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:40px;
}

/* 左フォーム */
.contact-left h2{
  margin-bottom:12px;
  font-size:26px;
  font-weight:900;
  color:#063b52;
}

.contact-left .contact-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* 右カード（信頼UP用） */
.contact-right-card{
  background:#ffffff;
  border-radius:24px;
  padding:28px 24px 32px;
  box-shadow:
    0 8px 20px rgba(0,0,0,.06),
    inset 0 0 0 1px rgba(0,0,0,.04);
  position:relative;
  overflow:hidden;
}

/* 模様（右上の淡い円） */
.contact-right-card::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  top:-80px;
  right:-80px;
  border-radius:50%;
  background:rgba(204,239,253,0.35);
}

/* 模様（左下の淡い円） */
.contact-right-card::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  bottom:-60px;
  left:-60px;
  border-radius:50%;
  background:rgba(204,239,253,0.25);
}

.cr-title{
  margin:0 0 14px;
  font-size:22px;
  font-weight:900;
  color:#063b52;
}

.cr-sub{
  margin-top:20px;
  font-size:18px;
  font-weight:800;
  color:#063b52;
}

.cr-list{
  margin:0;
  padding-left:0;
  list-style:none;
  line-height:1.65;
  color:#44505c;
}

.cr-voice{
  background:#f8fcff;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  line-height:1.6;
  color:#44505c;
  border:1px solid #e3eff7;
  margin-top:8px;
}

.cr-img-wrap{
  margin-top:20px;
  text-align:center;
}

.cr-img-wrap img{
  width:75%;
  border-radius:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

/* ============================
   スマホ（縦並び）
=============================== */
@media(max-width:720px){
  .contact-grid{
    grid-template-columns:1fr;
  }
  .contact-right-card{
    margin-top:10px;
    padding:24px 18px 28px;
  }
  .cr-img-wrap img{
    width:60%;
  }
}

/* ===========================================
   ★ 最上段：1コマ無料体験ヒーロー
=========================================== */

.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);
}

/* モバイル調整 */
@media(max-width:480px){
  .freehero__inner{
    padding:28px 20px 36px;
  }
  .freehero__title{
    font-size:22px;
  }
  .freehero__lead{
    font-size:15px;
  }
}

/* ===========================================
   FIX: Hero モバイルで画像を上に + 画像が潰れない
=========================================== */

/* Hero内の2つの子要素（テキストブロックと画像ブロック）を確実に順番変更 */
@media (max-width:900px){
  .hero > .container.grid-2{
    display:flex !important;
    flex-direction:column !important;
    align-items:center;
    gap:18px;
    text-align:center;
  }

  /* 2番目(画像側)を先頭へ */
  .hero > .container.grid-2 > div:nth-child(2){
    order:-1;
    width:100%;
    position:relative;
    z-index:2;
  }

  /* 1番目(テキスト側) */
  .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;
  }
}

/* ===========================================
   FIX: 英検対策ポイント（HTMLのクラスに合わせて修正）
   - 女の子がデカい
   - 背景が高い
   - リストが変な改行
=========================================== */


/* 中身：モバイルで縦並び & 余白詰め */
@media (max-width:720px){
  .eiken-ab-wrap{
    flex-direction:column;
    align-items:center;
    gap:14px;
    padding:0 14px;
  }

  /* パネルの余白を詰めて“背景高すぎ”を抑える */
  .eiken-ab-panel{
    padding:30px 30px !important;
    border-radius:18px;
  }

  /* 変な改行対策：記号周りで不自然に切れないように */
  
  .eiken-list li{
    line-height:1.65;
    font-size:0.98rem;
    word-break:keep-all;
    overflow-wrap:break-word;
    line-break:strict;
  }
}

/* ===========================================
   FIX: 「選ばれる理由」モバイルで縦長すぎ
   - 余白を削る
   - カード内の画像枠/余白を縮める
=========================================== */

@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-card{
    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:720px){
  /* テキスト側ブロックだけ左基準に戻す */
  .eiken-ab-panel{
    text-align:left;
  }

}

@media (max-width:720px){
  /* 元の文言を消す */
  .cta-band__copy{
    font-size:0;          /* 文字を見えなくする */
  }

  /* モバイル用文言を表示 */
  .cta-band__copy::before{
    content:"無料体験で弱点がわかる";
    font-size:0.9rem;    /* 好きなサイズに調整可 */
    font-weight:800;
    white-space:nowrap;
    display:inline-block;
  }
}

@media (max-width:480px){
  /* Heroのテキストブロックだけ左寄せ */
  .hero__content{
    text-align:left;
  }
}

@media (max-width:720px){

  /* 英検ポイント：中身の配置 */
  .eiken-ab-wrap{ padding:0 14px; gap:14px; }
  .eiken-ab-img img{ width:min(220px,70vw); height:auto; margin:0 auto; }

  /* タイトルと本文を左揃え（同じ起点） */
  .eiken-ab-panel{ text-align:left; }
  .eiken-title{ text-align:left; margin:0 0 10px; }

  /* リストが変に改行しない調整 */
  .eiken-list li{ word-break:keep-all; overflow-wrap:anywhere; line-break:strict; }

  /* 「無料体験で～」の文言差し替え（開業しない） */
  .cta-band__copy{ font-size:0; }
  .cta-band__copy::before{
    content:"無料体験で弱点がわかる";
    font-size:.9rem;
    font-weight:800;
    white-space:nowrap;
    display:inline-block;
  }
}

/* =========================================================
   英検ポイント（統一版：これだけ）
========================================================= */

.eiken-ab{
  position:relative;
  overflow:hidden;
  background:#fff;
  padding:0 0 90px;              /* セクションの下余白 */
}

/* 波（SVG） */
.wave-top{
  position:absolute;
  left:0;
  top:20px;                      /* PC基準：ここで波の位置決まる */
  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;                     /* ★波の下ライン（PC基準） */
  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;                     /* 0〜1にしておくと破綻しにくい */
  pointer-events:none;
}

/* ===== モバイルだけ必要な分だけ上書き ===== */
@media (max-width:480px){
  .wave-top{ top:10px; height:80px; }
  .eiken-ab::before{ top:90px; }  /* ★波の下ライン（スマホ基準） */
  .eiken-ab{ padding-bottom:36px; }
}

/* ===== 統一版の直後に置く：中身の整形だけ ===== */
.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;
}
.eiken-list li{ margin-bottom:8px; }
.eiken-list .strong{ color:#ff3e6c; font-weight:900; }

@media (max-width:720px){
  .eiken-ab-wrap{
    flex-direction:column;
    align-items:center;
    gap:14px;
    padding:0 14px;
  }
  .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; overflow-wrap:anywhere; }
}

.why-card-imgbox img{
  display:block;        /* ← 重要 */
  margin:0 auto;        /* ← 中央寄せ */
}

@media (max-width:720px){
  /* TOP（Hero）と英検対策の間を離す */
  .eiken-ab{
    padding-top:40px;   /* ← ここが距離。32〜56で好み */
  }
}

@media (max-width:720px){
  /* CTA帯の影を消す（モバイルだけ） */
  .cta-band{
    box-shadow:none;
    border:1px solid rgba(255,255,255,.15); /* ← 輪郭だけ残す（任意） */
  }

  /* ボタン自体の影も消したい場合 */
  .cta-band .cta-hero{
    box-shadow:none;
  }
}

/* ★ mobile時のドーナツ位置を最終決定 */
@media (max-width:480px){
  .why-abc::before{
    left:50%;
    transform:translateX(-50%) !important; /* ← 少し左寄せ */
  }
}

/* =========================================================
   ✅ HERO 最終FIX（これだけに統一 / 必ずCSSの一番最後）
   - 2560×1440でも1920×1080寄りの見え方に固定
   - HTMLのクラスに合わせて（hero__content / hero-img）
========================================================= */

/* HEROは背景の基準点 */
.hero,
.hero--first{
  position:relative;
  overflow:hidden;
}

/* コンテンツは常に前 */
.hero > .container.grid-2,
.hero__content,
.hero-img{
  position:relative;
  z-index:2;
}

/* 弧（SVG）は常に後ろ（-1は危険なので0に固定） */
.hero-arc{
  position:absolute !important;
  z-index:0 !important;
  pointer-events:none;
}

/* 1920×1080基準で固定（1296 = 1080*1.2 / オフセットも固定） */
.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%);
}

/* hero--first の光（::after）が解像度で暴れるのでpx固定 */
.hero--first::after{
  top:-288px !important;     /* -18rem 相当を固定 */
  right:-256px !important;   /* -16rem 相当を固定 */
  width:768px !important;    /* 48rem 相当を固定 */
  height:768px !important;
}

/* HERO：本文とCTAの間隔（PC） */
.hero__content > p{ margin:0 0 75px; }
.hero__content .cta-band{ margin-top:0; }

/* モバイル */
@media (max-width:720px){
  .hero__content > p{ margin:0 0 10px; }
}

/* 2560px以上の画面だけ、全体を拡大（これだけでOK） */
@media (min-width: 2400px){
  html{ font-size:18px; }
  :root{ --container:min(1320px,92vw); } /* 横幅もちょい広げたいなら */
}

html{ font-size:16px !important; }