@charset "utf-8";

html.shopmodalopen,
body.shopmodalopen {overflow:hidden;}
html.shopmodalopen.shopmodalclose,
body.shopmodalopen.shopmodalclose{overflow:visible;}

#shopmodalbase {z-index: -1000000; background: rgba(255,255,255,0); width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; overflow: hidden; transition: 1s 0s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0; overflow-y: scroll;}
.windowloaded #shopmodalbase{opacity: 1;}
#shopmodalbase .wrap {min-width: 600px; margin: 0 auto ; transition: 1s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0,-101%);/* height: 1011px;*/ padding: 70px 0 20px; display: flex; align-items: center;}
#shopmodalbase .wrap article {position: relative; z-index: 10; background: rgba(255,255,255,0.78); border: 1px solid #897f62; padding: 0 60px;}
#shopmodalbase .wrap article {text-align: center;}
#shopmodal header {position: relative; padding: 0 0 0; z-index: 0; text-align: center; margin-top: 0;}
#shopmodal header h3 {font-size: 39px; line-height: 69px; font-weight: normal; background: url(../images/common/bg_modaltitle.png) center bottom no-repeat #897f62; color: #fff; margin: 0 -61px 50px; background-size: 100% auto;}
#shopmodalbase .wrap article p {font-size: 24px; line-height: 34px; color: #977aaf; padding: 30px 0 48px;}
#shopmodal footer {position: absolute; right: 1px; top: -52px; z-index: 10; width: 39px; height: 39px; overflow: hidden; font-size: 0;}
#shopmodal footer a{display: block; width: 39px; height: 39px; transition: 0.4s ease-out;background: url(../images/common/btn_close.png) left top no-repeat;}
#shopmodal footer a:hover {opacity: 0.7; transition: 1s;}
.shopmodalopen #shopmodalbase{z-index: 1000000; background: rgba(255,255,255,0.9);}
.shopmodalclose #shopmodalbase {z-index: 1000000; background: rgba(255,255,255,0);}
#shopmodalbase .wrap article {display: none;}
#shopmodalbase .wrap article.show{display: block;}
.shopmodalopen #shopmodalbase .wrap{transform: translate(0,0);}
.shopmodalclose #shopmodalbase .wrap{transform: translate(0,-101%); transition: 0.6s 0s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0;}



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

/*BGM*/
#kv .contents #bgm{display:none!important;}
#bgm{position:fixed; left:50%; top:55px; margin-left:436px; background: url(../images/top/bg-music.png); width:260px; height:55px; background-size:100% auto; z-index:1000;}
#bgm .ui {padding:0 8px 0 15px; height:30px;}
#bgm .ui:after{content:''; clear:both; display:block;}
#bgm .ui .status{position:absolute; top:13px; left:183px;}
#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; top:1px; left:221px;}
#bgm .ui .prev img,
#bgm .ui .next img{width:16px; height:auto;}
#bgm .ui .next{position:absolute; top:18px; left:221px;}
#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:12px; line-height:1; color:#502555; text-align:left; padding:0; height:47px; overflow:hidden; width:154px; float:left; margin-left:8px; position: absolute; left:15px; top:4px; letter-spacing: 0.15em;}
#bgm .bgmtitle span{display:inline-block; white-space:nowrap; overflow:hidden; position:relative; left:0; line-height:47px; 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;}


#wrapper {padding-top: 0; overflow: hidden;}
#wrapper .wrap {max-width: 1400px; width: 100%; min-width: 1200px;}

/*kv*/
#kv{width:100%; height:1344px;}
#kv .contents{position:absolute; top:112px; right:50%; width:582px; height:616px; margin-right:53px; transition:transform 0.3s;}
#kv .contents h1{background: url(../images/top/logo.png) left top no-repeat; width: 475px; height:257px;}
#kv .contents .release{width:527px; height:65px; margin:52px 0 0 -20px; background:url(../images/top/kv_release.png) left top no-repeat;}
#kv .contents .btn{background:url(../images/top/btn_kv-yoyaku.png) left top no-repeat; width: 475px; height: 139px; margin-top: 23px; text-align: center;}
#kv .contents .btn a{background: rgba(255,255,255,0.2); display: inline-block; height: 100px; width: 420px; position: relative; left: 4px; top: 15px; transition: 0.5s; opacity: 0;}
#kv .contents .btn a:hover {opacity: 1; transition: 1s;}
#kv .contents .btn2{background:url(../images/top/btn_kv-update.png) left top no-repeat; width: 475px; height: 96px; margin-top: -13px; text-align: center;}
#kv .contents .btn2 a{background: rgba(255,255,255,0.2); display: inline-block; height: 100px; width: 420px; position: relative; left: 4px; top: 15px; transition: 0.5s; opacity: 0;}
#kv .contents .btn2 a:hover {opacity: 1; transition: 1s;}
#kv .contents .btn3{background:url(../images/top/btn_kv-manual.png) left top no-repeat; width: 475px; height: 96px; margin-top: -13px; text-align: center;}
#kv .contents .btn3 a{background: rgba(255,255,255,0.2); display: inline-block; height: 100px; width: 420px; position: relative; left: 4px; top: 15px; transition: 0.5s; opacity: 0;}
#kv .contents .btn3 a:hover {opacity: 1; transition: 1s;}

#kv .contents .book {position: absolute; right: -1px; top: 539px; z-index: 100;}
#kv .contents .book span{display: block; -webkit-animation:fuwafuwa 2.4s infinite ease alternate; animation:fuwafuwa 2.4s infinite ease alternate;}
#kv .contents .book a{display: block; /*filter: drop-shadow(0 0 13px rgba(255,230,16));*/ position: relative; transition: 0.5s;
animation: flash 1.5s infinite linear;-webkit-animation: flash 1.5s infinite linear; -moz-animation: flash 1.5s infinite linear; backface-visibility: hidden;}
/*#kv .contents .book a:hover {filter: drop-shadow(0 0 13px rgba(255,230,16)) drop-shadow(0 0 13px rgba(255,230,16)); transition: 0.3s;}*/
#kv .contents .book a img {	animation: flash 1.5s infinite linear;-webkit-animation: flash 1.5s infinite linear; -moz-animation: flash 1.5s infinite linear; backface-visibility: hidden;}
#kv .contents .book a::after{content: ''; background: url(../images/btn_book-ie.png) left top no-repeat; width: 215px; height: 230px; position: absolute; left: 50%; top: 50%; margin: -115px 0 0 -107px; z-index: 0;}
#kv .contents .book a::before{content: ''; background: url(../images/btn_book-ie.png) left top no-repeat; width: 215px; height: 230px; position: absolute; left: 50%; top: 50%; margin: -115px 0 0 -107px; z-index: 0; opacity: 0; transition:opacity 0.3s;}
#kv .contents .book a:hover::before{content: ''; background: url(../images/btn_book-ie.png) left -230px no-repeat; width: 215px; height: 230px; position: absolute; left: 50%; top: 50%; margin: -115px 0 0 -107px; z-index: 0; opacity: 1;}
#kv .contents .book a img {opacity: 0;}

#kv .contents .copy {background:url(../images/top/kv_copy.png) center top no-repeat; height:85px; width:582px; margin:20px 0 0 -58px;}
#kv .contents .copy02 {display: none;}
#kv .contents .update{position:relative; width:690px; min-height:88px; margin:10px 0 0 -100px; background:#fdfcf9 url(../images/top/update-bg.png) no-repeat 139px center;}
#kv .contents .update h2{position:absolute; top:20px; left:28px; font-size:23px; color:#6a5e3c;}
#kv .contents .update dl{display:flex; padding:20px 23px 15px;}
#kv .contents .update dt{padding-top:35px; font-size:16px; line-height:1; color:#d34e9b;}
#kv .contents .update dd{margin-left:50px; font-size:15px; line-height:27px; color:#6a5e3c; text-align:left; overflow: hidden; width:100%; height:55px;}
#kv .contents .update dd a{color:#6a5e3c;}
#kv .contents .update dd a:hover{text-decoration:none;}
#kv .kv01{position:absolute; top:0; left:50%; width:827px; height:1169px; margin-left:-46px; transition:transform 0.3s, margin-left 0.3s; z-index:1;}
#kv .kv01::after{content:''; position:absolute; top:50%; left:50%; width:897px; height:1214px; margin:-612px 0 0 -448px; background:url(../images/top/kv01_shadow.png) no-repeat left top; z-index:-1;}
#kv .contents a.moviemodal{position:absolute; top:856px; left:50%; width:706px; height:397px; margin-left:-392px; z-index:1;}
#kv .contents a.moviemodal::after{content:''; position:absolute; top:50%; left:50%; width:776px; height:467px; margin:-221px 0 0 -388px; background:url(../images/top/kv02_shadow.png) left top no-repeat; z-index:-1;}

/*story*/
#story {margin-top:96px; margin-bottom:108px;}
#story .animpoint{position:absolute; left:50%; top:0; border:5px solid red; z-index:-1000; display:block; font-size:1px; opacity:0;}
#story .animpoint#anim02{top:400px;}
#story .animpoint#anim03{top:800px;}
#story .text{position:relative; float:left; width:810px; margin-left:32px; padding:139px 55px 45px 35px; background:rgba(255,255,255,0.6);}
#story .text::after{content:''; clear:both; display:block;}
#story .text h2{position:absolute; top:-19px; left:-3px; width:265px; height:139px; background:url(../images/top/h2_story.png) left top no-repeat;}
#story .text a.details{top:29px; left:350px;}
#story .text p{font-size:19px; line-height:34px; text-align:left; -moz-font-feature-settings:"palt"; -webkit-font-feature-settings:"palt"; font-feature-settings:"palt"; letter-spacing:-0.03em;}
#story figure{position:absolute; top:-67px; left:50%; margin-left:35px;}

/*character*/
#character .wrap{position:relative; max-width:100%; height:855px; z-index:10;}
#character .wrap::after{content:''; position:absolute; left:0; top:-113px; width:100%; height:100%;  background:url(../images/top/story_chara.png) no-repeat center top; z-index:-1;}
#character .text{position:absolute; left:50%; width:810px; margin-left:-155px; padding:97px 55px 66px 45px; background:rgba(255,255,255,0.6);}
#character .text::after{content:''; clear:both; display:block;}
#character .text h2{position:absolute; top:-5px; right:-3px; width:403px; height:66px; background:url(../images/top/h2_character.png) left top no-repeat;}
#character .text a.details{bottom:-44px; right:-40px;}
#character .text .copy{width:714px; height:141px; background:url(../images/top/character-text.png) no-repeat left top;}
#character .wrap ul{position:absolute; top:363px; left:50%; margin-left:-133px;}
#character .wrap ul li a{display: block; height: 216px; width: 384px; position: relative;}
#character .wrap ul li a::before{content: ''; background: rgba(255,255,255,0.2); width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; transition: 0.5s;}
#character .wrap ul li a::after{content:''; position:absolute; top:0; right:0; width:36px; height:36px; background:url(../images/common/icon_zoom.png) left top no-repeat;}
#character .wrap ul li a:hover::before{opacity:1; transition:1s;}
#character .wrap ul li{position:relative; z-index:10;}
#character .wrap ul li + li{position:absolute; top:78px; left:365px; z-index:5;}

/*system*/
#system {margin-top:-50px;}
#system .text{width:512px; background:rgba(255,255,255,0.6); position:relative; float:left; margin-left:30px; padding:143px 60px 33px;}
#system .text::after{content:''; clear:both; display:block;}
#system .text h2{position:absolute; top:13px; left:-28px; width:459px; height:139px; background:url(../images/top/h2_system.png) no-repeat left top;}
#system .text .copy{text-align:left;}
#system .text p{font-size:17px; line-height:33px; text-align:left; -moz-font-feature-settings:"palt"; -webkit-font-feature-settings:"palt"; font-feature-settings:"palt"; letter-spacing:0;}
#system .text p + p{margin-top:33px;}
#system .text p:nth-of-type(2){margin-bottom:22px;}
#system .text a.details{position:static; margin-left:-15px;}
#system ul{display:flex; flex-direction:column; flex-wrap:wrap; height:831px; font-size:0; line-height:1; justify-content:center; align-content:flex-start; align-items:center; padding:90px 0 0 0; position:relative; top:-130px; left:-24px;}
#system ul li{padding-top:8px; padding-right:10px;}
#system ul li a{display:inline-block; position:relative; transition:0.5s;}
#system ul li a::after{content:''; background: url(../images/common/icon_zoom.png) left top no-repeat; width:36px; height:36px; position: absolute; right:0; bottom:0;}
#system ul li a:hover{filter:brightness(1.2); transition:1s;}

/*product*/
#product{margin:15px 0 75px;}
#product h2{background:url(../images/top/h2_product.png) center top no-repeat; height:80px; margin-bottom:45px;}
#product .text{position:relative; min-height:392px; padding:60px 108px 50px 100px; margin:10px 10px 80px; background-color:rgba(255,255,255,0.78);
background-image:url(../images/top/product_cos.png), url(../images/top/product-img-bg.png);
background-repeat:no-repeat, no-repeat;
background-position:center bottom, 672px -112px;
background-size:100% auto, 540px 1289px;}
#product .text::after{content: ''; clear: both; display: block; zoom:1;}
#product .text::before{content: ''; width: calc(100% + 20px); height: calc(100% + 20px); position: absolute; left: -10px; top: -10px; background: rgba(255,255,255,0.42); z-index: -1;}
#product .text div {zoom:1; overflow: hidden; padding-right: 90px; text-align: left;}
#product .text h3 img{width: 100%; height: auto; max-width: 562px; margin-bottom: 30px;}
#product .text p{font-size: 17px; line-height: 28px; padding:0 0 0 5px;}
#product .text figure{position:absolute; top:-98px; right:115px; width:276px; height:528px; transition:right 0.3s;}
#product .text figure img{width:100%; height:auto;}
#product input{position: fixed; left: -9999px; opacity: 0;}
#product nav {width: 1120px; height: 206px; display: flex; margin: 0 auto; align-items: flex-start; align-content: flex-start; justify-content: flex-start; overflow: hidden;}
#product nav label{display:block; height: 208px; width: 360px; position: relative; margin-right: 20px; transition: 0.5s; cursor: pointer;}
#product nav label:hover{opacity: 0.7; transition: 1s;}
#product nav label::before,
#product nav label::after{content: ''; background:url(../images/top/tab.png) left top no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#product nav label[for*='03'] {margin-right: 0;}
#product nav label[for*='02']::before{background-position: -380px 0px;}
#product nav label[for*='03']::before{background-position: -760px 0px;}
#product nav label::after {opacity: 0;}
#product nav label[for*='01']::after{background-position: 0 -212px;}
#product nav label[for*='02']::after{background-position: -380px -212px;}
#product nav label[for*='03']::after{background-position: -760px -212px;}
#product .tab{display: none;}
#product #tab01:checked ~ nav label[for*='01']::before{opacity: 0;}
#product #tab01:checked ~ nav label[for*='01']::after{opacity: 1;}
#product #tab01:checked ~ .tab.tab01{display: block;}
#product #tab02:checked ~ nav label[for*='02']::before{opacity: 0;}
#product #tab02:checked ~ nav label[for*='02']::after{opacity: 1;}
#product #tab02:checked ~ .tab.tab02{display: block;}
#product #tab03:checked ~ nav label[for*='03']::before{opacity: 0;}
#product #tab03:checked ~ nav label[for*='03']::after{opacity: 1;}
#product #tab03:checked ~ .tab.tab03{display: block;}
#product .tab{border: 5px solid #6a5e3c; padding: 8px; color: #6a5e3c;}
#product .tab .in {border: 1px solid #6a5e3c; background: rgba(255,255,255,0.3); padding: 50px 0 0;}
#product .tab .in h4 {font-size: 25px; line-height: 37px; font-style: italic; font-weight: bold; margin: 5px 0 48px;}
#product .tab p.note{margin:-20px 0 50px; font-size:21px; line-height:33px;text-align:center; color:#000;}
#product .tab .flex {display: flex; justify-content: center; align-items: center; padding-bottom: 30px;}
#product .tab .flex img,
#product .tab .flex div {margin: 0 35px;}
#product .tab .flex ul {border-bottom: 2px solid #6a5e3c; margin-bottom: 18px; padding:5px 0 30px;}
#product .tab .flex ul li {font-size: 21px; line-height: 33px; text-align: left; position: relative; padding-left: 1em;}
#product .tab .flex ul li p.small{font-size: 15px; line-height: 22px; padding-bottom: 10px; font-weight: normal; color: #644384;}
#product .tab .flex ul li::before {color: #d065ae; content: '◆'; font-size:16px; position: absolute; left: 0; top: 0;}
#product .tab .flex p {font-size: 25px; line-height: 40px; color: #5ab6c5; font-weight: bold;}
#product .tab .flex p em{font-size: 39px; color: #d065ae; font-weight: bold;}
#product .tab .flex p small{font-size: 20px;}
#product .tab .btns {background: url(../images/top/product_btns.png) center top no-repeat; width: 953px; margin: 0 auto 37px; display: flex; flex-wrap: wrap; justify-content: center; padding: 101px 0 0;}
#product .tab .btns li + li {margin-top: -13px;}
#product .tab .btns p {width: 100%; margin-top: -3px;}
#product .tab .btns a{display: inline-block; position: relative; transition: 0.5s;}
#product .tab .btns a:hover{filter:brightness(1.2); transition: 1s;}
#product .tab .btns a.comingsoon{pointer-events: none;}
#product .tab .btns .gast a.comingsoon::after{content: ''; width: 423px; height: 71px; background: url(../images/top/btn_gastshop-comingsoon.png) center top no-repeat; position: absolute; left: 16px; top: 11px; z-index: 10;}
#product .tab .btns .amazon a.comingsoon::after{content: ''; width: 423px; height: 71px; background: url(../images/top/btn_amazon-comingsoon.png) center top no-repeat; position: absolute; left: 16px; top: 11px; z-index: 10;}
#product .tab .btns .ps a.comingsoon::after{content: ''; width: 423px; height: 103px; background: url(../images/top/btn_playstation-comingsoon.png) center top no-repeat; position: absolute; left: 16px; top: 0; z-index: 10;}
#product .tab .btns .nintendo a.comingsoon::after{content: ''; width: 423px; height: 103px; background: url(../images/top/btn_nintendo-comingsoon.png) center top no-repeat; position: absolute; left: 16px; top: 0; z-index: 10;}
#product .tab.tab01 .offset {position: relative; top: -24px;}
#product .tab.tab01 .in .flex h3.pc-item {width: 100%; margin: 0; font-size: 0; line-height: 1; padding:0 0 25px;}
#product .tab.tab01 .flex h3 img{width: 309px; height: 106px; min-width: inherit;}
#product .tab.tab02 h3{margin-bottom: 50px;}
#product .tab.tab03 h3{margin-bottom: 25px;}

}


@media screen and (max-width:1450px) and (min-width:641px){
#bgm{left:auto; margin-left:0; right:20px;}
#kv .contents{transform:scale(0.9); transform-origin:center right;}
}


@media screen and (max-width:1400px) and (min-width:641px){
#kv .kv01{transform:scale(0.95); transform-origin:center top; margin-left:-80px;}
#story .text {width: 750px; padding-right: 70px;}
#story .chara.chara01{transform: scale(0.94); transform-origin: center top;}
#story .chara.chara02{transform: scale(0.86); transform-origin: center top;}
#product .text figure{right:70px;}
#product .tab .flex img {width: calc(700/1400*100vw); height: auto; min-width: 600px;}
#product .tab01.tab .flex img {width: 282px; min-width: 282px;}
}


@media screen and (max-width:1420px) and (min-width:641px){
#system ul {transform: scale(0.9); transform-origin: left top;}
#product  {margin-top: 0px;}
}


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

    SP

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

/*BGM*/
body > #bgm{display:none!important;}
#bgm{position:relative; width:73.438vw; height:15.469vw; margin:0 auto 6.406vw; background:url(../images/top/sp/bg-music.png) no-repeat left top / 100% auto;}
#bgm .ui .status{position:absolute; top:3.906vw; left:53.438vw;}
#bgm .ui .status a + a{display:none;}
#bgm .ui .status a img{width:8.125vw; height:auto;}
#bgm .ui .status.play a{display:none;}
#bgm .ui .status.play a + a{display:block;}
#bgm .ui .prev{position:absolute; top:3.75vw; left:64.063vw;}
#bgm .ui .prev img,
#bgm .ui .next img{width:4.531vw; height:auto;}
#bgm .ui .next{position:absolute; top:8.594vw; left:64.063vw;}
#bgm .ui .bgmIndex {float:left;}
#bgm .ui .bgmIndex br{display:none;}
#bgm .ui .bgmIndex a{display:none;}
#bgm .bgmtitle{overflow:hidden; float:left; position:absolute; top:1.406vw; left:5.469vw; width:46.875vw; height:12.656vw; margin-left:0; padding:0; font-size:3.438vw; line-height:1; color:#502555; text-align:left;}
#bgm .bgmtitle span{display:inline-block; width:46.875vw; white-space:nowrap; overflow:hidden; position:relative; left:0; line-height:12.656vw;}
#bgm .bgmtitle span b {font-weight:normal; position:relative; left:0;}
#bgm .bgmtitle span em {color:#F00; font-weight:bold; padding-left:0.5em;}

#bg02 {position: absolute; right: inherit; left: 0; top: calc(805/640*100vw); width: 100vw; height: calc(344/640*100vw); background: url(../images/common/sp/bg02.png) center top no-repeat / 100% auto; z-index: 1;}

#wrapper {padding-top: 0; overflow: hidden;}
#wrapper .wrap {max-width: inherit; width: 100%; min-width: inherit;}

/*kv*/
#kv{position:relative; width:100vw; height:301.563vw; z-index:10;}
#kv .kv01{position:absolute; top:0; left:0; width:100vw; height:100%; background:url(../images/top/sp/kv.png) no-repeat center top / 100% auto;}
#kv .kv01 img{display:none;}
#kv .contents{width:100%; height:100%; right:0; top:0; margin-right:0; padding-top:183.438vw; z-index:100;}
#kv .contents h1{background: url(../images/top/sp/logo.png) left top no-repeat / 100% auto; width: 100vw; height: calc(195/640*100vw); position: absolute; left: 0; top: calc(577/640*100vw); z-index: 200;}
#kv .contents .release {background: url(../images/top/sp/kv_release.png) center top no-repeat / 100% 100%; width: 100vw; height: calc(65/640*100vw); margin-top: 0; position: absolute; left: 0; top:  calc(790/640*100vw);}
#kv .contents .btn {background: url(../images/top/btn_kv-yoyaku.png) left top no-repeat / cover; width: calc(475/640*100vw); height: calc(139/640*100vw); margin-top: 0;
position: absolute; left: calc(80/640*100vw); top: calc(867/640*100vw); z-index: 200;}
#kv .contents .btn a{width: 100%; height: 100%; transition: 0.5s; display: block;}
#kv .contents .btn a:hover {opacity: 0; transition: 1s;}


#kv .contents .btn2 {background: url(../images/top/btn_kv-update.png) left top no-repeat / cover; width: calc(475/640*100vw); height: calc(96/640*100vw); margin-top: 0;
position: absolute; left: calc(80/640*100vw); top: calc(990/640*100vw); z-index: 200;}
#kv .contents .btn2 a{width: 100%; height: 100%; transition: 0.5s; display: block;}
#kv .contents .btn2 a:hover {opacity: 0; transition: 1s;}

#kv .contents .btn3 {background: url(../images/top/btn_kv-manual.png) left top no-repeat / cover; width: calc(475/640*100vw); height: calc(96/640*100vw); margin-top: 0;
position: absolute; left: calc(80/640*100vw); top: calc(1070/640*100vw); z-index: 200;}
#kv .contents .btn3 a{width: 100%; height: 100%; transition: 0.5s; display: block;}
#kv .contents .btn3 a:hover {opacity: 0; transition: 1s;}


#kv .contents .copy {background: url(../images/top/sp/kv_copy.png) center top no-repeat / 100vw 100%; height: calc(468/640*100vw); width: 100vw; margin: 0; position: absolute; left: 0; top: calc(92/640*100vw); z-index: 100;}
#kv .contents .copy02 {background: url(../images/top/sp/kv_copy02.png) center top no-repeat / 100vw 100%; height: calc(31/640*100vw); width:100vw; margin: 0; position: absolute; left: 0; top: calc(1100/640*100vw); z-index: 100;}
#kv .contents .update{position:relative; margin-bottom:5.625vw; padding:4.219vw 3.125vw 3.75vw; background:rgba(255,255,255,0.7);}
#kv .contents .update h2{display:none;}
#kv .contents .update dl{text-align:center;}
#kv .contents .update dt{position:relative; margin-bottom:4.531vw; font-size:3.438vw; line-height:1; color:#d34e9b;}
#kv .contents .update dt::before{content:'Update '; font-size:4.219vw; color:#6a5e3c;}
#kv .contents .update dt::after{content:''; position:absolute; right:0; left:0; bottom:-3.281vw; width:40.625vw; height:1.25vw; margin:auto; background:url(../images/top/sp/update-bg.png) no-repeat left top / 100% auto;}
#kv .contents .update dd{font-size:2.813vw; line-height:5.313vw; color:#6a5e3c; overflow:hidden; width:100%; height:10.938vw;}
#kv .contents .update dd a{color:#6a5e3c;}

#kv .contents .book {position: absolute; right: calc(5/640*100vw); top: calc(1120/640*100vw); z-index: 100;}
#kv .contents .book span{display: block; -webkit-animation:fuwafuwa 2.4s infinite ease alternate; animation:fuwafuwa 2.4s infinite ease alternate;}
#kv .contents .book a{display: block; filter: drop-shadow(0 0 calc(13/640*100vw) rgba(255,230,16)); position: relative; transition: 0.5s;}
#kv .contents .book a img {	animation: flash 1.5s infinite linear;-webkit-animation: flash 1.5s infinite linear; -moz-animation: flash 1.5s infinite linear; backface-visibility: hidden; width: calc(119/640*100vw); height: auto;}

#kv .contents a.moviemodal{position:relative; display:block; width:90.469vw; height:50.938vw; margin:0 auto; box-shadow:0px 5px 16px 3px rgba(106,94,60,0.25);}
/*#kv .contents a.moviemodal::after{content:''; position:absolute; top:50%; left:50%; width:100vw; height:61.875vw; margin:-182px 0 0 -319px; background:url(../images/top/kv02_shadow.png) no-repeat left top / 100% auto; z-index:-1;}*/
#kv .contents a.moviemodal img{width:100%; height:auto;}

/*story*/
#story .animpoint {position: absolute; left: 50%; top: 0; border: 5px solid red; z-index: -1000; display: block; font-size: 1px; opacity: 0;}
#story .animpoint#anim02 {top: calc(750/640*100vw);}
#story .animpoint#anim03 {top: calc(2000/640*100vw);}
#story{margin-bottom:4.375vw; padding:0 3.125vw;}
#story .animpoint{position:absolute; left:50%; top:0; border:5px solid red; z-index:-1000; display:block; font-size:1px; opacity:0;}
#story .animpoint#anim02{top:400px;}
#story .animpoint#anim03{top:800px;}
#story .text{position:relative; width:78.594vw; padding:12.344vw 4.688vw 7.656vw; text-align:left; background:rgba(255,255,255,0.6);}
#story .text h2{position:absolute; top:-4.688vw; left:44.063vw; width:48.906vw; height:25.781vw; background:url(../images/top/sp/h2_story.png) no-repeat left top /100% auto;}
#story .text a.details{position:static; margin-left:-2.5vw;}
#story .text .copy{margin-bottom:2.656vw;}
#story .text p{font-size:3.281vw; line-height:6.094vw; -moz-font-feature-settings:"palt"; -webkit-font-feature-settings:"palt"; font-feature-settings:"palt"; letter-spacing:-0.03em;}
#story figure{position:relative; width:92.031vw; margin-top:-7.969vw; z-index:1;}
#story figure img{width:100%; height:auto;}

/*character*/
#character .wrap{position:relative; max-width:100%; height:157.5vw; z-index:10;}
#character .wrap::after{content:''; position:absolute; left:0; top:0; width:100%; height:100%;  background:url(../images/top/sp/story_chara.png) no-repeat left top / 100% auto; z-index:-1;}
#character .text h2{position:absolute; top:5vw; left:3.438vw; width:56.875vw; height:56.875vw; background:url(../images/top/h2_character.png) no-repeat left top / 100% auto; z-index:1;}
#character .text a.details{top:72.031vw; left:5vw; z-index:1;}
#character .wrap ul{position:absolute; top:97.5vw; left:3.125vw;}
#character .wrap ul li a{position:relative; display:block; height:33.75vw; width:60vw;}
#character .wrap ul li a::before{content:''; background:rgba(255,255,255,0.2); width:100%; height:100%; position:absolute; left: 0; top: 0; opacity:0; transition:0.5s;}
#character .wrap ul li a::after{content:''; position:absolute; top:0; right:0; width:5.625vw; height:5.625vw; background:url(../images/common/icon_zoom.png) no-repeat left top / 100% auto;}
#character .wrap ul li{position:relative; z-index:10;}
#character .wrap ul li + li{position:absolute; top:26.25vw; left:33.594vw; z-index:5;}

/*system*/
#system{margin-top:13.125vw;}
#system .text{position:relative; width:80vw; background:rgba(255,255,255,0.6); padding:calc(145/640*100vw) calc(60/640*100vw) 5.156vw; margin:0 auto;}
#system .text::after{content: ''; clear: both ;display: block;}
#system .text h2{position:absolute; top:2.188vw; left:calc(-19/640*100vw); width:66.25vw; height:21.719vw;  background:url(../images/top/h2_system.png) no-repeat left top / 100% auto;}
#system .text p{font-size: calc(21/640*100vw); line-height: calc(39/640*100vw); text-align: left;   -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; letter-spacing: 0;}
#system .text p + p{margin:calc(36/640*100vw) 0 2.031vw;}
#system .text a.details{position:static; margin-left:-2.344vw;}
#system ul{display:flex; flex-direction:column; flex-wrap:wrap; height:calc(520/640*100vw); font-size: 0; line-height: 1; justify-content:center;  align-content:flex-start; align-items:center; padding:0 0 0 0; position:relative; top:-3.75vw; left: calc(20/640*100vw);}
#system ul li {padding-top: calc(4/640*100vw); padding-right: calc(5/640*100vw);}
#system ul li a{display: inline-block; position: relative; transition: 0.5s;}
#system ul li a::after{content: ''; background: url(../images/common/icon_zoom.png) left top no-repeat / cover; width: calc(36/640*100vw); height: calc(36/640*100vw); position: absolute; right: 0; bottom: 0;}
#system ul li img {width: calc(296/640*100vw); height: auto;}



/*product*/
#product{margin:calc(83/640*100vw) 0 11.719vw;}
#product h2{background: url(../images/top/h2_product.png) center top no-repeat / auto 100%; height: calc(80/640*100vw); margin-bottom: calc(35/640*100vw);}
#product .text{position:relative; min-height:97.813vw; padding:8.594vw 0 0; margin:calc(10/640*100vw) calc(20/640*100vw) 11.25vw;
background:rgba(255,255,255,0.78) url(../images/top/sp/product_cos.png) no-repeat center bottom / 100% auto;}
#product .text::after{content: ''; clear: both; display: block; zoom:1;}
#product .text::before{content: ''; width: calc(100% + calc(20/640*100vw)); height: calc(100% + calc(20/640*100vw)); position: absolute; left: -10px; top: -10px; background: rgba(255,255,255,0.42); z-index: -1;}
#product .text h3 img{width: auto; height:calc(94/640*100vw) ; margin-bottom:5.781vw;}
#product .text h3 + img {height: calc(281/640*100vw); width: auto; margin-left: calc(12/640*100vw);}
#product .text div{position:relative; margin-top:41.406vw; z-index:1;}
#product .text p{font-size:calc(21/640*100vw); line-height:calc(39/640*100vw); padding:0 7.813vw; text-align:left;}
#product .text figure{position:absolute; left:0; bottom:0; width:93.75vw; height:77.188vw; background:url(../images/top/sp/product-img-bg.png) no-repeat left bottom / 100% auto;}
#product .text figure img{display:none;}
#product input{position: fixed; left: -9999px; opacity: 0;}
#product nav {width: calc(640/640*100vw); height: calc(110/640*100vw); display: flex; margin: 0 auto; align-items: flex-start; align-content: flex-start; justify-content: flex-start; overflow: hidden;}
#product nav label{display:block; height: 100%; width: calc(220/640*100vw); position: relative; transition: 0.5s; cursor: pointer;}
#product nav label::before,
#product nav label::after{content: ''; background:url(../images/top/sp/tab.png) left top no-repeat / calc(640/640*100vw) auto; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#product nav label[for*='02'] {width: calc(200/640*100vw);}
#product nav label[for*='02']::before{background-position: calc(-220/640*100vw) 0px;}
#product nav label[for*='03']::before{background-position: calc(-420/640*100vw) 0px;}
#product nav label::after {opacity: 0;}
#product nav label[for*='01']::after{background-position: 0 calc(-120/640*100vw);}
#product nav label[for*='02']::after{background-position: calc(-220/640*100vw) calc(-120/640*100vw);}
#product nav label[for*='03']::after{background-position: calc(-420/640*100vw) calc(-120/640*100vw);}
#product .tab{display: none;}
#product #tab01:checked ~ nav label[for*='01']::before{opacity: 0;}
#product #tab01:checked ~ nav label[for*='01']::after{opacity: 1;}
#product #tab01:checked ~ .tab.tab01{display: block;}
#product #tab02:checked ~ nav label[for*='02']::before{opacity: 0;}
#product #tab02:checked ~ nav label[for*='02']::after{opacity: 1;}
#product #tab02:checked ~ .tab.tab02{display: block;}
#product #tab03:checked ~ nav label[for*='03']::before{opacity: 0;}
#product #tab03:checked ~ nav label[for*='03']::after{opacity: 1;}
#product #tab03:checked ~ .tab.tab03{display: block;}
#product .tab{border: calc(5/640*100vw) solid #6a5e3c; padding:calc(8/640*100vw); color: #6a5e3c;}
#product .tab .in {border: 1px solid #6a5e3c; background: rgba(255,255,255,0.3); padding: calc(50/640*100vw) 0 0;}
#product .tab .in h4 {font-size: calc(25/640*100vw); line-height: calc(37/640*100vw); font-style: italic; font-weight: bold; margin: calc(5/640*100vw) 0 calc(40/640*100vw);}
#product .tab p.note{margin:-3.125vw 0 calc(42/640*100vw); font-size:calc(21/640*100vw); line-height:calc(33/640*100vw); text-align:center;}
#product .tab .flex {display: flex; justify-content: center; align-items: center; padding:0 calc(30/640*100vw) calc(30/640*100vw); flex-wrap: wrap;}
#product .tab .flex img {width: 100%; height: auto; margin-bottom: calc(40/640*100vw);}
#product .tab.tab01 .flex img {width: auto; height: calc(370/640*100vw);}
#product .tab.tab01 .flex h3.sp-item {width: 100%; margin: calc(-6/640*100vw) 0 calc(-10/640*100vw);}
#product .tab.tab01 .flex h3 img{width: auto; height:calc(97/640*100vw);}
#product .tab.tab02 h3 {margin-bottom:calc(42/640*100vw);}
#product .tab.tab02 h3 img{width: auto; height:calc(51/640*100vw);}
#product .tab.tab03 h3 {margin-bottom:calc(25/640*100vw);}
#product .tab.tab03 h3 img{width: auto; height:calc(103/640*100vw);}
#product .tab .flex div {margin: 0 calc(35/640*100vw);}
#product .tab .flex ul {border-bottom: calc(2/640*100vw) solid #6a5e3c; margin-bottom: calc(18/640*100vw); padding:0 0 calc(30/640*100vw);}
#product .tab .flex ul li {font-size: calc(21/640*100vw); line-height: calc(33/640*100vw); text-align: left; position: relative; padding-left: 1em;}
#product .tab .flex ul li p.small{font-size:calc(15/640*100vw); line-height: calc(22/640*100vw); padding-bottom: calc(10/640*100vw); font-weight: normal; color: #644384;}
#product .tab .flex ul li::before {color: #d065ae; content: '◆'; font-size:calc(16/640*100vw); position: absolute; left: 0; top: 0;}
#product .tab .flex p {font-size: calc(25/640*100vw); line-height: calc(40/640*100vw); color: #5ab6c5; font-weight: bold;}
#product .tab .flex p em{font-size: calc(39/640*100vw); color: #d065ae; font-weight: bold;}
#product .tab .flex p small{font-size: calc(20/640*100vw);}
#product .tab .btns {background: url(../images/top/sp/product_btns.png) center top no-repeat / cover; width: 100vw; margin: 0 auto calc(24/640*100vw) calc(-13/640*100vw); display: flex; flex-wrap: wrap; justify-content: center; padding: calc(76/640*100vw) 0 0;}
#product .tab .btns li + li {margin-top: calc(-4/640*100vw);}
#product .tab .btns li img{width: auto; height: calc(71/640*100vw);}
#product .tab .btns p img{width: auto; height: calc(89/640*100vw);}
#product .tab .btns p {width: 100%; margin-top: calc(-3/640*100vw);}
#product .tab .btns a{display: inline-block; position: relative; transition: 0.5s;}

#product .tab .btns a.comingsoon{pointer-events: none;}
#product .tab .btns a.comingsoon img {opacity: 0;}
#product .tab .btns .gast a.comingsoon::after{content: ''; width: calc(289/640*100vw); height: calc(70/640*100vw); background: url(../images/top/sp/btn_gastshop-comingsoon.png) center top no-repeat / cover ; position: absolute; left: calc(0/640*100vw); top: calc(0/640*100vw); z-index: 10;}
#product .tab .btns .amazon a.comingsoon::after{content: ''; width: calc(289/640*100vw); height: calc(71/640*100vw); background: url(../images/top/sp/btn_amazon-comingsoon.png) center top no-repeat / cover; position: absolute; left: calc(0/640*100vw); top: calc(0/640*100vw); z-index: 10;}
#product .tab .btns .ps a.comingsoon::after{content: ''; width: calc(289/640*100vw); height: calc(71/640*100vw); background: url(../images/top/sp/btn_playstation-comingsoon.png) center top no-repeat / cover; position: absolute; left: calc(0/640*100vw); top: calc(0/640*100vw); z-index: 10;}
#product .tab .btns .nintendo a.comingsoon::after{content: ''; width: calc(289/640*100vw); height: calc(71/640*100vw); background: url(../images/top/sp/btn_nintendo-comingsoon.png) center top no-repeat / cover; position: absolute; left: calc(0/640*100vw); top: calc(0/640*100vw); z-index: 10;}


#shopmodalbase .wrap {width: calc(600/640*100vw); padding: calc(70/640*100vw) 0 calc(20/640*100vw); min-width: inherit;}
#shopmodalbase .wrap article{padding: 0 calc(60/640*100vw); margin: 0 auto;}
#shopmodal header h3 {font-size: calc(39/640*100vw); line-height: calc(69/640*100vw); font-weight: normal; background: url(../images/common/bg_modaltitle.png) center bottom no-repeat #897f62 / cover; color: #fff; margin: 0 calc(-61/640*100vw) calc(50/640*100vw); background-size: 100% auto;}
#shopmodalbase .wrap article p {font-size: calc(24/640*100vw); line-height: calc(34/640*100vw); color: #977aaf; padding: calc(30/640*100vw) 0 calc(48/640*100vw);}
#shopmodalbase .wrap article img {width: calc(476/640*100vw); height: auto;}
#shopmodal footer {position: absolute; right: 1px; top:calc(-52/640*100vw); z-index: 10; width: calc(39/640*100vw); height: calc(39/640*100vw); overflow: hidden; font-size: 0;}
#shopmodal footer a{display: block; width: calc(39/640*100vw); height: calc(39/640*100vw); transition: 0.3s ease-out;background: url(../images/common/btn_close.png) left top no-repeat / cover;}

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


}

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


}
/*
    animation
*/
@media screen and (min-width:641px){

/* kv */
#kv .contents h1 {opacity: 0; transform: scale(1.2);}
#kv .contents .release {opacity: 0; transform: scale(1.2); transform-origin: center top;}
#kv .contents .btn,#kv .contents .btn2,#kv .contents .btn3 {opacity: 0; transform: scale(1.15); transform-origin: center top;}
#kv .contents .copy {opacity: 0; transform: scale(1.2); transform-origin: center top;}
#kv .contents .update{opacity:0; transform: scale(1.2); transform-origin:center top;}
#kv .contents .book{opacity:0; transform: scale(1.2) translateY(-200px) rotate(-20deg); transform-origin:center top;}

.windowloaded #kvimgs li:nth-child(1) img{opacity:1; transition:filter 2s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1),transform 3.0s cubic-bezier(0.165, 0.84, 0.44, 1); filter: brightness(1); transform: translateY(0);}
.windowloaded #kvimgs li:nth-child(1)::after{opacity: 1; transition:opacity 1s 2s cubic-bezier(0.215, 0.61, 0.355, 1);}
.windowloaded #kv .contents h1 {opacity: 1; transform: scale(1) translate(0,0); transition:opacity 2s 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),transform 1.4s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);}
.windowloaded #kv .contents .release {opacity: 1; transform: scale(1) translate(0,0); transition:opacity 1s 1.1s cubic-bezier(0.215, 0.61, 0.355, 1),transform 1.4s 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);}
.windowloaded #kv .contents .btn {opacity: 1; transform: scale(1) translate(0,0); transition:opacity 1s 1.4s cubic-bezier(0.215, 0.61, 0.355, 1),transform 1.4s 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);}
.windowloaded #kv .contents .btn2 {opacity: 1; transform: scale(1) translate(0,0); transition:opacity 1s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1),transform 1.4s 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);}
.windowloaded #kv .contents .btn3 {opacity: 1; transform: scale(1) translate(0,0); transition:opacity 1s 1.8s cubic-bezier(0.215, 0.61, 0.355, 1),transform 1.4s 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);}
.windowloaded #kv .contents .copy {opacity: 1; transform: scale(1) translate(0,0); transition:opacity 1s 1.7s cubic-bezier(0.215, 0.61, 0.355, 1),transform 1.4s 1.7s cubic-bezier(0.165, 0.84, 0.44, 1);}
.windowloaded #kv .contents .update{opacity:1; transform: scale(1) translate(0,0); transition:opacity 1s 2s cubic-bezier(0.215, 0.61, 0.355, 1),transform 1.4s 1.7s cubic-bezier(0.165, 0.84, 0.44, 1);}
.windowloaded #kv .contents .book{opacity:1; transform: scale(1) translate(0,0); transition:opacity 1s 2s cubic-bezier(0.215, 0.61, 0.355, 1),transform 1.8s 1.7s cubic-bezier(0.165, 0.84, 0.44, 1);}
.windowloaded #kvimgs li:nth-child(2) img{opacity:1; transition:filter 2s 2.4s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 2s 2.4s cubic-bezier(0.215, 0.61, 0.355, 1),transform 2.0s 2.4s cubic-bezier(0.165, 0.84, 0.44, 1); filter: brightness(1); transform: translateY(0);}
.windowloaded #kvimgs li:nth-child(2)::after,
.windowloaded #kvimgs li:nth-child(2) a.moviemodal::before{opacity:1; transition:opacity 1s 3.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.3s;}
#kv .kv01::after{opacity:0;}
#kv .kv01 img{opacity:0; filter:brightness(3); transform:translateY(50px);}
.windowloaded #kv .kv01 img{opacity:1; transition:filter 2s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1),transform 3.0s cubic-bezier(0.165, 0.84, 0.44, 1); filter:brightness(1); transform: translateY(0);}
.windowloaded #kv .kv01::after{opacity:1; transition:opacity 1s 2s cubic-bezier(0.215, 0.61, 0.355, 1);}
#kv .contents a.moviemodal::after,
#kv .contents a.moviemodal::before{opacity:0;}
#kv .contents a.moviemodal img{opacity:0; filter:brightness(3); transform:translateY(50px);}
.windowloaded #kv .contents a.moviemodal img{opacity:1; transition:filter 2s 2.4s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 2s 2.4s cubic-bezier(0.215, 0.61, 0.355, 1),transform 2.0s 2.4s cubic-bezier(0.165, 0.84, 0.44, 1); filter: brightness(1); transform: translateY(0);}
.windowloaded #kv .contents a.moviemodal::after,
.windowloaded #kv .contents a.moviemodal::before{opacity:1; transition:opacity 1s 3.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.3s;}

/* story */
#story{opacity: 0; transform: translate(0,50px);}
#story.animated{opacity:1; transition:filter 1.6s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 2s cubic-bezier(0.23, 1, 0.32, 1); filter: brightness(1); transform: translateY(0);}

/* character */
#character .text{opacity: 0; transform: translate(0,50px);}
#character .wrap::after{opacity: 0; filter: brightness(1.5); transform: translate(0,50px);}
#character .wrap ul li{opacity: 0;}
#character.animated .text,
#character.animated .wrap::after{opacity:1; transition:filter 1.6s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 2s cubic-bezier(0.23, 1, 0.32, 1); filter: brightness(1); transform: translateY(0);}
#character.animated .wrap ul li{opacity: 1; transition:opacity 1.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);}

/* system */
#system .text {opacity: 0; transform: translate(0,50px); transition:filter 3s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 2s cubic-bezier(0.23, 1, 0.32, 1);}
#system ul li{opacity: 0; filter: brightness(1.5); transform: translate(0,50px); transition:filter 3s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 2s cubic-bezier(0.23, 1, 0.32, 1);}
#system.animated .text,
#system.animated ul li{opacity:1; filter: brightness(1); transform: translateY(0);}

/* product */
#product h2,
#product .text ,
#product nav ,
#product .tab{opacity: 0; transform: translate(0,50px); transition:opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 2s cubic-bezier(0.23, 1, 0.32, 1);}
#product h2.animated,
#product h2.animated ~ .text ,
#product nav.animated ,
#product nav.animated ~ .tab{opacity: 1; transform: translate(0,0);} 

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

#kv .kv01{opacity: 0; filter: brightness(2.4); transform: translateY(-7vw) scale(1.1); transform-origin: right top;}
#kv .contents .copy {opacity: 0; transform: translateY(6vw);}

#bg02 {opacity: 0;}
#kv .contents h1 {opacity: 0;}
#kv .contents .release {opacity: 0;}
#kv .contents .btn,#kv .contents .btn2,#kv .contents .btn3 {opacity: 0;}
#kv .contents .copy02 {opacity: 0;}
#kv .contents .update,
#kv .contents .book{opacity: 0;}
#kv .contents #bgm{opacity: 0;}
#kv .contents .moviemodal {opacity: 0;}

.windowloaded #kv .kv01{opacity:1; transition:filter 2s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1),transform 3.0s cubic-bezier(0.165, 0.84, 0.44, 1); filter: brightness(1); transform: translateY(0);}
.windowloaded #kv .contents .copy {opacity: 1; transform: translate(0,0); transition:opacity 2s 1.4s cubic-bezier(0.215, 0.61, 0.355, 1),transform 2s 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);}

.windowloaded #kv .contents .moviemodal,
.windowloaded #kv .contents .update,
.windowloaded #kv .contents .book,
.windowloaded #kv .contents .copy02,
.windowloaded #bg02,
.windowloaded #kv .contents h1 ,
.windowloaded #kv .contents .release ,
.windowloaded #kv .contents .btn,
.windowloaded #kv .contents .btn2,
.windowloaded #kv .contents .btn3,
.windowloaded #kv .contents #bgm{opacity: 1; transition:opacity 2s 2s cubic-bezier(0.39, 0.575, 0.565, 1),transform 2s 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

/* story */
#story{opacity: 0; transform: translate(0,35vw); transition:opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 1.6s cubic-bezier(0.23, 1, 0.32, 1);}
#story.animated{opacity:1; transform: translate(0);}


/* character */
#character .text,
#character .wrap::after,
#character .wrap ul li{opacity:0; transform:translate(0,35vw); transition:opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 1.6s cubic-bezier(0.23, 1, 0.32, 1);}
#character.animated .text,
#character.animated .wrap::after,
#character.animated .wrap ul li{opacity:1; transform: translate(0);}


/* system */
#system .text ,
#system ul {opacity: 0; transform: translate(0,35vw); transition:opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 1.6s cubic-bezier(0.23, 1, 0.32, 1);}
#system .text.animated,
#system ul.animated {opacity:1; transform: translate(0);}

/* product */
#product h2,
#product .text ,
#product nav ,
#product .tab{opacity: 0; transform: translate(0,35vw); transition:opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 1.6s cubic-bezier(0.23, 1, 0.32, 1);}
#product h2.animated,
#product h2.animated ~ .text ,
#product nav.animated ,
#product nav.animated ~ .tab{opacity: 1; transform: translate(0,0);} 

}



/* bg */
@media screen and (min-width:641px){
#bg01 {position: fixed; left: 50%; top: 0; width: 454px; height: 402px; background: url(../images/common/bg02.png) left top no-repeat; z-index: 100; margin-left: 496px;}
#bg02 {position: fixed; right: 50%; top: 0; width: 454px; height: 402px; background: url(../images/common/bg03.png) left top no-repeat; z-index: 100; margin-right: 496px;}
}
@media screen and (min-width:641px) and (min-width:1920px){
#bg01 {left: inherit; right: 0; margin: 0;}
#bg02 {right: inherit; left: 0; margin: 0;}
}
@media screen and (min-width:641px) and (max-width:1400px){
#bg01 {left:inherit; right: -261px; margin-left:0 ;}
#bg02 {right: inherit; left: -261px; margin-right: 0;}
}

@keyframes flash {
	0% { filter: brightness(1);}
	50% { filter: brightness(1.15); }
	100% { filter: brightness(1); }
}
@-webkit-keyframes flash {
	0% { filter: brightness(1);}
	50% { filter: brightness(1.15); }
	100% { filter: brightness(1); }
}
@-moz-keyframes flash {
	0% { filter: brightness(1);}
	50% { filter: brightness(1.15); }
	100% { filter: brightness(1); }
}
@-webkit-keyframes fuwafuwa {
0% {-webkit-transform:translate(0, 0) rotate(0deg);}
50% {-webkit-transform:translate(0, -10px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0) rotate(0deg);}
}
@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(0deg);}
50% {transform:translate(0, -10px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(0deg);}
}