﻿

/* ==================================

 menu
 
================================== */

/* header
-------------------------------- */
#header { z-index:12;  position:fixed;  top:0;  left:0;  width:100%;  transition:0.6s all ease-in-out}
#header #menuBtn{z-index:2;position:absolute;top: 80px;right: 50px;width: 50px;height: 30px;cursor:pointer;}
#header #menuBtn span{display:block;width:100%;height: 2px;background-color:#222;transition:0.2s all ease-in-out;}
#header #menuBtn span:nth-of-type(1){ position:absolute;  top:0;  left:0}
#header #menuBtn span:nth-of-type(2){ position:absolute;  top:9px;  left:0}
#header #menuBtn span:nth-of-type(3){ position:absolute;  top:18px;  left:0}
#header #menuBtn:hover span:nth-of-type(1){ top:-3px}
#header #menuBtn:hover span:nth-of-type(3){ top:21px}
#header #menuBtn i{font-size:98%; text-align:center; font-style:normal;color: #222;}

#header.is-ready{ transform:translate(0,0)}

@media screen and (max-width:736px){
#header #menuBtn{top:80px; right:20px;width: 35px;height: 20px;}
#header #menuBtn span{height: 1px}
#header #menuBtn i{font-size:75%;}
}
  
/* menu
-------------------------------- */
#menu{ display:none; z-index:13; position:fixed; top:0; left:0; width:100%;  height:100%; min-height:100%; background-color:rgba(0,0,0,0.8)}
#menu .menu-inner{width:100%;height:100%;position:absolute;left:0;text-align:center;overflow-y:auto;}
#menu .menu-inner #menuCloseBtn{ z-index:2; position:fixed; top:80px;  right:50px;  width:50px; height:30px; cursor:pointer}
#menu .menu-inner #menuCloseBtn:hover span:nth-of-type(1){ transform:rotate(45deg)}
#menu .menu-inner #menuCloseBtn:hover span:nth-of-type(2){ transform:rotate(-45deg)}
#menu .menu-inner #menuCloseBtn span{ display:block;  width:100%;  height:2px;  background-color:#fff;  transition:0.2s all ease-in-out}
#menu .menu-inner #menuCloseBtn span:nth-of-type(1){ position:absolute;  top:7px;  left:0;  transform:rotate(23deg)}
#menu .menu-inner #menuCloseBtn span:nth-of-type(2){ position:absolute;  top:7px;  left:0;  transform:rotate(-23deg)}

@media screen and (max-width:736px){
#menu .menu-inner #menuCloseBtn{top:80px; right:20px;width:35px;  height:15px;}
#menu .menu-inner #menuCloseBtn span{height:1px;}
}


/* 追加分 */
#menu ul {
	float:right;
    /*width: 20%;*/
	margin:3% 10%  0 0;
}
#menu ul li{
	color:#fff;
	list-style:none;
	margin:1%;
	padding:4% 2%;
	border-bottom:1px solid #666;
    list-style: none;
	display:block;
	width:100%;
}
#menu ul li a{
	color:#fff;
	text-decoration:none;
}
#menu ul li img{
	width:100%;
}
#menu ul li.btn_price::before{
    content: '\f07a';
    font-family: 'FontAwesome';
}
@media screen and (max-width:960px){
#menu ul {
	float:right;
    width: 50%;
	margin:3% 10%  0 0;
}
}
@media screen and (max-width:736px){
#menu ul{
    width: 100%;
	margin:3% auto;
}
#menu ul li{
	float:left;
	display:block;
	width:85%;
	color:#fff;
}
}