@charset "UTF-8";
/* ==========================================================================
   株式会社ビッグウィル コーポレートサイト  mobile.css
   --------------------------------------------------------------------------
   スマートフォン・タブレット（幅 900px 以下）専用のレイヤーです。
   style.css のあとに読み込まれ、同条件のルールを後勝ちで上書きします。

   読み込み側（各 HTML）:
     <link rel="stylesheet" href="/assets/css/mobile.css" media="(max-width: 900px)">

   main.js は <html> に data-device="mobile|tablet|desktop" と
   data-touch="true|false" を付けます。レイアウトの切り替えは
   このファイルのメディアクエリだけで完結し、data-device は
   「実機タッチ端末だけに効かせたい微調整」にのみ使っています。
   ========================================================================== */

@media (max-width: 900px) {

  /* ------------------------------------------------------------------
     1. トークン（モバイル用に詰める）
     ------------------------------------------------------------------ */
  :root {
    --gutter:   18px;
    --sec-y:    56px;
    --header-h: 64px;
    --radius:      8px;
    --radius-card: 12px;
  }

  /* 下部操作バーのぶん、本文の下に余白を確保（iPhone のホームバー対応） */
  body {
    font-size: 15.5px;
    line-height: 1.88;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }
  body.is-nav-open { overflow: hidden; }

  /* タッチ端末ではホバー演出を無効化（タップ後に色が残るのを防ぐ） */
  html[data-touch="true"] .card:hover,
  html[data-touch="true"] .tile:hover,
  html[data-touch="true"] .btn:hover { transform: none; }

  /* ------------------------------------------------------------------
     2. 見出し・本文のサイズ設計（可読性優先で一段小さく、行間は広めに）
     ------------------------------------------------------------------ */
  h1, h2, h3, h4 { line-height: 1.5; }
  .sec-title { font-size: clamp(21px, 5.6vw, 26px); }
  .sec-lede  { font-size: 14.5px; line-height: 1.95; }
  .sec-body  { margin-top: 32px; }
  .page-hero__title { font-size: clamp(24px, 6.6vw, 30px); }
  .page-hero { padding-block: 40px 44px; }
  .card__text, .tile__text { font-size: 13.5px; }

  /* ------------------------------------------------------------------
     3. ヘッダー／ドロワーナビ
     ------------------------------------------------------------------ */
  .site-header { position: sticky; }
  .header-inner { gap: 12px; }
  .brand { gap: 10px; }
  .brand__mark { width: 44px; height: 26px; }
  .brand__name { font-size: 21px; letter-spacing: .1em; }
  .brand__jp   { font-size: 9.5px; letter-spacing: .1em; }

  /* ハンバーガーは 44px 四方のタップ領域を確保 */
  .nav-toggle { width: 44px; height: 44px; padding: 10px; }
  .nav-toggle span { height: 2px; }

  .global-nav {
    inset: var(--header-h) 0 auto 0;
    padding: 8px var(--gutter) 24px;
    max-height: calc(100dvh - var(--header-h));
  }
  .global-nav a { padding-block: 16px; font-size: 15.5px; }
  .header-cta { margin-top: 18px; padding-block: 16px; font-size: 14px; }
  .header-cta::after { display: none; }

  /* ------------------------------------------------------------------
     4. グリッドはすべて 1 カラムへ
     ------------------------------------------------------------------ */
  .grid { gap: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .card, .tile, .course, .flow-step, .spec { padding: 22px 20px; }
  .card__title { font-size: 17px; }
  .tile__title { font-size: 18px; }
  .tile__lead { font-size: 13.5px; }

  /* ------------------------------------------------------------------
     5. ヒーロー（トップページ）
     ------------------------------------------------------------------ */
  .hero__copy { padding: 40px 0 32px; }
  .hero__eyebrow { font-size: 11px; letter-spacing: .14em; }
  .hero__title { font-size: clamp(26px, 7.6vw, 34px); line-height: 1.42; }
  .hero__lede { font-size: 14.5px; line-height: 1.95; }
  .hero__actions { gap: 10px; margin-top: 4px; }
  .hero__actions .btn { width: 100%; }
  .hero__visual { min-height: 0; }
  .hero__visual img { aspect-ratio: 4 / 3; height: auto; }

  /* ------------------------------------------------------------------
     6. 画像＋テキストの 2 カラムは「画像 → 本文」の縦並びに
     ------------------------------------------------------------------ */
  .split { grid-template-columns: 1fr; gap: 26px; }
  .split--media-right > .split__media { order: 0; }
  .split__media img { aspect-ratio: 16 / 10; object-fit: cover; }
  .biz-block { grid-template-columns: 1fr; gap: 24px; padding-block: 36px; }
  .biz-block--reverse .biz-block__media { order: 0; }
  .biz-block__media img { aspect-ratio: 16 / 10; }

  /* ------------------------------------------------------------------
     7. 定義リスト系（会社概要・沿革・募集要項・アクセス）は縦積みに
     ------------------------------------------------------------------ */
  .profile-table, .timeline, .access-list { margin-top: 30px; }
  .profile-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-block: 16px;
  }
  .profile-row__key { font-size: 12.5px; color: var(--accent); letter-spacing: .02em; }
  .profile-row__val { font-size: 14px; line-height: 1.85; }

  .timeline-row { grid-template-columns: 1fr; gap: 6px; padding-block: 18px; }
  .timeline-row__year { font-size: 14px; }

  .access-item { grid-template-columns: 1fr; gap: 4px; padding-block: 15px; }
  .map-frame, .map-frame iframe { min-height: 300px; height: 300px; }

  .spec-grid { grid-template-columns: 1fr; }
  .course__specs { gap: 0; }
  .course__spec { padding-block: 12px; }

  .note-box { padding: 22px 20px; }
  .note-box__lead, .note-box__foot { font-size: 13.5px; }
  .note-box__steps { flex-direction: column; gap: 10px; }
  .note-box__steps li { font-size: 13.5px; }
  .note-box__num { width: 22px; height: 22px; font-size: 11px; }

  /* ------------------------------------------------------------------
     8. ボタンはタップしやすい大きさに（最小 48px）
     ------------------------------------------------------------------ */
  .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 22px;
    font-size: 14.5px;
  }
  .btn--lg { padding: 16px 24px; font-size: 15px; }
  .btn--block { width: 100%; }
  .link-arrow { padding-block: 6px; }

  /* ------------------------------------------------------------------
     9. お問い合わせフォーム
     ------------------------------------------------------------------ */
  .form-layout { grid-template-columns: 1fr; gap: 34px; }
  .form { gap: 20px; }
  .field__label { font-size: 13.5px; }
  /* iOS でフォーカス時に自動ズームされないよう 16px 以上を保つ */
  .field__input, .field__textarea { font-size: 16px; padding: 14px 14px; }
  .field__textarea { min-height: 168px; }
  .consent { align-items: flex-start; gap: 10px; }
  .consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
  .form__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .form__actions .btn { width: 100%; }
  .form__note { text-align: left; font-size: 12px; line-height: 1.8; }
  .side-card { padding: 22px 20px; }

  /* ------------------------------------------------------------------
     10. CTA バンド
     ------------------------------------------------------------------ */
  .cta-band { padding-block: 48px; }
  .cta-band__title { font-size: clamp(20px, 5.8vw, 26px); }
  .cta-band__actions .btn { width: 100%; }

  /* ------------------------------------------------------------------
     11. フッター
     ------------------------------------------------------------------ */
  .site-footer__body { padding-block: 44px 0; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .footer-brand { gap: 14px; }
  .footer-brand .brand__name { font-size: 21px; }
  .footer-brand .brand__mark { width: 44px; height: 26px; }
  .footer-tagline { font-size: 13.5px; }
  .footer-info { font-size: 12.5px; line-height: 1.95; }
  .footer-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .footer-col a { font-size: 13px; padding-block: 4px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 22px; }

  /* ------------------------------------------------------------------
     12. モバイル専用：画面下部の固定操作バー
     ------------------------------------------------------------------ */
  .mobile-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 24px -18px rgba(20, 45, 78, .55);
  }
  .mobile-cta-bar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    background: #fff;
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
  }
  .mobile-cta-bar__item svg { width: 19px; height: 19px; flex-shrink: 0; }
  .mobile-cta-bar__item--accent { background: var(--accent); color: var(--accent-ink); }
  .mobile-cta-bar__item:active { opacity: .88; }

  /* ドロワー展開中は下部バーを隠してナビに集中させる */
  body.is-nav-open .mobile-cta-bar { display: none; }

  /* 印刷時は出さない */
  @media print { .mobile-cta-bar { display: none !important; } }
}

/* --------------------------------------------------------------------------
   極小画面（〜400px）向けの微調整
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .brand__name { font-size: 19px; }
  .brand__jp { display: none; }   /* 幅が足りないときは日本語表記を省く */
  .footer-col ul { grid-template-columns: 1fr; }
}