/* =================================================================
   Responsive — タブレット / スマートフォン対応
   既存のデスクトップ向けCSSに対する max-width オーバーライド。
   ブレークポイント: タブレット ≤960px / スマホ ≤600px / 小型 ≤380px
   方針: 横並びセクションを縦積みに、余白・文字を段階的に縮小し、
         可読性とレイアウト品質を保つ。横スクロールを発生させない。
   ================================================================= */

/* ===================== タブレット以下 (≤960px) ===================== */
@media (max-width: 960px) {

  /* --- 横の余白（ガター）を圧縮 --- */
  .l-header__inner,
  .p-hero__inner,
  .p-services,
  .l-section,
  .l-section--alt,
  .p-subhero__inner,
  .p-subhero__inner--narrow,
  .p-service-rows,
  .p-flow,
  .p-disclaimer,
  .p-works-list,
  .p-works-intro,
  .p-video,
  .p-contact,
  .p-cta,
  .p-cta--compact,
  .p-cta--spaced,
  .l-footer { padding-left: 28px; padding-right: 28px; }

  /* --- グローバルナビ → ハンバーガー＋スライドインのドロワー --- */
  .c-nav-toggle { display: flex; position: relative; z-index: 80; }
  .c-nav-toggle.is-open { color: #1A1A1A; }            /* ドロワー展開中のXは黒で表示 */

  /* ドロワー・オーバーレイはヘッダー(高さ76px)の下に配置し、ヘッダーのハンバーガーは常に操作可能に */
  .c-drawer-overlay {
    display: block; position: fixed; top: 76px; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(11,31,68,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 240ms ease;
  }
  .c-drawer-overlay.is-open { opacity: 1; visibility: visible; }

  .c-gnav {
    position: fixed; top: 76px; right: 0; z-index: 55;
    width: min(86vw, 340px); height: calc(100vh - 76px); height: calc(100dvh - 76px);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 28px 30px 40px;
    background: radial-gradient(120% 70% at 100% 0, rgba(46,111,224,0.45), transparent 60%), linear-gradient(160deg, #0E3F9E 0%, #1E5FC4 100%);
    box-shadow: -24px 0 60px rgba(11,31,68,0.45);
    overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform 300ms cubic-bezier(0.22,0.61,0.36,1), visibility 300ms ease;
  }
  .c-gnav.is-open { transform: translateX(0); visibility: visible; }
  .c-gnav__link { color: #E6EEFB; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; padding: 18px 4px; border-bottom: 1px solid rgba(125,176,255,0.18); transition: color 160ms ease; }
  .c-gnav__link:hover { color: #fff; }
  .c-gnav__link.is-active { color: #7DB0FF; }
  .c-gnav__link.is-active::after { display: none; }
  .c-button--header { margin-top: 24px; justify-content: center; }

  /* 言語切替: ドロワー内のトグルボタン（濃色背景向けに調整） */
  .c-lang { align-self: flex-start; margin-top: 24px; padding: 4px; border-color: rgba(125,176,255,0.4); background: rgba(255,255,255,0.08); }
  .c-lang__link { color: #E6EEFB; font-size: 14px; padding: 8px 18px; }
  .c-lang__link:hover:not(.is-active) { color: #fff; background: rgba(255,255,255,0.12); }
  .c-lang__link.is-active { background: #fff; color: #1E5FC4; }

  /* --- ヒーロー: 縦積み --- */
  .p-hero { background-image: linear-gradient(180deg, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.78) 48%, rgba(255,255,255,0.38) 100%), url("../img/img_tori_fv_pc.webp"); }
  .p-hero__inner { min-height: 74vh; padding-top: 40px; padding-bottom: 56px; align-items: flex-start; }
  .p-hero__content { max-width: none; }
  .p-hero__lead { max-width: none; }

  /* --- 横並び2カラム → 縦積み --- */
  .p-message__grid { grid-template-columns: 1fr; gap: 34px; }
  .p-message__grid--reverse .p-message__photo,
  .p-message__grid--reverse .p-message__body { order: 0; }   /* スマホは従来通りテキスト→写真 */
  .p-message__photo-img { max-width: 340px; }
  .p-service-row { grid-template-columns: 1fr; gap: 28px; }
  .p-service-row__media { order: 0; }       /* 画像→テキストの順に統一 */
  .p-service-row__text--first { order: 0; }
  .p-service-rows__list { gap: 56px; }
  .p-contact__grid { grid-template-columns: 1fr; gap: 36px; }
  .p-why__intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .p-why__intro-figure img { max-width: 300px; }
  .p-services__layout { grid-template-columns: 1fr; gap: 36px; }
  .p-services__lead { max-width: none; }

  /* --- グリッド列数を縮小 --- */
  .c-card-grid { grid-template-columns: repeat(2, 1fr); }
  .c-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .p-why__grid { grid-template-columns: repeat(2, 1fr); }
  .c-gallery { grid-template-columns: repeat(2, 1fr); }
  .c-marquee__item { width: 380px; height: 250px; }

  /* --- フッター: 縦積み --- */
  .l-footer__inner { grid-template-columns: 1fr; gap: 30px; padding-bottom: 32px; }

  /* --- 見出しサイズ（ヒーローはclampで自動調整）--- */
  .p-subhero__title, .p-subhero__title--lg { font-size: 32px; }
  .p-services__title { font-size: 28px; }
  .p-why__title, .c-section-title, .p-works-teaser__title, .p-message__title { font-size: 26px; }
  .p-service-row__title { font-size: 24px; }

  /* --- CTA: 縦積み --- */
  .p-cta__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ===================== スマートフォン (≤600px) ===================== */
@media (max-width: 600px) {

  /* --- PC向けの意図的な改行はスマホでは無効化（不自然な折り返しを防ぐ） --- */
  .u-br-pc { display: none; }

  /* --- ガターをさらに圧縮 --- */
  .l-header__inner,
  .p-hero__inner,
  .p-services,
  .l-section,
  .l-section--alt,
  .p-subhero__inner,
  .p-subhero__inner--narrow,
  .p-service-rows,
  .p-flow,
  .p-disclaimer,
  .p-works-list,
  .p-works-intro,
  .p-video,
  .p-contact,
  .p-cta,
  .p-cta--compact,
  .p-cta--spaced,
  .l-footer,
  .c-gnav { padding-left: 18px; padding-right: 18px; }

  /* --- セクションの縦余白を圧縮 --- */
  .p-services { padding-top: 52px; padding-bottom: 64px; }
  .l-section,
  .l-section--alt,
  .p-flow { padding-top: 52px; padding-bottom: 52px; }
  .p-service-rows { padding-top: 52px; }
  .p-contact { padding-top: 52px; padding-bottom: 60px; }
  /* --- お問い合わせフォームカードの内側余白を圧縮 --- */
  .p-contact__form-wrap { padding: 24px 20px; }
  .p-contact__office { padding: 20px 20px; }
  .p-contact__grid { gap: 28px; }
  .p-cta,
  .p-cta--compact,
  .p-cta--spaced { padding-top: 52px; padding-bottom: 52px; }
  .p-subhero__inner,
  .p-subhero__inner--narrow { padding-top: 44px; padding-bottom: 48px; }
  /* --- ヒーロー: スマホは上余白をさらに詰める --- */
  .p-hero__inner { min-height: 62vh; padding-top: 28px; }

  /* --- すべて1カラム --- */
  .c-card-grid,
  .c-card-grid--3,
  .p-why__grid { grid-template-columns: 1fr; }
  .c-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .c-gallery__item { height: 150px; }
  .c-marquee__item { width: 300px; height: 200px; margin-right: 16px; }
  .c-marquee { margin-top: 44px; }
  .c-form__row { grid-template-columns: 1fr; gap: 18px; }
  .p-svc-item { grid-template-columns: 1fr; gap: 14px; }
  .p-svc-item__figure { height: 190px; }

  /* --- 会社概要テーブル: ラベル上・値下に --- */
  .p-profile__row,
  .p-profile__row--last { grid-template-columns: 1fr; }
  .p-profile__th { padding: 16px 22px 6px; }
  .p-profile__td,
  .p-profile__td--address,
  .p-profile__td--multiline { padding: 0 22px 18px; }

  /* --- 画像の高さ --- */
  .p-message__photo-img { max-width: 280px; }
  .p-service-row__media-img { max-width: 300px; }
  .c-work-card__image { height: 200px; }

  /* --- 文字サイズ（可読性確保。ヒーローはclampで自動調整）--- */
  .p-subhero__title, .p-subhero__title--lg { font-size: 27px; }
  .p-services__title { font-size: 24px; }
  .p-why__title,
  .c-section-title,
  .p-works-teaser__title,
  .p-message__title,
  .p-cta__title { font-size: 22px; }
  .p-cta__title--compact { font-size: 21px; }
  .p-service-row__title { font-size: 22px; }

  /* --- サブヒーロー装飾イラストはスマホでは非表示 --- */
  .p-subhero__accent { display: none; }

  /* --- FAQ（モバイル余白）--- */
  .c-faq__q { padding: 16px 18px; font-size: 15px; }
  .c-faq__a { padding: 0 18px 18px 18px; }

  /* --- フッター下部・works一覧ヘッダ・CTA・ボタン --- */
  .l-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .p-works-teaser__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .p-hero__actions { flex-direction: column; align-items: stretch; }
  .c-button--hero,
  .c-button-ghost { justify-content: center; }
}

/* ===================== 小型スマホ (≤380px) ===================== */
@media (max-width: 380px) {
  .c-gallery { grid-template-columns: 1fr; }
  .c-gallery__item { height: 200px; }
}