@charset "UTF-8";
header {
	z-index: 2;
	width: 100%;
}
.brand{
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.2rem 0 .5rem 3%;
	position: relative;
}
#drawernav nav{
	width: 100%;
	margin: 0 auto;
}
.brand a{
	display: inline-block;
	padding: 0.5rem 1rem;
	vertical-align: middle;
}
a.logo{
	line-height: 0;
	margin: 0 auto 0 0;
	padding: 0;
}

#page{
	position: relative;
}
div.button{
	line-height: 1.8;
	display: inline-block;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translatey(-50%);
}


@media (max-width: 599px) {
	li.button {
		margin-top: 2rem;
		padding: 10px 1.3em;
	}
	li.button a {
		display: inline-block!important;
		min-width: 3rem;
		font-size: 1.3rem;
		text-align: center;
		padding: 0rem!important;
		margin-right: 0.5rem;
		border: solid 3.5px;
		border-radius: 10px;
	}
	div.button{
		display: none;
	}
}
@media (min-width: 600px) and (max-width: 1024px) {
	li.button{
		display: none;
	}
}
@media (max-width: 1024px) {
	#page{
		z-index: 2;
		left: 0;
		-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
		-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
	}

	#drawernav{
		position: fixed;
		top: 0;
		right: -240px;
		width: 240px;
		height: 100%;
		background: #333;
		color: #fff;
		z-index: 1;
		-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

		-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
	}
	#drawernav ul{
		list-style: none;
		padding: 0;
		margin: 0;
	}
	#drawernav ul li:last-child{
		margin-bottom: 15vh;
	}
	#drawernav ul li{

	}
	#drawernav ul li a{
		color: #fff;
		display: block;
		padding: 10px 1.3em;
		text-decoration: none;
	}
	#drawernav ul li a:hover{
		color: #ddd;
		background: #222;
	}
	#drawernav li ul {
		line-height: 1.2;
	}
	#drawernav li ul a{
		padding-left: 2.3em;
	}
	#drawernav li ul a img{
		width: 4em;
		vertical-align: middle;
		margin-right: 0.5em;
	}
	#drawernav li ul a img + span{
		width: 100%;
		width: -webkit-calc(100% - 4.5em);
		width: calc(100% - 4.5em);
		vertical-align: middle;
		display: inline-block;
	}
	#drawernav li ul li:last-child{
		margin-bottom: 0.3em;
	}
	#drawernav h4{
		padding: 0 15px;
	}
	#humberger{
		position: fixed;
		top: 0;
		right: 0;
		z-index: 3;
		width: 3em;
		text-align: center;
		padding: 20px 10px 10px;
		cursor: pointer;
	}
	.icon-bar{
		height: 3px;
		background: #333;
		display: block;
		-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

		-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

		text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
		border: solid #fff 1px;
	}
	.icon-bar:nth-child(1) {
		position: relative;
		margin-bottom: 2em;
	}
	.icon-bar:nth-child(1)::after {
		content: "menu";
		line-height: 2.4;
	}
	.fixed-content{
		right: inherit;
		width: 100%;
		z-index: 2;
		-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

		-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
	}
	#overlay{
		z-index:-1;
		opacity: 0;
		background: #000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		position: fixed;
		-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

		-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
	}
	.brand {
		margin: 0;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		box-sizing: border-box;
	}
	#drawernav ul li.drawer-brand a{
		padding: 20px 1.3em 10px;
		width: 80%;
		width: -webkit-calc(100% - 54px);
		width: calc(100% - 54px);
		box-sizing: border-box;
	}
	#drawernav ul li.drawer-brand a:hover{
		background-color:transparent;
	}
	#drawernav ul li.drawer-brand img{
		width: 3em;
		vertical-align: middle;
	}
	#drawernav ul li.drawer-brand span{
		display: block;
		width: 100%;
		line-height: 1.2;
		letter-spacing: -1px;
	}
	#drawernav ul li.drawer-brand span > span:nth-of-type(1){
		font-size: 1.1rem;
	}
	#drawernav ul li.drawer-brand span > span:nth-of-type(2){
		font-size: 1.4rem;
	}
/**
* ドロワー開放時のスタイル
**/
	body.drawer-opened #page{
		left: -240px;
		box-shadow: 1px 0 2px #000;
		-webkit-box-shadow: 1px 0 2px #000;
	}
	body.drawer-opened .fixed-content{
		left: -240px;
	}
	body.drawer-opened #drawernav{
		right: 0;
		overflow-x: auto;
	}

	body.drawer-opened #drawernav::-webkit-scrollbar {
		width: 4px;		/*スクロールバー全体*/
	}
	body.drawer-opened #drawernav::-webkit-scrollbar-thumb {
		background-color: rgba(255, 255, 255, .5);/*スクロールバーの動く部分*/
		border-radius: 4px;
	}

	body.drawer-opened #humberger .icon-bar{
		background: #fff;

		text-shadow: none;
		border: none;
	}
	body.drawer-opened #humberger :nth-child(1){
		/*transform:translate(0,1em) rotate(45deg);
		-webkit-transform:translate(0,1em) rotate(45deg);

		transform: translateY(1em);*/
	}
	body.drawer-opened #humberger :nth-child(1)::after {
		content: "close";
		color: #fff;
		letter-spacing: 1px;
	}

/*
	body.drawer-opened #humberger :nth-child(2){
		transform:translate(-20px ,0);
		-webkit-transform:translate(-20px ,0);
		opacity:0;
	}
*/
	body.drawer-opened #humberger :nth-child(2){
		/*transform:translate(0,-1em) rotate(-45deg);
		-webkit-transform:translate(0,-1em) rotate(-45deg);*/

		transform: translateY(-2em);
		-webkit-transform:translate(0,-2em);
	}
	body.drawer-opened #overlay{
			z-index: 3;
			opacity: 0.3;
			left: -240px;
	}
	#header{
		width: 90%;
		width: -webkit-calc(100% - 3em);
		width: calc(100% - 3em);
	}

body.drawer-opened {
    overflow: hidden;
}

}