/* =====================================================
   mobile.css ― スマホ対応（レスポンシブ）用の追加CSS
   -----------------------------------------------------
   ・基本は「@media (max-width: 850px)」の中にだけ書く。
     ＝画面幅850px以下（スマホ等）でしか効かない。
     PCの見た目は変わらない。
   ・例外は #mobileslides（スマホ専用スライドショー帯）の
     初期状態だけ。PCでは空のdivを隠すために media の外に書く。
   ・HTML側では、既存CSSより【後に】読み込むこと。
     （後から読んだCSSが同じ強さなら勝つ＝カスケードの基本）
   ===================================================== */

/* スマホ専用スライドショー帯：PC・タブレット横では非表示
   （中身は空のdivなので、PCの見た目には影響しない） */
#mobileslides {
  display: none;
}

/* 切り替え条件：
   「幅850px以下」かつ「主な入力装置が指（pointer: coarse）」
   ＝スマホ・タブレットだけが対象。
   マウス操作のPCはウィンドウをどれだけ狭めても切り替わらない。
   ※PCで動作確認したい時は Chrome の F12 → デバイスモード（📱）を
     使う（デバイスモードは指入力もエミュレートするため切り替わる） */
@media (max-width: 850px) and (pointer: coarse) {

  /* --- 1. 全体：固定幅850pxをやめて画面幅にフィットさせる --- */
  #building {
    width: 100%;              /* 850px固定 → 画面幅いっぱい */
  }
  img {
    max-width: 100%;          /* 画像は親箱からはみ出さない */
    height: auto;             /* 縦横比は維持 */
  }

  /* --- 2. ヘッダ：SNSアイコンとタイトルを中央寄せに --- */
  #facebook {
    float: none;
    text-align: center;
    padding: 6px 0 0;
  }
  #headgroup {
    height: auto;
  }
  #header #headgroup h3,
  #header #headgroup h4 {
    text-align: center;
    padding: 2px 0;
  }

  /* --- 3. メニュー：折り返し可＋タッチしやすい大きさに --- */
  #globalbar, #switchbar {
    width: auto;
  }
  #globalbar ul, #switchbar ul {
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;          /* 入りきらなければ折り返す */
    justify-content: center;
  }
  #globalbar li, #switchbar li {
    float: none;
    padding: 0;
  }
  #globalbar a, #switchbar a {
    display: block;
    padding: 9px 10px;        /* 指で押しやすい余白 */
  }

  /* --- 4. スマホ専用スライドショー帯 ---
         index2.htmlのスクリプトが、スマホでは vegas を
         #topbox ではなくこの帯に取り付ける。
         画面幅いっぱい・高さは画面幅の62%（写真の迫力優先） */
  #mobileslides {
    display: block;
    position: relative;       /* vegasのスライドが絶対配置で乗るため必須 */
    width: 100%;
    height: 62vw;             /* vw＝画面幅の1%。62vw≒横長写真の比率 */
    max-height: 340px;
    background: #000;
  }

  /* --- 5. コンテンツ：3カラム横並び → 縦積み ---
         各カラムはPC版と同じ「小窓＋中でスクロール」方式を維持し、
         詰まった密度感を保つ（全文ベタ展開はスカスカに見えるため） */
  #topbox {
    width: 100%;
    height: auto !important;  /* 410px固定を解除（!importantは
                                 vegasのインライン高さ対策の名残・保険） */
    padding: 6px 0;
  }
  #topbox1, .topbox1 {
    flex-direction: column;   /* ★横並び→縦積みの核心 */
    height: auto;
    align-items: stretch;
  }
  #topbox h5 {
    width: auto;              /* 見出し200px固定を解除 */
    padding: 6px 10px 3px;
  }
  #column, .column {
    width: auto;              /* 200px固定 → 画面幅 */
    height: 178px;            /* PC(150px)よりやや大きい小窓。
                                 中はスクロールで読む＝密度感を維持 */
    overflow-y: auto;
    margin: 0 8px 10px;
    -webkit-overflow-scrolling: touch;  /* iPhoneで滑らかスクロール */
  }

  /* --- 6. PC用スライドショーの保険 ---
         スマホではvegasは#topboxに付かないが、万一付いた場合に
         本文が消えないようにする防御（ハマった実績あり：
         vegasはコンテンツを.vegas-wrapperで包み絶対配置に変える） */
  #topbox .vegas-slide, #topbox .vegas-overlay, #topbox .vegas-timer {
    display: none;
  }
  #topbox .vegas-wrapper {
    position: static !important;
    height: auto !important;
  }
  #topbox {
    overflow: visible !important;
  }

  /* --- 7. フッタ・ポスター --- */
  #poster {
    width: auto;
    height: auto;             /* 1000px固定を解除 */
    text-align: center;
  }
  #footer p, #footer address {
    padding: 6px 10px;
  }

  /* --- 8. 本文の文字：小窓の中で読みやすい大きさ・行間 --- */
  #column p, .column p {
    font-size: 13px;
    line-height: 1.55;
  }
}