@charset "utf-8";



/* TABLET LAYOUT 1
**************************************************************************************************** 721~~~~~ */
@media only screen and (min-width: 769px) {
div.header {
	position: absolute;
	width: 100%;
	border: dotted 0px #f00;
	}
/*
header {
	position: absolute;
	margin-top: -80px;
	}
*/
header {}
.idx {margin-top: -80px; }
.fixed {margin: 0; }

header div#logo {
	position: static;
	width: 80px;
	margin: 0;
	pointer-events: auto;
	}
header div#logo a {padding: 5px; }
header div#logo img {
	width: auto;
	height: 70px;
	animation: fx-h1 2s ease-out 0.2s 1 normal both;
	-webkit-animation: fx-h1 2s ease-out 0.2s 1 normal both;
	}
@keyframes fx-h1 {
	0%	{opacity: 0; }
	100%	{opacity: 1; }
	}
@-webkit-keyframes fx-h1 {
	0%	{opacity: 0; }
	100%	{opacity: 1; }
	}


/*++++++++++++++++++++++++++++++ navigation ++++++++++++++++++++++++++++++*/
/* :::::: drawer menu :::::: */
nav span#snss {display: none; }

header div#ul {
	position: absolute;
	z-index: 10;
	top:50%;
	right: 10px;
	width: auto;
	-webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%);
	transform: translate(0,-50%);
	text-align: right;
	pointer-events: auto;
	}
header ul {
	display: -webkit-flex;
	display: flex;
	}
header ul li {
	margin: 10px 0 0 2.0vw;
	font-size: 0.8vw;
	font-weight: normal;
	line-height: 1.4;
	text-align: center;
	border: dotted 0px #f00;
	}
header ul li span {
	font-size: 0.9vw;
	font-family: 'Shrikhand', cursive;
	font-weight: normal;
	}
header ul li.cs {color: rgba(53, 32, 0, 0.4); }
header ul li a {
	display: block;
	padding: 2px;
	}

@media only screen and (min-width: 1201px) {	/* ************** */
header ul li {
	margin: 10px 0 0 20px;
	font-size: 1.0rem;
	}
header ul li span {font-size: 1.4rem; }
}



/*++++++++++++++++++++++++++++++ navigation ++++++++++++++++++++++++++++++*/

footer {}
footer>div {max-width: 1200px; }
footer div#footer_logo {text-align: left; }
footer div#footer_logo img {width: 120px; }

footer div#snss {
	position: absolute;
	top: 0;
	right: 20px;
	text-align: right;
	}
footer div#snss img {
	width: 45px;
	margin: 0 0 0 20px;
	}

footer ul {
	position: absolute;
	display: -webkit-flex;
	display: flex;
	top: 60px;
	right: 20px;
	border-right: solid 1px rgba(255, 255, 255, 0.3);
	}
footer ul li {
	font-size: 0.7vw;
	line-height: 1.5;
	text-align: center;
	border-left: solid 1px rgba(255, 255, 255, 0.3);
	}
footer ul li span {font-size: 0.6vw; }
footer ul li.cs {color: rgba(255, 255, 255, 0.4); }
footer ul li a {padding: 0 12px; }

@media only screen and (min-width: 1201px) {	/* ************** */
footer ul li {font-size: 1.0rem; }
footer ul li span {font-size: 0.9rem; }
}

footer ul li a {display: block; }
footer ul li a br {display: inline; }
footer ul li span:before, footer ul li span:after {content: none; }
footer ul li a:before {content: none; }

footer address {padding: 30px 0 40px 0; }










div#main {
	padding: 0;
	}
#idx div#main {
	padding: 0;
	}
#qa div#main {
	padding-top: 80px;
	}



/*++++++++++++++++++++++++++++++ INDEX ++++++++++++++++++++++++++++++*/
div.slide_contents {height: 400px; }
#idx div.slide_contents {position: absolute; }

div.slide_contents div.top_img {
	width: 100%;
	height: 100%;
	}
div.slide_contents div.top_img img {
	height: 100%;
	object-fit: cover;
	}
#food div.slide_contents div.top_img img {object-position: 50% 60%; }
#drink div.slide_contents div.top_img img {object-position: 50% 88%; }
#beer div.slide_contents div.top_img img {object-position: 40% 50%; }
#bbq div.slide_contents div.top_img img {object-position: 90% 75%; }
#yoga div.slide_contents div.top_img img {object-position: 50% 75%; }

div.slide_contents h1 {
	background: rgba(255, 255, 255, 0.5);
	top: 0;
	left: 0;
	width: 100%;
	padding: 4px 20px;
	color: rgba(53, 32, 0, 1);
	font-size: 1.6rem;
	font-weight: normal;
	text-align: center;
	}
div.slide_contents h1 br {display: none; }
/*div.slide_contents p {top: 67%; font-size: 3.5rem; }*/

div.slide_contents span#logo {bottom: 20%; }
div.slide_contents span#logo img {height: 200px; }
#idx div.slide_contents span#logo {bottom: 38%; }
#idx div.slide_contents span#logo img {}

div.slide_contents span#snss {bottom: 150px; }
div.slide_contents span#snss img {width: 35px; }
div.slide_contents span#reserve {
	top: 60%;
	bottom: auto;
	right: calc(30% - 20vmin);
	left: 70%;
	transform: ratate(8deg);
	-webkit-transform: rotate(8deg);
	}
div.slide_contents span#reserve img {height: 20vmin; }


@media only screen and (max-height: 481px) {
div.slide_contents span#logo {bottom: calc(calc(calc(100% - 120px) / 4) + 80px); }
div.slide_contents span#logo img {height: calc(calc(100vh - 120px) / 2); }
div.slide_contents span#snss {
	top: calc(50% - 90px);
	left: calc(100% - 65px);
	right: 30px;
	border: dotted 0px #f00;
	}
div.slide_contents span#snss img {}
div.slide_contents span#reserve {
	top: calc(calc(50vh - 60px) + 3vmin);
	bottom: auto;
	right: calc(calc(100% - 30px) - 20vmin);
	left: 30px;
	transform: ratate(-5deg);
	-webkit-transform: rotate(-5deg);
	}
div.slide_contents span#reserve img {height: 20vmin; }
}







/*++++++++++++++++++++++++++++++ INDEX ++++++++++++++++++++++++++++++*/



div.bb {padding: 100px 0; }
div.bb div {
	width: 100%;
	max-width: 1180px;
	}
#idx div.bb div h2 {font-size: 2.9rem; }
div.bb div h3 {font-size: 3.0rem; }


div.bb div.btn {
	width: 50%;
	max-width: 500px;
	}
div.bb div.btn a {font-size: 3rem; }
div.bb div.btn a:hover {}

div.bb div p.tel {font-size: 2rem; }
div.bb div p.tel a {font-size: 3rem; }
#idx div.bb div p {font-size: 2rem; }



section {background: none; }
section div.bg {position: absolute; }
section div.bg img {object-fit: cover; }
section:nth-of-type(1) div.bg img {object-position: 50% 70%; }
section:nth-of-type(2) div.bg img {object-position: 50% 95%; }
section:nth-of-type(3) div.bg img {object-position: 80% 95%; }
section:nth-of-type(4) div.bg img {object-position: 95% 95%; }
section:nth-of-type(5) div.bg img {object-position: 50% 80%; }
section:nth-of-type(6) div.bg img {object-position: 5% 95%; }

div.area1 {
	z-index: 1;
	visibility: hidden;
	}
/*section:nth-child(odd) div.area1 {margin-left: -40%; }*/
/*section:nth-child(even) div.area1 {margin-left: 40%; }*/
div.area2 {background: rgba(255, 255, 255, 0.75); }
section:nth-child(odd) div.area2 {margin-right: calc(100% - 500px); }
section:nth-child(even) div.area2 {margin-left: calc(100% - 500px); }

@media only screen and (min-width: 1201px) {
section:nth-child(odd) div.area2 {
	margin-right: calc(calc(calc(100% - 1200px) / 2) + 700px);
	padding-left: calc(calc(100% - 1200px) / 2);
	}
section:nth-child(even) div.area2 {
	margin-left: calc(calc(calc(100% - 1200px) / 2) + 700px);
	padding-right: calc(calc(100% - 1200px) / 2);
	}
}
div.area3 {
	position: relative;
	padding: 100px 80px 80px;
	border: solid 0px #000;
	}
div.area4 {border: solid 0px #000; }

/*++++++++++++++++++++++++++++++ slide animation ++++++++++++++++++++++++++++++*/
section.fadeIn div.area2 {visibility: visible !important; }
section.fadeIn:nth-child(odd) div.area2 {
	animation: a2L 0.8s ease-out 0s 1 normal both;
	-webkit-animation: a2L 0.8 1s ease-out 0s 1 normal both;
	}
section.fadeIn:nth-child(even) div.area2 {
	animation: a2R 0.8s ease-out 0s 1 normal both;
	-webkit-animation: a2R 0.8 1s ease-out 0s 1 normal both;
	}

@keyframes a2L, @keyframes a2R {
	0% {opacity: 0; }
	100% {
		opacity: 1;
		transform: translateX(0);
		}
	}
@keyframes a2L {0% {transform: translateX(-100%); } }
@keyframes a2R {0% {transform: translateX(100%); } }

.fadeIn div.area3 {
	animation: area3 0.5s ease-out 0.8s 1 normal both;
	-webkit-animation: area3 0.5s ease-out 0.8s 1 normal both;
	visibility: visible !important;
	}
@keyframes area3 {
	0% {opacity: 0; }
	100% {opacity: 1; }
	}
/*++++++++++++++++++++++++++++++ slide animation ++++++++++++++++++++++++++++++*/

div.area1 h3 {
	top: 10px;
/*	font-size: 5rem;*/
	font-size: 4rem;
	text-align: left;
	white-space: nowrap;
	}
section:nth-child(odd) div.area1 h3 {
/*	left: calc(100% + 5px);*/
	right: calc(100% + 5rem);
	right: -0%;
	left: 100%;
	transform: ratate(90deg);
	-webkit-transform: rotate(90deg);
	transform-origin: 2.5rem 2.5rem;
	}
section:nth-child(even) div.area1 h3 {
	left: -5px;
	transform: ratate(90deg);
	-webkit-transform: rotate(90deg);
	transform-origin: 0 0;
	}
div.area1 h4 {
	position: static;
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	padding: 0 15px;
	font-size: 8rem;
	text-align: right;
	}
section:nth-child(even) div.area1 h4 {text-align: left; }

div.area4 div.txt_logo {
	padding: 40px 0 30px;
	font-size: 3rem;
/*	border: dotted 1px #f00;*/
	}
div.area4 img {}
div.area4 p {font-size: 1.6rem; }
div.area4 div.btn {}
div.area4 div.btn a {font-size: 1.8rem; }
div.area4 div.btn a:hover {}







div.box h2 {
	max-width: 1200px;
	font-size: 3.0rem;
	}








div.box dl.access {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 70%;
	max-width: 840px;
	}
div.box dl.access dt, div.box dl.access dd {
	width: 20%;
	margin-top: 20px;
	}
div.box dl.access dd {
	width: 80%;
	padding: 0 20px;
	border-left: solid 7px #eee;
	}







div.box div.qa {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 96%;
	max-width: 1180px;
	}
div.qa span.qabox {
	width: 49%;
	margin-bottom: 50px;
	}
div.qa span.qabox h5, div.qa span.qabox p {
	width: calc(100% - 5rem - 2%);
	margin-left: 2%;
	line-height: 1.6;
	}
div.qa span.qabox h5 {
	font-size: 1.6rem;
	line-height: 1.4;
	}
div.qa span.qabox p {font-size: 1.4rem; }
div.qa span.qabox span {
	width: 5rem;
	height: 5rem;
	font-size: 2rem;
	}
div.qa span.qabox span:first-child {line-height: 5rem; }
div#qa h4 {margin-bottom: 50px; }






















div.b1200 {width: calc(100% - 40px); }
div#attention p {margin: 10px 10px 0; }
span.flx {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	}
span.flx div{width: 49%; }










div#ig_body {}
div.gallery {width: 280%; }












div#twfb {padding: 50px 0; }
div#twfb>div {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	}
div#twfb br {display: none; }
div.tw {margin: 0 30px 50px; }
div.tw div.fb-page {width: 500px; }































}





/* PC LAYOUT 1
**************************************************************************************************** 801~~~~~ */
@media only screen and (min-width: 801px) {


/*
div#main {margin-top: 0px; }
*/
/*++++++++++++++++++++++++++++++ INDEX ++++++++++++++++++++++++++++++*/

/*++++++++++++++++++++++++++++++ INDEX ++++++++++++++++++++++++++++++*/


}






/* PC LAYOUT 2
**************************************************************************************************** 1001~~~~~ */
@media only screen and (min-width: 1001px) {

}


/* PC LAYOUT 3
**************************************************************************************************** 1021~~~~~ */
@media only screen and (min-width: 1021px) {

}