/* =========================================
   レスポンシブデザイン（メディアクエリ）
   デバイスの画面サイズに応じたレイアウト調整
   ========================================= */

/* タブレット・小さめのPC向け（992px以下） */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.8rem;
    }

    .section-container {
        flex-direction: column;
    }
}

/* スマートフォン向け（768px以下） */
@media (max-width: 768px) {

    /* モバイル用のハンバーガーボタンを表示 */
    .nav-toggle {
        display: block;
    }

    /* PC用の横並びナビゲーションを、画面外(左)に隠れた縦並びメニューに変更する */
    .nav-list {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: var(--white);
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        transition: 0.4s ease-in-out;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    /* ハンバーガーボタン押下時（activeクラス付与時）、メニューを画面にスライドインさせる */
    .nav-list.active {
        left: 0;
    }

    /* ハンバーガーアイコンを一旦透明にし、疑似要素を使って ✕ 印（バツ）に変形させる */
    .nav-toggle.active .hamburger {
        background-color: transparent;
    }

    .nav-toggle.active .hamburger::before {
        transform: rotate(45deg);
        top: 0;
    }

    .nav-toggle.active .hamburger::after {
        transform: rotate(-45deg);
        top: 0;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    /* スワイプテキストが改行されないようにする */
    .scroll-text {
        white-space: nowrap;
    }

    .info-list {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .info-list dt {
        margin-top: 10px;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    /* リンクが不格好に改行されないようにする */
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 15px;
    }

    .footer-links a {
        white-space: nowrap;
    }

    /* メニュー表の表示崩れ対策 */
    .menu-table th,
    .menu-table td {
        padding: 12px 10px;
        font-size: 0.9rem;
    }

    /* 種類列は一行にする */
    .menu-table th:nth-child(1),
    .menu-table td:nth-child(1) {
        white-space: nowrap;
    }

    /* 料金列で収まらない場合に {価格}<br>円 になるようにする */
    .menu-table td.price {
        word-break: break-all;
        /* 文字幅が足りないときに数字で折れるのを許容する */
    }

    .price-unit {
        display: inline-block;
        /* 「円」「円〜」が単語として扱われ、収まらない場合に改行される */
    }

    /* 設備タグをスマホで2列表示にする */
    .facility-tags {
        grid-template-columns: repeat(2, 1fr);
    }
}