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

/*PC*/
@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; max-width:300px; margin:0 auto 40px;}}

/*SP*/
@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%; background:linear-gradient(to bottom,  #ddfaff 0%,#fff 70%); border-bottom:4px solid #91d9f0;}
#menu .frame{width:100%; background:#fff; border-bottom:4px solid #91d9f0; padding:20px 0; 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 .menu-btn{width:100%; margin:0 auto;}
#menu .menu-btn .btn{
display:flex;
position:relative;
width:90%;
background-image:url(../img/common/bg/btn_off.png);
background-position:left bottom;
background-size:100% auto;
font-family:pragmatica, sans-serif;
font-size:clamp(1.625rem, 1.307rem + 1.59vw, 2.5rem);/*40-26*/
line-height:100%;
text-align:center;
border:4px solid #26aedf;
border-radius:30px;
padding:10px 0 5px;
margin:0 auto;
box-shadow:0 2px #26aedf , inset 0 4px #e1f7ff;
justify-content:center;
align-items:center;
transition:all .2s ease;
cursor:pointer;}
#menu .menu-btn .btn + .btn{margin-top:10px;}
#menu .menu-btn .btn > p{display:block; color:#dafcff; transition:all .2s ease; filter:drop-shadow(1px 1px 0 #21aaff) drop-shadow(-1px -1px 0 #21aaff) drop-shadow(-1px 1px 0 #21aaff) drop-shadow(1px -1px 0 #21aaff) drop-shadow(1px 0 0 #21aaff) drop-shadow(-1px 0 0 #21aaff) drop-shadow(0 1px 0 #21aaff) drop-shadow(0 -1px 0 #21aaff) drop-shadow(0 0 1px #21aaff); transform:translateZ(0);}

/*オンマウス*/
#menu .menu-btn .btn:hover,#menu .menu-btn .btn.active{background-image:url(../img/common/bg/btn_on.png); border:4px solid #fc8012; box-shadow:0 2px #fc8012, inset 0 4px #ffe980;}
#menu .menu-btn .btn:hover > p,#menu .menu-btn .btn.active > p{color:#fffc00; filter:drop-shadow(1px 1px 0 #ff9847) drop-shadow(-1px -1px 0 #ff9847) drop-shadow(-1px 1px 0 #ff9847) drop-shadow(1px -1px 0 #ff9847) drop-shadow(1px 0 0 #ff9847) drop-shadow(-1px 0 0 #ff9847) drop-shadow(0 1px 0 #ff9847) drop-shadow(0 -1px 0 #ff9847) drop-shadow(0 0 1px #ff9847);}

/*
========================
SP用ヘッダー
========================
*/
#menu-sp,
#menu-sp > .title{position:relative; width:100%; height:85px;}
#menu-sp{pointer-events:auto; z-index:10;}
#menu-sp > .title{display:flex; justify-content:center; align-items:center;}
#menu-sp > .title a{display:block; width:70%; max-width:300px;}
@media screen and (max-width:480px){
#menu-sp,#menu-sp > .title{height:65px;}
#menu-sp > .title{justify-content:flex-start;}
#menu-sp > .title a{width:calc(100% - 60px); padding-left:10px;}}

/*
========================
SP用トグル
========================
*/
#menu-sp .slide-btn,
#menu-sp .slide-btn > p{position:absolute;}
#menu-sp .slide-btn{
width:50px;
height:50px;
top:50px;
right:10px;
background-color:#ffc144;
background-image:url(../img/common/bg/btn_sp.png);
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;
border:3px solid #ff863d;
border-radius:50%;
box-shadow:inset 0 3px #ffe980;
cursor:pointer;
transition:all .2s ease;}
#menu-sp .slide-btn > p{width:100%; height:100%; top:0; right:0;}
#menu-sp .slide-btn > p > span{
display:block;
position:absolute;
left:20%;
height:3px;
width:60%;
background:#fffe3d;
border-radius:6px;
transition:.35s ease-in-out;}
#menu-sp .slide-btn > p > span:nth-child(1){top:14px;}
#menu-sp .slide-btn > p > span:nth-child(2){top:calc(50% - 1.5px);}
#menu-sp .slide-btn > p > span:nth-child(3){top:28px;}
#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{top:5px; 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:1px solid rgba(204,129,212,.3); border-radius:4px;}
#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;}
#menu .frame::-webkit-scrollbar{width:6px;}
#menu .frame::-webkit-scrollbar-track{background-color:#ccc; border:1px solid rgba(204,129,212,.3); border-radius:4px;}
#menu .frame::-webkit-scrollbar-thumb{background-color:#ff5078; border-radius:4px;}}