@charset "utf-8";
/* CSS Document */
div#contents {
	width:100%;
	overflow-x: hidden;
}
	div#contents div#leftbox {
		width:50vw;
		height:100vh;
		position: fixed;
		top:0;
		left:0;
	}
	div#contents div#mainContents {
		width:50vw;
		min-height:100vh;
		position: absolute;
		top:0;
		right:0;
		box-sizing: border-box;
		padding: 0 6vw 6vw 6vw;
	}
/* サイドメニュー */
div#sidemenu {
	width:50px;
	height:100vh;
	position: fixed;
	top:0;
	right:0;
	z-index: 10;
}
	div#sidemenu div.messageimg {
		width:12px;
		height:172px;
		position: absolute;
		right: 19px;
		top:4vh;
		background: url(../images/cmn/side_message.png) no-repeat;
		background-size: 100% 100%;
		z-index: 60;
	}
	div#sidemenu div.shoptitle {
		width:50px;
		height:100vh;
		background: url(../images/cmn/side_menutitle.png) no-repeat;
		background-position: center center;
		background-size: 14px 232px;
		position: fixed;
		top:0;
		right:0;
		z-index: 60;
	}
	div#sidemenu div.snsbox {
		width:40px;
		height:75px;
		position: fixed;
		right:0px;
		bottom:3vh;
		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:35px;
	height:35px;
	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:-10px;
			opacity: 1;
		}
		div#sidemenu div.menubtn label span.bar.middle { top: 0; }
		div#sidemenu div.menubtn label span.bar.bottom { top: 10px; }
	/* チェックボックス */
	div#sidemenu input.check {
		display: none;
	}		
	/* サイドメニュー */
	div#sidemenu div#menuBox {
		width:55vw;
		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 96vh;
		padding-right: 5vw;
	}
		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:-47vw;}
	div#sidemenu input.check:checked ~ div.menubtn label.menu-btn span.bar.top {
		top:5px;
		left:0px;
		width: 35px;
		-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: 35px;
		top: 5px;
		left:0px;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
/* 下からふわっと現れる */
.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(25px);
            transform: translateY(25px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
@keyframes fadeUpAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(25px);
            transform: translateY(25px); /*縦方向に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(25px);
    transform: translateY(25px); /*縦方向に100pxずらす*/
  }
  50% {
	opacity: 0;                   /*非表示*/
	-webkit-transform: translateY(25px);
            transform: translateY(25px); /*縦方向に100pxずらす*/
  }	
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
@keyframes fadeUpAnime2 {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(25px);
    transform: translateY(25px); /*縦方向に100pxずらす*/
  }
  50% {
	opacity: 0;                   /*非表示*/
	-webkit-transform: translateY(25px);
            transform: translateY(25px); /*縦方向に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(-50px);
            transform: translateY(-50px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
@keyframes fadeDownAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px); /*縦方向に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(50px);
            transform: translateX(50px); /*横方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateX(0);
            transform: translateX(0);     /*元の位置*/
  }
}
@keyframes fadeLeftAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateX(50px);
            transform: translateX(50px); /*横方向に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;                     /*非表示*/
}