:root{
      
      --navy:#0E1B2A;
      --ochre:#B08A3C;
      --green:#2c6d57;

      
      
      --deepgreen:#1F5E4C;
--bg:#FFFFFF;
      --paper:#FBFAF8;      
      --sand:#f2eee7;       
      --line:#E6E1D9;
      --text:var(--navy);
      --muted:#4D5B6B;

      --radius:10px;
      --shadow: 0 16px 45px rgba(14,27,42,.10);
      --max: 1140px;

      --h1: clamp(30px, 3.6vw, 52px);
      --h2: clamp(20px, 2.2vw, 32px);
      --h3: clamp(16px, 1.8vw, 18px);
      --p:  clamp(14px, 2.0vw, 16px);

      /* ===== Typography (Google Fonts) ===== */
      --font-heading-jp: "Noto Serif JP", serif;
      --font-body: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
      --font-hero: "Montserrat", "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
}

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: var(--font-body);
      color:var(--text);
      background:var(--bg);
      line-height:1.8;
    }
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }
    .wrap{ max-width:var(--max); margin:0 auto; padding:0 18px; }

    
    header{
      position:sticky; top:0; z-index:50;
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(230,225,217,.9);
    }
    .topbar{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      min-width: 180px; user-select:none;
    }
    .logoMark{
      width:40px; height:40px; border-radius:14px;
      overflow:hidden;
      background:#fff;
      border:1px solid rgba(230,225,217,.9);
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
      flex: 0 0 auto;
    }
    .logoMark img{ width:100%; height:100%; object-fit:cover; }
    .brandName{ display:flex; flex-direction:column; line-height:1.05; }
    .brandName b{ letter-spacing:.02em; 
      font-size:18px;
      font-weight:900;
    }
    .brandName small{ color:var(--muted); font-size:11px; }

    nav{
      display:flex; align-items:center; gap:18px;
      color:#2A3A4A; font-size:14px;
    }
    nav a{
      padding:10px 10px; border-radius:12px;
    }
    nav a:hover{ background:var(--paper); }

    .ctaRow{ display:flex; gap:10px; align-items:center; }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:11px 14px;
      border-radius:999px;
      border:1px solid rgba(230,225,217,.95);
      background:#fff;
      font-weight:800; font-size:14px;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(14,27,42,.10); }
    .btn.primary{
      border-color: transparent;
      background: var(--deepgreen);
      color:#fff;
    }
    .btn.ghost{
      border-color: rgba(46,125,98,.20);
      background: rgba(46,125,98,.06);
      color: var(--green);
    }

    .menuBtn{
      display:none;
      border:1px solid rgba(230,225,217,.95);
      background:#fff;
      border-radius:12px;
      padding:10px 12px;
      font-weight:800;
    }
    @media (max-width: 920px){
      nav{ display:none; }
      .menuBtn{ display:inline-flex; }
      .ctaRow .btn{ display:none; }
    }

    .drawer{
      display:none;
      border-top:1px solid rgba(230,225,217,.95);
      background:#fff;
    }
    .drawer.open{ display:block; }
    .drawer a{
      display:block;
      padding:14px 18px;
      border-bottom:1px solid rgba(230,225,217,.95);
      color:#2A3A4A;
      font-weight:750;
    }
    .drawer .drawerCtas{
      display:grid; gap:10px;
      padding:14px 18px;
      background: var(--paper);
    }

    
    .hero{
      position:relative;
      width:100vw;
      margin-left:calc(50% - 50vw);
      min-height: 560px; 
         
      background: url("../assets/hero-woman2.png") center / cover no-repeat;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.00) 100%);
    }
    
    .waveTop, .waveBottom{
      position:absolute; left:0; right:0; pointer-events:none;
      opacity:.55;
    }
    .waveTop{ top:-1px; }
    .waveBottom{ bottom:-1px; opacity:.75; }

    .hero .wrap{ position:relative; z-index:2; }
    .hero .tag, .hero h1{ color:#fff; }
    .hero .lead{ color: rgba(255,255,255,.88); }
    .hero .tag{  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }
    .hero .btn.ghost{ border-color: rgba(255,255,255,.55); color:#fff; }
    .hero .btn.ghost:hover{ background: rgba(255,255,255,.14); }

    .heroInner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:24px;
  padding: 38px 0 26px;
  align-items: stretch;
  position:relative;
  z-index:1;

  min-height: calc(100vh - 72px);
  align-items: center; 
}

@media (max-width: 920px){
  .heroInner{
    grid-template-columns:1fr;
    padding: 24px 0 18px;

    min-height: calc(100vh - 72px);
    align-items: center;
  }
}

    .tag{
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 12px;
      border:1px solid rgba(176,138,60,.25);
      background: rgba(176,138,60,.10);
      border-radius:999px;
      color:#5E4A20;
      font-size:14px;
      font-weight:900;
      letter-spacing:.04em;
    }
    h1{
      margin:14px 0 10px;
      font-size:var(--h1);
      line-height:1.10;
      letter-spacing:-.01em;
    }
    .lead{
      margin:0;
      font-size:var(--p);
      color:var(--muted);
      max-width: 64ch;
    }
    .heroBtns{
      margin-top:16px;
      display:flex; flex-wrap:wrap; gap:10px;
    }
    .heroBtns .btn{ padding:12px 16px; }
    .heroMedia svg{ width:min(440px, 84%); height:auto; opacity:.95; }

    
    .quickBar{
      margin-top: -14px;
      position:relative;
      z-index:2;
    }
    .quickBox{
      border-radius: 999px;
      border:1px solid rgba(230,225,217,.95);
      background:#fff;
      box-shadow: 0 18px 46px rgba(14,27,42,.08);
      padding: 12px;
      display:grid;
      grid-template-columns: 1.2fr 1fr 1fr auto;
      gap:12px;
      align-items:center;
    }
    @media (max-width: 920px){
      .quickBox{
        border-radius: var(--radius);
        grid-template-columns:1fr;
        gap:10px;
      }
    }
    .qItem{
      display:flex; align-items:flex-start; gap:10px;
      padding:10px 12px;
      border-radius: 18px;
      background: var(--paper);
      border:1px solid rgba(230,225,217,.95);
    }
    .qItem b{ display:block; font-size:13px; }
    .qItem small{ display:block; color:var(--muted); font-size:12px; line-height:1.55; margin-top:2px; }
    .qIcon{
      width:34px; height:34px; border-radius:14px;
      display:grid; place-items:center;
      border:1px solid rgba(46,125,98,.18);
      background: rgba(46,125,98,.06);
      color: var(--green);
      flex: 0 0 auto;
    }
    .quickCtas{
      display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
      padding-right:6px;
    }
    @media (max-width: 920px){
      .quickCtas{ justify-content:flex-start; padding-right:0; }
    }

    
    section{ padding: 60px 0; }
    .sectionTitle{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom: 18px;
    }
    .sectionTitle h2{
      margin:0 0 15px;
      font-size:35px;
      letter-spacing:0.05em;  
      font-weight: 430;
      line-height: 2.0;
    }
    .sectionTitle p{
      margin:0;
      color:var(--muted);
      font-size:16px;
      max-width: 74ch;
    }

    
    .reasonBand{
  background: var(--sand);
  position:relative;
  overflow:hidden;
}

/* セクション間の境界線を共通化（これ1つで全対応） */
main > section + section{
  border-top: 1px solid rgba(230,225,217,.95);
}
    .reasons{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:16px;
      margin-top: 18px;
    }
    @media (max-width: 920px){
      .reasons{ grid-template-columns:1fr; }
    }
    .reason{
      border:1px solid rgba(230,225,217,.95);
      background:#fff;
      border-radius: var(--radius);
      padding:18px;
      box-shadow:none !important;
      transform: translateY(10px);
      opacity:0;
      transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
    }
    .reason.show{ transform:none; opacity:1; }
    .circle{
      width:86px; height:86px; border-radius:10px;
      background:
        radial-gradient(60px 60px at 30% 30%, rgba(176,138,60,.20), transparent 60%),
        radial-gradient(60px 60px at 70% 65%, rgba(46,125,98,.18), transparent 60%),
        rgba(14,27,42,.04);
      border:1px solid rgba(230,225,217,.95);
      display:grid; place-items:center;
    }
    .reason h3{ margin:12px 0 6px; color:var(--green); font-size:var(--h3); letter-spacing:-.01em; }
    .reason p{ margin:0; color:var(--muted); font-size:var(--p); }

    
    .steps{
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
    }
    .steps{
      display:grid;
      gap:16px;
    }

    .step{
      border:1px solid rgba(230,225,217,.95);
      background:#fff;
      border-radius: 24px;
      padding:18px;
      box-shadow: 0 12px 30px rgba(14,27,42,.06);
      display:flex;
      gap:16px;
      align-items:flex-start;

      opacity:0;
      transform: translateY(22px);
      transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
    }
    .step.show{ opacity:1; transform: translateY(0); }

    .stepIcon{
      width:72px;
      height:72px;
      flex:0 0 72px;
      border-radius:22px;
      background: linear-gradient(135deg, rgba(176,138,60,.14), rgba(46,125,98,.10));
      border:1px solid rgba(230,225,217,.95);
      display:grid;
      place-items:center;
    }
    .stepIcon svg{ width:46px; height:46px; }

    .stepContent{ flex:1; min-width:0; }

    .stepHead{
      display:flex;
      align-items:baseline;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:6px;
    }
    .stepLabel{
      font-weight:950;
      letter-spacing:.04em;
      font-size:(--h3);
      color: rgba(14,27,42,.92);
    }
    .stepHead h3{
      margin:0;
      font-size:(--h3);
      coler:(--green);
      letter-spacing:-.01em;
    }
    .stepContent p{
      margin:0;
      color:var(--muted);
      font-size:(--p);
      line-height:1.85;
    }

    @media (max-width: 640px){
      .step{ padding:16px; }
      .stepIcon{ width:64px; height:64px; flex-basis:64px; border-radius:20px; }
      .stepIcon svg{ width:42px; height:42px; }
    }

    .courseLead{
      margin-top:16px;
      padding:14px 16px;
      border-radius: 18px;
      border:1px solid rgba(230,225,217,.95);
      background: var(--paper);
    }
    .courseLead p{
      margin:0;
      color: var(--muted);
      font-size:(--p);
      line-height:1.8;
    }

.grid3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    @media (max-width: 920px){
      .grid3{ grid-template-columns:1fr; }
    }
    .card{
      border:1px solid rgba(230,225,217,.95);
      background:#fff;
      border-radius: var(--radius);
      padding:18px;
      box-shadow: 0 12px 30px rgba(14,27,42,.06);
      transform: translateY(10px);
      opacity:0;
      transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
    }
    .card.show{ transform:none; opacity:1; }
    .pill{
      display:inline-flex; align-items:center;
      padding:6px 10px;
      border-radius:20px;
      border: 1px solid var(--deepgreen);
      background: var(--deepgreen);
      color: #fff;
      font-weight:900;
      font-size:16px;
      letter-spacing:.04em;
    }
    .card h3{ margin:10px 0 6px; font-size:16px; }
    .card p{ margin:0; color:var(--muted); font-size:14px; }

    
    .price{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    @media (max-width: 920px){
      .price{ grid-template-columns:1fr; }
    }
    .plan{
      border:1px solid rgba(230,225,217,.95);
      background:#fff;
      border-radius: var(--radius);
      padding:18px;
      box-shadow: 0 12px 30px rgba(14,27,42,.06);
      transform: translateY(10px);
      opacity:0;
      transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
    }
    .plan.show{ transform:none; opacity:1; }
    .plan h3{ margin:10px 0 8px; font-size:16px; }
    .meta{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.7;
    }
    .hint{
      margin-top:12px;
      padding:12px 14px;
      border-radius: 16px;
      border:1px solid rgba(176,138,60,.22);
      background: rgba(176,138,60,.08);
      color:#5E4A20;
      font-size:13px;
      font-weight:750;
    }

    
    .faq{
      border:1px solid rgba(230,225,217,.95);
      border-radius: var(--radius);
      overflow:hidden;
      background:#fff;
    }
    details{
      border-bottom:1px solid rgba(230,225,217,.95);
      padding: 14px 16px;
    }
    details:last-child{ border-bottom:none; }
    summary{
      cursor:pointer;
      list-style:none;
      font-weight:850;
      color:#1A2A3A;
      display:flex; justify-content:space-between; align-items:center;
      gap:14px;
    }
    summary::-webkit-details-marker{ display:none; }
    .faq p{ margin:10px 0 0; color:var(--muted); font-size:14px; }

    
  

    
   .bottomCta{
  background:#fff;
}

/* ① 薄緑の四角（帯の箱）を消して、レイアウトだけ担当させる */
.ctaBox{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  /* 箱を大きくしている原因なので一旦外す */
  padding: 0 !important;
  min-width: 0 !important;

  /* ② ボタンを上、文章を下 */
  display: flex !important;
  flex-direction: column !important;
  align-items:center !important; /* 中央にしたければ center */
  gap: 14px !important;
}

/* ② ボタン側を「2倍」くらいに大きくする（aでもbuttonでも効く） */
.ctaBox a,
.ctaBox .btn,
.ctaBox button{
  font-size: 18px !important;
  padding: 18px 28px !important;
  border-radius: 999px !important;
  min-width: 240px;
}

/* スマホは横幅いっぱいに */
@media (max-width: 640px){
  .ctaBox a,
  .ctaBox .btn,
  .ctaBox button{
    width: 100%;
    min-width: 0;
  }
}


    }
    @media (max-width: 920px){
      .ctaBox{ grid-template-columns:1fr; }
    }
    .ctaBox h2{ margin:0; font-size: var(--h2); }
    .ctaBox p{ margin:6px 0 0; color:var(--muted); font-size:16px; }
    .ctaBtns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
    @media (max-width: 920px){
      .ctaBtns{ justify-content:flex-start; }
    }

    footer{
      padding: 26px 0 40px;
      background: var(--navy);
      color: rgba(255,255,255,.78);
    }
    footer small{ color: rgba(255,255,255,.60); }

    
    @media (prefers-reduced-motion: reduce){
      .btn, .card, .reason, .plan, .step{ transition:none !important; }
    }

/* ヘッダーを常に固定 */
header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255,255,255,.98);
}

/* ヘッダーの高さ分だけ、本文を下げる（数値は実物に合わせて調整） */
main#top{
  padding-top: 80px;
}

/* ===== Header tune (トップ修正) ===== */
.logoMark{ width:48px; height:48px; border-radius:14px; }
.brandName b{ font-size:20px; font-weight:900; }
.brandName small{ font-size:13px; }
nav{ font-size:16px; font-weight:800; gap:20px; }
nav a{ padding:12px 12px; }



/* ===== Hero school name block ===== */
.heroSchool{
  display:inline-block;
  margin: 0 0 10px;
}
.heroSchool__name{
  position:relative;
  display:inline-block;
  color:#fff;

  font-family: var(--font-hero);
  font-weight: 200;
  letter-spacing: .12em;
  text-transform: uppercase; /* MOMOの雰囲気（日本語は影響ほぼなし） */

  font-size: clamp(30px, 5.0vw, 70px);
  line-height:1.05;
  padding-bottom: 10px;
}
.heroSchool__name::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background: rgba(255,255,255,.55);
}
.heroSchool__sub{
  margin-top: 10px;
  color: rgba(255,255,255,.88);

  font-family: var(--font-hero);
  font-weight: 400;
  letter-spacing: .18em;

  font-size: 16px;
  opacity: .95;
  text-align: center;
}

/* Hero内の文字ブロックを少し上へ（PC） */
@media (min-width: 921px){
  .heroCopy{
    transform: translateY(-120px);
  }
}

/* hero内はPC/スマホ共通で左寄せ（中央寄りの根本対策） */
.heroCopy{
  text-align: left;
  justify-self: start; /* grid内で左に寄せる */
  margin-right: auto;  /* 念のため中央化を防ぐ */
}

/* 「言葉で〜」タグをPC/スマホ共通で左寄せに固定 */
.heroCopy .tag{
  display: inline-flex;
  margin-left: 0 !important;
  margin-right: auto !important;

  justify-self: start !important;    /* grid対策 */
  align-self: flex-start !important; /* flex対策 */
  text-align: left;
}

/* ===== Plan Table（コースカード内） ===== */
.planTable{
  width:100%;
  border-collapse:collapse;
  margin:12px 0 8px;
}

.planTable th,
.planTable td{
  padding:8px 6px;
  border-bottom:1px solid rgba(230,225,217,.95);
  font-size:14px;
  text-align:left;
  vertical-align:top;
}

.planTable th{
  width:72px;
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
}

.planNote{
  margin-top:8px;
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
}

/* ===== コースカード下部：おすすめ枠 ===== */
.planRec{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(245, 235, 220, .55); /* ベージュ */
  border:1px solid rgba(210, 185, 150, .45);
  font-size:14px;
  line-height:1.7;
  color:var(--text);
}

.planRec__label{
  font-weight:700;
  margin-right:4px;
  color:rgba(120, 90, 50, .95);
}


h1, h2, h3{font-family: var(--font-heading-jp);}


/* =========================
   Noto Sans JP 統一後の “見出しを弱くしない” 調整
   style.css の末尾に追記
========================= */

/* 全体：念のため全要素をNoto Sans JPへ寄せる（フォーム要素も統一） */
html, body, button, input, textarea, select {
  font-family: var(--font-body);
}

/* 見出し：セリフ体がなくなる分、太さと行間でメリハリを作る */
h1, h2, h3 {
  font-family: var(--font-body);
  letter-spacing: -0.01em; /* 詰めすぎず、読みやすさ優先 */
  color: var(--text);
}

/* H1：ヒーローの主役。詰まりすぎないよう行間はやや広め */
h1 {
  font-weight: 500;
  line-height: 1.12;
}



/* H3：カード見出しなど。本文との差が出る程度に */
h3,
.card h3,
.reason h3 {
  font-weight: 750;
  line-height: 2;
}

/* ヒーローのスクール名（WRITEFULアカデミー）：
   Montserrat→Noto Sans JPになっても “ロゴっぽさ” を維持 */
.heroSchool__name {
  font-family: var(--font-body);
  font-weight: 400;        /* もともとの200相当を、日本語でも成立する細さに */
  letter-spacing: 0.01em;  /* 広げすぎると日本語が間延びするので控えめ */
  text-transform: none;    /* 日本語/混在なら無効化推奨（見た目のブレ防止） */
}

/* サブコピー：読みやすさ優先で少しだけ太く */
.heroSchool__sub {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* ヒーローの本文（lead）：白背景ではないので太さを少し上げて視認性UP */
.hero .lead {
  font-weight: 500;
  line-height: 1.85;
}

.heroSchool__name{
  white-space: nowrap;   /* ← 1行固定 */
  word-break: keep-all;  /* ← 日本語の変な分割も防ぐ */
}

/* =========================
   HERO文字：既存の開き具合を保ちつつ、全体を少しだけ広げる
   style.css の末尾に追記
========================= */

/* 調整量：ここだけ変えればOK（例: 0.6em / 0.8em / 1em） */
:root{
  --hero-space-add: 0.6em;
}

/* HERO内のブロック間余白を「既存 + 追加分」にする */
.heroSchool{ margin-bottom: 1.0; } /* もともと 0 なので増える */
.heroSchool__sub{ margin-top: var(--hero-space-add); }

.hero h1{ margin-bottom: var(--hero-space-add); } /* h1の下を少し広げる */


/* lead（最後）→ ボタンの間を広げる */
.heroBtns{ margin-top: 3.0; }

/* 行間も同じ方向で少しだけ広げる（文字の密度を下げる） */
.heroSchool__sub{ line-height: calc(1.6 + 0.1); } /* ほんの少し */
.hero h1{ line-height: calc(1.12 + 0.06); }       /* ほんの少し */
.hero .lead{ line-height: calc(1.85 + 0.08); }    /* ほんの少し */


/* HERO：スクール名ブロックを少し上へ */
.heroSchool{
  position: relative;
  top: -10px;  /* ← -6px〜-14px で微調整 */
}


/* HERO：ボタンを少し下へ（上の文章との間隔を広げる） */
.heroBtns{
  margin-top: calc(16px + 12px); /* ← 10px部分を 6〜14px で微調整 */
}


/* =========================
   Concept（Writefulアカデミーとは）
   - 参考画像のように「見出し〜本文」を中央にまとめる
   - 「イラスト＋カード」も全体として中央に見せる
========================= */

/* セクション見出し：中央寄せ */
#Writefulアカデミーとは .sectionTitle--center{
  justify-content:center;
  text-align:center;
}
#Writefulアカデミーとは .sectionTitle--center > div{
  max-width: 72ch;
  margin: 0 auto;
}

#Writefulアカデミーとは .conceptLead{
   margin-top: 18px;
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
#Writefulアカデミーとは .conceptLead p{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}
#Writefulアカデミーとは .conceptLead p + p{ margin-top: 10px; }
#Writefulアカデミーとは .conceptLead__em{
  font-weight: 750;
  color: var(--text);
}

/* イラスト＋おすすめカード：全体を中央寄せ */
#Writefulアカデミーとは .conceptGrid{
  margin: 34px auto 0;
  max-width: 980px;
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 34px;
  align-items:center;
}

/* 左イラスト */
#Writefulアカデミーとは .conceptIllust{
  display:flex;
  justify-content:center;
  align-items:center;
}
#Writefulアカデミーとは .conceptIllust img{
  width:100%;
  max-width: 240px;
  height:auto;
}

/* 右カード：右寄せをやめて、グループ全体として中央に見せる */
#Writefulアカデミーとは .conceptRecommend{
  width:100%;
  max-width:none;
  padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(230,225,217,.95);
  background:#fff;
}

#Writefulアカデミーとは .conceptRecommend__title{
  display:block;
  font-size: var(--h3);
  font-weight: 750;
  color: var(--green);
}

#Writefulアカデミーとは .conceptRecommend ul{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: var(--p);
  line-height: 1.9;
}
#Writefulアカデミーとは .conceptRecommend li{ margin: 0 0 10px; }
#Writefulアカデミーとは .conceptRecommend li:last-child{ margin-bottom:0; }

#Writefulアカデミーとは .sectionTitle p{
  white-space: nowrap;   /* 改行させない */
}

/* モバイル：縦並び */
@media (max-width: 920px){
  #Writefulアカデミーとは .conceptGrid{
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items:center;
  }
  #Writefulアカデミーとは .conceptRecommend{
    max-width: 560px;
  }
}

@media (min-width: 921px){
  #Writefulアカデミーとは .sectionTitle p{
    white-space: nowrap;
  }
}


/* ===== Steps layout update (left illustration + cards fit nicely) ===== */
#上達のステップ .stepsLayout{
  display:grid;
  grid-template-columns: minmax(280px, 460px) minmax(320px, 560px); /* 右カラムに上限を付けて“収まり”を作る */
  gap:20px; /* イラストとカードの余白 */
  align-items:start;
  justify-content:space-between; /* 余った幅は左右に配る（中央寄りで綺麗に） */
}

#上達のステップ .stepsIllust{
  align-self:start;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

#上達のステップ .stepsIllust img{
  width:100%;
  max-width:500px; /* ★イラストサイズ ←ここ */
  height:auto;
  object-fit:contain;
}

/* 右列：広がりすぎを防ぎ、ポイント3枚カードのように整列させる */
#上達のステップ .stepsCol{
  width:100%;
  max-width:560px;          /* ← none をやめて上限をつける（収まりの要） */
  justify-self:start;       /* 右カラムの開始位置に揃える */
}

/* STEPカード左のアイコン：画像をそのまま使用（囲み無し） */
#上達のステップ .stepIcon{
  width:100px;
  height:100px;
  flex:0 0 88px;
  border:none !important;
  background:transparent !important;
  border-radius:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
#上達のステップ .stepIcon svg{ display:none; }
#上達のステップ .stepIconImg{
  width:90px;
  height:90px;
  object-fit:contain;
}

/* レスポンシブ：スマホは縦並びに */
@media (max-width: 920px){
  #上達のステップ .stepsLayout{
    grid-template-columns: 1fr;
    gap:18px;
    justify-content:stretch;
  }
  #上達のステップ .stepsIllust{
    justify-content:flex-start;
  }
  #上達のステップ .stepsIllust img{
    max-width:280px;
  }
  #上達のステップ .stepsCol{
    max-width:none;         /* 縦並びでは横幅いっぱいでOK */
    justify-self:stretch;
  }
}

@media (max-width: 640px){
  #上達のステップ .stepIcon{
    width:72px;
    height:72px;
    flex-basis:72px;
  }
  #上達のステップ .stepIconImg{
    width:58px;
    height:58px;
  }
}

/* ===== Writefulアカデミーのポイント（3枚）を手書き枠に ===== */
.reason{
  position: relative;
  border: none;                 /* 既存の四角い枠線は消す */
  background:#fff;
  border-radius: 20px;          /* 中身の角丸（必要なら調整） */
  padding: 28px;                /* 余白（必要なら調整） */
}

.reason::before{
  content:"";
  position:absolute;
  inset:-6px;                   /* 手書き線を少し外へ */
  background: url("../assets/card_line.png") no-repeat center / 100% 100%;
  pointer-events:none;
  z-index:0;                    /* 線を背面に */
}

/* カード内の文字・アイコンを線より前に */
.reason > *{
  position: relative;
  z-index:1;
}

/* ===== 「こんなかたにおすすめ」→ ふきだし背景（位置ズレを安定させる） ===== */
#Writefulアカデミーとは .conceptRecommend{
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;

  /* ★文字と線の“余裕”はここで作る */
  padding: 52px 10px 62px 78px;
}

/* 背面の吹き出し（サイズを大きくして、左右にも余裕を出す） */
#Writefulアカデミーとは .conceptRecommend::before{
  content:"";
  position:absolute;

  /* ★吹き出しの「見た目サイズ」をここで決める */
  inset: -24px 30px -36px -56px; 
  /*      ↑top  ↑right ↑bottom ↑left */

  background: url("../assets/fukidashi.png") no-repeat;
  background-size: 100% 100%;
  background-position: 50% 55%;
  pointer-events:none;
  z-index:0;
}

#Writefulアカデミーとは .conceptRecommend > *{
  position: relative;
  z-index:1;
}

/* コース・料金だけ背景を変える */
section.sectionBg{
  background: var(--sand) !important;
  padding: 80px 0;
}

section.sectionBg .wrap{
  background: transparent !important;
}


/* ===== セクション背景：3段階（追加） ===== */
section.bg-white{ background: var(--bg); }
section.bg-1{ background: var(--paper); } /* 一段濃い */
section.bg-2{ background: var(--sand); }  /* 二段濃い */


/* planHead：3列グリッドで中央を安定させる */
.planHead{
  display:grid;
  grid-template-columns: 108px minmax(0, 1fr) 108px;
  align-items:center;
  column-gap: 8px;
}

/* 左：ピルは固定幅で左寄せ */
.planHead .pill{
  width:108px;                 /* ← 上と同じ値にする */
  justify-content:center;
  margin-right:0;              /* 以前の余白があれば無効化 */
}

/* 中央：テキストは真ん中に */
.planHead .recommend{
  white-space: nowrap;
  overflow: visible;     /* ← ellipsis解除 */
  text-overflow: clip;   /* ← ellipsis解除 */
  font-size: 14px;       /* きつければ 13px */
 
  min-width: 0;            /* ← これがないと広がりやすい */
}

/* 右：ダミー列（中央を真ん中に保つため） */
.planHead::after{
  content:"";
  grid-column:3;
}

.planHead .recommend{
  white-space: nowrap;
}