@charset "utf-8";
/* CSS Document */
/* ヘッダー */
div#menubox { display: none;}
/* サイドメニュー */
div#sideMenu {
	width:100%;
	height:70px;
	background: url(../images/cmn/headerbg.png);
	position: fixed;
	top:0px;
	z-index: 20;
}
div#sideMenu a.logo {
	
}
div#sideMenu a.logo img { height:70px;}
	/* チェックボックス */
	div#sideMenu input.check {
		display: none;
	}
	/* サイドメニューボタン */
	div#sideMenu div.menubtn {
		width:60px;
		height:60px;
		position: fixed;
		top:5px;
		right:5px;
		z-index: 20;
	}
		div#sideMenu div.menubtn label.menu-btn {
			display: block;
			width:56px;
			height:56px;
			position: absolute;
			top:0;
			left:2px;
		}
			div#sideMenu div.menubtn label.menu-btn:hover span.bar {
				opacity: 0.7;
			}
			div#sideMenu div.menubtn label.menu-btn span.bar {
				position: absolute;
				top:15px;
				left: 10px;
				display: block;
				width: 36px;
				height: 2px;
				background: #fff;
				-webkit-transition: all .5s;
				transition: all .5s;
				-webkit-transform-origin: left top;
				-ms-transform-origin: left top;
				transform-origin: left top;
			}
			div#sideMenu div.menubtn label.menu-btn span.bar.middle {
				top: 23px;
				opacity: 1;
			}
			div#sideMenu div.menubtn label.menu-btn span.bar.bottom {
				top: 31px;
				-webkit-transform-origin: left bottom;
				-ms-transform-origin: left bottom;
				transform-origin: left bottom;
			}
			div#sideMenu div.menubtn label.menu-btn p.menu {
				width:100%;
				height:20px;
				line-height: 20px;
				position: absolute;
				top:35px;
				left:0;
				color:#fff;
				text-align: center;
				font-size: 10px;
				letter-spacing: 1px;
				-webkit-transition: all .5s;
				transition: all .5s;
				-webkit-transform-origin: left top;
				-ms-transform-origin: left top;
				transform-origin: left top;
			}
			div#sideMenu div.menubtn label.menu-btn p.close {
				opacity: 0;
				width:100%;
				height:20px;
				line-height: 20px;
				position: absolute;
				top:35px;
				left:0;
				color:#fff;
				text-align: center;
				font-size: 10px;
				letter-spacing: 1px;
				-webkit-transition: all .5s;
				transition: all .5s;
				-webkit-transform-origin: left top;
				-ms-transform-origin: left top;
				transform-origin: left top;
			}
	/* サイドメニュー */
	div#sideMenu div#smenuBox {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		top:70px;
		right: 0;
		padding: 10px 0 30px 0;
		background: url(../images/cmn/headerbg.png);
		-webkit-transition-property: all;
		transition-property: all;
		-webkit-transition-duration: .5s;
		transition-duration: .5s;
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
		opacity: 0;
		z-index: 20;
		overflow-x: hidden;
		overflow-y: scroll;
		transform: translateZ(0);
	}
		div#sideMenu div#smenuBox a {
			display:block;
			width:90%;
			height:0px;
			margin: 0 auto 5px auto;
			line-height:45px;
			text-decoration:none;
			color:#fff;
			font-size: 14px;
			letter-spacing:1px;
			text-indent: 10px;
			border-bottom:#fff 1px solid;
			-webkit-transition-property: all;
			transition-property: all;
			-webkit-transition-duration: 1s;
			transition-duration: 1s;
			-webkit-transition-delay: 0s;
			transition-delay: 0s;
		}
			div#sideMenu div#smenuBox a img {
				vertical-align: middle;
				margin-right: 15px;
			}
		div#sideMenu div#smenuBox a.fbbtn { vertical-align: middle;}
		div#sideMenu div#smenuBox a.fbbtn img { height:30px; vertical-align: middle; margin-right: 10px;}
		div#sideMenu div#smenuBox a:nth-last-of-type(1) {margin-bottom:90px;}
	/* -- チェックをつけた場合 */
	div#sideMenu input.check:checked ~ div#smenuBox {
		height:100%;
		-webkit-transition-delay: .3s;
		transition-delay: .3s;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		opacity: 1;
		z-index: 20;
	}
div#sideMenu input.check:checked ~ div#smenuBox a {height:45px;}
	div#sideMenu input.check:checked ~ div.menubtn label.menu-btn span.bar.top {
		top:10px;
		left:15px;
		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: 35px;
		left:15px;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	div#sideMenu input.check:checked ~ div.menubtn p.menu { opacity: 0;}
	div#sideMenu input.check:checked ~ div.menubtn p.close { opacity: 1;}
/* フッター */
footer {
	width:100%;
	height:35px;
	background: #000;
	opacity: 0.5;
	position: absolute;
	bottom: 0;
}
	footer small {
		display: block;
		width:100%;
		height:35px;
		line-height: 35px;
		color: #fff;
		text-align: center;
		font-size: 12px;
	}
/* 共通 */
div#contents {
	width:100%;
	position: relative;
}
div#bgContents {
	width:100%;
	position: fixed;
	top:0;
	left:0;
	z-index: 1;
}
div#mainContents {
	width:100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 10;
	padding-top: 70px;
	padding-bottom: 75px;
	box-sizing: border-box;
}
/* カテゴリリスト */
div#categorylist {
	width:100%;
	box-sizing: border-box;
	margin: 30px auto 0 auto;
	padding-top: 20px;
	border-top: #999 1px solid;
}
	div#categorylist p.categorytitle {display: none;}
	div#categorylist p.categorytitle2 {
		color: #333333;
		font-size: 14px;
		letter-spacing: 2px;
		margin-bottom: 10px;
	}
	div#categorylist a {
		display: inline-block;
		line-height: 25px;
		margin-bottom: 10px;
		font-size: 14px;
		letter-spacing: 1px;
		text-decoration: none;
		margin-right: 10px;
	}
	div#categorylist a.cate1 {color:#FF7373;}
	div#categorylist a.cate2 {color:#BB8B43;}
	div#categorylist a.cate3 {color:#448605;}
	div#categorylist a.cate4 {color:#008C46;}
	div#categorylist a.cate5 {color:#FFC926;}
	div#categorylist a.cate6 {color:#FF0000;}
	div#categorylist a.cate7 {color:#0059B2;}
	div#categorylist a.cate8 {color:#0085B2;}
	div#categorylist a.cate9 {color:#004661;}
	div#categorylist a.cate10 {color:#666;}
	div#categorylist a.cate11 {color:#4C6600;}
	div#categorylist a.cate12 {color:#333;}
	div#categorylist a.cate13 {color:#BB8B43;}