@charset "utf-8";
/* CSS Document */
/* ヘッダー */
div#headermenu {
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
}
	div#headermenu a#logobtn {
		display: block;
		width:22.77vw;
		height:8.47vw;
		background: url(../images/cmn/logo_sp.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top:4.16vw;
		left:4.16vw;
		z-index: 100;
	}
	div#headermenu div.pcsnsbox {display: none;}

/* サイドメニュー */
div#headermenu div.menubtn {
	width:80px;
	height:50px;
	position: absolute;
	top:4.16vw;
	right:4.16vw;
	z-index: 100;
}
	div#headermenu div.menubtn label { 
		display: block;
		width:40px;
		height:50px;
		position: absolute;
		top:0px;
		right:10px;
		z-index: 60;
		cursor: pointer;
		caret-color: transparent;
	}
	div#headermenu div.menubtn label:hover {
		opacity: 0.7;
	}
		div#headermenu div.menubtn label span {
			display: block;
			width: 40px;
			height: 2px;
			background: #9FA0A0;
			position: absolute;
			-webkit-transition: all .5s;
			transition: all .5s;
			left:0px;
			top:15px;
			z-index: 60;
			opacity: 1;
		}
		div#headermenu div.menubtn label span.bar.middle { top: 25px; }
		div#headermenu div.menubtn label span.bar.bottom { top: 35px; }
	/* チェックボックス */
	div#headermenu input.check {
		display: none;
	}		
	/* サイドメニュー */
	div#headermenu div#menuBox {
		display: none;
		width:100%;
		min-width: 300px;
		height:100%;
		min-height:100%;
		position: absolute;
		top:0px;
		right:0px;
		box-sizing: border-box;
		padding-top: 35vw;
		overflow-y: scroll;
		z-index: 20;
		-webkit-transition-property: all;
		transition-property: all;
		-webkit-transition-duration: .5s;
		transition-duration: .5s;
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
		background: rgba(255, 255, 255, 0.8) ;
		opacity: 0;
	}
		div#headermenu div#menuBox div.center {
			width:90%;
			margin: 0 auto;
		}
			div#headermenu div#menuBox div.center div.menu {
				width:100%;
				margin-bottom: 10vw;
				text-align: center;
			}
			div#headermenu div#menuBox div.center div.menu a {
				color: #111;
				font-size: 16px;
				font-weight: bold;
				text-decoration: none;
				letter-spacing: 2px;
				position: relative;
				text-align: center;
			}
	div#headermenu div#menuBox div.center div.spsnsbox {
		width:100%;
		padding-top: 30vw;
		background: url(../images/cmn/logo_f.png) no-repeat;
		background-size: 28vw auto;
		background-position: center top 10vw;
	}
		div#headermenu div#menuBox div.center div.spsnsbox a.instbtn {
			display: block;
			width:121px;
			height:21px;
			background: url(../images/cmn/inst_f.png) no-repeat;
			background-size: 100% 100%;
			margin: 0 auto;
		}
	/* -- チェックをつけた場合 */
div#headermenu input.check:checked ~ div#menuBox {display: block; opacity: 1;}
	div#headermenu input.check:checked ~ div.menubtn label.menu-btn span.bar.top {
		top:25px;
		left:0px;
		width: 35px;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	div#headermenu input.check:checked ~ div.menubtn label.menu-btn span.bar.middle { opacity: 0;}
	div#headermenu input.check:checked ~ div.menubtn label.menu-btn span.bar.bottom {	
		width: 35px;
		top: 25px;
		left:0px;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
/* ヘッダー */
div#headerbox {
	width:100%;
	height:70px;
	box-sizing: border-box;
	padding: 20px 0 0 0;
}
	div#headerbox div.center {
		width:96%;
		margin: 0 auto;
	}
		div#headerbox div.center a#logo {
			display: block;
			width:159px;
			height:40px;
			background: url(../images/cmn/logo.png) no-repeat;
			background-size: 100% 100%;
		}
/* フッター */
div#footerbox {
	width:100%;
	background: #282828;
	box-sizing: border-box;
	padding: 10.41vw 0 11.66vw 0;
}
	div#footerbox div.center {
		width:80%;
		margin: 0 auto;
	}
		div#footerbox div.center div.fmenubox {
			width:100%;
			text-align: left;
		}
			div#footerbox div.center div.fmenubox a {
				display: block;
				text-decoration: none;
				color: #fff;
				font-size: 14px;
				margin: 4.1vw 0;
				letter-spacing: 1px;
			}
		div#footerbox div.center div.snsbox {
			width:100%;
			margin: 14.30vw 0 0 0;
		}
			div#footerbox div.center div.snsbox a.instbtn {
				display: inline-block;
				width:28vw;
				height:5vw;
				background: url(../images/cmn/inst_f.png) no-repeat;
				background-size: 100% 100%;
				background-position: center center;
			}
		div#footerbox div.center div.logobox {
			width:100%;
			height:9vw;
			text-align: center;
			margin: 22.91vw 0 0 0;
		}
			div#footerbox div.center div.logobox a.logo {
				display: inline-block;
				width:24vw;
				height:9vw;
				background: url(../images/cmn/logo_f.png) no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				margin: 0 auto;
			}
	div#footerbox small {
		display: block;
		width:100%;
		text-align: center;
		font-size: 10px;
		letter-spacing: 1px;
		color: #7f7f7f;
		margin: 22.22vw 0 0 0;
	}
div#contents {
	max-width:100%;
	overflow-x: hidden;
}

/* 下からふわっと現れる */
.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(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
@keyframes fadeUpAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に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;
	}