@charset "utf-8";
/* CSS Document */
div#contents {
	width:100%;
	overflow-x: hidden;
}
	div#contents div#leftbox {
		width:100vw;
		height:100vh;
	}
	div#contents div#mainContents {
		width:100%;
		box-sizing: border-box;
		padding-right: 40px;
		padding-bottom: 100px;
	}
/* サイドメニュー */
div#sidemenu {
	width:40px;
	height:100vh;
	position: fixed;
	top:0;
	right:0;
	z-index: 10;
}
	div#sidemenu div.messageimg {
		width:8px;
		height:115px;
		position: absolute;
		right: 10px;
		top:4vh;
		background: url(../images/cmn/side_message.png) no-repeat;
		background-size: 100% 100%;
		z-index: 60;
	}
	div#sidemenu div.shoptitle {
		width:40px;
		height:100vh;
		background: url(../images/cmn/side_menutitle.png) no-repeat;
		background-position: center center;
		background-size: 12px 199px;
		position: fixed;
		top:0;
		right:0;
		z-index: 60;
	}
	div#sidemenu div.snsbox {
		width:30px;
		height:60px;
		position: fixed;
		right:0px;
		bottom:2vh;
		z-index: 60;
	}
		div#sidemenu div.snsbox a {
			display: block;
			width:20px;
			height:20px;
			margin: 0 auto 10px auto;
		}
		div#sidemenu div.snsbox a.inst {
			background: url(../images/cmn/sns_inst.png) no-repeat;
			background-size: 100% 100%;
		}
		div#sidemenu div.snsbox a.call {
			background: url(../images/cmn/sns_call.png) no-repeat;
			background-size: 100% 100%;
		}
	div#sidemenu div.menubtn {
		width:24px;
		height:24px;
		position: relative;
		top:50vh;
		right:0px;
		z-index: 100;
		margin: 0 auto;
	}
		div#sidemenu div.menubtn label { 
			display: block;
			width:100%;
			height:100%;
			cursor: pointer;
			caret-color: transparent;
		}
		div#sidemenu div.menubtn label:hover {
			opacity: 0.7;
		}
			div#sidemenu div.menubtn label span {
				display: block;
				width: 100%;
				height: 1px;
				background: #636464;
				position: absolute;
				-webkit-transition: all .5s;
				transition: all .5s;
				left:0px;
				top:-6px;
				opacity: 1;
			}
			div#sidemenu div.menubtn label span.bar.middle { top: 0; }
			div#sidemenu div.menubtn label span.bar.bottom { top: 6px; }
	/* チェックボックス */
	div#sidemenu input.check {
		display: none;
	}		
	/* サイドメニュー */
	div#sidemenu div#menuBox {
		width:100vw;
		height:100vh;
		position: absolute;
		top:0;
		left:0px;
		z-index: 10;
		-webkit-transition-property: all;
		transition-property: all;
		-webkit-transition-duration: .5s;
		transition-duration: .5s;
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
		background: url(../images/cmn/side_bar.png) no-repeat, rgba(249, 249, 249, 0.9);
		background-position: left center;
		background-size: auto 97vh;
		padding-left: 40px;
	}
		div#sidemenu div#menuBox div.center {
			padding-top: 10vh;
		}
			div#sidemenu div#menuBox div.center div.logoimg {
				width:152px;
				height:50px;
				background: url(../images/cmn/logo02.png) no-repeat;
				background-size: 100% 100%;
				margin: 0 auto 10vh auto;
			}
			div#sidemenu div#menuBox div.center a {
				display: block;
				font-size: 14px;
				color: #535352;
				text-align: center;
				margin-bottom: 4vh;
				text-decoration: none;
			}
			div#sidemenu div#menuBox div.center div.snsbox2 {
				height:30px;
				margin: 10vh auto 0 auto;
				text-align: center;
			}
				div#sidemenu div#menuBox div.center div.snsbox2 a {
					display: inline-block;
					width:30px;
					height:30px;
					margin: 0 15px;
				}
				div#sidemenu div#menuBox div.center div.snsbox2 a.inst {
					background: url(../images/cmn/sns_inst.png) no-repeat;
					background-size: 100% 100%;
				}
				div#sidemenu div#menuBox div.center div.snsbox2 a.call {
					background: url(../images/cmn/sns_call.png) no-repeat;
					background-size: 100% 100%;
				}
	/* -- チェックをつけた場合 */
	div#sidemenu input.check:checked ~ div#menuBox {left:-100vw; background: rgba(249, 249, 249, 0.9);}
	div#sidemenu input.check:checked ~ div.menubtn label.menu-btn span.bar.top {
		top:0px;
		left:0px;
		width: 25px;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	div#sidemenu input.check:checked ~ div.menubtn label.menu-btn span.bar.middle { opacity: 0;}
	div#sidemenu input.check:checked ~ div.menubtn label.menu-btn span.bar.bottom {	
		width: 25px;
		top: 0px;
		left:0px;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

/* 下からふわっと現れる */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;    /*アニメーションの名前*/
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;         /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;  /*アニメーション後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeUpAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(10px);
            transform: translateY(10px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
@keyframes fadeUpAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(10px);
            transform: translateY(10px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
/* ちょっと遅く下からふわっと現れる */
.fadeUp2 {
  -webkit-animation-name: fadeUpAnime2;
          animation-name: fadeUpAnime2;    /*アニメーションの名前*/
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;         /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;  /*アニメーション後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeUpAnime2 {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(50px);
    transform: translateY(50px); /*縦方向に100pxずらす*/
  }
  50% {
	opacity: 0;                   /*非表示*/
	-webkit-transform: translateY(50px);
            transform: translateY(50px); /*縦方向に100pxずらす*/
  }	
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
@keyframes fadeUpAnime2 {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(50px);
    transform: translateY(50px); /*縦方向に100pxずらす*/
  }
  50% {
	opacity: 0;                   /*非表示*/
	-webkit-transform: translateY(50px);
            transform: translateY(50px); /*縦方向に100pxずらす*/
  }	
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
/* 上からふわっと現れる */
.fadeDown {
  -webkit-animation-name: fadeDownAnime;
          animation-name: fadeDownAnime;    /*アニメーションの名前*/
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;         /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;  /*アニメーション後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeDownAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
@keyframes fadeDownAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
/* 右からふわっと現れる */
.fadeLeft {
  -webkit-animation-name: fadeLeftAnime;
          animation-name: fadeLeftAnime;    /*アニメーションの名前*/
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;         /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;  /*アニメーション後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeLeftAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateX(100px);
            transform: translateX(100px); /*横方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateX(0);
            transform: translateX(0);     /*元の位置*/
  }
}
@keyframes fadeLeftAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateX(100px);
            transform: translateX(100px); /*横方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateX(0);
            transform: translateX(0);     /*元の位置*/
  }
}
/* ふわっと現れる */
.fadeIn {
  -webkit-animation-name: fadeInAnime;
          animation-name: fadeInAnime;    /*アニメーションの名前*/
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;         /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;  /*アニメーション後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeInAnime {
  0% {
    opacity: 0;                   /*非表示*/
  }
  100% {
    opacity: 1;                   /*表示*/
  }
}
@keyframes fadeInAnime {
  0% {
    opacity: 0;                   /*非表示*/
  }
  100% {
    opacity: 1;                   /*表示*/
  }
}
.fadeUpTrigger, .fadeUpTrigger2, .fadeDownTrigger, .fadeLeftTrigger, .fadeInTrigger{
  opacity: 0;                     /*非表示*/
}
/* 予約ボタン */
div.reservebox { margin:50px auto; }
	div.reservebox a {
		display: block;
		width:93.05vw;
		height:20.69vw;
		background: url(../images/cmn/reserve.png) no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
	}