@charset "utf-8";
/* CSS Document */
/* サイドメニュー */
div#headermenu div.menubtn {
	width:80px;
	height:50px;
	position: absolute;
	top:0;
	right:0;
}
	div#headermenu div.menubtn label { 
		display: block;
		width:40px;
		height:50px;
		position: absolute;
		top:0px;
		right:10px;
		z-index: 60;
	}
	div#headermenu div.menubtn label:hover {
		opacity: 0.7;
	}
		div#headermenu div.menubtn label span {
			display: block;
			width: 40px;
			height: 2px;
			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.bottom {
			top: 35px;
		}
	/* チェックボックス */
	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;
		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: #fff;
	}
		div#headermenu div#menuBox div.center {
			width:90%;
			margin: 0 auto;
		}
			div#headermenu div#menuBox div.center div {
				width:100%;
				height:25px;
				position: relative;
				overflow: hidden;
				margin-bottom: 20px;
			}
			div#headermenu div#menuBox div.center div a {
				display: block;
				width:100%;
				min-height:25px;
				color: #333;
				font-size: 14px;
				text-decoration: none;
				letter-spacing: 1px;
				position: relative;
				text-align: center;
				padding-bottom: 10px;
				border-bottom: #fff 1px dotted;
				position: absolute;
				left:100%;
			}
	/* -- チェックをつけた場合 */
	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);
	}
	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);
	}
/* ヘッダー */
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%;
	padding: 40px 0 20px 0;
}
	div#footerbox div.logo {
		width:119px;
		height:30px;
		background: url(../images/cmn/logo.png) no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
	}
	div#footerbox small {
		display: block;
		margin: 30px auto 0 auto;;
		text-align: center;
		font-size: 8px;
		font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
		letter-spacing: 1px;
	}