@charset "utf-8";

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

/*body{background:url(../images/world/bg.jpg) center top no-repeat fixed;}*/

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

main{padding-bottom:65px;}
#wrapper section{max-width:1400px; width:100%; min-width:1200px;}

main h1{position:absolute; top:148px; left:50%; width:391px; height:70px; margin-left:96px; background:url(../images/world/title.png) no-repeat left top;}
main section .text{position:absolute; left:50%; font-size:17px; line-height:32px; text-align:left;}
main section > p{position:absolute; left:50%; font-size:17px; line-height:32px; text-align:left;}
main section p + p{margin-top:32px;}
/*モーダル*/
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;}




#sec01{height:910px; margin-bottom:121px;}
#sec01::before{content:''; position:absolute; top:112px; left:0; width:100%; height:100%; background:url(../images/world/bg01.png) no-repeat center top;}
#sec01 h2{position:absolute; top:327px; left:50%; width:130px; height:545px; margin-left:-588px; background:url(../images/world/catch.png) no-repeat left top;}
#sec01 .text:first-of-type{top:301px; width:515px; margin-left:100px;}
#sec01 .text:nth-of-type(2){top:647px; width:495px; margin-left:-441px;}

#sec02{height:910px; margin-bottom:63px;}
#sec02::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/world/bg02.png) no-repeat center top;}
#sec02 h2{position:absolute; top:85px; left:50%; width:546px; height:31px; margin-left:28px; background:url(../images/world/subtitle01.png) no-repeat left top;}
#sec02 p:first-of-type{top:135px; width:470px; margin-left:26px;}
#sec02 p:nth-of-type(2){top:712px; width:546px; margin-left:27px;}
#sec02 p:nth-of-type(3){top:811px; width:550px; margin-left:-595px;}
#sec02 a.colorboxmodal:first-of-type{top:40px; width:591px; height:333px; margin-left:-600px; z-index:1;}
#sec02 a.colorboxmodal:nth-of-type(2){top:302px; width:748px; height:421px; margin-left:-99px;}
#sec02 a.colorboxmodal:nth-of-type(3){top:512px; width:556px; height:313px; margin-left:-600px; z-index:1;}

#sec03{height:1020px;}
#sec03::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/world/bg03.png) no-repeat center top;}
#sec03 h2{position:absolute; top:44px; left:50%; width:364px; height:72px; margin-left:156px; background:url(../images/world/subtitle02.png) no-repeat left top;}
#sec03 p{top:135px; width:360px; margin-left:158px;}
#sec03 a.colorboxmodal:first-of-type{top:40px; width:714px; height:402px; margin-left:-628px; z-index:3;}
#sec03 a.colorboxmodal:nth-of-type(2){top:243px; width:576px; height:324px; margin-left:48px; z-index:2;}
#sec03 a.colorboxmodal:nth-of-type(3){top:516px; width:607px; height:343px; margin-left:-499px; z-index:1;}
#sec03 a.colorboxmodal:nth-of-type(4){top:680px; width:501px; height:281px; margin-left:20px;}


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

イベント

--------------------*/
.world02 main h1{top:116px; width:226px; height:97px; margin-left:-590px; background:url(../images/world/world02/title.png) no-repeat left top;}
.world02 main p{padding:23px 40px 23px; letter-spacing:-0.03em; background:rgba(255,255,255,0.8);}
.world02 main p.caption{background:none;}
.world02 main section p:first-of-type{font-size:19px; line-height:34px;}
/**sec0201*/
#sec0201{min-height:1445px;}
#sec0201::before{content:''; position:absolute; top:64px; left:50%; width:414px; height:725px; margin-left:222px; background:url(../images/world/world02/chara01.png) no-repeat left top; z-index:1;}
#sec0201 h2{position:absolute; top:155px; left:50%; width:519px; height:63px; margin-left:-329px; background:url(../images/world/world02/h201.png) no-repeat left top;}
#sec0201 p:first-of-type{top:297px; width:1014px; margin-left:-560px;}
#sec0201 p:nth-of-type(2){top:1000px; width:640px; margin-left:-599px; padding:31px 160px 33px 35px;}
#sec0201 figure{position:absolute; top:406px; left:50%; width:690px; height:419px; margin-left:-54px; z-index:2;}
#sec0201 figure:nth-of-type(2){top:479px; margin-left:-634px; z-index:1;}
#sec0201 figure:nth-of-type(3){top:897px; width:742px; height:448px; margin-left:-106px;}
#sec0201 a.colorboxmodal{top:428px; width:620px; height:349px; margin-left:-19px; z-index:2;}
#sec0201 a.colorboxmodal:nth-of-type(2){top:501px; margin-left:-599px; z-index:1;}
#sec0201 a.colorboxmodal:nth-of-type(3){top:919px; width:672px; height:378px; margin-left:-71px;}
/**sec0202*/
#sec0202{min-height:1190px;}
#sec0202::before{content:''; position:absolute; top:-243px; left:50%; width:468px; height:965px; margin-left:-644px; background:url(../images/world/world02/chara02.png) no-repeat left top; z-index:1;}
#sec0202::after{content:''; position:absolute; top:-182px; left:50%; width:551px; height:792px; margin-left:-595px; background:url(../images/world/world02/bg01.png) no-repeat left top; z-index:-1;}
#sec0202 h2{position:absolute; top:0; left:50%; width:764px; height:64px; margin-left:-205px; background:url(../images/world/world02/h202.png) no-repeat left top;}
#sec0202 p:first-of-type{top:98px; width:1014px; margin-left:-415px; padding:23px 40px 23px 211px;}
#sec0202 p:nth-of-type(2){top:852px; width:640px; margin-left:-39px; padding:31px 40px 33px 147px;}
#sec0202 figure{position:absolute; top:257px; left:50%; width:690px; height:419px; margin-left:-634px; z-index:2;}
#sec0202 figure:nth-of-type(2){top:330px; margin-left:-55px; z-index:1;}
#sec0202 figure:nth-of-type(3){top:748px; width:742px; height:448px; margin-left:-634px;}
#sec0202 a.colorboxmodal{top:279px; width:620px; height:349px; margin-left:-599px; z-index:2;}
#sec0202 a.colorboxmodal:nth-of-type(2){top:352px; margin-left:-20px; z-index:1;}
#sec0202 a.colorboxmodal:nth-of-type(3){top:770px; width:672px; height:378px; margin-left:-599px;}


#sec0203 h2{position:absolute; top:130px; left:50%; width:954px; height:84px; margin-left:-485px; background:url(../images/world/world02/h203.png) no-repeat left top;}
#sec0203 { position: relative; min-height: 2160px; padding-top: 140px;}
#sec0203 h2 + p{text-align: center; width: 700px; margin: 0 auto; position: relative; padding-top: 100px; left: 0;}
#sec0203 .ss01{ position:absolute; top:370px; left:50%; margin-left:-170px;width: 802px;}
#sec0203 .ss02{ position:absolute; top:740px; left:50%; margin-left:-644px; z-index: 1;}
#sec0203 .ss02 + p{ position:absolute; top:900px; left:50%;margin-left:30px; width: 563px; padding-left: 70px;}
#sec0203 .txt01{ position:absolute; top:480px; left:50%; margin-left:-602px; width: 460px; text-align: left;}
#sec0203 .txt01 p{padding:20px 0 0 0;}
#sec0203 .ss03{ position:absolute; top:1250px; left:50%; margin-left:-644px; z-index:2;width: 802px;}
#sec0203 .ss03 + h3{ position:absolute; top:1300px; left:50%; margin-left:152px;}
#sec0203 .ss03 + h3 + p{ position:absolute; top:1420px; left:50%; margin-left:152px; padding: 0;width: 430px;}
#sec0203 .ss04{ position:absolute; top:1610px; left:50%; margin-left:-120px; z-index:1;}
#sec0203 .ss04 + p{position:absolute; top:1790px; left:50%; left:50%;  margin-left:-609px; width: 540px;}
#sec0203 a.colorboxmodal{top: 22px; width: 730px; height: 410px; margin-left: 0;}
#sec0203 .ss02 a.colorboxmodal,#sec0203 .ss04 a.colorboxmodal{  top: 22px; width: 672px;  height: 378px; margin-left: 0; z-index: 2;}

#sec0204 { position: relative; min-height: 1430px;}
#sec0204 h2{position:absolute; top:0; left:50%; width:1024px; height:84px; margin-left:-529px; background:url(../images/world/world02/h204.png) no-repeat left top;}
#sec0204 h2 + p{text-align: center; width: 850px; margin: 0 auto; position: relative; padding-top: 100px; left: 0;}
#sec0204 figure{position:absolute; top:227px; left:50%; width:690px; height:419px; margin-left:-580px; z-index:2;}
#sec0204 figure:nth-of-type(2){top:808px; margin-left:-684px; z-index:2;}
#sec0204 figure:nth-of-type(3){top:708px; margin-left:0; z-index:1;}
#sec0204 figure:nth-of-type(4){top:1068px; width:742px; height:448px; margin-left:-410px; z-index:1;}
#sec0204 p:last-child{ top: 1138px; padding-left: 70px;width: 410px; margin-left: 190px;}
#sec0204 a.colorboxmodal{top: 829px;width: 530px;height: 299px; margin-left: -604px;  z-index: 10;}
#sec0204 a.colorboxmodal:nth-of-type(2){top: 729px;width: 530px;height: 299px; margin-left:80px;  z-index: 10;}
#sec0204 a.colorboxmodal:nth-of-type(3){top: 1089px;width: 530px;height: 299px; margin-left: -304px;  z-index: 10;}

#sec0205 h2{position:absolute; top:130px; left:50%; width:1200px; height:84px; margin-left:-605px; background:url(../images/world/world02/h205.png) no-repeat left top;}
#sec0205 { position: relative; min-height: 2300px; padding-top: 140px;}
#sec0205 h2 + p{text-align: center; width: 1080px; margin: 0 auto; position: relative; padding-top: 100px; left: 0; padding-bottom: 45px;}
#sec0205 .ss05{ position:absolute; top:420px; left:50%; margin-left:-170px;width: 802px;}
#sec0205 .ss06{ position:absolute; top:810px; left:50%; margin-left:-644px; z-index: 1;}
#sec0205 .ss06 + p{ position:absolute; top:900px; left:50%;margin-left:30px; width: 563px; padding-left: 70px;}
#sec0205 .txt01{ position:absolute; top:480px; left:50%; margin-left:-602px; width: 440px; text-align: left;}
#sec0205 .txt01 p{padding:20px 0 0 0; font-size: 17px; line-height: 32px; text-align: left;}
#sec0205 .ss07{ position:absolute; top:1430px; left:50%; margin-left:-644px; z-index:2;width: 802px;}
#sec0205 h3.h302{ position:absolute; top:1350px; left:50%; margin-left:-277px;}
#sec0205 .ss07 + p{ position:absolute; top:1500px; left:50%; margin-left:152px; padding: 0;width: 430px;}
#sec0205 .ss08{ position:absolute; top:1810px; left:50%; margin-left:-120px; z-index:1;}
#sec0205 .ss08 + p{position:absolute; top:1990px; left:50%; left:50%;  margin-left:-609px; width: 540px;}
#sec0205 a.colorboxmodal{top: 22px; width: 730px; height: 410px; margin-left: 0;}
#sec0205 .ss06 a.colorboxmodal,#sec0205 .ss08 a.colorboxmodal{  top: 22px; width: 672px;  height: 378px; margin-left: 0; z-index: 2;}		
	
#sec0203.new::after{content:''; position:absolute; top:73px; left:50%; width:110px; height:104px; margin-left:-456px; background:url(../images/common/icon-new.png) no-repeat left top;}
#sec0204.new::after{content:''; position:absolute; top:-47px; left:50%; width:110px; height:104px; margin-left:-516px; background:url(../images/common/icon-new.png) no-repeat left top;}
#sec0205.new::after{content:''; position:absolute; top:83px; left:50%; width:110px; height:104px; margin-left:-586px; background:url(../images/common/icon-new.png) no-repeat left top;}


/*アニメーション*/
main section{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 section.animated{opacity:1; filter: brightness(1); transform: translateY(0);}

}


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

#wrapper::before{background-size:cover;}

}


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



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

/*

		SP site

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


/*モーダルスライダー*/
.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.5vw; /*background:url(../images/world/sp/bg-top.png) no-repeat center top / 100% auto;*/}
#wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/world/sp/bg-top.png) no-repeat center top / 100% auto;}

main h1{width:42.656vw; height:16.094vw; margin:0 auto 3.281vw; background:url(../images/world/sp/title.png) no-repeat left top / 100% auto;}
main section .text{padding:0 6.25vw; letter-spacing:-0.05em; line-height:6.563vw; font-size:3.594vw; text-align:left;}
main section > p{padding:0 6.25vw; letter-spacing:-0.05em; line-height:6.563vw; font-size:3.594vw; text-align:left;}
main section p + p{margin-top:6.563vw;}
main section a.colorboxmodal{display:none;}

#sec01{height:262.594vw; padding-top:84.531vw;}
#sec01::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/world/sp/sec01-bg.png) no-repeat left top / 100vw auto;}
#sec01 h2{position:absolute; top:-3.906vw; left:4.688vw; width:20.313vw; height:85.156vw; background:url(../images/world/catch.png) no-repeat left top / 100% auto;}
#sec01 .text + .text{margin-top:70.469vw;}

#sec02{height:269.375vw; padding-top:66.875vw;}
#sec02::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/world/sp/sec02-bg.png) no-repeat left top / 100vw auto;}
#sec02 h2{width:85.313vw; height:4.844vw; margin:0 5.469vw 2.344vw; background:url(../images/world/subtitle01.png) no-repeat left top / 100% auto;}
#sec02 p:first-of-type{margin-bottom:67.5vw;}
#sec02 p:nth-of-type(2){margin-bottom:68.125vw;}

#sec03{height:247.813vw; padding-top:62.344vw;}
#sec03::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/world/sp/sec03-bg.png) no-repeat left top / 100vw auto;}
#sec03 h2{width:52.188vw; height:11.25vw; margin:0 5.469vw 2.5vw; background:url(../images/world/subtitle02.png) no-repeat left top / 100% auto;}

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

world02 イベント

---------------*/
.world02 main h1{margin-bottom:8.594vw; background-image:url(../images/world/sp/world02/title.png);}
.world02 main p{margin-bottom:3.438vw; padding:3.438vw 3.125vw 3.75vw; font-size:3.125vw; line-height:5.625vw; text-align:center; letter-spacing:-0.03em; background:rgba(255,255,255,0.8);}
.world02 main figure{width:100vw; height:61.875vw;}
.world02 main figure img{width:100%; height:auto;}
/*sec0201*/
#sec0201{min-height:269.219vw;}
#sec0201 h2{height:8.125vw; margin-bottom:5.156vw; background:url(../images/world/sp/world02/h201.png) no-repeat left top / 100% auto;}
#sec0201 p:nth-of-type(2){padding:4.844vw 3.125vw 8.594vw;}
#sec0201 figure:nth-of-type(2){margin:-6.25vw 0 3.125vw;}
#sec0201 figure:nth-of-type(3){margin-top:-10.781vw;}
/*sec0202*/
#sec0202{min-height:256.25vw;}
#sec0202::after{content:''; position:absolute; top:-24.844vw; left:0; width:86.094vw; height:123.75vw; background:url(../images/world/world02/bg01.png) no-repeat left top / 100% auto; z-index:-1;}
#sec0202 h2{height:8.125vw; margin-bottom:5.156vw; background:url(../images/world/sp/world02/h202.png) no-repeat left top / 100% auto;}
#sec0202 p:first-of-type{padding-bottom:5.469vw;}
#sec0202 p:nth-of-type(2){padding:4.844vw 3.125vw 8.594vw;}
#sec0202 figure:first-of-type{margin-top:-8.594vw;}
#sec0202 figure:nth-of-type(2){margin:-6.25vw 0 3.125vw;}
#sec0202 figure:nth-of-type(3){margin-top:-10.781vw;}

#sec0203{margin-top:7vw;}
#sec0204{margin-top:10vw;}
#sec0203 p,#sec0204 p{background:none; padding: 2vw 0 0 0;}
#sec0203 h2{height:9.125vw; margin-bottom:1.156vw; background:url(../images/world/world02/h203.png) no-repeat left top / 116vw auto; margin-left: -8vw;}
#sec0203 .swiper-slide img{width:100%; height:auto;}
#sec0203 h3 img,#sec0204 h3 img{width:100%; height:auto;}
#sec0203 .ss03 + h3{ margin-top: 4vw;}

#sec0204 h2{height:9.125vw; margin-bottom:1.156vw; background:url(../images/world/world02/h204.png) no-repeat left top / 116vw auto; margin-left: -8vw;}

#sec0203.new::after{content:''; position:absolute; top:-17.125vw; left:0.906vw; width:17.188vw; height:16.25vw; background:url(../images/common/icon-new.png) no-repeat left top / 100% auto;}
#sec0204.new::after{content:''; position:absolute; top:-6.125vw; left:0.906vw; width:17.188vw; height:16.25vw; background:url(../images/common/icon-new.png) no-repeat left top / 100% auto;}

#sec0205{margin-top:11vw;}
#sec0205 p{background:none; padding: 2vw 0 0 0;}
#sec0205 h2{height:19.125vw; margin-bottom:1.156vw; background:url(../images/world/sp/world02/h205.png) no-repeat left top / 100vw auto; margin-left: 0;}
#sec0205 .swiper-slide img{width:100%; height:auto;}
#sec0205 h3{margin-top: 7vw;}
#sec0205 h3 img{width: 100vw; height:auto;}
#sec0205 h3.h302 img{width: 80vw; height:auto;}
#sec0204 h3 img{width:100%; height:auto;}
#sec0205 .ss07 + h3{ margin-top: 4vw;}
	
	
#sec0203.new::after{content:''; position:absolute; top:-17.125vw; left:0.906vw; width:17.188vw; height:16.25vw; background:url(../images/common/icon-new.png) no-repeat left top / 100% auto;}
#sec0205.new::after{content:''; position:absolute; top:-11.125vw; left:-3.3vw; width:17.188vw; height:16.25vw; background:url(../images/common/icon-new.png) no-repeat left top / 100% auto;}	
	
/*アニメーション*/
main section{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 section.animated{opacity:1; transform:translate(0);}

}