/* ===================================
   タブレット向けレイアウト (1000px以下)
   =================================== */
@media (max-width: 1024px) {
  /* --- ヘッダー --- */
  .header {
    height: auto;
    padding: 10px 15px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .header-logo {
    float: none;
    font-size: 24px;
    padding: 0;
    margin-bottom: 5px;
  }

  .header p {
    float: none;
    font-size: 14px;
    padding-top: 0;
    margin-bottom: 10px;
  }

  .header h1, .header h2 {
    padding-left: 0;
    margin: 2px 0;
    letter-spacing: normal;
  }

  .header h1 {
    font-size: 22px;
  }

  .header h2 {
    font-size: 16px;
  }

  /* --- ハンバーガーメニュー --- */
  .menu-toggle {
    display: block;
    position: relative;
    z-index: 1002;
    cursor: pointer;
  }

  .header-menu {
    justify-content: flex-end; /* ハンバーガーアイコンを右寄せ */
    padding: 0 15px;
    height: 60px; /* アイコンの高さに合わせる */
  }

  .header-menu ul {
    display: none; /* 初期状態では非表示 */
    flex-direction: column;
    position: fixed;
    /* topとheightはJavaScriptで動的に設定することを推奨
       (ヘッダーの高さが変わるため) */
    top: 155px; /* 仮: ヘッダーの高さに依存 */
    left: 0;
    width: 100%;
    height: calc(100vh - 155px); /* 仮: ヘッダーの高さに依存 */
    background-color: #88bfbf;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1001;
  }

  .header-menu ul.is-open {
    transform: translateX(0);
    display: flex;
  }

  .header-menu li {
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  /* index.html: 当組合の取り組み */
  .effort-item {
    flex-direction: column; /* 要素を縦並びにする */
    text-align: center;     /* テキストを中央揃えにする */
  }

  .effort-item img {
    margin-right: 0;      /* PC用の右余白をリセット */
    margin-bottom: 15px;  /* 画像の下に余白を追加 */
  }

  /* --- サブメニュー（アコーディオン形式へ） --- */
  .submenu {
    position: static;
    display: block; /* display:noneを解除 */
    width: auto;
    opacity: 1;
    visibility: visible;
    background-color: #67b5b7;
    margin-top: 15px;
    padding-left: 20px;
    max-height: 0; /* 初期状態で高さを0に */
    overflow: hidden; /* はみ出したコンテンツを隠す */
    transition: max-height 0.3s ease-out; /* アニメーション */
  }

  /* 親メニューがクリックされたらサブメニューを展開 */
  .header-menu li.has-submenu.is-open .submenu {
      max-height: 500px; /* 十分な高さを設定して展開 */
  }

  /* JSでbodyに付与されるクラス。背景のスクロールを固定 */
  body.no-scroll {
      overflow: hidden;
  }
}

/* ===================================
   モバイル向けレイアウト (768px以下)
   =================================== */
@media (max-width: 768px) {
  body {
    padding-top: 145px; /* モバイル時のヘッダー高さに合わせて調整 */
  }

  /* --- メインコンテンツとサイドバー --- */
  .main-content-wrapper {
    flex-direction: column;
  }
  
  /* about.html: 組合概要セクションのレスポンシブ対応 */
  .section-content-two-columns .text-content {
    min-width: 0; /* PC用のmin-widthをリセットして、はみ出しを防ぐ */
  }

  .section-content-two-columns .text-content table {
    table-layout: fixed; /* テーブルの幅を親要素に強制的に合わせる */
    width: 100%;
  }

  .section-content-two-columns .text-content td {
    word-wrap: break-word; /* 長い単語やURLを強制的に折り返す */
    overflow-wrap: break-word;
  }
  
    /* about.html: 許可番号セクションのレスポンシブ対応 */
  .license-numbers {
    display: block; /* 2列グリッドレイアウトを解除 */
  }

  .license-numbers .license-title,
  .license-numbers .license-number {
    display: block;       /* 各要素をブロックレベル要素にして改行させる */
    white-space: normal;  /* テキストの折り返しを許可 */
    text-align: left;     /* すべて左揃えに統一 */
  }

  .license-numbers .license-number {
    margin-bottom: 8px; /* 各番号の下に少し余白を追加 */
  }

  .main-content {
    width: 100%;
    margin-right: 0;
    padding: 15px;
  }

  .sidebar {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 15px;
  }
  
  .sidebar-heading-group {
      flex-basis: 100%;
      text-align: center;
  }

  .sidebar .ad-item,
  .sidebar ul {
    flex-basis: calc(50% - 10px); /* 2列表示 */
  }
  
  /* 「取り組み」バナー画像のレスポンシブ対応 */
  .effort-item img {
    max-width: 100%;
    height: auto;
  }

  /* --- フッター --- */
  .footer-content-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .footer-sitemap {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sitemap-column {
    flex-basis: calc(50% - 20px); /* 2列表示 */
    text-align: center;
  }
  
  /* --- 汎用2カラムレイアウト --- */
  .section-content-two-columns,
  .section-content-with-image {
    flex-direction: column;
  }
  
  .section-content-two-columns.reverse-columns {
    flex-direction: column;
  }
  
  .section-content-two-columns .image-content,
  .section-content-with-image .tokutei-image-content {
    order: -1; /* 画像をテキストの上に移動 */
    margin-bottom: 20px;
  }

  /* --- 各ページの個別調整 --- */
  /* index.html: 当組合の取り組み */
  .effort-item {
    flex-direction: column;
    text-align: center;
    max-width: 85%; /* 画像の最大幅を85%に制限する */
    height: auto;     /* 高さは自動調整 */
    margin: 0 auto 15px; /* 中央に寄せて、下に15pxの余白をつける */
  }

  .effort-item img {
    margin: 0 0 15px 0;
  }

  /* jigyou.html: 選ばれる理由 */
  .reason-item {
    padding-left: 0;
    text-align: center;
  }

  .reason-number {
    position: static;
    font-size: 3.5em;
    margin-bottom: 10px;
  }
  
  .countries-image img.responsive-image {
      max-width: 90%;
  }

  /* ginou.html: 技能実習期間フロー */
  .period-flow, .flow-row {
    flex-direction: column;
  }

  .plus, .equals {
    transform: rotate(90deg); /* 矢印を縦向きに */
  }
  
  .ginou-flow-image {
      max-width: 90%;
  }
  
  /* ginou.html: テーブル横スクロール対応 */
  .acceptance-table-container {
      overflow-x: auto;
  }

  /* tokutei.html: グリッドテーブルを1列に */
  .tokutei-grid-table {
    grid-template-columns: 1fr;
  }

  .tokutei-grid-table .grid-cell-header {
    grid-column: 1 / -1;
  }
  
  /* tokutei.html: テーブル横スクロール対応 */
  .tokutei-comparison-table-container {
      max-width: 95%;
      overflow-x: auto;
  }
  
  .flow-table-wrapper {
    width: 95%;
  }
  
  /* center.html: スライドショー */
  .slideshow-container {
    height: 300px;
  }

  /* job-info.html: 求人情報テーブル */
  /* テーブルを見やすくするためにスタックさせる */
  .job-item table,
  .job-item thead,
  .job-item tbody,
  .job-item tr {
      display: block;
  }

  .job-item thead {
      display: none; /* ヘッダー行は非表示に */
  }

  .job-item tr {
      margin-bottom: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
  }

  .job-item th,
  .job-item td {
      display: block;
      width: 100%;
      text-align: left;
      border: none;
      padding: 10px 15px;
  }

  .job-item th {
      background-color: #f2f2f2;
      font-weight: bold;
      border-bottom: 1px solid #ddd;
  }

  .job-item td {
      border-bottom: 1px solid #e9e9e9;
  }

  .job-item tr td:last-child {
      border-bottom: none;
  }
}

/* ===================================
   小さいモバイル向けレイアウト (480px以下)
   =================================== */
@media (max-width: 480px) {
  body {
      padding-top: 135px; /* ヘッダー高さ微調整 */
  }
  
  /* --- サイドバー: 1列表示 --- */
  .sidebar .ad-item,
  .sidebar ul {
    flex-basis: 100%;
  }

  /* --- フッター: サイトマップ1列表示 --- */
  .footer-sitemap {
    flex-direction: column;
    align-items: center;
  }

  .sitemap-column {
    width: 80%;
    text-align: left;
  }
  
  /* --- スライドショー --- */
  .slideshow-container {
    height: 250px;
  }
  
  /* --- フォントサイズ微調整 --- */
  h2, .main-content h2 {
    font-size: 1.3em;
  }
  
  .main-content, .sidebar {
    font-size: 0.95em;
  }
}