@charset "utf-8";
/* CSS Document */
/* ヘッダー */
div#headermenu {
	width:100%;
	height:0px;
	position: absolute;
	top:0;
	left:0;
}
	div#headermenu a#logobtn {
		display: block;
		width:101px;
		height:45px;
		background: url(../images/cmn/logo_pc.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top:30px;
		left:190px;
		z-index: 100;
	}
	div#headermenu div.pcsnsbox {
		width:121px;
		height:21px;
		position: absolute;
		top:56px;
		right:156px;
		z-index: 100;
	}
		div#headermenu div.pcsnsbox a.instbtn {
			display: block;
			width:121px;
			height:21px;
			background: url(../images/cmn/inst_pc.png) no-repeat;
			background-size: 100% 100%;
		}
/* サイドメニュー */
div#headermenu div.menubtn { display: none;}
div#headermenu input.check {display: none;	}		
div#headermenu div#menuBox { display:none; }
/* フッター */
div#footerbox {
	width:100%;
	height:420px;
	background: #282828;
	box-sizing: border-box;
	padding: 0 150px;
}
	div#footerbox div.center {
		width:100%;
		height:420px;
		position: relative;
	}
		div#footerbox div.center div.fmenubox {
			position: absolute;
			width:100%;
			top:70px;
			left:0;
			text-align: left;
		}
			div#footerbox div.center div.fmenubox a {
				text-decoration: none;
				color: #a0a0a0;
				font-size: 14px;
				margin: 0 20px;
				letter-spacing: 1px;
			}
		div#footerbox div.center div.snsbox {
			width:100%;
			height:21px;
			text-align: right;
			position: absolute;
			left:0;
			top:110px;
		}
			div#footerbox div.center div.snsbox a.instbtn {
				display: inline-block;
				width:121px;
				height:21px;
				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:31px;
			text-align: center;
			position: absolute;
			left:0;
			bottom:80px;
		}
			div#footerbox div.center div.logobox a.logo {
				display: inline-block;
				width:87px;
				height:31px;
				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: right;
		font-size: 10px;
		letter-spacing: 1px;
		color: #7f7f7f;
		position: absolute;
		left:0;
		bottom:30px;
	}

/* 下からふわっと現れる */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;    /*アニメーションの名前*/
  -webkit-animation-duration: 2s;
          animation-duration: 2s;         /*アニメーションの実行時間*/
  -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: 2s;
          animation-duration: 2s;         /*アニメーションの実行時間*/
  -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: 2s;
          animation-duration: 2s;         /*アニメーションの実行時間*/
  -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: 2s;
          animation-duration: 2s;         /*アニメーションの実行時間*/
  -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: 2s;
          animation-duration: 2s;         /*アニメーションの実行時間*/
  -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: 0 auto 70px auto; }
	div.reservebox a {
		display: block;
		width:335px;
		height:75px;
		background: url(../images/cmn/reserve.png) no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
	}