@charset "utf-8";


@media screen and (min-width:641px){


#bg {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../jpg/bg.jpg) center top no-repeat; background-size: 100% auto; min-width: 1200px; z-index: -1;}
#bg02 {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../png/bg02.png) center -74px repeat-y; background-size: 100% auto; min-width: 1200px; z-index: 1;}

#kvimgs {width: 1700px; position: absolute; left: 50%; top:0; margin-left: -850px; z-index: 0; height: 1090px; list-style: none; font-size: 0; line-height: 1; min-width: 1200px; margin-top: 16px; }
#kvimgs li{position: absolute; left: 26px; top: -4px; z-index: 5;}/**/

#kv {height: 900px; width: 1400px; margin: 0 auto; padding: 0 0 0 680px; margin-top: 40px;}/**/
#kv .contents {width: 700px; overflow: hidden; padding: 0 0 0;}
#kv .contents img {width: 100%; height: auto;}
#kv .logos {position: relative;}
#kv .logos img[src*='.jpg'] {opacity: 0;}
#kv .logos ul {position: absolute; left: 0; top: 0; z-index: 10;}
#kv .logos li {position: absolute; left: 0; top: 0; z-index: 10; backface-visibility: hidden;}
#kv .logos li:nth-child(1) {background: url(../png/first_02-logo01.png) left top no-repeat; background-size: 100% auto; width: 262px; height: 146px; margin: 0 0 0 208px;}
#kv .logos li:nth-child(2) {background: url(../png/first_02-logo02.png) left top no-repeat; background-size: 100% auto; width: 246px; height: 151px; margin: 144px 0 0 77px;}
#kv .logos li:nth-child(3) {background: url(../png/first_02-logo03.png) left top no-repeat; background-size: 100% auto; width: 246px; height: 150px; margin: 146px 0 0 360px;}
#kv .line,
#kv .line a{transform-origin: center center;}
#kv .line1 {margin-bottom: 13px;}/**/
#kv .line4 {margin:39px 0 21px 2px;}/**/
#kv .line5 {margin:0 0 30px 1px;}/**/

#kv .btns {position: relative; z-index: 10; left: -3px;}/**/
#kv .btns img[src*='.jpg'] {opacity: 0;}
#kv .btns ul {position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%;}
#kv .btns ul li a{display: inline-block; transition: 0.3s ease;}
#kv .btns ul li a:hover{filter: brightness(130%);}
.ie #kv .btns ul li a:hover{opacity: 0.7;}
#kv .btns li:nth-child(1) a{background: url(../png/btn_yoyaku.png) left top no-repeat; background-size: 100% auto; width: 510px; height: 103px; margin: 0 auto;}

.moviewrap {width: 360px; height: 240px; position: absolute; right: 50%; bottom: 130px; z-index: 100; margin: 0 408px 0 0; padding: 41px 0 0 0; }/**/
.moviewrap::after{content: '';background: url(../png/kv_pv.png) left top no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10;}
.moviewrap a{display: block; width: 318px; height: 174px; margin: 0 auto; background: url(../png/btn_play.png) center center no-repeat; transition: 0.3s; }
.moviewrap a:hover{transform: scale(1.1); opacity: 0.8;}
.ie .moviewrap a:hover{opacity: 0.7;}
.moviewrap p.play {position: relative; z-index: 20;}
#player01 {width: 317px; height: 176px; position: absolute; z-index: 0; left: 21px; top: 42px;}
#player01 img {width: auto; height: 178px; position: absolute; z-index: 0; left: 0px; top: 0px;}

#kv ul.bnr {width: 315px; height: auto; position: absolute; right: 50%; bottom: 360px; z-index: 100; margin: 0 424px 0 0;padding: 0;}
#kv ul.bnr a {display: block; transition: 0.3s;}
#kv ul.bnr a img {width: 100%; height: auto; backface-visibility: hidden; transition: 0.3s;}
#kv ul.bnr a:hover  {filter: brightness(1.25)}



}



@media screen and (max-width:1700px) and (min-width:641px){


#kvimgs {width: 100%; margin-left: -50vw; height: 63.412vw; margin:0.941vw 0 0; left: 0;}
#kvimgs li{position: absolute; left: 1.529vw; top: -0.235vw; z-index: 5;}
#kvimgs li img {height: 63.412vw;}

#kv {height: 52.941vw; width: 82.352941vw; margin: 2.353vw auto 0; padding: 0 0 0 40vw;}
#kv .contents {width: 41.176471vw; padding-top:0;}
#kv .logos li:nth-child(1) {width: 15.411765vw; height: 8.588235vw; margin: 0 0 0 12.235vw;}
#kv .logos li:nth-child(2) {width: 14.470588vw; height: 8.882353vw; margin: 8.470588vw 0 0 4.529vw;}
#kv .logos li:nth-child(3) {width: 14.470588vw; height: 8.823529vw; margin: 8.588vw 0 0 21.176vw}


#kv .btns {left: -0.176vw;}
#kv .btns li:nth-child(1) a{width: 30vw; height: 6.058824vw;}

#kv .line1 {margin-bottom: 0.765vw;}
#kv .line4 {margin:2.294vw 0 1.235vw 0.118vw;}
#kv .line5 {margin:0 0 1.765vw 0.059vw;}
#kv ul.bnr {width: 18.706vw; height: auto; position: absolute; right: 50%; bottom: 21.176vw; z-index: 100; margin: 0 24.765vw 0 0;padding: 0; }

.moviewrap {background-size:auto 100%; width: 21.176471vw; height: 14.117647vw; position: absolute; right: 50%; bottom: 7.647vw; z-index: 100; margin: 0 23.588vw 0 0; padding: 2.412vw 0 0 0;}
.moviewrap::after{background-size: 100% auto;}

.moviewrap a{display: block; width: 18.705882vw; height: 10.352941vw; background-size: 4vw 4vw;}
#player01 {width: 18.352941vw; height: 10.352941vw; position: absolute; z-index: 0; left: 1.411765vw; top: 2.411765vw;}
#player01 img {width: auto; height: 10.352941vw;}

}

@media screen and (max-width:1200px) and (min-width:641px) {
#kvimgs {width: 1200px; margin-left: 0; background-size: auto 761px; height: 761px;}
#kvimgs li{top: -3px; left: 18px;}
#kvimgs li img{height: 761px;}

#kv {height:635px; width: 1200px; padding: 0 0 0 584px; margin-top: 28px;}
#kv .contents {width: 494px; padding-top: 0;}
#kv .logos li:nth-child(1) {width: 185px; height: 103px; margin: 0 0 0 147px;}
#kv .logos li:nth-child(2) {width: 174px; height: 106px; margin: 102px 0 0 54px;}
#kv .logos li:nth-child(3) {width: 174px; height: 106px; margin: 103px 0 0 254px;}
#kv .btns li:nth-child(1) a{width: 360px; height: 73px;}

#kv .line1 {margin-bottom: 9px;}
#kv .line4 {margin:27px 0 15px 1px;}
#kv .line5 {margin:0 0 21px 1px;}

.moviewrap {width: 254px; height: 169px; bottom: 94px; margin: 0 288px 0 0; padding: 29px 0 0 0;}
.moviewrap a{display: block; width: 224px; height: 124px; background-size: 48px 48px;}
#player01 {width: 220px; height: 124px; position: absolute; z-index: 0; left: 17px; top: 29px;}
#player01 img {width: auto; height: 124px;}
#kv ul.bnr {width: 222px; bottom: 253px; z-index: 100; margin: 0 300px 0 0;padding: 0;}

#kv .btns {position: relative; z-index: 10; left: -3px;}/**/



}


@media screen and (max-width:640px){
/**

    SP

**********************************************************************/

#bg {background: url(../jpg/bg_sp.jpg) center top no-repeat; background-size: 100vw auto; width: 100vw; height: 100%; min-width: inherit; position: fixed; left: 0; top: 0; z-index: 0;}
#bg02 {display: none;}

#kvimgs {background: url(../png/kv.png) center top no-repeat ; background-size: auto 100%; height:73.438vw; width: 100vw; z-index: 10; position: absolute; left: 0; top: 0; opacity: 0;}
#kv {padding:52.813vw 0 0;}
#kv img {width: 100%; height: auto;}

#kv .spline1 {margin-bottom:2.656vw;}
#kv .spline3 {margin:3.281vw 0;}
#kv .spline4 {margin:0 0 3.59375vw;}

#kv ul.btn {text-align: center;}
#kv ul.btn li a {display: block; height: 16.09375vw; margin: 0 auto;}
#kv ul.btn li a {background: url(../png/btn_yoyaku.png) center top no-repeat ; background-size: auto 100%; width: 79.6875vw;}
#kv ul.btn li:nth-child(n+2) {margin: 2.34375vw 0.625vw 0; width: 39.21875vw; display: inline-block;}
#kv ul.btn li:nth-child(n+2) a{background: url(../btn_shop.html) left top no-repeat ; background-size: 100% auto; width: 39.21875vw;}
#kv ul.btn li:nth-child(n+3) a{background: url(../btn_premium.html) left top no-repeat ; background-size: 100% auto; width: 39.21875vw;}

#kv ul.bnr a {display: block; padding: 5vw 10vw 2vw;}
#kv ul.bnr a img {width: 100%; height: auto; backface-visibility: hidden; transition: 0.3s;}


.contents{position:relative;}
.contents::after{content:''; position:absolute; top:53.125vw; left:0; width:100%; height:91.563vw; background:url(../png/promotion-bg.png) no-repeat left top; background-size: 100% auto; z-index:-1;}

.moviewrap {width: 71.09375vw; height: 47.5vw; position: relative; margin:7.969vw auto 0; padding:7.9vw 0 0;}
.moviewrap::after{content: ''; background: url(../png/kv_pv-2.png) left top no-repeat / 100% 100%; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10;}
.moviewrap a{display: block; width: 64.21875vw; height: 36.09375vw; margin: 0 auto; background: url(../png/btn_play-2.png) center center no-repeat ; background-size: 14.0625vw 14.0625vw; transition: 0.3s; border: 2px solid #373d85;}
.moviewrap p.play {position: relative; z-index: 20;}
#player01 {width: 64.21875vw; height: 36.09375vw; position: absolute; z-index: 0; left: 3.2vw; top: 7.92vw;}

}

/*
    animation
*/
@media screen and (min-width:641px){
#kvimgs li,
#kv .line1,
#kv .line2,
#kv .line3,
#kv .line4,
#kv .line5,
#kv .line6,
#kv .line7,
#kv .line8,
.moviewrap{opacity: 0;}
}
@media screen and (max-width:640px){
#kvimgs,
#kv .spline1,
#kv .spline2,
#kv .spline3,
#kv .spline4,
#kv .spline5,
#kv .spline6,
#kv .spline7,
#kv .spline8{opacity: 0;}
}