@charset "UTF-8";

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////// Restaurant ////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/



/**********************************************************************/
/******************************* Jump ********************************/
/**********************************************************************/

#jump
{
	transition-delay: 1.25s;
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	padding: 1rem;
	padding-bottom: max(5vw, 5rem);
	margin-top: max(2vw, 2rem);
}

#jump > a.moreBt
{
	font-size: clamp(1.2rem, 1.5vw, 1.5rem);
	width:50%;
	max-width: 30rem;
	margin: 1rem;
	line-height: 1.75;
}

#jump > a.moreBt > p
{
	display:flex;
	flex-direction: column;
	align-items: center;
	padding-left: 1em;
}
#jump > a.moreBt > p > span:nth-of-type(1)
{
	font-size: .5em;
}

/**********************************************************************/
/**************************** Restaurant *****************************/
/**********************************************************************/

#restaurant
{
	background-color: rgba(255, 255, 255, 1);
}

#restaurant .head
{
	max-width: 650px;
	margin: 0 auto;
	padding: max(5rem, 5vw) 2rem max(5rem, 5vw);
	display: flex;
	flex-direction: column;
	align-items: center;
}

#restaurant .head h2
{
	font-size: clamp(1.2rem, 5vw, 2.2rem);
	margin: 1.5em 0 1em;
	display:flex;
	flex-direction: column;
	align-items: center;
}

#restaurant .head h2 > span:nth-of-type(1)
{
	font-size: .5em;
}

#restaurant .head .statement
{
	font-family: "Zen", serif;
	margin-top: 1em;
	font-size: clamp(1.1rem, 2vw, 1.3rem);
}

#restaurant .head .statement p
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#restaurant .restaurantWrapper
{
	margin: 0 auto 6rem;
	max-width: 1500px;
	padding: 0 2rem;
}

#restaurant .restaurantWrapper .article
{
	background-color: rgb(255, 255, 255);
}

#restaurant .restaurantWrapper .restaurant_1-3
{
	width: 100%;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

#restaurant .restaurantWrapper .restaurant_1-3 .article
{
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;

	-webkit-justify-content: space-between;
	justify-content: space-between;
}

#restaurant .restaurantWrapper .restaurant_1-3 > .article
{
	width: calc(65% - 1rem);
}

#restaurant .restaurantWrapper .restaurant_2-3
{
	width: 35%;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

#restaurant .restaurantWrapper .restaurant_2-3 > .article
{
	flex: 1 0 auto;
}

#restaurant .restaurantWrapper .restaurant_2-3 > .article:first-child
{
	margin-bottom: 1rem;
}

#restaurant .restaurantWrapper .restaurant_other
{
	flex-wrap: wrap;
	width: calc(100% + 1rem);
}

#restaurant .restaurantWrapper .restaurant_other .article
{
	width: calc(100% / 4 - 1rem);
	margin-top: 1rem;
	margin-right: 1rem;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

#restaurant .restaurantWrapper a.sumnail_bg
{
	width: 100%;
	overflow: hidden;
	display: block;
}

#restaurant .restaurantWrapper a.sumnail_bg > div
{
	width: 100%;
	aspect-ratio: 10 / 6;
	background-size: cover;
	background-position: 50%;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

#restaurant .restaurantWrapper .article._0 a.sumnail_bg > div
{
	aspect-ratio: 100 / 75;
}

body:not(.touch) a.sumnail_bg:hover > div
{
	transform: scale(1.1);
}

#restaurant .restaurantWrapper .textWrapper
{
	width: 100%;
	padding: 1rem;
	
	flex: 1 1 auto;
	
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;

	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

#restaurant .restaurantWrapper .restaurant_1-3 > .article .textWrapper
{
	flex: 1 0 auto;
}

#restaurant .restaurantWrapper .article._0 .textWrapper
{
	padding: 1rem 3rem;
}

#restaurant .restaurantWrapper .textWrapper span.cate
{
/*	font-size: .7em;*/
}

#restaurant .restaurantWrapper .textWrapper h3
{
	margin-top: .5rem;
	margin-bottom: .75rem;
	text-align: left;
}

#restaurant .restaurantWrapper .article:not(._0) .textWrapper h3
{
	font-size: 1rem;
}

#restaurant .restaurantWrapper .flex
{
	margin-bottom: 0rem;
}
#restaurant .restaurantWrapper .flex:last-child
{
	margin-bottom: 0rem;
}

#restaurant .restaurantWrapper .textWrapper div.desc
{
	margin: 0rem 0rem 1rem;
	max-width: 600px;
/*	font-size: .9em;
	color:rgb(75, 75, 75);*/
}

#restaurant .restaurantWrapper .textWrapper div.desc + span
{
	display: block;
	font-size: 1.05rem;
	color: rgb(0, 0, 0);
	margin: -2rem 0 3rem;
}

#restaurant .box
{
	font-size: .9em;
}

/*//////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////*/


@media screen and (max-width: 799px)
{
	#restaurant .restaurantWrapper .textWrapper
	{
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}

	#restaurant .restaurantWrapper .restaurant_1-3
	{
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	
	#restaurant .restaurantWrapper .restaurant_1-3 > .article
	{
		width: 100%;
	}
	
	#restaurant .restaurantWrapper .restaurant_2-3
	{
		width: calc(100% - 0rem);
		margin-right: 0;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		flex-direction: row;
		
		flex-wrap: wrap;
	}
	
	#restaurant .restaurantWrapper .restaurant_2-3 > .article:first-child
	{
		margin-bottom: 0;
		margin-right: 1rem;
	}
	
	#restaurant .restaurantWrapper .restaurant_2-3 > .article
	{
		width: calc(50% - 1rem);
		margin-top: 1rem;
	}
	
	#restaurant .restaurantWrapper .article._1 a.sumnail_bg > div,
	#restaurant .restaurantWrapper .article._2 a.sumnail_bg > div
	{
		aspect-ratio: 1 / 1;
	}
	
	#restaurant .restaurantWrapper .restaurant_other .article
	{
		width: calc(100% - 1rem);
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
}

@media screen and (max-width: 700px)
{
	#jump > a.moreBt
	{
		width:100%;
	}
}

@media screen and (max-width: 600px)
{
	#restaurant h1.secTitle, #restaurant h2.secTitle
	{
		margin-bottom: 4rem;
	}

/*	#restaurant .restaurantWrapper .restaurant_2-3 > .article:first-child
	{
		margin-bottom: 0;
		margin-right: 0rem;
	}
	
	#restaurant .restaurantWrapper .restaurant_2-3 > .article
	{
		width: calc(100% - 1rem);
		margin-top: 1rem;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		flex-direction: row;
	}*/
	
	#restaurant .restaurantWrapper .article._0 .textWrapper
	{
		padding: 1rem;
	}
	
	#restaurant .restaurantWrapper .restaurant_other .article:not(._0) .textWrapper h3
	{
		font-size: .9rem;
	}
	
	#restaurant .restaurantWrapper .restaurant_other .article .desc
	{
		display: none;
	}
	
	#restaurant .restaurantWrapper .restaurant_other a.sumnail_bg > div
	{
		height: 100%;
	}
}

@media screen and (max-width: 600px)
{
	#jump > a.moreBt
	{
		flex-direction: column;
		padding: .75em .5em 1.5em;
	}
	#jump > a.moreBt._box > p
	{
		width: 100%;
		padding: 0;
		margin-bottom: .5em;
	}
}