/* ==========================================================================
   Responsive Styles
   SP対応スタイル（@media max-width）
   基準幅: PC = 1440px / タブレット = 768px / スマホ = 480px
   ※ PC（〜1440px想定）は style.css 側のデフォルトで表現する
   ========================================================================== */

/* --------------------------------------------------------------------------
   タブレット以下（768px以下）
   この境界で「横並び → 縦積み」「端セクションの余白詰め」を適用する
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Header 専用ブレークポイント: 1025〜1200px（中間デスクトップ）
   メニューを残しつつテキスト/余白を圧縮して CTA が右端で見切れないようにする
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1200px) {
  .header-inner {
    padding: 14px 20px;
    gap: 10px;
  }

  .header-logo-img {
    width: 160px;
  }

  .header-nav-list {
    gap: 20px;
  }

  .header-nav-link {
    font-size: 14px;
  }

  .header-cta {
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   FV: タブレット以下（1200px以下）で数字バッジを CTA の上にインライン配置
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .fv-stats {
    position: static;
    justify-content: left;
    flex-wrap: wrap;
    margin: 0 auto var(--space-md);
    max-width: 100%;
  }

  .fv-stat {
    width: 180px;
    height: 180px;
    padding: 14px 12px;
  }

  .fv-stat-value strong {
    font-size: 40px;
  }

  .fv-stat-num-sub {
    font-size: 30px;
  }
}

/* --------------------------------------------------------------------------
   Header 専用ブレークポイント（1024px以下）
   ナビが CTA を押し出す前にハンバーガーへ切り替える
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .header-inner {
    padding: 12px 20px;
    min-height: 64px;
  }

  .header-logo-img {
    width: 136px;
  }

  .header-nav {
    display: none;
  }

  /* CTA はハンバーガー表示時も残す。ボタンの枠を大きめに確保 */
  .header-cta {
    padding: 12px 24px;
    font-size: 13px;
    margin-left: auto;
  }

  .header-menu-toggle {
    display: inline-flex;
  }

  .header-mobile {
    display: block;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-gray-border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--easing);
    z-index: 100;
  }

  .header-mobile.is-open {
    max-height: 100vh;
  }

  .header-mobile-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .header-mobile-item {
    border-bottom: 1px solid var(--color-gray-border);
  }

  .header-mobile-item:last-child {
    border-bottom: 0;
  }

  .header-mobile-link {
    display: block;
    padding: 18px 20px;
    font-family: var(--font-jp);
    font-size: var(--fz-md);
    font-weight: var(--fw-semibold);
    color: var(--color-black);
    text-decoration: none;
    letter-spacing: var(--ls-sm);
  }

  .header-mobile-link.is-active {
    color: var(--color-primary);
    border-left: 3px solid var(--color-secondary);
    padding-left: 17px;
  }

  .header-mobile-cta {
    display: block;
    margin: 20px;
    padding: 16px 20px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-jp);
    font-size: var(--fz-base);
    font-weight: var(--fw-semibold);
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-md);
  }
}

@media (max-width: 768px) {
  /* 表示制御 */
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  .sp-br {
    display: block;
  }

  /* ==========================================================================
     Page Hero (下層ページ共通)
     SP では 2 カラム (テキスト｜画像) を 1 カラム縦積みに切替。
     テキスト → 画像 の順で全幅表示
     ========================================================================== */
  .page-hero-inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
  }
  .page-hero-media {
    aspect-ratio: 3 / 2;   /* SP はやや高めの比率で写真をしっかり見せる */
  }

  /* PC専用改行は SP では消して自然な折返しに任せる */
  .pc-br {
    display: none;
  }

  /* FVフルブリードコンテナの左右余白をSP向けに詰める（8.33vwだと窮屈なため） */
  .container-fluid {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* News: SP では FV に被らない通常配置に戻す
     背景の角丸は SP 共通の 10px に統一 */
  .news {
    margin-top: 0;
    border-radius: 15px;
  }

  /* main > section:last-child { padding-bottom: 0 } を上書きするため
     詳細度を1段上げて news の下余白を確保（.section-padding の bottom + 20px） */
  main > section.news.section-padding {
    padding-bottom: var(--space-xl);
  }

  /* News アイテム: 縦積み（サムネ上・テキスト下）
     元 PC の grid-template-columns: 320px 1fr が 768px 以下でテキスト側が
     320px に近づき 2 カラム比が 1:1 相当になるため、このタイミングで縦積みに切替 */
  .news-item-link {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
  }

  .news-item-body {
    gap: 10px;
  }

  .news-item-title {
    font-size: 15px;
    line-height: 1.55;
  }

  .news-item-date {
    font-size: 12px;
  }

  /* 横並び → 縦積み（画像が上 → テキストが下）
     .media-row--reverse も column にすることで、常に画像（先頭要素）が上にくる */
  .media-row,
  .media-row--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }

  /* セクション余白の調整 */
  .section-padding {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .section-padding-sm {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  /* 最初のセクションの上余白・最後のセクションの下余白を 0 にする
     （main 直下の最初/最後の section、または section-padding を持つ要素が対象） */
  main > section:first-child,
  main > .section-padding:first-child,
  main > .section-padding-sm:first-child {
    padding-top: 0;
  }
  /* 例外: .page-hero が main 直下最初の場合は固定ヘッダーに隠れないよう
     上部余白を復活させる (下層ページ全共通) */
  main > .page-hero:first-child {
    padding-top: clamp(80px, 20vw, 110px);
  }

  main > section:last-child,
  main > .section-padding:last-child,
  main > .section-padding-sm:last-child {
    padding-bottom: 0;
  }
  /* ただし背景色を持つ最終セクション (.contact / .thanks 等) は
     フッターとの境界を保つため、padding-bottom を復活させる */
  main > section.contact:last-child,
  main > section.thanks.section-padding:last-child {
    padding-bottom: var(--space-xl);
  }
  /* 主要 5 ページ（トップ / 会社概要 / 事業内容 / 事例・実績 / 教育機関紹介）は
     フッター手前に 56px の余白を入れる */
  main > section.recruit:last-child,
  main > section.members:last-child,
  main > section.strengths:last-child,
  main > section.cases-list:last-child,
  main > section.facility-list:last-child {
    padding-bottom: 56px;
  }

  /* ==========================================================================
     背景の左右余白（SP）
     PC では FV / news / reasons ともに左右 20px の余白（＝背景が両サイドに寄る）だが、
     SP では画面が狭いためコンテンツを圧迫する。半分の 10px に詰めて実効幅を広げる
     ========================================================================== */
  main > section.fv {
    margin-left: 10px;
    margin-right: 10px;
  }
  .news {
    /* PC は max-width: min(1460px, calc(100vw - 40px)) → SP は左右 10px */
    max-width: calc(100vw - 20px);
  }
  .reasons {
    /* PC は width: min(1460px, calc(100vw - 40px)) → SP は左右 10px */
    width: calc(100vw - 20px);
    margin-left: calc((100% - (100vw - 20px)) / 2);
  }

  /* ==========================================================================
     FV（ファーストビュー）
     ※ main > section:first-child の "padding-top: 0" 規約（詳細度 0,1,2）を上書きするため
        セレクタを main > section.fv にして詳細度を揃え、後で定義することで勝たせる
     ========================================================================== */
  main > section.fv {
    /* 画面いっぱいに収まるよう上下余白を圧縮 */
    padding: 60px 0 16px;
    /* モバイルは 100vh がブラウザUI裏の領域も含み実表示より高くなるため、
       実表示高さ（svh）基準にして画面ちょうどに収める（vh はフォールバック） */
    min-height: calc(100vh - 40px);
    min-height: calc(100svh - 40px);
  }

  .fv-content {
    max-width: 100%;
    padding-top: 0;
  }

  /* SP でキャッチ・サブコピーの調整 */
  .fv-catch {
    font-size: 28px;
    letter-spacing: 0.04em;
    line-height: 1.35;
    margin-bottom: 32px;
  }

  .fv-lead {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 56px;
  }

  /* SP でバッジ〜CTA間の余白も圧縮。
     120px の丸を3つ1行に収めるため、親（.fv-content）の内側幅を超えて
     ビューポート左右端まで拡張する（負のインラインマージンで .fv-inner の
     padding を打ち消す）*/
  .fv-stats {
    margin: 0 calc(50% - 50vw) 16px;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
    justify-content: center;
    gap: 6px;
  }

  /* SP バッジは全体的にひとまわり小さく */
  .fv-stat {
    width: 120px;
    height: 120px;
    padding: 10px 8px;
  }

  .fv-stat-label {
    font-size: 10px;
    margin-bottom: 3px;
  }

  .fv-stat-value strong {
    font-size: 28px;
  }

  .fv-stat-num-sub {
    font-size: 22px;
  }

  .fv-stat-unit {
    font-size: 12px;
  }

  .fv-stat-value-sm {
    font-size: 12px;
  }

  .fv-cta-group {
    max-width: 100%;
  }

  .btn {
    font-size: var(--fz-base);
    gap: 10px;
    padding: 10px 10px 10px 14px;
  }

  .btn-arrow {
    width: 36px;
    height: 36px;
  }

  /* ==========================================================================
     Business（事業案内）— タブレット/SP
     - 大 Media を非表示にして、各リスト項目内にサムネイル画像を表示
     - 全体を1カラム縦積みに
     - リスト項目: [サムネ | ラベル | 矢印]
     - CTA は中央寄せ
     ========================================================================== */
  .business-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* PC の大 Media は SP では不要（サムネは各項目に表示するため） */
  .business-media {
    display: none;
  }

  /* BSI 紹介セクション（会社概要ページ）は SP でも media（プレースホルダー）を表示
     - 見出しは grid の外（上・中央）。grid 内は 1カラム縦積み
     - 表示順は 写真 → 本文（リード → 説明）
       .business-body を display:contents にして子要素を親 grid に昇格させ、order で制御 */
  #bsi .business-grid {
    /* minmax(0, 1fr) で、中身がコンテナ幅より広くなっても列が膨らまないようにする */
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(24px, 5vw, 40px);
  }
  #bsi .business-body {
    display: contents;
  }
  #bsi .business-media { order: 1; }   /* 写真を先頭 */
  #bsi .business-lead  { order: 2; }
  #bsi .business-desc  { order: 3; }
  /* 高さは aspect-ratio（16:9）に任せる。min-height を付けると
     幅 = 高さ × 16/9 がコンテナ幅を超えて画面からはみ出す */
  #bsi .business-media {
    display: flex;
    min-width: 0;
    margin-left: 0;
    padding: 0;
    align-self: auto;
  }

  /* 事業カード: SP は 写真（上）→ 本文（下）に縦積み */
  .biz-card {
    grid-template-columns: 1fr;
  }
  .biz-card-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  /* SP: [タイトル | 矢印] を上段、箇条書きを全幅で下段に。
     矢印は青テキスト（タイトル）に対して上下中央揃え（絶対配置は使わない） */
  .biz-card-body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 14px;
    padding: clamp(20px, 5vw, 28px);
  }
  .biz-card-main {
    display: contents;
  }
  .biz-card-title {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .biz-card-list {
    grid-column: 1 / -1;                 /* 箇条書きは全幅 */
    grid-row: 2;
  }
  /* 説明文は SP で 14px */
  .biz-card-list li {
    font-size: 14px;
  }
  .biz-card-note {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  /* Why nepal? カード: SP は 1 列 */
  .why-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .why-card-desc {
    font-size: 14px;
  }

  /* Achievement: SP はセクション上部パディングを 72px に */
  .achievement.section-padding {
    padding-top: 72px;
  }
  /* Achievement 実績カード: SP は 1 列に縦積み */
  .achievement-stats {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* ==========================================================================
     Reasons — タブレット/SP は縦積み
     ・カード上下の余白を狭く
     ・カード左右は 12px の細い余白に統一し、写真とテキストの横幅を一致
     ・Reason 01 は本文内（タイトル直上）に静的配置
     ========================================================================== */
  .reason-card {
    /* 上下は 16-20px、左右は 12px で写真とテキストの端を揃える */
    padding: clamp(16px, 3vw, 24px) 12px clamp(16px, 3vw, 24px);
  }

  .reason-card-grid {
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 24px);
  }

  /* 写真を最上部に配置。カード padding が 12px 統一のため負のマージンは不要 */
  .reason-card-media {
    order: -1;
    margin: 0;
  }

  .reason-card-media img {
    min-height: 220px;
  }

  /* SP ではピル型の縦ナビは非表示 */
  .reason-nav {
    display: none;
  }

  /* 濃紺フレームの角丸も SP 共通の 10px に統一。
     SP では白カード左右の余白を 10px に揃えて、内側コンテンツ（見出し・白カード）を
     フレーム内で左右中央に配置する。下部余白も 10px に詰める */
  .reasons-frame {
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
  }

  /* PC で .reason-cards に掛けていた translateX(左寄せ) は SP では不要
     （SP では nav が非表示になり、左寄せ調整の意味がないため解除） */
  .reason-cards {
    transform: none;
  }

  /* ==========================================================================
     Business — 実績バッジ帯: リード文とバッジ 3 点の間の余白を SP で狭める
     ========================================================================== */
  .business-stats-lead {
    margin-bottom: clamp(24px, 4vw, 32px);
  }

  /* Project Story の縦積み・順序・中央寄せは style.css の base ルールで共通化済み */

  /* ==========================================================================
     Reasons 見出しの左右マージン（フレーム内側に 8px の追加余白）
     ========================================================================== */
  .reasons-header .section-heading {
    margin-left: 8px;
    margin-right: 8px;
  }

  /* SP ではスクロール連動アニメを無効化し、通常の縦積みに戻す
     （scroller の 300vh 高さ / sticky / overlap をすべてリセット） */
  .reasons.reason-scroller {
    min-height: 0;
  }
  .reason-scroller .reasons-frame {
    position: static;
    top: auto;
  }
  .reason-cards {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 40px);
  }
  .reason-cards > .reason-card {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
  }

  /* ==========================================================================
     Project Story — SP は 1 カラム縦積み、右側は横スクロールを維持
     見出し・本文・スクロール間の縦余白を SP では詰めて情報密度を高める
     ========================================================================== */
  .project-layout {
    gap: 16px;   /* SP は縦間隔を詰める */
  }

  /* Project セクション自体の上余白を少し広げる（section-padding より優先度を上げる） */
  main > section.project {
    padding-top: 72px;
  }

  /* Facility セクション（.project 併記のため上のルールも当たっていた）は
     SP では少し詰めた 40px に上書き（後ろに書くことで .project より勝つ） */
  main > section.facility {
    padding-top: 40px;
  }
  /* SP は 2 カラム → 1 カラム縦積み */
  .project-track {
    grid-template-columns: 1fr;
  }
  .project-cta {
    min-width: 0;
    width: 100%;
    max-width: 340px;
  }

  /* 受け入れ事例ページの 3 カラム → SP は 1 カラム縦積み */
  .cases-list-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  /* 施設紹介ページの 3 カラム → SP は 1 カラム縦積み */
  .facility-list-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  /* トップページ Education セクション (index.php の ul.facility-list): SP は 1 カラム縦積み */
  ul.facility-list {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
    gap: 32px;
  }
  /* SP: セクション下余白も半分に圧縮 */
  main > section.facility.section-padding {
    padding-bottom: 40px;
  }

  /* 実績サマリータイル: SP でも 3 タイル横並びを維持しつつ均等に */
  .cases-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .cases-stat {
    padding: 20px 6px;
  }
  .cases-stat-lead {
    font-size: clamp(16px, 4.5vw, 20px);
  }
  .cases-stat-sub {
    font-size: clamp(11px, 3vw, 13px);
  }

  /* 受け入れ事例詳細: 2 カラム → 1 カラム縦積み (記事本体 → プロフィール) */
  .case-detail-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* SP では専用の背景画像 TOP_haikei_sp.jpg に差し替え、固定背景として使用
     ・両セクションが同一設定を共有するため、スクロール時にセクション境界で
       背景が途切れず 1 枚絵として繋がる（PC と同じ挙動）
     ・iOS Safari の fixed 挙動対策として background-size と position は明示 */
  .business-stats-wrap,
  .project:not(.facility) {
    background-image: url('../image/TOP_haikei_sp.jpg');
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
  }

  /* ==========================================================================
     Movie — SP は動画を 1 カラム縦積み
     ========================================================================== */
  /* SP はお問い合わせの .contact > .container と同じ挙動（PC の 1500px 制約を解除） */
  .movie > .container {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .movie-frame {
    padding: 28px 20px;
    border-radius: 16px;
  }
  .movie-head {
    margin-bottom: 24px;
  }
  .movie-videos {
    grid-template-columns: 1fr;           /* 動画を縦に 1 列で積む */
    gap: 16px;
  }
  /* CTA: SP は上の動画と同じ横幅（全幅）に広げる。内容は中央寄せ */
  .movie-more {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 8px;
    padding: 15px 18px;
    font-size: 14px;
  }

  /* ==========================================================================
     Recruit — SP レイアウト整理
     ・ヘッダーを縦積み（見出し → CTA）に、余白/フォントを SP 用に調整
     ・写真は小さめに（表示枚数を増やして流し感を出す）
     ・セクション左パディングを Education と同じ狭さ（container の 20px のみ）に統一
     ========================================================================== */
  /* SP はセクション上部の余白をさらに狭く */
  .recruit.section-padding {
    padding-top: 16px;
  }
  .recruit > .container {
    max-width: 100%;                     /* PC の 1460px 上限を SP で解除して余分な margin を消す */
  }
  .recruit-header {
    flex-direction: column;              /* 見出し / CTA を縦積み */
    align-items: stretch;
    gap: 24px;
    margin-bottom: 32px;
  }
  .recruit-desc {
    margin-top: 16px;
    font-size: 20px;                     /* SP 用に少し控えめ */
    line-height: 1.55;
    letter-spacing: 0.03em;
  }
  .recruit-marquee-item {
    width: 220px;                        /* 横長写真: SP 用に縮小 */
    margin-right: 10px;                  /* 隙間も詰める */
    border-radius: 10px;
  }

  /* About Us（会社概要ページ）: 2カラム → 1カラム縦積み */
  .about-us-inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
  }

  /* 役員紹介（会社概要ページ）: 3カラム → 1カラム縦積み */
  .members-list {
    grid-template-columns: 1fr;
  }
  /* 役員（写真 + 略歴）: SP は 写真 → 略歴 の縦積み */
  .members-exec {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 当社の強み（事業内容ページ）: 2カラム → 1カラム縦積み */
  .strengths-inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
  }

  /* Strength 01 の「採用までのプロセス」図: SP は上の写真との間隔を詰める（40px → 16px） */
  .strength-detail-img {
    margin-top: 16px;
  }

  /* 事業内容一覧（事業内容ページ）: 2カラム → 1カラム縦積み。写真を上、テキストを下に */
  .services-item {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 32px);
    padding: clamp(32px, 6vw, 48px) 0;
  }
  .services-item-media { order: 1; }
  .services-item-text  { order: 2; }

  /* Why nepali? カード下の追加ブロック: 2カラム → 1カラム縦積み（写真上・テキスト下） */
  .reasons-extra-inner {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 32px);
  }
  .reasons-extra-media { order: 1; }
  .reasons-extra-body  { order: 2; }
  .reasons-extra-img {
    height: auto;
    aspect-ratio: 5 / 4;
    min-height: 200px;
  }

  /* 役員プロフィールモーダル（SP）: 上の余白を詰める */
  .members-modal-inner {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 32px);
    margin-top: clamp(40px, 8vw, 56px);
  }

  /* 企業情報テーブル（SP）: 2カラム → 縦積み
     見出し → 見出し直下に濃紺の直線 → 本文 の並びに変更
     行間の下線（バイカラー）は削除し、行間のスペースで区切る */
  .company-info-list {
    background-image: none;                                /* 最上端のバイカラー線を削除 */
  }
  .company-info-row {
    grid-template-columns: 1fr;                            /* 単一カラム縦積み */
    gap: 0;
    padding: 0 0 clamp(28px, 5vw, 40px);                   /* 行間スペースで区切る */
    background-image: none;                                /* 行下のバイカラー線を削除 */
  }
  .company-info-row:last-child {
    padding-bottom: 0;
  }
  .company-info-term {
    padding-bottom: clamp(10px, 1.6vw, 14px);
    margin-bottom: clamp(14px, 2.4vw, 20px);
    border-bottom: 1px solid var(--color-primary);          /* 見出し下に濃紺の直線 */
  }
  .about-us-visual {
    min-height: auto;
    margin-top: clamp(20px, 4vw, 32px);  /* リード下の余白を控えめに */
  }

  /* Philosophy カード（SP）: 数字「1.」「2.」「3.」を小見出し「透明性」等の左隣に配置
     - PC の grid: [num] [body(title+desc)] + align-items:center は、本文が長いと
       数字が説明文の中央に見えてしまうため、SP では title と横並びに揃える
     - .about-us-tenet-body を display:contents にして title/desc を grid 直下に展開し、
       num + title を row 1、desc を row 2（両カラムまたぎ）で配置する */
  .about-us-tenet-body {
    display: contents;
  }
  .about-us-tenet-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: baseline;
    column-gap: clamp(10px, 2vw, 16px);
  }
  .about-us-tenet-num {
    grid-column: 1;
    grid-row: 1;
    margin-left: 0;                    /* SP は左マージンを削除して item の左端に揃える */
    font-size: clamp(30px, 3vw, 54px); /* PC より 2px 小さく */
  }
  .about-us-tenet-title {
    grid-column: 2;
    grid-row: 1;
  }
  .about-us-tenet-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: clamp(8px, 1.5vw, 12px);
  }

}
/* ===== ここまで 768px 以下 ===== */

/* --------------------------------------------------------------------------
   スマートフォン（480px以下）
   主に余白の微調整。文字サイズは variables.css の clamp() が追従するため
   原則ここでは指定しない（必要な場合のみ追記）
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .section-padding {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  /* News CTA: SP は少し上に寄せる */
  .news-cta {
    margin-top: var(--space-md);
  }

  /* Business: 480px でリード文を少し詰める */
  .business-lead {
    font-size: 18px;
  }

  /* News の縦積みは 768px 側に移動済み（2カラム比が 1:1 になる境界） */

  /* Section heading: SP も中央揃えを維持 */
  .section-heading {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }

  .section-heading-more {
    align-self: center;
  }

  .section-heading-more-text {
    min-height: 48px;
    padding: 0 20px;
  }

  .section-heading-more-arrow {
    width: 48px;
  }

  /* SP幅ではヘッダーをさらに圧縮してハンバーガーの見切れを防ぐ */
  .header-inner {
    padding: 10px 16px;
    gap: 8px;
  }

  .header-logo-img {
    width: 130px;
  }

  .header-cta {
    padding: 11px 20px;
    font-size: 12px;
  }

  /* ==========================================================================
     Recruit — SP は写真を小さめに、アイテム間の余白も詰める
     ========================================================================== */
  .recruit-marquee-item {
    width: clamp(180px, 52vw, 240px);
    margin-right: 8px;
  }

  /* ==========================================================================
     Contact — SP レイアウト整理
     ・テキスト → CTA を縦積み
     ・フレームの左右パディングを詰めて、他セクションの SP 余白感（20px 前後）に統一
     ・CTA は横幅いっぱいに（Recruit の SP と同じ挙動）
     ========================================================================== */
  .contact > .container {
    max-width: 100%;                     /* PC の 1460px 制約を SP で解除 */
    padding-left: 10px;                  /* News / Movie と同じ 10px */
    padding-right: 10px;
  }
  .contact-frame {
    padding: 28px 20px;                  /* SP 用に上下左右をコンパクトに */
    border-radius: 15px;                 /* SP は角丸 15px に統一（他 SP フレームと揃える） */
  }
  .contact-inner {
    flex-direction: column;              /* 見出し+説明 → CTA を縦積み */
    align-items: stretch;                /* 子要素は横幅いっぱいに */
    gap: 24px;
  }
  .contact-actions {
    flex-direction: column;              /* SP は 2 ボタンを縦積みに */
    width: 100%;
    gap: 12px;
  }
  .contact-cta {
    min-width: 0;                        /* PC の min-width 制約を解除 */
    width: 100%;                         /* 横幅いっぱいに */
  }

  /* ページ固有のレスポンシブスタイルをここに追記 */
}

/* ==========================================================================
   Footer — タブレット / SP レイアウトへの切替（ナビが改行される前に早めに切替）
   ・他のセクションより広い 1300px を境にレイアウト変更（5列の小項目改行を回避）
   ・ブランド（ロゴ + お問い合わせ）→ メガメニュー を縦積み
   ・メガメニュー: iPad / タブレット帯（601〜1300px）は 3 列。スマホ（≤600px）は 1 列。
   ========================================================================== */
@media (max-width: 1300px) {
  .footer {
    padding-top: 40px;
    padding-bottom: 24px;
  }
  .footer > .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .footer-inner {
    flex-direction: column;              /* ブランド → メニュー を縦積み */
    align-items: stretch;
    gap: 36px;
  }
  .footer-brand {
    width: 100%;                         /* 全幅 */
  }
  .footer-logo-img {
    width: 240px;
  }
  .footer-nav {
    padding-top: 0;
  }
  .footer-nav-list {
    /* iPad / タブレット: 主項目 + 小項目を 3 列に */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 36px) clamp(16px, 3vw, 36px);
  }
  /* 縦積みでは列の縦罫線は不要 */
  .footer-nav-col {
    padding: 0;
    border-left: 0;
  }
  /* Follow Us: ラベルとアイコンを縦積みに */
  .footer-social {
    flex-direction: column;
    gap: 20px;
  }
  .footer-bottom {
    grid-template-columns: 1fr;          /* 1 列に積む */
    justify-items: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 16px;
  }
  .footer-bottom-center {
    grid-column: 1;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-pagetop {
    grid-column: 1;
    justify-self: center;
  }
  .footer-copy { font-size: 11px; }
}

/* ==========================================================================
   Footer — タブレット以下は下部バーが縦積みで高くなるため、
   背景の山イラストの裾を区切り線の位置まで上げ、幅も詰める
   ========================================================================== */
@media (max-width: 768px) {
  .footer::after {
    right: -12px;
    bottom: 107px;
    width: 340px;
  }
}

/* ==========================================================================
   Footer — スマホ（≤600px）はナビを 1 列に
   ・下部バーは「プライバシーポリシー → 著作権」の順に入れ替え
   ========================================================================== */
@media (max-width: 600px) {
  .footer-nav-list {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5vw, 28px);
  }
  /* 折返し時に区切りの縦線だけ取り残されるため非表示に */
  .footer-bottom-sep {
    display: none;
  }
  /* スマホは Follow Us とコピーライトの間が狭いため、
     イラストを右端に小さく配置して文字に重ならないようにする */
  .footer::after {
    right: -12px;
    bottom: 138px;
    width: 170px;
  }
}

/* ==========================================================================
   Message セクション (会社概要 代表挨拶): SP は 1 カラム縦積み
   PC の grid-template-columns: 1fr 600px が固定 600px で SP 幅を超え、
   ページ全体に横スクロールが発生してヘッダーの CTA/ハンバーガーが画面外に押し出されるため必須
   ========================================================================== */
@media (max-width: 768px) {
  .message-layout {
    grid-template-columns: 1fr;
    grid-template-areas:            /* SP: 写真 → 見出し → 本文 の順に縦積み */
      "media"
      "lead"
      "body";
    max-width: 420px;
    margin-inline: auto;
    gap: 20px;
  }
}

/* ==========================================================================
   News Filter (お知らせ一覧ページ カテゴリ切替) — SP 調整
   ・見出し「カテゴリから選ぶ」を 20px に
   ・タグボタンをスマホサイズにダウンサイズ
   ・タグ一覧を中央揃え（折り返し時も中央）
   ========================================================================== */
@media (max-width: 768px) {
  /* パンくずリスト → 見出しの距離を半減 (旧 80px → 40px) */
  .news-filter {
    margin-top: 12px;   /* PC 40px → SP 12px */
  }
  .news-filter-list {
    justify-content: center;   /* 折り返し時も中央揃え */
    gap: 6px 14px;
  }
  .news-filter-item + .news-filter-item {
    padding-left: 14px;         /* PC 32px から詰める */
  }
  .news-filter-btn {
    padding: 4px 12px;
    font-size: 12px;
  }
}

/* ==========================================================================
   News Pagination (お知らせ一覧ページ) — SP サイズ調整
   ボタン・アイコン・ギャップをスマホに適したコンパクトサイズに
   ========================================================================== */
@media (max-width: 768px) {
  .news-pagination {
    margin-top: 24px;
    margin-bottom: 60px;
  }
  .news-pagination-list {
    gap: 6px;
  }
  .news-pagination-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    font-size: 14px;
    border-width: 1px;
  }
  .news-pagination-btn--nav {
    width: 32px;
  }
  .news-pagination-btn--nav svg {
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================================
   お取引先企業ロゴ (受け入れ事例・実績ページ) — SP は 2 カラム × 4 行
   ========================================================================== */
@media (max-width: 768px) {
  .cases-clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   内定者累計サマリー（受け入れ事例・実績ページ）— 狭幅レスポンシブ
   PC は「上段4 / 下段3」を横並び。600px 以下では横溢れするため、
   各行を 2 カラムのグリッドに畳んで縦に積む（下段の余りタイルは全幅中央）。
   ========================================================================== */
@media (max-width: 600px) {
  .cases-summary-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
    justify-content: stretch;
    width: 100%;
  }
  /* 上段リストと下段リストの縦間隔を row-gap と揃え、連続した 1 枚のグリッドに見せる */
  .cases-summary-list + .cases-summary-list {
    margin-top: 24px;
  }
  .cases-summary-item {
    width: 100%;
    padding: 0;
    gap: 8px;
  }
  /* 下段（3 タイル）の余り 1 枚は全幅で中央に配置してバランスを取る */
  .cases-summary-list:last-child .cases-summary-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  /* モバイル向けにラベル/数字を最適化。
     長いラベル（自動車運送業 / ビルクリーニング）も 1 行に収めてタイル高さを揃える。
     白枠の横幅は最長ラベル「ビルクリーニング」に合わせて全項目で統一する */
  .cases-summary-label {
    min-width: 122px;
    max-width: 100%;
    padding: 4px 12px;
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .cases-summary-num {
    font-size: 40px;
  }
  .cases-summary-unit {
    font-size: 15px;
  }
}

/* さらに狭い端末（〜380px）では数字をもう一段小さく */
@media (max-width: 380px) {
  .cases-summary-num {
    font-size: 34px;
  }
}

/* ==========================================================================
   内定者累計サマリー見出し — SP は左の長方形マーカーを消してテキスト中央揃え
   ========================================================================== */
@media (max-width: 768px) {
  /* 左のバイカラー長方形を非表示 */
  .cases-summary-heading .reasons-extra-check {
    display: none;
  }
  /* テキストを中央揃えに（.reasons-extra-title は flex なので中央 + text-align も中央）*/
  .cases-summary-heading {
    justify-content: center;
    text-align: center;
  }
}