@charset "utf-8";


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

#siteheader nav ul li:nth-child(1) a:after {background-position: 0 -185px; opacity: 1;}
#siteheader nav ul li:nth-child(1) a:before{opacity: 0;}

main {padding:16px 0 0;}

main {background: url(../images/index/bg.jpg) center top no-repeat fixed;}

.firstview {min-height: 1306px; font-size: 0; line-height: 1;}
/*.firstview:after{content: ''; background: url(../images/index/mv-left.png) left top no-repeat; width: 415px; height: 433px; position: absolute; right: 50%; top: 356px; margin-right: 656px; opacity: 0; transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 20px); transition-delay: 0.2s;}*/
.firstview section {padding: 530px 0 0; height: 1306px;}
.firstview section:after{content: ''; background: url(../images/index/mv.png) center top no-repeat; width: 863px; height: 1014px; position: absolute; left: 42%; top: 99px; opacity: 0; transition: 0.8s; z-index: -1;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 0);}
/*.firstview section:before{content: ''; background: url(../images/index/mv-right.png) center top no-repeat; width: 399px; height: 417px; position: absolute; left: 50%; top: 233px; z-index: 10; margin-left: 642px; opacity: 0; transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 20px); transition-delay: 0.4s;}*/

.firstview.show:after,
.firstview.show section:after,
.firstview.show section:before{opacity: 1; transform: translate(0, 0);}


.firstview h1 {width: 613px; height: 565px; background: url(../images/index/logo.png) center center no-repeat; position:absolute; top: 68px; left: 36px; opacity: 0; transition:opacity 0.8s;}

.topbadge a {position: absolute; display: block; background: url(../images/index/badge.png); width: 356px; height: 337px; top: 720px; left: 850px;}
.topbadge a:hover {transform: scale(1.03); transition: 0.3s;}

.info a {position: absolute; display: block; background: url(../images/index/infobnr.png) center no-repeat; width: 405px; height: 40px; top: 1040px; left: 790px; background-size: 100% auto; }
.info a:hover {opacity: 0.7;}

.famitsu a {position: absolute; display: block; background: url(../images/index/famitsu.png) center no-repeat; width: 405px; height: 102px; top: 1095px; left: 790px; background-size: 100% auto; }
.famitsu a:hover {transform: scale(1.03); transition: 0.3s;}

.countdowncp a {position: absolute; display: block; background: url(../images/index/countdowncp.png) center no-repeat; width: 300px; height: 181px; top: 720px; left: 790px; background-size: 100% auto; }
.countdowncp a:hover {transform: scale(1.03); transition: 0.3s;}

.trial a {position: absolute; display: block; background: url(../images/index/ps4trial.png) center no-repeat; width: 243px; height: 278px; top: 640px; left: 1020px; background-size: 100% auto; }
.trial a:hover {transform: scale(1.03); transition: 0.3s;}

.impression a {position: absolute; display: block; background: url(../images/index/badge-impression-tweet.png) center no-repeat; width: 230px; height: 278px; top: 580px; left: 840px; background-size: 100% auto; }
.impression a:hover {transform: scale(1.03); transition: 0.3s;}

.contest a {position: absolute; display: block; background: url(../images/index/contest.png) center no-repeat; width: 420px; height: 300px; top: 590px; left: 780px; background-size: 100% auto; }
.contest a:hover {transform: scale(0.95); transition: 0.3s;}

.sale a {position: absolute; display: block; background: url(../images/index/badge-sale.png) center no-repeat; width: 425px; height: 210px; top: 800px; left: 780px; background-size: 100% auto; }
.sale a:hover {transform: scale(0.95); transition: 0.3s;}

.steam a {position: absolute; display: block; background: url(../images/index/badge-steam.png) center no-repeat; width: 321px; height: 97px; top: 910px; left: 835px; background-size: 100% auto; }
.steam a:hover {transform: scale(0.95); transition: 0.3s;}

.mingol a {position: absolute; display: block; background: url(../images/index/mingol.png) center no-repeat; width: 393px; height: 367px; top: 540px; left: 815px; background-size: 100% auto; }
.mingol a:hover {transform: scale(0.95); transition: 0.3s;}

.vote a {position: absolute; display: block; background: url(../images/index/20thvote.png) center no-repeat; width: 300px; height: 475px; top: 520px; left: 860px; background-size: 100% auto; }
.vote a:hover {transform: scale(0.95); transition: 0.3s;}

.nelke a {position: absolute; display: block; background: url(../images/index/nelke.png) center -50px no-repeat; width: 390px; height: 350px; top: 550px; left: 770px; background-size: 100% auto; }
.nelke a:hover {transform: scale(0.95); transition: 0.3s;}

.live3 a {position: absolute; display: block; background: url(../images/index/badge-live.png) center no-repeat; width: 410px; height: 210px; top: 580px; left: 790px; background-size: 100% auto; }
.live3 a:hover {transform: scale(0.95); transition: 0.3s;}

.btn-live1 a {position: absolute; display: block;background: url(../images/index/btn-live-kansei.png); width: 279px; height: 89px; top: 795px; left: 830px;}
.btn-live2 a {position: absolute; display: block;background: url(../images/index/btn-live-20th.png); width: 279px; height: 89px; top: 900px; left: 830px;}
.btn-live1 a:hover, .btn-live2  a:hover {transform: scale(1.03); transition: 0.3s;}

.whatsnew {background: url(../images/index/bg-whatsnew.png) center center no-repeat; background-size: 100% 100%; font-size: 13px; line-height: 20px;  color: #502555; width: 680px; min-height: 86px; margin: 27px 0 27px; padding: 6px 90px 18px; text-align: center; position: absolute; left: -6px; bottom: 590px; z-index: 100; opacity: 0; transition:opacity 0.8s;}
.whatsnew:after{content: ''; background: url(../images/index/bg-whatsnew-top.png) center top no-repeat; height: 80px; position: absolute; left: 0; top: -32px; width: 100%;}
.whatsnew:before{content: ''; background: url(../images/index/bg-whatsnew-bottom.png) center top no-repeat; height: 70px; position: absolute; left: 0; bottom: -27px; width: 100%;}
.whatsnew ul,
.whatsnew ul li + li {margin: 8px 0 0;}
.whatsnew ul,
.whatsnew p{position: relative; z-index: 100;}
.whatsnew p.none {display: none;}
.whatsnew p {margin: 10px 0 0;}
.whatsnew p a{display: block; background: url(../images/index/btn-moreinfo.png); width: 107px; height: 19px; margin: 0 auto ; text-indent: 200%; overflow: hidden; white-space: nowrap; transition:opacity 0.3s;}
.whatsnew p a:hover {opacity: 0.7;}
.whatsnew a {color: #502555;}
.whatsnew ul li:nth-child(n+2) {display:none; opacity:0; transition:opacity 1s;}
.whatsnew ul li.show {opacity: 1;}

.firstview .pv {position: absolute; left: 67px; top: 710px; background: url(../images/index/pv.png) left top no-repeat; width: 321px; height: 215px; z-index: 101; padding: 32px 0 0 36px; opacity: 0; transition: 0.8s; transform: translate(0, 20px); transition-delay: 0.6s;}
.firstview .pv a{display: block; height: 140px; width: 244px; transition: 0.3s; position: absolute; left: 36px; top: 32px; z-index: 10; text-align: center; background: url(../images/index/btn-play.png) center center no-repeat; overflow: hidden; text-indent: 200%; white-space: nowrap; background-size: 41px auto;}
.firstview .pv a img {vertical-align: middle;}
.firstview .pv a:hover {background-color: rgba(248,248,248,0.3);}
.firstview .pv iframe {height: 140px; width: 244px; position: absolute; left: 36px; top: 32px; z-index: 0;}
.firstview .none a{display: block; height: 140px; width: 244px; transition: 0.3s; position: absolute; left: 36px; top: 32px; z-index: 10; text-align: center; background: none; overflow: hidden; text-indent: 200%; white-space: nowrap; background-size: 41px auto;}
.firstview ul.pickup {z-index: 10;}
.firstview ul.pickup li{position: absolute; left: 356px; top: 742px; z-index: 120; background: url(../images/index/btn-dlc.png); width:456px; height: 346px; padding: 36px 99px 50px 40px; opacity: 0; transition: 0.8s; transition-delay: 0.8s; transform: translate(0, 20px);}
.firstview ul.pickup li a{display: block; height: 100%; transition: 0.3s;}
.firstview ul.pickup li a:hover {background-color: rgba(255,255,255,0.30);}
.firstview ul.pickup li:nth-child(2){left: 134px; top: 925px; background: url(../images/index/btn-guide.png); width: 394px; height: 312px; z-index: 115; padding: 30px 40px 42px 32px; transition-delay: 1s;}
.firstview ul.pickup li:nth-child(3){left: 509px; top: 1058px; background: url(../images/index/btn-official-twitter.png); width: 287px; height: 122px; z-index: 125; padding: 20px 25px 27px 21px; transition-delay: 1.2s;}
.firstview ul.pickup li:nth-child(4){left: 790px; top: 1040px; background: url(../images/index/btn-tape.png); width: 358px; height: 186px; z-index: 135; padding: 16px 32px 33px 20px; transition-delay: 1.3s;}
.firstview .pclink {position: absolute; left: 50%; top: 355px; width: 368px; height: 386px; margin: 0 0 0 -1050px; padding: 12px;}
.firstview .pclink a{display: block; width: 100%; height: 362px; transition: 0.3s;}
.firstview .pclink a:hover {background: rgba(255,255,255,0.3);}
.firstview .pclink.world {margin: 0 0 0 662px; top: 248px; z-index: 100; width: 352px; height: 370px;}
.firstview .pclink.world a {height: 346px;}

.firstview.show .whatsnew,
.firstview.show h1,
.firstview.show .pv,
.firstview.show ul.pickup li{opacity: 1; transform: translate(0, 0);}

.atelier20th {position: absolute; left: 36px; top: 124px; z-index: 10; opacity: 0; transition:opacity 0.8s;}
.atelier20th a img{transition: 0.2s ease-out;/* transform: scale(0,0); transform-origin: center center;*/}
.firstview.show2 .atelier20th {opacity: 1;}
.firstview.show2 .atelier20th a img{transform: scale(1,1);}
.firstview.show2 .atelier20th a:hover img {transform: scale(1.1);}



.bnrs {text-align: center; font-size: 0; line-height: 1; margin: 0 -10px 40px;}
.bnrs + .bnrs {margin-top: 10px;}
.bnrs li {display: inline-block; vertical-align: top;padding: 0 5px;}
.bnrs li:nth-child(n+5) {margin-top: 10px;}
.bnrs li img {width: 293px; height: auto;}

.bnrs.ssize li:nth-child(n+5){margin-top: 0;}
.bnrs.ssize li:nth-child(n+6) {margin-top: 10px;}
.bnrs.ssize li img {width: 232px;}
.bnrs li a{transition: 0.3s;}
.bnrs li a:hover {opacity: 0.7;}

.twitter {background: url(../images/index/bg-twitter.png); width: 760px; height: 578px; margin: 62px auto 36px; font-size: 0; line-height: 1; padding: 94px 0 0; position: relative;}
.twitter p.follow {position: absolute;  top: 47px; left: 513px; width: 193px; height: 36px; overflow: hidden;}
.twitter p.follow {display: block; background: url(../images/index/btn-twitter-follow.png); width: 193px; height: 36px; transition: 0.3s; background-size: 100% auto;}
.twitter p.follow:hover {opacity: 0.7;}
.twitter p.follow a {display: block; height: 36px; width: 100%;}
.twitter p.follow iframe {opacity:0; -moz-transform: scale(15,15); -webkit-transform: scale(15,15); -o-transform: scale(15,15); -ms-transform: scale(15,15); transform: scale(15,15);}

/* bgm */
#bgm {background: url(../images/index/bg-music.png); width: 303px; height: 104px; background-size: 100% auto; position: fixed; right: 0; top: 130px; z-index: 100;}
#bgm .ui {padding:0 8px 0 15px; height:30px;}
#bgm .ui:after{content:''; clear:both; display:block;}
#bgm .ui .status{position: absolute; left: 210px; top: 41px;}
#bgm .ui .status a + a{display:none;}
#bgm .ui .status a img {width: 29px; height: auto;}
#bgm .ui .status.play a {display:none;}
#bgm .ui .status.play a + a {display:block;}
#bgm .ui .prev {position: absolute; left: 250px; top: 33px;}
#bgm .ui .prev img,
#bgm .ui .next img{width: 16px; height: auto;}
#bgm .ui .next {position: absolute; left: 250px; top: 50px;}
#bgm .ui .bgmIndex {float:left;}
#bgm .ui .bgmIndex br{display:none;}
#bgm .ui .bgmIndex a{display:none;}
#bgm .ui a{transition: 0.3s;}
#bgm .ui a:hover {opacity: 0.7;}
#bgm .bgmtitle {font-size:11px; line-height:1; color:#502555; text-align:left; padding:0; height:44px; overflow:hidden; width:154px; float:left; margin-left:8px; position: absolute; left: 40px; top: 34px; letter-spacing: 0.15em;}
#bgm .bgmtitle span {display:inline-block; white-space:nowrap; overflow:hidden; /*text-overflow:ellipsis;*/ position:relative; left:0; line-height:44px; width:154px;}
#bgm .bgmtitle span b {font-weight:normal; position:relative; left:0;}
#bgm .bgmtitle span em {color:#F00; font-weight:bold; padding-left:0.5em;}

#spbgm {display:none;}

.products {padding: 0 0 70px;}
.products .inner {margin: 20px 0 0;border: 1px solid #c5c5c5; background: rgba(255,255,255,0.9); text-align: left; position: relative; padding: 38px 0 47px 48px; min-height: 290px;}
.products .inner:after{content: ''; background: url(../images/index/ornament-left.png); width: 176px; height: 120px; position: absolute; left: -18px; top: -26px;}
.products .inner:before{content: ''; background: url(../images/index/ornament-right.png); width: 206px; height: 140px; position: absolute; right: -23px; bottom: -40px;}
.products .inner h2 {margin: 0 0 5px;}
.products .inner h2 img {height: 33px; width: auto;}
.products .inner h2.line2 img {height: 62px; width: auto;}
.products .inner dl dt {display: inline-block; color: #cb5a72; float: left; width: 10em;}
.products .inner dl dd {zoom:1; overflow: hidden;}
.products .inner .img {position: absolute; right: 36px; top: 36px;}
.products .inner dl + p {margin: 20px 0 0; clear: both;}
.products .inner p.buyguide {margin: 30px 0 0; clear: both;}
.products .inner ul.note {margin-top: 20px;}
.products .inner ul.note li {font-size: 14px;  line-height: 24px; }
.products .inner.premiumbox {min-height: 578px;}
.products .inner.premiumbox p{padding: 10px 0 20px;}
.products .inner.premiumbox ul.txt{ text-align:left; margin-left:1em; width:480px; padding-top:20px;}
.products .inner.premiumbox ul.txt li{text-indent:-1.0em; font-size: 14px; padding-bottom:10px;}
.products .inner.premiumbox ul.txt li strong{font-size: 16px;  color: #cb5a72;}
.products .inner.premiumbox  .img {right: 10px; top: 170px;}
.products .inner.gallery20th {min-height: 660px;}
.products .inner.gallery20th p{padding: 10px 20px 20px 0;}
.products .inner.gallery20th ul.txt{ text-align:left; margin-left:1em; width:480px; padding-top:20px;}
.products .inner.gallery20th ul.txt li{text-indent:-1.0em; font-size: 14px; padding-bottom:10px;}
.products .inner.gallery20th ul.txt li strong{font-size: 16px;  color: #cb5a72;}
.products .inner.gallery20th  .img {right: 32px; top: 230px;}
.products .buyguide img {width: 360px; height: auto;}
.products .buyguide a{transition: 0.3s;}
.products .buyguide a:hover {opacity: 0.7;}

.about {margin:0 0 60px;}
.about a {margin: 0 0 20px 0;}
.about a.character {display: block; background: url(../images/index/top-about-chara.png); width: 1200px; height: 250px;}
.about a.battle {display: block; background: url(../images/index/top-about-battle.png); width: 1200px; height: 250px;}
.about a:hover {opacity: 0.7;}

section.spec {background: #fff; border-top: 1px solid #c5c5c5; padding: 0 0 70px; font-size: 0; line-height: 1;}
section.spec h2 {font-size: 40px; position: relative;text-align: center;
color: #991658; font-size: 43px; line-height: 1.3;font-weight: bold; font-style: italic; text-align: center; position: relative; margin-bottom: 67px; letter-spacing: 0.05em;font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif;
font-weight: bold; padding: 39px 0 0; margin-bottom: 39px;}
section.spec h2 em {background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-style: italic; font-weight: bold;}
section.spec h2:after{content: ''; width: 732px; height: 125px; background: url(../images/index/ornament-spec.png) center center no-repeat; position: absolute; left: 50%; top: -17px; margin-left: -366px;}
section.spec img {width:200px; height: auto; float: left;}
section.spec dl.spec {float: left; font-size: 14px; line-height: 20px; padding: 0 0 0 40px; margin-top: -10px;}
section.spec dl.spec dt {color: #a15982; width: 173px; text-align: center; float: left; margin: 10px 0 0;
background: #d0cedf; /* Old browsers */
background: -moz-linear-gradient(left, #d0cedf 0%, #f3f3f0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #d0cedf 0%,#f3f3f0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #d0cedf 0%,#f3f3f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0cedf', endColorstr='#f3f3f0',GradientType=1 ); /* IE6-9 */}
section.spec dl.spec dd {zoom:1; overflow: hidden; padding: 0 0 0 20px; margin: 10px 0 0;}
section.spec div.price {float: right; width: 340px; font-size: 14px; line-height: 20px;}
section.spec div.price h3 {color: #a15982; width: 173px; text-align: center;
background: #d0cedf; /* Old browsers */
background: -moz-linear-gradient(left, #d0cedf 0%, #f3f3f0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #d0cedf 0%,#f3f3f0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #d0cedf 0%,#f3f3f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0cedf', endColorstr='#f3f3f0',GradientType=1 ); /* IE6-9 */}
section.spec div.price dl dt {padding: 0 10px; width: 250px; background: #f2f2f0; margin: 24px 0 0;}
section.spec div.price dl dd {font-size: 13px; line-height: 26px; padding: 10px 0 0 10px;}

/* bugfix */
.ie section.spec h2,
.android section.spec h2{font-family: 'Noto Serif Japanese', serif;}

}
@media screen and (min-width:1401px){
#bgm {right: inherit; left: 50%; margin-left: 400px;}
.firstview h1 {position:absolute; top: 68px; left: 50%; margin-left: -653px;}
.topbadge a{left: 50%; margin-left: 130px;}
.btn-live1 a,.btn-live2 a{left: 50%; margin-left: 90px;}
.whatsnew {left: 50%; margin-left: -696px;}
.firstview .pv {left:48%; margin-left: -625px;}
.firstview ul.pickup li{left: 48%; margin-left: -336px;}
.firstview ul.pickup li:nth-child(2){left: 48%; margin-left: -559px;}
.firstview ul.pickup li:nth-child(3){left: 48%; margin-left: -185px;}
.firstview ul.pickup li:nth-child(4){left: 48%; margin-left: 90px;}
.atelier20th {left: 50%; margin-left: -653px;}
.famitsu a {left: 50%; margin-left: 80px}
.info a {left: 50%; margin-left: 80px}
.countdowncp a {left: 50%; margin-left: 130px}
.trial a {left: 50%; margin-left: 390px}
.impression a {left: 50%; margin-left: 200px}
.contest a {left: 50%; margin-left: 70px}
.sale a {left: 50%; margin-left: 70px}
.steam a {left: 50%; margin-left: 125px}
.live3 a {left: 50%; margin-left: 75px}
.mingol a {left: 50%; margin-left: 100px}
.vote a {left: 50%; margin-left: 150px}
.nelke a {left: 45%; margin-left: 150px}

}
@media screen and (min-width:1920px){
main {background-size: 100% auto;}
}




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

#spnav ul li:nth-child(1) a:before {opacity: 1;}
#spnav ul li:nth-child(1) a:after {opacity: 0;}

main {padding:0;}
main:before {content: ''; width: 100%; height: 100%; background: url(../images/index/sp/bg.jpg) center top no-repeat; background-size: 100% auto; position: fixed; left: 0; top: 0; z-index: -1;}

#bgm{display: none;}

.firstview {min-height: 48.2rem; font-size: 0; line-height: 1; background: url(../images/index/sp/mv.jpg) center top no-repeat; background-size: 100% auto;}
.firstview .spwrap{position: relative; height: 100%; height: 58.35rem; padding: 59.35rem 0 0; display: block;}
.firstview h1 {width: 100%; height: 48.2rem; background: url(../images/index/sp/logo.png) center top no-repeat; background-size: 100% auto; position: absolute; left: 0; top: 0; }

.atelier20th {position: absolute; left: 0.7rem; top: 2.85rem; z-index: 10;}
.atelier20th img{width: 4.85rem; height: auto;}

.topbadge a{position: absolute; top: 28%; left: 2%; background: url(../images/index/badge.png) 0 0 no-repeat; background-size: contain; width: 12rem; height: 12rem;}

.info a { display: block; background: url(../images/index/infobnr.png) center no-repeat; height: 3rem; background-size: 85% auto; position: relative; margin:0 0}

.famitsu a { display: block; background: url(../images/index/famitsu.png) center no-repeat; height: 7rem; background-size: 85% auto; position: relative; margin:9rem 0 0}

.countdowncp a { display: block; background: url(../images/index/countdowncp.png) left no-repeat; height: 9rem; width: 15rem; background-size: contain; position: relative; margin: -47rem 8rem 0}

.trial a { display: block; background: url(../images/index/sp/ps4trial.png) right no-repeat; height: 8.7rem; width: 9rem; background-size: contain; position: relative; margin: -44rem 22rem 0}

.impression a { display: block; background: url(../images/index/badge-impression-tweet.png) right no-repeat; height: 10rem; width: 10rem; background-size: contain; position: absolute; margin: -41rem 21rem 0}

.contest a { display: block; background: url(../images/index/sp/contestSP.png) right no-repeat; height: 10rem; width: 28rem; background-size: contain; position: absolute; margin: -41rem 2.5rem 0}

.mingol a { display: block; background: url(../images/index/mingol.png) right no-repeat; height: 13rem; width: 28rem; background-size: contain; position: absolute; margin: -43rem -4.5rem 0}

.vote a { display: block; background: url(../images/index/20thvote.png) right no-repeat; height: 17rem; width: 26rem; background-size: contain; position: absolute; margin: -44rem -4rem 0}

.nelke a { display: block; background: url(../images/index/nelke.png) right no-repeat; height: 25rem; width: 25rem; background-size: contain; position: absolute; margin: -47rem -1rem 0}

.live3 a { display: block; background: url(../images/index/badge-live.png) right no-repeat; height: 10rem; width: 22rem; background-size: contain; position: absolute; margin: -41rem 4.5rem 0}

.sale a { display: block; background: url(../images/index/badge-sale.png) right no-repeat; height: 15rem; width: 28.3rem; background-size: contain; position: absolute; margin: 3rem 2rem 0}

.steam a { display: block; background: url(../images/index/badge-steam.png) right no-repeat; height: 7rem; width: 20rem; background-size: contain; position: absolute; margin: 4rem 6rem 0}

.btn-live1 a {position: absolute; display: block;background: url(../images/index/btn-live-kansei.png) 0 0 no-repeat; background-size: contain; width: 15rem; height: 5rem; top: 38%; left: 2%;}
.btn-live2 a {position: absolute; display: block;background: url(../images/index/btn-live-20th.png) 0 0 no-repeat; background-size: contain; width: 15rem; height: 5rem; top: 38%; left: 52%;}

.whatsnew {background: url(../images/index/sp/bg-whatsnew.png) center center no-repeat; background-size: 100% 100%; font-size: 1rem; line-height: 1.5rem;  color: #502555; min-height: 7.8rem; margin: 0 0 3.6rem; padding: 1.0rem 1rem 1rem; text-align: center; z-index: 100; position:absolute; left: 0; bottom: -12px; width: 100%;}
.whatsnew:after{content: ''; background: url(../images/index/sp/bg-whatsnew-top.png) center top no-repeat; height: 3.35rem; position: absolute; left: 0; top: -2rem; width: 100%; background-size: 100% auto;}
.whatsnew:before{content: ''; background: url(../images/index/sp/bg-whatsnew-bottom.png) center top no-repeat; height: 3.6rem; position: absolute; left: 0; bottom: -1.8rem; width: 100%; background-size: 100% auto;}
.whatsnew ul,
.whatsnew ul li + li {margin: 0.5rem 0 0;}
.whatsnew p{position: relative; z-index: 100;}
.whatsnew p {margin: 0.5rem 0 0;}
.whatsnew p a{display: block; background: url(../images/index/sp/btn-moreinfo.png); width: 7.1rem; height: 1.3rem; margin: 0 auto ; text-indent: 200%; overflow: hidden; white-space: nowrap; background-size: 100% auto;}
.whatsnew a {color: #502555;}
.whatsnew ul li:nth-child(n+2) {display:none; opacity:0; transition:opacity 1s;}
.whatsnew ul li.show {opacity: 1;}
.whatsnew p.none {display: none;}

/* bgm */
#spbgm {background: url(../images/index/bg-music.png); width: 25.6rem; height: 8.8rem; background-size: 100% auto; margin: 0 auto; position: relative;}
#spbgm .ui .status{position: absolute; left: 17.7rem; top: 3.5rem;}
#spbgm .ui .status a + a{display:none;}
#spbgm .ui .status a img {width: 2.5rem; height: auto;}
#spbgm .ui .status.play a {display:none;}
#spbgm .ui .status.play a + a {display:block;}
#spbgm .ui .prev {position: absolute; left: 21rem; top: 3.5rem;}
#spbgm .ui .prev img,
#spbgm .ui .next img{width: 1.4rem; height: auto;}
#spbgm .ui .next {position: absolute; left: 21rem; top: 5rem;}
#spbgm .ui .bgmIndex {float:left;}
#spbgm .ui .bgmIndex br{display:none;}
#spbgm .ui .bgmIndex a{display:none;}
#spbgm .bgmtitle {font-size:0.95rem; line-height:1; color:#502555; text-align:left; padding:0; overflow:hidden; width:13.2rem; float:left; margin-left:0; position: absolute; left: 3.8rem; top: 2.8rem; letter-spacing: 0.15em; height: 3.7rem;}
#spbgm .bgmtitle span {display:inline-block; white-space:nowrap; overflow:hidden; /*text-overflow:ellipsis;*/ position:relative; left:0; line-height:3.7rem; width:13.2rem;}
#spbgm .bgmtitle span b {font-weight:normal; position:relative; left:0;}
#spbgm .bgmtitle span em {color:#F00; font-weight:bold; padding-left:0.5em;}

.firstview .pv{margin: 20rem 0 0; background: url(../images/index/sp/pv.png) center top no-repeat; height: 19.7rem; background-size: 100% auto; position: relative;}
.firstview .pv a{display: block;background: url(../images/index/btn-play.png) center 7.45rem no-repeat; height: 19.7rem; background-size: 4.05rem auto; text-indent: 200%; overflow: hidden; white-space: nowrap; z-index: 10; position: relative;}
.firstview .none a{display: block;background: none; height: 19.7rem; background-size: 4.05rem auto; text-indent: 200%; overflow: hidden; white-space: nowrap; z-index: 10; position: relative;}
.firstview .pv iframe {width: 23.4rem; height: 13.2rem; position: absolute; left: 4.3rem; top: 3.2rem; z-index: 0; margin: 0 !important;}
.pickup {height: 41rem; background: url(../images/index/sp/pickup3.png) center top no-repeat; background-size: 100% auto; position: relative;}
.pickup li a {display: block; width: 22rem; height: 19.7rem; position: absolute; left: 0; top: 0;}
.pickup li:nth-child(1) a {left: inherit; right: 0; top: 1.3rem; z-index: 10;}
.pickup li:nth-child(2) a {left: 0; top: 13.3rem; z-index: 5; height: 19rem; width: 20rem;}
.pickup li:nth-child(3) a {left: 8.5rem; top: 30.5rem; z-index: 3; height: 9rem; width: 21.4rem;}
.pickup li:nth-child(4) a {left: 4rem; top: 38.5rem; z-index: 3; height: 9.8rem; width: 21rem;}

.twitter {background: url(../images/index/sp/bg-twitter.png) center top no-repeat; width: 100%; height: 50.35rem; font-size: 0; line-height: 1; padding: 11.0rem 1.5rem 0; position: relative; background-size: 100% auto; margin: 4.3rem 0 4rem;}
.twitter p.follow {position: absolute;  top: 6.9rem; left: 9.7rem;  width: 13.5rem; height: 2.5rem; overflow: hidden;}
.twitter p.follow {display: block; background: url(../images/index/btn-twitter-follow.png); width: 13.5rem; height: 2.5rem; background-size: 100% auto;}
.twitter p.follow iframe {opacity:0; -moz-transform: scale(15,15); -webkit-transform: scale(15,15); -o-transform: scale(15,15); -ms-transform: scale(15,15); transform: scale(15,15);}
.twitter-timeline {width: 29rem !important; height: 36rem !important;}
.twitter p.follow a {display: block; height: 2.5rem; width: 100%;}

.bnrs {text-align: center; font-size: 0; line-height: 1; margin: 3.8rem 0 3.8rem;}
.bnrs li + li,
.bnrs + .bnrs {margin-top: 0.5rem;}
.bnrs li img {width: 21.9rem; height: auto;}

.products {padding: 0;}
.products .inner {margin: 0; border-top: 1px solid #c5c5c5; background: rgba(255,255,255,0.8); position: relative; padding: 2.74rem 1.5rem 3.25rem; text-align: center;}
.products .inner:after{content: ''; background: url(../images/index/sp/ornament-left.png); width: 100%; height: 4.75rem; position: absolute; left: 0; top: -1.75rem; background-size: 100% auto;}
.products .inner h2 {margin: 0 0 1rem; text-align: left;}
.products .inner h2 img {height: 2.2rem; width: auto; display: inline-block; margin: 0 auto 0;}
.products .inner h2.line2 img {height: 4.2rem; width: auto; display: inline-block; margin: 0 auto 0;}
.products .inner dl {font-size: 1.12rem; line-height: 1.82rem; margin-bottom: 0rem; text-align: left;}
.products .inner dl dt {display: inline-block; color: #cb5a72; float: left; width: 10em;}
.products .inner dl dd {}
.products .inner dl + p {margin:0; clear: both; font-size: 1.12rem; line-height: 1.82rem; position: relative;  padding: 1.2rem 0 0; text-align: left;}
.products .inner p.buyguide {margin: 2.1rem 0 0; clear: both;}
.products .inner.premiumbox p{padding: 1rem 0 1rem;font-size: 1.12rem; text-align:left; line-height:2rem;}
.products .inner.premiumbox ul.txt{ text-align:left; margin-left:1em; padding-top:1.5rem;}
.products .inner.premiumbox ul.txt li{text-indent:-1.0em; font-size: 1rem; line-height:1.7rem; padding-bottom:1rem;}
.products .inner.premiumbox ul.txt li strong{font-size: 1.12rem;  color: #cb5a72;}
.products .inner.gallery20th p{padding: 1rem 0 1rem;font-size: 1.12rem; text-align:left; line-height:2rem;}
.products .inner.gallery20th ul.txt{ text-align:left; margin-left:1em; padding-top:1.5rem;}
.products .inner.gallery20th ul.txt li{text-indent:-1.0em; font-size: 1rem; line-height:1.7rem; padding-bottom:1rem;}
.products .inner.gallery20th ul.txt li strong{font-size: 1.12rem;  color: #cb5a72;}
.products .inner .img{display: inline-block; margin: 1.6rem -1.5rem 0; width: 32rem; height: auto;}
.products p.buyguide{ text-align:center!important;}
.products .buyguide img {width: 25.4rem; height: auto; margin: 0 auto;}
.products .inner ul.note {margin-top: 0.8rem;}
.products .inner ul.note li {font-size: 1rem;  line-height: 1.5; text-align: left; text-indent: -1em; padding-left: 1em;}

.about {margin:20px 0 40px;}
.about a {margin: 0 0 20px 0;}
.about a.character {display: block; background: url(../images/index/sp/top-about-chara.png) center top no-repeat; background-size: 95% auto; height: 13rem;}
.about a.battle {display: block; background: url(../images/index/sp/top-about-battle.png) center top no-repeat; background-size: 95% auto; height: 13rem;}

section.spec {background: #fff; border-top: 1px solid #c5c5c5; padding: 1.5rem 0 ; font-size: 0; line-height: 1; text-align: center;}
section.spec h2 {height: 6.8rem; background: url(../images/index/sp/h2-spec.png) center top no-repeat; background-size: 100% auto; margin-bottom: 1.2rem;}
section.spec h2 + img {width: 13rem; margin-bottom: 2rem;}
section.spec dl.spec {font-size: 0.9rem; line-height: 1.3rem; padding: 0 1.5rem 0;}
section.spec dl.spec dt {color: #a15982; width: 11.25rem; text-align: center; clear: both; float: left; position: relative; top: 0.25rem;
background: #d0cedf; /* Old browsers */
background: -moz-linear-gradient(left, #d0cedf 0%, #f3f3f0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #d0cedf 0%,#f3f3f0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #d0cedf 0%,#f3f3f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0cedf', endColorstr='#f3f3f0',GradientType=1 ); /* IE6-9 */}
section.spec dl.spec dd {zoom:1; overflow: hidden; padding: 0 0 0 1.3rem; margin: 0; text-align: left; font-size: 0.85rem; line-height: 1.95rem;}

section.spec div.price {padding: 0.2rem 1.5rem 0;}
section.spec div.price h3 {color: #a15982; width: 11.25rem; text-align: center; font-size: 0.9rem; line-height: 1.3rem; margin-bottom: 1.5rem;
background: #d0cedf; /* Old browsers */
background: -moz-linear-gradient(left, #d0cedf 0%, #f3f3f0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #d0cedf 0%,#f3f3f0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #d0cedf 0%,#f3f3f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0cedf', endColorstr='#f3f3f0',GradientType=1 ); /* IE6-9 */}
section.spec div.price dl {font-size: 0.85rem;  line-height: 1.7rem;}
section.spec div.price dl dt {padding: 0 0.8rem; width: 16.25rem; background: #f2f2f0; margin: 0 0 0; text-align: left;}
section.spec div.price dl dd {text-align: left; padding: 0.4rem 0 1.75rem 0.8rem;}



}