@charset "utf-8";

/* modal */
html.dlcmodalopen,
body.dlcmodalopen {overflow: hidden;}
html.dlcmodalopen.dlcmodalclose,
body.dlcmodalopen.dlcmodalclose {overflow: visible;}

#dlcmodalbase {z-index: -1000000; background: rgba(255,255,255,0); width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; overflow: hidden; overflow-y: scroll; transition: 0.8s 0s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0;}
.windowloaded #dlcmodalbase{opacity: 1;}
#dlcmodalbase .wrap{width: 854px; margin: 194px auto 120px; background: url(../images/common/bg_modal-mid.png) center center repeat-y; transition: 0.7s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0,-101%);}
#dlcmodalbase .wrap::after{content: ''; background: url(../images/common/bg_modal-top.png) center top no-repeat; width: 100%; height: 100px; position: absolute; left: 0; top: -100px; z-index: 0;}
#dlcmodalbase .wrap::before{content: ''; background: url(../images/common/bg_modal-bottom.png) center bottom no-repeat; width: 100%; height: 100px; position: absolute; left: 0; bottom: -100px; z-index: 0;}
#dlcmodalbase .wrap article{position: relative; z-index: 10; border: 1px solid rgba(255,255,255,0);}

#dlcmodal header {position: relative; padding: 0 0 0; z-index: 0; text-align: center; margin-top: -47px; margin-bottom: 48px;}
#dlcmodal header h2 {/*background: url(../images/series/h2_story.png) center top no-repeat; height: 51px;*/ font-size: 0; line-height: 1;}
#dlcmodal .body {width: 686px; margin: 0 auto -50px;}
#dlcmodal .body p {font-size: 15px; line-height: 1.7; color: #373d85;}
#dlcmodal dl {padding: 0; color: #373d85; margin-bottom: 30px;}
#dlcmodal dl dt {font-size: 21px; line-height: 1.7; font-weight: bold; margin-bottom: 4px;}
#dlcmodal dl dt small {font-size: 17px; line-height: 1.7; font-weight: bold; display: inline-block; padding: 10px 0;}
#dlcmodal dl dd {font-size: 15px; line-height: 1.7; border-bottom: 1px solid #d2ad86; padding-bottom: 29px;}
#dlcmodal dl dd + dt {padding-top: 29px;}
#dlcmodal p.note {font-size: 15px; /*text-indent: -1em; padding-left: 1em;*/ line-height: 1.7; color: #373d85;}
#dlcmodal p.note i {width: 1em; display: inline-block; text-align: center;}
#dlcmodal dl dd p.note {font-size: 13px; /*text-indent: -1em; padding-left: 1em;*/}
#dlcmodal dl dd p + strong {margin-top: 1.8em; display: block;}
#dlcmodal footer {position: absolute; right: 9px; top: -182px; z-index: 10; width: 62px; height: 62px; overflow: hidden; font-size: 0;}
#dlcmodal footer a{display: block; width: 62px; height: 62px; transition: 0.3s ease-out;background: url(../images/common/btn_close.png) left top no-repeat;}
#dlcmodal footer a:hover {opacity: 0.8;}
#dlcmodal dl dd:last-child{border-bottom: none; padding-bottom: 0;}

.dlcmodalopen #dlcmodalbase{z-index: 1000000; background: rgba(255,255,255,0.9);}
.dlcmodalclose #dlcmodalbase {z-index: 1000000; background: rgba(255,255,255,0);}
#dlcmodal article {display: none;}
#dlcmodal article.show{display: block;}
.dlcmodalopen #dlcmodalbase .wrap{transform: translate(0,0);}
.dlcmodalclose #dlcmodalbase .wrap{transform: translate(0,-101%); transition: 0.3s 0s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0;}



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

#siteheader nav ul li:nth-child(1) a::before {top: 0; opacity: 1;}

#wrapper {padding-top: 0; overflow: hidden;}

#bg {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/top/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(../images/top/bg02.png) center -74px repeat-y; background-size: 100% auto; min-width: 1200px; z-index: 3;}
#kvimgs {width: 1700px; position: absolute; left: 50%; top:0; margin-left: -850px; z-index: 2; /*background: url(../images/top/bg_kv.png) left top no-repeat;*/ height: 1090px; list-style: none; font-size: 0; line-height: 1; min-width: 1200px; margin-top: 16px; }
#kvimgs li{position: absolute; left: 31px; top: -4px; z-index: 5;}

#kv {height: 985px; width: 1400px; margin: 0 auto; padding: 0 0 0 700px; margin-top: 40px;}
#kv .contents {width: 700px; overflow: hidden; padding: 77px 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(../images/top/first_02-logo01.png) left top no-repeat; background-size: 100% auto; width: 262px; height: 146px; margin: 0 0 0 186px;}
#kv .logos li:nth-child(2) {background: url(../images/top/first_02-logo02.png) left top no-repeat; background-size: 100% auto; width: 246px; height: 151px; margin: 144px 0 0 69px;}
#kv .logos li:nth-child(3) {background: url(../images/top/first_02-logo03.png) left top no-repeat; background-size: 100% auto; width: 246px; height: 150px; margin: 144px 0 0 345px;}
#kv .line,
#kv .line a{transform-origin: center center;}
#kv .line1 {margin-bottom: 18px;}
#kv .line4 {margin:40px 0 19px;}
#kv .line5 {margin:0 0 27px;}
#kv .btns {position: relative; z-index: 10;}
#kv .btns img[src*='.jpg'] {opacity: 0;}
#kv .btns ul {position: absolute; left: 0; top: 0; z-index: 10;}
#kv .btns ul li a{position: absolute; left: 0; top: 0; display: 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(../images/common/btn_yoyaku.png) left top no-repeat; background-size: 100% auto; width: 510px; height: 103px; margin: 0 0 0 71px;}
#kv .btns li:nth-child(2) a{background: url(../images/common/btn_shop.png) left top no-repeat; background-size: 100% auto; width: 252px; height: 93px; margin: 118px 0 0 71px;}
#kv .btns li:nth-child(3) a{background: url(../images/common/btn_premium.png) left top no-repeat; background-size: 100% auto; width: 252px; height: 93px; margin: 118px 0 0 331px;}

.moviewrap {width: 360px; height: 240px; position: absolute; right: 50%; bottom: 85px; z-index: 100; margin: 0 401px 0 0; padding: 41px 0 0 0;}
.moviewrap::after{content: '';background: url(../images/top/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(../images/common/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)}
#kv ul.bnr li {margin: 10px 0 0 0;}


#pack {margin-bottom: 73px; margin-top: -52px;}
#pack section {height: 557px; background: url(../images/top/bg_pack.png) center top no-repeat;}
#pack section::after{content: ''; background: url(../images/top/bg_pack-repeat.png) left top repeat-x; width: 100%; height: 100%; position: absolute; left: 50%; top: 0; margin-left: 950px;}
#pack section::before{content: ''; background: url(../images/top/bg_pack-repeat.png) left top repeat-x; width: 100%; height: 100%; position: absolute; right: 50%; top: 0; margin-right: 950px;}
#pack section div {background: url(../images/top/pack.png) center top no-repeat; height: 557px; position: relative;}
#pack section div::after{content: ''; background: url(../images/top/bg_pack02.png) left top no-repeat; width: 173px; height: 329px; position: absolute; left: 50%; top: -66px; margin-left: 627px;}
#pack section div::before{content: ''; background: url(../images/top/bg_pack03.png) left top no-repeat; width: 232px; height: 336px; position: absolute; left: 50%; top: 252px; margin-left: -800px;}

#pack .product {background: url(../images/top/btn_product.png) left top no-repeat; width: 570px; height: 142px; position: absolute; left: 50%; top: 100%; z-index: 100; padding: 28px 0 0 30px; margin: -110px 0 0 -285px;}
#pack .product a {display: block; width: 510px; height: 80px; transition: 0.3s ease; position: relative;background: url(../images/top/btn_product.png) -30px -28px no-repeat;}
#pack .product a::after{content: ''; background: #fff; position: absolute; left: 1px; top: 1px; width: 100%; height: 100%; opacity: 0; transition: 0.3s;}
#pack .product a:hover {filter: brightness(130%);}
.ie #pack .product a:hover::after {opacity: 0.3;}

#point {margin-bottom: 110px;}
#point section {height: 479px; position: relative; z-index: 100;}
#point section::after {content: ''; background: url(../images/top/point.png) center top no-repeat ; background-size:100% auto; width: 1700px; height: 479px; position: absolute; left: 50%; top:0; margin-left: -850px;}
#point .dlc {background: url(../images/top/btn_dlc.png) left top no-repeat; width: 454px; height: 123px; position: absolute; left: 50%; top: 100%; z-index: 100; padding: 28px 0 0 30px; margin: -64px 0 0 -335px;}
#point .dlc a {display: block; width: 390px; height: 60px; transition: 0.3s ease; background: url(../images/top/btn_dlc.png) -30px -28px no-repeat; position: relative;}
#point .dlc a::after{content: ''; background: #fff; position: absolute; left: 1px; top: 1px; width: 100%; height: 100%; opacity: 0; transition: 0.3s;}
#point .dlc a:hover{filter: brightness(130%)}
.ie #point .dlc a:hover::after {opacity: 0.3;}

#spec section::before{content: ''; background: url(../images/top/bg_spec.png) left top no-repeat; width: 340px; height: 794px; position: absolute; left: 50%; top: -146px; margin: 0 0 0 500px;}
#spec section::after{content: ''; background: url(../images/top/bg_spec02.png) left top no-repeat; width: 355px; height: 923px; position: absolute; right: 50%; top: -54px; margin: 0 466px 0 0;}
#spec table{border: 2px solid #373d85; width: 960px; margin: 37px auto 75px; font-size:15px; line-height: 28px; background: #fff; position: relative; z-index: 100;}
#spec table td { color: #373d85; text-align: left; border-bottom: 1px solid #373d85; padding: 0 15px;}
#spec table th {font-size:15px; line-height: 31px; font-weight: bold; color: #fff; background: #696ea4; border-bottom: 1px solid #373d85; padding: 0 20px; width: 120px;}
#spec table td div {display: inline-block; vertical-align: top; margin: 15px 0; padding-right: 15px;}
#spec table td div + div {border-left:1px solid #b2b2b2; padding: 0 0 0 15px;}

main .snsbtn {position: relative; z-index: 100; padding: 0 0 63px;}
main .snsbtn li {display: inline-block; vertical-align: top; padding: 0 6px;}
main .snsbtn li a{display: block; position: relative; transition: 0.3s;}
main .snsbtn li a img{transition: 0.3s;}
main .snsbtn li a:hover img{filter: brightness(120%);}
.ie main .snsbtn li a:hover{opacity: 0.7;}
main .snsbtn li:nth-child(1) a::after{content: ''; background: url(../images/top/btn_twitter-taru.png) left top no-repeat; width: 144px; height: 144px; position: absolute; left: 0; top: 0; z-index: 10; margin: -20px 0 0 -9px;}
main .snsbtn li:nth-child(2) a::after{content: ''; background: url(../images/top/btn_mailmagazine-character.png) left top no-repeat; width: 339px; height: 395px; position: absolute; right: 0; top: 0; z-index: 10; margin: -59px -154px 0 0;}



}



@media screen and (max-width:1700px) and (min-width:641px){
#kvimgs {width: 100%; margin-left: -50vw; height: 64.118vw; margin:0.941176vw 0 0; left: 0;}

#kvimgs li{position: absolute; left: 1.824vw; top: -0.235vw; z-index: 5;}

#kvimgs li img {height: 64.118vw;}


#kv {height: 57.941176vw; width: 82.352941vw; margin: 2.352941vw auto 0; padding: 0 0 0 41.176471vw;}
#kv .contents {width: 41.176471vw; padding-top: 4.529412vw;}
#kv .logos li:nth-child(1) {width: 15.411765vw; height: 8.588235vw; margin: 0 0 0 10.941176vw;}
#kv .logos li:nth-child(2) {width: 14.470588vw; height: 8.882353vw; margin: 8.470588vw 0 0 4.058824vw;}
#kv .logos li:nth-child(3) {width: 14.470588vw; height: 8.823529vw; margin: 8.470588vw 0 0 20.294118vw;}
#kv .btns li:nth-child(1) a{width: 30vw; height: 6.058824vw; margin: 0 0 0 4.176471vw;}
#kv .btns li:nth-child(2) a{width: 14.823529vw; height: 5.470588vw; margin: 6.941176vw 0 0 4.176471vw;}
#kv .btns li:nth-child(3) a{width: 14.823529vw; height: 5.470588vw; margin: 6.941176vw 0 0 19.470588vw;}

#kv .line1 {margin-bottom: 1.058824vw;}
#kv .line4 {margin:2.352941vw 0 1.117647vw;}
#kv .line5 {margin:0 0 1.588235vw;}

#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;}
#kv ul.bnr li {margin: 5px 0 0 0;}



.moviewrap {background-size:auto 100%; width: 21.176471vw; height: 14.117647vw; position: absolute; right: 50%; bottom: 5vw; 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;}



#pack section {height: 32.764706vw; background-size: auto 100%;}
#pack section::after,
#pack section::before{display: none;}
#pack section div {background-size:auto 100%; height: 32.764706vw; position: relative;}
#pack section div::after{background-size: auto 100%; width: 10.176471vw; height: 19.352941vw; position: absolute; left: 50%; top: -3.882353vw; margin-left: 36.882353vw;}

#pack section div::before{background-size: auto 100%; width: 13.647059vw; height: 19.764706vw; top: 14.823529vw; margin-left: -47.058824vw;}


#pack .product {background-size:100% auto; width: 33.529412vw; height: 8.352941vw; padding: 1.647059vw 0 0 1.764706vw; margin: -6.470588vw 0 0 -16.764706vw;}
#pack .product a {width: 30vw; height: 4.705882vw; background: url(../images/top/btn_product.png) -1.764706vw -1.647059vw no-repeat; background-size: 33.529412vw 8.352941vw;}


#point .dlc {background-size:100% auto; width: 26.705882vw; height: 7.235294vw; padding: 1.647059vw 0 0 1.764706vw; margin: -3.764706vw 0 0 -19.705882vw;}
#point .dlc a {display: block; width: 22.941176vw; height: 3.529412vw; background: url(../images/top/btn_dlc.png) -1.764706vw -1.647059vw no-repeat; background-size: 26.705882vw 7.235294vw;}

#point section {width: 100%; height: 28.176471vw;}
#point section::after {width: 100%; height: 28.176471vw; left: 0; margin-left: 0; background-size: auto 100%;}

#spec section::before{background-size: auto 100%; width: 20vw; height: 46.705882vw; top: -8.588235vw; margin: 0 0 0 29.411765vw;}
#spec section::after{background-size: auto 100%; width: 20.882353vw; height: 54.294118vw; top: -3.176471vw; margin: 0 27.411765vw 0 0;}

}

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

#kv {height:695px; width: 1200px; padding: 0 0 0 600px; margin-top: 29px;}
#kv .contents {width: 494px; padding-top: 54px;}
#kv .logos li:nth-child(1) {width: 185px; height: 103px; margin: 0 0 0 131px;}
#kv .logos li:nth-child(2) {width: 174px; height: 106px; margin: 102px 0 0 49px;}
#kv .logos li:nth-child(3) {width: 174px; height: 106px; margin: 102px 0 0 244px;}
#kv .btns li:nth-child(1) a{width: 360px; height: 73px; margin: 0 0 0 50px;}
#kv .btns li:nth-child(2) a{width: 178px; height: 66px; margin: 83px 0 0 50px;}
#kv .btns li:nth-child(3) a{width: 178px; height: 66px; margin: 83px 0 0 234px;}

#kv .line1 {margin-bottom: 11px;}
#kv .line4 {margin:25px 0 12px;}
#kv .line5 {margin:0 0 17px;}

.moviewrap {width: 254px; height: 169px; bottom: 60px; margin: 0 283px 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 ul.bnr li {margin: 5px 0 0 0;}


#pack section {height: 393px;}
#pack section div {height: 393px;}
#pack section div::after{width: 122px; height: 232px; top: -46px; margin-left: 442px;}
#pack section div::before{width: 164px; height: 237px; top: 178px; margin-left: -565px;}



#pack .product {width: 402px; height: 100px; padding: 20px 0 0 21px; margin: -78px 0 0 -201px;}
#pack .product a {display: block; width: 360px; height: 56px; background: url(../images/top/btn_product.png) -21px -20px no-repeat; background-size: 402px 100px;}

#point section {width:1200px; height: 338px;}
#point section::after {width:1200px; height: 338px; background-size: auto 100%;}

#point .dlc { width: 320px; height: 87px; padding: 20px 0 0 21px; margin: -45px 0 0 -236px;}
#point .dlc a {display: block; width: 275px; height: 42px; background: url(../images/top/btn_dlc.png) -21px -20px no-repeat; background-size: 320px 87px;}


#spec section::before{width: 240px; height: 560px; top: -103px; margin: 0 0 0 353px;}
#spec section::after{width: 251px; height: 652px; top: -39px; margin: 0 329px 0 0;}


}


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

    SP

**********************************************************************/
#wrapper {padding-top: 0; overflow: hidden; font-size: 0; width: 100vw;}

#bg {background: url(../images/common/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(../images/top/sp/kv.png) center top no-repeat ; background-size: auto 100%; height: 69.375vw; width: 100vw; z-index: 10; position: absolute; left: 0; top: 0; opacity: 0;}
#kv {padding: 53.375vw 0 0;}
#kv img {width: 100%; height: auto;}

#kv .spline1 {margin-bottom: 3.125vw;}
#kv .spline3 {margin:5.15625vw 0 3.75vw;}
#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(../images/common/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(../images/common/btn_shop.png) left top no-repeat ; background-size: 100% auto; width: 39.21875vw;}
#kv ul.btn li:nth-child(n+3) a{background: url(../images/common/btn_premium.png) 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;}

.moviewrap {width: 71.09375vw; height: 47.5vw; position: relative; margin: 4.2875vw auto; padding:7.9vw 0 0;}
.moviewrap::after{content: ''; background: url(../images/top/sp/kv_pv.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(../images/common/sp/btn_play.png) center center no-repeat ; background-size: 14.0625vw 14.0625vw; transition: 0.3s;}
.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;}

#pack {background: url(../images/top/sp/bg_pack.png) center top no-repeat ; background-size: 100vw auto; height: 211.71875vw; padding: 4.6875vw 0 0; position: relative; margin-bottom: 10.9375vw; width: 100vw;}
#pack img {width: 100vw; height: auto; backface-visibility: hidden;}
#pack li + li {margin-top: 3.8vw;}
#pack p.code {margin: 3.9vw 0 0;}
#pack p.product {position: absolute; left: 0; bottom: -23vw; width: 100vw;}
#pack p.product a{display: block; height: 22.1875vw; width: 89.0625vw; margin: 0 auto; background: url(../images/top/btn_product.png) center top no-repeat / auto 100%;}
#pack section div::after{content: ''; background: url(../images/top/bg_pack02.png) left top no-repeat ; background-size: auto 100%; width: 23.59375vw; height: 44.84375vw; position: absolute; right: 0.425vw; top: -32.0vw;}
#pack section div::before{content: ''; background: url(../images/top/bg_pack03.png) left top no-repeat ; background-size: auto 100%; width: 28.4375vw; height: 41.09375vw; position: absolute; left: 0.3vw; top: 94.2vw;}

#point {padding-bottom: 12.1875vw;}
#point img {width: 100vw; height: auto; backface-visibility: hidden;/* margin-bottom: 11.71875vw;*/}

#point li:nth-child(2) {padding: 4.84375vw 0 0.25vw;}
#point .dlc a{background: url(../images/top/btn_dlc.png) left top no-repeat ; background-size: cover; width: 70.9375vw; height: 19.21875vw; position: absolute; left: 12.5vw; top: 144.95vw; z-index: 100; display: block;}

#point section::before{content: ''; background: url(../images/top/bg_spec.png) left top no-repeat ; background-size: 100% 100%; width: 37.5vw; height: 87.34375vw; position: absolute; right: -7.2vw; top: 1.35vw;}
#point section::after{content: ''; background: url(../images/top/bg_spec02.png) left top no-repeat ; background-size: 100% 100%; width: 55.46875vw; height: 144.21875vw; position: absolute; left: -5.8vw; top:79.7vw; z-index: -1;}


#spec h2 img {height: 10.46875vw; width: auto;}
#spec table{border: 2px solid #373d85; width: 93.75vw; margin: 3.59375vw 3.125vw 10.625vw; font-size:2.5vw; line-height: 4.6875vw; background: #fff; position: relative; z-index: 100;}
#spec table td { color: #373d85; text-align: left; border-bottom: 1px solid #373d85; padding: 0 2.5vw;}
#spec table th {font-size:2.5vw; line-height: 4.6875vw; font-weight: bold; color: #fff; background: #696ea4; border-bottom: 1px solid #373d85; padding: 0 3.125vw; width: 19.375vw; vertical-align: top;}
#spec table td div {vertical-align: top; padding-bottom: 2.5vw; margin: 1.25vw 0 0;}
#spec table td div + div {border-top:1px solid #b2b2b2; padding: 2.5vw 0 0 0; margin: 0 0 1.25vw;}

main .snsbtn {position: relative; z-index: 100; padding: 0 0 9.84375vw; width: 79.6875vw; margin: 0 auto;}
main .snsbtn li:nth-child(1) a::after{content: ''; background: url(../images/top/btn_twitter-taru.png) left top no-repeat; background-size: 100% 100%; width: 22.5vw; height: 22.5vw; position: absolute; left: 0; top: 0; z-index: 10; margin: -3.125vw 0 0 -1.40625vw;}
main .snsbtn li:nth-child(2) {margin-top:6.40625vw; position: relative;}
main .snsbtn li:nth-child(2) a::after{content: ''; background: url(../images/top/btn_mailmagazine-character.png) left top no-repeat; background-size: 100% 100%;; width: 52.96875vw; height: 61.71875vw; position: absolute; right: 0; top: 0; z-index: 10; margin: -9.21875vw -23.2vw 0 0;}
main .snsbtn li img {height: 15.9375vw; width: auto; backface-visibility: hidden;}


}

@media screen and (max-width:900px){

/* modal */
#dlcmodalbase .wrap{width:  100vw; margin: 30.3125vw auto 20vw; background-size: 100% auto; background-image: url(../images/common/sp/bg_modal-mid.png);}
#dlcmodalbase .wrap::after{ width: 100vw; height: 15.625vw; position: absolute; left: 0; top: -15.625vw; z-index: 0;  background-size: 100% 100%; background-image: url(../images/common/sp/bg_modal-top.png);}
#dlcmodalbase .wrap::before{width: 100vw; height: 15.625vw; position: absolute; left: 0; bottom: -15.625vw; z-index: 0; background-size: 100% 100%;background-image: url(../images/common/sp/bg_modal-bottom.png);}

#dlcmodal header {padding: 0 0 0; z-index: 0; text-align: center; margin-top:-6.943vw; margin-bottom: 5.8vw;}
/*
#dlcmodal header h2 {background: url(../images/series/h2_story.png) center top no-repeat; height: 8.281vw; font-size: 0; line-height: 1; background-size: auto 100%;}
*/

#dlcmodal header h2 img {height: 8.75vw; width: auto;}

#dlcmodal .body {width: 81.25vw; margin: 0 auto -8.031vw;}
#dlcmodal .body dl {padding: 0; color: #373d85; margin-bottom: 4.6875vw;}
#dlcmodal .body dl dt {font-size: 2.96875vw; line-height: 1.7; font-weight: bold; margin-bottom: 0.625vw;}
#dlcmodal .body dl dd {font-size: 2.34375vw; line-height: 1.7; border-bottom: 1px solid #d2ad86; padding-bottom: 4.6875vw;}
#dlcmodal .body dl dd + dt {padding-top:4.6875vw;}
#dlcmodal .body dl dd p {font-size: 2.344vw}
#dlcmodal .body p.note {font-size: 2.34375vw; /*text-indent: -1em; padding-left: 1em;*/ line-height: 1.7; color: #373d85;}
#dlcmodal .body dl dd p.note {font-size: 2.03125vw; /*text-indent: -1em; padding-left: 1em;*/}

#dlcmodal footer {position: absolute; right: 1.40625vw; top: -28.4375vw; z-index: 10; width: 9.6875vw; height: 9.6875vw;}
#dlcmodal footer a{display: block; width: 9.6875vw; height: 9.6875vw; background-size: cover;}
#dlcmodal dl dt small {font-size: 2.6vw; padding: 1.5vw 0;}
#dlcmodal dl dd:last-child{border-bottom: none; padding-bottom: 0;}
}
/*
    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;}
}