/* common */
body {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
/* contents */
.contents {
/*
	display: table;
	table-layout:fixed;
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	box-shadow: 0 0 50px 0 rgba(0,0,0,.8);
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transition-duration: .5s;
	transition-duration: 0.3s;
*/
}

/* drawer menu */
.drawer-menu {
	box-sizing: border-box;
	position: fixed;
	display: block;
	/*overflow:scroll;*/
	overflow-y: auto;
	top: 0;
	padding: 0 0;
	transition:0.5s;
	opacity: 0;
	right: -75%;
	width: 83%;
}
.drawer-menu > ul > li {
	text-align: center;
	font-size: 3.6rem;
	border-bottom: 1px solid #000;
	font-family:'Gill Sans', 'Lato', sans-serif;
	color: #221815;
	text-align: left;
	padding-left: 5.83%;
	background: #f5f5f5;
}
.drawer-menu > ul > li:last-child{
	border-bottom: none;
}
.drawer-menu > ul > li >a{
	color: #221815;
}
.drawer-menu > ul > li >a:hover,
.drawer-menu > ul > li >a:active,
.drawer-menu > ul > li >a:focus{
	background: #f5f5f5;
	color: #221815;
}
.drawer-menu-txt_st01{
	font-size: 2.2rem;
	color: #666;
	padding-left: 2%;
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Verdana,'ＭＳ Ｐゴシック',sans-serif;
}
.drawer-menu li a {
	display: block;
	padding: 5.63% 0 5.63% 0;
	color: #fff;/*
    -webkit-transition: all .8s;
    transition: all .8s;
*/
}

.drawer-menu li a:hover {
	color: #000;
	background: #eee;
	text-decoration: none;
}
/* checkbox */
.check {
	display: none;
}
/* menu button - label tag */
.menu-btn {
	position: fixed;
    display: block;
    height: 44px;
    width: 44px;
    font-size: 21px;
    text-align: center;
    cursor: pointer;
    z-index: 300;
    top: 0;
    right: 0;
    padding: 7px 5px;
    margin: 10px 10px 0 0;
    background-color: #f5f5f5;
    transition:0.5s;
}
@media (min-width:480px){
	.menu-btn {
	    height: 88px;
	    width: 88px;
	    padding: 12px 10px;
	    margin: 20px 20px 0 0;
	}
}
.menu-btn-ttl{
	width: 26px;
	margin: 0 auto;
}
@media (min-width:480px){
	.menu-btn-ttl{
		width: 52px;
		margin: 0 auto;
	}
}


.bar {
	position: absolute;
	top: 20px;
	display: block;
	width: 35px;
	height: 3px;
	background: #000;
	-webkit-transition: all .3s;
	transition: all .3s;
	right: 4px;
	/*box-shadow: 1px 1px 2px rgba(150, 150, 150, 0.91);*/
}
.bar.middle {
	top: 27px;
	opacity: 1;
}
.bar.bottom {
	top: 34px;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
}
@media (min-width:480px){
	.bar {
		top: 39px;
		width: 70px;
		height: 6px;
		background: #000;
		/* border-radius: 2px; */
		right: 8px;
		/*box-shadow: 1px 1px 2px rgba(150, 150, 150, 0.91);*/
	}
	.bar.middle {
		top: 55px;
	}
	.bar.bottom {
		top: 71px;
	}
}


.menu-btn__text {
	position: absolute;
	/* bottom: -15px; */
	top: -3px;
	/* left: -34px; */
    /* right: 0; */
	margin: auto;
	color: #333;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	display: block;
	visibility: visible;
	opacity: 1;
	/*text-shadow: 1px 1px 2px rgba(150, 150, 150, 0.91);*/
	display: none;
	z-index: 2;
	right: -34px;
	left: 0;
}
.menu-btn:hover .bar {
	opacity: 0.7;
}
.menu-btn:hover .menu-btn__text {
	opacity: 0.7;
}
.close-menu {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0);
	transition:0.5s;
	visibility: hidden;
	opacity: 0;

}
/* checked */
.check:checked ~ .drawer-menu {

	opacity: 1;
	right: 0;
	z-index: 4;
}

.check:checked ~ #wrap .contents {
/*
-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: translateX(205px);
	-ms-transform: translateX(205px);
	transform: translateX(-205px);
*/
}


.check:checked ~ .menu-btn  {
	margin: 10px 83% 0 0;
}
@media (min-width:480px){
	.check:checked ~ .menu-btn  {
		margin: 20px 83% 0 0;
	}
}

.check:checked ~ .menu-btn .menu-btn__text {
/* visibility: hidden; */
    /* opacity: 0; */
}
.check:checked ~ .menu-btn .bar.top {
/*	width: 22px;
	top: 14px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	*/
}
.check:checked ~ .menu-btn .bar.middle {
/*	opacity: 0; */
}
.check:checked ~ .menu-btn .bar.bottom {
/*
	width: 22px;
	top: 29px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
*/
}
.check:checked ~ .close-menu {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	background: rgba(0,0,0,.5);
	visibility: visible;
	opacity: 1;
	z-index: 3;

}

.check:checked ~ label span.top{
/*	background:#fff !important;	*/
}

.check:checked ~ label span.bottom{
/*	background:#fff !important;	 */
}

.drawer-logo{
	position: absolute;
	top: 9px;
	left: 0;
	width: 250px;
	
}


.head-menu-fix{
	position: fixed;
    display: block;
    height: 48px;
    font-size: 21px;
    text-align: center;
    z-index: 1;
    top: 0;
    padding: 0px 0 0 0;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.4);
    box-shadow: 0 3px 0px 0px rgba(0,0,0,0.1);	
}






@media (min-width:640px){
	.drawer-wrap{
		width: 960px;
		margin: 0 auto;
		position: relative;
	}

	.drawer-menu{
		opacity: 1;
		position: absolute;
		top: 70px;
    	left: 293px;
    	height: 66px;
		-webkit-transition-duration: 0s;
		transition-duration: 0s;
		z-index:10;
	}
	.drawer-menu > ul{
		width: 450px;
	}
	.drawer-menu > ul > li {
		text-align: center;
		font-size: 2.4rem;
		border-bottom: none;
		font-family:'Gill Sans', 'Lato', sans-serif;
		color: #221815;
		text-align: center;
		margin:0;
		padding:0;
		background: inherit;
		width: 130px;
		height: 40px;
		float: left;
		overflow: inherit;
		font-weight: 500;
	}
	.drawer-menu-txt_st01{
		display:block;
		font-size: 1.2rem !important;
		font-weight: normal;
		color: #666;
		margin: 0;
		padding: 8px 0 0 0;
		font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Verdana,'ＭＳ Ｐゴシック',sans-serif;
	}
	.drawer-menu ul li:first-child{
		margin-right: 11px;
	}
	.drawer-menu ul li:nth-child(2){
		margin-right: 21px;
	}
	.drawer-menu ul li a:hover,
	.drawer-menu ul li a:focus,
	.drawer-menu ul li a:active{
		background-color: #fff;
	}
}