@charset "UTF-8";
/* ============================================================
   menkyo/index.html モバイル対応 追加スタイル
   - 既存レガシーCSS(base.css / sita.css)は 950px 固定レイアウト。
   - 本ファイルは最後に読み込まれ、@media で狭い画面のときだけ上書きする。
   - PC表示(951px 以上)には一切影響しない。
   - レガシーCSSより詳細度を上げる／読み込み順が後、で確実に適用させる。
   ============================================================ */

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

  /* body: base.css の width:950px 固定 → 画面幅に追従させる */
  body {
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 12px;
    box-sizing: border-box;
    line-height: 1.9 !important; /* インライン body{line-height:32px} を上書き */
  }

  /* 上部の店舗案内バー(h5): 固定高さ・1行 → 折り返す */
  #header h5 {
    height: auto;
    line-height: 1.5;
    padding: 6px 10px;
    margin: 0 -12px; /* body の左右 padding を打ち消して全幅表示 */
    white-space: normal;
    word-break: break-all;
  }

  /* ヘッダー画像(950px・イメージマップ付き): 画面幅に収める */
  #header img[name="gelaldue"] {
    width: 100%;
    height: auto;
  }

  /* 見出し */
  h1 {
    font-size: 20px;
    line-height: 1.5;
    word-break: break-all;
  }

  /* 本文中の画像すべて: 画面からはみ出さないようにする
     (height:auto で width/height 属性の縦横比を維持) */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ---- フッター: 950px固定・背景画像・多段フロート → 縦積み ---- */
  #footerbox {
    width: auto;
    height: auto;
    background-image: none;      /* 950px幅の背景画像を無効化 */
    background-color: #5c594a;   /* 背景画像が消えても白文字が読めるよう暗色を敷く */
    padding: 20px 0;
    overflow: hidden;
  }
  #footerbox #infooter {
    padding: 0 16px;             /* 132px の上余白(背景画像用)を解除 */
  }
  #footerbox #sita1,
  #footerbox #sita2,
  #footerbox #sita3,
  #footerbox #sita4,
  #footerbox #sita5 {
    float: none;
    width: auto;
  }
  #footerbox ul {
    margin: 0 0 14px;
    padding: 0;
  }
  #footerbox li {
    width: auto;                 /* report.css の li{width:190px;height:30px} を解除 */
    height: auto;
  }
  #footerbox li a {
    display: inline-block;
    padding: 6px 0;              /* タップしやすい余白 */
  }
}

/* ============================================================
   nijake/jacket.html モバイル対応 追加スタイル
   - 似ジャケコレクションの 4列画像テーブルはモバイルで横あふれする。
   - #nijake-gallery に id を付与し、そのページのテーブルだけに限定して
     2列へリフロー(縦積み)させる(他ページの table には影響させない)。
   - 上部/ヘッダー/フッター/body の可変幅化は上の共通ブロックを流用。
   ============================================================ */
@media screen and (max-width: 950px) {

  /* h3見出し内の説明span: 見出しと分けて読みやすく */
  #sto {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: normal;
  }

  /* 画像テーブル: 4列固定 → 2列にリフロー */
  #nijake-gallery,
  #nijake-gallery tbody,
  #nijake-gallery tr {
    display: block;
    width: 100%;
  }
  #nijake-gallery tr {
    overflow: hidden;            /* 行内のフロートを内包(clearfix) */
  }
  #nijake-gallery td {
    float: left;
    width: 50%;                  /* 1行4セル → 2列×2段に折り返す */
    box-sizing: border-box;
    padding: 8px 6px;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;      /* 長いアーティスト名を折り返す */
  }
  #nijake-gallery td img {
    max-width: 100%;             /* height="99" 属性を上書きし列幅に収める */
    height: auto;
  }
}

/* ============================================================
   kuji/index.html モバイル対応 追加スタイル
   - <table width="980"> の1カラムレイアウト。共有ヘッダー/フッターは無い。
   - #kuji-table に id を付与し、そのページのテーブルだけを対象に
     幅を可変化し、幅広画像(最大960px)を画面内に収める。
   - body の可変幅化は先頭の共通ブロックを流用。
   ============================================================ */
@media screen and (max-width: 950px) {

  #kuji-table {
    width: 100%;                 /* width="980" 属性を上書き */
    max-width: 100%;
  }
  #kuji-table img {
    max-width: 100%;             /* 幅広画像(940/955/960px等)を列幅に収める */
    height: auto;
  }
  #kuji-table td {
    line-height: 1.8;            /* インライン td{line-height:32px} を緩和 */
    overflow-wrap: anywhere;     /* 長いURL等で横あふれさせない */
  }
}

/* ============================================================
   event_logo/*.html モバイル対応 追加スタイル
   - index/2008/2009/2010/2011。ネストした固定幅テーブル
     (外側 width="755" / ロゴ枠 width="401") のレイアウト。
   - 共有ファイルのため body.ev-logo でスコープし他ページに波及させない。
   - レイアウト用テーブルを block 化して1カラムに線形化。
   - ロゴは左右2枚組画像(_l≈197px + _r≈194px)なのでペアだけ幅を絞り1行維持。
   - body/ヘッダー/フッターの可変幅化は先頭の共通ブロックを流用。
   ============================================================ */
@media screen and (max-width: 950px) {

  .ev-logo table {
    width: auto;                 /* width="755"/"401" 属性を上書き */
    max-width: 100%;
  }
  .ev-logo table,
  .ev-logo tbody,
  .ev-logo tr,
  .ev-logo td {
    display: block;              /* レイアウトテーブルを縦1カラムに線形化 */
    height: auto;
  }
  .ev-logo td {
    text-align: center;
  }
  .ev-logo img {
    max-width: 100%;             /* ナビ画像等は自然サイズまで表示 */
    height: auto;
  }
  .ev-logo div[style*="dropshadow"] {
    width: auto;
  }
  .ev-logo div[style*="dropshadow"] img {
    max-width: 48%;              /* ロゴの左右ペアを1行に収め中央寄せ */
  }
}

/* ============================================================
   hmv/index.html モバイル対応 追加スタイル
   - 本文フロー(<p>＋画像)＋共有フッターのみ(ヘッダー無し)。
   - 幅広画像(640/742/700px等)を画面内に収める。
   - body の可変幅化・フッターの縦積みは先頭の共通ブロックを流用。
   - 他ページへ波及させないよう body.hmv でスコープ。
   ============================================================ */
@media screen and (max-width: 950px) {

  .hmv img {
    max-width: 100%;             /* 幅広画像を画面幅に収める */
    height: auto;
  }
}

/* ============================================================
   ticket/*.html モバイル対応 追加スタイル
   - ticket/1995/2000/2005/2010/2015(半券)＝1カラムの幅広画像、
     movie/movie2＝3カラムの半券グリッド。いずれも <table width="755">。
   - table を可変化し画像を画面幅に収める(3カラムは自動で縮小)。
   - body/ヘッダー/フッターの可変幅化は先頭の共通ブロックを流用。
   - 他ページへ波及させないよう body.ticket でスコープ。
   ============================================================ */
@media screen and (max-width: 950px) {

  .ticket table {
    width: 100%;                 /* width="755" 属性を上書き */
    max-width: 100%;
  }
  .ticket img {
    max-width: 100%;             /* 幅広/多列画像を画面内に収める(縦横比維持) */
    height: auto;
  }
}

/* ============================================================
   page01テンプレート(fc.html / mickytoys.html 等) モバイル対応 追加スタイル
   - base.css の 950px固定レイアウト。共有ヘッダー(#header)/フッター(#footerbox)/
     body可変化・画像縮小は先頭の共通ブロックを流用。
   - 本ブロックはテンプレート固有の以下だけを上書きする:
       .nav          … 800px固定・22px のスクロール追従ナビ
       #micky-henshu … 950px幅＋高さ固定のメインラッパ
       #kako/1/2/3   … 930px幅＋高さ固定の本文ブロック
       #imeji1/#moji1… #kako内の画像300px＋テキスト630pxの2カラムフロート
   ============================================================ */
@media screen and (max-width: 950px) {

  /* メインラッパ: 幅950px・高さ固定 → 可変化(内部フロートを内包) */
  #micky-henshu {
    width: auto;
    height: auto;
    overflow: hidden;
  }

  /* スクロール追従ナビ: 800px固定・22px → 画面幅に収め、項目を中央寄せで折り返す */
  .nav {
    width: auto;
    height: auto;
    font-size: 15px;
    margin-bottom: 24px;
    padding-left: 0;
    box-sizing: border-box;
  }
  .nav ul {
    margin: 0;
    padding: 6px 4px;
    text-align: center;
  }
  .nav li {
    float: none;                 /* base.css の float:left を解除 */
    display: inline-block;
  }
  .nav li a {
    padding: 8px 10px;           /* タップ領域を確保 */
  }
  /* スクロール時に position:fixed になる版(.fixed)も全幅で折り返し可読に */
  .fixed {
    height: auto;
    padding: 4px 0;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.3);
  }

  /* 本文ブロック: 幅930px・高さ固定 → 可変化(内部フロートを内包) */
  #kako,
  #kako1,
  #kako2,
  #kako3 {
    width: auto;
    height: auto;
    overflow: hidden;
  }

  /* #kako内の 画像(300px)＋テキスト(630px) 2カラム → 縦積み */
  #imeji1,
  #moji1 {
    float: none;
    width: auto;
  }
  #imeji1 {
    text-align: center;
    margin-bottom: 12px;
  }
}