@charset "utf-8";
/* CSS Document */

/* デフォルトスタイル
-----------------------*/
html,body,p,h1,h2,h3,h4,h5,h6,
span,small,strong,
div,ul,li,
figure,img,a,
header,footer,nav,section,table,tr,td{
	padding:0;
    margin:0;
	border-collapse:collapse;
	border:none;
	outline:none;
	font-size:medium;
}
header,footer,nav,section{display:block;}
input, textarea{box-sizing: border-box;}
a:hover { opacity:0.7; }
html { 
	opacity:0; 
	background:#fff;
}
body{
	color:#004661; /* 文字色 */
	/*font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;*/
	font-family: 游明朝,"Yu Mincho",YuMincho,"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	
}
.clearText {
	display:block;
	height: 0px;
	margin: 0;
	padding: 0;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
.font2 { 
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
	/* font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; */
}
/*************************
 ヘッダー
**************************/
div#headerbox {}
input#checked { display: none;}
/* サイドメニューボタン */
label.menu-btn {
	display: block;
	width:40px;
	height:50px;
	position: fixed;
	top:5px;
	right:10px;
	z-index: 50;
}
label.menu-btn:hover span.bar {
	opacity: 0.7;
}
	span.bar {
		position: absolute;
		top:10px;
		left: 5px;
		display: block;
		width: 30px;
		height: 2px;
		background: #004661;
		-webkit-transition: all .5s;
		transition: all .5s;
		-webkit-transform-origin: left top;
		-ms-transform-origin: left top;
		transform-origin: left top;
	}
	span.bar.middle {
		top: 18px;
		opacity: 1;
	}
	span.bar.bottom {
		top: 26px;
		-webkit-transform-origin: left bottom;
		-ms-transform-origin: left bottom;
		transform-origin: left bottom;
	}
/* メニュー */
div.menubox {
	width:300px;
	height:100vh;
	margin: 0 auto;
	background: #004661;
	position: fixed;
	top:0;
	right:-300px;
	z-index: 40;
	box-sizing: border-box;
	padding-top: 80px;
	padding-left:20px;
}
	div.menubox div {
		width:260px;
		height:50px;
		overflow: hidden;
		position: relative;
	}
		div.menubox div  a {
			display: block;
			width:100%;
			height:50px;
			line-height: 50px;
			text-align: left;
			font-size: 18px;
			font-weight: bold;
			letter-spacing: 2px;
			text-decoration: none;
			color: #fff;
			border-bottom: #fff 1px solid;
			box-sizing: border-box;
			padding-left:20px;
			position: absolute;
			top:0;
			left:280px;
			opacity: 0;
		}
/* -- チェックをつけた場合 */
input.check:checked ~ label.menu-btn span.bar {
	background: #fff;
}
input.check:checked ~ label.menu-btn span.bar.top {
	top:7px;
	left:5px;
	width: 35px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
input.check:checked ~ label.menu-btn span.bar.middle {
	opacity: 0;
}
input.check:checked ~ label.menu-btn span.bar.bottom {	
	width: 35px;
	top: 32px;
	left:5px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
input.check:checked ~ label.menu-btn p.menu { opacity: 0;}
input.check:checked ~ label.menu-btn p.close { opacity: 1;}