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

#menuBtnArea{ position: fixed; width: 100%; top:-2px;z-index: 10001;transition: all  0.5s ease; }
#menuBtnArea >.inner{width: auto;max-width: 1200px;  margin: 0 auto; position:relative;}

#menuBtnArea.min{ top: -30px;}

#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(../images/menu/p01.jpg) no-repeat right top; background-size: cover;}
#smpMenu nav dd.gfBtn ul li.p02 a{ background: url(../images/menu/p02.jpg) no-repeat right top; background-size: cover;}
#smpMenu nav dd.gfBtn ul li.p03 a{ background: url(../images/menu/p03.jpg) no-repeat right top; background-size: cover;}
#smpMenu nav dd.gfBtn ul li.p04 a{ background: url(../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(../images/menu/movie.png),url(../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(../images/menu/movie.png),url(../images/menu/outside.png);
        background-repeat: no-repeat,no-repeat;
        background-size: 30px auto,20px auto;
        background-position: center left 14px,center right 10px;
    
    }
}




#gHeader.min #menuBtn{ top: -30px;}
 
 #menuBtn{ position: absolute; z-index: 10000; right: 0px; top: 0px; width: 70px; height: 80px; display: block; cursor: pointer;pointer-events:all; z-index: 1000;}
 #menuBtn .word{ color: #111;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 12px;
    position:absolute;
    left: 0;
    bottom: 4px;
    line-height: 1em;
    transition: all 0.3s ease-in-out;
 }
  
 #menuBtnArea #menuBtn .bar01{width:2px; height: 20px; border-left:2px solid #111;position: absolute; bottom: 0; left: 40px;
 transform: skewX(-35deg);transition: all 0.3s ease-in-out;}
 #menuBtnArea #menuBtn .bar02{width:2px; height: 30px; border-left:2px solid #111;position: absolute; bottom: 0; left: 50px;
 transform: skewX(-35deg);transition: all 0.3s ease-in-out;}
 #menuBtnArea #menuBtn .bar03{width:2px; height: 40px; border-left:2px solid #111;position: absolute; bottom: 0; left: 60px;
 transform: skewX(-35deg);transition: all 0.3s ease-in-out;}
 
 #menuBtnArea #menuBtn:hover{ transition: all 0.3s ease-in-out;opacity: 0.6;}
   
 @media(min-width:751px){
#menuBtnArea #menuBtn:hover .bar01{height: 30px;  left: 40px; transform: skewX(-35deg);}
#menuBtnArea #menuBtn:hover .bar02{height: 30px;  left: 48px; transform: skewX(-35deg);}
#menuBtnArea #menuBtn:hover .bar03{height: 30px;  left: 56px; transform: skewX(-35deg);}
 }

 
 #menuBtnArea #menuBtn.on .bar01{ height: 40px; transform: skewX(-45deg); left: 50px;}
 #menuBtnArea #menuBtn.on .bar02{ height: 0px; transform: skewX(0deg); opacity: 0; }
 #menuBtnArea #menuBtn.on .bar03{ height: 40px; transform: skewX(45deg);left: 50px; }
 #menuBtnArea #menuBtn.on .word{  bottom: 13px;transition: all 0.3s ease-in-out;}
 

 
 
 @media(max-width:750px){
 
    #menuBtn{ right: 20px; width: 130px; height: 100px; display: block; cursor: pointer;pointer-events:all;}
    #menuBtn .word{font-size: 22px;}
 
    #menuBtnArea #menuBtn .bar01{width:4px; height: 40px; border-left:2px solid #93014a;position: absolute; bottom: 0; left: 70px;
       transform: skewX(-35deg);transition: all 0.3s ease-in-out;}
    #menuBtnArea #menuBtn .bar02{width:4px; height: 60px; border-left:2px solid #93014a;position: absolute; bottom: 0; left: 85px;
       transform: skewX(-35deg);transition: all 0.3s ease-in-out;}
    #menuBtnArea #menuBtn .bar03{width:4px; height: 80px; border-left:2px solid #93014a;position: absolute; bottom: 0; left: 100px;
       transform: skewX(-35deg);transition: all 0.3s ease-in-out;}
 
    #menuBtnArea #menuBtn.on .bar01{ height: 80px; transform: skewX(-45deg); left: 90px;}
    #menuBtnArea #menuBtn.on .bar02{ height: 0px; transform: skewX(0deg); opacity: 0; }
    #menuBtnArea #menuBtn.on .bar03{ height: 80px; transform: skewX(45deg);left: 90px; }
    #menuBtnArea #menuBtn.on .word{  bottom: 28px;transition: all 0.3s ease-in-out;}
 
 }