@charset "utf-8";

/* CSS Document */
@media all{
	#comingsoon{
		padding: 100px 0;
		text-align: center;
	}
	#comingsoon .title{
		font-size: 2.5rem;
		margin-bottom: 0.5em;
		font-weight: 600;
	}
	#comingsoon .text{
		font-size: 1rem;
	}
	
	#restaurant .information .textbox .title,
	#restaurant .menu h3,
	#restaurant .menu .menulist li .name,
	#restaurant .menu .otheritem .title,
	#experience .box li .title,
	#experience #sake h3,
	#experience #sake ul li .name{
		font-family: "Zen Old Mincho", serif;
		font-weight: 600;
		font-style: normal;
	}

	#restaurant,
	#marche{
		padding: 80px 0;
	}
	#restaurant h2,
	#marche h2{
		margin-bottom: 60px;
	}
	.information{
		width: calc(100% - 40px);
		max-width: 1600px;
		margin: 0 auto 120px;
		display: flex;
	}
	.information .imagebox{
		width: 47%;
	}
	.information .imagebox .image{
		position: relative;
	}
	.information .imagebox .image::after{
		position: absolute;
		content: "※イメージ画像";
		bottom: 10px;
		right: 20px;
		color: #fff;
		font-size: 0.8rem;
	}
	.information .carousel{
		position: relative;
	}
	.information .carousel .slickslide li .image img{
		aspect-ratio: 25/22;
	}
	.information .carousel .pause,
	.information .carousel .play{
		position: absolute;
		bottom: 18px;
		width: 6px;
		height: 8px;
		cursor: pointer;
	}
	.information .carousel .pause{
		left: 80px;
	}
	.information .carousel .play{
		left: 100px;
	}
	.information .carousel .pause img,
	.information .carousel .play img{
		vertical-align: text-top;
	}
	.information .carousel .slick-dotted.slick-slider{
		margin-bottom: 0;
	}
	.information .carousel .slick-dots{
		bottom: 10px;
		left: 20px;
		width: 100px;
		height: 23px;
		border-radius: 13px;
		background: rgba(0,0,0,.4);
		text-align: left;
		padding: 0 30px 0 5px;
	}
	.information .carousel .slick-dots li{
		width: 13px;
		height: 23px;
		margin: 0;
		vertical-align: top;
	}
	.information .carousel .slick-dots li button{
		width: 13px;
		height: 23px;
	}
	.information .carousel .slick-dots li button:before{
		font-size: 5px;
		line-height: 23px;
		color: #fff;
		opacity: .5;
	}
	.information .carousel .slick-dots li.slick-active button:before{
		opacity: 1;
		font-size: 7px;
		transform: translateY(1px);
	}
	.information .textbox{
		width: 53%;
		padding: 0 0 0 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.information .textbox .title{
		font-size: 1.46rem;
		color: #050807;
		margin-bottom: 40px;
	}
	.information .textbox .text{
		margin-bottom: 40px;
	}
	.information dl{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	#marche .information dl{
		margin-bottom: 40px;
	}
	.information dt{
		width: 160px;
		padding: 0.5em 1em;
		border-bottom: solid 1px #050807;
		display: flex;
		align-items: center;
	}
	.information dd{
		width: calc(100% - 160px);
		padding: 0.5em 2em;
		border-bottom: solid 1px #B5B5B5;
	}
	.menu{
		width: calc(100% - 40px);
		max-width: 1460px;
		margin: 0 auto 80px;
	}
	.menu h3{
		font-size: 2.4rem;
		text-align: center;
		margin-bottom: 40px;
	}
	.menu .menulist{
		width: 100%;
		display: flex;
		margin-bottom: 160px;
	}
	.menu .menulist li{
		width: calc(100% / 3);
		padding: 0 40px;
	}
	.menu .menulist li .image{
		margin-bottom: 20px;
		position: relative;
	}
/*
	.menu .menulist li .image::after{
		position: absolute;
		content: "※イメージ画像";
		bottom: 10px;
		left: 20px;
		color: #fff;
		font-size: 0.8rem;
	}
*/
	.menu .menulist li .name{
		font-size: 1.46rem;
		margin-bottom: 1em;
	}
	.menu .menulist li .text{
		margin-bottom: 1em;
	}
	.menu .menulist li .price{
		font-size: 1.2rem;
		text-align: right;
	}
	.menu .otheritem{
		padding: 0 40px;
	}
	.menu .otheritem .title{
		font-size: 1.46rem;
		text-align: center;
		color: #050807;
		margin-bottom: 20px;
	}
	.menu .otheritem .itemlist{
		width: 100%;
		border: solid #B5B5B5;
		border-width: 1px 0 1px 0;
		padding: 40px 0;
		margin-bottom: 20px;
	}
	.menu .otheritem .itemlist li{
		padding: 20px 80px;
		display: flex;
	}
	.menu .otheritem .itemlist li .tsunagi{
		flex-grow: 1;
		position: relative;
	}
	.menu .otheritem .itemlist li .tsunagi::before{
		content: "";
		position: absolute;
		top: 50%;
		left: 5%;
		width: 90%;
		height: 1px;
		border-bottom: dashed 1px #000;
	}
	.menu .otheritem .note{
		font-size: 0.86rem;
		text-align: right;
	}
	#restaurant .internal_links::before,
	#marche .internal_links::before,
	#experience .internal_links::before{
		position: absolute;
		content: "";
		top: 0;
		right: 0;
		width: 40px;
		height: 21px;
		background: url("../common/images/icon_arrow_link.png") no-repeat rgba(5,8,7,1);
		background-size: 9px 9px;
		background-position: center;
		border-radius: 10px;
	}
	#restaurant .internal_links img,
	#marche .internal_links img{
		width: 20px;
		vertical-align: middle;
	}
	#restaurant .internal_links span,
	#marche .internal_links span{
		padding-left: 30px;
	}
	
	#experience{
		padding: 80px 0 120px;
	}
	#experience h2{
		margin-bottom: 60px;
	}
	#experience .box{
		width: calc(100% - 40px);
		max-width: 1680px;
		margin: 0 auto 160px;
		display: flex;
	}
	#experience .box li{
		width: 50%;
		padding: 0 40px;
	}
	#experience .box li .image{
		margin-bottom: 50px;
	}
	#experience .box li .title{
		font-size: 1.46rem;
		color: #050807;
		margin-bottom: 40px;
	}
	#experience .box li .text{
		margin-bottom: 40px;
	}
	#experience .box li .detail{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin-bottom: 40px;
	}
	#experience .box li .detail dt{
		width: 160px;
		padding: 0.5em 1em;
		border-bottom: solid 1px #050807;
		display: flex;
		align-items: center;
	}
	#experience .box li .detail dd{
		width: calc(100% - 160px);
		padding: 0.5em 2em;
		border-bottom: solid 1px #B5B5B5;
	}
	#experience #sake h3{
		font-size: 1.86rem;
		text-align: center;
		color: #1C1C1C;
		margin-bottom: 30px;
	}
	#experience #sake .maintext{
		text-align: center;
		margin-bottom: 60px;
	}
	#experience #sake ul{
		width: calc(100% - 40px);
		max-width: 1680px;
		margin: 0 auto 80px;
		display: flex;
		flex-wrap: wrap;
	}
	#experience #sake ul li{
		width: 25%;
		padding: 0 40px;
	}
	#experience #sake ul li .image{
		margin-bottom: 20px;
	}
	#experience #sake ul li .name{
		font-size: 1.1rem;
		color: #050807;
		margin-bottom: 20px;
	}
	#experience #sake ul li .text{
		font-size: 0.78rem;
		margin-bottom: 20px;
	}
	#experience #sake ul li .external_links{
		display: inline-block;
		width: 117px;
		font-size: 0.93rem;
		color: #222222;
		padding: 0 20px 0.5em 0;
		position: relative;
		border-bottom: solid 1px #B5B5B5;
	}
	#experience #sake ul li .external_links.lft{
		margin-right: 30px;
	}
	#experience #sake ul li .external_links::before{
		position: absolute;
		content: "";
		top: 7px;
		right: 0;
		width: 9px;
		height: 9px;
		background: url("../common/images/icon_arrow_link_blk.png") no-repeat;
		background-size: contain;
		background-position: center;
	}
	#experience #sake ul li .external_links::after{
		position: absolute;
		content: "";
		bottom: 0;
		left: 0;
		width: 0;
		height: 1px;
		background: #000;
		transition: .3s;
	}
	#experience #sake ul li .external_links:hover{
		opacity: .7;
	}
	#experience #sake ul li .external_links:hover::after{
		width: 100%;
	}
	
	
}

@media (max-width: 767px){

	.information{
		margin: 0 auto 60px;
		flex-direction: column;
	}
	.information .imagebox,
	.information .carousel{
		width: 100%;
		margin-bottom: 20px;
	}
	.information .textbox{
		width: 100%;
		padding: 0;
	}
	.menu h3{
		margin-bottom: 20px;
	}
	.menu .menulist{
		flex-direction: column;
		margin-bottom: 20px;
	}
	.menu .menulist li{
		width: 100%;
		padding: 0 0 30px;
	}
	.menu .menulist li .image{
		margin-bottom: 10px;
	}
	.menu .menulist li .name{
		margin-bottom: 0.5em;
	}
	.menu .menulist li .text{
		margin-bottom: 0.5em;
	}
	.menu .otheritem{
		padding: 0 20px;
	}
	
	#experience .box{
		margin: 0 auto 40px;
		flex-direction: column;
	}
	#experience .box li{
		width: 100%;
		padding: 0 0 40px;
	}
	#experience .box li .image{
		margin-bottom: 20px;
	}
	#experience .box li .title{
		margin-bottom: 10px;
	}
	#experience .box li .text{
		margin-bottom: 10px;
	}
	#experience #sake ul{
		margin: 0 auto;
		flex-direction: column;
	}
	#experience #sake ul li{
		width: 100%;
		padding: 0 40px 40px;
	}
	
}

@media (max-width: 1024px){
	
	#restaurant,
	#marche{
		padding: 40px 0 20px;
	}
	#restaurant h2,
	#marche h2{
		margin-bottom: 40px;
	}
	.information .textbox .title{
		margin-bottom: 20px;
	}
	.information .textbox .text{
		margin-bottom: 20px;
	}
	.information dt{
		width: 90px;
		padding: 0.5em;
	}
	.information dd{
		width: calc(100% - 90px);
		padding: 0.5em 1em;
	}
	.menu{
		margin: 0 auto 40px;
	}
	.menu .otheritem .itemlist li{
		padding: 10px 20px;
	}
	.menu .otheritem .itemlist{
		padding: 20px 0;
		margin-bottom: 10px;
	}

	#experience{
		padding: 40px 0 80px;
	}
	#experience h2{
		margin-bottom: 40px;
	}
	#experience .box li .detail{
		margin-bottom: 30px;
	}
	#experience .box li .detail dt{
		width: 90px;
		padding: 0.5em;
	}
	#experience .box li .detail dd{
		width: calc(100% - 90px);
		padding: 0.5em 1em;
	}
	#experience #sake h3{
		margin-bottom: 20px;
	}
	#experience #sake .maintext{
		margin-bottom: 30px;
	}
	#experience #sake ul li .image{
		margin-bottom: 10px;
	}
	#experience #sake ul li .name{
		margin-bottom: 10px;
	}
	#experience #sake ul li .text{
		margin-bottom: 10px;
	}
	
}

@media (min-width: 768px){

	.menu .otheritem .itemlist{
		column-count: 2;
	}
	#marche .information .textbox .internal_links,
	#experience .box .internal_links{
		margin: 0 auto 0 0;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1024px){

	.information .textbox{
		padding: 0 0 0 40px;
	}
	
	.information{
		margin: 0 auto 60px;
	}
	.menu .menulist{
		margin-bottom: 80px;
	}
	.menu .menulist li{
		padding: 0 10px;
	}
	
	#experience .box{
		margin: 0 auto 80px;
	}
	#experience .box li{
		padding: 0 15px;
	}
	#experience .box li .image{
		margin-bottom: 30px;
	}
	#experience .box li .title{
		margin-bottom: 20px;
	}
	#experience .box li .text{
		margin-bottom: 20px;
	}
	#experience #sake ul{
		margin: 0 auto 40px;
	}
	#experience #sake ul li{
		width: 50%;
		padding: 0 40px 40px;
	}
	
}

@media screen and (min-width: 1025px){

	#restaurant .internal_links img,
	#marche .internal_links img{
		vertical-align: baseline;
	}
	
}