@charset "UTF-8";
/*//////////----- DRAWER -----//////////*/

/**ログイン前のベーステンプレート制御**/

.before-login #drawer{
	display:none;
}

#drawer label{
	position: fixed;
	top: 35px;
	right:0;
	width:60px;
	height:60px;
	z-index: 50;
	color:#fff;
	transition:0.25s;
}

#drawer label:hover{
	cursor: pointer;
}

#drawer input{
	display:none;
}

#drawer span.hamburger{
	display:block;
	position: fixed;
	top: 55px;
	right:15px;
	width:30px;
	height:2px;
	background-color:#fff;
	transition: 0.25s;
	z-index: 40;
}

#drawer span.hamburger:before{
	display:block;
	content:"";
	
	position: absolute;
	top:-10px;
	
	width:100%;
	height:2px;
	
	background-color:#fff;
	
	transition: 0.25s;
}

#drawer span.hamburger:after{
	display:block;
	content:"";
	
	position: absolute;
	top:10px;
	
	width:100%;
	height:2px;
	
	background-color:#fff;
	
	transition: 0.25s;
}

#drawer span.bg-btn{
	position: fixed;
	top: 35px;
	right:0;
	width:60px;
	height:60px;
	z-index: 30;
	background-color:rgba(167,0,18,0.8);
	color:#fff;
	transition:0.25s;
	border-bottom-left-radius: 5px;
}

#drawer span.bg-btn:before{
	content:"メニュー";
	
	display:block;
	font-size:0.7rem;
	line-height:15px;
	font-weight:bold;
	
	text-align: center;
	
	position: absolute;
	bottom:5px;
	right:0;
	left:0;
	
	margin:0 auto;
}

#drawer input[type="checkbox"]:checked + label{
	top:0;
	
	width:100%;
	height:100%;
}

#drawer input[type="checkbox"]:checked ~ span.hamburger{
	background-color: transparent;
}

#drawer input[type="checkbox"]:checked ~ span.hamburger:before{
	top: 0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	
	background-color:#fff;
}

#drawer input[type="checkbox"]:checked ~ span.hamburger:after{
	top: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	
	background-color:#fff;
}

#drawer div.filter-cover{
	position: fixed;
	top: 30px;
	left:0;
	width:100%;
	height:100%;
	background-color: transparent;
	transition: 0.10s;
	z-index: -10;
}

#drawer input[type="checkbox"]:checked ~ div.filter-cover{
	background-color: rgba(255,255,255,0.80);
	
	z-index: 20;
}

#drawer input[type="checkbox"]:checked ~ span.bg-btn:before{
	content:"閉じる";
}

#drawer nav.navigation{
	position: fixed;
	top: 35px;
	left:-240px;
	width:240px;
	height:100%;
	background-color:#fff;
	color:#000;
	overflow: hidden;
	transition: 0.25s;
	z-index: 30;
}

#drawer input[type="checkbox"]:checked ~ nav.navigation{
	left:0;
}

#drawer nav.navigation ul{
	box-sizing: border-box;
	padding:0 10px;
	
	overflow-y: scroll;
	height:100%;
}

#drawer nav.navigation ul li{
	font-size:0.8rem;
	line-height:40px;
	
	box-sizing: border-box;
	border-bottom:solid 1px #f0f0f0;
}

#drawer nav.navigation ul li a{
	display:block;
	
	color:#a70012;
	
	box-sizing: border-box;
	padding-left:30px;
	
	background-image: url("../images/icon-arrow-right-red.png");
	background-repeat: no-repeat;
	background-size: 10px;
	background-position: center left 10px;
}

#drawer nav.navigation ul li:nth-child(2){
	color:#fff;
	background-color: #60ABE2;
	}

#drawer nav.navigation ul li:nth-child(2) a{
	color:#fff;
background-image: url("../images/icon-arrow-right-white.png");}

#drawer nav.navigation ul li a:hover{
	opacity: 0.5;
	
	text-decoration: none;
}