/* 1. ブラウザのカラースキームをライトモードに固定する */
:root {
  color-scheme: light;
}

/* 2. 背景色と文字色を明示的に指定する */
/* これにより、ブラウザ側による勝手な色の反転を防ぎます */
html, body {
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* 3. ダークモード用のメディアクエリを無効化（上書き）する */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  /* その他、ダークモードで消えてしまう要素があれば個別に白背景を指定 */
}

.grid.is-6 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2%;

  &.is-right {
    justify-content: flex-end;
  }
}

.section-facility .flex-container {
  display: flex !important;
  justify-content: space-between;
  align-items: stretch; /* これで表と画像の下端が揃います */
  gap: 30px;
  width: 100%;

  .table-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    /* height: 486px; ←これを削除 */
    min-height: 486px; /* 最低でも画像の高さに合わせる */
    border: 1px solid #E3E3E3;
    border-radius: 20px;
    overflow: hidden;
    margin: 0;
    align-content: stretch; /* 行を縦いっぱいに広げる */

    dt, dd {
      /* height: calc(100% / 7); ←これも削除（自動計算に任せる） */
      min-height: 60px; /* 1行の最低限の高さ */
      display: flex;
      align-items: center;
      padding: 15px 20px; /* 上下パディングを数値で指定 */
      border-bottom: 1px solid #E3E3E3;
      box-sizing: border-box;
    }
    dt {
      width: 30%;
      background: #FFF9F3;
      font-weight: bold;
      border-right: 1px solid #E3E3E3;
      flex-shrink: 0;
    }
    dd {
      width: 70%;
      background: #fff;
      margin: 0;
      p { margin: 0; }
    }
    /* 最後の行のボーダーを消す処理 */
    dt:last-of-type, dd:last-of-type {
      border-bottom: none;
    }
  }

  .table-photo {
    flex: 0 0 350px;
    height: auto; /* stretchが効くのでautoでOK */
    min-height: 486px;
    flex-shrink: 0;
    
    img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover;
      border-radius: 20px;
      display: block;
    }
  }

  @media screen and (max-width: 767px) {
    display: flex !important;
    flex-direction: column-reverse; /* ★画像を上、表を下に入れ替え */
    gap: 20px; /* 画像と表の間の余白 */

    .table-list {
      width: 100%;
      flex: none;
      min-height: auto;

      dt, dd {
        width: 100%; /* 横並びを解除 */
        float: none;
        margin-left: 0;
        padding: 15px;
      }
      dt {
        background: #FFF9F3;
        border-bottom: none;
      }
      dd {
        border-bottom: 1px solid #E3E3E3;
      }
    }

    .table-photo {
      width: 100% !important;
      flex: none;
      height: 250px;
      
      img {
        height: 100% !important;
        border-radius: 15px;
      }
    }
  }

}

.section-access {
  .grid.is-6 {
    display: flex !important;
    gap: 30px;
    
    .column {
      width: 50%;
    }
    
    iframe {
      width: 100%;
      height: 450px;
      border-radius: 20px;
    }
  }

  @media screen and (max-width: 767px) {
    .grid.is-6 {
      display: flex !important;
      flex-direction: column-reverse; /* ★Googleマップ(右側のcolumn)を上に配置 */
      gap: 20px;

      .column {
        width: 100% !important;
        display: flex;
        flex-direction: column; /* 左側のcolumn内（画像と表）を縦に並べる */
      }

      /* Googleマップ(iframe)の調整 */
      iframe {
        height: 300px; /* スマホで見やすい高さに */
        margin-bottom: 0;
      }

      /* イメージ画像(map.png)の調整 */
      .column img {
        width: 100%;
        height: auto;
        order: -1; /* ★表より上に配置 */
        margin-bottom: 20px;
      }

      /* 表の調整 */
      .table-list.is-s {
        width: 100%;
        dt, dd {
          width: 100%;
          float: none;
          padding: 15px;
        }
        dt {
          background: #FFF9F3;
          border-bottom: none;
        }
      }
    }
  }
}

.section-feature .grid.is-6 {
  display: flex;
  justify-content: space-between;
  gap: 4%; /* カード同士の横の隙間 */
}

.section-feature .grid.is-6 .column.card {
  width: 48%; /* 2カラムで並べる */
}

@media screen and (max-width: 767px) {
  .section-feature .grid.is-6 {
    display: block !important; /* グリッド/フレックスを解除 */
    width: 100%;
  }

  .section-feature .grid.is-6 .column.card {
    width: 100% !important; /* 横幅いっぱいに広げる */
    max-width: 100% !important;
    margin-bottom: 24px !important; /* カード同士の縦の隙間 */
  }

  .section-feature .grid.is-6 .column.card:last-child {
    margin-bottom: 0 !important;
  }
}