@charset "UTF-8";
@media screen and (min-width: 641px) { .siteheader nav a[data-tophref="#contents"] i { opacity: 1; width: 100%; } }
/* bgm */
#bgm { background: url(../img/bg_music.png); width: 260px; height: 55px; background-size: 100% auto; position: fixed; right: 0; top: 72px; z-index: 100; font-family: "M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; }
#bgm .ui { padding: 0; height: 55px; }
#bgm .ui:after { content: ''; clear: both; display: block; }
#bgm .ui .status { position: absolute; left: 185px; top: 13px; }
#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: 222px; top: 0px; }
#bgm .ui .prev img, #bgm .ui .next img { width: 16px; height: auto; }
#bgm .ui .next { position: absolute; left: 222px; top: 16px; }
#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: 55px; color: #0961ba; text-align: left; padding: 0; height: 55px; overflow: hidden; width: 154px; float: left; margin-left: 0; position: absolute; left: 25px; top: 1px; letter-spacing: 0.12em; }
#bgm .bgmtitle span { display: inline-block; white-space: nowrap; overflow: hidden; /*text-overflow:ellipsis;*/ position: relative; left: 0; line-height: 55px; 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; }
.bgmmin #bgm .ui .status { left: 212px !important; }
.bgmmin #bgm .ui .prev, .bgmmin #bgm .ui .next { display: none !important; }

#kv embed,#kv  iframe{ height: auto; max-width: inherit;}

@media screen and (min-width: 641px) {
/*  	PC STYLE 640px over  *************************************************************/
  .siteheader nav a[data-tophref="#contents"] i { opacity: 1; }
  /* kv */
  #kv { height: 56.25vw; min-height: 770px; position: absolute; margin-bottom: 0; overflow: hidden; }
  #kv #kvbg { width: 100%; height: 100%; background: url(../img/top/kv.jpg) center top no-repeat; background-size: cover; position: absolute; left: 0; top: 0; }
  #kv #bgmovie { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 1s 0.5s ease-out; z-index: 0; }
  #kv #bgmoviewrap { position: relative; width: 100%; height: 100%; transform: scale(1.05); display: flex; justify-content: center; align-content: center; align-items: center;}
  #kv #bgmoviewrap::after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; }
  #kv .youtubeloaded #bgmovie { opacity: 1; }
  #kvcontents { position: relative; height: 56.25vw; min-height: 675px; z-index: 200; margin-bottom: 0; }
  #kvcontents header { position: absolute; left: 0; top:0; padding: calc(120 * 0.75px) 0 0; margin-left: calc(15 * 0.75px);}
  #kvcontents header h1 { width: calc(538 * 0.75px);}
  #kvcontents header h1 img {width: 100%; height: auto;}
  #kvcontents header a[data-eventTrack='order-top'] { display: block; background: url("../img/top/btn_preordernow.jpg") left top no-repeat; width: 340px; height: 86px; font-size: 0; position: relative; margin: 0 auto;}
  #kvcontents header a[data-eventTrack='order-top']::after { content: ''; background: url("../img/top/btn_preordernow.jpg") left -90px no-repeat; width: 100%; height: 86px; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0; transition: 0.6s; }
  #kvcontents header a[data-eventTrack='order-top']:hover::after { opacity: 1; transition: opacity 0.4s; }
  
  #kvcontents a.twitterbtn { background: #0961ba; font-size: 18px; line-height: 42px; width: 198px; color: #fff; display: block; position: absolute; right: 0; bottom: 142px; transform: rotate(90deg); transform-origin: right top; letter-spacing: 0.1em; z-index: 100; border: 1px solid #0961ba; transition: background 0.6s,color 0.6s; border-top: none; }
  #kvcontents.min a.twitterbtn {font-size: 18px !important; line-height: 42px !important; width: 198px !important; top: inherit !important; bottom:142px !important;}
  
  #kvcontents a.twitterbtn:hover { background: rgba(255, 255, 255, 0.7); color: #0961ba; transition: background 0.4s,color 0.4s; }
  .uatablet a.twitterbtn { background: #0961ba !important; color: #fff !important; }
  
  #kvcontents p.platform { position: absolute; right: 10px; bottom: 10px; }
  #kvcontents p.award { position: absolute; left: -210px; /*top: 580px;*/ /*display: inline-flex;*/ justify-content: flex-start; flex-direction: column;}
  #kvcontents p.award img { width: 70%; }
  #kvcontents a.moviemodal { position: absolute; right: 22px; bottom: 55px; transition: 0.6s; }
  #kvcontents a.moviemodal:hover { opacity: 0.7; transition: 0.4s; }

  #kvcontents p.catch { background: url("../img/top/kv_catch.png") left top no-repeat; width: 127px; height: 610px; position: absolute; right: 0; top: 24px; background-size: 100% auto; font-size: 0; }
  #kvcontents.min p.catch {height: 610px !important; background-size: 100% auto !important;width: 115px !important; top: 24px !important;}

  #kvcontents p.kv-btn { display: block; width: 340px; height: 86px; font-size: 0; position: absolute; left: 50%; top: 292.5px; margin-left: -170px; }

  #kvcontents .updatearr {position: absolute; }
  #kvcontents .updatearr.out{bottom: 40px;}
  
  #kvcontents ul.bnrs {padding: 10px 0 0; display: inline-flex; justify-content: flex-start; flex-direction: column;}
  #kvcontents ul.bnrs li + li {margin: 10px 0 0;}
  #kvcontents ul.bnrs a{height: 58px; margin: 0; width: 340px; position: relative; display: block; color: #fff; font-size: 20px; line-height: 1; transition: color 0.3s;}
  #kvcontents ul.bnrs a span {position: relative; z-index: 10; display: block; padding: 22px 0 0; letter-spacing: 0.15em;}
  #kvcontents ul.bnrs a::after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("../img/top/btn_kvother.jpg") no-repeat left top; z-index: 0;}
  #kvcontents ul.bnrs a::before{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("../img/top/btn_kvother.jpg") no-repeat left -60px; z-index: 1; opacity: 0; transition: 0.6s;}
  #kvcontents ul.bnrs a:hover::before {opacity: 1; transition: 0.3s;}
  #kvcontents ul.bnrs a:hover {color: #0a62ba;}
	
  #kvcontents ul li.bnr1,#kvcontents ul li.bnr2,#kvcontents ul li.bnr3,#kvcontents ul li.bnr4{ background: none;}	
  #kvcontents ul li.bnr1 a::before,#kvcontents ul li.bnr2 a::before,#kvcontents ul li.bnr3 a::before,#kvcontents ul li.bnr4 a::before{ background: none;}	
  #kvcontents ul li.bnr1 a::after,#kvcontents ul li.bnr2 a::after,#kvcontents ul li.bnr3 a::after,#kvcontents ul li.bnr4 a::after{ background: none;}	
  #kvcontents ul li.bnr1 a,#kvcontents ul li.bnr2 a,#kvcontents ul li.bnr3 a,#kvcontents ul li.bnr4 a{ transition: 0.6s; height: 51px;}
  #kvcontents ul li.bnr1 a:hover,#kvcontents ul li.bnr2 a:hover,#kvcontents ul li.bnr3 a:hover,#kvcontents ul li.bnr4 a:hover{ opacity: 0.7; transition: 0.4s; }
  #kvcontents ul li.bnr1 a span,#kvcontents ul li.bnr2 a span,#kvcontents ul li.bnr3 a span,#kvcontents ul li.bnr4 a span{ padding:0; }

  #kvcontents ul.bnrs li.bnr4 a{height: 85px;}
	
  
  /* intro */
  #introduction { position: relative; font-size: 0; line-height: 1; height: 816px; z-index: 0;}
  #introduction span.bg { display: block; position: absolute; left: 0; top: 0; z-index: -1; }
  #introduction span.bg01 { width: 1020px; position: absolute; left: 180px; top: -50px; z-index: -1; height: 275px; margin-left: 0; overflow: hidden; }
  #introduction span.bg01::after { content: ''; width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: linear-gradient(74deg, #fffcbc 15%, #8cd3f0 71%, #8cd3f0 100%); }
  #introduction span.bg02 { width: 318px; position: absolute; left: 0; top: 720px; z-index: -1; height: 242.25px; overflow: hidden; }
  #introduction span.bg02::after { content: ''; position: absolute; left: 0; top: 0%; width: 100%; height: 100%; background: linear-gradient(-106deg, #fffcbc 0%, #fffcbc 29%, #8cd3f0 100%); }
  #introduction .wrap { width: 1050px; padding: 127.5px 525px 0 0; margin: 0 auto; }
  #introduction .clip h2 { -webkit-text-stroke-color: #0961ba; -webkit-text-stroke-width: 1px; font-size: 75px; color: transparent; letter-spacing: 0.05em; margin-bottom: 72.75px; }
  #introduction .clip p { font-size: 22.5px; line-height: 54px; background-image: url("../img/bg_gradetext.jpg"); background-position: center center; -webkit-background-clip: text; color: transparent; font-weight: bold; }
  #introduction .clip p b { font-size: 32.25px; font-weight: bold; }
  #introduction .clip p + p { margin-top: 30px; }
  #introduction div.img { width: 600px; height: 692.25px; display: block; overflow: hidden; position: absolute; left: 50%; top: 43.5px; z-index: 0; }
  #introduction div.img i { background: url("../img/top/img_introduction.jpg") center center no-repeat; width: 100%; display: block; height: 1061.25px; position: absolute; left: 0; bottom: -225px; background-size: cover; }
  #introduction div.img img { opacity: 0; }
  #introduction  a.btn {width: 256px; height: 58px; margin: 60px auto 0; font-size: 21px; padding-top: 18px;}

    /* topics */
  #topics { color: #0961ba; font-size: 0; line-height: 1; min-height: 599px; /*background: url("../img/top/topics.jpg") center top no-repeat; background-size: cover;*/ position: relative; z-index: 100; margin-bottom: 20px;}
#topics .wrap{padding-bottom: 70px;}
#topics .wrap h2 { -webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px; font-size: 81px; color: transparent; letter-spacing: 0.02em; padding: 60px 0 30px;}
  #topics .topics {display: flex; justify-content: space-around; max-width: 1230px; margin: 0 auto;}
  #topics .topics .topic {width: 100%; background: rgba(255,255,255,0.8); text-align: left; border: 1px solid #0961ba; margin: 0 15px 30px; position: relative;}
  #topics .topics .topic time {z-index: 10; position: absolute; left: 0; top: 0; font-size: 14px; color:#d8245b; font-size: 14px; width: 96px; height: 20px; background: #fffba7; text-align: center; padding: 5px 0 0;}
  #topics .topics .topic p {font-size: 14px; line-height: 26px; padding: 15px 20px; letter-spacing: 0; font-family: "M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; transform: rotate(0.05deg);}
  #topics .topics .topic p a{text-decoration: underline;}
  #topics .topics .topic p a:hover{text-decoration: none;}
  #topics .topics .topic i a{transition: opacity 0.3s; position: relative; display: block;}
  #topics .topics .topic i a[target*='blank']::after{content: ''; width: 42px; height: 42px; position: absolute; right: 10px; top: 10px; z-index: 20; background: url("../img/icon_blank.png") no-repeat center / cover  rgba(255,255,255,1); border:1px solid #0961ba; border-radius: 100%;}
  #topics .topics .topic i a:hover{opacity: 0.7;}
  #topics  a.btn {width: 300px; height: 58px; margin: 14px auto; font-size: 32px;}
  #topics .img {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; min-width: 1200px; overflow: hidden;}
  #topics .img i {background: url("../img/top/topics.jpg") center top no-repeat; width: 100%; display: block; height: 1024px; position: absolute; left: 0; bottom: -300px; background-size: cover;}
  #topics .img i img {width: 100%; height: auto; opacity: 0;}
  
  /* world */
  #world { color: #fff; font-size: 0; line-height: 1; /* max-width: 1920px;*/ }
  #world .text { position: absolute; right: 0; top: 0; text-align: right; padding-right: 33.75px; z-index: 10; }
  #world .text h2 { -webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px; font-size: 87px; color: transparent; letter-spacing: 0.05em; margin: 57.75px 0 18.75px 0; }
  #world .text p { font-size: 19.5px; line-height: 37.5px; color: #fff; }
  #world .text p span { font-size: 0; height: 1.5px; background: #fff; display: inline-block; position: relative; top: -9.75px; width: 37.5px; left: 3.75px; line-height: 1; }
  #world .img { position: relative; height: 613.5px; overflow: hidden; z-index: 0; margin-bottom: 52.5px; }
  #world .img i { background: url("../img/top/world.jpg") center top no-repeat; width: 100%; display: block; height: 675px; position: absolute; left: 0; bottom: -150px; background-size: cover; }
  #world .img img { width: 100%; height: auto; opacity: 0; }
  #world  a.btn {width: 256px; height: 58px; margin: 23px auto 0; font-size: 21px; padding-top: 18px; text-align: center; float:right;}

  /* #character */
  #characters { padding-top: 166.5px; position: relative; font-size: 0; line-height: 1; margin-bottom: 180px; }
  #characters .bg01 { height: 636px; width: 1660px; left: 50%; top: 258.75px; margin-left: -700px; overflow: hidden; position: absolute; }
  #characters .bg01 i { background: url("../img/top/bg_character.jpg") left top no-repeat; height: 1858px; width: 1661px; position: absolute; left: -1px; bottom: -700px; display: block; }
  #characters span.bg02 { width: 1125px; position: absolute; left: 0; top: 316.5px; z-index: -1; height: 600px; overflow: hidden; }
  #characters span.bg02::after { content: ''; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; background: linear-gradient(-45deg, #fffcbc 29%, #8cd3f0 100%); }
  #characters span.chara { width: 933px; height: 1093px; background: url("../img/top/chara.png") left top no-repeat; position: absolute; left: 50%; top: 0; margin: 246px 0 0 -548px; display: block; z-index: 10; }
  #characters .wrap { max-width: 1400px; margin: 0 auto; min-width: 1200px; width: 100%; position: relative; z-index: 100; }
  #characters .wrap h2 { -webkit-text-stroke-color: #0961ba; -webkit-text-stroke-width: 1px; position: absolute; right: 25px; top: -30px; font-size: 75px; color: transparent; letter-spacing: 0.02em; }
  #characters .wrap header { text-align: left; padding: 48.75px 43.5px; }
  #characters .wrap header h3 { font-size: 105px; line-height: 88.5px; text-shadow: 0 0 12px #5dccff, 0 0 12px #5dccff; color: #fff; margin-bottom: 6px; }
  #characters .wrap header p { font-size: 20px; text-shadow: 0 0 12px #5dccff, 0 0 12px #5dccff; color: #fff; margin-bottom: 26.25px; }
  #characters .wrap header .slide02 { overflow: hidden; float: left; margin: 53px 0 0 -28px; }
  #characters .wrap dl { display: flex; font-size: 18px; color: #fff; justify-content: flex-start; line-height: 1; align-items: center; }
  #characters .wrap dl dt { padding: 6px 15px 1px; border: 1px solid #fff; background: #fff; color: #0961ba; font-size: 26px; font-weight: bold; }
  #characters .wrap dl dd { padding: 8px 15px 3px; border: 1px solid #fff; font-size: 22px; letter-spacing: 0.15em; }
  #characters .wrap .text { background: rgba(255, 255, 255, 0.8); position: absolute; z-index: 100; right: 25px; width: 364px; text-align: left; top: 0; padding: 5px; top: 88px; }
  #characters .wrap .text div { padding: 75px 40px; position: relative; }
  #characters .wrap .text div::after { content: ''; width: 100%; height: 100%; border: 1px solid #0961ba; position: absolute; left: 0; top: 0; }
  #characters .wrap .text p { font-size: 16px; line-height: 36px; letter-spacing: 0.05em; transform: rotate(0.05deg); }
  #characters .wrap .text p b { background: linear-gradient(transparent 0%, #fffba7 0%); display: inline-block; line-height: 1; position: relative; }
  #characters .wrap .text p b:before { content: ''; background: linear-gradient(transparent 0%, #fffba7 0%); position: absolute; left: 0; top: -5px; width: 100%; height: 110%; z-index: -1; }
  #characters .wrap .text p span { letter-spacing: -0.2em; }
  #characters .wrap .text p + p { margin-top: 28.5px; }
  #characters  a.btn {width: 256px; height: 58px; font-size: 21px; padding-top: 18px; text-align: center; position: absolute; left: 0; bottom: -37px; z-index: 100; margin: 0 0 0 -79px;}

  /* #system */
  #system { padding-top: 67.5px; position: relative; font-size: 0; line-height: 1; }
  #system span.bg01 { width: 832.5px; position: absolute; left: 0; top: 135px; z-index: -1; height: 564px; overflow: hidden; }
  #system span.bg01::after { content: ''; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; background: linear-gradient(45deg, #fffcbc 22%, #8dd3f0 80%); }
  #system span.bg02 { width: 684.75px; height: 385.5px; background: url("../img/top/system/SS10.jpg") left top no-repeat; background-size: cover; position: absolute; right: 0; top: 67.5px; }
  #system .wrap { max-width: 1400px; margin: 0 auto; min-width: 1200px; text-align: left; height: 435px; padding: 26.25px 0 0 50px; }
  #system .wrap h2 { font-size: 81px; -webkit-text-stroke-color: #0961ba; -webkit-text-stroke-width: 1px; color: #fff; color: transparent; margin-bottom: 33.75px; }
  #system .wrap h3 { font-size: 26.25px; font-weight: bold; margin-bottom: 22.5px; }
  #system .wrap p { font-size: 13.5px; line-height: 28.5px; letter-spacing: 0.05em; transform: rotate(0.05deg); }
  #system .wrap p + p { margin-top: 13.5px; }
  #system .wrap p b{font-weight: bold;}
  /* bg_cloud */
  .bg_white { background: #fff; }
  .bg_cloud { line-height: 1; padding-bottom: 130px; position: relative; /* creators */ /* products */ }
  .bg_cloud h2 { font-size: 89px; -webkit-text-stroke-color: #0961ba; -webkit-text-stroke-width: 1px; color: #fff; color: transparent; }
  .bg_cloud #creators { padding: 124px 0 0; }
  .bg_cloud #creators .wrap { height: 439px; display: flex; width: 100%; margin-top: 51px; }
  .bg_cloud #creators .wrap div { width: 50%; padding: 20px; background-repeat: no-repeat; background-position: center top; background-size: cover; background-image: url("../img/top/bg_creators01.jpg"); }
  .bg_cloud #creators .wrap div + div { background-image: url("../img/top/bg_creators02.jpg"); }
  .bg_cloud #creators .wrap div span { border: 1px solid #0961ba; display: block; height: 398px; padding: 67px 0 0; }
  .bg_cloud #creators .wrap div span h3 { font-size: 30px; }
  .bg_cloud #creators .wrap div span h3 b { font-size: 33.75px; display: block; background: rgba(255, 255, 255, 0.6); margin: 12px 0 33px; padding: 9px 0 7px; font-family: "M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; }
  .bg_cloud #creators .wrap div span p { font-size: 18px; line-height: 36px; text-align: left; padding: 0 56.25px 0; transform: rotate(0.05deg); font-family: "M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; }
  .bg_cloud #products { padding: 124px 0 0; }
  .bg_cloud #products h2 { margin-bottom: 46px; }
  .bg_cloud #products .btns { margin: 54px 0 0; display: flex; justify-content: center; }
  .bg_cloud #products .btns a { display: block; width: 370px; height: 70px; font-size: 28px; transition: 0.2s; color: #fff; position: relative; margin: 0 8px; padding: 23px 0 0; }
  .bg_cloud #products .btns a::before { content: ''; background: url("../img/top/bg_btns.png") left top no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; }
  .bg_cloud #products .btns a::after { content: ''; background: url("../img/top/bg_btns.png") left -70px no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: -1; transition: 0.4s; }
  .bg_cloud #products .btns a:hover { color: #d8245b; }
  .bg_cloud #products .btns a:hover::after { opacity: 1; }
  .bg_cloud_fixed { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: url("../img/top/bg_cloud.jpg") center bottom no-repeat; z-index: -1; background-size: cover; } }
@media screen and (min-width: 1480px) {
  #characters .wrap h2, #characters .wrap .text { right: 0; }
  #system .wrap { padding-left: 0; }
}
@media screen and (min-width: 1201px) {
/* kv */
  #kv { margin-bottom: 0; }
  #kvcontents { margin-bottom: 0; }
  #kvcontents header { left: 0; top: 0;}
  #kvcontents header h1 { width: 33.625vw;/* height: 29.875vw; */}
  #kvcontents header a[data-eventTrack='order-top'] { /*top: 24.375vw; */}
  #kvcontents header p.kv-btn { top: 24.375vw; }
  #kvcontents a.twitterbtn { bottom: inherit; top: 50.625vw; }
  #kvcontents a.moviemodal { right: 1vw; }
  #kvcontents p.catch { width: 10.5vw; height: 49.875vw; top: calc(24/1201*100vw); }
  #kvcontents p.kv-btn { top: 27.8vw; }

  /* intro */
  #introduction { height: 68vw; }
  #introduction span.bg01 { width: 85vw; height: 18.75vw; left: 15vw; }
  #introduction span.bg02 { width: 26.5vw; height: 20.1875vw; top: 60vw; }
  #introduction .wrap { width: 87.5vw; padding: 10.625vw 43.75vw 0 0; }
  #introduction .clip h2 { font-size: 6.25vw; margin-bottom: 6.0625vw; }
  #introduction .clip p { font-size: 1.875vw; line-height: 4.5vw; }
  #introduction .clip p b { font-size: 2.6875vw; }
  #introduction .clip p + p { margin-top: 2.5vw; }
  #introduction div.img { width: 50vw; height: 57.6875vw; top: 3.625vw; }
  #introduction div.img i { height: 88.4375vw; bottom: -18.75vw; }
  /* world */
  #world .text { padding-right: 2.8125vw; }
  #world .text h2 { font-size: 7.25vw; margin: 4.8125vw 0 1.5625vw 0; }
  #world .text p { font-size: 1.625vw; line-height: 3.125vw; }
  #world .text p span { top: -0.8125vw; width: 3.125vw; left: 0.3125vw; height: 0.125vw; }
  #world .img { height: 51.125vw; margin-bottom: 4.375vw; }
  #world .img i { height: 56.25vw; bottom: -12.5vw; }
  /* #character */
  #characters { padding-top: 13.875vw; }
  #characters .bg01 { top: 21.5625vw; }
  #characters span.bg02 { width: 93.75vw; top: 26.375vw; }
  #characters span.chara { margin: 20.5vw 0 0 -548px; }
  #characters .wrap h2 { font-size: 6.25vw; top: -2.5vw; }
  #characters .wrap header { padding: 4.0625vw 3.625vw; }
  #characters .wrap header h3 { font-size: 8.75vw; line-height: 7.375vw; margin-bottom: 0.5vw; }
  #characters .wrap header p { margin-bottom: 2.1875vw; }
  #characters .wrap div.text p + p { margin-top: 2.375vw; }
  /* #system */
  #system { padding-top: 5.625vw; position: relative; font-size: 0; line-height: 1; }
  #system span.bg01 { width: 69.375vw; position: absolute; left: 0; top: 11.25vw; }
  #system span.bg02 { width: 57.0625vw; height: 32.125vw; top: 5.625vw; }
  #system .wrap { height: 36.25vw; padding-top: 2.1875vw; }
  #system .wrap h2 { font-size: 6.75vw; margin-bottom: 2.8125vw; }
  #system .wrap h3 { font-size: 2.1875vw; margin-bottom: 1.875vw; }
  #system .wrap p { font-size: 1.125vw; line-height: 2.375vw; }
  #system .wrap .text div p + p { margin-top: 1.125vw; }
  /* bg_cloud */
  .bg_cloud { /* creators */ }
  .bg_cloud h2 { font-size: 89px; }
  .bg_cloud #creators .wrap div span h3 b { font-size: 2.8125vw; }
  .bg_cloud #creators .wrap div span p { padding: 0 4.6875vw 0; } }
@media screen and (min-width: 1601px) {
/* kv */
  #kv { margin-bottom: 0; }
  #kvcontents { margin-bottom: 0; }
  #kvcontents header h1 { width: 538px;/* height: 478px;*/}
  #kvcontents header a[data-eventTrack='order-top'] {/* top: 390px;*/}
  #kvcontents header p.kv-btn { top: 390px; }
  #kvcontents a.twitterbtn { bottom: inherit; top: 750px; }
  #kvcontents a.moviemodal { right: 16px; }
  #kvcontents p.catch { width: 168px; height: 798px; top: 0px; }
  #kvcontents p.kv-btn { top: 444px; }
  
  /* intro */
  #introduction { height: 1088px; }
  #introduction span.bg01 { width: 85vw; height: 300px; left: 50%; margin-left: -560px; }
  #introduction span.bg02 { width: 26.5vw; height: 20.1875vw; top: 960px; }
  #introduction .wrap { width: 1400px; padding: 170px 700px 0 0; }
  #introduction .clip h2 { font-size: 100px; margin-bottom: 97px; }
  #introduction .clip p { font-size: 30px; line-height: 72px; }
  #introduction .clip p b { font-size: 43px; }
  #introduction .clip p + p { margin-top: 40px; }
  #introduction div.img { width: 800px; height: 923px; top: 58px; }
  #introduction div.img i { height: 1415px; bottom: -300px; }
  /* world */
  #world .text { padding-right: 45px; }
  #world .text h2 { font-size: 116px; margin: 77px 0 25px 0; }
  #world .text p { font-size: 26px; line-height: 50px; }
  #world .text p span { top: -13px; width: 50px; left: 5px; height: 2px; border-radius: 1px; }
  #world .img { margin-bottom: 70px; }
  /* #character */
  #characters { padding-top: 222px; }
  #characters .bg01 { top: 345px; }
  #characters span.bg02 { width: 93.75vw; top: 422px; }
  #characters span.chara { margin: 328px 0 0 -548px; }
  #characters .wrap h2 { font-size: 100px; top: -40px; }
  #characters .wrap header { padding: 65px 58px; }
  #characters .wrap header h3 { font-size: 140px; line-height: 118px; margin-bottom: 9px; }
  #characters .wrap header p { margin-bottom: 35px; }
  #characters .wrap div.text p + p { margin-top: 38px; }
  /* #system */
  #system { padding-top: 90px; position: relative; font-size: 0; line-height: 1; }
  #system span.bg01 { width: 1110px; position: absolute; left: 0; top: 180px; }
  #system span.bg02 { width: 57.0625vw; height: 32.125vw; top: 90px; }
  #system .wrap { height: 36.25vw; padding-top: 35px; }
  #system .wrap h2 { font-size: 108px; margin-bottom: 45px; }
  #system .wrap h3 { font-size: 35px; margin-bottom: 30px; }
  #system .wrap p { font-size: 18px; line-height: 38px; }
  #system .wrap p + p { margin-top: 18px; }
  /* bg_cloud */
  .bg_cloud { /* creators */ }
  .bg_cloud h2 { font-size: 89px; }
  .bg_cloud #creators .wrap div span h3 b { font-size: 45px; }
  .bg_cloud #creators .wrap div span p { padding: 0 75px 0; } }
/* ie11 */
.ie11 #topics .wrap h2 { color: #fff; text-shadow: -1px -1px 0 #0961ba, 1px -1px 0 #0961ba, -1px 1px 0 #0961ba, 1px 1px 0 #0961ba; }
.ie11 #introduction .clip h2 { color: #fff; text-shadow: -1px -1px 0 #0961ba, 1px -1px 0 #0961ba, -1px 1px 0 #0961ba, 1px 1px 0 #0961ba; }
.ie11 #introduction .clip p { background: none; color: #0961ba; }
.ie11 #world h2 { color: #fff; text-shadow: -1px -1px 0 #0961ba, 1px -1px 0 #0961ba, -1px 1px 0 #0961ba, 1px 1px 0 #0961ba; }
.ie11 #characters h2 { color: #fff; text-shadow: -1px -1px 0 #0961ba, 1px -1px 0 #0961ba, -1px 1px 0 #0961ba, 1px 1px 0 #0961ba; }
.ie11 #system h2 { color: #fff; text-shadow: -1px -1px 0 #0961ba, 1px -1px 0 #0961ba, -1px 1px 0 #0961ba, 1px 1px 0 #0961ba; }
.ie11 #creators h2 { color: #fff; text-shadow: -1px -1px 0 #0961ba, 1px -1px 0 #0961ba, -1px 1px 0 #0961ba, 1px 1px 0 #0961ba; }
.ie11 #products h2 { color: #fff; text-shadow: -1px -1px 0 #0961ba, 1px -1px 0 #0961ba, -1px 1px 0 #0961ba, 1px 1px 0 #0961ba; }
/* noluxy */
.noluxy { /* #character */ }
.noluxy #introduction div.img i { bottom: -6.75px; }
.noluxy #world .img i { bottom: -18.75px; }
.noluxy #characters .bg01 { top: 165px; }
.noluxy #characters .bg01 i { bottom: -442px; }
.noluxy #characters span.chara { margin: 51px 0 0 -548px; }
@media screen and (min-width: 1201px) { .noluxy { /* #character */ }
  .noluxy #introduction div.img i { bottom: -0.5625vw; }
  .noluxy #world .img i { bottom: -1.5625vw; }
  .noluxy #characters .bg01 { top: 13.75vw; }
  .noluxy #characters .bg01 i { bottom: -442px; }
  .noluxy #characters span.chara { margin: 4.25vw 0 0 -548px; } }
@media screen and (min-width: 1601px) { .noluxy { /* #character */ }
  .noluxy #introduction div.img i { bottom: -9px; }
  .noluxy #world .img i { bottom: -25px; }
  .noluxy #characters .bg01 { top: 220px; }
  .noluxy #characters .bg01 i { bottom: -442px; }
  .noluxy #characters span.chara { margin: 68px 0 0 -548px; } }
@media screen and (min-width: 641px) and (max-width: 640px) {
/*  	TB/SP STYLE  *************************************************************/ }
@media screen and (max-width: 640px) {
/*  	SP STYLE  *************************************************************/
  #spmenu.update a::before{content: ''; background: url("../img/menu_update.png") left top no-repeat; background-size: cover; width: calc(36/640*100vw); height: calc(36/640*100vw); position: absolute; left: 0; top: 0; z-index: 10; margin: calc(-12/640*100vw) 0 0 calc(-16/640*100vw); opacity: 0;}
.windowloaded #spmenu.update a::before{
opacity: 1;
animation: anim-scale 0.4s ease-out;
transform-origin: 50% 50%;
}
.siteheader nav .scroll a:nth-child(1) i { opacity: 1; }
  /* contents */
  /* bgm */
  #bgm { width: 81.25vw; height: 12.8125vw; position: absolute; right: 9.375vw; top:220.25vw; background: none; font-family: "M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; }
  #bgm::after { content: ''; width: 100%; height: 100%; border: 1px solid #0961ba; background: rgba(251, 249, 248, 0.9); border-radius: 6.40625vw; position: absolute; left: 0; top: 0; opacity: 0.8; z-index: -1; }
  #bgm .ui { height: 12.8125vw; }
  #bgm .ui .status { left: 62.5vw; top: 2.65625vw; }
  #bgm .ui .status a img { width: 7.03125vw; height: auto; }
  #bgm .ui .prev { left: 71.875vw; top: 0.78125vw; }
  #bgm .ui .prev img, #bgm .ui .next img { width: 3.75vw; height: auto; }
  #bgm .ui .next { left: 71.875vw; top: 4.53125vw; }
  #bgm .bgmtitle { font-size: 3.125vw; line-height: 12.8125vw; height: 12.8125vw; width: 48.125vw; left: 7.03125vw; top: 0; }
  #bgm .bgmtitle span { line-height: 12.8125vw; width: 48.125vw; }
  .bgmmin #bgm .ui .status { left: 69.53125vw !important; }
  /* kv */
  #kv { display: none; margin-bottom: calc(61/640*100vw);}
  #kv #bgmovie { display: none; }
  #kv #bgmoviewrap { display: none; }
  #kvcontents { position: relative; height:296vw; z-index: 200; width: 100vw; font-size: 0;  margin-bottom: calc(61/640*100vw);}
  #kvcontents::after { content: ''; background: url("../img/top/kv-sp.jpg") center top no-repeat; background-size: 100vw auto; width: 100%; height: 100%; }
  #kvcontents .grade { width: 100vw; height: 22.8125vw; position: absolute; left: 0; bottom: 57.8125vw; overflow: hidden; z-index: -1; }
  #kvcontents .grade::after { content: ''; width: 200%; height: 230%; position: absolute; left: -50%; top: -65%; background: #fffcbc; background: -webkit-linear-gradient(left, #fffcbc 32%, #8cd3f0 55%); background: -o-linear-gradient(left, #fffcbc 32%, #8cd3f0 55%); background: linear-gradient(to right, #fffcbc 32%, #8cd3f0 55%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcbc', endColorstr='#8cd3f0',GradientType=1 ); transform: rotate(-16deg); }
  #kvcontents header h1 { position: absolute; left: 0; top: 9.225vw; }
  #kvcontents header h1 img { width: 100vw; height: auto; }
  #kvcontents header a[data-eventTrack='order-top'] { display: block; background: url("../img/top/btn_preordernow-sp.png") no-repeat left top/cover; width: 53.125vw; height: 13.59375vw; font-size: 0; position: absolute; left: 50%; top: 56.8625vw; margin-left: -26.5625vw; }
  #kvcontents header a[data-eventTrack='order-top']:hover::after { opacity: 1; transition: opacity 0.2s; }
  
  #kvcontents ul.bnrs {padding: calc(14/640*100vw) 0 0; display: inline-flex; justify-content: flex-start; flex-direction: column; position: absolute; left: 50%; top: 69.2965vw; margin-left: -26.5625vw;}
  #kvcontents ul.bnrs li + li {margin:calc(7/640*100vw) 0 0;}
  #kvcontents ul.bnrs a{height: calc(58/640*100vw); margin: 0; width: 53.125vw; position: relative; display: block; color: #fff; font-size: calc(24/640*100vw); line-height: 1; transition: color 0.3s;}
  #kvcontents ul.bnrs a span {position: relative; z-index: 10; display: block; padding: calc(20/640*100vw) 0 0; letter-spacing: 0.15em;}
  #kvcontents ul.bnrs a::after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("../img/top/btn_kvother.jpg") no-repeat left top; z-index: 0; background-size: cover;}
	
  #kvcontents ul li.bnr1 {top: calc(10 / 640 * 100vw ); /*left: calc(-108 / 640 * 100vw );*/ position: absolute; margin: 0!important;} 
  #kvcontents ul li.bnr1 a{width:/*calc(560 / 640 * 100vw )*/53.125vw;} 
  #kvcontents ul li.bnr1 a::after{ background: none;} 
  #kvcontents ul li.bnr1 a span { padding: calc(5/640*100vw) 0 0; } 

  #kvcontents ul li.bnr2 {top: calc(540 / 640 * 100vw ); left: calc(-108 / 640 * 100vw ); position: absolute; margin: 0!important;}	
  #kvcontents ul li.bnr2 a{width:calc(560 / 640 * 100vw );}	
  #kvcontents ul li.bnr2 a::after{ background: none;}	
	
  #kvcontents ul li.bnr3 {top: calc(640 / 640 * 100vw ); left: calc(-108 / 640 * 100vw ); position: absolute; margin: 0!important;}	
  #kvcontents ul li.bnr3 a{width:calc(560 / 640 * 100vw );}	
  #kvcontents ul li.bnr3 a::after{ background: none;}		

  #kvcontents ul li.bnr4 {top: calc(740 / 640 * 100vw ); left: calc(-108 / 640 * 100vw ); position: absolute; margin: 0!important;} 
  #kvcontents ul li.bnr4 a{width:calc(560 / 640 * 100vw );} 
  #kvcontents ul li.bnr4 a::after{ background: none;}   
  
  #kvcontents a.twitterbtn { font-size: 2.8125vw; height: 15.9375vw; line-height: 6.5625vw; width: 30.9375vw; color: #fff; display: block; position: absolute; right: 0; top: 137.8125vw; transform: rotate(90deg); transform-origin: right top; letter-spacing: 0.1em; z-index: 100; }
  #kvcontents a.twitterbtn::after { content: ''; width: 30.9375vw; height: 6.5625vw; background: #0961ba; position: absolute; left: 0; top: 0; z-index: -1; }
  #kvcontents a.moviemodal { position: absolute; right: 6.25vw; bottom: 0; overflow: hidden; background: #000; }
  #kvcontents a.moviemodal img { width: 87.5vw; height: auto; position: relative; z-index: 100; }
  #kvcontents p.platform { display: none; }
  #kvcontents p.award { position: absolute; left: -37vw; bottom: 143vw; overflow: hidden; }
  #kvcontents p.award img { width: 110vw; }
  #kvcontents p.kv-btn { display: block; width: 53.125vw; height: 13.59375vw; font-size: 0; position: absolute; left: 50%; top: 61.5625vw; margin-left: -26.5625vw; }
  #bgmoviesp { position: absolute; left: 0; top: 0; opacity: 1; transition: opacity 1s 0.5s ease-out; z-index: 0; width: 100%; height: 100%; }
  #bgmoviewrapsp { position: absolute; width: 100%; height: 100%; transform: scale(1.05); left: 0; top: 0; z-index: 0; }
  #bgmoviewrapsp::after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; }
  .youtubeloaded #bgmoviesp { opacity: 1; }
  
  #kvcontents .updatearr {bottom:calc(1000 / 640 * 100vw ); position: absolute; }
  
  /* topics */
  #topics { color: #0961ba; font-size: 0; line-height: 1; min-height: inherit; background: url("../img/top/topics-sp.jpg") center top no-repeat; background-size: cover; position: relative; z-index: 100; margin-bottom: 0; padding-bottom: calc(65/640*100vw);}
  #topics .wrap h2 { -webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px; font-size: calc(81/640*100vw); color: transparent; letter-spacing: 0.02em; padding: calc(60/640*100vw) 0 calc(58/640*100vw);}
  #topics .topics {width: calc(560/640*100vw); margin: 0 auto;}
  #topics .topics .topic {width: 100%; background: rgba(255,255,255,0.8); text-align: left; border: 1px solid #0961ba; margin: 0 0 calc(30/640*100vw); position: relative;}
  #topics .topics .topic time {z-index: 10; position: absolute; left: 0; top: 0; font-size: calc(81/640*100vw); color:#d8245b; font-size: calc(21/640*100vw); width: calc(140/640*100vw); height: calc(28/640*100vw); background: #fffba7; text-align: center; padding: calc(5/640*100vw) 0 0;}
  #topics .topics .topic p {font-size: calc(19/640*100vw); line-height: calc(38/640*100vw); padding: calc(18/640*100vw) calc(28/640*100vw); letter-spacing: 0; font-family: "M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; transform: rotate(0.05deg);}
  #topics .topics .topic p a{text-decoration: underline;}
  #topics .topics .topic p a:hover{text-decoration: none;}
  #topics .topics .topic i a{transition: opacity 0.3s; position: relative; display: block;}
  #topics .topics .topic i a[target*='blank']::after{content: ''; width: calc(50/640*100vw); height: calc(50/640*100vw); position: absolute; right: calc(10/640*100vw); top: calc(10/640*100vw); z-index: 20; background: url("../img/icon_blank.png") no-repeat center / cover  rgba(255,255,255,1); border:1px solid #0961ba; border-radius: 100%;}
  #topics .topics .topic i a:hover{opacity: 0.7;}
  #topics  a.btn {width: calc(300/640*100vw); height: calc(56/640*100vw); margin: calc(23/640*100vw) auto 0; font-size:calc(32/640*100vw); padding-top: calc(10/640*100vw);}
  /* intro */
  #introduction { position: relative; font-size: 0; line-height: 1; height: calc(960/640*100vw); z-index: 0;}
  #introduction span.bg { display: block; position: absolute; right: 0; top: 0; z-index: -1; }
  #introduction span.bg01 { width: 33.4375vw; position: absolute; right: 0; top: -29.6875vw; z-index: -1; height: 95.3125vw; overflow: hidden; }
  #introduction span.bg01::after { content: ''; width: 180%; height: 180%; position: absolute; left: -40%; top: -40%; background: #fffcbc; background: -webkit-linear-gradient(left, #fffcbc 20%, #7db9e8 100%); background: -o-linear-gradient(left, #fffcbc 20%, #7db9e8 100%); background: linear-gradient(to right, #fffcbc 20%, #7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcbc', endColorstr='#7db9e8',GradientType=1 ); transform: rotate(-13deg); }
  #introduction span.bg02 { width: 62.1875vw; position: absolute; left: 0; top: 125vw; z-index: -1; height: 62.1875vw; overflow: hidden; }
  #introduction span.bg02::after { content: ''; position: absolute; left: -20%; top: -25%; width: 140%; height: 150%; background: #fffcbc; background: -webkit-linear-gradient(left, #fffcbc 20%, #7db9e8 100%); background: -o-linear-gradient(left, #fffcbc 20%, #7db9e8 100%); background: linear-gradient(to right, #fffcbc 20%, #7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcbc', endColorstr='#7db9e8',GradientType=1 ); transform: rotate(-209deg); }
  #introduction .wrap { padding: 17.1875vw 0 0; margin: 0 auto; }
  #introduction .clip h2 { -webkit-text-stroke-color: #0961ba; -webkit-text-stroke-width: 1px; font-size: 15.625vw; color: transparent; letter-spacing: 0.05em; margin-bottom: 6.25vw; }
  #introduction .clip p { font-size: 4.6875vw; line-height: 12.96875vw; background-image: url("../img/bg_gradetext.jpg"); background-position: center center; -webkit-background-clip: text; color: transparent; font-weight: bold; }
  #introduction .clip p b { font-size: 6.71875vw; font-weight: bold; }
  #introduction .clip p + p { margin-top: 4.6875vw; }
    #introduction  a.btn {width: calc(278/640*100vw); height: calc(62/640*100vw); margin: calc(30/640*100vw) auto 0; font-size:calc(23/640*100vw); padding-top: calc(20/640*100vw);}

  /* world */
  #world { color: #fff; font-size: 0; line-height: 1; padding-bottom: 19.53125vw; }
  #world .text { position: absolute; left: 0; top: 0; text-align: left; padding: 10.9375vw 5.46875vw; z-index: 10; }
  #world .text h2 { -webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px; font-size: 18.4375vw; color: transparent; letter-spacing: 0.02em; margin: 0vw; }
  #world .text p { font-size: 4.0625vw; line-height: 7.8125vw; color: #fff; }
  #world .text p span { letter-spacing: -0.35em; position: relative; left: 0em; }
  #world .img { position: relative; height: 123.4375vw; overflow: hidden; z-index: 0; margin-bottom: 8.59375vw; }
  #world .img i { background: url("../img/top/world-sp.jpg") center top no-repeat; width: 225vw; display: block; height: 123.4375vw; position: absolute; left: 0vw; top: 0; background-size: auto 100%; transition: left 6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1s ease-out, opacity 1s; filter: brightness(3); opacity: 0; }
  #world .img img { width: 225vw; height: 123.4375vw; opacity: 1; }
  #world span.bg { display: block; position: absolute; left: 0; bottom: 9.84375vw; z-index: -1; }
  #world span.bg01 { width: 81.25vw; z-index: -1; height: 68.75vw; overflow: hidden; }
  #world span.bg01::after { content: ''; width: 120%; height: 180%; position: absolute; left: -20%; top: -40%; background: #fffcbc; background: -webkit-linear-gradient(left, #fffcbc 20%, #8cd4f0 100%); background: -o-linear-gradient(left, #fffcbc 20%, #8cd4f0 100%); background: linear-gradient(to right, #fffcbc 20%, #8cd4f0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcbc', endColorstr='#8cd4f0',GradientType=1 ); transform: rotate(74deg); }
  #world.animated .img i { left: -34.375vw; filter: brightness(1); opacity: 1; }
    #world  a.btn {width: calc(278/640*100vw); height: calc(62/640*100vw); margin: calc(20/640*100vw) auto 0; font-size:calc(23/640*100vw); padding-top: calc(20/640*100vw); float: left; text-align: center;}

  /* #character */
  #characters { position: relative; font-size: 0; line-height: 1; height: 223.75vw;}
  #characters span.chara { width: 145.78125vw; height: 170.78125vw; position: absolute; left: -6.25vw; top: 29.21875vw; z-index: 10; }
  #characters .wrap { margin: 0 auto; width: 100%; position: static; z-index: 100; }
  #characters .wrap h2 { -webkit-text-stroke-color: #0961ba; -webkit-text-stroke-width: 1px; font-size: 15.625vw; color: transparent; letter-spacing: 0.02em; text-align: right; padding: 6.25vw 1.5625vw 0 0; margin-bottom: 6.09375vw; }
  #characters .wrap header { text-align: left; padding: 0 0 0 6.25vw; }
  #characters .wrap header h3 { font-size: 20.3125vw; line-height: 16.40625vw; text-shadow: 0 0 1.875vw #5dccff, 0 0 1.875vw #5dccff; color: #fff; margin-bottom: 0.78125vw; }
  #characters .wrap header p { font-size: 3.4375vw; text-shadow: 0 0 1.875vw #5dccff, 0 0 1.875vw #5dccff; color: #fff; margin-bottom: 5.9375vw; }
  #characters .wrap dl { display: table; color: #fff; line-height: 1; border: 1px solid #fff; }
  #characters .wrap dl dt { padding: 0.9375vw 1.5625vw 0.15625vw; border: none; background: #fff; color: #0961ba; font-size: 4.0625vw; font-weight: bold; display: table-cell; }
  #characters .wrap dl dd { padding: 1.25vw 2.34375vw 0.46875vw; border: none; font-size: 3.4375vw; letter-spacing: 0.15em; display: table-cell; }
  #characters .wrap .text { background: rgba(255, 255, 255, 0.8); z-index: 100; width: 51.5625vw; text-align: left; position: relative; margin: 6.25vw 0 0; padding: 0.9375vw 0.9375vw 0.9375vw 0; }
  #characters .wrap .text div { padding: 5.46875vw 5.46875vw; position: relative; }
  #characters .wrap .text div::after { content: ''; width: 100%; height: 100%; border: 1px solid #0961ba; position: absolute; left: 0; top: 0; border-left: none; }
  #characters .wrap .text p { font-size: 3.125vw; line-height: 5.78125vw; letter-spacing: 0.03em; }
  #characters .wrap .text p b { background: linear-gradient(transparent 0%, #fffba7 0%); display: inline-block; line-height: 1; position: relative; }
  #characters .wrap .text p b:before { content: ''; background: linear-gradient(transparent 0%, #fffba7 0%); position: absolute; left: 0; top: -5px; width: 100%; height: 110%; z-index: -1; }
  #characters .wrap .text p span { letter-spacing: -0.5em; }
  #characters .wrap .text p + p { margin-top: 5.625vw; }
  #characters  a.btn {width: calc(345/640*100vw); height: calc(62/640*100vw); margin: calc(20/640*100vw) 0 calc(-74/640*100vw) calc(106/640*100vw); font-size:calc(23/640*100vw); padding-top: calc(20/640*100vw); text-align: center; position: relative; z-index: 100;}
  #characters .swiper-container { position: absolute; right: 0; bottom: 10.9375vw; width: 100vw; z-index: 100; }
  .windowloaded #characters { background: url("../img/top/bg_character-sp.jpg") center top no-repeat; background-size: 100% auto; }
  .windowloaded #characters span.chara { background: url("../img/top/chara.png") left top no-repeat; background-size: cover; }
  /* #system */
  #system { padding-top: 13.28125vw; position: relative; font-size: 0; line-height: 1; z-index: 100; }
  #system span.bg01 { width: 90.625vw; position: absolute; left: 0; top: 19.53125vw; z-index: -1; height: 143.75vw; overflow: hidden; }
  #system span.bg01::after { content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: #fffcbc; background: -webkit-linear-gradient(left, #fffcbc 20%, #8cd3f0 100%); background: -o-linear-gradient(left, #fffcbc 20%, #8cd3f0 100%); background: linear-gradient(to right, #fffcbc 20%, #8cd3f0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcbc', endColorstr='#8cd3f0',GradientType=1 ); transform: rotate(-45deg); }
  #system span.bg02 { width: 87.03125vw; height: 49.0625vw; background: url("../img/top/system/SS10-sp.jpg") left top no-repeat; background-size: cover; position: absolute; right: 0; top: 35.46875vw; background-size: cover; }
  #system .wrap { text-align: left; padding: 82.8125vw 0 8.125vw 5.46875vw; }
  #system .wrap h2 { font-size: 16.875vw; -webkit-text-stroke-color: #0961ba; -webkit-text-stroke-width: 1px; color: #fff; color: transparent; margin-bottom: 0vw; position: absolute; left: 6.25vw; top: 0; }
  #system .wrap h3 { font-size: 5.46875vw; font-weight: bold; margin-bottom: 5.46875vw; }
  #system .wrap p { font-size: 3.125vw; line-height: 5.9375vw; letter-spacing: 0.05em; padding-right: 15.625vw; }
  #system .wrap p + p { margin-top: 3.75vw; }
  #system .wrap p b{font-weight: bold;}
  #system .slide03 { position: absolute; right: 0; bottom: -49.0625vw; }
  /* bg_cloud */
  .bg_cloud { line-height: 1; padding-bottom: 20.3125vw; position: relative; z-index: 0; /* creators */ /* products */ }
  .bg_cloud h2 { font-size: 13.90625vw; -webkit-text-stroke-color: #0961ba; -webkit-text-stroke-width: 1px; color: #fff; color: transparent; }
  .bg_cloud #creators { padding: 62.96875vw 0 0; }
  .bg_cloud #creators .wrap { width: 100%; margin-top: 6.25vw; }
  .bg_cloud #creators .wrap div { padding: 2.34375vw; background-repeat: no-repeat; background-position: center top; background-size: cover; background-image: url("../img/top/bg_creators01.jpg"); display: flex; height: 54.6875vw; }
  .bg_cloud #creators .wrap div + div { background-image: url("../img/top/bg_creators02.jpg"); }
  .bg_cloud #creators .wrap div span { border: 1px solid #0961ba; display: block; height: 49.375vw; padding: 8.59375vw 0 0; }
  .bg_cloud #creators .wrap div span h3 { font-size: 3.75vw; }
  .bg_cloud #creators .wrap div span h3 b { font-size: 5.78125vw; display: block; background: rgba(255, 255, 255, 0.6); margin: 1.5625vw 0 3.90625vw; padding: 1.09375vw 0 1.5625vw; height: 7.8125vw; font-family: "M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; }
  .bg_cloud #creators .wrap div span p { font-size: 2.5125vw; line-height: 5.3125vw; text-align: left; padding: 0 4.06875vw 0; transform: rotate(0.05deg); font-family: "M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; letter-spacing: 0;}
  .bg_cloud #products { padding: 14.84375vw 0 0; }
  .bg_cloud #products h2 { margin-bottom: 3.125vw; }
  .bg_cloud #products .btns { margin: 0 0 0; display: flex; justify-content: center; padding: 1.40625vw 0 0; }
  .bg_cloud #products .btns a { display: block; width: 45vw; height: 8.59375vw; font-size: 3.4375vw; transition: 0.2s; color: #fff; position: relative; margin: 0 1.25vw; padding: 2.8125vw 0 0; }
  .bg_cloud #products .btns a::before { content: ''; background: url("../img/top/bg_btns.png") left top no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background-size: 100% auto; }
  .bg_white { background: #fff; position: relative; z-index: 100; }
  .bg_cloud_fixed { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; }
  .windowloaded .bg_cloud_fixed { background: url("../img/top/bg_cloud-sp.jpg") center bottom no-repeat; z-index: 0; background-size: 100vw 100vh; } }
/* animations
*/
#kv, #kvcontents { transform: translateY(0); opacity: 0; transition:opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(7px) brightness(2); }
@media screen and (max-width: 640px) {
  #kv { transform: translateY(0); opacity: 0; transition: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(7px) brightness(1.8); }
  #kvcontents { transform: translateY(0); opacity: 0; transition: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(7px) brightness(1.8); }
  #kvcontents .moviemodal { transform: translateY(60px); opacity: 0; transition: 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(10px); }
  #bgm { transform: translateY(0px); opacity: 0; transition: 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(10px); }
}
.imgloaded #kv, .imgloaded #kvcontents, .imgloaded #bgm { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
.imgloaded #kv .animated, .imgloaded #kvcontents .animated, .imgloaded #bgm .animated { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }

#introduction .wrap { transform: translateY(60px); opacity: 0; transition: 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(10px); }
#introduction.animated .wrap { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
#topics { transform: translateY(0); opacity: 0; transition: 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(10px); }
#topics.animated { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
#world { transform: translateY(60px); opacity: 0; transition: 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(10px); }
#world .swiper-container { transform: translateY(60px); opacity: 0; transition: 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(10px); }
#world.animated { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
#world.animated .swiper-container.animated { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
#characters { transform: translateY(60px); opacity: 0; transition: 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(10px); }
#characters.animated { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
#system { transform: translateY(60px); opacity: 0; transition: 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(10px); }
#system .swiper-container { transform: translateY(60px); opacity: 0; transition: 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(10px); }
#system.animated { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
#system.animated .swiper-container.animated { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
#creators { transform: translateY(60px); opacity: 0; transition: 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(10px); }
#creators.animated { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
#products { transform: translateY(60px); opacity: 0; transition: 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(10px); }
#products.animated { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }