#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));}

@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 > .frame-head{display:block; filter:drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 6px rgba(255,255,255,.8)); margin:0 auto 20px;}}

@media screen and (max-width:1100px){
#menu{position:absolute; top:0; left:calc(50% - 240px); width:100%; max-width:480px; pointer-events:none; z-index:999;}
#menu.fix{position:fixed; top:0; left:calc(50% - 240px);}
#menu-sp{display:block; width:100%;}
#menu .frame{
width:calc(100% - 60px);
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;}
#menu .frame > .frame-head{display:none;}}

@media screen and (max-width:480px){
#menu,#menu.fix{left:0;}
#menu .frame{width:calc(100% - 20px);}}

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

/*
========================
SP用ヘッダー
========================
*/
#menu-sp,
#menu-sp > .title{position:relative; width:100%; height:90px;}
#menu-sp{pointer-events:auto; z-index:10;}
#menu-sp > .title{display:flex; align-items:center; padding-left:10px;}
#menu-sp > .title a{display:inline-block;}
#menu-sp > .title a img{width:120px; filter:drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 6px rgba(255,255,255,.8)) drop-shadow(0 0 6px rgba(255,255,255,.8));}
@media screen and (max-width:480px){#menu-sp,#menu-sp > .title{height:84px;}}

/*
========================
SP用トグル
========================
*/
#menu-sp .slide-btn,
#menu-sp .slide-btn > p{position:absolute;}

#menu-sp .slide-btn{
width:62px;
height:70px;
top:10px;
right:10px;
background-image:url(../img/common/menu/btn.png);
background-repeat:no-repeat;
background-position:center;
background-size:100% auto;
filter:drop-shadow(0 3px 0 rgba(155,110,99,.8));
cursor:pointer;
transition:all .2s ease;}
#menu-sp .slide-btn:hover{background-image:url(../img/common/menu/btn_on.png);}
#menu-sp .slide-btn > p{
width:50px;
height:50px;
top:10px;
right:7px;}
#menu-sp .slide-btn > p > span{
display:block;
position:absolute;
left:11px;
height:3px;
width:30px;
background:#eaff44;
border-radius:6px;
transition:.35s ease-in-out;}

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

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

@media screen and (max-width:480px){
#menu-sp .slide-btn{width:56px; height:64px; right:5px;}
#menu-sp .slide-btn > p{top:7px; right:5px;}}

/*
========================
スクロール
========================
*/
@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;}}