@charset "UTF-8";
.bookSection .bookArticle.Pa12 .bookH3Group .left.article1 {
    background-image: url("../images/course/bgBook15Pa.png") !important;
    background-size: 100% auto !important; 
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
  }
  .bookSection .bookArticle.Pa12 .bookH3Group .left.article1 h3 {
    color: #fff !important; 
  }

.SpeechBubbleLineH2.green::before,
.SpeechBubbleLineH2.green::after,
.SpeechBubbleLineH2.green h2::before,
.SpeechBubbleLineH2.green h2::after {
  background: #69D6DE !important;   
  border-color: #69D6DE!important;  
}
.SpeechBubbleLineH2.green h2 div {
  background: #69D6DE  !important;
  border-color: #69D6DE  !important;
}

.SpeechBubbleLineH2.green h2 div,
.SpeechBubbleLineH2.green h2 div::before {
  background: #69D6DE  !important; 
  border-color: #69D6DE  !important;
}

.classArticle.green {
    background: url("../images/course/classArticle15Pa.png") repeat-y !important;
    background-size: 100% auto !important;
  }
  .classArticle.green .texGroup h4 {
    background-color: #69D6DE !important; 
  }
  .classArticle .className {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px; 
  }

  /* 見た目調整 */
  .classArticle .className .kangarooClass {
    text-align: center;
    white-space: nowrap;
  }

.summarySection.green .texGroup dl div dt {
    background: #69D6DE !important;
  }
  .summarySection.green .texGroup dl div dd {
    background: #F1FEFF !important; 
  }
  .classArticle.green .classCard .texGroup ul li::before {
    background: #69D6DE !important; 
  }
  .CourseDescription.green .curriculumSection aside {
    background: #F1FEFF !important;
  }
  .label {
    background: #69D6DE !important; 
    color: #F1FEFF !important;      
  }
  .introBox {
    line-height: 1.8;
    border-radius: 4px; 
    margin: 15px
  }
/* 例：course_c_atypical.css などページ専用CSSの“最後”に */
.classArticle.yellow header .className p.kangarooClass {
    color: #69D6DE; /* 変えたい色 */
  }
/* 見出しまわり：線や下余白を完全に無効化 */
.classArticle header{
    border-bottom: none !important;
    margin-bottom: 15px !important; 
  }
  .classArticle header::before,
  .classArticle header::after{
    content: none !important;
    display: none !important;
  }
  .classArticle header h3.className{
    border: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .classArticle header h3.className::before,
  .classArticle header h3.className::after{
    content: none !important;
    display: none !important;
  }
  
  /* ラベルの親：グリッドで統一（旧 flex 指定を殺す） */
  .classArticle .className{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 16px;

    /* 念のため古い指定を上書きで無効化 */
    flex-wrap: unset !important;
    justify-content: unset !important;
    align-content: start;
  }
  
  /* ラベル（p）は段落の既定マージンが出るのでゼロに */
  .classArticle .className .kangarooClass{
    display: block;       /* baseline のズレ防止 */
    margin: 0 !important; /* ←これ重要 */
    align-self: start;
  }
  
  /* 1段目だけ2カラムずつ、2段目は1カラムずつ */
  .classArticle .className .kangarooClass:nth-child(1){ grid-column: 1 / span 2; grid-row: 1; }
  .classArticle .className .kangarooClass:nth-child(2){ grid-column: 3 / span 2; grid-row: 1; }
  .classArticle .className .kangarooClass:nth-child(3){ grid-column: 1;          grid-row: 2; }
  .classArticle .className .kangarooClass:nth-child(4){ grid-column: 2;          grid-row: 2; }
  .classArticle .className .kangarooClass:nth-child(5){ grid-column: 3;          grid-row: 2; }
  .classArticle .className .kangarooClass:nth-child(6){ grid-column: 4;          grid-row: 2; }

/* 各ステップ行 */
.stepTtl {
  position: relative;
  color: #69D6DE; /* 水色 */
  font-weight: 700 !important;
  font-size: 15px;
  line-height: 1.6;
  margin: 8px 0 8px 20px; /* 左に少しスペース */
  letter-spacing: 0.03em;
}

/* 左のドット ● */
.stepTtl::before {
  content: "●";
  color: #69D6DE;
  position: absolute;
  left: -18px; /* ドットの位置調整 */
  top: 8px;
  font-size: 7px;
}
/* テキストグループ内の見出し・説明文は共通pのmarginをリセット */
.texGroup p.stepTtl,
.texGroup p.stepDesc {
  margin: 0 0 0px 20px !important;
}
.stepDesc {
    color: #000;
    font-size: 13px;
    font-weight: 300 !important; /* ← 太字強制 */
    line-height: 1.8;
    margin: 0 0 0 40px; /* 青見出しとインデント合わせ */
  }
  /* コースカードの下にマージンを追加（最後はゼロ） */
.classSection .classArticle { margin-bottom: 24px; }
.classSection .classArticle:last-of-type { margin-bottom: 60px; }
.online-flow {
    --flow-bg: #F2FBF4;
    --flow-accent: #6CBD73;
    display: grid;
    gap: 18px;
    margin: 0 auto 28px;
  }
  
  .flow-step {
    position: relative;
  }
  
  .flow-step .step-label {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--flow-accent);
    font-weight: 700;
    font-size: 18px;
  }
  
  .flow-step .step-num {
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--flow-accent);
    font-weight: 800;
    font-size: 56px;
    transform: translateY(6px);
  }
  
  .flow-step .step-card {
    background: #EFF8ED;
    border-radius: 18px;
    padding: 28px 24px;
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
  }
  /* ステップ共通：タイトル部を横向き「step 1」形式に */
.flow-step {
  text-align: center; /* 全体中央揃え */
  margin-bottom: 16px; /* 次のステップとの間隔 */
}

.flow-step .step-label,
.flow-step .step-num {
  position: static;          /* 絶対配置を解除 */
  display: inline-block;     /* 横並び */
  vertical-align: baseline;  /* ベースライン揃え */
  transform: none;           /* ずらし解除 */
  line-height: 1;
  font-family: "Roboto","Noto Sans JP",system-ui,-apple-system,sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .02em;
  
}
/* まず flow 内の継承太字を打ち消し */
.online-flow .flow-step .step-num,
.online-flow .flow-step .step-num *{
  font-weight: inherit !important;
}

/* 数字（1,2,3）を細くする */
.online-flow .flow-step .step-num{
  font-family: "Roboto","Noto Sans JP",system-ui,-apple-system,sans-serif !important;
  font-weight:  500 !important;   /* 300にしたいなら 300 に */

}

/* “step”のラベルは中間の太さ */
.online-flow .flow-step .step-label{
  font-family: "Roboto","Noto Sans JP",system-ui,-apple-system,sans-serif !important;
  font-weight: 500 !important;
}

/* 注釈（small）のサイズを揃える */
.online-flow .flow-step .step-card .step-text small{
  font-size: 12px;         /* デザイン指定に合わせて変更可 */
  line-height: 1.7;
  font-weight: 400 !important;
  display: inline-block;
  margin-top: 4px;
}

/* 「step」の文字部分 */
.flow-step .step-label {
  color: var(--flow-accent);
  font-weight: 700;
  font-size: 18px;
  margin-right: 6px; /* 数字との間 */
}

/* 数字部分 */
.flow-step .step-num {
  color: var(--flow-accent);
  font-weight: 800;
  font-size: 56px;
  margin: 0; /* 下の余白は flow-step で管理 */
  
}

/* =============================
   オンラインレッスン受講の流れ
   アイコンサイズ調整（SP/PC）
============================= */

/* PC（1024px以上） */
@media (min-width: 1024px){
  .flow-step .step-card {
    grid-template-columns: 120px 1fr;
  }
  .online-flow .flow-step .step-img {
    text-align: center;
  }
  /* step1：スマホアイコン */
  .online-flow .flow-step:nth-of-type(1) .step-img img {
    width: 55px;  /* 通常サイズ */
  }

  /* step2：メールアイコン（少し大きく） */
  .online-flow .flow-step:nth-of-type(2) .step-img img {
    width: 67px;  /* メールを目立たせる */
  }

  /* step3：人アイコン（中間くらい） */
  .online-flow .flow-step:nth-of-type(3) .step-img img {
    width: 88px;
  }
}


.flow-step {
  position: relative; /* 絶対配置の基準にする */
}

.step-triangle {
  text-align: center;
  margin: -40px 0 5px; /* 上下余白を調整 */
}

.step-triangle img {
  width: 66px;
  height: auto;
  display: inline-block;
  
}
.online-flow {
  max-width: 900px; /* ← 青のボーダーとほぼ同じ幅に */
}

/* 横並びのまま、数字だけ少し下げる */
.flow-step .step-num {
  position: relative;  /* ← static のままだと top が効かない */
  top: 25px;            /* 2〜5pxで微調整してOK */
}

/* もし「step」側も少し下げたいなら */
.flow-step .step-label {
  position: relative;
  top: 25px;            /* 任意。不要なら消してOK */
}
/* ステップ内テキストを大きくする */
.flow-step .step-text {
  font-size: 18px;      /* ← デフォルト16pxより大きめ */
  line-height: 1.8;     /* 読みやすい余白 */
  font-weight: 500;     /* 適度に太く */
}
/* step1/2：.step-text が p そのもののケース */
.online-flow .flow-step .step-card p.step-text {
  font-weight: 600;  /* メイン文を太く */

}

/* step3：.step-text が div で最初の p を太く */
.online-flow .flow-step .step-card .step-text > p:first-child {
  font-weight: 700 !important;  /* 見出し行だけしっかり太く */
}


.online-flow .flow-step .step-card .step-text small {
  font-weight: 400 !important;
  font-size: 10px;
}

.online-flow .flow-step .step-card .step-text strong {
  font-weight: 700 !important;
}
/* オンラインレッスン下の注意書き（flow-note）を細く・小さく・淡くする */
.online-flow .flow-note {
  font-size: .769em;      
  font-weight: 300;     
  line-height: 1.8;     
  opacity: 0.85;        
}
.online-flow .flow-note {
  margin-top: -10px;
  margin-bottom: 12px; /* 下の余白も整えるなら追加 */
}
/* 文法（オプショナル）だけ白背景のカードに */
.classArticle.grammar-optional{
  background: none !important;  /* ページ全体の色背景を打ち消す */
}
.classArticle.grammar-optional .classCard{
  background: #fff;
  border-radius: 14px;
  padding: 24px 20px;
}
/* 画像と本文を同じ横幅に合わせる */
.classArticle .classCard .imgGroup img{
  display:block;
  width:100%;
  max-width: 500px;       /* 画像の実サイズに合わせて調整 */
  margin: 0 auto;
}
.classArticle .classCard .introBox{
  max-width: 500px;       /* ← 上の max-width と同じ値 */
  margin: 12px auto 0;    /* 画像と同じ中央寄せ */
  line-height: 1.8;
}

/* ---------- SP対応 ---------- */
@media (max-width: 750px) {
  .online-flow {
    padding-inline: 20px;   /* ← 左右20pxの内側余白 */
    box-sizing: border-box;  /* 幅計算を安定させる */
  }
  .flow-step .step-text {
    font-size: 14px;
  }
  .flow-step .step-label {
    font-size: 15px;
    margin-right: 4px;
    top: 17px;
  }
  .flow-step .step-num {
    font-size: 40px;
  }
  /* ついでにSPカードの詰まりも少し緩める（任意） */
  .flow-step .step-card {
    grid-template-columns: 1fr;  /* 縦積み維持 */
    padding: 20px 16px;          /* 余白をSP向けに */
    border-radius: 16px;
    text-align: center;
  }

  /* step-cardを横並びに変更 */
  .flow-step .step-card {
    display: flex;              /* grid → flex に変更 */
    align-items: center;
    justify-content: flex-start;                /* アイコンとテキストの間 */
    padding: 20px 16px;         /* 内側余白 */
    border-radius: 16px;
    text-align: left;           /* テキスト左寄せ */
  }
  /* アイコンサイズを調整 */
  .flow-step .step-img img {
    height: auto;
    flex-shrink: 0;

  }
  .step-triangle img {
    width: 44px;  /* ← 元が66pxなので約2/3サイズ */
    height: auto;
  }
  .flow-step .step-card {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: 90px 1fr;
    padding: 19px 24px;
  }
  .flow-step .step-num {
    position: relative;
    top: 20px;
}
.online-flow .flow-step .step-text {
  text-align: center;     /* テキストを中央に */
  display: block;
  width: 100%;            /* 幅いっぱい使う（中央寄せ有効に） */
  margin: 0 auto;         /* 念のため中央配置を安定させる */
}
.online-flow .flow-step .step-card .step-text > p:first-child {
  font-weight: 700 !important;
  text-align: center;
  margin-left: -30px;
}
.flow-step {
  text-align: center;
  margin-bottom: 0px;
}
.flow-step .step-triangle img {
  margin-top: 20px; /* ← 値を増やすと下に動く（8〜16pxで調整） */
}
.flow-step .step-text {
  font-size: 13px;      /* ← デフォルト16pxより大きめ */
  line-height: 1.8;     /* 読みやすい余白 */
  font-weight: 500;     /* 適度に太く */
}

}
/* カード内の並びをフレックスにして横の余白を統一 */
.online-flow .flow-step .step-card{
  gap: 12px;            
}

/* SPでは少し詰める */
@media (max-width: 750px){
  .online-flow .flow-step:nth-of-type(1) .step-text {
    margin-left: -4px; /* テキストだけを4px左に寄せる */
  }
}

/* 「オンラインレッスン受講の流れ」見出しの下に余白を追加 */
.summarySection.green + .online-flow {
  margin-top: 60px; /* ← お好みで 40〜80px 調整可 */
}