@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Open_aspect-ratio: 3 / 2;
		--Open_figure_width: 80%;
		--Open_figure_aspect-ratio: auto;
		--Open_Div1_Figure_Img_height: 100%;
		--Katsuryu_Div1_Figure_Img_height: 100%;
		--Koukakudo_Div1_Figure_Img_height: auto;
		--Makabeya_Div1_Figure_Img_height: auto;
		--Ryujinme_Div1_Figure_Img_height: auto;
		--Tatsuro_Div1_Figure_Img_height: auto;
		--Toridake_Div1_Figure_Img_height: auto;
		--Open_Div2_width: 40%;
		--Open_P_text-align: left;
		--Shop_Ul_Li_Figure_flex-basis: auto;
	}
}

@media screen and (min-width:769px) {
	:root {
		--Open_aspect-ratio: 2.618 / 1;
		--Open_figure_width: auto;
		--Open_figure_aspect-ratio: 1 / 1;
		--Open_Div1_Figure_Img_height: auto;
		--Katsuryu_Div1_Figure_Img_height: 100%;
		--Koukakudo_Div1_Figure_Img_height: auto;
		--Makabeya_Div1_Figure_Img_height: auto;
		--Ryujinme_Div1_Figure_Img_height: auto;
		--Tatsuro_Div1_Figure_Img_height: auto;
		--Toridake_Div1_Figure_Img_height: auto;
		--Open_Div2_width: 46%;
		--Open_P_text-align: center;
		--Shop_Ul_Li_Figure_flex-basis: 400px;
	}
}

.open {
	margin: 0 0 var(--Margin_S);
	aspect-ratio: var(--Open_aspect-ratio);
	& > div {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100%;
		& div:nth-of-type(1) {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			width: 100%;
			height: 100%;
			z-index: 2;
			& figure {
				display: flex;
				justify-content: center;
				align-items: center;
				width: var(--Open_figure_width);
				height: 100%;
				aspect-ratio: var(--Open_figure_aspect-ratio);
				& img {
					height: var(--Open_Div1_Figure_Img_height);
					-webkit-filter: drop-shadow( 2px 2px 6px var(--Color_FF100));
					filter: drop-shadow( 2px 2px 6px var(--Color_FF100)); 
				}
			}
		}
		& div:nth-of-type(2) {
			position: absolute;
			bottom: 0;
			right: 0;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			width: var(--Open_Div2_width);
			aspect-ratio: var(--Open_figure_aspect-ratio);
			& figure {
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				width: 100%;
				& img {
					width: 100%;
				}
			}
		}
	}
}

#katsuryu {
	& > div {
		& div:nth-of-type(1) {
			& figure {
				& img {
					height: var(--Katsuryu_Div1_Figure_Img_height);
				}
			}
		}
	}
}

#koukakudo {
	& > div {
		& div:nth-of-type(1) {
			& figure {
				& img {
					height: var(--Koukakudo_Div1_Figure_Img_height);
				}
			}
		}
	}
}

#makabeya {
	& > div {
		& div:nth-of-type(1) {
			& figure {
				& img {
					height: var(--Makabeya_Div1_Figure_Img_height);
				}
			}
		}
	}
}

#ryujinmen {
	& > div {
		& div:nth-of-type(1) {
			& figure {
				& img {
					height: var(--Ryujinme_Div1_Figure_Img_height);
				}
			}
		}
	}
}

#tatsuro {
	& > div {
		& div:nth-of-type(1) {
			& figure {
				& img {
					width: 80%;
					height: var(--Tatsuro_Div1_Figure_Img_height);
				}
			}
		}
	}
}

#toridake {
	& > div {
		& div:nth-of-type(1) {
			& figure {
				& img {
					height: var(--Toridake_Div1_Figure_Img_height);
				}
			}
		}
	}
}

article section {
	& > p {
		padding: 0 0 var(--Margin_M);
		text-align: var(--Open_P_text-align);
	}
	& h2 {
		text-align: center;
		font-size: var(--Size_22);
		font-weight: 600;
	}
	& #Shop {
		display: flex;
		flex-direction: column;
		gap: var(--Gap_L);
		margin: var(--Margin_S) 0 0 ;
		& li {
			display: flex;
			flex-direction: var(--Flex-direction_CRR);
			gap: var(--Gap_L);
			padding: var(--Gap_M);
			border: 1px var(--Color_1D020) solid;
			& figure {
				flex-basis: var(--Shop_Ul_Li_Figure_flex-basis);
				display: flex;
				align-items: center;
				aspect-ratio: 16 / 9;
				overflow: hidden;
				& img {
					width: 100%;
				}
			}
			& > div {
				flex: 1;
				& > div:nth-of-type(1) {
					border-bottom: 1px var(--Color_K) solid;
					& > a {
						display: flex;
						flex-direction: column;
						& h3 {
							padding: 0 var(--Gap_L) 0 0;
							font-size: var(--Size_14);
							color: var(--Color_K);
							font-weight: 600;
							transition: var(--Transition);
							-o-transition: var(--Transition);
							-moz-transition: var(--Transition);
							-webkit-transition: var(--Transition);
						}
						& span {
							position: absolute;
							top: 0;
							right: 0;
							display: flex;
							align-items: center;
							width: var(--Gap_L);
							height: 100%;
						}
						& span:after {
							content: '';
							display: inline-block;
							vertical-align: middle;
							color: var(--Color_1D060);
							line-height: 1;
							width: 1em;
							height: 1em;
							border: var(--Size_01) solid currentColor;
							border-left: 0;
							border-bottom: 0;
							box-sizing: border-box;
							transform: translateX(-25%) rotate(45deg);
						}
						& p {
							padding: 0 var(--Gap_L) 0 0;
							color: var(--Color_K);
							transition: var(--Transition);
							-o-transition: var(--Transition);
							-moz-transition: var(--Transition);
							-webkit-transition: var(--Transition);
						}
						& p:after {
							content: "\f3c5";
							margin: 0 0 0 var(--Gap_S);
							font-family: "Font Awesome 5 Free";
							font-weight: 900;
						}
					}
					& > a:hover {
						& h3 {
							color: var(--Color_R);
						}
						& span:after {
							color: var(--Color_R);
						}
						& p {
							color: var(--Color_R);
						}
					}
				}
				& > div:nth-of-type(2) {
					display: flex;
					flex-direction: column;
					gap: var(--Size_06);
					padding: var(--Gap_M) 0 0;
					& a {
						font-size: var(--Size_10);
						color: var(--Color_K);
					}
					& a:before {
						display: inline-flex;
						justify-content: center;
						margin: 0 var(--Gap_M) 0 0;
						padding: var(--Gap_S);
						width: var(--Size_24);
						font-size: var(--Size_06);
						color: var(--Color_FF);
						background: var(--Color_K);
						border-radius: var(--Border-radius_S);
					}
					& a:nth-of-type(1):before {
						content: 'TEL';
					}
					& a:nth-of-type(2):before {
						content: 'MENU';
					}

					& a:nth-of-type(3):before {
						content: 'SNS';
					}
					& a:after {
						margin: 0 0 0 var(--Gap_S);
						font-family: "Font Awesome 5 Free";
						font-weight: 900;
					}
					& a:nth-of-type(1):after {
						content: "\f3ce";
					}
					& a:nth-of-type(2):after {
						content: "\f1c1";
					}
					& a:nth-of-type(3):after {
						content: "\f08e";
					}
					& a:hover {
						color: var(--Color_R);
					}
					& em {
						font-size: var(--Size_10);
						color: var(--Color_K);
					}
					& em:before {
						display: inline-flex;
						justify-content: center;
						margin: 0 var(--Gap_M) 0 0;
						padding: var(--Gap_S);
						width: var(--Size_24);
						font-size: var(--Size_06);
						color: var(--Color_FF);
						background: var(--Color_K);
						border-radius: var(--Border-radius_S);
					}
					& em:nth-of-type(1):before {
						content: 'MENU';
					}
				}
			}
		}
		& li:hover {
			background: var(--Color_1D001);
		}
	}
}