/* access.css - アクセスページ専用スタイル */
/* 背景は共通スタイル（style.css）の設定を維持します */
.page-hero.access-hero {
    position: relative;
    height: 90vh; /* 必要に応じて調整 */
    background: url('images/gaikan.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
/* メイン全体の余白 */
.access-page {
    padding: 4rem 0;
}
  
/* 交通案内セクション（公共交通機関・お車） */
.transport-section,
.car-section {
    padding: 2rem 1rem;
    background-color: #fff;
}
.transport-section h2,
.car-section h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #333;
}

/* ※従来のテキストボックスレイアウト（必要に応じて非表示にするか削除）*/
/*
.transport-boxes,
.car-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.transport-box,
.car-box {
    background-color: #f7f7f7;
    padding: 1.5rem;
    border-radius: 8px;
    flex: 1 1 300px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.transport-box h3,
.car-box h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: #333;
}
.transport-box p,
.car-box p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #555;
}
*/

/* 新規追加：画像表示用スタイル */
/* 公共交通機関でお越しの方用の画像 */
.transport-image img,
.car-image img {
    width: 100%;              /* コンテナ幅に合わせて拡大 */
    height: 432px;
    max-width: 600px;         /* 必要に応じて最大幅を設定 */
    aspect-ratio: 3 / 2;       /* 3:2 の比率（600px × 400px 相当）を維持 */
    object-fit: cover;        /* トリミングしてアスペクト比を保持 */
    border-radius: 8px;       /* 角丸 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);  /* 影 */
    display: block;
    margin: 0 auto;           /* 中央寄せ */
}


/* 既存のアクセス情報 */
.access {
    padding: 2rem 1rem;
    background-color: #f7f7f7;
    margin-top: 2rem;
}
.access h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    color: #333;
}
.map {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto 2rem;
    height: 400px;
}
.map iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.address {
    font-size: 1rem;
    line-height: 1.8;
    text-align: center;
}
.address p {
    margin-bottom: 1rem;
}

/* ======================================= */
/* 一般のレスポンシブ対応 */

/* For screens 768px and below */
@media (max-width: 768px) {
    .access-page {
        padding: 2rem 0;
    }
    .transport-section,
    .car-section {
        padding: 1.5rem 1rem;
    }
    .transport-section h2,
    .car-section h2 {
        font-size: 1.5rem;
    }
    /* 画像表示エリアはコンテナ幅100% のまま */
    .transport-image,
    .car-image {
        max-width: 100%;
    }
    .access h2 {
        font-size: 1.8rem;
    }
    .map {
        height: 250px;
    }
    .address {
        font-size: 0.9rem;
    }
}

/* For screens 480px and below */
@media (max-width: 480px) {
    .transport-section,
    .car-section,
    .access {
        padding: 1.5rem 0.5rem;
    }
    /* 画像表示エリアの余白調整 */
    .transport-image,
    .car-image {
        margin: 1.5rem auto;
    }
    .transport-section h2,
    .car-section h2 {
        font-size: 1.4rem;
    }
    .access h2 {
        font-size: 1.6rem;
    }
    .map {
        width: 95%;
        height: 200px;
    }
    .address {
        font-size: 0.85rem;
    }
}

/* ======================================= */
/* Orientation specific adjustments */

/* ----- For screens 1024px and below ----- */
/* 1024px 以下 - Portrait */
@media (max-width: 1024px) and (orientation: portrait) {
    .access-page {
        padding: 3.5rem 0;
    }
    .transport-section,
    .car-section {
        padding: 1.8rem 1rem;
    }
    .transport-section h2,
    .car-section h2 {
        font-size: 1.7rem;
    }
    .map {
        height: 350px;
    }
    .address {
        font-size: 0.95rem;
    }
}
/* 1024px 以下 - Landscape */
@media (max-width: 1024px) and (orientation: landscape) {
    .access-page {
        padding: 3.8rem 0;
    }
    .transport-section,
    .car-section {
        padding: 1.9rem 1.2rem;
    }
    .transport-section h2,
    .car-section h2 {
        font-size: 1.8rem;
    }
    .map {
        height: 370px;
    }
    .address {
        font-size: 1rem;
    }
}

/* ----- For screens 768px and below ----- */
/* 768px 以下 - Portrait */
@media (max-width: 768px) and (orientation: portrait) {
    /* 基本768px以下設定を維持 */
    .access-page {
        padding: 2rem 0;
    }
    .transport-section,
    .car-section {
        padding: 1.5rem 1rem;
    }
    .transport-section h2,
    .car-section h2 {
        font-size: 1.5rem;
    }
    .map {
        height: 250px;
    }
    .address {
        font-size: 0.9rem;
    }
}
/* 768px 以下 - Landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .access-page {
        padding: 2.2rem 0;
    }
    .transport-section,
    .car-section {
        padding: 1.6rem 1rem;
    }
    .transport-section h2,
    .car-section h2 {
        font-size: 1.55rem;
    }
    .map {
        height: 260px;
    }
    .address {
        font-size: 0.92rem;
    }
}

/* ----- For screens 480px and below ----- */
/* 480px 以下 - Portrait */
@media (max-width: 480px) and (orientation: portrait) {
    .transport-section,
    .car-section,
    .access {
        padding: 1.5rem 0.5rem;
    }
    .transport-section h2,
    .car-section h2 {
        font-size: 1.4rem;
    }
    .access h2 {
        font-size: 1.6rem;
    }
    .map {
        width: 100%;
        height: 200px;
    }
    .address {
        font-size: 0.85rem;
    }
}
/* 480px 以下 - Landscape */
@media (max-width: 480px) and (orientation: landscape) {
    .transport-section,
    .car-section,
    .access {
        padding: 1.6rem 0.5rem;
    }
    .transport-section h2,
    .car-section h2 {
        font-size: 1.45rem;
    }
    .access h2 {
        font-size: 1.65rem;
    }
    .map {
        width: 100%;
        height: 210px;
    }
    .address {
        font-size: 0.87rem;
    }
}
/* モバイル対応: 幅480px以下では画像サイズを自動調整 */
@media (max-width: 480px) {
    .transport-image img,
    .car-image img {
      width: 100%;;
      object-fit: cover;
      height: 450px;
    }
  }
/* 768px以下の場合のサービス画像のレスポンシブ対応 */
@media (max-width: 768px) {
    .transport-image img,
    .car-image img {
      width: 100%;
      height: 432px;
      object-fit: cover;
      height: auto;
    }
  }