@charset "UTF-8";

body {
	margin:0;
	padding:0;
	font-family: a-otf-futo-go-b101-pr6n, sans-serif;
	font-weight: 300;
	font-style: normal;
	color: #000;
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	background-size: 400% 400%;
	animation: AnimationName 9s ease infinite;
	background: #c8d0c5;
	letter-spacing: 0.0em;
}

a {
   color:#000;
   text-decoration:none;
}

a:hover {
   color:#707070;
   text-decoration:none;
}

img { 
	border:0;
	width: 100%;
	height: 100%;
}

h1,h2,h3,h4,h5,h6,img{
	margin:0;
	padding: 0px;
}

p,ol,ul,li{list-style: none;margin: 0px;padding: 0px;}


html,body {
	height: 100%;
	padding: 0;
	margin: 0;
}

.back{
	position: absolute;
	z-index: -5;
	width: 100%;
	height: 100%;
}

.wrapper{
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-columns: 20% 60% 20%;
	grid-template-rows: 20% 60% 20%;
}

.box1,.box4,.box7{
	border-right: thin solid #000;
}

.box5, .box8{
	position: relative;
}

.box3,.box6,.box9{
	border-left: thin solid #000;
}


.left {
	position: relative;
	left: 0;
	margin-left: 5px;
	margin-top: 10px;
	width: 10px;
	float: left;
}

.right {
	width: 100%;
	margin-top: 10px;
	text-align: right;
}

.right img{
	padding-right: 5px;
	width: 10px;
}

.menu{
	position: absolute;
	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
	margin: auto;
	padding: 50px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr 1fr 1fr 1fr;
	text-align: center;
}

.reserve{
	grid-column-start: 1;
	grid-column-end: 3;
 	grid-row-start: 1;
 	grid-row-end: 3;
	text-align: center;
}

.reserve img{
	width: 90%;
	max-width: 500px;
}

.access{
	grid-column-start: 1;
	grid-column-end: 3;
 	grid-row-start: 3;
 	grid-row-end: 4;
	text-align: center;
}

.access img{
	width: 40%;
	max-width: 200px;
}

.insta{
	grid-column-start: 1;
	grid-column-end: 2;
 	grid-row-start: 4;
 	grid-row-end: 5;
}

.line{
	grid-column-start: 2;
	grid-column-end: 3;
 	grid-row-start: 4;
 	grid-row-end: 5;
}

.insta{
	text-align: right;
	padding-right: 5%;
	padding-top: 5%;
}

.line{
	text-align: left;
	padding-left: 5%;
	padding-top: 5%;
}

.insta img,.line img{
	width: 60%;
	max-width: 150px;
}


.copy{
	width: 100%;
	margin-top: 10px;
	text-align: right;
}

.copy img{
	padding-right: 5px;
	width: 8px;
	bottom: 0;
}


.logo{
	width: 30%;
	min-width: 200px;
	position: absolute;
	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
	margin: auto;
}



.sp {display: none !important;}
.pc {display: block !important;}
.pc2 {display: inline !important;}

.dummy{float: none;}