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

/* :::::: toggle button :::::: */
#navTgl {
	display: none;
}
label {
	cursor: pointer;
	position: fixed;
	top:0;
  right: 5px;
max-width:10px;
}


.open {
z-index: 1001;
transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all .3s;
}

.open:hover{
top: -5px;
opacity: 0.7;
transition: all .3s;
}

.open::before{
content: url("../header/img/drawer-open@2x.png");
-webkit-transform: scale(0.47);
transform: scale(0.47);
width: 120px;
position: absolute;
right:50px;
top:-48px;
}


.close {
	z-index: 1000;
	width: 100%;
	pointer-events: none;
}

#navTgl:checked + .open{
margin:auto;
right:0px;
top:0%;
color:#000;
width:50px;
}

#navTgl:checked + .open::before {
content:url( "../header/img/drawer-close@2x.png");
border:0;
transform: translateX(8px);
-webkit-transform: scale(0.47);
transform: scale(0.47);
transition: none;
}

#navTgl:checked + .open::after {
border:0;
}

#navTgl:checked ~ .close {
	pointer-events: auto;
}

/* :::::: drawer menu :::::: */
.menu {
	z-index: 1000;
	position: fixed;
	overflow: auto;
	top: 0px;
	right: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	background:#fd9b00;
	transform: translateX(100%);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}


#navTgl:checked ~ .menu {
	transform: none;
}

/* ▼▼▼▼▼▼▼▼MaxWidth600(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1500px) {
	/* ************** */
.open::before{
-webkit-transform: scale(0.36);
transform: scale(0.36);
right:30px;
top:-62px;
}


#navTgl:checked + .open::before {
-webkit-transform: scale(0.36);
transform: scale(0.36);
}

/* *************** */

}

/* ▼▼▼▼▼▼▼▼MaxWidth600(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
	/* ************** */
.open::before{
-webkit-transform: scale(0.31);
transform: scale(0.31);
right:25px;
top:-65px;
}


#navTgl:checked + .open::before {
-webkit-transform: scale(0.31);
transform: scale(0.31);
}

/* *************** */

}

/* ▼▼▼▼▼▼▼▼MaxWidth600(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 600px) {
	/* ************** */
	
.open::before{
right:5px;
top:-80px;
-webkit-transform: scale(0.27);
transform: scale(0.27);
}


#navTgl:checked + .open::before {
-webkit-transform: scale(0.27);
transform: scale(0.27);
}

/* *************** */
}

/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */

@media screen and (max-width: 480px) {
	/* ************** */
.open::before{
right:-10px;
top:-88px;
-webkit-transform: scale(0.22);
transform: scale(0.22);
}


#navTgl:checked + .open::before {
-webkit-transform: scale(0.22);
transform: scale(0.22);
}

/* *************** */

}

/* ▼▼▼▼▼▼▼▼MaxWidth380(mobile)▼▼▼▼▼▼▼▼ */

@media screen and (max-width: 380px) {
	/* ************** */
.open::before{
top:-91px;
right:-15px;
-webkit-transform: scale(0.2);
transform: scale(0.2);
}


#navTgl:checked + .open::before {
-webkit-transform: scale(0.2);
transform: scale(0.2);
}

/* *************** */
}


/* -----------------------------------------------------------
nav
----------------------------------------------------------- */

.menu ul{
margin:0 auto;
width:100%;
padding:15% 10% 5% 10%;
position: relative;
}


.menu ul li{
margin:0 auto;
width:100%;
font-size:18px;
font-weight: normal;
text-align: center;
letter-spacing: 0.15em;
position: relative;
}

.menu ul li::after{
   content:"";
   display:block;
   width:50%;
   height:1.5px;
   background:#fff;
   position:absolute;
   bottom:15px;
   left:50%;
   transform: translateX(-50%);
}


.menu a{
	color: #fff;
	text-decoration: inherit;
	transition:all 0.3s;
	display:block;
	line-height:4;

}

.menu a:hover{
font-weight: bold;
color: #4e85c5;
}


/* ***********MaxWidth768(tablet)*********** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */

 /* ---------------------------------- */
}

/* ***********MaxWidth768(tablet)*********** */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */

 /* ---------------------------------- */
}

/* ***********MaxWidth768(tablet)*********** */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */

 /* ---------------------------------- */
}

/* ***********MaxWidth768(tablet)*********** */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */

 /* ---------------------------------- */
}


/* ***********MaxWidth480(tablet)*********** */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
.menu ul li{
font-size:16px;
}

 /* ---------------------------------- */
}


/* ***********MaxWidth380(tablet)*********** */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
.menu ul li{
font-size:13px;
}

 /* ---------------------------------- */
}