#menu-top.menu-btn{display:none;}
#menu-other.menu-btn{display:block;}

/*
================================================================================================================
MENU
================================================================================================================
*/
#menu{z-index:10;}
#menu img{width:100%;}
#menu a:hover img{opacity:.6;}
#menu-sp{display:none;}
#menu .frame,
#menu .frame > .inner{position:relative;}
#menu .frame{filter:drop-shadow(0 5px 2px rgba(45,35,96,.2));}

#menu .frame{
background:#fff;
border:4px solid #9090ab;
border-radius:20px;
padding:20px;}
#menu .frame::after{
display:block;
content:"";
width:100%;
height:40px;
background-image:url(../img/common/logo.png);
background-repeat:no-repeat;
background-position:center;
background-size:auto 100%;
margin-top:20px;}

@media screen and (min-width:1701px){
#menu{
background-image:url(../img/common/menu_bg.png);
background-repeat:no-repeat;
background-position:center;}}

@media screen and (min-width:1101px){
#menu{
display:flex;
position:fixed;
top:50px;
left:0;
width:50%;
min-height:100vh;
align-items:center;
justify-content:center;
transition:top .2s ease;}
#menu.fix{top:0;}
#menu .frame{width:500px;}
#menu .frame::before{
display:block;
content:"";
position:absolute;
top:-54px;
left:10px;
width:100%;
height:50px;
background-image:url(../img/common/menu_head.png);
background-repeat:no-repeat;
background-position:left;
background-size:auto 100%;}}

@media screen and (max-width:1100px){
#menu{position:absolute; top:0; left:calc(50% - 300px); width:100%; max-width:600px; pointer-events:none; z-index:999;}
#menu.fix{position:fixed; top:0; left:calc(50% - 300px);}
#menu-sp{display:block; width:100%;}
#menu .frame{
width:80%;
margin:0 auto;
opacity:0;
transform:translateY(-100vh);
transition:all .4s ease;
pointer-events:none;}
#menu .frame.slide{transform:translateY(0); opacity:1; pointer-events:auto;}}

@media screen and (max-width:600px){
#menu,#menu.fix{left:0;}}

@media screen and (max-width:480px){
#menu .frame{width:calc(100% - 20px); border:2px solid #9090ab; border-radius:10px; padding:10px;}
#menu .frame::after{height:30px;}
#menu .frame.slide{transform:translateY(-10px);}}

@media screen and (max-width:370px){
#menu .frame::after{height:20px; margin-top:10px;}}}

/*
========================
メニューボタン
========================
*/
#menu .menu-btn{width:100%; margin:0 auto;}
#menu .menu-btn .btn{
display:block;
position:relative;
aspect-ratio:90 / 13;
background-size:100% auto;
border-radius:10px;
transition:all .2s ease;
cursor:pointer;}
#menu .menu-btn .btn + .btn{margin-top:10px;}

#menu .menu-btn .btn:nth-child(1){background-image:url(../img/common/btn/off01.png);}
#menu .menu-btn .btn:nth-child(2){background-image:url(../img/common/btn/off02.png);}
#menu .menu-btn .btn:nth-child(3){background-image:url(../img/common/btn/off03.png);}
#menu .menu-btn .btn:nth-child(4){background-image:url(../img/common/btn/off04.png);}

#menu .menu-btn .btn:nth-child(1):hover{background-image:url(../img/common/btn/on01.png);}
#menu .menu-btn .btn:nth-child(2):hover{background-image:url(../img/common/btn/on02.png);}
#menu .menu-btn .btn:nth-child(3):hover{background-image:url(../img/common/btn/on03.png);}
#menu .menu-btn .btn:nth-child(4):hover{background-image:url(../img/common/btn/on04.png);}

@media screen and (max-width:370px){#menu .menu-btn .btn + .btn{margin-top:5px;}}

/*
========================
SP用ヘッダー
========================
*/
#menu-sp{position:relative; width:100%; height:90px; pointer-events:none; z-index:10;}

/*
========================
SP用トグル
========================
*/
#menu-sp .slide-btn{
position:absolute;
width:80px;
height:80px;
top:10px;
right:10px;
background-image:url(../img/common/menu.png);
background-repeat:no-repeat;
background-position:center;
background-size:100% auto;
filter:drop-shadow(0 3px 0 rgba(155,110,99,.8));
pointer-events:auto;
cursor:pointer;
transition:all .2s ease;}
#menu-sp .slide-btn > span{
display:block;
position:absolute;
left:20px;
height:8px;
width:40px;
background:#fff;
border:2px solid #777;
border-radius:6px;
transition:.35s ease-in-out;}

#menu-sp .slide-btn > span:nth-child(1){top:24px;}
#menu-sp .slide-btn > span:nth-child(2){top:calc(50% - 4px);}
#menu-sp .slide-btn > span:nth-child(3){top:48px;}

#menu-sp .slide-btn.open > span:nth-child(1){top:calc(50% - 4px); transform:rotate(315deg);}
#menu-sp .slide-btn.open > span:nth-child(2){width:0; left:50%; opacity:0;}
#menu-sp .slide-btn.open > span:nth-child(3){top:calc(50% - 4px); transform:rotate(-315deg);}

@media screen and (max-width:480px){
#menu-sp .slide-btn{width:60px; height:60px; right:5px;}
#menu-sp .slide-btn > span{left:15px; width:30px; height:6px; border:2px solid #777;}

#menu-sp .slide-btn > span:nth-child(1){top:18px;}
#menu-sp .slide-btn > span:nth-child(2){top:calc(50% - 3px);}
#menu-sp .slide-btn > span:nth-child(3){top:36px;}

#menu-sp .slide-btn.open > span:nth-child(1){top:calc(50% - 3px);}
#menu-sp .slide-btn.open > span:nth-child(3){top:calc(50% - 3px);}}

/*
========================
スクロール
========================
*/
@media screen and (min-width:1100px) and (max-height:520px){
#menu .menu-btn{height:calc(100vh - 280px); overflow:scroll; overflow-x:hidden;}
#menu .menu-btn::-webkit-scrollbar{width:6px;}
#menu .menu-btn::-webkit-scrollbar-track{background-color:#ccc; border-radius:4px; border:1px solid rgba(204,129,212,.3);}
#menu .menu-btn::-webkit-scrollbar-thumb{background-color:#ff5078; border-radius:4px;}
#menu .frame > .inner{padding:10px 5px 10px 0;}
#menu .menu-btn > .btn,#menu .toggle-menu{width:calc(100% - 5px); margin-right:5px;}}

@media screen and (max-width:1100px) and (max-height:330px){
#menu .frame{height:calc(100vh - 100px); overflow:scroll; overflow-x:hidden;/*padding:10px 0;*/}
#menu .frame::-webkit-scrollbar{width:6px;}
#menu .frame::-webkit-scrollbar-track{background-color:#ccc; border-radius:4px; border:1px solid rgba(204,129,212,.3);}
#menu .frame::-webkit-scrollbar-thumb{background-color:#ff5078; border-radius:4px;}}