/* Google FontsからMerriweatherをインポート */
@import url('https://fonts.googleapis.com/css2?family=Petit Formal Script:wght@400;700&display=swap');

/* plan.html 用の特定のスタイル */
.header-container {
    background-color: rgba(115, 2, 2, 0.884);
    /* 初期状態の背景色を不透過に */
}

/* テーブルのスタイル */
.carousel-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

.carousel-table th,
.carousel-table td {
    border: 1px solid #73020218;
    padding: 10px;
    text-align: center;
    transition: background-color 0.3s;
    /* 背景色の変化をスムーズに */
}

.carousel-table th {
    background-color: #f4f4f4;
    font-size: 14px;
    color: #730202;
}

.carousel-table td {
    font-size: 16px;
    color: #730202;
    font-weight: normal !important;
    /* デフォルトで太字を解除 */
}

.carousel-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.carousel-table td:hover:not(.no-hover) {
    background-color: #e48e44;
    /* セルのホバー時の背景色 */
    color: #fff;
}

/* `highlight`クラスを使用して特定のセルの背景色を変更 */
.highlight {
    background-color: #f4f4f4 !important;
    /* `!important`を追加して上書き */
}

.carousel-table td.bold {
    font-weight: bold !important;
    /* 料金を太字に */
}

.carousel-table th.no-bold,
.carousel-table td.no-hover {
    font-size: 13px;
    /* 必要に応じてフォントサイズを調整 */
}

/* ボタンのスタイル */
.pricing-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.pricing-buttons button {
    width: 150px;
    background-color: #ffffff;
    color: #730202;
    border: none;
    padding: 5px 5px;
    margin: 0 -1px;
    font-size: 12px;
    cursor: pointer;
    border: solid 1px #73020281;

    transition: background-color 0.3s;
    text-align: center;
    /* テキストを中央揃えにする */

}

.pricing-buttons button:hover {
    background-color: #730202;
    color: #fff;
}

.pricing-buttons button.active {
    background-color: #730202;
    color: #fff;
}

.pricing-buttons button .en-text {
    font-size: 11px;
    /* 英語のフォントサイズ */
    margin-top: -11px;
    margin-bottom: 2px;
    font-family: 'Oswald', sans-serif;
}

.pricing-buttons button .jp-text {
    font-size: 12px;
    /* 日本語のフォントサイズ */
    letter-spacing: 0.1em;
    font-weight: bold;
    margin-top: 2px;
    color: #730202;
    font-family: 'Noto Sans JP', sans-serif;
}

.pricing-buttons button.active .jp-text {
    color: #fff;
    /* アクティブなボタンの日本語表記の色を調整 */
}

.pricing-buttons button:hover .jp-text {
    color: #fff;
}

/* 部屋写真のスタイル */
.room-photo {
    position: relative;
    text-align: center;
}

/* メインカルーセルのスタイル */
#main-carousel,
#main-carousel-luxury,
#main-carousel-moderate,
#main-carousel-standard,
#main-carousel-budget {
    width: 100%;
    max-width: 650px;
    /* サイズを大きく変更 */
    height: auto;
    /* 高さを指定 */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin: 0 auto 20px auto;
    /* 中央に配置 */
}

#main-carousel .splide__slide img {
    width: 100%;
    height: 100%;
    /* 親の高さに合わせる */
    object-fit: cover;
    /* 画像が縦横比を保ちながらカルーセルに収まるように */
}

#thumbnail-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    /* 中央に配置 */
}

.splide__slide {
    opacity: 0.6;
}

.splide__slide.is-active {
    opacity: 1;
}

.splide__slide img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

/* サムネイルカルーセルのスタイル */
#thumbnail-carousel .splide__slide img {
    cursor: pointer;
    border: none !important;
    /* すべての枠線を削除 */
    transition: transform 0.2s, border 0.2s !important;
}

#thumbnail-carousel .splide__slide.is-active img {
    border: none !important;
    /* 選択されたサムネイルの枠線を削除 */
}

#thumbnail-carousel .splide__slide img:hover {
    transform: scale(1.1);
    border: none !important;
    /* ホバー時の枠線を削除 */
}

#main-carousel-luxury .splide__slide img,
#thumbnail-carousel-luxury .splide__slide img,
#main-carousel-moderate .splide__slide img,
#thumbnail-carousel-moderate .splide__slide img,
#main-carousel-standard .splide__slide img,
#thumbnail-carousel-standard .splide__slide img,
#main-carousel-budget .splide__slide img,
#thumbnail-carousel-budget .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 注意書きのスタイル */
.note {
    margin-top: 10px;
    font-size: 11px;
    color: #730202;
    text-align: center;
    margin: auto;
    padding: 10px 0 0 0;
}

.extra-note {
    margin-top: 15px;
    font-size: 13px;
    font-weight: bold;
    color: #730202;
    letter-spacing: 0.1em;
    text-align: center;
    padding: 5px 0 20px 0;
}

/* コンテンツ全体のスタイル */
.container {
    max-width: 1200px;
    /* コンテナの最大幅を設定 */
    margin: 0 auto;
    /* 中央揃え */
    padding: 0 20px;
    /* コンテナの左右に余白を追加 */
}

.room-container {
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 40px 0;
}

.room-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.room-photo,
.room-pricing {
    flex: 1;
    margin: 20px;
    min-width: 300px;
    /* 確実に横並びになるように最小幅を設定 */
}

.room-pricing {
    max-width: 600px;
}

/* section-title クラスに対するスタイル */
.section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    letter-spacing: 0.1em;
    color: #730202;
    text-align: center;
    text-transform: uppercase;
    padding-top: 100px;
    /* 上部の余白を追加 */
    margin: 0 20px 10px 20px;
    /* 左マージンを追加 */
}

.section-subtitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #730202;
    text-align: center;
    margin-top: -10px;
    /* 上のマージンを調整してスペースを減らす */
}

/* ZALA Suite のスタイル */
.room-subtitle {
    max-width: 1200px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 46px;
    color: #730202;
    text-align: left;
    margin: 0 20px 0 20px;
    /* 左マージンを追加 */
}

.room-subtitle span {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    color: #730202;
    display: block;
    margin-top: -10px;
}

#payment {
    padding: 10px;
}

.payment-title {
    font-size: 21px;
    font-weight: bold;
    padding: 20px 0 15px;
}

.payment-datails {
    background: rgba(255, 255, 255, 0);
    border: solid 1px #730202;
    border-radius: 0 5px 5px;
    padding: 0 20px 10px;
    font-size: 15px;
    margin: 0 10px 15px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    position: relative;

    @media (max-width:768px) {
        font-size: 3vw;
    }
}

.payment-imgs {
    display: flex;
    justify-content: center;
}

.payment-imgs img {
    width: 100px;
    box-shadow: none;

    @media (max-width:768px) {
        width: 19%;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .room-container {
        width: 100%;
        padding: 20px;
    }

    .room-subtitle {
        text-align: center;
        /* スマホ時は中央揃え */
        font-size: 36px;
    }

    .room-subtitle span {
        text-align: center;
        /* スマホ時は中央揃え */
    }

    .room-subtitle {
        font-size: 36px;
    }

    .pricing-buttons button .en-text {
        font-size: 10px;
        /* 英語のフォントサイズをさらに小さく */
    }

    .pricing-buttons button .jp-text {
        font-size: 10px;
        /* 日本語のフォントサイズをさらに小さく */
    }
}