/* css/price2.css - price2.html 専用スタイル (完全版) */

/* --- ルームグリッド 新カードデザイン --- */
.room-card-new {
    border: 1px solid #eee;          /* カードの枠線 */
    border-radius: 8px;             /* カードの角丸 */
    overflow: hidden;               /* 画像のはみ出し防止 */
    margin-bottom: 30px;            /* カード下のマージン */
    background-color: #fff;         /* カード背景色 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* カードに影を付ける */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー効果用トランジション */
    display: flex;                  /* 画像と情報を縦に並べる */
    flex-direction: column;
    height: 100%;                   /* 親の高さに合わせる（グリッドで高さを揃えるため） */
    cursor: pointer;                /* クリック可能を示すカーソル */
}
/* ホバーエフェクト */
.room-card-new:hover {
    transform: translateY(-5px);     /* 少し上に移動 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* 影を濃くする */
}

.room-card-new__image-wrapper {
    position: relative;             /* バッジなどの位置基準 */
    width: 100%;
    padding-top: 75%; /* アスペクト比 4:3 (画像の高さ / 幅 * 100) */
    overflow: hidden;
    background-color: #f0f0f0; /* 画像読み込み中の背景色 */
}

.room-card-new__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;             /* 画像をトリミングして表示 */
    transition: transform 0.5s ease; /* ホバー時の画像ズーム用 */
}

/* 画像ホバー時のズーム（任意。コメントアウト中） */
/*
.room-card-new:hover .room-card-new__image {
    transform: scale(1.05);
}
*/

/* Sweet Room バッジ */
.badge-sweet {
    position: absolute;
    top: 10px; /* バッジの位置を調整 */
    left: 10px; /* バッジの位置を調整 */
    background-color: #f39c12; /* バッジの背景色 */
    color: white; /* バッジの文字色 */
    padding: 5px 10px; /* バッジの内側の余白 */
    font-size: 12px; /* バッジのフォントサイズ */
    font-weight: bold;
    border-radius: 5px; /* バッジの角を丸める */
    z-index: 10; /* 画像の上に表示 */
    line-height: 1;
}


.room-card-new__info {
    padding: 15px;
    background-color: #fff;        /* 情報部分の背景色 */
    flex-grow: 1;                 /* 高さが可変の場合に余白を埋める */
    text-align: center;           /* テキスト中央揃え */
}

.room-card-new__number {
    font-size: 1.1rem;            /* 部屋番号のフォントサイズ */
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    /* --- フォント指定例 (必要ならコメント解除して調整) --- */
    /* font-family: 'Oswald', sans-serif; */
    /* font-weight: 400; */
}

.room-card-new__features {
    font-size: 0.9rem;             /* 特徴のフォントサイズ */
    color: #666;
    margin-bottom: 0;
    line-height: 1.4;
    /* --- フォント指定例 (必要ならコメント解除して調整) --- */
    /* font-family: 'Noto Sans JP', sans-serif; */
}

.room-card-new__features i {
    margin-right: 5px;             /* アイコンとテキストの間隔 */
    color: #aa8453;                /* アイコンの色 */
    font-size: 1rem;               /* アイコンサイズ */
    vertical-align: middle;       /* アイコンとテキストの垂直位置調整 */
    width: 1.2em; /* アイコン用のスペースを確保 */
    text-align: center;
}
.room-card-new__features span { /* 特徴テキストの折り返し調整用 */
    display: inline-block;
    margin-right: 8px; /* 特徴間のスペース */
}


/* --- 料金表セクション 部屋番号リンク --- */
.price-room-links {
    padding: 10px 0;
}

.price-room-link {
    display: inline-block; /* 横並びにする */
    margin: 5px 10px;      /* リンク間のマージン */
    text-decoration: none;
    color: #333;
    text-align: center;
    transition: opacity 0.3s ease;
    vertical-align: top;   /* 上揃え */
}

.price-room-link:hover {
    opacity: 0.7;
    text-decoration: none;
    color: #aa8453;
}

.price-room-thumb {
    display: block;        /* 画像をブロック要素にして改行 */
    width: 60px;           /* サムネイルの幅 */
    height: 45px;          /* サムネイルの高さ (4:3) */
    object-fit: cover;     /* 画像をトリミング */
    border-radius: 4px;    /* 角丸 */
    margin: 0 auto 5px auto; /* 中央揃えと下のマージン */
    border: 1px solid #ddd; /* 細い枠線 */
    background-color: #f0f0f0; /* 画像読み込み中の背景 */
}

.price-room-number {
    display: block;        /* 番号をブロック要素に */
    font-size: 0.9rem;
    font-weight: bold;
}

/* --- フィルターボタン --- */
.filter-button {
    /* 必要であればデフォルトスタイル調整 */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-selected {
    background-color: #AA8453 !important;
    color: #ffffff !important;
    border-color: #AA8453 !important;
}

/* --- Magnific Popup カスタムモーダル --- */
.custom-modal-content {
    position: relative;
    background: #fff;
    padding: 30px;
    width: auto;
    max-width: 900px; /* モーダルの最大幅 */
    margin: 20px auto;
    border-radius: 5px;
    color: #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex; /* PC用に画像と情報を横並びにする */
    flex-wrap: wrap; /* スマホでは折り返す */
    box-sizing: border-box;
}

/* モーダル内の左側 (画像エリア) */
.custom-modal-left {
    flex: 1 1 55%; /* 幅の比率 (PC) */
    padding-right: 15px; /* 右側に少し余白 */
    box-sizing: border-box;
    min-width: 0; /* flexアイテムの縮小問題を回避 */
}

/* モーダル内の右側 (情報エリア) */
.custom-modal-right {
    flex: 1 1 40%; /* 幅の比率 (PC) */
    padding-left: 15px; /* 左側に少し余白 */
    box-sizing: border-box;
    max-height: 70vh; /* 高さを制限してスクロール可能に */
    overflow-y: auto;
    min-width: 0; /* flexアイテムの縮小問題を回避 */
}

/* 画像表示エリア */
.modal-image-display img {
    display: block; /* 余計な隙間防止 */
    width: 100%;
    height: auto;
    max-height: 50vh; /* 画像の最大高さを制限 */
    object-fit: contain; /* 画像全体が見えるように */
    border: 1px solid #eee;
    margin-bottom: 10px;
    background-color: #f0f0f0; /* 画像読み込み中の背景 */
}

/* サムネイルコンテナ */
.modal-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* サムネイル間の隙間 */
    margin-bottom: 20px;
}

.modal-thumbnail-item img {
    width: 60px;
    height: 45px; /* 4:3 比率 */
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 3px;
    transition: border-color 0.3s ease;
    background-color: #f0f0f0; /* 画像読み込み中の背景 */
}

.modal-thumbnail-item img.active, /* 現在表示中の画像のサムネイル */
.modal-thumbnail-item img:hover {
    border-color: #aa8453;
}

/* 情報エリアのタイトル */
.modal-room-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #aa8453;
    margin-top: 0; /* 上マージン削除 */
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
     /* --- フォント指定例 (必要ならコメント解除して調整) --- */
    /* font-family: 'Oswald', sans-serif; */
}

/* 設備リストのヘッダー */
.modal-equipment-header {
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #555;
    /* --- フォント指定例 (必要ならコメント解除して調整) --- */
    /* font-family: 'Noto Sans JP', sans-serif; */
}

/* 設備リスト */
.modal-equipment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0; /* 下マージン追加 */
    font-size: 0.95rem;
    color: #444;
     /* --- フォント指定例 (必要ならコメント解除して調整) --- */
    /* font-family: 'Noto Sans JP', sans-serif; */
}

.modal-equipment-list li {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.modal-equipment-list li i {
    color: #aa8453;
    margin-right: 8px;
    width: 20px; /* アイコン幅固定 */
    text-align: center;
}

/* Magnific Popup標準の閉じるボタン調整 (任意) */
.mfp-close {
    color: #888 !important; /* 色調整 */
    font-size: 28px;       /* サイズ調整 */
    line-height: 1;
    padding: 5px;
    right: 5px;
    top: 5px;
}
.mfp-close:hover {
    color: #333 !important;
}


/* --- レスポンシブ (スマートフォン) --- */
@media (max-width: 767.98px) {
    /* カード関連 */
    .room-card-new__number {
        font-size: 1rem;
    }
    .room-card-new__features {
        font-size: 0.85rem;
    }

    /* 料金表リンク */
    .price-room-thumb {
        width: 50px;
        height: 37.5px;
    }
    .price-room-number {
        font-size: 0.8rem;
    }

    /* --- モーダルのスマホ表示調整 (レイアウト修正) --- */
    .custom-modal-content {
        display: block;         /* display:flex を解除し、通常のブロック要素に */
        padding: 15px;          /* 全体のパディング */
        max-height: 85vh;       /* 高さを画面の85%に制限 */
        overflow-y: auto;       /* 縦スクロールを可能に */
    }
    .custom-modal-left {
        width: 100%;            /* 幅を100%に */
        padding-right: 0;       /* 右パディング削除 */
        margin-bottom: 15px;    /* 画像と情報の間隔 */
        flex-basis: auto;       /* flex関連リセット */
    }
    .custom-modal-right {
        width: 100%;            /* 幅を100%に */
        padding-left: 0;        /* 左パディング削除 */
        max-height: none;       /* 高さ制限解除 */
        overflow-y: visible;    /* スクロールは親要素で行う */
        box-sizing: border-box;
        flex-basis: auto;       /* flex関連リセット */
    }
    .modal-image-display img {
        max-height: 45vh; /* スマホでは画像の最大高さを少し調整 */
    }
     .modal-room-title {
        font-size: 1.3rem; /* スマホ用にタイトルサイズ調整 */
    }
    .modal-equipment-header {
        font-size: 1rem; /* スマホ用に設備ヘッダーサイズ調整 */
    }
    .modal-equipment-list {
        font-size: 0.9rem; /* スマホ用に設備リストサイズ調整 */
    }
    .modal-thumbnails {
        justify-content: center; /* スマホではサムネイルを中央寄せ */
    }
    .modal-thumbnail-item img {
        width: 50px; /* スマホ用にサムネイル少し小さく */
        height: 37.5px;
    }

} /* End @media (max-width: 767.98px) */

/* --- Magnific Popup 閉じるボタンのスタイル調整 --- */
button.mfp-close { /* より具体的に button タグを指定してデフォルトスタイルを上書きしやすくする */
    font-size: 40px;       /* バツ印「×」のサイズを大きく */
    width: 44px;           /* ボタン全体の幅を確保 */
    height: 44px;          /* ボタン全体の高さを確保 */
    line-height: 44px;     /* 文字（×）を高さの中央に */
    right: 10px;           /* 右端からの距離 */
    top: 10px;             /* 上端からの距離 */
    color: #555 !important;  /* バツ印の色を少し濃く (必要なら !important) */
    background-color: rgba(255, 255, 255, 0.7); /* 半透明の白い円形背景を追加 */
    border-radius: 50%;    /* ボタンを円形にする */
    padding: 0;            /* 元々あるかもしれないパディングを削除 */
    text-align: center;    /* 文字を中央揃え */
    opacity: 0.8;          /* 少しだけ透明に (1で不透明) */
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
    overflow: hidden;      /* はみ出し防止 */
    cursor: pointer;
    border: none;          /* 元のボーダー削除 */
    outline: none;         /* クリック時の枠線削除 */
    -webkit-appearance: none; /* ブラウザ標準のスタイル解除 */
    -moz-appearance: none;
    appearance: none;
    display: block;        /* 表示を確実に */
    position: absolute;    /* 位置指定を確実に */
    z-index: 1046;         /* Magnific Popupの他の要素より手前に */
}

/* ホバー時（マウスカーソルを乗せた時）のスタイル */
button.mfp-close:hover {
    color: #000 !important;  /* ホバー時の色を黒に */
    background-color: rgba(255, 255, 255, 0.9); /* ホバー時の背景を少し濃く */
    opacity: 1;              /* 不透明にする */
}

/* もし既存の .mfp-close スタイルがあれば、上記で上書きされるか確認してください */
/* 場合によっては、既存のスタイルをコメントアウトするか削除する必要があるかもしれません */