@charset "UTF-8";
/* --------------------------------------------------
 * online-course-high-school-3 LP 専用設定
 * -------------------------------------------------- */
/* ==========================================================
 * online-course-high-school-3-club
 *
 * /online-course-high-school-3-club/（部活で忙しい層向けLP）の差分だけを持つ。
 * マークアップとクラス名は online-course-high-school-3 と共通で、
 * online-course-high-school-3.css を読み込んだ「あと」に読み込んで上書きする。
 *
 * ここに書くのは「新デザインで画像の寸法・配置が変わった箇所」だけ。
 * 色や余白など -3 と同じ仕様のものは一切持たない（-3 側の修正をそのまま受ける）。
 * ========================================================== */
/* --- FV -------------------------------------------------
 * 新デザインは SP 375×434 / PC 1080×562（-3 は 375×466 / 1080×518）。
 */
.och3-fv__link img {
  aspect-ratio: 375/434;
}
@media only screen and (min-width: 768px) {
  .och3-fv__link img {
    aspect-ratio: 1080/562;
  }
}

/* --- お悩みカード ---------------------------------------
 * ②「部活が多い」（旧「勉強効率が悪い」）だけ差し替え。①③は -3 の画像をそのまま使うので
 * -3 の指定に任せる。
 *
 * 差し替えた素材は @2x で 300×220 / 300×282（＝150×110 / 150×141）と、-3 の
 * 143×113 / 143×129 に対して縦横比が違う。
 *
 * PC は本文が画像の下に来るので 146px 指定（実寸150pxより少し詰める）。
 *
 * SP は本文が画像の右に回り込む（本文の開始位置は左から139px）。この素材は絵が
 * canvas の 7.5〜141.5px に描かれているので、実寸150px・左に4px出す配置にすると
 * 絵の右端が本文の手前で終わる。-3 の `left: 8` のままだと時計が本文に潜り込む。
 * 左下の角は素材側が透過なのでカードの角丸は保たれる。
 *
 * PCは `left: 50%` の中央寄せなので、left の指定はどちらも SP 限定にしている。
 */
@media only screen and (max-width: 767.999px) {
  .och3-worry__item-img {
    left: 1.6vw;
  }
}

.och3-worry__item-img.--img1 {
  left: -1.0666666667vw;
  width: 40vw;
}
@media only screen and (min-width: 768px) {
  .och3-worry__item-img.--img1 {
    left: 50%;
    width: 9.125rem;
  }
}

@media only screen and (min-width: 768px) {
  .och3-worry__list {
    gap: 0.75rem;
  }
}

@media only screen and (max-width: 767.999px) {
  .och3-worry__item-txt {
    font-size: 3.2vw;
  }
}

/* --- キミノスクールって？ --------------------------------
 * PCのチェック項目。-3 は行ごとに justify-content: center なので、行の長さが違うと
 * チェックマークの位置が揃わない。ul を内容幅に落として（パネルが align-items: center の
 * フレックスなので、それだけで中央に来る）、行は左揃えに戻す。
 * カンプでも 314px幅のかたまりが 1000px の中央に置かれている。
 */
@media only screen and (min-width: 768px) {
  .och3-service__checks {
    width: auto;
  }
}

@media only screen and (min-width: 768px) {
  .och3-service__check {
    justify-content: flex-start;
  }
}

/* --- 実際の合格事例 -------------------------------------
 * どちらもSPのみの調整。PCは -3 の指定（本文はオフセット無し／見出し下は9px）のまま。
 */
@media only screen and (max-width: 767.999px) {
  .och3-results__item-body {
    position: relative;
    top: -1.6vw;
  }
}

@media only screen and (max-width: 767.999px) {
  .och3-results__more-title {
    margin-bottom: 5.3333333333vw;
  }
}

/* --- メディア紹介 ---------------------------------------
 * SPのみ下の余白を 40px → 16px。カンプの実測もSPが16px、PCは40pxで -3 と同じ。
 */
@media only screen and (max-width: 767.999px) {
  .och3-media {
    padding-bottom: 4.2666666667vw;
  }
}

/* --- 合格体験記 -----------------------------------------
 * SPの人物バナーが 343×144 → 343×187 に。PC（528×144）は据え置き。
 */
.och3-interview__item-hero {
  aspect-ratio: 343/187;
}
@media only screen and (min-width: 768px) {
  .och3-interview__item-hero {
    aspect-ratio: 528/144;
  }
}

/* SPは濵田さんのみ掲載する（君野くんはPCでのみ表示） */
.och3-interview__item.--pc-only {
  display: none;
}
@media only screen and (min-width: 768px) {
  .och3-interview__item.--pc-only {
    display: flex;
  }
}

/* --- 入塾までの流れ -------------------------------------
 * 直後にあった料金セクションを削除したぶん、SPだけ下に80pxの余白を持たせる。
 * （-3 は padding: 40px 0 0 で下余白を持たない）
 */
@media only screen and (max-width: 767.999px) {
  .och3-flow {
    padding-bottom: 21.3333333333vw;
  }
}

/* --- キャンペーン枠を挟んでいた箇所の上マージンを戻す ----
 * -3 は「メディア→理由」「無料カウンセリング→合格体験記」の間にキャンペーン枠が入るので、
 * 後続セクションを `--nomargin` で上マージン0にしている。枠を削除したぶん、PCは80pxを戻す。
 */
@media only screen and (min-width: 768px) {
  .och3-reason.--nomargin,
  .och3-interview.--nomargin {
    margin-top: 5rem;
  }
}

/* --- 30日間全額返金保証 ----------------------------------
 * 直前にあった料金セクションを削除したぶん、PCは上に80pxの余白を持たせる。
 * （.c-hosyo は main.css の共通コンポーネントで margin: 0 auto。SP側は
 *   .och3-flow の padding-bottom で取っているのでここでは触らない）
 */
@media only screen and (min-width: 768px) {
  .c-hosyo {
    margin-top: 5rem;
  }
}