/* ドロワーメニュー*/

#toggle {
position: fixed;
top: 16px;
right: 16px;
background:transparent url(../images/menu-bg.png) no-repeat center center;
background-size:cover;
width: 92px;height: 92px;
padding: 25px 10px 10px 10px;
text-align: center;
color: #fff;
font-size: 12px;
}
#toggle-box {
position: relative;
width: 40px;
height: 28px;
cursor: pointer;
margin: 0 auto;
}

#toggle-box img:hover {
animation: r7 1s linear infinite;
}
 
@keyframes r7 {
0%   { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
#toggle-box > span {
width: 100%;
height: 2px;
left: 0;
display: block;
background: #fff;
position: absolute;
transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease;
}

#toggle-box > span:nth-child(1) {top: 0;}
#toggle-box > span:nth-child(2) {top: 50%;transform: translatey(-50%);}
#toggle-box > span:nth-child(3) {bottom: 0;}

.is-open #toggle-box > span {background: #fff;}
.is-open #toggle-box > span:nth-child(1) {top: 50%;transform: rotate(45deg) translatey(-15%);}
.is-open #toggle-box > span:nth-child(2) {width: 0;}
.is-open #toggle-box > span:nth-child(3) {top: 50%;transform: rotate(-45deg) translatey(-15%);}

/* z-index */
#toggle {z-index: 100;}

#nav-content {line-height: 1;
overflow: auto;
position: fixed;
z-index: 50 !important;
width: 100%;
height: 100%;
background: #fff;
color:;
top: 0;
right: 0;
padding: 60px 0 80px 0 ;
text-align:center;
transform: translateX(100%); 
transition:transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
font-size: 26px;
font-family:"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}



#nav-content ul {list-style: none;margin: 0 0 30px 0 ;}
#nav-content a {
letter-spacing:0.1em;
display: block;
color:#222;
text-decoration: none;
padding: 10px 0;
transition: opacity .6s ease;
pointer-events: none;
}

#nav-content .ko{font-size: 20px;}
#nav-content .ko a{padding: 6px 0;}


#nav-content a:hover {opacity: 0.6;}

.is-open {overflow: hidden;}
.is-open #nav-content {z-index: 1;transform: translateX(0);}
.is-open #nav-content a {pointer-events: auto;}






.logo-box{
position: absolute;
top:6px;left: 20px;width: 176px;
}

#nav-content .tel-contact{
display: inline-block;
background:transparent url(../images/p-buttan-bg.png) no-repeat center center;
background-size: cover;
color:#fff;
font-size:18px;
margin:0 10px 5px 10px;
}

#nav-content .tel-contact a{
display: block;
color:#fff;
padding: 10px 30px;
}

/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width:1230px){
#page #toggle {
top:12px;right:16px;
width: 60px;height: 60px;
padding: 15px 10px 10px 10px;
font-size: 9px;
}
#page #toggle-box {
position: relative;
width: 24px;
height: 18px;
cursor: pointer;
margin: 0 auto;
}
#page .logo-box{
position: absolute;
top:6px;left: 18px;width: 170px;
}
}

@media screen and (max-width: 768px) {
#toggle {
top:12px;right:16px;
width: 60px;height: 60px;
padding: 15px 10px 10px 10px;
font-size: 9px;
}
#toggle-box {
position: relative;
width: 24px;
height: 18px;
cursor: pointer;
margin: 0 auto;
}

.logo-box{
position: absolute;
top:6px;left: 18px;width: 170px;
}
}

@media screen and (max-width: 480px) {
#nav-content {font-size: 18px;padding: 40px 0 ;}
#nav-content ul {list-style: none;margin: 0 0 10px 0 ;}
#nav-content a {padding: 8px 0;}

#nav-content .ko{font-size: 16px;}
#nav-content .ko a{padding: 6px 0;}

#nav-content .tel-contact{font-size:14px;margin:5px 6px;}
#nav-content .tel-contact a{
padding: 10px 20px;
}
}
/*--------------------------------------------------------------------------------*/

.menu-text{margin-top: 8px;}
#nav-content .box{margin:30px 0 20px 0;}
#nav-content .box p{display: inline-block !important;margin: 0 10px 10px 10px;}

select {
  /* 初期化 */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 22px;
  color: #333;
  font-size: 12px;
  padding: 0 15px 0 10px;
  height: 28px;
  width: 116px;
  position: relative;
  background: #F6F3EE url(../images/search-arrow.png) no-repeat right 13px center / 10px auto;
}

.s-box{
border: none;
background: #F6F3EE;padding: 0 15px 0 15px;
height: 28px;
border-radius: 22px; color: #000;font-size: 12px;
}
/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
.menu-text{margin-top:5px;}
}
@media screen and (max-width: 480px) {
.menu-text{margin-top:5px;}
#nav-content .box{margin:30px 0 10px 0;}
#nav-content .box p{display: inline-block !important;margin: 5px;}
}
/*--------------------------------------------------------------------------------*/