@charset "utf-8";
/*=================================
ナビゲーションレイアウト
===================================*/
/*スマホの空き状況ボタン*/
.aki{
width: 100%;
display: flex;
justify-content: center;
margin-top: 10px
}
.aki a{display: block;
	width: 75%;
    background-color:#265CFF;
    border-radius: 1px;
    align-items: center;
	text-align:center;
	padding: 8px 0px 8px 0px;
	font-size: 14px;
    font-family: "Klee One", cursive;
    font-weight: 400;
    color: #fff;
	line-height: 1;
    text-decoration: none;
	letter-spacing: 0.05em;
    transition: 0.3s ease-in-out;
}
.aki a:hover{
    background:rgba(255, 255, 77, 0.8);
    color:#265CFF;
}
/*インスタ*/
.sns img{
	width:28px;
	height: auto;
	margin-top: 7px
}
.sns  a{
border: none;
transition:all 0.3s;}
.sns a:hover {opacity: 0.3}
/*メニューふりがな*/
.furi{font-size: 11px;
color: #265CFF;
letter-spacing: 0em}
/* ########### 427px 以下 ########### */
@media screen and (max-width: 427px) {
/*ナビゲーションPC*/
.nav2{
display: none
}	
/*予約の固定*/
.circle{
display: none}
nav {
  width: 200px;
  height: 100%;
  padding-top: 10px;
  background-color: rgba(255, 255, 255, 0.9);
	border-left: 1px solid #000;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 10;
  transform: translate(200px);
  transition: all .5s;
	    font-family: "Klee One", cursive;
    font-weight: 400;
}
/*ナビゲーションSP*/
nav ul{
	margin-top:0px;
	float:none;
	list-style:none;

}
nav ul li a{
	text-align:left;
	display: block;
	color: #000;
	text-decoration: none;
	font-size:16px;
	line-height:20px;
	letter-spacing: 0.15em;
	margin-left:30px;
transition:all 0.3s;
}

nav ul li a:hover {color:#265CFF;
display: block;
}

nav li {
  color: #fff;
  text-align: center;
  padding: 3px 0;
}
nav.open {
  transform: translateZ(0);
}		
}

/* ########### 428pxから530pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 530px) {
/*ナビゲーションPC*/
.nav2{
display: none
}	
/*予約の固定*/
.circle{
display: none}
nav {
  width: 230px;
  height: 100%;
  padding-top: 30px;
  background-color: rgba(255, 255, 255, 0.9);
	border-left: 1px solid #000;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 10;
  transform: translate(230px);
  transition: all .5s;
	    font-family: "Klee One", cursive;
    font-weight: 400;
}
/*ナビゲーションSP*/
nav ul{
	margin-top:0px;
	float:none;
	list-style:none;

}
nav ul li a{
	text-align:left;
	display: block;
	color: #000;
	text-decoration: none;
	font-size:16px;
	line-height:20px;
	letter-spacing: 0.15em;
	margin-left:30px;
transition:all 0.3s;
}

nav ul li a:hover {color:#265CFF;
display: block;
}

nav li {
  color: #fff;
  text-align: center;
  padding: 8px 0;
}
nav.open {
  transform: translateZ(0);
}
}
/* ########### 531pxから768pxまで ########### */
@media screen and (min-width: 531px) and (max-width: 768px) {
/*ナビゲーションPC*/
.nav2{
display: none
}	
/*予約の固定*/
.circle{
display: none}
nav {
  width: 250px;
  height: 100%;
  padding-top: 80px;
  background-color: rgba(255, 255, 255, 0.9);
	border-left: 1px solid #000;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 10;
  transform: translate(250px);
  transition: all .5s;
	    font-family: "Klee One", cursive;
    font-weight: 400;
}
/*ナビゲーションSP*/
nav ul{
	margin-top:0px;
	float:none;
	list-style:none;

}
nav ul li a{
	text-align:left;
	display: block;
	color: #000;
	text-decoration: none;
	font-size:16px;
	line-height:20px;
	letter-spacing: 0.15em;
	margin-left:30px;
transition:all 0.3s;
}

nav ul li a:hover {color:#265CFF;
display: block;
}

nav li {
  color: #fff;
  text-align: center;
  padding: 10px 0;
}
nav.open {
  transform: translateZ(0);
}	
}
/* ########### 768px 以下 ########### */
@media screen and (max-width: 768px) {
/*三本線*/
.menu-trigger {
  display: inline-block;
  width: 36px;
  height: 28px;
  vertical-align: middle;
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
/*   transform: translateX(0);
  transition: transform .5s;
 */}
/* .menu-trigger.active {
  transform: translateX(-250px);
}
 */.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #265CFF;
  transition: all .5s;
}
.menu-trigger.active span {
  background-color: #265CFF;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(12px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
  top: 12px;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-12px) rotate(45deg);
}	
}
/* ########### 769px 以上 ########### */
@media screen and (min-width: 769px) {
/*ナビゲーションsp*/
nav{
display: none
}	
/*ハンバーガーボタン*/
.menu-trigger{
display: none
  }
#navArea{
  }
.navArea-inner{
position: fixed;
top:60px;
  }
/*ナビゲーションPC*/
.nav2{
position: absolute;
padding: 10px 0px 15px 0px;
background-color: rgba(255, 255, 255, 0.6);
height: auto;
box-sizing:border-box;
border: 1px solid #000;
overflow-x: hidden;
overflow-y: auto;
transition: all .5s;
z-index: 3;
opacity: 0;
display: block
}
.nav2 ul{list-style: none;}

.nav2 a{
	display: block;
	text-decoration: none;
	color: #000;
	padding:12px 0px 0px 0px;;
	transition:all 0.3s;
	text-align: center;
	font-size: 14px;
	font-family: "Klee One", cursive;
	font-weight: 500;
	font-style: normal;
	line-height: 1.0em;
	letter-spacing: 0em
}
.nav2 a:hover {color:#265CFF;
display: block;}
	
/*予約の固定*/
.circle{
margin-left: auto;
margin-right: auto;
position: absolute;
top:420px;
}
.circle a{
width: 100%;
height: 100%;
position: relative;
display: inline-block;
border-radius: 50%;
background: rgba(38, 92, 255, 0.7);
text-align:center;
transition:all 0.3s;
}
.circle a span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align:center;
  color: #fff;
  font-size: 16px;
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
transition:all 0.3s;
}

.circle a:hover {
background-color: rgba(255, 255, 77, 0.8);
color: #265CFF;cursor: pointer;}
.circle a span:hover {
color: #265CFF;
}	
}
/* ########### 769pxから960pxまで ########### */
@media screen and (min-width: 769px) and (max-width: 960px) {
/*ナビゲーションPC*/
.nav2{
width:110px;
}
/*予約の固定*/
.circle a{
width: 110px;
height: 110px;
}
.circle a span {
  width :110px;
}
}
/* ########### 961px 以上 ########### */
@media screen and (min-width: 961px) {

/*ナビゲーションPC*/
.nav2{
width:130px;
}	
/*予約の固定*/
.circle a{
width: 130px;
height: 130px;
}
.circle a span {
  width :130px;
}
}