@charset "utf-8";

:root {
	--primary-color: #003366;
	--accent-color: #d4a017;
	--bg-color: #f8f9fa;
	--text-color: #333;
}

body {
	margin: 0;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background-color: var(--bg-color);
	color: var(--text-color);
	overflow-x: hidden;
}

/* パララックス設定 */
.bg-fixed-section {
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

/* ヘッダー */
header {
	background: rgba(255, 255, 255, 0.95);
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 70px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.logo { font-weight: bold; font-size: 1.1rem; color: var(--primary-color); }

/* PCメニュー */
.pc-menu { display: block; }
.pc-menu > ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 5px; }
.pc-menu > ul > li { position: relative; padding: 20px 10px; }
.pc-menu a { text-decoration: none; color: var(--text-color); font-weight: 600; font-size: 0.9rem; }
.pc-menu .submenu {
	position: absolute; top: 100%; left: 0; background: white; width: 250px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: none; list-style: none; padding: 10px 0;
	border-top: 3px solid var(--accent-color);
}
.pc-menu .submenu li a { display: block; padding: 10px 20px; font-weight: normal; font-size: 0.85rem; border-bottom: 1px solid #f0f0f0; }
.pc-menu .submenu li a:hover { background: #f8f8f8; color: var(--accent-color); }
.pc-menu li:hover .submenu { display: block; }

.menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; }

/* SNSフローティングバナーの設定 */
.sns-float {
	position: fixed;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 15px;
	z-index: 2000;
}
.sns-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	transition: 0.3s;
	font-size: 1.5rem;
}
.sns-icon:hover { transform: scale(1.1); }
.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
/* X（旧Twitter）アイコン：白背景＋黒ロゴの設定 */
.x-twitter { 
	background: #ffffff !important; /* 背景を白に強制 */
	border: 1px solid #000000 !important; /* 縁取りを黒に */
	box-sizing: border-box; 
}

/* 中の「X」ロゴの色を黒に強制指定 */
.x-twitter i {
	color: #000000 !important;
	display: block; /* 確実に表示させるため */
}

/* スマホ時のSNSアイコン配置（ボトムナビの上） */
@media (max-width: 992px) {
	.sns-float {
		top: auto;
		bottom: 80px; 
		right: 15px;
		transform: none;
		flex-direction: row; 
	}
	.sns-icon { width: 45px; height: 45px; font-size: 1.3rem; }
}

/* スマホ用メニュー設定 */
.mobile-side-menu { position: fixed; top: 0; right: -100%; width: 85%; height: 100%; background: white; z-index: 2000; transition: 0.4s; overflow-y: auto; }
.mobile-side-menu.active { right: 0; }
.mobile-side-menu .parent-link { background: #f0f4f8; padding: 15px 20px; font-weight: bold; border-bottom: 1px solid #ddd; }
.mobile-side-menu .child-links a { display: block; padding: 12px 30px; text-decoration: none; color: var(--text-color); border-bottom: 1px solid #eee; font-size: 0.9rem; }

/* モバイルレスポンシブ（ティラノ対策） */
@media (max-width: 992px) {
	.pc-menu { display: none; }
	.menu-toggle { display: block; }
	.hero {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('../img_03_04_sp.jpg');height: 60vh; }
	.hero h1 { font-size: 2rem; }
	.bg-fixed-section { background-attachment: scroll; }
}

/* --- フッター（修正版） --- */
footer {
	background-color: #1a1a1a;
	color: #fff;
	padding: 50px 5% 20px;
	margin-top: 60px;
}

.footer-content {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
	justify-content: space-between;
}

.footer-info { flex: 1; min-width: 300px; }
.footer-info h2 {
	font-size: 1.4rem;
	margin-bottom: 20px;
	border-left: 4px solid var(--accent-color);
	padding-left: 15px;
}

.footer-links { flex: 1; min-width: 200px; }
.footer-links h3 { font-size: 1rem; margin-bottom: 15px; color: var(--accent-color); }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #ccc; text-decoration: none; font-size: 0.9rem; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

/* --- コピーライト部分の修正（スマホのBottom Nav対応） --- */
.footer-bottom {
	background-color: #000;
	color: #888;
	text-align: center;
	/* 下部に十分な余白（30px）＋デバイスごとのセーフエリアを確保 */
	padding: 20px 0 calc(30px + env(safe-area-inset-bottom));
	margin-top: 40px;
	border-top: 1px solid #333;
	font-size: 0.8rem;
	width: 100%;
	position: relative;
	z-index: 50;
}

/* フッター全体のコンテナにも余裕を持たせる */
footer {
	background-color: #1a1a1a;
	color: #fff;
	/* 下端の詰まりを防止 */
	padding: 60px 5% calc(40px + env(safe-area-inset-bottom));
	margin-top: 60px;
}

/* フッターの交通アクセスボタン装飾 */
.footer-access-btn {
	display: inline-block;
	margin-top: 15px !important;
	padding: 12px 25px !important;
	background-color: var(--accent-color) !important;
	color: white !important;
	text-decoration: none !important;
	border-radius: 5px;
	font-weight: bold;
	transition: 0.3s;
}
.footer-access-btn:hover {
	background-color: #b88a15 !important;
	transform: translateY(-2px);
}

/* --- ファットフッター（サイトマップ型）のデザイン --- */
footer {
	background-color: #1a1a1a;
	color: #fff;
	padding: 60px 5% 20px;
	margin-top: 60px;
}

.footer-content {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr; /* PCは4列 */
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
}

.footer-info h2 {
	font-size: 1.4rem;
	margin-bottom: 20px;
	border-left: 4px solid var(--accent-color);
	padding-left: 15px;
	color: #fff;
}

.footer-links h3 {
	font-size: 1.1rem;
	margin-bottom: 20px;
	color: var(--accent-color);
	border-bottom: 1px solid #333;
	padding-bottom: 10px;
}

.footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	margin-bottom: 12px;
}

.footer-links a {
	color: #ccc;
	text-decoration: none;
	font-size: 0.9rem;
	transition: 0.3s;
	display: flex;
	align-items: center;
	gap: 8px;
}

.footer-links a:hover {
	color: #fff;
	padding-left: 5px;
}

/* レスポンシブ対応 */
@media (max-width: 992px) {
	.footer-content { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.footer-content { grid-template-columns: 1fr; gap: 30px; }
}
/* --- 1. ボタンの重なりを解消する設定 --- */
.quick-nav {
	max-width: 1100px;
	/* marginの最初の数字を「20px」にすることで、上の画像との間に隙間を作ります */
	margin: 20px auto 50px; 
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	position: relative;
	z-index: 100;
}

/* --- 2. コピーライト（一番下）を見えるようにする設定 --- */
.footer-bottom {
	background-color: #000;
	color: #888;
	text-align: center;
	/* 下側に余白を作り、スマホのメニューバーに隠れないようにします */
	padding: 20px 0 calc(40px + env(safe-area-inset-bottom));
	margin-top: 40px;
	border-top: 1px solid #333;
	font-size: 0.8rem;
	width: 100%;
}

/* フッター全体も少し余裕を持たせる */
footer {
	background-color: #1a1a1a;
	color: #fff;
	padding: 60px 5% calc(20px + env(safe-area-inset-bottom));
	margin-top: 60px;
}
/* --------------------------------------------------
   開館状況バッジ用の色設定（全メッセージ・夜間対応版）
-------------------------------------------------- */

/* 1. 開館中（通常・夜間共通） */
.status-open {
    color: #28a745 !important; /* 緑 */
    font-weight: bold;
    font-size: 1.25rem;
    display: block;
    margin-top: 5px;
    line-height: 1.3;
}

/* 2. 閉館中・休館日 */
.status-closed {
    color: #dc3545 !important; /* 赤 */
    font-weight: bold;
    font-size: 1.25rem;
    display: block;
    margin-top: 5px;
    line-height: 1.3;
}

/* 3. 【追加】準備中（夜間開館前など） */
.status-preparing {
    color: #e67e22 !important; /* オレンジ */
    font-weight: bold;
    font-size: 1.15rem; /* 長いメッセージ用に少し小さく */
    display: block;
    margin-top: 5px;
    line-height: 1.3;
}

/* 共通：アイコンの調整 */
.status-open i, 
.status-closed i,
.status-preparing i {
    margin-right: 6px;
    font-size: 1.3rem;
    vertical-align: middle;
}

/* スマホ等でメッセージが長い場合の折り返し調整 */
@media (max-width: 600px) {
    .status-badge {
        padding: 12px 15px; /* 内側の余白を少し詰める */
        min-width: auto;     /* 幅固定を解除 */
        width: 90%;          /* 画面幅に合わせる */
    }
    #status-text {
        font-size: 1.1rem;   /* スマホでは文字サイズを微調整 */
    }
}
/* --- フッターのレスポンシブ表示の最終修正 --- */

/* 【1】1080px以下 〜 601pxまで：2列表示 */
@media (max-width: 1080px) {
    .footer-content {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2列 */
        gap: 30px 20px !important;
    }
}

/* 【2】600px以下：1列表示（スマホ最適化） */
@media (max-width: 600px) {
    .footer-content {
        display: grid !important;
        grid-template-columns: 1fr !important; /* ★ここで1列に強制する */
        gap: 25px !important;
    }

    .footer-info, .footer-links {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 文字がはみ出さないように調整 */
    .footer-content h3, 
    .footer-content h4 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }
}
/* ジャンプした時の位置を調整（ヘッダーの高さを考慮） */
[id] {
    scroll-margin-top: 80px; /* ヘッダーの高さに合わせて数値を調整してください */
}