/* ── にほんごTOIRO 共通CSS ── */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#F8F7F4;
  --text:#3D3030;
  --sub:#6B5E5C;
  --green:#527A5F;
  --green-dk:#3F6349;
  --card:rgba(255,255,255,0.88);
  --border:rgba(200,190,180,0.35);
  --grid:rgba(160,155,148,0.18);
  --font:'M PLUS Rounded 1c','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
}

body{
  font-family:var(--font);
  font-size:15px;
  line-height:1.8;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:30px 30px;
  min-height:100vh;
  padding:48px 16px 80px;
}

.wrap{
  max-width:600px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* ── ロゴ（テキストバッジ） ── */
.logo{text-align:center;margin-bottom:4px}
.logo span{
  display:inline-block;
  background:var(--green);
  color:#fff;
  font-weight:800;
  font-size:17px;
  letter-spacing:0.14em;
  padding:7px 22px;
  border-radius:999px;
}

/* ── カード ── */
.card{
  background:var(--card);
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 2px 20px rgba(80,60,50,0.07);
  padding:32px 28px;
}

/* ── ヒーローカード（ロゴ画像入り） ── */
.hero-card{
  text-align:center;
}
.hero-logo{
  display:block;
  height:130px;
  width:auto;
  margin:0 auto 20px;
  mix-blend-mode:multiply;
}

/* ── ヒーローテキスト ── */
.hero-headline{
  font-size:clamp(15px,3.2vw,18px);
  font-weight:700;
  line-height:1.6;
  margin-bottom:16px;
  text-align:left;
  white-space:nowrap;
}
.hero-sub{
  font-size:13.5px;
  color:var(--sub);
  line-height:1.9;
  border-left:3px solid var(--green);
  padding-left:14px;
  margin-bottom:14px;
  text-align:left;
}
.hero-desc{
  font-size:13.5px;
  color:var(--sub);
  line-height:1.9;
  text-align:left;
}

/* ── タグ ── */
.tag{
  display:inline-block;
  background:var(--green);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.07em;
  padding:3px 10px;
  border-radius:4px;
  margin-bottom:12px;
}

/* ── フォーム見出し・説明 ── */
.form-h2{
  font-size:clamp(16px,3.5vw,19px);
  font-weight:700;
  line-height:1.5;
  margin-bottom:10px;
}
.form-desc{
  font-size:13.5px;
  color:var(--sub);
  line-height:1.85;
  margin-bottom:20px;
}

/* ── Kit フォーム ── */
.kit-form{margin:0}
.kit-form .fields{display:flex;gap:8px;flex-wrap:wrap}

.kit-form input[type="email"]{
  flex:1 1 200px;
  padding:12px 14px;
  border:1.5px solid var(--border);
  border-radius:10px;
  font-family:var(--font);
  font-size:14px;
  background:#fff;
  outline:none;
  transition:border-color .2s;
}
.kit-form input[type="email"]:focus{
  border-color:var(--green);
}
.kit-form input[type="email"]::placeholder{
  color:#bbb;
}
.kit-form button[type="submit"]{
  padding:12px 24px;
  background:var(--green-dk);
  color:#fff;
  border:none;
  border-radius:10px;
  font-family:var(--font);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:opacity .2s;
  white-space:nowrap;
}
.kit-form button[type="submit"]:hover{
  opacity:0.85;
}

.form-note{
  font-size:12px;
  color:#9a8e8b;
  margin-top:10px;
  line-height:1.7;
}

/* ── WL ── */
.wl{
  background:linear-gradient(135deg,#edf4ef 0%,#e5efe9 100%);
  border:1.5px solid rgba(82,122,95,0.28);
  border-radius:16px;
  padding:28px 26px;
}
.wl-tag{
  display:inline-block;
  background:var(--green);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:4px;
  margin-bottom:12px;
}
.wl h3{
  font-size:clamp(13px,3vw,15px);
  font-weight:700;
  color:var(--green-dk);
  line-height:1.6;
  margin-bottom:10px;
}
.wl p{
  font-size:13.5px;
  color:#3a4d3f;
  line-height:1.9;
}

/* ── 体験レッスンセクション ── */
.form-b-h2{
  font-size:clamp(16px,3.5vw,19px);
  font-weight:700;
  margin-bottom:10px;
}
.form-b-desc{
  font-size:13.5px;
  color:var(--sub);
  line-height:1.85;
  margin-bottom:20px;
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:13px 22px;
  border:2px solid var(--green);
  color:var(--green);
  background:transparent;
  border-radius:10px;
  font-family:var(--font);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:background .2s,color .2s;
}
.btn-outline:hover{
  background:var(--green);
  color:#fff;
}

/* ── ボタン（塗りつぶし） ── */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 32px;
  background:var(--green-dk);
  color:#fff;
  border:none;
  border-radius:12px;
  font-family:var(--font);
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:opacity .2s;
}
.btn-primary:hover{
  opacity:0.85;
}

/* ── フッター ── */
footer{
  text-align:center;
  font-size:12px;
  color:#9a8e8b;
  padding-top:4px;
}

/* ── check-email / freebie 用追加 ── */
.icon-circle{
  width:72px;height:72px;
  margin:0 auto 18px;
  background:linear-gradient(135deg,#edf4ef 0%,#e5efe9 100%);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
}
.center{text-align:center}
.section-headline{
  font-size:clamp(17px,4vw,22px);
  font-weight:800;
  line-height:1.5;
  margin-bottom:12px;
}
.section-desc{
  font-size:14px;
  color:var(--sub);
  line-height:1.85;
  margin-bottom:24px;
}
.steps{
  list-style:none;
  counter-reset:step;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:24px;
  text-align:left;
}
.steps li{
  counter-increment:step;
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14px;
  line-height:1.7;
}
.steps li::before{
  content:counter(step);
  flex-shrink:0;
  width:28px;height:28px;
  background:var(--green);
  color:#fff;
  font-weight:800;
  font-size:13px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* ── 戻るリンク ── */
.back-link{
  text-align:center;
  font-size:13px;
}
.back-link a{
  color:var(--sub);
  text-decoration:none;
}
.back-link a:hover{
  text-decoration:underline;
}

/* ── レスポンシブ ── */
@media(max-width:480px){
  .card,.wl{padding:22px 18px}
  .kit-form .fields{flex-direction:column}
  .kit-form button[type="submit"]{width:100%}
  .hero-headline{white-space:normal;font-size:15px}
  .hero-logo{height:110px}
}