/* =============================================================
 * INNOVACTORY Theme - responsive.css
 *
 * Breakpoints (de facto standard):
 *   xxl: min-width 1920px  — full HD / ultra-wide desktop
 *   xl : min-width 1440px  — large desktop
 *   ─  default base (1025–1439px desktop)
 *   lg : max-width 1024px  — tablet
 *   md : max-width 768px   — mobile
 *   sm : max-width 480px   — small mobile
 *
 * ワイド画面の戦略（mobile-firstではなくdesktop-up方向の追加ブレークポイント）:
 *   - 1440px以上: 既に変数で 1440px 中央寄せが効くため、padding-x を増やして
 *                 セクション内側の余白を視覚的に整える。
 *   - 1920px以上: フルHD/4K向け。content-max-width-wide を 1680px に拡張し、
 *                 大画面でコンテンツがスカスカに見えるのを防ぐ。
 *                 本文（.entry-content）は 900px 維持（日本語可読性）。
 * ============================================================= */


/* =============================================================
 * LARGE DESKTOP  (≥ 1440px)
 *
 * 1440px の中央寄せが効き始める閾値。
 * セクション内のホワイトスペースをやや増やして上質感を出す。
 * ※ min-width 系は値の小さい順に書く（cascadeで大きい方が後勝ち）。
 * ============================================================= */
@media (min-width: 1440px) {
    :root {
        --content-padding-x: 72px;
    }
}


/* =============================================================
 * ULTRA-WIDE  (≥ 1920px) — フルHD/2K/4K
 *
 * サイドバー(225px)を引いたコンテンツエリアが ~1695px 以上ある画面で、
 * コンテンツの上限を 1680px に拡張し空白を抑制する。
 * テキスト本文は --content-max-width(900px) のまま日本語可読性を優先。
 * ============================================================= */
@media (min-width: 1920px) {
    :root {
        --content-max-width-wide: 1680px;
        --content-padding-x: 80px;
    }
}


/* =============================================================
 * TABLET  (≤ 1024px)
 * ============================================================= */
@media (max-width: 1024px) {
    :root {
        --content-padding-x: 40px;
        --sp-xl: 64px;
    }

    /* --- ロゴ縮小 --- */
    .sidebar-logo-area img,
    .sidebar-logo-area .wp-block-site-logo img { width: 120px; }

    /* --- TOPページ グリッド → 1カラム --- */
    .top-service-grid,
    .top-careers-grid,
    .about-company-grid  { grid-template-columns: 1fr; }

    /* --- SERVICE --- */
    .service-item {
        grid-template-columns: 1fr;
        gap: var(--sp-md);
    }
    .service-item:nth-child(even) { direction: ltr; }

    /* --- ABOUT --- */
    .about-mission-grid { grid-template-columns: 1fr; }

    /* --- 事業実績: 2カラムに絞る --- */
    .results-grid { grid-template-columns: repeat(2, 1fr); }

    /* --- NEWS --- */
    .news-grid { grid-template-columns: 1fr; }

    /* --- フッター --- */
    .site-footer-inner {
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
    }
    .footer-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-md);
    }
}


/* =============================================================
 * MOBILE  (≤ 768px)
 * ============================================================= */
@media (max-width: 768px) {
    :root {
        --content-padding-x: 20px;
        --sp-xl: 48px;
        --sp-lg: 32px;
    }

    /* --- サイドバー → ハンバーガー開閉 --- */
    .site-sidebar {
        transform: translateX(-100%);
        box-shadow: 4px 0 12px rgba(0,0,0,0.15);
    }
    .site-sidebar.is-open { transform: translateX(0); }
    .sidebar-toggle { display: flex; }

    /* --- コンテンツ全幅 --- */
    .site-content-area {
        margin-left: 0;
        padding-top: 56px;
    }

    /* --- ヒーロー --- */
    .top-hero {
        min-height: 320px;
        align-items: flex-end;
        padding-bottom: var(--sp-lg);
    }
    .top-hero-title {
        font-size: clamp(26px, 8vw, 38px);
        letter-spacing: 0.04em;
    }
    .top-hero-subtitle { display: none; }
    .top-hero-desc {
        font-size: 13px;
        margin-top: 12px;
        line-height: 1.65;
    }
    .top-hero-btn { margin-top: 20px; }
    .top-hero-btn-circle { width: 40px; height: 40px; }

    /* --- TOPページ 見出し・テキスト --- */
    .top-head    { font-size: 22px; }
    .top-subhead { font-size: 14px; }
    .top-message { font-size: 22px; line-height: 1.45; margin-top: 10px; }
    .top-subtext { margin-top: 18px; }

    /* --- 事業実績 → 1カラム --- */
    .results-grid { grid-template-columns: 1fr; }

    /* --- ボトムボタン: 非表示の代わりにスタック表示 --- */
    .bottom-btn { margin-top: var(--sp-xl); }
    .bottom-btn-area { flex-direction: column; }
    .bottom-btn-left,
    .bottom-btn-right { width: 100%; height: 160px; }
    .bottom-btn-right { box-shadow: inset 0 1px 0 var(--color-border); }
    .bottom-btn-head  { font-size: 20px; }
    .bottom-btn-subhead { font-size: 14px; }

    /* --- フッター --- */
    .site-footer-inner {
        padding-left: var(--content-padding-x);
        grid-template-columns: 1fr;
        gap: var(--sp-md);
    }
    .footer-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-sm);
    }
    .footer-nav-col li { margin-bottom: 8px; }

    /* --- ページヘッダー --- */
    .page-header {
        padding: var(--sp-lg) var(--content-padding-x) var(--sp-md);
    }
    .page-header .wp-block-post-title { font-size: var(--font-size-lg); }

    /* --- テーブル: 横スクロール --- */
    .entry-content .wp-block-table,
    .entry-content figure.wp-block-table { overflow-x: auto; display: block; -webkit-overflow-scrolling: touch; }
    .entry-content table { min-width: 480px; }
    .entry-content table th { width: 110px; white-space: normal; }

    /* --- ABOUT --- */
    .about-tagline {
        font-size: clamp(18px, 5vw, 28px);
        padding: var(--sp-lg) var(--content-padding-x) 0;
        margin-bottom: var(--sp-md);
    }
    .about-mission-grid { grid-template-columns: 1fr; }

    /* --- SERVICE --- */
    .service-list { padding: 0 var(--content-padding-x) var(--sp-lg); }
    .service-item { grid-template-columns: 1fr; gap: var(--sp-md); }
    .service-item:nth-child(even) { direction: ltr; }
    .service-number { font-size: 40px; }

    /* --- CAREERS --- */
    .careers-reasons { padding: var(--sp-lg) var(--content-padding-x); }
    .careers-reasons-grid { grid-template-columns: 1fr; }

    /* --- NEWS アーカイブ --- */
    .news-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--content-padding-x) var(--sp-lg);
    }
    .news-more-wrap { padding: var(--sp-sm) var(--content-padding-x) var(--sp-lg); }

    /* --- NEWS シングル --- */
    .single-news-meta { padding: 0 var(--content-padding-x); }
    .single-news-body { padding: 0 var(--content-padding-x) var(--sp-lg); }
    .single-news-nav  { flex-direction: column; gap: var(--sp-sm); }

    /* --- 認証・パートナー --- */
    .top-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .top-trust-item { min-height: 160px; padding: 16px 12px; }
}


/* =============================================================
 * SMALL MOBILE  (≤ 480px)
 * ============================================================= */
@media (max-width: 480px) {
    :root {
        --content-padding-x: 16px;
        --sp-xl: 40px;
        --sp-lg: 24px;
        --sp-md: 20px;
    }

    /* --- ヒーロー --- */
    .top-hero { min-height: 270px; }
    .top-hero-title { font-size: clamp(22px, 9vw, 30px); }
    .top-hero-desc  { font-size: 12px; margin-top: 10px; }
    .top-hero-btn   { margin-top: 16px; }

    /* --- TOPページ 見出し --- */
    .top-head    { font-size: 20px; }
    .top-message { font-size: 20px; }

    /* --- ボトムボタン --- */
    .bottom-btn-left,
    .bottom-btn-right { height: 130px; }
    .bottom-btn-head  { font-size: 18px; padding-bottom: 18px; }
    .bottom-btn-subhead { font-size: 13px; margin-top: 18px; }

    /* --- 事業実績 --- */
    .results-grid { gap: var(--sp-sm); }

    /* --- 認証・パートナー --- */
    .top-trust-item { min-height: 130px; }
    .top-trust-item .top-trust-logo { width: 110px; height: 56px; }

    /* --- ABOUT ミッション --- */
    .about-mission-grid { gap: var(--sp-sm); }

    /* --- フッターナビ 1カラム --- */
    .footer-nav { grid-template-columns: 1fr; }
}