@charset "utf-8";

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

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

main{padding-bottom:91px;}
main article + article{margin-top:197px;}
main article + article::before{content:''; position:absolute; top:-117px; left:0; width:100%; height:72px; background:url(../images/characters/subcharacter/border.png) no-repeat center top;}


/*NEWアイコン*/
article.new .wrap::before{content:''; position:absolute; top:0; left:50%; width:110px; height:104px; background:url(../images/common/icon-new.png) no-repeat center top / 100% auto; z-index:10;}

/*キャラ*/
main article{position:relative;}
main article::after{content:''; position:absolute; top:0; left:50%; width:100%; height:100%; background:no-repeat left top; z-index:1;}

/*テキスト*/
main .wrap{width:1200px; margin:0 auto;}
main article:nth-child(even) .text::after{content:''; clear:both; display:block;}
main .wrap{opacity:0; transition:opacity 0.5s;}
main .wrap.show{opacity:1;}
main header{margin:0 0 52px 40px; text-align:left;}
main header h1{margin-bottom:21px;}
main header ul{display:flex; flex-wrap:wrap;}
main header ul li + li{margin-left:39px;}
main dl{position:relative; width:650px; margin-left:42px; padding:63px 70px 58px; text-align:left; background:rgba(255,255,255,0.7); /*outline:solid 1px #d3c4b0; outline-offset:-6px;*/ box-shadow:0px 4px 14px 4px rgba(106,94,60,0.25);}
/*main dl::before{content:''; position:absolute; top:5px; left:5px; width:99px; height:64px; background:url(../images/characters/text-bg-icon01.png) no-repeat left top;}*/
main dl::before{content:''; position:absolute; top:5px; left:5px; width:calc(100% - 10px); height:calc(100% - 10px); border:1px solid #d3c4b0;}
main dl::after{content:''; position:absolute; bottom:5px; right:5px; width:97px; height:63px; background:url(../images/characters/text-bg-icon02.png) no-repeat left top;}
main dl dt{position:relative; margin-bottom:20px;}
main dl dt::before{content:''; position:absolute; top:-58px; left:-65px; width:99px; height:64px; background:url(../images/characters/text-bg-icon01.png) no-repeat left top;}
main dl dd{color:#6a5e3c; font-size:18px; line-height:33px;}
main article:nth-child(even) header{float:right; margin:0 36px 52px 0; text-align:right;}
main article:nth-child(even) dl{float:right; clear:both; margin:0 37px 0 0;}


/*リオネラ・エインセ*/
.character01::after{top:-55px; width:639px; height:995px; margin-left:26px; background-image:url(../images/characters/subcharacter/01/chara.png);}
.character01.new .wrap::before{top:-15px; margin-left:-18px;}

/*ちむどらごん*/
.character02::after{width:302px; height:884px; margin-left:-518px; background-image:url(../images/characters/subcharacter/02/chara.png);}
.character02.new .wrap::before{top:-2px; margin-left:37px;}
.character02 ul{
	 -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
	}


/*リーザ*/
.character03::after{top:-55px; width:639px; height:995px; margin-left:66px; background-image:url(../images/characters/subcharacter/03/chara.png);}
.character03.new .wrap::before{top:-15px; margin-left:-78px;}

/*レフレ*/
.character04::after{width:302px; height:900px; margin-left:-518px; background-image:url(../images/characters/subcharacter/04/chara.png);}
.character04.new .wrap::before{top:-2px; margin-left:-23px;}
.character04 ul{
	 -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
	}

/*コオル*/
.character05::after{top:-55px; width:639px;  height: 1035px; margin-left: 186px; background-image:url(../images/characters/subcharacter/05/chara.png);}
.character05.new .wrap::before{top:-15px; margin-left:-18px;}

/*イエルチェ*/
.character06::after{width:392px; height:914px; margin-left:-518px; background-image:url(../images/characters/subcharacter/06/chara.png);}
.character06.new .wrap::before{top:0px; margin-left:-203px;}
.character06 ul{
	 -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
	}

/*ヴィルト*/
.character07::after{top:-55px; width:639px; height:1035px; margin-left:106px; background-image:url(../images/characters/subcharacter/07/chara.png);}
.character07.new .wrap::before{top:-45px; margin-left:22px;}

/*パメラ*/
.character08::after{width:421px; height:917px; margin-left:-538px; background-image:url(../images/characters/subcharacter/08/chara.png);}
.character08.new .wrap::before{top:-2px; margin-left:-63px;}
.character08 ul{
	 -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
	}
	
	
/*ミミ*/
.character09::after{top:-55px; width:350px; height:1035px; margin-left:166px; background-image:url(../images/characters/subcharacter/09/chara.png);}
.character09.new .wrap::before{top:-45px; margin-left:22px;}


/*ケイナ*/
.character10::after{width:421px; height:987px; margin-left:-538px; background-image:url(../images/characters/subcharacter/10/chara.png);}
.character10.new .wrap::before{top:-2px; margin-left:-143px;}
.character10 ul{
	 -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
	}
	
	
/*ベノン*/
.character11::after{top:-55px; width:350px; height:1035px; margin-left:166px; background-image:url(../images/characters/subcharacter/11/chara.png);}
.character11.new .wrap::before{top:-45px; margin-left:22px;}



/*モーダルスライダー*/
.swiper-container{position:relative; width:507px; opacity:0; transition:opacity 0.5s; margin:-28px 0 0 -11px; overflow:hidden;}
main article:nth-child(even) .swiper-container{float:right; clear:both; margin:-30px -11px 0 0;}
.windowloaded .swiper-container{opacity:1;}
.swiper-wrapper{text-align:center; padding-bottom:26px;}
.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::before{content:''; position:absolute; top:11px; left:16px; width:576px; height:324px; background:#fff; z-index:-1;}*/
.swiper-slide .item img{width:auto; height:302px; transition:opacity 0.2s; opacity:0; backface-visibility:hidden;}
.swiper-slide .item a{position:absolute; top:0; left:0; display:block; width:100%; height:100%; z-index:10; opacity:0;}
.swiper-slide .item a:hover + img{opacity:0.7;}
.swiper-slide .item a:after{content:''; position:absolute; right:13px; bottom:17px; 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{width:100%; text-align:center; height:37px; vertical-align:middle; display:block; padding:0;}
.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:17px; 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:17px; 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;}

/*ページ送りボタン*/
.pagearr{position:fixed; top:50%; left:-107px; margin-top:-42px; z-index:200; width:60px; margin-left:0; padding:0; transition:0.8s ease; opacity:0; font-size:0; line-height:1;}
.pagearr a{position:relative; display:block; width:60px; height:90px; background:url(../images/characters/btn-prev.png) no-repeat left top / 100% auto; transition:0.3s;}
.pagearr a:hover{opacity:0.5;}
.pagearr.next{left:inherit; right:-107px; margin-left:inherit; margin-right:0; text-align:right; padding:0;}
.pagearr.next a{float:right; width:73px; height:87px; background:url(../images/characters/btn-next.png) no-repeat left top / 100% auto;}
.pagearr.show{opacity:1; left:20px;}
.pagearr.next.show{opacity:1; left:inherit; right:20px;}
.pagearr.end{opacity:0;}
/*矢印*/
.navBtn li{display:none; transition:display 0.3;}
.navBtn li.on{display:block;}

}


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

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

}


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

.pagearr{margin-top:-110px;}

}*/



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

#wrapper{padding-top:22.188vw; overflow: visible !important; overflow-x: hidden;}
#wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/characters/sp/bg-top.png) no-repeat center top / 100% auto;}

main{padding-bottom:22.813vw; overflow: hidden;}
main article + article{margin-top:15.156vw;}

/*NEWアイコン*/
article.new .wrap::before{content:''; position:absolute; top:-7.813vw; left:6.25vw; width:16.719vw; height:4.219vw; background:url(../images/common/sp/icon-new.png) no-repeat center top / 100% auto; z-index:10;}
article:nth-child(even).new .wrap::before{top:-7.813vw; right:6.25vw; left:auto;}


/*キャラ*/
main article{position:relative; opacity:0; transition:opacity 0.5s; width: 100vw;}
main article.show{opacity:1;}
main article::after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat left top / 100% auto; z-index:1;}

/*テキスト*/
main article .text dl{display:none;}
main article:nth-child(even) .text::after{content:''; clear:both; display:block;}
main header,main dl{opacity:0; transition:opacity 0.5s;}
main header.show,main dl.show{opacity:1;}
main header{margin:0 0 3.594vw 4.688vw; text-align:left;}
main header h1{margin-bottom:4.063vw;}
main ul li img{height:4.375vw;}
main header ul li + li{margin-top:2.344vw;}
main dl{position:relative; width:87.5vw; margin:5vw auto 0; padding:6.406vw 6.25vw 5.156vw; text-align:left; background:rgba(255,255,255,0.9); outline:solid 1px #d3c4b0; outline-offset:-1.094vw; z-index:1; box-shadow:0px 4px 14px 4px rgba(106,94,60,0.25);}
/*main dl::before{content:''; position:absolute; top:0.781vw; left:0.781vw; width:15.469vw; height:10vw; background:url(../images/characters/text-bg-icon01.png) no-repeat left top / 100% auto;}
main dl::after{content:''; position:absolute; bottom:0.781vw; right:0.781vw; width:15.156vw; height:9.844vw; background:url(../images/characters/text-bg-icon02.png) no-repeat left top / 100% auto;}*/
main dl dt{margin-bottom:2.5vw;}
main dl dd{color:#6a5e3c; font-size:2.813vw; line-height:5.313vw;}
main dl dt dt img{width:auto; height:3.125vw;}
main header h1 img,
main header ul li img,
main dl dt img{width:auto;}
main article:nth-child(even) header{float:right; margin:0 5.469vw 4.531vw 0;}
main article:nth-child(even) ul{float:right;}
main article:nth-child(even) dl{float:right; clear:both; margin-right:5.469vw;}


/*リオネラ・エインセ*/
.character01::after{top:-2.188vw; left:35.938vw; width:81.563vw; height:117.031vw; background-image:url(../images/characters/subcharacter/01/chara.png);}
.character01 header h1 img{height:20.156vw;}
.character01 header ul li img{height:4.375vw;}
.character01 dl dt img{height:3.125vw;}

/*ちむどらごん*/
.character02::after{top:-8.438vw; left:9.063vw; width:39.375vw; height:115.313vw; background-image:url(../images/characters/subcharacter/02/chara.png);}
.character02 header h1 img{height:20vw;}
.character02 header ul li img{height:4.375vw;}
.character02 dl dt img{height:3.125vw;}

/*リーザ*/
.character03::after{top:-2.188vw; left: 43.938vw; width: 58.563vw; height: 126.031vw; background-image:url(../images/characters/subcharacter/03/chara.png);}
.character03 header h1 img{height:27.156vw;}
.character03 header ul li img{height:4.375vw;}
.character03 dl dt img{height:3.125vw;}

/*レフレ*/
.character04::after{top:-8.438vw; left: 3.063vw; width: 36.375vw; height: 121.313vw; background-image:url(../images/characters/subcharacter/04/chara.png);}
.character04 header h1 img{height:27vw;}
.character04 header ul li img{height:4.375vw;}
.character04 dl dt img{height:3.125vw;}


/*コオル*/
.character05::after{    top: -7.188vw; left: 59.938vw; width: 42.563vw; height: 131.031vw; background-image:url(../images/characters/subcharacter/05/chara.png);}
.character05 header h1 img{height:18.156vw;}
.character05 header ul li img{height:4.375vw;}
.character05 dl dt img{height:3.125vw;}

/*イエルチェ*/
.character06::after{top: 16.562vw; left: -0.937vw; width: 50.375vw; height: 120.313vw; background-image:url(../images/characters/subcharacter/06/chara.png);}
.character06 header h1 img{height:20vw;}
.character06 header ul li img{height:4.375vw;}
.character06 dl dt img{height:3.125vw;}

/*ヴィルト*/
.character07 {margin-top: 26.156vw;}
.character07::after{top: 13.812vw; left: 44.938vw; width: 76.563vw; height: 133.031vw; background-image:url(../images/characters/subcharacter/07/chara.png);}
.character07 header h1 img{height:20.156vw;}
.character07 header ul li img{height:4.375vw;}
.character07 dl dt img{height:3.125vw;}

/*パメラ*/
.character08 {margin-top: 23.156vw;}
.character08::after{top: 12.562vw; left: -4.937vw; width: 54.375vw; height: 120.313vw; background-image:url(../images/characters/subcharacter/08/chara.png);}
.character08 header h1 img{height:20vw;}
.character08 header ul li img{height:4.375vw;}
.character08 dl dt img{height:3.125vw;}


/*ミミ*/
.character09 {margin-top: 27.156vw;}
.character09::after{top: 8.562vw; left: 54vw; width: 46.375vw; height: 125.313vw; background-image:url(../images/characters/subcharacter/09/chara.png);}
.character09 header h1 img{height:30vw;}
.character09 header ul li img{height:4.375vw;}
.character09 dl dt img{height:3.125vw;}


/*ケイナ*/
.character10 {margin-top: 23.156vw;}
.character10::after{top: 12.562vw; left: 4.063vw; width:43.375vw; height: 129.313vw; background-image:url(../images/characters/subcharacter/10/chara.png);}
.character10 header h1 img{height:20vw;}
.character10 header ul li img{height:4.375vw;}
.character10 dl dt img{height:3.125vw;}


/*ベノン*/
.character11 {margin-top: 27.156vw;}
.character11::after{top:13.562vw; left: 56vw; width: 41.375vw; height:135.313vw; background-image:url(../images/characters/subcharacter/11/chara.png);}
.character11 header h1 img{height:20vw;}
.character11 header ul li img{height:4.375vw;}
.character11 dl dt img{height:3.125vw;}

#sitefooter{ margin: 15vw 0 0 0;}



/*スワイパー*/
.swiper-container{width:49.219vw; position:relative; opacity:0; transition:0.5s; margin:0; margin-left:4.688vw;}
main article:nth-child(even) .swiper-container{float:right; margin-right: 4vw;}
.windowloaded .swiper-container{opacity:1;}
.swiper-wrapper{padding-bottom:4.219vw; 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 {display: block; position: relative; z-index: 10;}
.swiper-slide .item img {height: auto; width:100%;}
.swiper-slide .item a{position:absolute; top:0; left:0; display:block; width:100%; height:100%; z-index:10; opacity:0;}
.swiper-slide .item a:after{content:''; position:absolute; right:1.094vw; bottom:1.563vw; width:5.625vw; height:5.625vw; 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{display:block; width:100%; height:3.594vw; /*margin-top:-2.813vw;*/ 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; border-radius:100%;}
.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;}
#cboxPrevious,
#cboxNext,
#cboxSlideshow{border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:5.469vw; height:5.469vw; position:absolute; top:-3.125vw; background:url(../images/common/controls.png) no-repeat 0 0;}
#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active{outline:0;}
#cboxNext{top:-7.188vw; right:8.906vw; left:auto; width:5.469vw; height:5.469vw; background:url(../images/characters/btn-slide-next.png) no-repeat left top / 100% auto; transition:0.5s;}
#cboxPrevious{top:-7.188vw; right:17.5vw; left:auto; width:5.469vw; height:5.469vw; background:url(../images/characters/btn-slide-prev.png) no-repeat left top / 100% auto; transition:0.5s;}

/*ページ送り*/
.pagearr{position:fixed; left:-4rem; top:65.469vw!important; z-index:1200; width:9.063vw; height:14.063vw; transition: 0.8s ease; opacity: 0; font-size: 0; line-height: 1; margin:auto;}
.pagearr.haspremium{top:30.95rem;}
.pagearr a{display:block; width:9.063vw; height:14.063vw; background:url(../images/characters/btn-prev.png) no-repeat left top / 100% auto; transition:0.3s;}
.pagearr.next{left:inherit; right:-4rem; width:10.313vw; height:13.594vw; text-align:right;}
.pagearr.next a{width:10.313vw; height:13.594vw; background:url(../images/characters/btn-next.png) no-repeat left top / 100% auto;}
.pagearr.show{opacity:1; left:0;}
.pagearr.next.show{opacity:1; left:inherit; right:0;}
/*矢印*/
.navBtn li{display:none;}
.navBtn li.on{display:block;}

}