@charset "utf-8";

#mainVisual{ width: 100%; height: 90vh; position: relative; overflow: hidden;}
#mainVisual .mvBG{height: 100%; width: 100%;background:url(/common/images/mv/sky00.jpg) no-repeat center center; background-size: cover;}

#mainVisual .mvCdLeft{ width: 100%; height: 100%;background:url(/common/images/mv/sky01.png) no-repeat center center; background-size: cover;position: absolute; bottom: 0; left: 0;}
#mainVisual .mvCdRight{ width: 100%; height: 100%;background:url(/common/images/mv/sky02.png) no-repeat center center; background-size: cover;position: absolute; bottom: 0; right: 0; }
#mainVisual .mvTile{ width: 100%; height: 100%;background:url(/common/images/mv/triBG.png) repeat center center; background-size:146px 84px;position: absolute;top: 0; left: 0;opacity: 0.3;}



#mainVisual .mvTxt{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#subPage #mainVisual .mvTxt{
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#subPage #mainVisual{ width: 100%; height: 205px;}

#subPage #mainVisual header{text-align: center;}
#subPage #mainVisual header h1{display: inline-block; width: auto !important;color: #fff; font-family: roboto; font-weight: 800; letter-spacing: 0.1em;font-size: 37px;}
#subPage #mainVisual header p{ display: inline-block; background: #b8045e;line-height: 1em; padding: 5px 30px;color: #fff;font-weight: bold; letter-spacing: 0.09em;margin-left: 10px; position: relative; top: -5px;
font-size: 20px;}

@media(max-width:750px){
#subPage #mainVisual .mvBG{height: 100%; width: 100%;background:url(/common/images/mv/sky00.jpg) no-repeat -50px -190px; background-size: 1000px;}
}





@media(max-width:750px){
    #mainVisual{ width: 100%; height: 45vh;}
}


#mainVisual .mvTxt >.inner{ width: 600px; margin: 0 auto;}
#mainVisual .mvTxt .txt01{ width: 30%; margin: 0 auto 10px; position: relative;}
#mainVisual .mvTxt h1{     width: 50%; margin: 0 auto 20px; position: relative;}
#mainVisual .mvTxt .txt02{ margin-bottom:20px; text-align: center; font-size: 120%;}
#mainVisual .mvTxt .txt02 span{position: relative;}
#mainVisual .mvTxt .txt02 .t02a{ color: #fff; font-weight: 700;}
#mainVisual .mvTxt .txt02 .t02b{ color: #fff; font-weight: 700;}
#mainVisual .mvTxt .txt02 .t02c{ color: #fff; font-weight: 700;}
#mainVisual .mvTxt .txt02 .t02d{ color: #fff; font-weight: 700;}
#mainVisual .mvTxt .txt03{
    width: 30%; margin: 0 auto;
    padding: 5px;
    line-height: 1em;
    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%);
    text-align: center;}
#mainVisual .mvTxt .txt03 span{
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.mvFt{ position: relative; width: 100%; transform: translateY(-99%); }



@media(max-width:750px){
    .mvFt{ position: relative; width: 100%; transform: translateY(-98%); }
}




.mvShine{width: 100%; height: 100%;position: absolute; top: 0; left: 0;}
.schineSet{ position: absolute; width: 100%; height: 100%; position: absolute;
    top: 50%;
    left: 50%;}
.schineSet ul {
    position: absolute;left: -73px;top: -42.5px;
}
.schineSet ul li{width: 146px; height: 85px;position: absolute; left: 0; right: 0; }
.schineSet ul li img{width: 146px; height: 85px; opacity: 0.5;}



.schineSet ul li.shine01{left: -73px; top:-210px;}
.schineSet ul li.shine02{left: -146px; top:169px;}
.schineSet ul li.shine03{left: -219px; top:-294px;}
.schineSet ul li.shine04{left: -439px; top:-252px;}
.schineSet ul li.shine05{left: 292px; top:-168px;}
.schineSet ul li.shine06{left: 510px; top:42px;}

.schineSet ul li.shine07{left: 365px; top:-210px;}
.schineSet ul li.shine08{left: 219px; top:210px;}
.schineSet ul li.shine09{left: -438px; top:85px;}
.schineSet ul li.shine10{left: -292px; top:0px;}


.schineSet ul li.shine11{left: -73px; top:-210px;}
.schineSet ul li.shine12{left: -146px; top:169px;}
.schineSet ul li.shine13{left: -219px; top:-294px;}
.schineSet ul li.shine14{left: -439px; top:-252px;}
.schineSet ul li.shine15{left: 292px; top:-168px;}
.schineSet ul li.shine16{left: 510px; top:42px;}

.schineSet ul li.shine17{left: 365px; top:-210px;}
.schineSet ul li.shine18{left: 219px; top:210px;}
.schineSet ul li.shine19{left: -438px; top:85px;}
.schineSet ul li.shine20{left: -292px; top:0px;}


/* animate */
#mainVisual .mvCdLeft{filter: blur(0px);transition: all 1.6s cubic-bezier(0.13, 0.729, 0.183, 1);}
#mainVisual .mvCdRight{filter: blur(0px);transition: all 1.6s cubic-bezier(0.13, 0.729, 0.183, 1);}
#mainVisual .mvTile{filter: blur(0px);transition: all 2.0s cubic-bezier(0.13, 0.729, 0.183, 1);}

#mainVisual .mvCdLeft.start { bottom: 0; left: -120px; transform: scale(1.1);filter: blur(5px);}
#mainVisual .mvCdRight.start { bottom: 0; right: -120px;transform: scale(1.1);filter: blur(5px);}
#mainVisual .mvTile.start{ opacity: 0;transform: scale(1.1); filter: blur(5px); }



.mvTxt .txt01,
.mvTxt h1{filter: blur(0px);transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
.mvTxt .txt02 span,
.mvTxt .txt03{filter: blur(0px);transition: all 1.0s ease;}

.mvTxt .txt01.start{bottom: 10px; opacity: 0;transform: scale(1.1);}
.mvTxt h1.start{bottom: -20px; opacity: 0;transform: scale(1.1);}
.mvTxt .txt02 .start{bottom: -20px; opacity: 0;}
.mvTxt .txt03.start{bottom: -10px; opacity: 0;transform: scale(1.1);}

.tileset02{filter: blur(0px);transition: all 1.0s ease;}
.tileset02.start{opacity: 0;}

@media(max-width:750px){

}









    @media(max-width:750px){

    }