/* contents-responsive.css
 * 「#contents」配下のみを上書きして、モバイルで縦方向レイアウトにします。
 * - 既存の style.css は変更せず、本ファイルを後読み込みしてください。
 */

/* 1) 画像のリキッド化（HTMLのwidth/height属性を上書き） */
#contents img {
  max-width: 100%;
  height: auto !important;
}

/* 2) YouTube: 既存の .youtube / .youtube_wrap を利用（style.css準拠）
   - PCでは width:480px / height:270px
   - モバイルでは 16:9 を維持して全幅表示 */
@media screen and (min-width: 640px) {
  #contents .youtube .youtube_wrap {
    width: 480px;
    height: 270px;
    padding-top: 0;
  }
  #contents .youtube .youtube_wrap iframe {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 639px) {
  #contents .youtube .youtube_wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    height: 0;
  }
  #contents .youtube .youtube_wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* 3) テーブルレイアウトをモバイルで「縦積み」に変更
   - 既存の .table_scroll は style.css で横スクロール指定があるため、
     #contents 配下ではそれを打ち消しつつ、縦方向に積み上げる */
@media screen and (max-width: 639px) {
  #contents .table-stack-on-mobile {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  #contents .table-stack-on-mobile table,
  #contents .table-stack-on-mobile tbody,
  #contents .table-stack-on-mobile tr,
  #contents .table-stack-on-mobile td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  #contents .table-stack-on-mobile td {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 余白セルや幅固定のセルを簡易的に非表示 */
  #contents .table-stack-on-mobile td[width="23"],
  #contents .table-stack-on-mobile td[width="295"],
  #contents .table-stack-on-mobile td[width="272"],
  #contents .table-stack-on-mobile td[width="537"] {
    width: 100% !important;
  }
  /* ネストされたテーブルの横幅を100%に */
  #contents .table-stack-on-mobile table[border="0"] {
    width: 100% !important;
  }
  /* 画像+本文のブロック間に余白 */
  #contents .table-stack-on-mobile img {
    margin-bottom: 8px;
  }
  /* 中央寄せの行見出しなどの体裁を崩さないための調整 */
  #contents .table-stack-on-mobile [align="center"] {
    text-align: center;
  }
}

/* 4) 細かな文法修正に伴う安全策（fontタグ混在のため）
   - fontタグはそのまま活かしつつ、親要素に依存したレイアウト崩れを防ぐ */
#contents h2 font,
#contents h3 font {
  line-height: 1.4;
}

/* 5) 見出しの余白微調整（既存の見出しデザインを尊重） */
#contents h2 { margin-top: 6px; }
#contents h3 { margin-top: 6px; }

/* 6) PDFバナー等の画像リンクのホバー効果は既存に委譲（ここでは変更しない） */