@charset "utf-8";

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

#wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/system/intro-bg.png) no-repeat center top;}

/*モーダル*/
main section a.colorboxmodal{position:absolute; left:50%; display:block;}
main section a.colorboxmodal::before{content:''; background:rgba(255,255,255,0.2); width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; transition: 0.5s;}
main section a.colorboxmodal::after{content:''; position:absolute; bottom:0; right:0; width:36px; height:36px; background:url(../images/common/icon_zoom.png) left top no-repeat;}
main section a.colorboxmodal:hover::before{opacity:1; transition:1s;}

/*モーダルスライダー*/
.swiper-container{overflow:hidden; position:absolute; top:140px; left:50%; width:742px; margin-left:-108px; transition:margin-left 0.5s;}
.swiper-wrapper{text-align:center;}
.swiper-slide{font-size:0; line-height:1;width:100%; height:auto;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
.swiper-slide .item{position:relative; display:block; z-index:10;}
.swiper-slide .item img{transition:opacity 0.2s; opacity:0; backface-visibility:hidden;}
.swiper-slide .item a{position:absolute; top:22px; left:35px; display:block; width:672px; height:378px; z-index:10; opacity:0;}
.swiper-slide .item a:hover + img{opacity:0.7;}
.swiper-slide .item a:after{content:''; position:absolute; right:0; bottom:0; width:36px; height:36px; background:url(../images/characters/btn-zoom.jpg) no-repeat left top / 100% auto; z-index:10;}
.swiper-slide.swiper-slide-active .item img,
.swiper-slide.swiper-slide-active .item a{opacity:1;}
.swiper-container nav{position:relative; display:block; width:100%; margin-top:-14px; padding:0; height:37px; text-align:center; vertical-align:middle; z-index:1;}
.swiper-pagination{position:relative; margin:0; transition:none; z-index:100; display:inline-block; width:auto!important; vertical-align:top;}
.swiper-pagination-bullet{background:#694a86; width:13px; height:13px; margin:0 7px; opacity:1; cursor:pointer; vertical-align:top; transition:0.3s; border-radius:100%; padding:0;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{background:#d94a99;}
.swiper-button-prev{position:static; display:inline-block; width:23px; height:23px; background:url(../images/characters/btn-slide-prev.png); background-size:100% auto; vertical-align:middle; margin-top:-5px; margin-right:25px; transition:0.3s;}
.swiper-button-next{position:static; display:inline-block; width:23px; height:23px; background:url(../images/characters/btn-slide-next.png); background-size:100% auto; vertical-align:middle; margin-top:-5px; margin-left:25px; transition:0.3s;}
.swiper-pagination-bullet:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover{opacity:0.7;}
#cboxPrevious,
#cboxNext,
#cboxSlideshow{border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:40px; height:40px; position:absolute; top:-20px; background:url(../images/common/controls.png) no-repeat 0 0;}
#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active{outline:0;}
#cboxNext{right:57px; top:-50px; width:35px; height:35px; background:url(../images/characters/btn-slide-next.png) no-repeat left center / 100% auto; transition:0.5s;}
#cboxPrevious{right:112px; top:-50px; width:35px; height:35px; background:url(../images/characters/btn-slide-prev.png)  no-repeat left center / 100% auto; transition:0.5s;}
#cboxPrevious:hover,
#cboxNext:hover{opacity:0.7;}


/*--------------------

アルケミリドル

--------------------*/
#wrapper{padding-top:181px;}
main{padding-bottom:103px;}
main h1{position:absolute; top:-90px; left:50%; width:283px; height:113px; margin-left:-600px; background:url(../images/system/title.png) no-repeat left top; z-index:101;}
#wrapper section{max-width:1400px; width:100%; min-width:1200px;}
/*intro*/
main #intro{position:relative; width:1200px; margin:0 auto 50px;}
main #intro::before{content:''; position:absolute; top:6px; right:-148px; width:882px; height:1118px; background:url(../images/system/chara.png) no-repeat left top; z-index:-1;}
main #intro > p{width:699px; height:207px; margin-bottom:54px; padding:47px 40px 20px; letter-spacing:-0.03em; font-size:19px; text-align:left; line-height:34px; background:rgba(255,255,255,0.8);}
main #intro div{width:600px;}
main #intro div h2{width:319px; height:53px; margin-bottom:22px; background:url(../images/system/title02.png) no-repeat left top;}
main #intro div p{font-size:17px; text-align:left; line-height:32px;}
#sec01 p,#sec02 p,#sec03 p{line-height:32px; font-size:17px; text-align:left;}
/*sec01*/
#sec01{height:582px; margin-bottom:63px;}
#sec01::before{content:''; position:absolute; top:139px; left:0; width:100%; height:100%; background:url(../images/system/sec01-bg.png) no-repeat center top;}
#sec01 h3{position:relative; width:662px; height:150px; margin-left:104px; background:url(../images/system/sec01-title.png) no-repeat left top;}
#sec01 p{position:absolute; top:82px; left:330px;}
#sec01 a.colorboxmodal{top:174px; width:727px; height:409px; margin-left:-601px;}
/*sec02*/
#sec02{height:1640px;}
#sec02::before{content:''; position:absolute; top:113px; left:0; width:100%; height:100%; background:url(../images/system/sec02-bg.png) no-repeat center top;}
#sec02 h3{position:relative; width:793px; height:138px; margin:0 0 46px 282px; background:url(../images/system/sec02-title.png) no-repeat left top;}
#sec02 p:first-of-type{width:349px; margin-left:150px;}
#sec02 p:nth-of-type(2){position:absolute; top:609px; left:721px; width:460px;}
#sec02 a.colorboxmodal:first-of-type{top:142px; width:733px; height:412px; margin-left:-145px;}
#sec02 a.colorboxmodal:nth-of-type(2){top:495px; width:571px; height:321px; margin-left:-595px; z-index:2;}
#sec02 a.colorboxmodal:nth-of-type(3){top:771px; width:767px; height:431px; margin-left:-113px; z-index:1;}
#sec02 a.colorboxmodal:nth-of-type(4){top:1082px; width:603px; height:339px; margin-left:-599px;}
/*sec03*/
#sec03{height:600px; margin:-143px auto 38px;}
#sec03::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/system/sec03-bg.png) no-repeat center top;}
#sec03 h3{position:absolute; top:-102px; left:50%; width:432px; height:194px; margin-left:114px; background:url(../images/system/sec03-title.png) no-repeat left top;}
#sec03 p{position:absolute; top:113px; left:50%; width:490px; margin-left:100px; text-align:center;}
#sec03 a.colorboxmodal:first-of-type{top:24px; width:657px; height:370px; margin-left:-600px; z-index:1;}
#sec03 a.colorboxmodal:nth-of-type(2){top:241px; width:553px; height:311px; margin-left:46px;}
main > p{height:127px; background:url(../images/system/point-text.png) no-repeat center top;}
/*アニメーション*/
main #intro,
main #sec01,
main #sec02,
main #sec03{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);}
main #intro.animated,
main #sec01.animated,
main #sec02.animated,
main #sec03.animated{opacity:1; filter: brightness(1); transform: translateY(0);}



/*--------------------

調合

--------------------*/
.system02 #wrapper{padding-top:91px;}
.system02 main{padding-bottom:0;}
.system02 main h1{position:static; width:100%; height:113px; margin:0 0 55px 0; background:url(../images/system/system02/title.png) no-repeat center top;}
.system02 #wrapper section{max-width:inherit; width:100%; min-width:inherit;}
/*sec0201*/
#sec0201{margin-bottom:110px;}
#sec0201::before{content:''; position:absolute; top:-171px; left:0; width:100%; height:950px; background:url(../images/system/system02/chara.png) no-repeat center top; z-index:1;}
#sec0201 h2{height:108px; margin-bottom:41px; background:url(../images/system/system02/h201.png) no-repeat center top;}
#sec0201 div{width:1189px; margin:0 auto; padding:37px 0 30px; background:rgba(255,255,255,0.8);}
#sec0201 div p{position:relative; font-size:19px; line-height:34px; text-align:center; text-shadow:#fff 1px 1px 0px,#fff -1px 1px 0px,#fff 1px -1px 0px,#fff -1px -1px 0px; z-index:1;}
/*sec0202*/
/*01*/
#sec0202{max-width:1400px!important; min-width:1200px!important; margin-bottom:156px;}
#sec0202 article{position:relative; min-height:590px; margin-bottom:76px;}
#sec0202 h2{height:81px; background:url(../images/system/system02/h202.png) no-repeat center top;}
#sec0202 h3{position:absolute; top:132px; left:164px; width:361px; height:246px; background:url(../images/system/system02/h301.png) no-repeat left top;}
#sec0202 p{position:absolute; top:402px; left:96px; width:484px; height:145px; font-size:17px; line-height:32px; text-align:left;}
/*02*/
#sec0202 article:nth-of-type(2){min-height:678px; margin-bottom:19px;}
#sec0202 article:nth-of-type(2)::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/system/system02/sec02-bg.png) no-repeat center top;}
#sec0202 article:nth-of-type(2) h3{top:20px; left:831px; width:449px; height:241px; background-image:url(../images/system/system02/h302.png);}
#sec0202 article:nth-of-type(2) p{top:455px; left:50%; width:600px; height:144px; margin-left:-600px;}
#sec0202 article:nth-of-type(2) a.colorboxmodal{top:30px; width:697px; height:392px; margin-left:-600px; z-index:2;}
#sec0202 article:nth-of-type(2) a.colorboxmodal:nth-of-type(2){top:307px; width:571px; height:321px; margin-left:27px; z-index:1;}
/*03*/
#sec0202 article:nth-of-type(3){min-height:auto; margin-bottom:0;}
#sec0202 article:nth-of-type(3) h3{position:static; width:1002px; height:138px; margin:0 auto 26px; background-image:url(../images/system/system02/h303.png);}
#sec0202 article:nth-of-type(3) p{position:static; width:auto; height:auto; margin:0; font-size:17px; text-align:center; line-height:32px;}
#sec0202 article:nth-of-type(3) figure{margin:29px auto -6px;}
#sec0202 article:nth-of-type(3) a.colorboxmodal{top:311px; width:793px; height:446px; margin-left:-396px;}
/*sec0203*/
#sec0203 #sec0203-area{position:absolute; top:-150px; left:0; width:100%; height:1px; opacity:0;}
#sec0203{max-width:1400px!important; min-width:1200px!important; min-height:1673px;}
#sec0203::before{content:''; position:absolute; top:276px; left:0; width:100%; height:100%; background:url(../images/system/system02/sec03-bg.png) no-repeat center top;}
#sec0203.new::after{content:''; position:absolute; top:-47px; left:50%; width:110px; height:104px; margin-left:-456px; background:url(../images/common/icon-new.png) no-repeat left top;}
#sec0203::before{content:''; position:absolute; top:276px; left:0; width:100%; height:100%; background:url(../images/system/system02/sec03-bg.png) no-repeat center top;}
#sec0203 h2{height:183px; margin-bottom:27px; background:url(../images/system/system02/h203.png) no-repeat center top;}
#sec0203 > p:nth-of-type(1){position:relative; width:776px; margin:0 auto; padding:30px 0 30px; text-align:center; font-size:19px; line-height:34px; background:rgba(255,255,255,0.8); z-index:1;}
#sec0203 > a.colorboxmodal{top:446px; width:571px; height:321px; margin-left:33px; z-index:2;}
#sec0203 > a.colorboxmodal:nth-of-type(2){top:578px; width:672px; height:378px; margin-left:-594px; z-index:1;}
#sec0203 > p:nth-of-type(2){position:absolute; top:820px; left:50%; width:483px; margin-left:110px; font-size:17px; line-height:32px; text-align:left; letter-spacing:-0.03em;}
#sec0203 .swiper-container{top:985px; margin-left:-101px;}
#sec0203 .swiper-container + div{position:absolute; top:1110px; left:50%; width:496px; margin-left:-595px; font-size:17px; line-height:32px; text-align:left; letter-spacing:-0.03em;}
#sec0203 .swiper-container + div p + p{margin-top:31px;}
#sec0203 > p:nth-of-type(3){position:absolute; left:0; bottom:88px; width:100%; height:82px; background:url(../images/system/system02/text.png) no-repeat center top;}
/*アニメーション*/
main #sec0201,
main #sec0202 article,
main #sec0203{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);}
main #sec0201.animated,
main #sec0202 article.animated,
main #sec0203.animated{opacity:1; filter: brightness(1); transform: translateY(0);}



/*--------------------

バトル

--------------------*/
.system03 #wrapper{padding-top:91px;}
.system03 main{padding-bottom:0;}
.system03 main h1{position:absolute; width:100%; height:113px; background:url(../images/system/system03/title.png) no-repeat center top; top: 10px; left: 130px;}
.system03 #wrapper section{max-width:inherit; width:100%; min-width:inherit;}
.system03 main p{font-size:17px; line-height:32px; }
.system03 main p.caption{position:absolute; left:50%; padding:20px;  background: rgba(255,255,255,0.8); width: 550px; z-index: -10; text-align:left!important;}
/*sec06*/
#sec06{margin-bottom:110px;}
#sec06::before{content:''; position:absolute; top:-30px; left:0; width:100%; height:1200px; background:url(../images/system/system03/chara.png) no-repeat center top; z-index:1;}
#sec06 h2{height:108px; margin-bottom:70px; background:url(../images/system/system03/h201.png) no-repeat center top; margin-top: 25px;  margin-left: 78px;}
#sec06 div{width:1040px; margin:0 auto; padding:37px 0 30px; background:rgba(255,255,255,0.8);}
#sec06 div p{position:relative; font-size:19px; line-height:34px; text-align:center; text-shadow:#fff 1px 1px 0px,#fff -1px 1px 0px,#fff 1px -1px 0px,#fff -1px -1px 0px; z-index:1;}
#sec07{ position: relative; width: 1400px ; margin: 0 auto; height: 1330px;}
#sec07 h2{height:108px; margin-bottom:-10px; background:url(../images/system/system03/h202.png) no-repeat center top;}
#sec07 p{font-size:17px; line-height:32px; text-align:center; }
#sec07 .ss01{top: 192px; margin-left:-77px;}
#sec07 .ss01 + .caption{position:absolute; top:240px; margin-left:-491px;}
#sec07 .ss02{top: 370px; margin-left:-665px;}
#sec07 .ss02 + .caption{ position:absolute; top: 600px; width: 355px; margin-left:5px;}
#sec07 h3{ position:absolute; top: 694px; left:50%; margin-left:-523px;}
#sec07 h3 + .caption{ position:absolute; top: 760px; width: 530px; margin-left:-601px; padding-right: 30px;}
#sec07 .ss03{top:600px; margin-left:-112px;}
#sec08{ position: relative; width: 1400px ; margin: 0 auto;height: 700px;}
#sec08 h2 + p{ text-align: left; position:absolute; top: 160px; left: 50%; width: 496px; margin-left:108px;}
#sec08 .ss04{top:90px; margin-left:-628px;}
#sec08 .ss04 + .caption{ position:absolute; top: 320px; margin-left:59px; padding-left: 50px;}
#sec09::before{content:''; position:absolute; top:-30px; right:0; left:0; width:1400px; height:83px; margin:auto; background:url(../images/system/system03/new01.png) no-repeat center top; z-index:1;}
#sec09{ position: relative; width: 1400px ; margin: 0 auto; height: 2260px;}
#sec09 h2 {padding-top: 90px;}
#sec09 h2 + p{padding:30px 0;}
#sec09 .ss05{top:250px; right:65px;}
#sec09 .ss05 + .caption{ position:absolute; top: 290px; margin-left:-600px;}
#sec09 .ss05 + .caption + p{ position:absolute; top: 410px; left: 50%; text-align: left; width: 486px; margin-left: -580px;}
#sec09 .ss06{top: 680px; margin-left:-623px;}
#sec09 .ss06 + h3{ position:absolute; top:840px; left:50%; margin-left:117px;}
#sec09 .ss07{ position:absolute; top:1190px; left:50%; margin-left:-630px;}
#sec09 .ss07 + p{ position:absolute; top: 1205px; left: 50%; width: 520px; margin-left:65px; text-align: left;}
#sec09 .ss08{top:1470px; right:65px;}
#sec09 .ss08 + .caption{ position:absolute; top: 1630px; margin-left:-603px;}
#sec09 .caption + h3{ position:absolute; top:2000px; left:0; width:100%;}
#sec10::before{content:''; position:absolute; top:-30px; right:0; left:0; width:1400px; height:83px; margin: auto; background:url(../images/system/system03/new02.png) no-repeat center top; z-index:1;}
#sec10{ position: relative; width: 1400px ; margin: 0 auto; height: 1800px;}
#sec10 h2 {padding-top: 90px;}
#sec10 h2 + p{ text-align: left; position:absolute; top: 220px; left: 50%; width: 496px; margin-left:108px;}
#sec10 .ss09{top:150px; margin-left:-635px; z-index: 2;}
#sec10 .ss09 + h3{ position:absolute; top:600px; left:50%; margin-left: -345px;}
#sec10 .ss10{ position:absolute; top:390px; left:50%; margin-left:-36px;}
#sec10 .ss12 + h3{ position:absolute; top:1620px; left:50%; margin-left:-356px;}
#sec07 .ss01 .item a,
#sec07 .ss02 .item a,
#sec10 .ss10 .item a {width: 610px; height: 343px;}
#sec08 .ss04 .item a {top:44px;}

#sec10 .ss11{position:absolute; top:820px; left:50%; margin-left:-116px;z-index: 10;}
#sec10 .txt11{ position:absolute; top: 930px; margin-left: -530px; width: 470px; padding-right: 50px;}
#sec10 .ss12{top:1150px; margin-left:-615px; z-index: 2;}
#sec10 .ss11 + .caption{ position:absolute; top:1294px; margin-left:70px;padding-left: 50px;}
#sec10 .new{padding-top:100px;}
#sec10 .new::after{content:''; position:absolute; top:800px; left:50%; width:110px; height:104px; margin-left:-526px; background:url(../images/common/icon-new.png) no-repeat left top;}


/*アニメーション*/
main #sec06,
main #sec07,
main #sec08 article,
main #sec09 article,
main #sec10 article{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);}
main #sec06.animated,
main #sec07.animated,
main #sec08 article.animated,
main #sec09 article.animated,
main #sec10 article.animated{opacity:1; filter: brightness(1); transform: translateY(0);}



/*--------------------

探索

--------------------*/
.system04 #wrapper{padding-top:0;}
.system04 main{padding-bottom:0;}
.system04 main h1{top:131px; width:283px; height:113px; margin-left:325px; background:url(../images/system/system04/title.png) no-repeat center top;}
.system04 #wrapper section{max-width:inherit; width:100%; min-width:inherit;}
/*sec0401*/
#sec0401 p{position:absolute; top:325px; left:50%; padding:25px 38px 25px; text-align:left; font-size:17px; line-height:32px; background:rgba(255,255,255,0.8);}
/*01*/
#sec0401 .a01{min-height:1138px;}
#sec0401 .a01::before{content:''; position:absolute; top:437px; left:50%; width:474px; height:1153px; margin-left:329px; background:url(../images/system/system04/chara.png) no-repeat center top; z-index:1;}
#sec0401 .a01::after{content:''; position:absolute; top:396px; left:50%; width:1210px; height:740px; margin-left:-735px; background:url(../images/system/system04/sec01-bg.png) no-repeat left top; z-index:-1;}
#sec0401 .a01 h2{position:absolute; top:155px; left:50%; width:857px; height:108px; margin-left:-593px; background:url(../images/system/system04/h201.png) no-repeat left top;}
#sec0401 .a01 p{width:810px; margin-left:-211px; font-size:19px; line-height:34px;}
/*02*/
#sec0401 .a02{min-height:486px;}
#sec0401 .a02 p{width:640px; top:70px; margin-left:-600px; padding:28px 200px 28px 35px;}
#sec0401 .a02 p.point{top:293px; width:411px; height:79px; margin-left:-571px; padding:0; line-height:1; font-size:0; background:url(../images/system/system04/text.png) no-repeat left top;}
#sec0401 .a02 .ss01{top:0; margin-left:-137px;}
/*03*/
#sec0401 .a03{min-height:1234px;}
#sec0401 .a03 p:nth-of-type(1){top:85px; width:640px; margin-left:-133px; padding:25px 38px 25px 238px;}
#sec0401 .a03 p:nth-of-type(2){top:469px; width:640px; margin-left:-532px; padding:25px 225px 25px 38px;}
#sec0401 .a03 p:nth-of-type(3){top:856px; width:640px; margin-left:-88px; padding:25px 38px 25px 253px;}
#sec0401 .a03 figure{position:absolute; top:0; left:50%; width:742px; height:448px; margin-left:-635px; z-index:2;}
#sec0401 .a03 figure:nth-of-type(2){top:277px; margin-left:-103px; z-index:1;}
#sec0401 .a03 figure:nth-of-type(3){top:705px; margin-left:-590px;}
#sec0401 .a03 a.colorboxmodal{top:22px; width:672px; height:378px; margin-left:-600px; z-index:2;}
#sec0401 .a03 a.colorboxmodal:nth-of-type(2){top:299px; margin-left:-68px; z-index:1;}
#sec0401 .a03 a.colorboxmodal:nth-of-type(3){top:727px; margin-left:-555px;}
/*sec0402*/
#sec0402{min-height:1245px;}
#sec0402 h2{height:108px; margin-bottom:32px; background:url(../images/system/system04/h202.png) no-repeat center top;}
#sec0402 p{margin-bottom:14px; text-align:center; font-size:17px; line-height:32px;}
#sec0402 figure{width:965px; height:582px; margin:0 auto;}
#sec0402 > a.colorboxmodal{top:246px; width:875px; height:492px; margin-left:-437px;}
#sec0402 > p:nth-of-type(2){position:absolute; top:807px; left:50%; width:544px; margin-left:55px; padding:30px 35px 24px 60px; text-align:left; background:rgba(255,255,255,0.8);}
#sec0402 .ss02{top:681px; margin-left:-635px;}
/*アニメーション*/
main #sec0401 article,
main #sec0402{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);}
main #sec0401 article.animated,
main #sec0402.animated{opacity:1; filter: brightness(1); transform: translateY(0);}

}


@media screen and (min-width:1901px){
#wrapper::before{background-size:cover;}
}


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


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

/*

		SP site

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

/*モーダル*/
main section a.colorboxmodal{display:none;}

/*モーダルスライダー*/
.swiper-container{width:100%; position:relative; margin:3.281vw 0 0 0;}
.swiper-wrapper{text-align:center;}
.swiper-slide{display:flex; justify-content:center; align-items:center; width:100%; height:auto; font-size:0; line-height:1;}
.swiper-slide .item{display:block; position:relative; z-index:10;}
.swiper-slide .item img{height:auto; width:100%;}
.swiper-slide .item a{position:relative; display:block; z-index:10;}
.swiper-container nav{display:block; width:100%; height:3.594vw; margin-top:-0.781vw; padding:0; text-align:center; vertical-align:middle;}
.swiper-pagination{position:relative; margin:0; transition:none; z-index:100; display:inline-block; width:auto!important; vertical-align:middle;}
.swiper-pagination-bullet{background:#694a86; width:2.031vw; height:2.031vw; margin:0 1.094vw; opacity:1; cursor:pointer; vertical-align:top;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{background:#d94a99;}
.swiper-button-prev{background:url(../images/characters/btn-slide-prev.png) no-repeat left top / 100% auto; width:3.594vw; height:3.594vw; position:static; display:inline-block; vertical-align:middle; margin:0; margin-right:1.4rem;}
.swiper-button-next{background:url(../images/characters/btn-slide-next.png) no-repeat left top / 100% auto; width:3.594vw; height:3.594vw; position:static; display:inline-block; vertical-align:middle; margin:0; margin-left:1.4rem;}


/*--------------------

アルケミリドル

--------------------*/
#wrapper{padding-top:12.344vw;}
#wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/system/sp/intro-bg.png) no-repeat center top / 100% auto;}
main{padding-bottom:15.313vw;}
main::before{content:''; position:absolute; top:-12.344vw; left:-148px; width:129.219vw; height:170.156vw; background:url(../images/system/sp/chara.png) no-repeat left top / 100% auto;}
main h1{width:54.219vw; height:20.156vw; margin:0 auto 30px; background:url(../images/system/sp/title.png) no-repeat left top / 100% auto;}
/*intro*/
main #intro{padding-top:57.344vw;}
main #intro > p{margin-bottom:14.219vw; padding:6.25vw 8.125vw 7.5vw 6.25vw; letter-spacing:-0.03em; font-size:3.594vw; text-align:left; line-height:6.563vw; background:rgba(255,255,255,0.8);}
main #intro div{padding:0 3.125vw;}
main #intro div h2{width:49.844vw; height:8.281vw; margin-bottom:3.125vw; background:url(../images/system/title02.png) no-repeat left top / 100% auto;}
main #intro div p{font-size:3.594vw; text-align:left; line-height:6.563vw;}
#sec01 p,#sec02 p,#sec03 p{padding:0 3.125vw; letter-spacing:-0.05em; line-height:6.563vw; font-size:3.594vw; text-align:left;}
/*sec01*/
#sec01{height:146.563vw; padding-top:107.656vw;}
#sec01::before{content:''; position:absolute; top:3.125vw; left:0; width:100%; height:100%; background:url(../images/system/sp/sec01-bg.png) no-repeat left top / 100vw auto; z-index:-1;}
#sec01 h3{width:100%; height:4.531vw; margin-bottom:3.281vw; background:url(../images/system/sp/sec01-title.png) no-repeat left top / 100% auto;;}
/*sec02*/
#sec02{height:369.688vw; padding-top:97.188vw;}
#sec02::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/system/sp/sec02-bg.png) no-repeat left top / 100vw auto; z-index:-1;}
#sec02 h3{width:100%; height:4.531vw; margin-bottom:4.375vw; background:url(../images/system/sp/sec02-title.png) no-repeat left top / 100% auto;}
#sec02 p + p{margin-top:68.906vw;}
/*sec03*/
#sec03{height:188.594vw; padding-top:92.969vw;}
#sec03::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/system/sp/sec03-bg.png) no-repeat left top / 100vw auto; z-index:-1;}
#sec03 h3{width:100%; height:4.531vw; margin-bottom:3.281vw; background:url(../images/system/sp/sec03-title.png) no-repeat left top / 100% auto;}
main > p{width:100%; height:34.375vw; background:url(../images/system/sp/point-text.png) no-repeat left top / 100% auto;}
/*アニメーション*/
main #intro,
main #sec01,
main #sec02,
main #sec03{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);}
main #intro.animated,
main #sec01.animated,
main #sec02.animated,
main #sec03.animated{opacity:1; transform:translate(0);}



/*--------------------

調合

--------------------*/
.system02 #wrapper{padding-top:12.969vw;}
.system02 #wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/system/sp/system02/bg.jpg) no-repeat center top / 100% auto;}
.system02 main{padding-bottom:0;}
.system02 main::before{content:none;}
.system02 main h1{width:44.219vw; height:17.656vw; margin:0 auto 7.344vw; background:url(../images/system/system02/title.png) no-repeat left top / 100% auto;}
/*sec0201*/
#sec0201{margin-bottom:18.906vw;}
#sec0201 h2{height:15.313vw; margin-bottom:8.594vw; background:url(../images/system/sp/system02/h201.png) no-repeat center top / auto 15.313vw;}
#sec0201 div{position:relative; padding:5vw 4.688vw 5.313vw; background:rgba(255,255,255,0.8);}
#sec0201 div::before{content:''; position:absolute; top:-16.875vw; left:0; width:100vw; height:109.375vw; background:url(../images/system/sp/system02/chara.png) no-repeat center top / 100% auto;}
#sec0201 div p{position:relative; font-size:2.969vw; line-height:5.313vw; text-align:left; text-shadow:#fff 1px 1px 1px,#fff -1px 1px 1px,#fff 1px -1px 1px,#fff -1px -1px 1px; z-index:1;}
/*sec0202*/
/*01*/
#sec0202 article{position:relative; margin-bottom:17.188vw;}
#sec0202 h2{height:10.781vw; margin:0 auto 3.281vw; background:url(../images/system/sp/system02/h202.png) no-repeat left top / 100% auto;}
#sec0202 h3{width:100%; height:23.438vw; margin:0 auto 3.75vw; background:url(../images/system/sp/system02/h301.png) no-repeat left top / 100% auto;}
#sec0202 p{padding:0 4.688vw; font-size:3.125vw; line-height:5.938vw; text-align:left;}
/*02*/
#sec0202 article:nth-of-type(2){margin-bottom:8.906vw;}
#sec0202 article:nth-of-type(2)::before{content:''; position:absolute; top:25.469vw; left:0; width:100%; height:93.75vw; background:url(../images/system/sp/system02/sec02-bg.png) no-repeat left top / 100% auto;}
#sec0202 article:nth-of-type(2) h3{height:21.563vw; background-image:url(../images/system/sp/system02/h302.png);}
#sec0202 article:nth-of-type(2) p{margin-top:91.719vw;}
/*03*/
#sec0202 article:nth-of-type(3){margin-bottom:19.375vw;}
#sec0202 article:nth-of-type(3) h3{height:21.563vw; margin-bottom:1.875vw; background-image:url(../images/system/sp/system02/h303.png);}
#sec0202 article:nth-of-type(3) p{padding:0 4.688vw; font-size:3.125vw; line-height:5.938vw; text-align:left;}
#sec0202 article:nth-of-type(3) p:nth-of-type(2){font-size:3.125vw; line-height:5vw; letter-spacing:-0.08em;}
#sec0202 article:nth-of-type(3) figure{margin:2.5vw auto -6px;}
#sec0202 article:nth-of-type(3) figure img{width:100%; height:auto;}
/*sec0203*/
#sec0203 #sec0203-area{position:absolute; top:-46.875vw; left:0; width:100%; height:1px; opacity:0;}
#sec0203{min-height:328.438vw;}
#sec0203::before{content:''; position:absolute; top:47.031vw; left:0; width:100%; height:166.719vw; background:url(../images/system/sp/system02/sec03-bg.png) no-repeat center top / 100% auto;}
#sec0203.new::after{content:''; position:absolute; top:8.125vw; left:3.906vw; width:17.188vw; height:16.25vw; background:url(../images/common/icon-new.png) no-repeat left top / 100% auto;}
#sec0203 h2{width:100%; height:24.219vw; margin-bottom:4.375vw; background:url(../images/system/sp/system02/h203.png) no-repeat center top / 100% auto;}
#sec0203 > p:nth-of-type(1){position:relative; padding:4.688vw 0; text-align:center; font-size:2.969vw; line-height:5.313vw; background:rgba(255,255,255,0.8); z-index:1;}
#sec0203 > a.colorboxmodal{display:none;}
#sec0203 > p:nth-of-type(2){position:absolute; top:127.031vw; padding:0 4.688vw; font-size:3.125vw; line-height:5.938vw; text-align:left; letter-spacing:-0.03em;}
#sec0203 .swiper-container{top:181.875vw;}
#sec0203 .swiper-container + div{position:absolute; top:206.719vw; padding:0 4.688vw; font-size:3.125vw; line-height:5.938vw; text-align:left; letter-spacing:-0.03em;}
#sec0203 .swiper-container + div p + p{margin-top:5.781vw;}
#sec0203 > p:nth-of-type(3){position:absolute; left:0; bottom:0; width:100%; height:10.469vw; background:url(../images/system/sp/system02/text.png) no-repeat center top / 100% auto;}
/*アニメーション*/
main #sec0201,
main #sec0202 article,
main #sec0203{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);}
main #sec0201.animated,
main #sec0202 article.animated,
main #sec0203.animated{opacity:1; transform:translate(0);}



/*--------------------

バトル

--------------------*/
.system03 #wrapper img{width: 100%;}
.system03 #wrapper{padding-top:12.969vw;}
.system03 #wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/system/sp/system03/bg.jpg) no-repeat center top / 100% auto;}
.system03 main{padding-bottom:0;}
.system03 main::before{content:none;}
.system03 main h1{width:44.219vw; height:17.656vw; margin:0 auto 7.344vw; background:url(../images/system/system03/title.png) no-repeat left top / 100% auto;}
#sec06 div{position:relative; padding:5vw 4.688vw 5.313vw; background:rgba(255,255,255,0.8);}
#sec06 div::before{content:''; position:absolute; top:-7vw; left:0; width:100vw; height:109.375vw; background:url(../images/system/sp/system03/chara.png) no-repeat center top / 100% auto;}
#sec06 div p{position: relative; z-index: 1; width: 46vw; margin-left: 46vw; text-align:left;}
#sec06{margin-bottom:18.906vw;}
#sec06 h2{height:15.313vw; margin-bottom:8.594vw; background:url(../images/system/sp/system03/h201.png) no-repeat center top / auto 15.313vw;}
#sec07 h2{height:9.313vw; margin-bottom:8.594vw; background:url(../images/system/system03/h202.png) no-repeat center top / auto 9.313vw;}
#sec07 h3{width:64.21875vw; margin: 8vw auto 6vw;}
#sec08 {padding-top: 6vw;}
#sec09 h2{width:80vw; margin: 6vw auto;}
#sec09 .ss06 + h3{width:73vw; margin: 6vw auto;}
#sec09 .ss08 + h3{width:64.21875vw; margin: 6vw auto;}
#sec09 .caption + h3{width:90vw; margin: 6vw auto;}
#sec10 .ss09 + h3{width:88vw; margin: 6vw auto;}
#sec10 h2{width:55vw; margin: 14vw auto 6vw;}
#sec10 .ss10 + h3{width:88vw; margin: 2vw auto 8vw;}
#sec10 .new{position:relative;}
#sec10 .new::after{content:''; position:absolute; top:-11.125vw; left:0.906vw; width:17.188vw; height:16.25vw; background:url(../images/common/icon-new.png) no-repeat left top / 100% auto;}
.system03 main p{font-size:3.125vw; line-height:5.76875vw; text-align: center; margin:3.125vw;}
/*アニメーション*/
main #sec06,
main #sec07,
main #sec08 article,
main #sec09 article,
main #sec10 article{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);}
main #sec06.animated,
main #sec07.animated,
main #sec08 article.animated,
main #sec09 article.animated,
main #sec10 article.animated{opacity:1; transform:translate(0);}



/*--------------------

探索

--------------------*/
.system04 #wrapper{padding-top:12.969vw;}
.system04 main{padding-bottom:0;}
.system04 main::before{content:none;}
.system04 main h1{width:44.219vw; height:17.656vw; margin:0 auto 5.313vw; background:url(../images/system/system04/title.png) no-repeat left top / 100% auto;}
/*sec0401*/
#sec0401 p{padding:3.438vw 3.906vw 2.969vw; text-align:center; font-size:3.125vw; letter-spacing:-0.07em; line-height:5.625vw; background:rgba(255,255,255,0.8);}
/*01*/
#sec0401 .a01{min-height:118.781vw;}
#sec0401 .a01::after{content:''; position:absolute; top:51.563vw; left:0; width:100%; height:67.469vw; background:url(../images/system/sp/system04/sec01-bg.png) no-repeat left top / 100% auto; z-index:-1;}
#sec0401 .a01 h2{height:12.188vw; margin-bottom:5vw; background:url(../images/system/sp/system04/h201.png) no-repeat left top / 100% auto;}
/*02*/
#sec0401 .a02{min-height:116.25vw;}
#sec0401 .a02 p{padding:3.438vw 3.906vw 2.969vw; text-align:center; font-size:3.125vw; letter-spacing:-0.07em; line-height:5.625vw; background:rgba(255,255,255,0.8);}
#sec0401 .a02 p{position:relative; padding:4.219vw 4.688vw 25.938vw;}
#sec0401 .a02 p.point{position:absolute; top:30.625vw; width:100%; height:12.344vw; padding:0; line-height:1; font-size:0; background:url(../images/system/sp/system04/text.png) no-repeat left top / 100% auto;}
#sec0401 .a02 .ss01{margin-top:-7.969vw;}
/*03*/
#sec0401 .a03{min-height:235.938vw;}
#sec0401 .a03 p:nth-of-type(1),
#sec0401 .a03 p:nth-of-type(2),
#sec0401 .a03 p:nth-of-type(3){padding:4.063vw 4.688vw 7.969vw;}
#sec0401 .a03 figure{width:100vw; height:60.313vw; margin:-7.969vw 0 3.594vw;}
#sec0401 .a03 figure img{width:100%; height:auto;}
/*sec0402*/
#sec0402 h2{height:14.219vw; margin-bottom:4.063vw; background:url(../images/system/sp/system04/h202.png) no-repeat center top / 100% auto;}
#sec0402 p{margin-bottom:2.813vw; text-align:center; font-size:3.125vw; letter-spacing:-0.07em; line-height:5.625vw;}
#sec0402 figure{width:100vw; height:60.313vw; margin:0 auto 2.656vw;}
#sec0402 figure img{width:100%; height:auto;}
#sec0402 > a.colorboxmodal{display:none;}
#sec0402 > p:nth-of-type(2){padding:5.313vw 4.688vw 7.031vw; background:rgba(255,255,255,0.8);}
#sec0402 .ss02{margin-top:-9.531vw;}
/*アニメーション*/
main #sec0401 article,
main #sec0402{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);}
main #sec0401 article.animated,
main #sec0402.animated{opacity:1; transform:translate(0);}

}