@charset "utf-8";

#gHeader{width: 100%; position: fixed; top: 0;z-index: 55; height: 200px; 
   transition: all 0.5s ease;
}

#gHeader:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
top: -90px;
left: 0;
z-index: -1;
background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
height:90px;
transition: all 0.5s ease;
}

#gHeader.min:after{
   top: 0;
   transition: all 0.5s ease;
   }
   

#gHeader >.inner{position: relative;}

.siteCopy{ position:absolute; font-weight: 900; top: 14px; left: 120px;font-size: 12px; color:#93014a; border: 1px solid #93014a;padding: 3px 10px; line-height: 1em;}

#gHeader{ 
pointer-events: none;
}

#topPage #gHeader{
}

#gHeader >.inner{ width: auto;max-width: 1200px; margin: 0 auto; position:relative;}

#gHeader h1.logo_sic{width: 60px; position:absolute; top: 20px; pointer-events:all;}
#gHeader h1.logo_beyond{display: none;}

nav.gMenu{ position:absolute;top: 44px; left: 90px;}

nav.gMenu ul li{ line-height: 1.3em; display: inline-block;pointer-events:all; position:relative; width: 100px; text-align: center;}
nav.gMenu ul li .en{display: block;font-size: 14px; margin-bottom;color: #222;
   font-family: "Roboto", sans-serif; font-weight: 800; letter-spacing: 0.05em;
   position: relative; top: 0; width: 100%;}
nav.gMenu ul li a .ja{display: block; font-size: 12px; color: #222;font-weight: bold;
position: absolute; top: 0; left: 0; width: 100%; opacity: 0;}

nav.gMenu ul li:last-child{top: 5px;}

nav.gMenu ul li:hover .en{opacity: 0; top: 0; transform: scale(1.3);}
nav.gMenu ul li:hover .ja{ opacity: 1;}


nav.gMenu ul li .ja.lts{ letter-spacing: -0.14em;}

nav.gMenu ul li .imgBox{ width: 90px;}
nav.gMenu ul li .imgBox img{ width: 100%; margin-bottom: 3px;}

nav.gMenu ul li a:hover{opacity: 0.8;}



nav.gMenu ul li span.movieNewIcon{width: 80px; height: 20px; display: block; 
   position: absolute; left: 50%;    transform: translate(-50%, 0%);background: #b7055f;top: -35px; line-height: 1em; vertical-align: bottom;}
nav.gMenu ul li span.movieNewIcon .newIcon{width: 35px; vertical-align: bottom; line-height: 1em;
   position: absolute; top: 50%;  left: 50%;    transform: translate(-50%, -50%);}
nav.gMenu ul li span.movieNewIcon .newArrow{ width: 15px;bottom: -10px; position: absolute; left: 50%;    transform: translate(-50%, 0);}

#gHeader.min  nav.gMenu ul li span.movieNewIcon {opacity: 0;}


.movieLinkBtn{ width: 200px; display: block; position: fixed; bottom: 0; right: 0;z-index: 100;}

@media(max-width:750px){
   .movieLinkBtn{ width: 350px; display: block; position: fixed; bottom: 0; right: 0;z-index: 100;}
}

/* メニューのMovieのNEWアイコンを消す場合はコチラのコメントアウトを解除してください */
/*
.movieLinkBtn,
nav.gMenu ul li span.movieNewIcon{display: none;}
*/



#gHeader.min{height: 90px; 
}

nav.gMenu.min ul li span.movieNewIcon{ opacity: 0;}

#gHeader.min h1.logo_sic{width: 40px; top: 10px;}

#gHeader.min nav.gMenu{ position:absolute;top: 19px; }

#gHeader.min nav.gMenu ul li{ line-height: 1.3em; display: inline-block;pointer-events:all; position: relative;text-align: center;}
#gHeader.min nav.gMenu ul li .en{display: block;margin-bottom:;color: #222; font-weight: bold;
   font-family: "Roboto", sans-serif;font-weight: 700; letter-spacing: 0.05em; text-align: center;
}
#gHeader.min nav.gMenu ul li .ja{display: block;  color: #222;text-align: center; }
#gHeader.min nav.gMenu ul li .ja.lts{ letter-spacing: -0.14em;}


#gHeader.min nav.gMenu ul li .imgBox{ width: 70px;}
#gHeader.min nav.gMenu ul li .imgBox img{ width: 100%; margin-bottom: 1px;}


#gHeader.min nav.gMenu ul li:last-child{top: 1px;}

#gHeader.min .siteCopy{ opacity: 0;}


nav.gMenu ul li::after {
   position: absolute;
   left: 0;
   content: '';
   width: 100%;
   height: 2px;
   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%);
   bottom: -3px;               /*アンダーラインがaタグの下端から現れる*/
   transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
   transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
   transition: transform 0.2s; /*変形の時間*/
   }


nav.gMenu ul li.now:before{
   position: absolute;
   left: 0;
   content: '';
   width: 100%;
   height: 1px;
   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%);
   bottom: -1px;
   transform: scale(1);
   transform-origin: left top;
   transition: transform 0.3s;
}


@media(max-width:750px){
   nav.gMenu{ display: none;}

   #gHeader >.inner{ width: auto; }
   #gHeader h1.logo_sic{width: 80px; position:absolute; top: 20px; left: 20px; pointer-events:all;}
   #gHeader h1.logo_beyond{width: 170px; position:absolute; top: 45px; left: 290px; pointer-events:all; display: block;
      
      
   }
   #gHeader h1.logo_beyond img{filter: brightness(1) ;}
   #gHeader.min h1.logo_sic{width: 80px; top: 20px;}
   .siteCopy{ display: none;}

   #gHeader.min h1.logo_beyond img{
      filter: brightness(0);
}
}

a.entryBtn{ width: 100px; height: 100px; display: block; position: absolute;right: -15px;top: 100px;z-index: 33320; pointer-events: all;}
a.entryBtn:hover{ transform: scale(1.05); opacity: 1;}

@media(min-width:751px){
#gHeader.min a.entryBtn{ width: 80px; height: 80px; top: 70px; right: -5px;}
}

@media(max-width:750px){
a.entryBtn{ width: 110px; height: 110px; display: block; position: absolute;right: 25px;top: 120px;z-index: 33320; pointer-events: all;}
}





@media(max-width:750px){
   
   #gHeader:after{
   height:160px;
   top: -160px;
   }
   #gHeader.min:after{
      top:0px;
   }
   
   }