/* css/mobile.css
   - base.css の上に読み込む（後勝ち）
   - 目的：スマホで「文字/余白/タップ/表の横はみ出し」を統一して快適に
*/

/* =========================
   1) 基本：スマホ時のスケール
========================= */
:root{
  /* 触りやすい余白と文字 */
  --m-pad: 14px;
  --m-gap: 10px;
  --m-radius: 14px;

  --m-font: 15px;
  --m-font-sm: 13px;
  --m-font-lg: 17px;

  --m-line: 1.55;

  /* タップしやすい高さ */
  --tap-h: 44px;
}

@media (max-width: 640px){
  html{
    /* iOSの文字勝手拡大を抑えつつ自然に */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body{
    font-size: var(--m-font);
    line-height: var(--m-line);
  }
}

/* =========================
   2) 余白・コンテナの統一
========================= */
@media (max-width: 640px){
  .container,
  .page,
  main{
    padding-left: var(--m-pad);
    padding-right: var(--m-pad);
  }

  .card,
  .panel,
  .section{
    border-radius: var(--m-radius);
  }

  /* カード内の詰まりすぎを防ぐ */
  .card,
  .panel{
    padding: 12px;
  }
}

/* =========================
   3) タップ領域（ボタン/リンク/入力）
========================= */
@media (max-width: 640px){
  button,
  .btn,
  a.btn,
  input,
  select{
    min-height: var(--tap-h);
  }

  button,
  .btn{
    padding: 10px 12px;
    border-radius: 12px;
  }

  input,
  select{
    padding: 10px 12px;
    border-radius: 12px;
  }

  /* 小さいリンクが押しにくいのを軽減 */
  a{
    -webkit-tap-highlight-color: rgba(255,255,255,0.12);
  }
}

/* =========================
   4) 見出しのサイズ感（スマホでデカすぎ問題を防ぐ）
========================= */
@media (max-width: 640px){
  h1{ font-size: 20px; line-height: 1.25; }
  h2{ font-size: 17px; line-height: 1.3; }
  h3{ font-size: 15px; line-height: 1.35; }

  .muted,
  .sub,
  small{
    font-size: var(--m-font-sm);
  }
}

/* =========================
   5) 表・横長レイアウトの事故防止
========================= */
@media (max-width: 640px){
  /* 横スクロールできる表コンテナ用（使いたい所に class="table-wrap"） */
  .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--m-radius);
  }

  table{
    width: 100%;
    border-collapse: collapse;
  }

  /* グリッドが横に詰まりすぎる場合に縦積みに */
  .grid-2,
  .grid-3,
  .grid-4{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--m-gap);
  }

  /* 横並びの統計ヘッダ等を折り返し */
  .row,
  .flex-row{
    flex-wrap: wrap;
    gap: var(--m-gap);
  }
}

/* =========================
   6) 画像/チャート/Swiper 等がはみ出すのを防ぐ
========================= */
@media (max-width: 640px){
  img, canvas, svg, video{
    max-width: 100%;
    height: auto;
  }

  .swiper{
    border-radius: var(--m-radius);
    overflow: hidden;
  }
}

/* =========================
   7) ちょい便利クラス（必要なページだけで使える）
========================= */
@media (max-width: 640px){
  .hide-mobile{ display: none !important; }
  .only-mobile{ display: block !important; }
}
@media (min-width: 641px){
  .only-mobile{ display: none !important; }
}