/* --- 1. 最重要：はみ出し防止の土台 --- */
* {
    box-sizing: border-box;
    /* 枠線や余白を幅計算に含める */
}

/* --- 2. 画面全体の強制固定 --- */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    /* ★これが重要：右側にはみ出したものを強制的に隠す */
}


/* --- 2. 基本設定 --- */
body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    background-color: #121212;
    overflow-x: hidden;
    /* ★【重要】これが横スクロールを強制的に禁止します */
}

.wrapper {
    max-width: 900px;
    width: 100%;
    /* ★追加：画面幅に合わせて可変にする */
    margin: 0 auto;
    background-color: #1a1a1a;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* --- 3. 画像のルール --- */
img {
    max-width: 100%;
    /* 親枠からはみ出さない */
    height: auto;
    /* 縦横比を維持 */
    display: block;
    /* 下の隙間を消す */
}



/* --- 2. ヘッダー・メニュー (変更なし) --- */
nav {
    background-color: #262626;
    border-bottom: 3px solid #d4af37;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

nav li {
    flex: 1 1 33%;
    text-align: center;
    box-sizing: border-box;
}

nav a {
    display: block;
    padding: 3px 5px;
    color: #d4af37;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    border: 1px solid #444;
    box-sizing: border-box;
}

nav a:hover {
    background-color: #333;
    text-decoration: underline;
}

.custom-header {
    background: linear-gradient(to bottom, #2b4570, #14213d);
    color: #ffffff;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000;
}

.custom-header .logo {
    font-family: sans-serif;
    font-size: 26px;
    font-weight: bold;
    text-shadow: 2px 2px 0 #000;
    white-space: nowrap;
}

.custom-header .tel-number {
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
    margin-left: 20px;
}

.main-title {
    text-align: center;
    /* 文字を中央揃え */
    background-color: #222;
    /* サイトの背景に合わせたダークグレー */
    color: #ffffff;
    /* 文字色は白 */
    padding: 2px;
    /* 枠内の余白 */
    margin: 0px auto 0px auto;
    /* 上下の余白と、左右中央揃え */
    border-radius: 10px;
    /* 角を丸くする設定 */
    border: 2px solid #ae8f00;
    /* アリスの里のテーマカラーであるゴールドの枠線 */
    max-width: 300px;
    /* 広がりすぎないように最大幅を制限 */
    font-size: 1.0rem;
    /* 見出しとして目立つサイズ */
    font-weight: bold;
    /* --- ↓ここを追記（重要）↓ --- */
    display: block;
    /* <a>タグをブロック要素にする */
    text-decoration: none;
    /* 下線を消す */
}

/* マウスを乗せた時の動き（お好みで追加してください） */
.main-title:hover {
    background-color: #333;
    /* マウスを乗せると少し色が明るくなる */
    cursor: pointer;
}

/* --- 3. 部屋紹介エリア (ここを新しく整理しました) --- */
.main-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0px;
}

/* --- 1. 部屋紹介エリア（整理して統一） --- */
.room-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 10px 0;
    /* ←ここを10pxにすることで、行間が詰まります */
}

/* スマホ・タブレット対応（ここでまとめて管理） */
@media (max-width: 900px) {
    .room-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 650px) {
    .room-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .room-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 2. カードのデザイン --- */
.room-card {
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px;
    /* 余白を少し小さくしました */
    background: #000000;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}

.room-card p {
    color: #ffffff;
    font-size: 1.0rem;
    margin: 5px 0 0 0;
}

/* --- 1. 画像を入れる枠（変更なし） --- */
.img-box {
    width: 80%;
    height: 140px;
    margin: 10px auto;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background-color: #333;
}

/* --- 2. 画像の基本設定（常にスライドさせる） --- */
.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    /* 最初は全部透明 */
    transition: opacity 0.5s ease;
    /* ふわっと切り替える */

    /* Chrome対応：初期状態から常に動かしておく */
    animation: slide-anim 12s infinite;
}

/* --- 3. 画像ごとのタイミングをChromeに明確に伝える（重要） --- */
/* A. 初期状態（マウスなし）： img-1を表示、2と3は非表示 */
.img-box .img-1 {
    opacity: 1;
}

.img-box .img-2 {
    opacity: 0;
}

.img-box .img-3 {
    opacity: 0;
}

/* B. アニメーションのタイミングを画像ごとに完全に指定 */
.img-box .img-1 {
    animation-name: none;
}

/* 初期表示はアニメーションなし */
.img-box .img-2 {
    animation-delay: 6s;
}

/* 4秒後にアニメーション開始 */
.img-box .img-3 {
    animation-delay: 15s;
}

/* 8秒後にアニメーション開始 */

/* --- 4. 【重要】マウスが乗った時の新しい動作 --- */
/* Chrome対応：マウスが乗ったら、全画像のアニメーションを一時停止する */
.img-box:hover img {
    animation-play-state: paused !important;
}

/* --- 5. アニメーションの動きの定義 --- */
@keyframes slide-anim {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.site-footer {
    background-color: #000;
    padding: 15px;
    text-align: center;
    margin-top: 20px;
    font-size: 0.8rem;
    color: #888;
}

/* 画像を左右反転させるクラス */
.flip-horizontal {
    transform: scaleX(-1);
    /* 横方向の縮尺を-1倍にする＝反転 */
    /* 古いIE向け（必要であれば） */
    -ms-transform: scaleX(-1);
    /* 古いWebkitブラウザ向け（必要であれば） */
    -webkit-transform: scaleX(-1);
}

.tuna-wrapper {
    display: flex;
    /* Flexboxを使う */
    justify-content: center;
    /* 左右の中央寄せ */
    align-items: center;
    /* 上下の中央寄せ（必要に応じて） */
    margin: 20px auto;
    /* 上下に20pxの余白を作り、左右は自動調整 */
}

.responsive-img {
    max-width: 500px;
    /* 最重要：親要素（枠）の幅を超えないようにする */
    height: auto;
    /* 縦横比を維持して縮小する */
    display: block;
    /* 画像下の隙間を消し、中央寄せしやすくする */
    margin: 0px auto;
    /* 画像の上下に少し余白を作り、中央に配置 */
}

/* --- サイズを制限したい画像専用の設定 --- */
.furo-content {
    max-width: 500px;
    /* ここで最大幅（500px）を指定 */
    width: 100%;
    /* スマホで見るときは自動で縮小 */
    margin: 15px auto;
    text-align: center;
}

/* ギャラリー全体の設定 */
.gallery-container {
    width: 100%;
    /* 親要素の幅いっぱいに広げる */
    display: flex;
    /* 画像を横並びにする準備 */
    flex-wrap: wrap;
    /* 画面幅が狭くなったら自動で折り返す */
    justify-content: center;
    /* 追加：画像を中央に寄せる */
    text-align: center;
    /* 追加：文字を中央に寄せる */
    gap: 10px;
    /* 画像同士の隙間 */
    box-sizing: border-box;
    /* 余白計算を正確にする */
    overflow: hidden;
    /* 万が一はみ出しても隠す */
}

/* ギャラリー内の見出しと文章を強制的にフル幅にする */
.gallery-container h2,
.gallery-container p {
    width: 100%;
    /* 幅を親枠いっぱいに広げる */
    margin: 10px auto;
    /* 上下の余白 */
}

/* ギャラリー内の画像の設定（重要！） */
.gallery-container img {
    max-width: 100%;
    /* ★ここが最重要：親要素（コンテナ）の幅を超えない */
    height: auto;
    /* 縦横比を維持 */
    flex: 1 1 300px;
    /* 画面幅に応じて柔軟にサイズ調整（300pxが最小幅の目安） */
    object-fit: cover;
    /* 画像を綺麗に枠に収める */
}

/* 親コンテナ：横並び設定 */
.layout-container {
    display: flex;
    flex-wrap: wrap;
    /* 幅が足りなくなったら自動で縦並びに切り替える */
    justify-content: center;
    /* 中央に寄せる */
    gap: 20px;
    /* 各要素の間の隙間 */
    margin: 20px 0;
}

/* 各エリアの設定 */
.layout-item {
    flex: 1 1 300px;
    /* 最小幅300px、PCでは横に広がる */
    max-width: 400px;
    /* PCで見ても広がりすぎないように制限 */
    text-align: center;
    box-sizing: border-box;
}

/* 施設情報・アクセスのレイアウト */
.info-container {
    background-color: #000;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    line-height: 1.6;
}

.info-item {
    margin-bottom: 15px;
}

.info-title {
    font-weight: bold;
    color: #ae8f00;
    margin-bottom: 5px;
    border-bottom: 2px solid #ae8f00;
}

.access-detail {
    font-size: 0.9em;
    padding-left: 10px;
}
/* --- 6枚スライド専用（新規作成：他の場所には影響しません） --- */
.room-slider {
  width: 100%;
  height: 200px; /* 必要であれば高さを調整してください */
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #333;
}

.room-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: room-fade 18s infinite;
}

/* 6枚のタイミングをずらす */
.room-slider img:nth-child(1) { animation-delay: 0s; }
.room-slider img:nth-child(2) { animation-delay: 3s; }
.room-slider img:nth-child(3) { animation-delay: 6s; }
.room-slider img:nth-child(4) { animation-delay: 9s; }
.room-slider img:nth-child(5) { animation-delay: 12s; }
.room-slider img:nth-child(6) { animation-delay: 15s; }

/* マウスホバーで停止 */
.room-slider:hover img {
  animation-play-state: paused;
}

@keyframes room-fade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  16% { opacity: 1; }
  21% { opacity: 0; }
  100% { opacity: 0; }
}
/* --- 特別なプランを強調する囲み枠 --- */
.highlight-box {
    background-color: #1a1a1a; /* 少し背景と差をつける濃いグレー */
    border: 2px solid #d4af37; /* サイトのテーマカラー（ゴールド）の枠線 */
    border-radius: 10px;
    padding: px;
    margin: 5px auto;
    max-width: 600px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* 少し浮かせる影 */
}

/* 中の文字を少し大きく、強調する */
.highlight-box p {
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0; ; ; /* ★重要：ここで段落ごとの余白をゼロにします */
    line-height: 1.4; /* ★重要：行間を少し詰めることで高さを抑えます */
}