@charset "utf-8";

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

#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{ 
background: url(/common/images/bg_Header.png) no-repeat center top;
background-size: 1800px auto;
pointer-events: none;
}

#topPage #gHeader{ 
   background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);

}

#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: 42px; left: 120px;}

nav.gMenu ul li{ line-height: 1.3em; display: inline-block;margin-right: 35px;pointer-events:all; position:relative;}
nav.gMenu ul li .en{display: block;font-size: 14px; margin-bottom;color: #222; font-weight: bold;
   font-family: "Hind Madurai", sans-serif; letter-spacing: 0.05em;}
nav.gMenu ul li .ja{display: block; font-size: 11px; color: #93014a; letter-spacing:;}
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;}

#gHeader.min{height: 200px;}

#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;margin-right: 35px;pointer-events:all; position: relative;}
#gHeader.min nav.gMenu ul li .en{display: block;margin-bottom:-8px;color: #222; font-weight: bold;
   font-family: "Hind Madurai", sans-serif; letter-spacing: 0.05em;}
#gHeader.min nav.gMenu ul li .ja{display: block;  color: #93014a; letter-spacing:;}
#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 .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: -1px;               /*アンダーラインがaタグの下端から現れる*/
   transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
   transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
   transition: transform 0.3s; /*変形の時間*/
   }

nav.gMenu ul li:hover::after {
   transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}


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




nav.gMenu ul li span.movieNewIcon{width: 80px; height: 20px; display: block; 
   position: absolute; left: 50%;    transform: translate(-50%, 0%);background: #b7055f;top: -30px; 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: 20%;
       transform: translate(-50%, 0) skewX(-40deg);}

#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;}
*/

@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: 230px; position:absolute; top: 37px; left: 260px; pointer-events:all; display: block;}
   #gHeader.min h1.logo_sic{width: 80px; top: 20px;}

   .siteCopy{ display: none;}
}