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

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


#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: 1000px;
 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: auto;
font-size: 20px;
  font-family: "Shippori Mincho", serif;
letter-spacing: 0.05em;
  font-weight: 400;
  font-style: normal;
}
#smpMenu header h1 a{ color: #333;}

#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 #ccc;}
#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: #333; font-weight: 900; font-size: 16px; width: 100px;}
#smpMenu nav dt .ja{ display: inline-block; color: #777; 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 dotted #999;
}


#smpMenu nav dt a.subOpen span.icon{display: inline-block;
    
    background:#444;
    width: 40px; height: 40px; border-radius: 2px;
}

#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: 2px;}
        
        #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(1, 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: #333; font-size: 14px; 
    display: block; text-align: left;padding: 5px 0 0 15px;
    position: relative;
}


#smpMenu nav dd.rdBtn ul li a:before {
  content: '';
  width: 3px;
  height: 3px;
  border: 0;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 4px;
  left: 0;
  bottom: 0;
  margin: auto;
}



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

}

.subMenu ul li a span span{ display: inline-block; margin-left: 10px; color: #fff;padding: 4px 0; width: 80px; text-align: center; line-height: 1em; font-size:80%;}



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




#gHeader.min #menuBtn{ top: -30px;}
 
 #menuBtn{ position: absolute; z-index: 10000; right: 0px; top: 15px; width: 50px; height: 50px; display: block; cursor: pointer;pointer-events:all; z-index: 1000;
background: #000; border-radius: 50px;}

  
 #menuBtnArea #menuBtn .bar01{height:2px; width: 22px; border-top:2px solid #fff;position: absolute; top: 17px; left: 14px;
 transition: all 0.3s ease-in-out;}
 #menuBtnArea #menuBtn .bar02{height:2px; width: 22px; border-top:2px solid #fff;position: absolute; top: 24px; left: 14px;
 transition: all 0.3s ease-in-out;}
 #menuBtnArea #menuBtn .bar03{height:2px; width: 22px; border-top:2px solid #fff;position: absolute; top: 31px; left: 14px;
 transition: all 0.3s ease-in-out;}
 
 #menuBtnArea #menuBtn:hover{ transition: all 0.3s ease-in-out;opacity: 0.8;}
   
 @media(min-width:751px){

 }

 
 #menuBtnArea #menuBtn.on .bar01{ width: 22px;top: 24px; transform: rotate(45deg); }
 #menuBtnArea #menuBtn.on .bar02{ width: 0px; transform: rotate(45deg); opacity: 0; }
 #menuBtnArea #menuBtn.on .bar03{ width: 22px;top: 24px;transform: rotate(-45deg);}
 

 
 
 @media(max-width:750px){
 
    #menuBtn{ right: 20px; width: 100px; height: 100px; display: block; cursor: pointer;pointer-events:all; border-radius: 70px; top: 10px;}
    #menuBtn .word{font-size: 22px;}
 
 #menuBtnArea #menuBtn .bar01{height:2px; width: 42px; border-top:2px solid #fff;position: absolute; top: 34px; left: 27px;
 transition: all 0.3s ease-in-out;}
 #menuBtnArea #menuBtn .bar02{height:2px; width: 42px; border-top:2px solid #fff;position: absolute; top: 49px; left: 27px;
 transition: all 0.3s ease-in-out;}
 #menuBtnArea #menuBtn .bar03{height:2px; width: 42px; border-top:2px solid #fff;position: absolute; top: 64px; left: 27px;
 transition: all 0.3s ease-in-out;}
 

 #menuBtnArea #menuBtn.on .bar01{ width: 42px;top: 50px; transform: rotate(45deg); }
 #menuBtnArea #menuBtn.on .bar02{ width: 0px; transform: rotate(45deg); opacity: 0; }
 #menuBtnArea #menuBtn.on .bar03{ width: 42px;top: 50px;transform: rotate(-45deg);}
 
 }