/* ---------------------------------------------------------------------------------
smpMenu */

#menuBtnPackage{ width: 100% ; margin:0 auto; z-index: 100000; position: fixed;pointer-events: none; }
#menuBtnPackage >.inner{ width: auto;height:100px; margin: 0 auto; position: relative; z-index: 100;pointer-events: none;}

#menuBtnArea{ width:auto;height:100px; z-index: 10001;transition: all  0.3s ease;pointer-events: none; }
#menuBtnArea >.inner{width: auto;height:100px;max-width: 1200px;  margin: 0 auto; position:relative; pointer-events: none;}


@media(max-width:750px){

}

#menuOverlay {
transition: 0.4s ease; /* ONのときのアニメ用 */
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: 0.4s ease;
height: 100%;width: 100%;
top: 0;left: 0;z-index: 1000;
pointer-events: none;
}

/* メニューがonのとき */
#menuOverlay.on {
  opacity: 1;
  pointer-events: auto;
}

nav#menuList{transition: all 0.3s ease-in-out; 
  width:300px;
  background: #fff; 
  pointer-events: all;
  position: fixed;
  top: 150px;
  right: -300px;
z-index: 10000;
border-radius: 6px;
opacity: 0;
pointer-events: none;
  /* 発光のベース */
  box-shadow:
    0 0 15px 8px rgba(255, 210, 80, 0.7),
    0 0 40px 20px rgba(255, 190, 50, 0.35);
}






nav#menuList.on{
right: 20px;
opacity: 1;
pointer-events: all;}


nav#menuList ul{}
nav#menuList li{ font-size: 14px; text-align: center; border-bottom: 1px dashed #999;border-radius: 6px;}
nav#menuList li a{ display: block;padding: 10px 0; position: relative; font-size: 120%;}

    nav#menuList li a::after {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        border-top: 2px solid #000;
        border-right: 2px solid #000;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        left: 15px;
        top: 50%;
        margin-top: -4px;
    }


@media(max-width:750px){

nav#menuList{
  width:600px;
  background: #fff; 
  pointer-events: all;
  position: fixed;
right:-500px;
  top: 170px;
z-index: 10000;
border-radius: 6px;
opacity: 0;
pointer-events: none;

  /* 発光のベース */
  box-shadow:
    0 0 15px 8px rgba(255, 210, 80, 0.7),
    0 0 40px 20px rgba(255, 190, 50, 0.35);
}
nav#menuList.on{
  right: 75px;}


nav#menuList li{ font-size: 28px; text-align: center; border-bottom: 1px dashed #999;border-radius: 6px;}
nav#menuList li a{ display: block;padding: 20px 0; position: relative;}
}







    @media(max-width:750px){
#menuBtnPackage >.inner{ width: auto;height:60px; margin: 0 auto; position: relative; z-index: 100;}


    }

#smpMenu{transition: all 0.3s ease-in-out; 
    z-index: 10000; position:fixed; width: 100%; height: 100%;
    background: rgba(255,255,255,0.96); 
    opacity: 0;
pointer-events: none;}

#smpMenu.on{
    display: block; opacity: 1;
    pointer-events: all;
}

#smpMenu >.inner{ 
 width: auto; height:100%; max-width: 1200px;
 margin: 0 auto;
 position: relative;
}

#smpMenu >.inner .inner2{
    width: 450px;
    max-width: 700px; margin: 0 auto; 
    position: absolute;
    top: 30px;
    right:0;
}





#smpMenu header{margin-bottom: 20px; position: relative;


}
#smpMenu header h1{ width: 150px;}

#smpMenu header .imgBox{position: absolute; right: 100px; bottom: 3px; width: 90px;}
#smpMenu header .imgBox span img{
    width: 15px;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transition: all 0.3s ease-in-out;
}


@media(max-width:750px){
    #smpMenu header{margin-bottom: 40px; position: relative;}
    #smpMenu header h1{ width: 250px;}
    #smpMenu >.inner .inner2{
        width: 100%;
        max-width: 650px; margin: 0 50px; 
        position: absolute;
        top: 50px;
        right:0;
        transform: translate(0%, 0%);}
        #smpMenu header .imgBox{position: absolute; right: 180px; bottom: 3px; width: 170px;}
        #menuBtnArea.min{ top: 0;}
}






#smpMenu header .imgBox:hover span img{ width: 20px;}

#smpMenu nav{border-bottom: 1px solid #a5cfdc; }
#smpMenu nav dl{ width: 100%;}

#smpMenu nav dt{ display: table; width: 100%; position: relative;border-top: 1px solid #a5cfdc;}
#smpMenu nav dt a.menuLink{ display: table-cell;padding:14px 0 14px 0; }
#smpMenu nav dt a.menuLink:hover{ background: #f5f5f5;}
#smpMenu nav dt .en{ display: inline-block; color: #000000; font-weight: 900; font-size: 16px; width: 100px;}
#smpMenu nav dt .ja{ display: inline-block; color: #93014a; font-size: 12px;}

#smpMenu nav dt a.subOpen{ overflow: hidden;display: table-cell; text-align: center; width: 50px;padding: 5px;vertical-align: middle;}


#smpMenu nav dt a.subOpen:before{
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 60px;
    width: 1px; 
    height: 40px;
    border-left: 1px dashed #93014a;
}


#smpMenu nav dt a.subOpen span.icon{display: inline-block;

    background-image: -moz-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    width: 40px; height: 40px; border-radius: 8px;}

#smpMenu nav dt a.subOpen span.icon span{
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    width: 13px;
    height: 13px;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-0%) rotate(135deg);
    transition: all 0.2s ease-out;
}

#smpMenu nav dt a.subOpen.open span.icon span{transform:scale(1, -1) translateY(-50%) rotate(135deg)}



    @media(max-width:750px){

        #smpMenu nav dt a.menuLink{ padding:30px 0 25px 0;}
        #smpMenu nav dt .en{  font-size: 28px; width: 180px;}
        #smpMenu nav dt .ja{  font-size: 22px;}

        #smpMenu nav dt a.subOpen span.icon{
             width: 55px; height: 55px; border-radius: 8px;}

        #smpMenu nav dt a.subOpen span.icon span{
 
            width: 20px;
            height: 20px;

        }


#smpMenu nav dt a.subOpen:before{
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 80px;
    width: 1px; 
    height: 60px;
    border-left: 1px dashed #93014a;
}


    }






#smpMenu nav dd{overflow: hidden;    max-height: 0;    transition: 500ms max-height ease-out;}
#smpMenu nav dd.view{  max-height: 300px;}

#smpMenu nav dd.ptn01 ul{
    width: auto;margin: 0 auto;display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5px;row-gap: 5px;
}
#smpMenu nav dd.ptn02 ul{
    width: auto;margin: 0 auto;display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5px;row-gap: 5px;
}
#smpMenu nav dd.ptn03 ul{
    width: auto;margin: 0 auto;display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 5px;row-gap: 5px;
}

#smpMenu nav dd.rdBtn ul{padding:0 0 20px 0;}
#smpMenu nav dd.rdBtn ul li{}
#smpMenu nav dd.rdBtn ul li a{
    color: #fff; font-size: 14px; 
    display: block; text-align: center;padding: 5px 0;
    background-image: -moz-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
}

#smpMenu nav dd.gfBtn ul li{  }
#smpMenu nav dd.gfBtn ul li a{ text-align: left;padding: 5px 10px;border:1px solid #999; display: block; font-size: 14px; }

#smpMenu nav dd.gfBtn ul li.p01 a{ background: url(/common/images/menu/p01.jpg) no-repeat right top; background-size: cover;}
#smpMenu nav dd.gfBtn ul li.p02 a{ background: url(/common/images/menu/p02.jpg) no-repeat right top; background-size: cover;}
#smpMenu nav dd.gfBtn ul li.p03 a{ background: url(/common/images/menu/p03.jpg) no-repeat right top; background-size: cover;}
#smpMenu nav dd.gfBtn ul li.p04 a{ background: url(/common/images/menu/p04.jpg) no-repeat right top; background-size: cover;}

#smpMenu nav dd.gfBtn.ptn03 ul{margin-bottom: 20px;}
#smpMenu nav dd.gfBtn.ptn03 ul li a{ 
    padding-left: 40px;
    box-sizing: border-box;
    margin-right: 10px;
    background-image: url(/common/images/menu/movie.png),url(/common/images/menu/outside.png);
    background-repeat: no-repeat,no-repeat;
    background-size: 20px auto,10px auto;
    background-position: center left 8px,center right 10px;

}



@media(max-width:750px){

    #smpMenu nav dd.rdBtn ul li a{ font-size: 23px;padding: 15px 0;}
    #smpMenu nav dd.gfBtn ul li a{ padding: 15px 10px;font-size: 22px;}

    #smpMenu nav dd.gfBtn.ptn03 ul{margin-bottom: 20px;}
    #smpMenu nav dd.gfBtn.ptn03 ul li a{
        padding-left: 60px;
        box-sizing: border-box;
        margin-right: 10px;
        background-image: url(/common/images/menu/movie.png),url(/common/images/menu/outside.png);
        background-repeat: no-repeat,no-repeat;
        background-size: 30px auto,20px auto;
        background-position: center left 14px,center right 10px;
    
    }
}



#menuBtn {
pointer-events: all;
 position: absolute; z-index: 10000; right: 20px; top: 20px;
width: 100px; height: 100px;
cursor: pointer;pointer-events:all; z-index: 1000;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

 background: radial-gradient(
    circle at center,
    #ffeca2 0%,   /* 一番明るい中心 */
    #f9c738 40%,  /* 中間の金色 */
    #d8a420 100%  /* 外側の濃いゴールド */
  );

  border-radius: 2px;

  gap: 8px; /* 各バーの間隔 */
  cursor: pointer;

}

/* 3本のバー */
#menuBtn span {
  display: block;
  width: 50px;
  height: 2.5px;
  background: #000;
  border-radius: 5px; /* バーにも角丸必須 */
  transition: 0.4s ease; /* ONのときのアニメ用 */
}

#menuBtnArea #menuBtn:hover{ transition: all 0.1s ease-in-out;}

@media(min-width:751px){
#menuBtnArea #menuBtn:hover span{width:30px;}
 }

 #menuBtnArea #menuBtn.on .bar01{ transform: translateY(9px) rotate(45deg);}
 #menuBtnArea #menuBtn.on .bar02{ height: 0px; transform: skewX(0deg); opacity: 0; }
 #menuBtnArea #menuBtn.on .bar03{  transform: translateY(-10px) rotate(-45deg); }

 @media(max-width:750px){



#menuBtn {
position: absolute; z-index: 10000;
right: 30px; top: 23px;
width: 80px; height: 80px;
cursor: pointer;pointer-events:all; z-index: 1000;


right: 40px; top: 40px;
transform: scale(1.5);


display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

background: radial-gradient(
    circle at center,
    #fff5cd 0%,   /* 一番明るい中心 */
    #f9c738 60%,  /* 中間の金色 */
    #d8a420 100%  /* 外側の濃いゴールド */
);

border-radius: 2px;
  gap: 8px; /* 各バーの間隔 */
  cursor: pointer;
}

#menuBtn span {
  display: block;
  width: 40px;
  height: 3px;
  background: #000;
  border-radius: 5px; /* バーにも角丸必須 */
  transition: 0.4s ease; /* ONのときのアニメ用 */
}

 #menuBtnArea #menuBtn.on .bar02{ height: 0px; transform: skewX(0deg); opacity: 0; }
 #menuBtnArea #menuBtn.on .bar01{ transform: translateY(8px) rotate(45deg);}
 #menuBtnArea #menuBtn.on .bar03{  transform: translateY(-11px) rotate(-45deg); }

}