@charset "UTF-8";
/* ================================================================
   responsive.css  スマホ・タブレット対応用 (2026-07-18 追加)

   ・画面幅1000px以上(PC)には一切影響しません
   ・style.css / studio.css の固定幅をメディアクエリ内でのみ上書きします
   ・各HTMLの </head> 直前で読み込みます(必ず最後に読み込むこと)
   ================================================================ */


/* ----------------------------------------------------------------
   タブレット以下 (画面幅 999px まで) : 固定幅レイアウトを可変化
   ---------------------------------------------------------------- */
@media screen and (max-width: 999px) {

  body {
    -webkit-text-size-adjust: 100%;
  }

  /* 全体枠 955px固定 → 可変 */
  #wrapper {
    width: auto;
    max-width: 955px;
    padding: 0 10px;
    box-sizing: border-box;
  }

  /* 画像は枠内に収める(縦横比維持) */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Googleマップ等の埋め込みは幅のみ可変(高さは維持) */
  iframe {
    max-width: 100%;
  }

  /* 固定幅ボックス類を可変化 */
  #topicstop_bk1,
  #topicstop_bk2,
  #topicstop,
  #topics,
  #content,
  #content .pickup,
  #front,
  .box,
  #main,
  #main_s,
  #main_s2 {
    width: auto;
    box-sizing: border-box;
  }

  /* .box はPC同様 高さ700px+縦スクロールを維持(width のみ可変) */

  /* float配置のトピックス枠を通常配置に(後続の部門カードとの重なり防止) */
  #topicstop_bk1,
  #topicstop_bk2,
  #topicstop,
  #topics {
    float: none;
  }

  #front,
  #topics {
    height: auto;
  }

  /* トップのスライダー(bxSlider) */
  .slider {
    width: auto;
    height: auto;
  }

  .bxSlider ul,
  .bxSlider li {
    width: auto;
    height: auto;
  }

  /* ヘッダーナビ : 折り返し可能に (#header_nav は ul 自身) */
  ul#header_nav {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    border: none;
  }

  #header_nav li {
    float: none;
    width: auto;
    flex: 1 1 130px;
  }

  #header_nav a {
    border: 1px solid #ffffff;
  }

  /* 画像拡大用コンテナ(inline-block)が画像の元サイズに広がるのを防ぐ */
  .p_plus,
  .p_plus250,
  .p_plus300,
  .p_plus333,
  .p_plus333_fl,
  .p_plus800 {
    max-width: 100%;
  }

  /* 画像拡大ルーペアイコン : 固定位置指定 → 右上に統一 */
  .rp_plus250,
  .rp_plus300,
  .rp_plus333,
  .rp_plus800 {
    left: auto;
    right: 0;
  }

  /* フッターのサイト内一覧 : 列を可変に */
  #nav_sub_footer {
    display: flex;
    flex-wrap: wrap;
  }

  #nav_sub_footer dl {
    float: none;
    flex: 1 1 157px;
    width: auto;
    height: auto;
  }

  #nav_sub_footer center {
    flex: 1 1 100%;
  }

  /* 表 : はみ出す場合は横スクロール */
  #content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}


/* ----------------------------------------------------------------
   スマートフォン (画面幅 767px まで) : 縦積みレイアウト
   ---------------------------------------------------------------- */
@media screen and (max-width: 767px) {

  /* ヘッダー : ロゴとバナーを中央寄せで縦に */
  #header .alpha {
    text-align: center;
  }

  #header .alpha .fr {
    float: none;
    padding: 0 0 5px 0;
  }

  #header h1 {
    text-align: center;
  }

  /* ヘッダーナビ : 2列表示 */
  #header_nav li {
    flex: 1 1 40%;
  }

  /* トップの4部門カード : 縦積み */
  #nav_sub dl,
  dl#nav_sub,
  #nav_sub_center {
    float: none;
    width: auto;
    height: auto;
    margin: 0 0 10px 0;
  }

  .DivLink {
    width: auto;
    height: auto;
    padding-bottom: 10px;
  }

  .alpha2:hover {
    width: auto;
    height: auto;
  }

  /* お問い合わせ枠 */
  #link_inquiry,
  #link_inquiry01 {
    float: none;
    width: auto;
    height: auto;
    margin: 10px 0;
    box-sizing: border-box;
  }

  /* 表の余白を詰める */
  #content table {
    margin: 10px 0;
  }

  /* コンテンツの字下げを浅く */
  #content dd {
    padding: 0 0.5em 0 0.5em;
  }

  /* フッターのバナー : 中央寄せ */
  #footer .alpha {
    text-align: center;
  }
}