﻿@charset "utf-8";

/* -----------------------------------
 * Slidebars
 * Version 0..10
 * http://plugins.adchsm.me/slidebars/
 -----------------------------------*/
#sb-site,.sb-site-container,.sb-slidebar,body,html{
	margin: 0px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body,html{
	width: 100%;
	overflow-x: hidden;
}

html{
	height: 100%;
}

body{
	position: relative;
	height: auto;
	min-height: 100%;
}

html.sb-scroll-lock.sb-active:not(.sb-static){
	overflow: hidden;
}

#sb-site,.sb-site-container{
	position: relative;
	width: 100%;
	min-height: 100vh;
	background-color: #F5F5F5;
	z-index: 1;
}

#sb-site:after,#sb-site:before,.sb-site-container:after,.sb-site-container:before{
	content: ' ';
	display: table;
	clear: both;
}

.sb-slidebar{
	display: none;
	position: fixed;
	top: 0px;
	height: 100%;
	padding: 0px 10px;
	overflow-y: auto;
	z-index: 0;
}

.sb-slidebar,.sb-slidebar *{
	-webkit-transform: translateZ(0px);
}

.sb-left{
	left: 0px;
}

.sb-right{
	right: 0px;
}

.sb-slidebar.sb-static,html.sb-static .sb-slidebar{
	position: absolute;
}

.sb-slidebar.sb-active{
	display: block;
	padding: 200px 0px 0px 5px;
	background-color: #650000;
}

.sb-style-overlay{
	z-index: 9999;
}

.sb-momentum-scrolling{
	-webkit-overflow-scrolling: touch;
}

.sb-slidebar{
	width: 30%;
}

.sb-width-thin{
	width: 15%;
}

.sb-width-wide{
	width: 45%;
}

@media (max-width:480px){
	.sb-slidebar{
		width: 70%;
	}

	.sb-width-thin{
		width: 55%;
	}

	.sb-width-wide{
		width: 85%;
	}
}

@media (min-width:481px){
	.sb-slidebar{
		width: 55%;
	}

	.sb-width-thin{
		width: 40%;
	}

	.sb-width-wide{
		width: 70%;
	}
}

@media (min-width:768px){
	.sb-slidebar{
		width: 40%;
	}

	.sb-width-thin{
		width: 25%;
	}

	.sb-width-wide{
		width: 55%;
	}
}

@media (min-width:992px){
	.sb-slidebar{
		width: 30%;
	}

	.sb-width-thin{
		width: 15%;
	}

	.sb-width-wide{
		width: 45%;
	}
}

@media (min-width:1200px){
	.sb-slidebar{
		width: 20%;
	}

	.sb-width-thin{
		width: 5%;
	}

	.sb-width-wide{
		width: 35%;
	}
}

#sb-site,.sb-site-container,.sb-slide,.sb-slidebar{
	-webkit-transform: translate(0px);
	-moz-transform: translate(0px);
	-o-transform: translate(0px);
	transform: translate(0px);
	-webkit-transition: -webkit-transform 400ms ease;
	-moz-transition: -moz-transform 400ms ease;
	-o-transition: -o-transform 400ms ease;
	transition: transform 400ms ease;
	-webkit-transition-property: -webkit-transform,left,right;
	-webkit-backface-visibility: hidden;
}

.sb-hide{
	display: none;
}


/*==========================================================
	スライドメニュー (open)
==========================================================*/
.sb-menu{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.sb-menu li{
	position: relative;
	width: 100%;
	padding: 0px;
	margin: 0px;
	border-top: 1px solid rgba(255,255,255,0.5);
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

.sb-menu > li:first-child{
	border-top: none;
}

.sb-menu > li:last-child{
	border-bottom: none;
}

.sb-menu li a{
	display: block;
	padding: 25px 0px 20px 5px;
	letter-spacing: 0.1em;
	color: #FFFFFF;
	font-size: 24px;
	font-weight: 200;
}

.sb-menu li a:hover{
	text-decoration: none;
	background-color: rgba(255,255,255,0.05);
}

.sb-left .sb-menu li a{
	border-left: 3px solid transparent;
}

.sb-left .sb-menu li a:hover{
	border-left: 3px solid;
}

.sb-right .sb-menu li a{
	border-right: 3px solid transparent;
}

.sb-right .sb-menu li a:hover{
	border-right: 3px solid;
}

.sb-menu li .sb-open-right,.sb-menu li small{
	display: inline-block;
	padding: 14px;
}

.sb-menu li img{
	margin: 14px;
}
