/* ============================================================
   RESPONSIVE OVERHAUL — 2026-04-22
   全ページ375 / 768 / 1024で破綻しないよう総仕上げ
   ============================================================ */

/* ---------- Tablet & below: 1024px ---------- */
@media (max-width: 1024px) {
  :root {
    --pad-x: 32px;
    --header-h: 64px;
  }
  .section__inner { padding: 80px var(--pad-x); }
  .section--top-left .section__inner,
  .section--top-right .section__inner,
  .section--bot-left .section__inner,
  .section--bot-right .section__inner {
    max-width: calc(100vw - var(--pad-x) * 2);
  }
  .hero-earth { margin-right: -8vw; width: 55vw; height: 55vw; }
  .overview { grid-template-columns: 1fr; gap: 40px; padding: 80px var(--pad-x); }
  .overview__visual { min-height: 280px; order: -1; }
  .team__member { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .team__avatar { max-width: 180px; }
  .curriculum__day { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .tiers__grid { grid-template-columns: 1fr; }
  .grid__cards, .grid__cards--3 { grid-template-columns: 1fr; max-width: 560px; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- Mobile: 768px and below ---------- */
@media (max-width: 768px) {
  :root {
    --pad-x: 20px;
    --header-h: 60px;
    --fs-hero: clamp(32px, 9vw, 48px);
    --fs-h2: clamp(26px, 7vw, 34px);
    --fs-h3: clamp(20px, 5vw, 26px);
  }

  /* Header + Hamburger */
  .header { padding: 0 16px; }
  .header__logo img { height: 32px; }
  .header__nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(123, 216, 255);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 20px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex !important;
    z-index: 48;
  }
  .header__nav.is-open { transform: translateX(0); }
  .header__nav a { font-size: 22px; letter-spacing: 0.05em; font-weight: 700; }

  .header__menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    cursor: pointer;
    margin-left: 12px;
    position: relative;
    z-index: 51;
  }
  .header__menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #0a0a0a;
    position: relative;
  }
  .header__menu-btn span::before,
  .header__menu-btn span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #0a0a0a;
    transition: transform 0.3s;
  }
  .header__menu-btn span::before { top: -7px; }
  .header__menu-btn span::after { top: 7px; }
  .header__menu-btn.is-open span { background: transparent; }
  .header__menu-btn.is-open span::before { top: 0; transform: rotate(45deg); }
  .header__menu-btn.is-open span::after { top: 0; transform: rotate(-45deg); }

  .header__cta {
    font-size: 12px !important;
    padding: 8px 14px !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap;
  }

  /* Sections */
  .section { min-height: auto; padding-top: calc(var(--header-h) + 24px); padding-bottom: 48px; }
  .section--hero { min-height: 86vh; padding-top: 0; }
  .section__inner { padding: 60px var(--pad-x); }
  .section--top-left .section__inner,
  .section--top-right .section__inner,
  .section--bot-left .section__inner,
  .section--bot-right .section__inner {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    padding: 100px var(--pad-x) 60px;
    max-width: 100%;
  }
  .section__title { font-size: var(--fs-hero); line-height: 1.15; }
  .section__title--medium { font-size: var(--fs-h2); }
  .section__subtitle { font-size: 15px; }
  .section__eyebrow { font-size: 11px; letter-spacing: 0.22em; }

  /* Hero */
  .section__media--earth { display: flex; align-items: center; justify-content: center; }
  .hero-earth {
    position: absolute !important;
    top: auto !important;
    bottom: 8% !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 85vw !important;
    height: 85vw !important;
    margin: 0 !important;
    opacity: 0.45;
  }
  .section--hero .section__inner {
    background: linear-gradient(180deg, rgba(0,4,10,0.2) 0%, rgba(0,4,10,0.85) 100%);
  }
  .hero-badges { gap: 8px; margin: 20px 0 24px; }
  .hero-badge { font-size: 10px; padding: 6px 10px; }
  .hero-badge strong { font-size: 12px; }
  .btn-group { flex-direction: column; gap: 10px; width: 100%; }
  .btn-group .btn { width: 100%; justify-content: center; font-size: 13px; padding: 14px 16px; }
  .urgency-badge { top: calc(var(--header-h) + 16px); right: 16px; font-size: 9px; padding: 7px 12px; }

  /* Marquee */
  .marquee { padding: 14px 0; }
  .marquee__item { font-size: 13px; padding: 0 20px; }
  .marquee__item::after { margin-left: 14px; }

  /* Proof strip */
  .proof-strip { padding: 40px 16px; }
  .proof-strip__inner { grid-template-columns: 1fr; gap: 28px; }
  .proof-strip__stat { font-size: 42px; }

  /* Huge Number */
  .huge-num { min-height: 50vh; padding: 60px 16px; }
  .huge-num__value { font-size: clamp(80px, 24vw, 140px); }
  .huge-num__caption { font-size: 12px; }

  /* Compare Strip — mobile stack */
  .compare-strip { padding: 60px 16px; }
  .compare-strip__title { font-size: 26px; }
  .compare-strip__table { grid-template-columns: 1fr !important; border: 0; }
  .compare-strip__cell { padding: 12px 14px; font-size: 14px; border-bottom: none; }
  .compare-strip__cell--head { background: #f5f5f3; color: #0a0a0a; font-weight: 700; padding: 14px; border-top: 1px solid var(--border); }
  .compare-strip__cell--win { background: var(--accent); color: #0a0a0a; font-weight: 700; border-top: none; }

  /* Sticky sequence: モバイルでは全5日間を縦並びリストで見せる */
  .sticky-seq { height: auto !important; background: var(--bg); }
  .sticky-seq__pin {
    position: relative !important;
    height: auto !important;
    padding: 40px 20px !important;
    display: block !important;
    top: auto !important;
  }
  .sticky-seq__stage {
    display: block !important;
    gap: 0 !important;
    max-width: 100% !important;
  }
  .sticky-seq__visual { display: none !important; }
  .sticky-seq__content {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: auto !important;
  }
  .sticky-seq__text {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    margin-bottom: 32px !important;
    padding: 24px !important;
    background: var(--bg-alt);
    color: var(--on-dark);
    border-radius: 10px !important;
  }
  .sticky-seq__label {
    color: var(--accent) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
  }
  .sticky-seq__title {
    color: var(--on-dark) !important;
    font-size: 24px !important;
    margin: 12px 0 !important;
  }
  .sticky-seq__desc {
    color: var(--on-dark-muted) !important;
    font-size: 14px !important;
  }

  /* Face Wall */
  .face-wall { padding: 60px 16px; }
  .face-wall__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .face__overlay { padding: 10px; }
  .face__quote { font-size: 11px; line-height: 1.4; margin-bottom: 4px; }
  .face__name { font-size: 9px; }
  .face-wall__title { font-size: 26px; }
  .face-wall__sub { font-size: 13px; }

  /* Pricing Reveal */
  .pricing-reveal { padding: 60px 16px; }
  .pricing-reveal__title { font-size: 24px; margin-bottom: 32px; }
  .pricing-reveal__strike { font-size: 18px; }
  .pricing-reveal__value { font-size: clamp(60px, 16vw, 80px); }

  /* Featured Strip */
  .featured-strip { padding: 40px 16px; }
  .featured-strip__items { gap: 20px; }
  .featured-strip__item { font-size: 13px; }

  /* Countdown */
  .countdown { padding: 60px 16px; }
  .countdown__title { font-size: 22px; margin-bottom: 28px; }
  .countdown__timer { gap: 8px; }
  .countdown__block { min-width: 64px; padding: 14px 10px 10px; }
  .countdown__num { font-size: 28px; }
  .countdown__unit { font-size: 9px; letter-spacing: 0.18em; }

  /* Cards */
  .grid { padding: 60px 16px; }
  .card { padding: 54px 24px 28px; min-height: auto; }
  .card__title { font-size: 28px !important; white-space: normal; }
  .card__price { font-size: 30px; }
  .card__price--free { font-size: 40px; }
  .card__catch { font-size: 15px; }
  .card__desc { font-size: 14px; }
  .card--featured { transform: translateY(0); }
  .card--featured:hover { transform: translateY(-4px); }

  /* Compare table */
  .compare { padding: 40px 16px; }
  .compare table { min-width: 100%; font-size: 13px; }
  .compare th, .compare td { padding: 12px 8px; font-size: 13px; }
  .compare th.is-highlight { font-size: 15px !important; padding: 14px 8px; }
  .compare td.is-highlight { font-size: 15px !important; }

  /* Curriculum */
  .curriculum { padding: 60px 16px; }
  .curriculum__title { font-size: 26px; margin-bottom: 32px; }
  .curriculum__day-label { font-size: 36px; }
  .curriculum__day-title { font-size: 20px; }
  .curriculum__day-desc { font-size: 14px; }

  /* Numbers */
  .numbers { padding: 60px 16px; }
  .numbers__title { font-size: 24px; }
  .numbers__table th, .numbers__table td { padding: 12px 8px; font-size: 13px; }
  .numbers__table td:last-child { font-size: 16px; padding: 14px 10px; }

  /* List-block */
  .list-block { padding: 60px 16px; }
  .list-block__title { font-size: 22px; }
  .list-block li { padding: 14px 0 14px 22px; font-size: 14px; }

  /* FAQ */
  .faq { padding: 60px 16px; }
  .faq__title { font-size: 24px; margin-bottom: 32px; }
  .faq__q { font-size: 16px; padding-left: 36px; }
  .faq__q::before { font-size: 11px; padding: 3px 7px; }
  .faq__a { font-size: 14px; padding-left: 36px; }

  /* Stats */
  .stats { grid-template-columns: 1fr; gap: 24px; padding: 48px 16px; }
  .stats__num { font-size: 60px; }

  /* Stories */
  .stories { padding: 60px 16px; }
  .stories__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .story__quote { font-size: 18px; }

  /* Tiers */
  .tiers { padding: 60px 16px; }
  .tiers__grid { gap: 16px; margin-top: 40px; }
  .tier { padding: 32px 24px; }
  .tier__price { font-size: 26px; }

  /* Team */
  .team { padding: 60px 16px; }
  .team__member { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .team__avatar { max-width: 140px; }
  .team__name { font-size: 28px; }

  /* Schedule — カード形式化 */
  .schedule { padding: 40px 16px; }
  .schedule__table, .schedule__table tbody, .schedule__table thead, .schedule__table tr, .schedule__table td, .schedule__table th {
    display: block !important;
    width: 100% !important;
  }
  .schedule__table thead { display: none !important; }
  .schedule__table tr {
    background: var(--bg-alt);
    color: var(--on-dark);
    padding: 18px 18px;
    margin-bottom: 14px;
    border-radius: 10px;
    border-bottom: none !important;
  }
  .schedule__table td {
    padding: 6px 0 !important;
    border: none !important;
    font-size: 14px !important;
    color: var(--on-dark) !important;
  }
  .schedule__table td:first-child { font-weight: 700; font-size: 16px !important; color: var(--accent) !important; }
  .schedule__table td:nth-child(2)::before { content: "内容: "; color: var(--on-dark-muted); font-size: 11px; }
  .schedule__table td:nth-child(3)::before { content: "プラン: "; color: var(--on-dark-muted); font-size: 11px; }
  .schedule__table td:nth-child(4)::before { content: "残席: "; color: var(--on-dark-muted); font-size: 11px; }
  .schedule__table td:last-child { margin-top: 10px; }
  .schedule__table td:last-child .btn { width: 100%; justify-content: center; }

  /* CTA Band */
  .cta-band { padding: 60px 16px; }
  .cta-band__title { font-size: 22px; }
  .cta-band__sub { font-size: 14px; }

  /* Footer */
  .footer { padding: 48px 20px 24px; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer__brand { grid-column: 1 / -1; margin-bottom: 8px; }
  .footer__brand img { height: 40px; }
  .footer__col h4 { font-size: 10px; }
  .footer__col a { font-size: 12px; }
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; margin-top: 40px; }

  /* Dividers */
  .divider { height: 140px; }
  .divider__text { font-size: 16px; padding: 0 24px; }

  /* Floating CTA */
  .floating-cta {
    bottom: 16px !important;
    right: 16px !important;
    padding: 11px 16px !important;
    font-size: 11px !important;
  }

  /* Line banner */
  .line-banner {
    padding: 12px 16px !important;
    max-height: none !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .line-banner__text { font-size: 12px !important; text-align: center; }
  .line-banner__close { top: 6px; right: 10px; }

  /* Section numbers */
  .sec-num { font-size: 10px; top: calc(var(--header-h) + 12px); }

  /* Form */
  .form { padding: 40px 16px; }
  .form__input, .form__textarea, .form__select { font-size: 16px; padding: 12px 14px; }

  /* Grid header */
  .grid__header { margin-bottom: 32px; }
  .grid__title { font-size: 26px; }
  .grid__sub { font-size: 14px; }

  /* Installment */
  .installment { flex-direction: column; gap: 14px; padding: 18px 20px; }
  .installment__main strong { font-size: 22px; }
  .installment__split strong { font-size: 24px; }
}

/* ---------- Small mobile: 400px and below ---------- */
@media (max-width: 400px) {
  .face-wall__grid { grid-template-columns: repeat(2, 1fr); }
  .header__cta { padding: 7px 10px !important; font-size: 11px !important; }
}

/* ---------- Desktop base: hamburger hidden ---------- */
@media (min-width: 769px) {
  .header__menu-btn { display: none !important; }
}

/* =============================================================
   Responsive Fix — 新規追加セクション & 崩れ対策（全ページ共通）
   ============================================================= */
@media (max-width: 768px) {

  /* ---- 比較表（4列）モバイル：横スクロール化 ---- */
  .compare-strip__table--4col {
    display: grid !important;
    grid-template-columns: 110px repeat(3, minmax(110px, 1fr)) !important;
    overflow-x: auto;
    border: 1px solid var(--border) !important;
    font-size: 13px;
    -webkit-overflow-scrolling: touch;
  }
  .compare-strip__table--4col .compare-strip__cell {
    padding: 10px 8px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .compare-strip__table--4col .compare-strip__cell--head {
    font-size: 10.5px !important;
    padding: 12px 8px !important;
    letter-spacing: 0.04em !important;
    text-align: left;
  }
  .compare-strip__table--4col .compare-strip__cell--win {
    font-size: 14.5px !important;
  }

  /* ---- カード機能リスト ---- */
  .card__features { margin: 12px 0 20px; padding-top: 12px; }
  .card__features li {
    padding: 6px 0 6px 26px;
    font-size: 12.5px;
    line-height: 1.6;
  }
  .card__features li::before {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    box-shadow: 0 0 0 2.5px rgba(123, 216, 255, 0.22);
  }

  /* ---- page-hero-title（動画下タイトル）の文字サイズ ---- */
  .page-hero-title .section__title {
    font-size: clamp(26px, 7vw, 40px) !important;
    margin-bottom: 14px !important;
  }
  .page-hero-title .section__subtitle { font-size: 14px !important; }

  /* ---- History ---- */
  .history__title { font-size: clamp(24px, 6.5vw, 32px) !important; margin-bottom: 32px !important; }
  .history__block { padding: 32px 0 !important; }
  .history__heading { font-size: clamp(18px, 5vw, 22px) !important; margin-bottom: 16px !important; }
  .history__body { font-size: 14px !important; line-height: 1.9 !important; }
  .history__body--emphasis { font-size: 17px !important; }
  .history__num { font-size: 32px !important; }

  /* ---- Profile ---- */
  .profile__title { font-size: clamp(26px, 6.5vw, 34px) !important; }
  .profile__sub { font-size: 13.5px !important; }
  .profile__card { padding: 32px 22px 26px !important; }
  .profile__avatar { width: 120px !important; height: 120px !important; }
  .profile__name { font-size: 20px !important; }
  .profile__bio { font-size: 13px !important; line-height: 1.9 !important; }

  /* ---- Pains ---- */
  .pains__title { font-size: clamp(24px, 6.5vw, 32px) !important; }
  .pains__list { padding: 20px 18px !important; }
  .pains__item {
    padding: 12px 0 12px 38px !important;
    font-size: 13.5px !important;
  }
  .pains__check { width: 24px !important; height: 24px !important; font-size: 12px !important; }
  .pains__closing { font-size: 14px !important; }

  /* ---- Reasons (sticky-seq--reasons) ---- */
  .reasons__title { font-size: clamp(26px, 7vw, 40px) !important; }
  .reason { padding: 28px 22px !important; }
  .reason__num { font-size: 40px !important; margin-bottom: 14px !important; }
  .reason__title { font-size: 18px !important; margin-bottom: 14px !important; }
  .reason__desc { font-size: 13.5px !important; line-height: 1.85 !important; }
  .reason__days li { font-size: 12.5px !important; }
  .reason__image { aspect-ratio: 16 / 9; }

  /* ---- Works Gallery ---- */
  .works-gallery__title { font-size: clamp(22px, 6vw, 30px) !important; }
  .works-gallery__sub { font-size: 13px !important; }

  /* ---- Section hero（MV動画）高さ調整 ---- */
  .section--hero-mv { min-height: 82vh !important; }
  .section__subtitle--hero {
    font-size: 14px !important;
    margin: 12px 0 22px !important;
  }

  /* ---- Compare logo サイズ ---- */
  .compare-strip__logo { height: 22px !important; }

  /* ---- Exit modal 内部余白 ---- */
  .exit-modal { padding: 42px 22px 26px !important; width: calc(100vw - 24px) !important; }
  .exit-modal__title { font-size: 22px !important; }
  .exit-modal__desc { font-size: 13px !important; }
  .exit-modal__cta { height: 52px !important; font-size: 14px !important; }

  /* ---- Line banner ボタンのスマホ調整 ---- */
  .line-banner .btn--accent {
    padding: 12px 22px !important;
    font-size: 14px !important;
  }

  /* ---- 画像・動画の右端はみ出し防止（全体保険） ---- */
  img, video { max-width: 100%; height: auto; }

  /* ---- Body横スクロール防止（最終保険） ---- */
  body { overflow-x: hidden; }
}

/* ---- さらに小さな画面（375px以下） ---- */
@media (max-width: 380px) {
  .compare-strip__table--4col {
    grid-template-columns: 90px repeat(3, minmax(90px, 1fr)) !important;
    font-size: 12px;
  }
  .page-hero-title .section__title { font-size: 24px !important; }
  .history__heading { font-size: 17px !important; }
  .profile__card { padding: 28px 18px 22px !important; }
  .reasons__title { font-size: 24px !important; }
  .reason__title { font-size: 17px !important; }
}

/* =============================================================
   Responsive Fix Pass 2 — 受講生/投稿ページ & 全体のはみ出し対策
   ============================================================= */
@media (max-width: 768px) {
  /* ---- Hero MV: 5行改行のタイトルを縮小 ---- */
  .section--hero-mv .section__title {
    font-size: clamp(26px, 7vw, 38px) !important;
    line-height: 1.22 !important;
  }

  /* ---- Learner Story Page ---- */
  .learner-hero { padding: 48px 20px 32px; }
  .learner-hero__avatar { width: 130px !important; height: 130px !important; margin: -84px auto 20px !important; box-shadow: 0 0 0 4px var(--accent), 0 14px 28px rgba(0,0,0,0.15) !important; }
  .learner-hero__eyebrow { font-size: 10.5px !important; letter-spacing: 0.22em !important; }
  .learner-hero__name { font-size: clamp(28px, 8vw, 40px) !important; }
  .learner-hero__name span { font-size: 0.48em; }
  .learner-hero__meta { font-size: 12.5px !important; margin-bottom: 22px !important; }
  .learner-hero__quote {
    display: block !important;
    width: 100% !important;
    padding: 16px 14px !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.55 !important;
    box-sizing: border-box;
  }

  .learner-profile__grid > div { padding: 18px 10px !important; }
  .learner-profile__grid dt { font-size: 9.5px !important; letter-spacing: 0.22em !important; }
  .learner-profile__grid dd { font-size: 14px !important; letter-spacing: 0 !important; line-height: 1.4; }

  .learner-ba__label { font-size: 11px !important; letter-spacing: 0.22em !important; }
  .learner-ba__col ul li { font-size: 13.5px !important; padding: 9px 0 9px 20px !important; }
  .learner-ba__col ul li::before { width: 8px !important; height: 8px !important; top: 16px !important; }

  .learner-story__title { font-size: clamp(22px, 6vw, 32px) !important; margin-bottom: 28px !important; }
  .learner-message__quote { font-size: clamp(18px, 4.5vw, 24px) !important; line-height: 1.6 !important; }
  .learner-message__name { font-size: 11.5px !important; letter-spacing: 0.22em !important; }

  /* ---- Post Single Page ---- */
  .post-hero { padding: 44px 20px 32px !important; }
  .post-hero__meta { font-size: 10.5px !important; letter-spacing: 0.2em !important; gap: 8px !important; flex-wrap: wrap; }
  .post-hero__category { padding: 5px 10px !important; letter-spacing: 0.16em !important; }
  .post-hero__date { letter-spacing: 0.16em !important; }
  .post-hero__title { font-size: clamp(22px, 5.5vw, 30px) !important; line-height: 1.4 !important; }
  .post-hero__lead { font-size: 13.5px !important; line-height: 1.85 !important; }
  .post-body { padding: 44px 20px !important; }
  .post-body h2 { font-size: 19px !important; margin: 32px 0 14px !important; padding-left: 14px !important; }
  .post-body h3 { font-size: 16.5px !important; margin: 28px 0 12px !important; }
  .post-body p { font-size: 14px !important; line-height: 1.9 !important; }
  .post-body ul, .post-body ol { font-size: 14px !important; }
  .post-body blockquote { padding: 18px 20px !important; font-size: 14px !important; }

  /* ---- Post Card（news-grid） ---- */
  .news-section { padding: 48px 20px !important; }
  .post-card { padding: 24px 20px 22px !important; }
  .post-card__meta { font-size: 10.5px !important; letter-spacing: 0.18em !important; }
  .post-card__title { font-size: 15.5px !important; line-height: 1.55 !important; margin-bottom: 14px !important; }
  .post-card__excerpt { font-size: 12.5px !important; line-height: 1.75 !important; }
  .post-card__more { font-size: 10px !important; letter-spacing: 0.2em !important; }

  /* ---- Exit modal 小画面対応 ---- */
  .exit-modal__benefits { padding: 14px 14px !important; }
  .exit-modal__benefits li { font-size: 12.5px !important; padding: 5px 0 5px 24px !important; }
  .exit-modal__note { font-size: 10.5px !important; }

  /* ---- Tiers（b2b 3列→1列） ---- */
  .tiers__grid { grid-template-columns: 1fr !important; gap: 16px; }

  /* ---- 長文文章の改行安定化 ---- */
  h1, h2, h3 { word-break: auto-phrase; line-break: strict; }
}

/* ---- 超小型端末（360px以下 iPhone SE系） ---- */
@media (max-width: 360px) {
  .learner-hero__name { font-size: 26px !important; }
  .learner-hero__quote { font-size: 14px !important; }
  .learner-profile__grid { gap: 8px !important; }
  .learner-profile__grid > div { padding: 14px 8px !important; }
  .learner-profile__grid dd { font-size: 13px !important; }
  .post-hero__title { font-size: 20px !important; }
  .post-card__title { font-size: 14.5px !important; }
  .section--hero-mv .section__title {
    font-size: 24px !important;
  }
  .hero-badges { display: none; }
  .face-wall__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
}

/* =============================================================
   Responsive Fix Pass 3 — 2026-04-27 SP仕上げ
   - Floating CTA(60分無料相談) SP非表示
   - MV直下の余白調整
   - ヘッダーレスポンシブ修正
   - FAQ レスポンシブ修正（Qバッジ崩れ解消）
   ============================================================= */
@media (max-width: 768px) {

  /* Floating CTA: SPでは line-banner と被るため非表示 */
  .floating-cta { display: none !important; }

  /* ヘッダー右側「申し込み」CTA: SPでは非表示（ハンバーガーで案内） */
  .header__cta { display: none !important; }

  /* MV直下の余白：fold直前で切れないようにし、proof-stripとの繋ぎを自然に */
  .section.section--hero,
  .section.section--hero-mv {
    min-height: 100svh !important;
    padding-bottom: 0 !important;
  }
  .section--hero-mv .section__inner {
    padding-top: calc(var(--header-h) + 24px) !important;
    padding-bottom: 56px !important;
    background: linear-gradient(180deg, rgba(0,4,10,0.10) 0%, rgba(0,4,10,0.55) 100%);
  }
  .section--hero-mv .scroll-hint { bottom: 16px; }
  .proof-strip { padding: 36px 16px !important; margin-top: 0 !important; }

  /* ヘッダー：ロゴ・ハンバーガー・CTAの収まり最適化 */
  .header {
    padding: 0 14px !important;
    gap: 8px;
  }
  .header__logo { flex: 0 0 auto; }
  .header__logo img { height: 28px !important; }
  .header__cta {
    font-size: 11px !important;
    padding: 7px 12px !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5) !important;
    flex: 0 0 auto;
  }
  .header__menu-btn {
    margin-left: auto !important;
    margin-right: 4px !important;
    order: 3;
  }
  .header__cta { order: 2; margin-left: auto; }

  /* FAQ: Qバッジ・矢印・余白を整える（古い36px paddingが崩していた） */
  .faq { padding: 60px 16px !important; }
  .faq__title { font-size: clamp(22px, 6vw, 28px) !important; }
  .faq__sub { font-size: 11px !important; letter-spacing: 0.18em !important; margin-bottom: 32px !important; }
  .faq__q {
    font-size: 14px !important;
    padding: 16px 44px 16px 56px !important;
    line-height: 1.5 !important;
  }
  .faq__q::before {
    left: 12px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
  .faq__q::after {
    right: 16px !important;
    width: 10px !important;
    height: 10px !important;
  }
  .faq__body {
    padding: 0 16px 18px 56px !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .faq__item { overflow: visible !important; }
  .faq__item:not([open]) .faq__body { display: none !important; }
  .faq__item[open] .faq__body { display: block !important; }
  .faq__lead {
    font-size: 13px !important;
    padding: 10px 12px !important;
    line-height: 1.7 !important;
  }
  .faq__lead strong { display: inline-block; margin-right: 4px; }
  .faq__a { font-size: 13px !important; line-height: 1.85 !important; padding-left: 0 !important; }
  .faq__disclaimer { font-size: 10.5px !important; }

  /* countdown SPでブロック内改行を許容 */
  .countdown__meta { font-size: 13px !important; line-height: 1.8 !important; }

  /* sticky-seq「選ばれる、4つの理由。」を中央揃え */
  .sticky-seq--reasons .sticky-seq__section-eyebrow,
  .sticky-seq--reasons .sticky-seq__section-title,
  .sticky-seq__section-eyebrow,
  .sticky-seq__section-title {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* FAQ: openになった時の暗い被さり完全除去 */
  .faq__item {
    background: #fff !important;
    border: 1px solid var(--border) !important;
  }
  .faq__item[open] {
    background: #fff !important;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.12) !important;
    border-color: var(--accent) !important;
  }
  .faq__item[open]::before { display: none !important; content: none !important; }
  .faq__q {
    background: #fff !important;
    color: var(--text) !important;
  }
  .faq__item[open] .faq__q { background: #fff !important; color: var(--text) !important; }
}

/* =============================================================
   Responsive Fix Pass 4 — 2026-04-27
   - FAQ Qバッジ flex化（崩れ完全修正）
   - 「選ばれる、4つの理由。」中央揃え強化
   - ヘッダー「申し込み」CTAをタブレット幅まで非表示
   - フッター下端：line-bannerと被らない余白＋文字縮小
   - sticky-seq--reasons SPに画像表示（カード上部）
   ============================================================= */
@media (max-width: 1024px) {
  /* ヘッダー「申し込み」CTA: タブレット以下では完全非表示 */
  .header__cta { display: none !important; }
}

@media (max-width: 768px) {
  /* ---- FAQ: Qバッジは absolute（summary flex化は<details>トグルを壊すので不可）---- */
  .faq__q {
    display: block !important;
    padding: 16px 44px 16px 58px !important;
    line-height: 1.55 !important;
    position: relative !important;
  }
  .faq__q::before {
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    transform: none !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    line-height: 32px !important;
    text-align: center !important;
    padding: 0 !important;
    border-radius: 8px !important;
    pointer-events: none !important;
  }
  .faq__q::after {
    position: absolute !important;
    right: 18px !important;
    top: 22px !important;
    width: 9px !important;
    height: 9px !important;
    border-right: 2px solid var(--text) !important;
    border-bottom: 2px solid var(--text) !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
  }
  .faq__item[open] .faq__q::after {
    transform: rotate(-135deg) translateY(4px) !important;
  }
  /* body は質問テキストと左揃え（左 padding 58px = badge area） */
  .faq__body {
    padding: 6px 16px 20px 16px !important;
    box-sizing: border-box !important;
  }
  .faq__lead {
    font-size: 13px !important;
    padding: 12px 14px !important;
    line-height: 1.7 !important;
    margin: 0 0 12px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    border-radius: 8px !important;
  }
  .faq__a {
    font-size: 13px !important;
    line-height: 1.85 !important;
    padding-left: 0 !important;
    margin: 0 0 8px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* ---- 「選ばれる、4つの理由。」中央揃えを強化 ---- */
  .sticky-seq--reasons .sticky-seq__content {
    text-align: center !important;
    align-items: center !important;
  }
  .sticky-seq--reasons .sticky-seq__section-eyebrow,
  .sticky-seq--reasons .sticky-seq__section-title {
    text-align: center !important;
    width: 100% !important;
  }
  .sticky-seq--reasons .sticky-seq__section-title {
    line-height: 1.3 !important;
    margin-bottom: 28px !important;
  }

  /* ---- sticky-seq--reasons SP用カード上画像 ---- */
  .sticky-seq__sp-thumb {
    display: block !important;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: -4px 0 18px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #0a0a0a;
    box-shadow: 0 14px 38px -16px rgba(0, 0, 0, 0.65);
    isolation: isolate;
  }
  .sticky-seq__sp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05) contrast(1.02);
  }
  .sticky-seq__sp-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
    z-index: 1;
  }
  .sticky-seq__sp-thumb::before {
    content: attr(data-num);
    position: absolute;
    bottom: 14px;
    left: 14px;
    top: auto;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #0a0a0a;
    background: var(--accent);
    padding: 6px 12px;
    border-radius: 6px;
    z-index: 2;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
  }
  .sticky-seq__text { text-align: left !important; }

  /* ---- フッター: line-bannerと被らない余白＋文字縮小 ---- */
  .footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important; }
  .footer__bottom {
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    margin-top: 32px !important;
    gap: 6px !important;
  }
  .footer__bottom span { line-height: 1.6 !important; }
  /* line-banner表示中はフッター下に十分な余白 */
  body:has(.line-banner.is-visible) .footer {
    padding-bottom: 140px !important;
  }
}

/* PC/タブレットでは SP用画像を非表示 */
@media (min-width: 769px) {
  .sticky-seq__sp-thumb { display: none !important; }
}

/* =============================================================
   Responsive Fix Pass 5 — 2026-04-27 ヘッダー被り全ページ修正
   全ページ最初のセクションがheader高さ分潜り込んでいた
   ============================================================= */
@media (max-width: 1024px) {
  /* タブレット以下: page-hero-title・post-hero・learner-hero・news-hero に
     ヘッダー高さ + 余白を確保 */
  .page-hero-title {
    padding-top: calc(var(--header-h) + 32px) !important;
  }
  .post-hero {
    padding-top: calc(var(--header-h) + 32px) !important;
  }
  /* learner-hero は avatar が -84px 浮いているため余分に確保 */
  .learner-hero {
    padding-top: calc(var(--header-h) + 100px) !important;
  }
  .news-hero,
  .archive-hero {
    padding-top: calc(var(--header-h) + 32px) !important;
  }
}
@media (max-width: 768px) {
  .page-hero-title {
    padding-top: calc(var(--header-h) + 28px) !important;
    padding-bottom: 32px !important;
  }
  .post-hero {
    padding-top: calc(var(--header-h) + 28px) !important;
  }
  .learner-hero {
    padding-top: calc(var(--header-h) + 96px) !important;
  }
  /* page-hero-title 内のCTAは1行表示を維持（折り返し禁止）*/
  .page-hero-title .btn {
    white-space: nowrap !important;
    width: auto !important;
    max-width: calc(100vw - 40px);
    padding: 14px 22px !important;
    font-size: 13px !important;
  }
}

/* =============================================================
   Compare Cards — SPでテーブルをカード化（PCはテーブルのまま）
   ============================================================= */
.compare-cards { display: none; }

@media (max-width: 768px) {
  .compare table { display: none !important; }
  .compare-cards {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 4px;
  }
  .compare-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 18px 18px;
    position: relative;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.08);
  }
  .compare-card--highlight {
    background: #0a0a0a;
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 14px 32px -14px rgba(123, 216, 255, 0.45);
  }
  .compare-card__badge {
    position: absolute;
    top: -10px;
    left: 16px;
    display: inline-block;
    padding: 4px 10px;
    background: var(--accent);
    color: #0a0a0a;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    border-radius: 6px;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.4);
  }
  .compare-card__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin: 4px 0 16px;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
  .compare-card--highlight .compare-card__title { color: #fff; }
  .compare-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border);
  }
  .compare-card--highlight .compare-card__list { border-top-color: rgba(255, 255, 255, 0.12); }
  .compare-card__row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
  }
  .compare-card--highlight .compare-card__row { border-bottom-color: rgba(255, 255, 255, 0.08); }
  .compare-card__row:last-child { border-bottom: 0; }
  .compare-card__label {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
  }
  .compare-card--highlight .compare-card__label { color: rgba(123, 216, 255, 0.72); }
  .compare-card__value {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
  }
  .compare-card--highlight .compare-card__value {
    color: #fff;
    font-weight: 600;
  }
  .compare-card__value small { font-size: 0.78em; opacity: 0.75; display: inline-block; margin-left: 4px; }
  /* 料金は強調表示 */
  .compare-card__row:first-child .compare-card__value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.01em;
  }
  .compare-card--highlight .compare-card__row:first-child .compare-card__value {
    color: var(--accent);
  }
}

/* =============================================================
   写真背景セクション → TOP divider 風 #7BD8FF 帯（全viewport）
   ============================================================= */
.section--compact:has(.section__media) {
  min-height: 0 !important;
  background: #7BD8FF !important;
  padding: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.section--compact:has(.section__media) .section__media { display: none !important; }
.section--compact:has(.section__media) .section__inner {
  padding: 40px 20px !important;
  text-align: center;
  max-width: 100%;
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
}
.section--compact:has(.section__media) .section__title {
  color: #0a0a0a !important;
  text-shadow: none !important;
  font-size: clamp(20px, 3vw, 30px) !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.section--compact:has(.section__media) .section__subtitle {
  color: #0a0a0a !important;
  text-shadow: none !important;
  font-size: clamp(13px, 1.4vw, 15px) !important;
  line-height: 1.7 !important;
  opacity: 0.78;
  margin: 0 auto;
}

/* =============================================================
   Responsive Fix Pass 6 — 2026-04-27 standardコース可読性向上
   ============================================================= */
@media (max-width: 768px) {
  /* ---- Curriculum DAY ---- */
  .curriculum__day {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 24px 0 !important;
  }
  .curriculum__day-label {
    font-size: 14px !important;
    letter-spacing: 0.18em !important;
    line-height: 1.4 !important;
    word-break: keep-all;
    color: var(--accent-strong, #0B6FA8) !important;
    background: linear-gradient(90deg, rgba(123, 216, 255,0.18) 0%, rgba(123, 216, 255,0) 100%);
    padding: 6px 10px !important;
    border-left: 3px solid var(--accent) !important;
    display: inline-block !important;
    width: fit-content !important;
    border-radius: 0 4px 4px 0;
  }
  .curriculum__day-title {
    font-size: 19px !important;
    line-height: 1.45 !important;
    margin: 4px 0 8px !important;
  }
  .curriculum__day-desc {
    font-size: 13.5px !important;
    line-height: 1.85 !important;
    color: var(--text) !important;
  }

  /* ---- Stats（4 / 永久 / 1050%）コンパクト化 ---- */
  .stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 36px 12px !important;
  }
  .stats__item { padding: 0 4px !important; }
  .stats__num {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.1 !important;
  }
  .stats__label {
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
    line-height: 1.3 !important;
    margin-top: 8px !important;
  }

  /* SP写真背景なしの compact セクション(3ヶ月、隣にいる)はテキスト黒のまま */
  .section--compact:not(:has(.section__media)) {
    min-height: 40vh !important;
  }
  .section--compact:not(:has(.section__media)) .section__title,
  .section--compact:not(:has(.section__media)) .section__subtitle {
    color: var(--text) !important;
    text-shadow: none !important;
  }

  /* ---- Installment（料金カード）コントラスト改善 ---- */
  .installment {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.12);
    color: var(--text) !important;
  }
  .installment__main {
    color: var(--text-muted) !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-align: center;
  }
  .installment__main strong {
    display: block;
    color: var(--text) !important;
    font-family: var(--font-display);
    font-size: 32px !important;
    margin-top: 6px;
    letter-spacing: 0;
  }
  .installment__split {
    text-align: center;
    color: var(--text) !important;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }
  .installment__split strong {
    display: block;
    color: var(--accent-strong, #3d4a00) !important;
    font-size: 16px !important;
    margin-bottom: 4px;
    background: var(--accent);
    padding: 8px 12px;
    border-radius: 8px;
  }
  .installment__split small {
    display: block;
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin-top: 6px;
    letter-spacing: 0.04em;
  }

  /* ---- numbers__table（投資回収/年間収入/ROI）SP最適化 ---- */
  .numbers__table { display: block !important; }
  .numbers__table thead { display: none !important; }
  .numbers__table tbody { display: block !important; }
  .numbers__table tr {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 14px !important;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--border) !important;
    border-radius: 10px;
  }
  .numbers__table td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 13px !important;
    line-height: 1.4;
    text-align: left !important;
  }
  .numbers__table td:first-child {
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    margin-bottom: 6px;
  }
  .numbers__table td:nth-child(2) {
    font-size: 14px !important;
    color: var(--text-muted) !important;
  }
  .numbers__table td:nth-child(2)::before {
    content: "他社平均：";
    font-size: 11px;
    color: var(--text-muted);
    margin-right: 4px;
  }
  .numbers__table td:last-child {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    background: var(--accent);
    padding: 10px 12px !important;
    border-radius: 8px;
    margin-top: 6px;
    text-align: center !important;
  }
  .numbers__table td:last-child::before {
    content: "AI-DX BUILD：";
    font-size: 10px;
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 700;
    text-align: center;
  }

  /* ---- compare-strip__table 4列(inline gridスタイル)を SP横スクロール化 ---- */
  .compare-strip__table[style*="1.1fr"],
  .compare-strip__table[style*="grid-template-columns"] {
    grid-template-columns: 100px repeat(3, minmax(110px, 1fr)) !important;
    overflow-x: auto !important;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .compare-strip__table[style*="1.1fr"] .compare-strip__cell,
  .compare-strip__table[style*="grid-template-columns"] .compare-strip__cell {
    padding: 10px 8px !important;
    font-size: 12.5px !important;
    border-bottom: 1px solid var(--border) !important;
    line-height: 1.4 !important;
  }
  .compare-strip__table[style*="1.1fr"] .compare-strip__cell--head,
  .compare-strip__table[style*="grid-template-columns"] .compare-strip__cell--head {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    padding: 12px 6px !important;
    line-height: 1.3 !important;
  }
  .compare-strip__table[style*="1.1fr"] .compare-strip__cell--win,
  .compare-strip__table[style*="grid-template-columns"] .compare-strip__cell--win {
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }

  /* ---- numbers__closing 強調 ---- */
  .numbers__closing {
    font-size: 14px !important;
    line-height: 1.85 !important;
  }
  .numbers__closing strong {
    font-size: 18px !important;
    line-height: 1.5 !important;
    display: block;
    margin-bottom: 8px;
  }
}

/* iPhone SE等 360-380px はさらに圧縮 */
@media (max-width: 380px) {
  .header__logo img { height: 26px !important; }
  .header__menu-btn { width: 36px !important; height: 36px !important; }

  .faq__q { font-size: 13px !important; padding: 14px 40px 14px 14px !important; gap: 10px !important; }
  .faq__q::before { flex: 0 0 28px !important; width: 28px !important; height: 28px !important; font-size: 12px !important; line-height: 28px !important; }
  .faq__body { padding: 0 14px 16px 14px !important; }

  .footer__bottom { font-size: 10.5px !important; }

  .compare-card__row { grid-template-columns: 80px 1fr; gap: 10px; }
  .compare-card__row:first-child .compare-card__value { font-size: 20px; }

  .stats__num { font-size: 26px !important; }
  .stats__label { font-size: 8.5px !important; }
  .curriculum__day-title { font-size: 17px !important; }
  .installment__main strong { font-size: 28px !important; }
  .numbers__table td:last-child { font-size: 19px !important; }
}