/* --- ダークモード全体設定 --- */
body { 
    font-family: sans-serif; 
    line-height: 1.6; 
    color: #e0e0e0; /* 文字色は少しグレーがかった白 */
    margin: 0; 
    padding: 0; 
    background-color: #121212; /* 背景は黒 */
}
.wrapper { 
    max-width: 900px; 
    margin: 0 auto; 
    background-color: #1a1a1a; /* ラッパーは少しだけ明るい黒 */
    box-shadow: 0 0 20px rgba(0,0,0,0.5); 
}

/* --- ヘッダー・メニュー --- */
header { text-align: center; background-color: #000; }
header img { width: 100%; display: block; }

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: 15px 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; }

/* --- メインコンテンツ --- */
.container { padding: 20px; text-align: center; }
.main-title { 
    font-size: 1.8rem; 
    color: #d4af37; /* タイトルもゴールド */
    background-color: #262626; 
    padding: 15px; 
    margin: 25px auto; 
    border: 2px solid #d4af37; 
    border-radius: 8px; 
    display: inline-block; 
}
.furo-content { text-align: center; padding: 20px; }
.gallery-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 20px; }
.responsive-img { width: 45%; max-width: 400px; height: auto; display: block; margin: 10px auto; border-radius: 8px; border: 1px solid #444; }
.text-caption { margin-bottom: 0px; font-size: 0.9rem; color: #aaa; }

/* --- フッター --- */
.site-footer { background-color: #000; padding: 20px; text-align: center; margin-top: 30px; font-size: 0.85rem; color: #888; }
.footer-title { font-weight: bold; font-size: 1rem; margin: 0 0 5px 0; color: #d4af37; }
.footer-info p { margin: 0; }
.footer-url { margin-top: 10px; font-weight: bold; color: #d4af37; }

/* --- スマホ対応 --- */
@media (max-width: 600px) {
    nav li { flex: 1 1 50%; }
    .responsive-img { width: 90%; }
}
/* --- 予約リンクの装飾 --- */
.booking-links {
    margin-bottom: 5px !important;
}

.booking-links a {
    color: #d4af37;        /* 文字色（フッターに合わせて黄色にしました） */
    text-decoration: none; /* 下線を消す */
    margin-right: 15px;    /* 右側の余白を少し開ける */
    font-weight: bold;     /* 太字にする */
}

/* マウスを乗せた時に少しだけ色を変える（お好みで） */
.booking-links a:hover {
    text-decoration: underline;
    color: #ffffff;
}
/* --- 予約リンクを四角いボタン風にする --- */
.booking-links {
    margin-top: 15px; /* 上との隙間 */
    margin-bottom: 20px;
}

.booking-links a {
    display: inline-block;          /* これが重要：リンクを箱にする */
    padding: 10px 20px;             /* ボタンの太さ */
    margin: 5px;                    /* ボタン同士の隙間 */
    color: #d4af37;                 /* 文字色は黄色 */
    border: 1px solid #d4af37;      /* 枠線も黄色 */
    border-radius: 5px;             /* 角を少し丸くする */
    text-decoration: none;          /* 下線を消す */
    font-weight: bold;
    transition: all 0.3s;           /* マウスを乗せた時の動きを滑らかに */
}

/* マウスを乗せた時のデザイン（反転） */
.booking-links a:hover {
    background-color: #d4af37;      /* 背景を黄色に */
    color: #000;                    /* 文字を黒に */
}