:root{
	--spacer-1:0.25rem;--spacer-2:0.5rem;--spacer-3:1rem;--spacer-4:1.5rem;--spacer-5:3rem;--spacer-6:4.5rem;
	--red: #4A90E2;
	--black: #1f1f1f;
	--white: #fff;
}
/* ブラウザデフォルトのCSSをリセット */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* パスワード入力間違いなど */
.red-border {
	border: 1px solid red;
}

/* 全体 */
body {
	color: #3A3C46;
	font-size: 14px;
	line-height: 1.4;
}
body:not(.pdf){
	font-family: "BIZ UDPGothic", "SF Pro", "Roboto", "Hiragino Sans", "ヒラギノ角ゴシック", Arial, Meiryo, sans-serif;
}

.border-rounded {
	border: 1px solid var(--black);
	border-radius: 10px;
  }

main{
	max-width: 600px;
	margin: auto;
}
li{list-style: none;}
a{display:block;}
a:not(.decoration){text-decoration:none; color:inherit;}
a[disabled]{ background: #ccc!important; cursor:default; }
label{display:block;}
hr{border:none;border-bottom:1px solid #B5B5B5;}
input,select{font-size: 16px;}
select {
	-webkit-appearance: none; /* iOSで丸みを無効化 */
	appearance: none;
	background-color: white;
	color: #333;
}

.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }
.mauto{ margin: auto; }
.hauto{ height: auto!important; }
.bold{ font-weight: bold; }
.d-none{ display: none!important; }
.inline{ display: inline; }
.inline-block{ display: inline-block!important; }
.link{ text-decoration: underline; color: #0500FF; }
.w-15{ width: 15%!important; } .w-25{ width: 25%!important; } .w-50{ width: 50%!important; } .w-75{ width: 75%!important; } .w-100{ width: 100%!important; }
.mt-0{margin-top:0;} .mt-1{ margin-top:     var(--spacer-1); }.mt-2{ margin-top:     var(--spacer-2); }.mt-3{ margin-top:     var(--spacer-3); }.mt-4{ margin-top:     var(--spacer-4); }.mt-5{ margin-top:     var(--spacer-5); }.mt-6{ margin-top:     var(--spacer-6); }
.me-0{margin-right:0;} .me-1{ margin-right:   var(--spacer-1); }.me-2{ margin-right:   var(--spacer-2); }.me-3{ margin-right:   var(--spacer-3); }.me-4{ margin-right:   var(--spacer-4); }.me-5{ margin-right:   var(--spacer-5); }.me-6{ margin-right:   var(--spacer-6); }
.mb-0{margin-bottom:0;} .mb-1{ margin-bottom:  var(--spacer-1); }.mb-2{ margin-bottom:  var(--spacer-2); }.mb-3{ margin-bottom:  var(--spacer-3); }.mb-4{ margin-bottom:  var(--spacer-4); }.mb-5{ margin-bottom:  var(--spacer-5); }
.ms-0{margin-left:0;} .ms-1{ margin-left:    var(--spacer-1); }.ms-2{ margin-left:    var(--spacer-2); }.ms-3{ margin-left:    var(--spacer-3); }.ms-4{ margin-left:    var(--spacer-4); }.ms-5{ margin-left:    var(--spacer-5); }
.pt-0{padding-top:0;} .pt-1{ padding-top:    var(--spacer-1); }.pt-2{ padding-top:    var(--spacer-2); }.pt-3{ padding-top:    var(--spacer-3); }.pt-4{ padding-top:    var(--spacer-4); }.pt-5{ padding-top:    var(--spacer-5); }
.pe-0{padding-right:0;} .pe-1{ padding-right:  var(--spacer-1); }.pe-2{ padding-right:  var(--spacer-2); }.pe-3{ padding-right:  var(--spacer-3); }.pe-4{ padding-right:  var(--spacer-4); }.pe-5{ padding-right:  var(--spacer-5); }
.pb-0{padding-bottom:0;}.pb-1{ padding-bottom: var(--spacer-1); }.pb-2{ padding-bottom: var(--spacer-2); }.pb-3{ padding-bottom: var(--spacer-3); }.pb-4{ padding-bottom: var(--spacer-4); }.pb-5{ padding-bottom: var(--spacer-5); }
.ps-0{padding-left:0;}.ps-1{ padding-left:   var(--spacer-1); }.ps-2{ padding-left:   var(--spacer-2); }.ps-3{ padding-left:   var(--spacer-3); }.ps-4{ padding-left:   var(--spacer-4); }.ps-5{ padding-left:   var(--spacer-5); }
.mx-0{margin-left:0; margin-right:0;}.mx-1{ margin-left:  var(--spacer-1); margin-right:   var(--spacer-1); }.mx-2{ margin-left:  var(--spacer-2); margin-right:   var(--spacer-2); }.mx-3{ margin-left:  var(--spacer-3); margin-right:   var(--spacer-3); }.mx-4{ margin-left:  var(--spacer-4); margin-right:   var(--spacer-4); }.mx-5{ margin-left:  var(--spacer-5); margin-right:   var(--spacer-5); }
.my-0{margin-top:0; margin-bottom:0;}.my-1{ margin-top:   var(--spacer-1); margin-bottom:  var(--spacer-1); }.my-2{ margin-top:   var(--spacer-2); margin-bottom:  var(--spacer-2); }.my-3{ margin-top:   var(--spacer-3); margin-bottom:  var(--spacer-3); }.my-4{ margin-top:   var(--spacer-4); margin-bottom:  var(--spacer-4); }.my-5{ margin-top:   var(--spacer-5); margin-bottom:  var(--spacer-5); }
.px-0{padding-left:0;padding-right:0;}.px-1{ padding-left: var(--spacer-1); padding-right:  var(--spacer-1); }.px-2{ padding-left: var(--spacer-2); padding-right:  var(--spacer-2); }.px-3{ padding-left: var(--spacer-3); padding-right:  var(--spacer-3); }.px-4{ padding-left: var(--spacer-4); padding-right:  var(--spacer-4); }.px-5{ padding-left: var(--spacer-5); padding-right:  var(--spacer-5); }
.py-0{padding-top:0;padding-bottom:0;}.py-1{ padding-top:  var(--spacer-1); padding-bottom: var(--spacer-1); }.py-2{ padding-top:  var(--spacer-2); padding-bottom: var(--spacer-2); }.py-3{ padding-top:  var(--spacer-3); padding-bottom: var(--spacer-3); }.py-4{ padding-top:  var(--spacer-4); padding-bottom: var(--spacer-4); }.py-5{ padding-top:  var(--spacer-5); padding-bottom: var(--spacer-5); }
.m-0{margin:0!important}.m-1{ margin:  var(--spacer-1); }.m-2{ margin:  var(--spacer-2); }.m-3{ margin:  var(--spacer-3); }.m-4{ margin:  var(--spacer-4); }.m-5{ margin:  var(--spacer-5); }
.p-0{padding:0!important}.p-1{ padding: var(--spacer-1); }.p-2{ padding: var(--spacer-2); }.p-3{ padding: var(--spacer-3); }.p-4{ padding: var(--spacer-4); }.p-5{ padding: var(--spacer-5); }
.flex{display: flex;}
.flex.right{justify-content: end;}
.flex.left{justify-content: start;}
.flex.between{justify-content: space-between;}
.flex.center{justify-content: center;}
.flex.flex-column{flex-direction:column;}
.flex.align-items-center{align-items: center;}
.flex-grow-1{flex-grow:1;}
.border{border:1px solid var(--black);}
.border_top{border-top:1px solid var(--black);}
.border_right{border-right:1px solid var(--black);}
.border_bottom{border-bottom:1px solid var(--black);}
.border_left{border-left:1px solid var(--black);}
.absolute{ position: absolute; }
.relative{ position: relative; }
.fs-6{font-size:6px;}
.fs-7{font-size:7px;}
.fs-8{font-size:8px;}
.fs-9{font-size:9px;}
.fs-10{font-size:10px;}
.fs-11{font-size:11px;}
.fs-12{font-size:12px;}
.fs-13{font-size:13px;}
.fs-14{font-size:14px;}
.fs-15{font-size:15px;}
.fs-16{font-size:16px;}
.fs-17{font-size:17px;}
.fs-18{font-size:18px;}
.fs-19{font-size:19px;}
.fs-20{font-size:20px;}
.fs-21{font-size:21px;}
.fs-22{font-size:22px;}
.fs-23{font-size:23px;}
.fs-24{font-size:24px;}
.fs-25{font-size:25px;}
.fs-26{font-size:26px;}
.fs-27{font-size:27px;}
.fs-28{font-size:28px;}
.fs-29{font-size:29px;}
.fs-30{font-size:30px;}
.fs-40{font-size:40px;}
.lh-1{line-height:1;}.lh-2{line-height:2;}.lh-3{line-height:3;}.lh-4{line-height:4;}
.text-red{color: var(--red);}
.cs-pointer{ cursor: pointer; }
.ws-nowrap{ white-space: nowrap; }
.rounded-circle{ border-radius: 50%; }

.ui-datepicker{
	font-size: 150%;
}
#ui-datepicker-div {
    z-index: 10 !important;
}
.flash_message{
	border-width: 3px;
	border-style: solid;
}
	.flash_message.error{
		border-color: var(--red);
		color: var(--red);
		font-weight: bold;
	}
.login-container img {
	width: 50%;
	height: auto;
}

input{
	padding: 2px;
}

/* <input type="number">のまま、右側の上下の矢印（スピンボタン）だけを非表示 */
/* Chrome、Safari、EdgeなどのWebKitブラウザ用 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Firefox用 */
input[type=number] {
	-moz-appearance: textfield;
}

/* modal */
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
	z-index: 2000;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
.modal-header{
	min-height: 48px;
	border-bottom: 1px solid #ccc;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
	width: 98%;
	border-radius: 8px;
	background: #fff;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	font-size: 40px;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
	text-align: left;
	padding: 30px;
	max-height: 85vh;
	overflow-y: scroll;
}

.text-line-right{
	display: flex;
	align-items: center;
}

.text-line-right .line {
	content: "";
	flex-grow: 1;
	height: 1px;
	display: block;
}

.text-line-right .line {
	background: #1F1F1F;
}

.text-line-right.accordion{
	cursor: pointer;
}
.text-line-right.accordion .icon{
	content:'';
	width: 28px;
	height: 28px;
	background-size: contain;
	background-image: url("/images/icons/accordion_black.png");
	cursor: pointer;
}

.reservation_detail_table,
.cancel_info_table{
	width: 100%;
	border-collapse: collapse;
}
.reservation_detail_table th,
.reservation_detail_table td,
.cancel_info_table th,
.cancel_info_table td{
	border: 1px solid #A9A9A9;
	padding: 4px;
}
.reservation_detail_table th.label,
.reservation_detail_table td.label{
	background: #D3D3D3;
}
.reservation_detail_table th.label-pdf,
.reservation_detail_table td.label-pdf{
	background: #F2F2F2;
}
.cancel_info_table th:first-child,
.cancel_info_table td:first-child{
	background: var(--black);
	color: var(--white);
}

.tabletype_wrap.inactive{
	background: #F1F1F1;
}

/* キャンセル時の背景 */
.gray-row {
	background-color: #B5B5B5;
}

/* ↓よくある質問画面↓ */
.faq_header{
	background-color: #edf2f4;
	padding: 12px 20px;
	position: relative;
	display: flex;
	align-items: center;
}
	.faq_header:before{
		position: absolute;
		right: 20px;
		content: '';
		background-image: url("/images/icons/accordion_icon.png");
		width: 30px;
		height: 30px;
		background-size: contain;
	}
.faq_body{
	padding: 12px 20px;
	display: none;
}
/* ↑よくある質問画面↑ */

/* パスワードリセット画面 */
.icon_img{width:80px;height:80px;}

/* ↓予約共通↓ */
.progressbar {
	position: relative;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 11px;
}
.progressbar li {
	position: relative;
	list-style-type: none;
	text-align: center;
	text-transform: uppercase;
	width: 25%;
	color: #999999;
}
.progressbar li:before {
	display: block;
	width: 24px;
	height: 24px;
	margin: 7px auto 4px auto;
	content: '';
	text-align: center;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #141d9b;
}
.progressbar li:not(.active):not(.complete):before{
	border: 2px solid #999;
}
.progressbar li:after {
	position: absolute;
	z-index: -1;
	top: 20px;
	left: -50%;
	width: 100%;
	height: 2px;
	content: '';
	background-color: #999;
}
.progressbar li:first-child:after {
	content: none;
}
.progressbar li.active{
	color: #141d9b;
}
.progressbar li.active:before{
	background-color: #141d9b;
	/* background-color: #9B1424; */
}



.form-group label {
	display: block;
	text-align: left;
	font-size: 0.8rem;
}

.form-group p {
	display: block;
	text-align: left;
	font-size: 0.7rem;
}

.text-danger {color: #E30E71;}

hr.dashed {
	border: none;
	height: 1px;
	background-image: linear-gradient(to right, #474747 40%, rgba(255, 255, 255, 0) 0%); /* 40%まで指定色を描画して残りは0%(透明) */
	background-size: 6px 1px; /* 間隔を調整 */
	margin: var(--spacer-3) 0;
}

.label-bar {
	width: 100%;
	background: var(--black);
	color: var(--white);
	font-size: 16px;
	font-weight: 700;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacer-3) var(--spacer-2);
}

.label-bar-slim {
	background: var(--black);
	color: var(--white);
	padding: 5px;
}

.text-caution{
	color: #141d9b;
}

/* 利用中伝票ボタン用コンテナの位置調整 */
.entering-button-container {
	position: absolute;
	top: 50%;    /* ヘッダー内で縦方向中央揃え */
	right: 52px; /* ハンバーガーメニュー(右端)より少し左へ */
	transform: translateY(-50%);
}

/* ボタン自体を縦並びに調整 */
.entering-button {
	background-color: transparent;     /* 背景色を透明に */
	display: flex;
	flex-direction: column;     /* 画像と文字を縦並びに */
	justify-content: center;
	border: none;
	gap: 2px;
}

/* アイコンサイズ調整 */
.entering-button img {
	width: 40px;
	height: 40px;
}

/* テキスト色・ラインハイト */
.entering-button span {
	line-height: 1;
	font-size: 12px; /* 必要に応じて文字サイズ調整 */
}

/* ハンバーガーメニューの位置 */
.header-container {
	position: relative;
	display: flex;
    align-items: center;
    justify-content: space-between;
	flex-direction: row;
}
@media (max-width: 768px) {
    .header-container h3 {
        position: static;   
        transform: none; 
        margin-top: 3px;  
        font-size: 13.5px;
        text-align: center;
    }
}
.hamburger-menu {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1100; /* メニューよりも上に表示(基本値1000)*/
}

/* ハンバーガーボタンのスタイル */
.hamburger-button {
	background: #4A90E2;
	border: none;
	cursor: pointer;
	position: relative;
	z-index: 1100; /* スライドメニューよりも上に表示 */
	width: 40px; height: 40px;
}

/* アイコンのスタイル */
.hamburger-icon {
	display: block;
	width: 30px;
	height: 2px;
	background-color: #fff;
	position: relative;
	transition: 0.4s;
}

.hamburger-icon::before,
.hamburger-icon::after {
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	background-color: #fff;
	position: absolute;
	left: 0;
	transition: 0.4s;
}

.hamburger-icon::before {
	top: -8px;
}

.hamburger-icon::after {
	top: 8px;
}

.hamburger-button.active .hamburger-icon {
	background-color: transparent;
}

.hamburger-button.active .hamburger-icon::before {
	transform: rotate(45deg);
	top: 0;
}

.hamburger-button.active .hamburger-icon::after {
	transform: rotate(-45deg);
	top: 0;
}

/* スライドメニューのスタイル */
.hamburger-nav {
	position: fixed;
	top: 0;
	padding-top: 40px;
	right: -100%; /* 初期位置:画面外に配置 */
	width: 200px;
	height: 100%;
	background: #fff;
	border-left: 1px solid #ddd; /* 区切り線 */
	transition: right 0.8s ease; /* スライドアニメーション */
	z-index: 1000; /* 他の要素より前に表示 */
	overflow: auto; /* メニュー内スクロール許可 */
}

/* メニューが表示されているときのスタイル */
.hamburger-nav.active {
	right: 0; /* メニューを画面内に表示 */
}

.hamburger-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background: #D3D3D3;
}

.hamburger-nav li {
	padding: 10px;
	border-top: 1px solid #A9A9A9;
}
.hamburger-nav li:last-child {
	border-bottom: 1px solid #A9A9A9;
}

.hamburger-nav a {
	text-decoration: none;
	color: #333;
}

/* メニューアイテムにホバーしたときのスタイル */
/* .hamburger-nav a:hover {
	background-color: #f5f5f5;
} */

/* 閉じるボタンのスタイル */
.close-menu {
	background: none;
	border: none;
	font-size: 24px;
	color: #333;
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 10px;
}

/* メニュー内の閉じるボタンホバー時のスタイル */
.close-menu:hover {
	color: #000;
}

/* 背景固定 */
.no-scroll {
	overflow: hidden;
}

/* キャンセルポリシー */
.policy-wrap {
	margin-top: var(--spacer-3);
	margin-bottom: var(--spacer-3);
	border: #000;
}



/* 入力欄のスタイルを調整 */
.form-default {
	display: block;
	margin-bottom: 1rem;
	height: 46px;
	width: 100%;
	padding: 12px 16px; /* 内側の余白 */
	border: 1px solid #ccc;
	border-radius: 8px;
	box-sizing: border-box; 
}

/* QRコード画像のサイズ */
.qrcode-image {
	width: 200px;
	height: auto;
	margin: 0 auto;
	border-radius: 15px;
	display: block;
}

.btn {
	border: none;
	border-radius: 2px;
	padding: 12px 18px;
	text-decoration: none;
	color: var(--black);
	font-size: 14px;
	background: #fbfbfb;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.btn.border {
	border: 1px solid #474747;
}
.btn.rounded{
	border-radius: 200px;
}

.btn.small {
	padding: 8px 12px;
}
.btn.large {
	padding: 16px 24px;
}
.btn.green{
	background: #039400;
	color: var(--white);
}
.btn.gray{
	background: #f4f4f4;
}
.btn.pink{
	background: #4A90E2;
	/* background: #D70724; */
	color: var(--white);
}
.btn.dark-pink{
	background: #326EB1;
	/* background: #981423; */
	color: var(--white);
}
.btn.blue{
	background: #0017C1;
	color: var(--white);
}
.btn.dark{
	background: #474747;
	color: var(--white);
}
/* 修正対応 #46 certificateページのみ適用中 全体適用する際は上の.btn.darkを直接修正 */
.btn.light {
	background: #727272;
	color: var(--white);
}
.btn.black{
	background: #121515;
	color: var(--white);
}
.btn.white{
	background: #fff;
}

.btn .icon {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 8px;
}

/* 無効状態ボタン */
.btn:disabled,
.btn.disabled {
	background-color: #d6d6d6;
	color: #a0a0a0;
	border-color: #ccc;
	cursor: not-allowed;
}

.breadcrumb_wrap {
	padding-left: 3%;
	display: flex;
}

.breadcrumb {
	display: flex;
	background: #f4f4f4;
	font-size: 12px;
	padding: 2px 8px;
}

.breadcrumb .breadcrumb_item {
	color: #9e9e9e;
}

.breadcrumb .breadcrumb_item:not(:first-child) {
	margin-left: 24px;
	position: relative;
}

.breadcrumb .breadcrumb_item:not(:first-child):before {
	content: "/";
	position: absolute;
	width: 24px;
	left: -24px;
	text-align: center;
	color: #9e9e9e;
}

.breadcrumb .breadcrumb_item:last-child {
	color: #000;
}

.heading_wrap {
	font-size: 34px;
	text-align: center;
	font-weight: 700;
}

.heading.main {
	font-style: italic;
}

.heading.sub {
	margin-top: 24px;
}

.btn-inline {
	display: inline-block;
	text-align: center;
}

/* エリアリスト */
.accordion {
}
	.accordion > li{
		width: 100%;
		background: var(--black);
		color: var(--white);
		font-size: 16px;
		font-weight: 700;
		position: relative;
		display: flex;
		align-items: center;
		border-radius: 2px;
		padding: var(--spacer-3) var(--spacer-2);
		margin-top: 8px;
	}
	.accordion.arrow > li:after{
		content: '';
		background: linear-gradient(to bottom left, var(--white) 50%, transparent 50%) top left;
		transform: rotate(45deg);
		position: absolute;
		right: 12px;
		width: 12px; height: 12px;
	}
	.accordion.arrow > li.active:after{
		transform: rotate(135deg);
	}
	.accordion .accordion-header {
		cursor:pointer;
	}
	.accordion .accordion_items {
		display: none; /* 画面を読み込んだときは非表示にしておく */
	}

	li:not(last-child) .accordion_item_content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #ddd;
	}
	.sorted_shops .accordion_item_content {
		border-top: 1px solid #ddd;
		border-bottom: none;
	}

.input_group{
	display: flex;
	align-items: stretch;
	width: 100%;
}
	.input_group label:not(:first-child) {
		background: var(--white);
		color: var(--black);
		border: 1px solid #2F3F8E;
		margin-left: -1px;
		margin-right: -1px;
	}
	.input_group label{
		background: var(--black);
		color: var(--white);
		padding: var(--spacer-1) var(--spacer-2);
		width: 30%;
		text-align: center;
	}
	.input_group input, .input_group .input, .input_group select{
		border: 1px solid #2F3F8E;
		flex-grow: 1;
	}
	.input_group select.hours,
	.input_group select.minutes{
		text-align-last: center;
	}
	.input_group select.member_cnt{
		padding: 0 4px;
		font-family: "BIZ UDPGothic", "SF Pro", "Roboto", "Hiragino Sans", "ヒラギノ角ゴシック", Arial, Meiryo, sans-serif;
	}

.equipment_wrap{
	padding-top: var(--spacer-2);
}
	.equipment_title{
		font-size: 16px;
		font-weight: 700;
		margin-top: var(--spacer-3);
	}
	.equipment_body{
		font-size: 14px;
		color: #5c5c5c;
		margin-top: var(--spacer-3);
	}

.facility_wrap{
	display: flex;
	align-items: center;
	margin-top: var(--spacer-4);
}
	.facility_wrap img{
		width: 32px; height: 32px;
		margin-right: var(--spacer-2);
	}
/* ヘッダー */
.header-container::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	height: 4px;
	background: linear-gradient(to bottom, #4A90E2 0%, #326EB1 100%);
}

.header-container>a, .header-container .logo {
	height: 48px;
	margin-left: 0.25rem;
}

.header-container h2 {
	margin: 0;
	font-size: 1.5rem;
	color: #333;
}

.header-content {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ログインページ */
.form-check-label {
	margin-left: 10px;
}

.links a {
	color: #007bff;
	text-decoration: none;
}

.links a:hover {
	text-decoration: underline;
}

.title-band {
	background: linear-gradient(to bottom, #4A90E2, #326EB1);
	color: var(--white);
	padding: 20px;
	border-radius: 4px;
}

.title-band-slim {
	background: linear-gradient(to bottom, #4A90E2, #326EB1);
	color: var(--white);
	padding: 5px;
}

.mt-4.flex.center ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.mt-4.flex.center ul li {
	margin-bottom: var(--spacer-2);
}

.selected-seat-type {
	width: 50%;
	height: auto;
	margin-right: 16px;
}

.payment-methods {
	display: flex;
	flex-direction: column;
	gap: var(--spacer-2);
}

.payment-method {
	display: flex;
	align-items: center;
	padding: var(--spacer-2);
	border: 1px solid #474747;
	border-radius: 4px;
}

.payment-method input[type="radio"] {
	margin-right: var(--spacer-2);
}

/* 会員連携ページ */
.caution-wrap {
	border: 1px solid #C20B2A;
	padding: 16px;
	margin-bottom: 16px;
}

/* エラーFLASHメッセージ */
.alert-danger {
	color: #C20B2A;
	padding: 16px;
	margin-top: 16px;
}

.seat-info {
	background-color: #218011;
	color: #fff;
	padding: 1rem;
	border-radius: 0.25rem;
	text-align: center;
	font-size: 1rem;
}

/* 親コンテナを相対位置に設定 */
.position-relative {
	position: relative;
}

/* 画像の上に重ねるオーバーレイを絶対位置に設定 */
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
}

/* 遊ぶならとことん */
.main-title {
	font-size: 1.5rem;
	line-height: 1.8rem;
	color:darkorange;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	margin-bottom: var(--spacer-1);
	-webkit-text-stroke: 2px #8b0000;
	font-weight: 700;
}

/* スタッフ一同 */
.sub-title {
	font-size: 1rem;
	color: #B28B00;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	margin-bottom: var(--spacer-3);
}

.cancel-resv-num-area {
	font-size: 1.5rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* footer */
.footer {
	background-color: #1f1f1f;
	color: #fff;
	padding: 5px 0;
	text-align: center;
	font-size: 0.7rem;
}

.footer .container {
	margin: 0 auto;
	padding: 0 15px;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 20px;
}

.footer-links a {
	color: #FFCCCC;
	text-decoration: none;
	margin: 5px 10px;
	position: relative;
	padding-right: 0.5rem; /* 仕切り線との間隔 */
}

.footer-links a:not(:last-child) {
	border-right: 1px solid #fff; /* 縦の仕切り線 */
}

.footer-links a:hover {
	text-decoration: underline;
}

.footer-social {
	display: block;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}

.footer-banner {
	align-items: center;
	margin-bottom: 2rem;
}

.footer-banner img {
	max-width: 80%;
	height: auto;
	margin-right: 10px;
}

.footer-copyright {
	border-top: 1px solid #474747;
	padding-top: 10px;
	margin-top: 20px;
}

/* 座席予約 テーブルタイプ選択 */

/* 予約ボタン */
.reservation-button {
	background-color: #86130f;
	color: white;
	border: none;
	padding: 10px 10px;
	margin: 5px;
	width: 65px;
	height: 65px;
	border-radius: 4%;
	cursor: pointer;
}

.reservation-button:hover {
	background-color: #9a4d4a;
}

/* disabled状態のボタンスタイル */
.reservation-button:disabled {
	background-color: #d6d6d6;
	color: #a1a1a1;
	cursor: not-allowed;
	border: 1px solid #ccc;
}

.item_content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #ddd;
}

/* .accordion_item_content div {
	display: flex;
	align-items: center;
} */

.tabletype_discription {
	font-size: 0.8rem;
}

.accordion_item_content img {
	width: 50px;
	height: 50px;
	margin-right: 10px;
}

/* 予約TOP 店舗お知らせ欄 */
.shop_caution {
	display: block;
	word-break: break-word; 
}
.receipt_btn{
	border: 1px solid #000;
	background: #D9D9D9;
	padding: 8px;
	display: inline;
	color: #000;
	box-shadow: 1px 2px 2px #ccc;
}

/* リンクの折り返し＆赤文字 */
.notice-link-wrap {
	word-break: break-all;
	overflow-wrap: anywhere;
	white-space: normal;
}
/* 赤文字内のリンクも赤に統一 */
.text-red {
	color: #d00 !important;
}

/* 予約業況タイトル */
.availability-title {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-top: 10px;
}