@charset "UTF-8";

/*
■ リセット

■ テキスト・フォント
■ フォント・ロード処理
■ 変数

■ 横幅

■ 店舗選択
■ 日付選択
■ カレンダー

■ 個別調整

*/



/* ■ リセット ==================================================================================== */

.ReservationWidget * { margin: 0; padding: 0; }
.ReservationWidget { line-height: 1; -webkit-text-size-adjust: none; }
.ReservationWidget *,.FeatureReset_ *:before,.FeatureReset_ *:after,.FeatureReset_ *::before,.FeatureReset_ *::after { box-sizing: border-box; }
.ReservationWidget *:focus { outline: none; }
.ReservationWidget figure,.FeatureReset_ img,.ReservationWidget picture,.ReservationWidget video,.ReservationWidget canvas,.ReservationWidget svg { max-width: 100%; height: auto; border: none; vertical-align: bottom; }
.ReservationWidget li { list-style-type: none; }
.ReservationWidget table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.ReservationWidget strong,.ReservationWidget em { font-style: normal; }



/* ■ テキスト・フォント ==================================================================================== */

.ReservationWidget {
letter-spacing: 0.1em;
font-weight: 400;
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
font-feature-settings: "palt";
}



/* ■ 変数 ==================================================================================== */

/*
カラー
border-radius
*/


/* カラー --------------------------------------------------- */

:root {
--c-1: #1EAC4B;
--c-2: #FC6D08;
--c-3: #3c3c3c; /* 本文 */
--c-4: #FFFFE5;
--c-5: #e3e3e3;
--c-6: #c4c4c4;
--c-7: #feeee2; /* hover */
--c-link: #517db4;
--c-alert: #cc0000;
}


/* border-radius --------------------------------------------------- */

:root {
--r-1: 6px;
--r-2: 2px;
}



/* ■ 横幅 ==================================================================================== */

@media only screen and (max-width: 767px) {

}

@media print, screen and (min-width: 768px) {

	.ReservationWidget {
	max-width: 820px;
	margin: 0 auto;	
	}

}

@media (hover: hover) {

	.ReservationWidget a:link {
	transition: color 0.3s ease 0.01s, background-color 0.3s ease 0.01s, opacity 0.3s ease 0.01s;
	}
}



/* ■ 店舗選択 ==================================================================================== */

.SelectShop {
text-align: center;
}

.SelectShop_Mds {
border-top: 4px solid var(--c-1);
font-weight: 700;
}

.SelectShop_List {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
border-top: 1px solid var(--c-5);
}

a.SelectShop_List_Each {
display: flex;
flex-flow: column;
border: 1px solid var(--c-6);
border-radius: var(--r-1);
font-weight: 700;
text-align: center;
color: var(--c-3);
}

/* 選択状態 */
a.SelectShop_List_Each.is_Selected {
color: #fff;
border: 1px solid var(--c-2);
background-color: var(--c-2);
}

@media only screen and (max-width: 767px) {

	.SelectShop {
	margin-top: 30px;
	}

	.SelectShop {
	padding: 0 20px;
	}

	.SelectShop_Mds {
	padding-top: 20px;
	font-size: 20px;
	}

	.SelectShop_List {
	gap: 10px;
	margin-top: 20px;
	padding-top: 20px;
	}

	a.SelectShop_List_Each {
	padding: 14px 5px;
	font-size: 12px;
	}

}

@media print, screen and (min-width: 768px) {

	.SelectShop {
	margin-top: 30px;
	}

	.SelectShop_Mds {
	padding-top: 20px;
	font-size: 24px;
	}

	.SelectShop_List {
	gap: 14px;
	margin-top: 20px;
	padding-top: 30px;
	}

	a.SelectShop_List_Each {
	padding: 16px 20px;
	font-size: 18px;
	}

}

@media (hover: hover) {

	a.SelectShop_List_Each:hover {
	background-color: var(--c-7);
	opacity: 1;
	}

	a.SelectShop_List_Each.is_Selected:hover {
	color: #fff;
	border: 1px solid var(--c-2);
	background-color: var(--c-2);
	}

}


/* ■ 日付選択 ==================================================================================== */

/*
レイアウト
切り替えナビ
週
時間
*/


/* レイアウト --------------------------------------------------- */

.SelectDate_Mds {
border-top: 2px solid var(--c-1);
font-weight: 700;
text-align: center;
}

.SelectDate_Inner {
border-bottom: 1px solid var(--c-5);
}

@media only screen and (max-width: 767px) {

	.SelectDate {
	margin-top: 24px;
	padding: 0 20px;
	}

	.SelectDate_Mds {
	padding-top: 20px;
	font-size: 20px;
	}

	.SelectDate_Inner {
	margin-top: 20px;
	padding-bottom: 20px;
	}

}

@media print, screen and (min-width: 768px) {

	.SelectDate {
	margin-top: 40px;
	}

	.SelectDate_Mds {
	padding-top: 20px;
	font-size: 24px;
	}

	.SelectDate_Inner {
	margin-top: 20px;
	padding-bottom: 30px;
	}

}


/* 切り替えナビ --------------------------------------------------- */

.Nav_Switching {
display: flex;
border-top: 1px solid var(--c-5);
}

.Nav_Switching a {
border: 1px solid var(--c-6);
border-radius: var(--r-1);
font-weight: 700;
color: var(--c-3);
}

.Nav_Switching_PrevNext {
display: flex;
margin-left: auto;
}

.Nav_Switching_Prev,
.Nav_Switching_Next {
position: relative;
}

.Nav_Switching_Prev::before,
.Nav_Switching_Prev::after {
position: absolute;
top: calc(50% - 1.5px);
left: 10px;
width: 10px;
height: 1px;
background-color: var(--c-3);
transform-origin: 0.5px 50%;
content: "";
}

.Nav_Switching_Prev::before {
transform: rotate(-45deg);
}

.Nav_Switching_Prev::after {
transform: rotate(45deg);
}

.Nav_Switching_Next::before,
.Nav_Switching_Next::after {
position: absolute;
top: calc(50% - 1.5px);
right: 10px;
width: 10px;
height: 1px;
background-color: var(--c-3);
transform-origin: calc(100% - 0.5px) 50%;
content: "";
}

.Nav_Switching_Next::before {
transform: rotate(45deg);
}

.Nav_Switching_Next::after {
transform: rotate(-45deg);
}

.Nav_Switching_Calendar {
position: relative;
}

.Nav_Switching_Calendar::before {
position: absolute;
background-image: url(/assets_reservation/img/Icon_Calendar.png);
background-repeat: no-repeat;
background-size: cover;
content: "";
}

.Nav_Switching_Prev.is_Off,
.Nav_Switching_Next.is_Off {
pointer-events: none;
opacity: 0.4;
}

@media only screen and (max-width: 767px) {

	.Nav_Switching {
	padding-top: 20px;
	}

	.Nav_Switching a {
	padding: 11px 18px;
	font-size: 12px;
	}

	.Nav_Switching_PrevNext {
	gap: 10px;
	}

	a.Nav_Switching_Prev {
	padding-left: 24px;
	}

	.Nav_Switching_Prev::before,
	.Nav_Switching_Prev::after {
	top: calc(50% - 0.5px);
	width: 8px;
	transform-origin: 0.4px 50%;
	}

	a.Nav_Switching_Next {
	padding-right: 24px;
	}

	.Nav_Switching_Next::before,
	.Nav_Switching_Next::after {
	top: calc(50% - 0.5px);
	width: 8px;
	transform-origin: calc(100% - 0.4px) 50%;
	}

	a.Nav_Switching_Calendar {
	padding: 11px 10px 11px 33px;
	letter-spacing: 0.05em;
	}

	.Nav_Switching_Calendar::before {
	left: 10px; 
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8.8px;
	}

}

@media print, screen and (min-width: 768px) {

	.Nav_Switching {
	padding-top: 20px;
	}

	.Nav_Switching a {
	padding: 10px 30px;
	}

	.Nav_Switching_PrevNext {
	gap: 10px;
	}

	a.Nav_Switching_Calendar {
	padding: 10px 10px 10px 40px;
	}

	.Nav_Switching_Calendar::before {
	left: 10px; 
	top: 50%;
	width: 20px;
	height: 19px;
	margin-top: -10.5px;
	}

}

@media (hover: hover) {

	.Nav_Switching a:hover {
	opacity: 1;
	background-color: #f6f6f6;
	}

}


/* 週 --------------------------------------------------- */

.SelectDate_Week {
display: grid;
grid-template-columns: repeat(7, 1fr);
align-items: center;
}

a.SelectDate_Week_Each {
display: flex;
flex-flow: column;
position: relative;
text-align: center;
}

.SelectDate_Week_Day {
color: var(--c-3);
}

.SelectDate_Week_Date {
border-radius: var(--r-1);
color: var(--c-3);
background-color: var(--c-5);
}

/* 選択状態 */
a.SelectDate_Week_Each.is_Selected .SelectDate_Week_Date {
font-weight: 500;
color: #fff;
background-color: var(--c-2);
}

a.SelectDate_Week_Each.is_Selected .SelectDate_Week_Date::after {
position: absolute;
left: 50%;
bottom: -10px;
width: 0;
height: 0;
margin-left: -15px;
border-style: solid;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-top: 20px solid #fc6d08;
border-bottom: 0;
content: "";  
}

/* 休日 */
a.SelectDate_Week_Each.is_Off {
pointer-events: none;
opacity: 0.4;
}

/* 土・日 */
.SelectDate_Week_Sat {
color: #0448d1;
}

.SelectDate_Week_Sun {
color: #cc0000;
}

@media only screen and (max-width: 767px) {

	.SelectDate_Week {
	gap: 6px;
	margin-top: 20px;
	}

	.SelectDate_Week_Day {
	font-size: 13px;
	}

	.SelectDate_Week_Date {
	margin-top: 6px;
	padding: 12px 0;
	font-size: 15px;
	letter-spacing: 0.05em;
	}

	.SelectDate_Week_Date small {
	font-size: 12px;
	}

}

@media print, screen and (min-width: 768px) {

	.SelectDate_Week {
	gap: 6px;
	margin-top: 20px;
	}

	.SelectDate_Week_Date {
	margin-top: 6px;
	padding: 10px 0;
	font-size: 18px;
	}

	.SelectDate_Week_Date small {
	font-size: 15px;
	}

}


/* 時間 --------------------------------------------------- */

.SelectDate_Time {
display: grid;
align-items: center;
}

a.SelectDate_Time_Each {
display: flex;
flex-flow: column;
border: 1px solid var(--c-6);
border-radius: var(--r-1);
text-align: center;
color: var(--c-3);
}

.SelectDate_Time_Time {
font-weight: 500;
}

.SelectDate_Time_Slot {
position: relative;
color: var(--c-3);
}

/* 枠：Low */
a.SelectDate_Time_Each.is_Slot_Low .SelectDate_Time_Slot {
color: var(--c-2);
}

/* 枠：Mid */
a.SelectDate_Time_Each.is_Slot_Mid .SelectDate_Time_Slot {
color: var(--c-1);
}

/* 枠：0 */
a.SelectDate_Time_Each.is_Slot_0 {
border: 1px solid var(--c-6);
pointer-events: none;
opacity: 0.4;
}

a.SelectDate_Time_Each.is_Slot_0 .SelectDate_Time_Slot {
color: var(--c-3);
}

/* 枠：Tel */
a.SelectDate_Time_Each.is_Slot_Tel .SelectDate_Time_Slot {
display: flex;
justify-content: center;
color: var(--c-alert);
}

a.SelectDate_Time_Each.is_Slot_Tel .SelectDate_Time_Slot::before {
background-color: var(--c-alert);
mask-image: url(/assets_reservation/img/Icon_Tel.svg);
mask-repeat: no-repeat;
mask-size: contain;
content: "";
}

/* 選択状態 */
a.SelectDate_Time_Each.is_Selected {
color: #fff;
border: 1px solid var(--c-2);
background-color: var(--c-2);
}

a.SelectDate_Time_Each.is_Selected .SelectDate_Time_Slot {
color: #fff;
}

@media only screen and (max-width: 767px) {

	.SelectDate_Time {
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 20px;
	}

	a.SelectDate_Time_Each {
	padding: 8px 8px;
	}

	.SelectDate_Time_Time {
	font-size: 18px;
	}
	
	.SelectDate_Time_Slot {
	margin-top: 6px;
	font-size: 12px;
	}

	a.SelectDate_Time_Each.is_Slot_Tel .SelectDate_Time_Slot::before {
	width: 12px;
	height: 14px;
	margin-right: 4px;
	transform: translateY(-1px);
	}

}

@media print, screen and (min-width: 768px) {

	.SelectDate_Time {
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-top: 30px;
	padding: 0 20%;
	}

	a.SelectDate_Time_Each {
	padding: 12px 20px;
	}

	.SelectDate_Time_Time {
	font-size: 24px;
	}
	
	.SelectDate_Time_Slot {
	margin-top: 6px;
	font-size: 14px;
	}

	a.SelectDate_Time_Each.is_Slot_Tel .SelectDate_Time_Slot::before {
	width: 13px;
	height: 15px;
	margin-right: 4px;
	transform: translateY(0.1px);
	}

}

@media (hover: hover) {

	a.SelectDate_Time_Each:hover {
	background-color: var(--c-7);
	opacity: 1;
	}

	a.SelectDate_Time_Each.is_Selected:hover {
	color: #fff;
	border: 1px solid var(--c-2);
	background-color: var(--c-2);
	}

	a.SelectDate_Time_Each.is_Slot_Tel {
	cursor: default;
	}

	a.SelectDate_Time_Each.is_Slot_Tel:hover {
	color: var(--c-3);
	background-color: #fff;
	}

}


/* ■ カレンダー ==================================================================================== */

/*
レイアウト
切り替えナビ
月
曜日
日
*/


/* レイアウト --------------------------------------------------- */

@media only screen and (max-width: 767px) {

}

@media print, screen and (min-width: 768px) {

}


/* 切り替えナビ --------------------------------------------------- */


/* 月 --------------------------------------------------- */

.Calendar_Month {
border-top: 1px solid var(--c-5);
text-align: center;
}

@media only screen and (max-width: 767px) {

	.Calendar_Month {
	margin-top: 20px;
	padding-top: 18px;
	font-size: 16px;
	}

}

@media print, screen and (min-width: 768px) {

	.Calendar_Month {
	margin-top: 20px;
	padding-top: 20px;
	font-size: 20px;
	}

}


/* 曜日 --------------------------------------------------- */

.Calendar_Day {
display: grid;
grid-template-columns: repeat(7, 1fr);
align-items: center;
}

.Calendar_Day_Each {
display: flex;
justify-content: center;
font-weight: 500;
}

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

/* 土・日 */
.Calendar_Day_Each:nth-of-type(6) {
color: #0448d1;
}

.Calendar_Day_Each:nth-of-type(7) {
color: #cc0000;
}

@media only screen and (max-width: 767px) {

	.Calendar_Day {
	gap: 5px;
	max-width: 450px;
	margin: 16px auto 0;
	font-size: 14px;
	}

	.Calendar_Day_Each span {
	width: 40px;
	padding-left: 2px;
	}

}

@media print, screen and (min-width: 768px) {

	.Calendar_Day {
	gap: 10px;
	margin-top: 20px;
	padding: 0 20%;
	}

	.Calendar_Day_Each span {
	width: 60px;
	padding-left: 2px;
	}

}


/* 日 --------------------------------------------------- */

.Calendar_Date {
display: grid;
grid-template-columns: repeat(7, 1fr);
align-items: center;
}

a.Calendar_Date_Each {
display: flex;
justify-content: center;
position: relative;
font-weight: 500;
color: var(--c-3);
}

.Calendar_Date_Each span {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--c-2);
border-radius: 100%;
}

/* 休日 */
a.Calendar_Date_Each.is_Off {
opacity: 0.4;
pointer-events: none;
}

.Calendar_Date_Each.is_Off span {
border: none;
}

/* 今日 */
a.Calendar_Date_Each.is_Today::after {
position: absolute;
left: 50%;
bottom: 12px;
width: 6px;
height: 6px;
margin-left: -3px;
border-radius: 100%;
background-color: var(--c-2);
content: "";
}

@media only screen and (max-width: 767px) {

	.Calendar_Date {
	gap: 5px;
	max-width: 450px;
	margin: 10px auto 0;
	}

	a.Calendar_Date_Each {
	font-size: 20px;
	}

	.Calendar_Date_Each span {
	width: 40px;
	height: 40px;
	padding-left: 2px;
	padding-bottom: 1px;
	font-size: 14px;
	}

	/* 今日 */
	a.Calendar_Date_Each.is_Today::after {
	bottom: 8px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	}

}

@media print, screen and (min-width: 768px) {

	.Calendar_Date {
	gap: 10px;
	margin-top: 10px;
	padding: 0 20%;
	}

	a.Calendar_Date_Each {
	font-size: 20px;
	}

	.Calendar_Date_Each span {
	width: 60px;
	height: 60px;
	padding-left: 2px;
	padding-bottom: 2px;
	}

}

@media (hover: hover) {

	a.Calendar_Date_Each:hover {
	opacity: 1;
	}

	a.Calendar_Date_Each span {
	transition: 0.3s ease 0.01s;
	}

	a.Calendar_Date_Each:hover span {
	background-color: var(--c-7);
	}

}



/* ■ 個別調整 ==================================================================================== */

/*
汎用
*/


/* 汎用 --------------------------------------------------- */

@media only screen and (max-width: 767px) {

	.PC {
	display: none !important;
	}

}

@media print, screen and (min-width: 768px) {

	.SP {
	display: none !important;
	}

}