@charset "utf-8";
/* CSS Document */
/* サイドメニュー */
div#headermenu div.menubtn {
	width:80px;
	height:50px;
}
	div#headermenu div.menubtn label { 
		display: block;
		width:40px;
		height:50px;
		position: fixed;
		top:0px;
		right:20px;
		z-index: 60;
		cursor: pointer;
	}
	div#headermenu div.menubtn label:hover {
		opacity: 0.7;
	}
		div#headermenu div.menubtn label span {
			display: block;
			width: 40px;
			height: 3px;
			background: #333;
			position: absolute;
			-webkit-transition: all .5s;
			transition: all .5s;
			left:0px;
			top:25px;
			z-index: 60;
			opacity: 1;
		}
		div#headermenu div.menubtn label span.bar.middle {
			top: 35px;
		}
		div#headermenu div.menubtn label span.bar.bottom {
			top: 45px;
		}
		body.black div#headermenu div.menubtn label span { background: #fff;}
	/* チェックボックス */
	div#headermenu input.check {
		display: none;
	}		
	/* サイドメニュー */
	div#headermenu div#menuBox {
		width:100%;
		min-width: 300px;
		height:100%;
		min-height:100%;
		position: fixed;
		top:0px;
		right:-100%;
		box-sizing: border-box;
		padding-top: 100px;
		background-size: 130px 28px, 100% auto;
		background-position: left 2% top 20px;
		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: #000;
	}
		div#headermenu div#menuBox div.center {
			width:90%;
			margin: 0 auto;
		}
			div#headermenu div#menuBox div.center div {
				width:100%;
				height:40px;
				position: relative;
				overflow: hidden;
				margin-bottom: 20px;
			}
			div#headermenu div#menuBox div.center div a {
				display: block;
				width:100%;
				min-height:40px;
				color: #fff;
				font-size: 20px;
				text-decoration: none;
				letter-spacing: 2px;
				position: relative;
				text-align: center;
				padding-bottom: 10px;
				position: absolute;
				left:100%;
				font-weight: bold;
			}
	/* -- チェックをつけた場合 */
	div#headermenu input.check:checked ~ div.menubtn label.menu-btn span.bar.top {
		top:35px;
		left:0px;
		width: 35px;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		background: #fff;
	}
	div#headermenu input.check:checked ~ div.menubtn label.menu-btn span.bar.middle{ display: none;} 
	div#headermenu input.check:checked ~ div.menubtn label.menu-btn span.bar.bottom {	
		width: 35px;
		top: 35px;
		left:0px;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		background: #fff;
	}
/* ヘッダー */
div#headermenu {
	width:100%;
	height:150px;
	box-sizing: border-box;
	position: relative;
}
	div#headermenu a#logo {
		display: block;
		width:105px;
		height:48px;
		position: absolute;
		top:30px;
		left:50px;
	}
		body.white div#headermenu a#logo {
			background:url(../images/cmn/logo_b.png) no-repeat;
			background-size: 100% 100%;
		}
		body.black div#headermenu a#logo {
			background:url(../images/cmn/logo_w.png) no-repeat;
			background-size: 100% 100%;
		}
/* フッター */
div#footerbox {
	width:100%;
	height:450px;
	box-sizing: border-box;
	padding: 80px 0 20px 0;
	position: relative;
	background: url(../images/cmn/flogo.png) no-repeat, #090909;
	background-position: center top 200px;
}
	div#footerbox div.fmenu {
		text-align: center;
	}
		div#footerbox div.fmenu a {
			text-decoration: none;
			font-size: 16px;
			font-weight: bold;
			letter-spacing: 1px;
			margin: 0 30px;
			color: #fff;
		}
	div#footerbox small {
		display: block;
		width:100%;
		text-align: center;
		font-size: 12px;
		color: #fff;
		text-align: center;
		position: absolute;
		left:0;
		bottom:30px;
	}
/* 共通 */
div#contents {
	width:100%;
	overflow: hidden;
}
div#mainContents { width:100%; }
h2 {
	display: block;
	font-size: 24px;
	letter-spacing: 2px;
	text-align: center;
}
h2.white { color: #fff;}
h2.black { color: #000;}