@charset "UTF-8";

/* ============================================================
   リッキー廣田龍人とバッドボーイズ / 追加スタイルシート

   方針:
     1998年からの見た目は変えない。
     元の HTML の <font> <table> <center> にはいっさい手を入れず、
     「狭い画面でも読める」ようにする指定だけを足す。

   重要:
     画面幅が 900px より広いときは、このファイルはほとんど何もしません。
     パソコンの広い画面では、これまでとまったく同じに見えます。
     （画像や表に幅の制限をかけると、width="44" のような狭いセルの中で
       バナー画像が潰れてしまうため、制限は狭い画面でのみ有効にします）
   ============================================================ */


/* ---- 1. 全画面共通（レイアウトには影響しない指定だけ） ------ */

html {
  /* スマートフォンを横向きにしたとき、文字が勝手に拡大されるのを防ぐ */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 長い URL などが画面外へはみ出すのを防ぐ */
body, td, th, p, div, li, dd, dt {
  overflow-wrap: break-word;
}


/* ---- 2. 中くらいの画面（タブレット・小さいノート） ---------- */
/*        元のデザインは 852px 幅で作られているので、
          それより狭くなったときだけ縮める                        */

@media screen and (max-width: 900px) {

  body {
    margin: 0;
    padding: 0 4px 20px;
  }

  /* 画像は画面幅を超えない。縦横比は保つ */
  img {
    max-width: 100%;
    height: auto;
  }

  /* 固定幅・固定高さの指定を解除して、画面幅に収める */
  table {
    max-width: 100%;
  }
  table[width],
  td[width],
  th[width] {
    width: auto !important;
  }
  table[height],
  tr[height],
  td[height] {
    height: auto !important;
  }

  hr {
    max-width: 100%;
  }
}


/* ---- 3. 狭い画面（スマートフォン）: 表を縦に折り返す --------- */

@media screen and (max-width: 700px) {

  /* 横に並んでいたセルを縦に積み直す。
     元の HTML は「画像の行」「説明文の行」が交互になっているので、
     縦に積むと 画像 → 説明 → 画像 → 説明 の順で自然に読めます。 */
  table,
  tbody,
  tr,
  td,
  th {
    display: block !important;
    width: auto !important;
    height: auto !important;
  }

  td, th {
    margin: 0 0 2px;
    padding: 4px;
  }

  /* ただしメニューのバナーは、縦一列だと長すぎるので横に流す。
     :has() に未対応の古いブラウザでは、上の指定どおり縦に積まれます。 */
  /* ※ 1つだけ画像名が banner_ で始まらないもの（BB-Photo）があるため、
        それも横並びの対象に含めます。仲間外れにすると、そこで行が
        分断されて並びが崩れます。 */
  tr:has(> td > a > img[src*="banner_"]),
  tr:has(> td > font > a > img[src*="banner_"]),
  tr:has(> td > a > img[src*="BB-Photo"]),
  tr:has(> td > font > a > img[src*="BB-Photo"]) {
    text-align: center;
  }
  td:has(> a > img[src*="banner_"]),
  td:has(> font > a > img[src*="banner_"]),
  td:has(> a > img[src*="BB-Photo"]),
  td:has(> font > a > img[src*="BB-Photo"]) {
    display: inline-block !important;
    width: auto !important;
    margin: 1px;
    padding: 1px;
    vertical-align: middle;
  }

  /* 写真だけが入っているセルは中央にそろえる。
     元の HTML には中央寄せの指定が抜けているセルがいくつかあり
     （ricky.html の Challenge.jpg と player2.jpg）、パソコンでは列幅が
     写真とほぼ同じなので目立たないが、狭い画面でセルが画面いっぱいの幅に
     なると、そこだけ左に寄って見えてしまうため。 */
  td:has(> img:only-child),
  td:has(> a:only-child > img:only-child),
  td:has(> font:only-child > a:only-child > img:only-child) {
    text-align: center;
  }

  /* ページ上部の「TOP」は文字が小さく指でタップしづらいので、
     狭い画面では周囲に余白を足して押しやすくする。
     （文字の大きさや色は変えない） */
  td[colspan="6"] a:not(:has(img)) {
    display: inline-block;
    padding: 10px 14px;
  }

  /* 引用ブロックと定義リストの字下げが大きすぎるので詰める */
  blockquote {
    margin-left: 8px;
    margin-right: 8px;
  }
  dl, dd {
    margin-left: 8px;
  }
}