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

#menuBtnArea{ position: fixed; width: 100%; top:0;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: 500px; margin: 0 auto; 
    position: absolute;
    top: 50%;
    right:0;
    transform: translate(0%, -50%);}

#smpMenu header{margin-bottom: 20px; position: relative;}
#smpMenu header p{font-size: 14px; font-weight: 900; margin-bottom: 5px;}
#smpMenu header h1{ width: 60%;}

#smpMenu header .imgBox{position: absolute; right: 80px; bottom: 10px; width: 100px;}
#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;
}

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

#smpMenu nav{}
#smpMenu nav dl{margin-bottom: 10px; display: table; width: 100%;}

#smpMenu nav dt{ display: table-cell; vertical-align: top; width: 50%;}
#smpMenu nav dt a{ display: block;position: relative; top: 5px;}
#smpMenu nav dt .en{ display: block; color: #000; font-weight: 900; font-size: 14px; margin-bottom: -4px;}
#smpMenu nav dt .ja{ display: block; color: #93014a; font-size: 10px;}

#smpMenu nav dd{ display: table-cell; vertical-align: top; width: 50%;}

#smpMenu nav dd ul{border-left: 1px solid #93014a;padding:15px 0 15px 10px;}
#smpMenu nav dd ul li{ font-size: 14px;margin-bottom: 20px;}
#smpMenu nav dd ul li:last-child{ margin-bottom: 0px;}
#smpMenu nav dd ul li a{color: #000; font-weight: bold;}





@media(max-width:750px){

    #menuBtnArea.min{ top: 0;}
    #smpMenu >.inner{}
    #smpMenu >.inner .inner2{ width:650px; margin: 0 auto; 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #smpMenu header p{font-size: 26px;}
    #smpMenu header h1{ width: 50%;}


    #smpMenu header .imgBox{position: absolute; right: 130px; bottom: 10px; width: 160px;}

    #smpMenu header .imgBox span img{
        width: 25px;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    #smpMenu nav dt a{ display: block;position: relative; top: 24px;}
    #smpMenu nav dt .en{  font-size: 34px; margin-bottom: 5px;}
    #smpMenu nav dt .ja{  font-size: 24px;}

    #smpMenu nav dd ul{padding:10px 0 10px 20px;}
    #smpMenu nav dd ul li{ font-size: 28px;margin-bottom: 0;}
    #smpMenu nav dd ul li:last-child{ margin-bottom: 0px;}
    #smpMenu nav dd ul li a{color: #000; font-weight: bold;padding: 25px 0 25px; display: block;}
    
}




#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: #93014a;
    font-family: "Hind Madurai", 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 #93014a;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 #93014a;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 #93014a;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;}
 
 }