@charset "UTF-8";

/* ======================================= */
/* 基本スタイル */
/* ======================================= */
html {
  scroll-behavior: smooth;
}
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #eee;
    color: #2A2A2A;
}

.container {
    width: 95%; 
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px 10px 10px 10px;
}

.top {
    padding: 0;
    background-image: url(../img/jazzbird_int_2.jpg);
    background-repeat: no-repeat;
    background-size: 240px;
    background-position: 98% 0%;
}
/* 共通：全体の見出しを少し整理 */
h2, h3 {
    margin: 0px 0 15px 0; /* 一旦すべて0にしてリセットすると制御しやすい */
}
p {
    margin: 0px 0 15px 0; /* 一旦すべて0にしてリセットすると制御しやすい */
}

hr { 
	height: 0.5px; 
	background-color: #333; 
	border: none; 
	margin: 30px 0 25px 0; 
}

/* ======================================= */
/* ヘッダー・ナビゲーション */
/* ======================================= */
header { width: 100%; }

.header-main {
    position: relative;
    height: 180px; 
    background-color: #cd4629; 
    background-image: url(../img/jazzbird.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 200%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.logo-area { 
	margin: 20px 0 0 20px; 
}
.logo h1 { 
	margin: 0; 
	font-size: 2em; 
	color: #1a1a1a; 
	line-height: 1.2; 
	letter-spacing: 1px; 
}
.header-main p { 
	margin: 5px 0 0 0; 
	font-size: 0.9em; 
	color: #333; 
	font-weight: bold; 
	padding: 2px 0; 
	display: inline-block; 
}

nav { 
	background-color: #a2331b; 
	width: 100%; 
	border-top: 1px solid rgba(255,255,255,0.2); 
}
nav ul { 
	list-style: none; 
	padding: 0; 
	margin: 0; 
	display: flex; 
	justify-content: center; 
	flex-wrap: wrap; 
}
nav a { 
	color: white; 
	text-decoration: none; 
	display: block; 
	padding: 15px 20px; 
	font-weight: bold; 
	font-size: 0.85em; 
	transition: all 0.2s; 
	text-align: center; 
}
header nav ul li.current-page a { 
	color: gold !important; 
}

/* ======================================= */
/* メインコンテンツ共通 */
/* ======================================= */
.headcopy { 
	margin: 0; 
	width: 70%; 
	text-align: left; 
}
address { 
	font-style: normal; 
}
footer { 
	width: 95%; 
	text-align: end; 
	padding: 20px 0; 
}

/* ======================================= */
/* 共通予約ボタンのデザイン（明るいイエロー版） */
/* ======================================= */
.reserve-btn {
    display: inline-block;
    background-color: #f1c40f;
    color: #000 !important;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.reserve-btn:hover {
    background-color: #ffdb15;
    box-shadow: 0 5px 12px rgba(0,0,0,0.25);
    transform: translateY(-2px);
    text-decoration: none;
}

/* ======================================= */
/* 2. Topページライブスケジュール（5日分データ） */
/* ======================================= */

/* TOPページ専用のレイアウト調整 */
.top-version {
    margin-top: 20px;
}

/* 5日分なので高さを少し抑える */
.side-nav.top-nav ul {
    max-height: 350px; 
    border: 1px solid #ccc;
}

/* 全てのスケジュールを見るボタン */
.view-more-area {
    text-align: right;
    margin-top: 20px;
}

/* 「全てのスケジュールを見る」リンクのスタイル */
.view-more-area {
    text-align: right; /* 右寄せ */
    margin-top: 10px;  /* リストとの隙間 */
    padding-right: 5px;
}

.all-schedule-text {
    color: #000;            /* 文字色は黒 */
    text-decoration: none;  /* アンダーラインを消す */
    font-size: 0.85em;      /* 少し小さめにして馴染ませる */
    font-weight: bold;
    transition: color 0.2s;
}

.all-schedule-text:hover {
    color: #666;            /* ホバー時に少し色を薄くする（反応を出すため） */
    text-decoration: none;  /* ホバー時も線は出さない */
}

.top-version .live-detail-flex {
    display: flex;
    gap: 0;
    align-items: stretch; /* 高さを揃える */
}

.top-version .live-text {
    flex: 0 0 300px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
}

/* TOPページの予約ボタンも最下部へ */
.top-version .live-text .reserve-btn {
    margin-top: auto;
    align-self: flex-start;
}

.top-version .live-flyer {
    flex: 1;
    display: flex;
    align-items: flex-start; /* 上合わせ */
    background-color: #D8D8D8;
}

.top-version .live-flyer img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
/* ======================================= */
/* 2. ライブスケジュール（1ヶ月データ・スクロール対応） */
/* ======================================= */
.main-split { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    margin-top: 10px; 
}

/* 左側：日付ナビのコンテナ */
.side-nav { 
    background-color: #D8D8D8; 
    padding: 10px; /* 少し狭くしてスクロールエリアを確保 */
    border-radius: 5px; 
    /* PCでは sticky を維持すると使いやすいです */
}

/* ★左側ナビのリスト本体をスクロールさせる */
.side-nav ul {
    max-height: 550px; /* 10日分程度の高さ（調整してください） */
    overflow-y: auto;  /* scrollよりautoの方がバーが不要な時に消えるので綺麗です */
    border: 1px solid #bbb;
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-overflow-scrolling: touch; /* スマホでスルスル動くように */
}

/* スクロールバーのカスタマイズ（スッキリ版） */
.side-nav ul::-webkit-scrollbar {
    width: 6px;
}
.side-nav ul::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 4px;
}

/* 左側：日付ナビのリストアイテム（1行にする設定） */
.side-nav li a { 
    display: flex;             /* 横並びにする */
    gap: 10px;                 /* 日付とタイトルの間の隙間 */
    align-items: center;       /* 上下中央揃え */
    padding: 10px 12px; 
    border-bottom: 1px dotted #444; 
    color: #2A2A2A; 
    font-weight: bold; 
    text-decoration: none; 
    font-size: 0.85rem;        /* 1行に収めるため少し小さめ */
    white-space: nowrap;       /* 改行させない */
    overflow: hidden;          /* はみ出た文字を隠す */
    text-overflow: ellipsis;   /* はみ出た文字を「...」にする */
}

/* 日付部分だけ少し幅を固定すると綺麗に揃います */
.side-nav li a .date-part {
    flex-shrink: 0;            /* 日付は縮ませない */
    width: 75px;               /* 1/6 (火) が入る幅 */
}

/* タイトル部分は長い場合に備えて伸縮させる */
.side-nav li a .title-part {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 選択中の日付（ゴールド背景） */
.side-nav li a.nav-link.active { 
    background-color: #444; 
    color: gold; 
    border-radius: 0; /* リスト内なので角丸なしの方が点線と馴染みます */
}

/* 右側：詳細エリアのコンテナ自体を整える */
.tab-content { 
    display: none; 
    padding: 0; /* 内側の余白を0にして、左右のボックスを密着させる */
    background-color: #D8D8D8; 
    border-radius: 5px; 
    overflow: hidden; 
}
.active-content { display: block; }

/* ======================================= */
/* 2. ライブスケジュール（詳細エリア）の設定 */
/* ======================================= */

/* 左右を並べる親要素 */
.live-detail-flex {
    display: flex;
    gap: 0; 
    align-items: stretch;
    background-color: #D8D8D8; 
    border-radius: 5px;
    overflow: hidden;
    flex-wrap: wrap; /* ★幅が足りない時に折り返せるように追加 */
}

/* 左側：テキストエリア */
.live-text { 
    width: 100%;
    /* max-width と flex を削除または JS で制御できるように変更 */
    padding: 25px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 右側：フライヤー画像エリア */
.live-flyer { 
    flex: 1; /* 残りの幅をすべて使う */
    background-color: #D8D8D8; 
    display: flex;
    flex-direction: column; /* 複数枚の時に縦に並ぶように */
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    padding: 30px 15px 15px 15px;
    margin: 0;
}

/* フライヤー画像そのものの設定 */
.live-flyer img { 
    width: 100%;       
    height: auto;
    max-width: 400px; /* ★縦並びになった時に巨大化するのを防ぐ */
    object-fit: contain; 
    display: block;
}

/* 予約ボタンを一番下に押し下げる */
.live-text .reserve-btn {
    margin-top: auto;        /* 上の要素との隙間を自動で埋めて最下部へ */
    align-self: flex-start;  /* ボタンが横いっぱいに広がらないように */
}

/* 右側：フライヤー画像エリア */
.live-flyer { 
    flex: 1; 
    background-color: #D8D8D8; 
    display: flex;
    align-items: flex-start;  /* 画像を「上合わせ」にする */
    justify-content: center;
    overflow: hidden;
	padding: 30px 15px 15px 15px;
}

/* フライヤー画像そのものの設定 */
.live-flyer img { 
    width: 100%;       
    height: auto;      /* 高さは自動（比率維持） */
    max-height: none;  /* 制限を解除して上から配置 */
    object-fit: contain; 
    display: block;
}
/* ======================================= */
/* ライブスケジュール　レスポンシブ調整 */
/* ======================================= */

@media (max-width: 850px) { /* ★350px + 300px + 余白を考慮して 850px 付近で切り替え */
    .live-detail-flex {
        flex-direction: column; /* 強制的に縦並び */
    }
    .live-text {
        max-width: 100%;
        flex: 0 0 auto;
    }
    .live-flyer {
        padding: 0 15px 25px 15px; /* スマホ時は上のパディングを詰め、下に余白を作る */
    }
}
/* ======================================= */
/* ライブ詳細：公式サイトリンクのスタイルリセット */
/* ======================================= */

/* 公式サイトのラベルを含んだ段落の設定 */
.live-note {
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 1em;
    color: #2A2A2A; /* 本文と同じ色 */
}

/* リンク自体の装飾をリセット */
.live-note a {
    color: inherit;          /* 親要素(2A2A2A)の色を引き継ぐ */
    text-decoration: none;   /* 下線を消す */
    pointer-events: auto;    /* クリックはできるようにする */
}

/* ホバー（マウスを乗せた時）も変化させない場合 */
.live-note a:hover {
    color: inherit;
    text-decoration: none;
}
/* ======================================= */
/* モバイル専用：公式サイトリンクの表示調整 */
/* ======================================= */

@media (max-width: 768px) {
    /* 1. ラベル（太字）とURLを縦に並べる設定 */
    .live-note strong {
        display: block;      /* 強制的に改行させる */
        margin-bottom: 5px;  /* URLとの隙間 */
        font-size: 0.95em;
    }

    /* 2. URLリンク自体のスマホ最適化 */
    .live-note a {
        display: block;      /* リンクエリアを広げて押しやすくする */
        color: #444;         /* ほんの少しだけ色を付けて視認性を上げる */
        text-decoration: none;
        
        /* 長いURL対策：スマホの画面幅を超えないようにする設定 */
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-all;
        
        line-height: 1.4;
        font-size: 0.85em;   /* URLが長いので少し文字サイズを落とす */
    }

    /* 3. 余白の調整 */
    .live-note {
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px dotted #ccc; /* 料金欄との区切り（任意） */
    }
}



/* ======================================= */
/* 3. 出演者リストの点線（...）設定 */
/* ======================================= */
/* 出演者リスト全体の囲い */
.performers-list {
    margin: 10px 0 20px 0;
}

/* 1人分の行（divなので自動的に改行されます） */
.member {
    display: flex;         /* 名前・点線・楽器を横に並べる */
    align-items: baseline; /* 文字の底を揃える */
    width: 100%;           /* 横幅いっぱい */
    margin-bottom: 5px;    /* メンバーごとの隙間 */
}

/* 名前と楽器の間を埋める点線 */
.member::after {
    content: "";
    flex-grow: 1;          /* 伸びて隙間を埋める */
    border-bottom: 1px dotted #888; /* ★ここが点線 */
    margin: 0 10px 4px 10px;        /* 左右の余白 */
    order: 1;              /* 名前の直後に配置 */
}

.name {
    order: 0;              /* 一番左 */
    font-weight: bold;
    flex-shrink: 0;
}

.inst {
    order: 2;              /* 一番右 */
    color: #555;
    flex-shrink: 0;
}

/* ======================================= */
/* 4. カレンダー画像設定 */
/* ======================================= */
.calendar-img-area { 
    width: 100%; 
    max-width: 1200px; /* サイト全体の最大幅に合わせます */
    margin: 0 auto 40px; 
    text-align: center;
}

.calendar-img-area img { 
    display: block; 
    width: 100%; 
    height: auto; 
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    border: 1px solid #ddd;
    margin: 0 auto;
}

/* カレンダー下のレイアウト設定：ここが「左右いっぱい」の要 */
.calendar-footer {
    display: flex;
    justify-content: space-between; /* 子要素を両端に飛ばす */
    align-items: flex-start;        /* 上端を揃える */
    margin-top: 15px;
    width: 100%;                    /* 画像と同じ幅いっぱいを使う */
    padding: 0;                     /* 余計な内側余白をリセット */
    box-sizing: border-box;
}

/* 左側の補足テキスト */
.calendar-note {
    font-size: 0.8em;
    margin: 0;
    line-height: 1.5;
    color: #555;
    text-align: left;
}

/* 右側の控えめなボタン */
.btn-sub-detail {
    display: inline-block;
    padding: 2px 20px; 
    font-size: 0.9em;
    color: #444;
    text-decoration: none;
    border: 1px solid #999;
    border-radius: 3px;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    white-space: nowrap; 
    margin-top: -2px; /* 文字の高さと視覚的に合わせる微調整 */
}

.btn-sub-detail:hover {
    background-color: #eee;
    color: #000;
    border-color: #666;
}
/* カレンダーのスライダー外枠 */
.calendar-slider {
    display: flex;
    /* 1枚のときはスクロール不要なので隠し、2枚以上で溢れたときだけスクロールさせる */
    overflow-x: auto; 
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border-radius: 8px;
    
    /* IE, Edge用：スクロールバーを非表示 */
    -ms-overflow-style: none;
    /* Firefox用：スクロールバーを非表示 */
    scrollbar-width: none; 
}
/* 各スライド（月ごとの画像） */
.calendar-slide {
    flex: 0 0 100%;           /* 1枚の幅を親要素（100%）に固定する */
    scroll-snap-align: start; /* スクロールの停止位置を画像の先頭に合わせる */
    width: 100%;
}

.calendar-slide img {
    display: block;
    width: 100%;              /* 画像は常に横幅いっぱいに表示 */
    height: auto;
    /* 以前の影の設定などはここに引き継がれます */
}

/* Chrome, Safari用：1枚のときはバーを隠し、スクロールが必要なときだけデザインを適用 */
.calendar-slider::-webkit-scrollbar {
    /* 1枚のときは高さ0にして消す。JSで制御しなくてもこれで消えます */
    height: 0px; 
}
/* 画像が2枚以上あって、実際に横スクロールが発生している時だけバーを出す設定 */
.calendar-slider:has(.calendar-slide:nth-child(2))::-webkit-scrollbar {
    height: 8px; /* 2枚目があるときだけバーの高さを出す */
}
.calendar-slider::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.calendar-slider::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* ======================================= */
/* 5. 予約ボタン・フッター・レスポンシブ */
/* ======================================= */
.reserve-btn {
    display: inline-block;
    background-color: #f1c40f;
    color: #000 !important;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    border-radius: 4px;
}

@media (min-width: 769px) {
    .main-split { 
		flex-direction: row; 
		gap: 30px; 
	}
    .side-nav { 
        flex: 3; 
        min-width: 250px; 
        position: sticky; /* メニューを固定 */
        top: 20px; 
        height: fit-content;
    }
    .content-area { flex: 7; }
}

@media (max-width: 768px) {
    .header-main { 
		height: auto; 
		min-height: 120px; 
		flex-direction: column; 
	}
    nav ul li { 
		width: 50%; 
	}
    .live-detail-flex { 
		flex-direction: column; 
	}
    .live-text { 
		max-width: 100%; 
	}
}

footer { 
	width: 95%; 
	text-align: end; 
	padding: 20px 0; 
	font-size: 12px; 
	color: #666; 
}

/* ======================================= */
/* メニューページ専用（点線Flexbox版） */
/* ======================================= */
.menu-grid { 
	display: flex; 
	flex-wrap: wrap; 
	gap: 20px; 
	margin-top: 20px; 
}
.menu-category { 
	flex: 1 1 45%; 
	background: #D8D8D8; 
	padding: 20px; 
	border-radius: 5px; 
}
.menu-category h3 { 
	border-bottom: 2px solid #333; 
	padding-bottom: 5px; 
	margin-bottom: 15px; 
	font-size: 1.1em; 
}

/* メニューの1行分を横並びにする */
.menu-item {
    display: flex;
    align-items: baseline; /* 文字の底を揃える */
    margin-bottom: 10px;
    width: 100%;
}

/* 名称（dt）の設定：点線を生み出す */
.menu-category dt {
    display: flex;
    align-items: baseline;
    flex-grow: 1; /* 親の幅いっぱいまで伸びる */
    margin: 0;
    font-weight: bold;
    font-size: 0.95em;
}

/* 名称の後に点線を追加する */
.menu-category dt::after {
    content: "";
    flex-grow: 1;           /* 隙間をすべて埋める */
    border-bottom: 1px dotted #888; /* 点線のスタイル */
    margin: 0 10px 4px 10px; /* 左右に少し隙間を作る */
}

/* 価格（dd）の設定 */
.menu-category dd {
    margin: 0;
    font-weight: bold;
    white-space: nowrap; /* 価格が途中で改行されないように */
    flex-shrink: 0;      /* 価格が押しつぶされないように */
}

/* ======================================= */
/* マップ */
/* ======================================= */
.map-container {
    position: relative;
    padding-bottom: 80.25%;
    height: 0;
    overflow: hidden;
    margin: 20px 0;
    border: 1px solid #ccc;
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ======================================= */
/* 共通設定：INFOセクション（写真横並び） */
/* ======================================= */
.info-flex-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-top: 30px;
}

.info-text {
    flex: 1;
}

/* 文字の頂点と画像の頂点を合わせる */
.info-text h2 {
    margin-top: 0; 
}

.info-photo {
    flex: 0 0 350px; /* 基本350px */
}

/* 他のページ等で広くしたい時用 */
.info-photo.wide-photo {
    flex: 0 0 450px;
}

/* 写真エリア全体の画像設定 */
.info-photo img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 20px; /* 画像同士の隙間 */
    object-fit: cover;    /* 縦横比を保ちつつ枠に収める */
    border-radius: 5px;
}

/* ======================================= */
/* PC/タブレット向けのレスポンシブ (769px以上) */
/* ======================================= */
@media (min-width: 769px) {
    .container { 
		width: 85%; 
	} 
    header nav ul li { 
		margin: 0 20px; 
	}
    .main-split { 
        display: flex; 
        flex-direction: row; 
        gap: 30px; 
    }
    
    .side-nav { 
        flex: 3; 
        min-width: 220px; 
        background-color: #D8D8D8; 
        padding: 20px; 
        border-radius: 5px; 
    }
    .content-area { 
        flex: 7; 
        min-width: 0; 
    }
    header nav ul li.current-page { 
		border-bottom: 2px solid gold; 
		padding-bottom: 5px; 
	}
    .menu-split { 
		display: flex; 
		gap: 40px; 
	}
    .menu-split dl { 
		flex: 1; 
	}
    .info-grid {
        display: flex;
        gap: 40px;
    }
    .info-item {
        flex: 1;
    }
	
/* 基本設定（1枚のとき、または標準） */
	.info-photo img {
		display: block;
		width: 100%;
		height: auto;
		max-height: none; /* 1枚のときは制限しない */
		margin-bottom: 20px;
		object-fit: cover;
		border-radius: 5px;
	}
	/* 写真が2枚以上ある（最初の子要素かつ、最後の子要素ではない）場合の画像 */
    .info-photo img:not(:only-child) {
        max-height: 350px; /* 複数枚あるときだけ高さを制限する */
    }
}


/* ======================================= */
/* モバイル向けのレスポンシブ (980px〜769px) */
/* ======================================= */
@media (max-width: 980px) {
    .live-detail-flex {
        flex-direction: column;
        gap: 15px;
    }
    .live-flyer {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    .live-text {
        width: 100%;
    }
}

/* ======================================= */
/* モバイル向けのレスポンシブ (768px以下) */
/* ======================================= */
@media (max-width: 768px) {
    .header-main { 
		height: auto; 
		min-height: 150px; 
		flex-direction: column; 
		background-size: cover; 
	}
    .logo-area { 
		margin: 0; 
		padding-top: 15px; 
		width: 100%; 
		display: flex; 
		flex-direction: column; 
	}
    .logo { 
		margin-left: 15px; 
		text-align: left; 
	}
    .logo h1 { 
		font-size: 1.4em; 
	}
    .logo-area p { 
		width: 100%; 
		text-align: center; 
		margin: 75px 0 5px 0; 
		font-size: 0.8em; 
	}
    nav ul li { 
		width: 50%; 
		box-sizing: border-box; 
		border: 0.5px solid rgba(255,255,255,0.1); 
	}
    nav a { 
		padding: 12px 10px; 
		font-size: 0.75em; 
	}
    .top { 
		background-size: 150px; 
		background-position: 100% 2%; 
	}
    .headcopy { width: 60%; 
	}
    .menu-category { 
		flex: 1 1 100%; 
	}
    .menu-split { 
		display: block; 
	}

    /* INFOセクションのスマホ個別設定 */
    .info-flex-container {
        flex-direction: column;
    }
    .info-text h2 {
        margin-top: 20px;
    }
    .info-photo {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%; /* 画面幅いっぱいに */
        margin: 0 auto;
    }
    .info-photo img {
        max-height: none;
        margin-bottom: 15px;
    }
	.top-version .live-detail-flex {
        flex-direction: column;
    }
    .top-version .live-text {
        max-width: 100%;
        flex: 1;
    }
}

@media (max-width: 600px) {
    .live-flyer {
        max-width: 300px;
    }
}

/* ======================================= */
/* フォーム専用スタイル（HTMLから移行分） */
/* ======================================= */

.contact-form {
    background: #D8D8D8;
    padding: 30px;
    border-radius: 5px;
    margin-top: 20px;
}

.form-group {
    margin-bottom: 20px;
    /* position: relative; はここには不要です（アイコンの基準がズレるため） */
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

/* 入力欄の基本設定 */
.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 3px;
    box-sizing: border-box;
    font-family: inherit; 
    font-size: 14px;      /* 0.9emから14pxに変更（プレースホルダーに合わせる） */
    color: #333;
    display: block; 
    height: 44px;         /* 高さを統一 */
    background-color: #fff; /* 背景を白に固定 */
    -webkit-appearance: none; /* iOSの地の色を消す */
    appearance: none;
}

.form-group textarea {
    height: 120px;
}

/* 送信ボタンのスタイル（HTMLのインラインを吸収） */
.contact-form .reserve-btn {
    width: 100%;
    border: none;
    background-color: #f1c40f;
    color: white;
    padding: 15px 30px;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s;
}

.contact-form .reserve-btn:hover {
    background-color: #F7D438;
}

.contact-notes {
    margin-top: 30px;
    font-size: 0.9em;
    line-height: 1.6;
}

/* プレースホルダー */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aaa;
    font-size: 0.9em;
    font-weight: normal;
}

/* 標準のカレンダーボタンを透明にして入力欄全体に広げる */
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;      /* 透明にする */
    z-index: 5;      /* アイコン(z-index: 10)より下に配置してクリックを優先させる */
}
/* 念のため、親要素の高さもしっかり確保 */
.date-input-wrapper {
    position: relative !important;
    display: block;
    width: 100%;
    height: auto;
}

/* 入力欄そのものの設定 */
.date-input-wrapper input[type="date"] {
    position: relative;
    z-index: 1;      /* 入力欄を最背面へ */
    width: 100%;
    padding: 10px;
    padding-right: 40px; /* アイコン分の余白 */
    box-sizing: border-box;
}

/* アイコンの位置固定 */
.calendar-icon {
    position: absolute !important;
    right: 15px !important;    /* 枠の右端から15pxに固定 */
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 10;
    color: #333;
}
/* ======================================= */
/* ご来店時間入力欄（select形式）の調整 */
/* ======================================= */

#visit-time {
    appearance: none;           /* ブラウザ標準の矢印を消す */
    -webkit-appearance: none;    /* Safari用 */
    -moz-appearance: none;       /* Firefox用 */
    background-color: #fff;
    cursor: pointer;
    padding-right: 40px;        /* 時計アイコンと重ならないための余白 */
    width: 100%;                /* 基本は100%（PC幅はwrapperで制限） */
}

/* IEで矢印を消す設定 */
#visit-time::-ms-expand {
    display: none;
}

/* 【削除OK】selectタグにはplaceholderという概念がないため、以下の記述は不要です */
/* #visit-time::placeholder { ... } */

/* アイコンの位置調整（共通設定） */
.date-input-wrapper span.calendar-icon {
    pointer-events: none; 
    z-index: 10;
}

/* フォーカス時の色調整 */
#visit-time:focus {
    outline: none;
    border-color: #f1c40f;
    box-shadow: 0 0 5px rgba(241, 196, 15, 0.3);
}
@media (min-width: 769px) {
    /* 1. 日付と時間を囲む親要素を横並びにする */
    .form-group:has(#visit-date),
    .form-group:has(#visit-time) {
        display: inline-block;
        width: calc(50% - 10px); /* 50%から余白分を引く（伸縮します） */
        vertical-align: top;
    }

    /* 2. 日付と時間の間にある程度の隙間を作る */
    .form-group:has(#visit-date) {
        margin-right: 15px;
    }

    /* 3. 日付と時間の入力欄の見た目・高さを他の欄と統一する */
    #visit-date, 
    #visit-time {
        width: 100% !important;
        height: 44px;           /* ★他の入力欄（お名前等）の高さに合わせて調整してください */
        box-sizing: border-box; /* 枠線を含めた高さにする */
        font-size: 14px;        /* 文字サイズも統一 */
        padding: 8px 12px;
        border: 1px solid #999; /* 枠線の色も他の欄に合わせて調整 */
        border-radius: 4px;
        display: flex;
        align-items: center;
    }

    /* 4. アイコンを内包するラッパーも幅100%に */
    .date-input-wrapper {
        width: 100% !important;
        position: relative;
    }
}

/* スマホでは100%に戻す（横並びを解除） */
@media (max-width: 768px) {
    .form-group:has(#visit-date),
    .form-group:has(#visit-time) {
        width: 100%;
    }
	/* モバイルでの背景色と枠線の強制統一 */
    #inquiry-type,
    #visit-date {
        background-color: #fff !important;
        -webkit-appearance: none;
        appearance: none;
        background-image: none; /* ブラウザ独自の影を消す */
    }
}

/* ======================================= */
/* フッター・その他 */
/* ======================================= */
footer p {
    font-size: 12px;
    color: #666666;
    letter-spacing: 0.05em;
    margin: 0;
}

.set-info {
    display: block;
    padding-left: 1.5em;
    font-size: 0.95em;
    color: #2A2A2A;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.set-info .label {
    display: inline-block;
    width: 80px;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    text-align-last: justify;
}
/* ======================================= */
/* 最終的な不具合修正（これを最後に追加するだけ） */
/* ======================================= */
@media (max-width: 768px) {
    /* 1. 公式サイトリンクの下線を消す（以前の設定を上書き） */
    .live-note a, .live-note a:link, .live-note a:visited {
        text-decoration: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        color: #444 !important;
    }

    /* 2. スマホでフライヤー画像が出ない、または位置がズレるのを修正 */
    /* top-version, live-detail-flex 両方に対応 */
    .top-version .live-detail-flex, 
    .live-detail-flex {
        display: flex !important;
        flex-direction: column !important; /* 縦並びを強制 */
    }

    .top-version .live-text, 
    .live-text {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    .top-version .live-flyer, 
    .live-flyer {
        display: block !important; /* 非表示を解除 */
        width: 100% !important;
        flex: 0 0 auto !important;
        padding: 0 20px 30px 20px !important;
    }

    .top-version .live-flyer img, 
    .live-flyer img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}
/* モバイル用の調整（リンク間隔・日付・時間入力） */
@media (max-width: 768px) {
    /* --- 1. 公式サイトリンク等の間隔調整 --- */
    .live-note {
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }
    .live-note strong, .live-note a {
        display: inline !important;
    }
    .live-note a {
        text-decoration: none !important;
        border-bottom: none !important;
        padding: 0 !important;
    }

    /* --- 2. 日付と時間の入力欄：はみ出し防止と左寄せ --- */
    /* ID(#visit-date)だけでなく、inputタイプ両方を指定して時間をカバーします */
    #visit-date,
    input[type="time"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
        padding-left: 10px !important;
        display: block !important;
        position: relative !important;
    }

    /* --- 3. iOS/Safari特有の「文字の浮き」を左寄せに修正 --- */
    /* これが日付と時間の両方のはみ出しを抑え込む重要な設定です */
    input[type="date"]::-webkit-date-and-time-value,
    input[type="time"]::-webkit-date-and-time-value {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* --- 4. 全体のガード（横揺れ防止） --- */
    .date-input-wrapper, 
    .form-group {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
}