/* =========================================================
   ロジカル精子バンク レスポンシブ
   3層構造： SP(〜767) / タブレット(768-1023) / PC(1024〜)
   モバイルファースト方針だが、PC向けデザインを基準に縮小調整
   ========================================================= */

/* =========================================================
   タブレット（768px〜1023px）— PCのCSSが当たって崩れる範囲を個別調整
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero__inner { gap: var(--space-lg); padding: var(--space-xl) var(--space-md); }
    .hero__title { font-size: clamp(26px, 4vw, 36px); }

    .cards--4 { grid-template-columns: repeat(2, 1fr); }
    .cards--3 { grid-template-columns: repeat(3, 1fr); }
    .steps--5 { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }

    .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
    .site-footer__nav { grid-template-columns: repeat(3, 1fr); }

    .global-nav__list a { padding: 12px 13px; font-size: 13px; }
    .header-trust { display: none; }
    .cta-pill__sub { display: none; }
}

/* =========================================================
   タブレット以下・スマホ共通（〜1023px）でナビをドロワー化
   ========================================================= */
@media (max-width: 1023px) {
    .header-cta--pc { display: none; }
    .header-cta--sp { display: flex; }

    .global-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(86vw, 360px);
        height: 100dvh;
        background: var(--c-navy);
        overflow-y: auto;
        transition: right var(--t-base);
        z-index: 180;
        padding: 72px var(--space-md) var(--space-xl);
    }
    .global-nav.is-open { right: 0; }
    .global-nav__list { flex-direction: column; gap: 0; }
    .global-nav__list li { width: 100%; }
    .global-nav__list a {
        padding: 15px 8px;
        font-size: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .global-nav__cta {
        display: grid;
        gap: 12px;
        margin-top: var(--space-lg);
    }
}

/* =========================================================
   スマホ（〜767px）
   ========================================================= */
@media (max-width: 767px) {
    :root { --font-base-size: 15px; }

    .section { padding: var(--space-xl) 0; }
    .section-head { margin-bottom: var(--space-lg); }

    /* ヘッダー */
    .site-header__inner { padding: 8px var(--space-sm); gap: var(--space-sm); }
    .site-logo__img { height: 42px; }
    .site-logo__icon { width: 38px; height: 38px; }
    .site-logo { gap: 8px; }
    .site-logo__main { font-size: 18px; }
    .site-logo__mark { font-size: 13px; }
    .site-logo__sub { font-size: 9.5px; }

    /* ヒーロー */
    .hero__inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-lg) var(--space-md) var(--space-xl);
    }
    .hero__badges { grid-template-columns: 1fr; }
    .hero__buttons { flex-direction: column; }
    .hero__buttons .btn { width: 100%; }
    .hero-card { padding: var(--space-md); }

    /* 数字バー：2x2 */
    .stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2)::after { display: none; }
    .stat { padding: var(--space-md) var(--space-sm); }
    .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.18); }

    /* カードグリッドは1カラム（ドナーは2カラム維持） */
    .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; }
    .lead-2col { grid-template-columns: 1fr; }
    .cards--donor { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* ドナーフィルター */
    .donor-filter { padding: var(--space-md); }
    .donor-filter__grid { grid-template-columns: repeat(2, 1fr); }
    .donor-filter__reset { grid-column: 1 / -1; }
    .donor-card__body { padding: 12px; }
    .donor-card__age { font-size: 18px; }

    /* LINE相談（QR）：縦積み */
    .line-contact { grid-template-columns: 1fr; text-align: center; padding: var(--space-lg); }
    .line-contact__qr img, .line-contact__qr .lsb-placeholder { margin: 0 auto; }

    /* STEP：縦積み */
    .steps--5, .steps--3 { grid-template-columns: 1fr; row-gap: 30px; }

    /* 理事長挨拶 */
    .greeting { grid-template-columns: 1fr; gap: var(--space-lg); }
    .greeting__media, .greeting__plate { max-width: 360px; margin: 0 auto; }

    /* FAQ */
    .faq-item__q { padding: 14px 16px; font-size: 14px; gap: 10px; }
    .faq-item__a-inner { padding: 0 16px 16px 50px; }

    /* フッター */
    .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-lg); padding-top: var(--space-xl); }
    .site-footer__nav { grid-template-columns: 1fr; gap: var(--space-md); }
    .footer-cta__buttons { flex-direction: column; }
    .footer-cta__buttons .btn { width: 100%; }

    /* スマホ固定フッターCTA表示（本文の下に余白確保） */
    body { padding-bottom: 64px; }
    .sticky-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 120;
        box-shadow: 0 -4px 16px rgba(20,45,84,0.18);
    }
    .sticky-cta__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 8px;
        color: #fff;
        font-weight: 700;
        font-size: 14px;
    }
    .sticky-cta__btn svg { width: 20px; height: 20px; }
    .sticky-cta__btn--line { background: var(--c-line); }
    .sticky-cta__btn--mail { background: var(--c-blue); }
}

/* ===== トップ上部コンポーネント：タブレット ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .policy__inner { padding: var(--space-lg); }
    .pricing__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
}

/* ===== トップ上部コンポーネント：スマホ ===== */
@media (max-width: 767px) {
    .hero-seo { padding: var(--space-md) 0; }

    .hero-contact { margin-top: var(--space-lg); }
    .hero-contact__card { padding: var(--space-md); }
    .hero-contact__grid { grid-template-columns: 1fr; gap: 10px; }
    .contact-tile { padding: 14px 16px; }

    /* 実績：2×2 */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .stat-card { padding: var(--space-md) 10px; }
    .stat-card__icon { width: 44px; height: 44px; }
    .stat-card__laurel { height: 38px; }
    .stat-card__figure { gap: 3px; }

    /* 運営ポリシー：1カラム */
    .policy__inner { padding: var(--space-lg) var(--space-md); }
    .policy__grid { grid-template-columns: 1fr; max-width: 460px; }
    .policy__badge { width: 54px; height: 54px; }

    /* 安心の約束：1カラム */
    .assurance__grid { grid-template-columns: 1fr; gap: var(--space-md); }

    /* 料金プラン：1カラム */
    .pricing__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .promo-banner { padding: var(--space-md) 0; }

    /* LP */
    .lp-cards { grid-template-columns: 1fr; }
    .lp-hero__cta .btn, .lp-midcta__btns .btn { width: 100%; }

    /* ドナー詳細 */
    .donor-detail { grid-template-columns: 1fr; gap: var(--space-lg); }
    .donor-detail__media { position: static; max-width: 320px; margin: 0 auto; }

    /* 流れタイムライン：番号バッジを横並びに */
    .flow-step { grid-template-columns: 1fr; gap: 12px; padding: var(--space-md); }
    .flow-step__no { flex-direction: row; gap: 8px; width: auto; height: auto; padding: 8px 16px; border-radius: var(--radius-pill); align-self: flex-start; }
    .flow-step__no b { font-size: 18px; }

    /* 情報テーブル：縦積み */
    .info-table th, .info-table td { display: block; width: 100%; }
    .info-table th { white-space: normal; border-bottom: none; padding-bottom: 4px; }
    .info-table td { padding-top: 4px; }
    .page-hero { padding: var(--space-lg) 0; }

    /* 理事長：写真の名前ラベル位置調整 */
    .greeting__media { max-width: 340px; margin: 0 auto; padding: 0 0 12px 12px; }
    .greeting__quote { font-size: 56px; }

    /* フッター前CTA */
    .pre-footer-cta { padding: var(--space-xl) 0 var(--space-lg); }

    /* STEPタイトルの最小高さ解除（縦積みのため） */
    .step__title { min-height: 0; }
}

/* 小型スマホ（〜380px） */
@media (max-width: 380px) {
    .cards--donor { grid-template-columns: 1fr; }
    .donor-filter__grid { grid-template-columns: 1fr; }
    .header-icon { width: 42px; }
    .stats-grid { grid-template-columns: 1fr; }
}