@charset "utf-8";

#series h2.pagetitle {position: relative; z-index: 10; font-size: 0;}

main .series h3 {background: url(../png/bg_title.png) center top repeat-x; height: 155px; position: relative; z-index: 0; margin-bottom: 1px;}
main .series h3 span {display: block; height: 155px; background-position: center top; background-repeat: no-repeat;}
main .series#series01 h3 span {background-image: url(../png/h301.png);}
main .series#series02 h3 span {background-image: url(../png/h302.png);}
main .series#series03 h3 span {background-image: url(../png/h303.png);}
main .series#series04 h3 span {background-image: url(../png/h304.png);}
main .series#series05 h3 span {background-image: url(../png/h305.png);}
main .series section .wrap{max-width: 1400px; min-width: 1200px; margin: 0 auto; position: relative; z-index: 20;}

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

#series h2.pagetitle {padding: 50px 0 0; height: 127px; width: 1200px; margin: 0 auto 100px;}
#series h2.pagetitle span {display: block; background: url(../png/h2.png) center top no-repeat; width: 1200px; height: 66px;}

main p.copy {background: url(../png/bg_lead.png) center bottom no-repeat; width: 1076px; height:auto; margin:0 auto 83px; text-align: left; color: #373d85; padding:0; position: relative; font-size: 18px; line-height: 32px; position: relative; z-index: 10;}
main p.copy span {display: block; position: relative; padding: 0 100px 50px; margin-top: -50px;}
main p.copy span::after{content: ''; background: url(../png/bg_lead.png) center top no-repeat; height: 100px; width: 100%; height: 100px; position: absolute; left: 0; top: -50px;}
main p.copy span i {position: relative; z-index: 10; font-style:normal;}

main .series .text {background: url(../png/bg_text.png) left bottom no-repeat; width: 630px; height:auto; margin: 45px 0 67px 90px; text-align: left; color: #373d85;  position: relative; padding-bottom: 37px;}
main .series .text p {font-size: 18px; line-height: 32px;
-moz-font-feature-settings: "halt";
-webkit-font-feature-settings: "halt";
font-feature-settings: "halt";
position: relative;
padding: 0px 55px 3px;
}
main .series .text p::after{content: ''; background: url(../png/bg_text.png) center top no-repeat;  width: 100%; height: 60px; position: absolute; left: 0; top: -45px;}
main .series .text p i {font-style: normal; position: relative; z-index: 10;}

main .series .imgs {display: flex; width: 734px; flex-wrap: wrap; margin:0 0 83px 40px; justify-content: center;}
main .series .imgs li {padding: 0 10px 20px;}
main .series .imgs img {height: 195px; width: auto;}
main .series .imgs li a.colorboxmodal i {background:url(../png/icon_zoom.png) left top no-repeat #c0344d; width: 50px; height: 50px; position: absolute; right: 0; bottom: 0; z-index: 10;}
main .series .imgs li a{transition: 0.3s; display: block; position: relative;}
main .series .imgs li a:hover {filter: brightness(130%);}
.ie main .series .imgs li a:hover{opacity: 0.7;}

main .series .about {width: 334px; position: absolute; right: 33px; bottom: 80px; background:rgba(255,255,255,0.73); border: 2px solid #d3b18a; text-align: left; color: #373d85; clear: both;}
main .series .about div {padding: 30px 30px; position: relative;}
main .series .about div::after{content: ''; background: url(../png/bg_message-bottom.png) center bottom no-repeat; width: 330px; height: 44px; position: absolute; left: 0px; bottom: -2px; z-index: 30; opacity: 0.79;}
main .series .about div::before{content: ''; background: url(../png/bg_message-top.png) center bottom no-repeat; width: 330px; height: 44px; position: absolute; left: 0px; top: -2px; z-index: 30; opacity: 0.79;}
main .series .about div h4 {font-size: 23px; line-height: 30px; position: relative; z-index: 10; font-weight: bold; margin:-5px 0 0; white-space: nowrap;}
main .series .about div p {font-size: 15px; line-height: 23px; position: relative; z-index: 10; margin-bottom: -5px;}
main .series .chara{display: block; background: url(../png/chara01.png) left top no-repeat; width: 1039px; height: 990px; position: absolute; left: 50%; top: 0; z-index: 10; margin: 0 0 0 -320px;}

main .series#series02 .text {margin: 45px 90px 67px 0; float: right;}
main .series#series02 .imgs {margin: 0 40px 83px 0; float: right;}
main .series#series02 .about {right: inherit; left: 33px;}
main .series#series02 .chara{background: url(../png/chara02.png) left top no-repeat; width: 845px; height: 990px; position: absolute; left:inherit; right: 50%; margin: 0 -110px 0 0;}

main .series#series03 .chara{background: url(../png/chara03.png) left top no-repeat; width: 993px; margin: 0 0 0 -210px;}

main .series#series04 {background: url(../png/bg_meru.png) center 116px no-repeat; position: relative; z-index: 10;}
main .series#series04 img {float: right; margin: -91px 177px 100px 0;}
main .series#series04 dl {background: url(../png/profile.png) left top no-repeat; width: 516px; height: 258px; margin: 20px auto 0;}
main .series#series04 .text {margin: 89px 0 0 178px;}

main .series#series04 dl {font-size: 15px; line-height: 28px;
-moz-font-feature-settings: "halt";
-webkit-font-feature-settings: "halt";
font-feature-settings: "halt";
position: relative;
padding: 70px 45px 0;
}
main .series#series04 dl dt {position: fixed; font-size: 0;}

main .series#series05 ol {margin-top: 25px; margin-bottom: 29px; background: url(../png/cycle.png) center top no-repeat; height: 1125px; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; color: #373d85; text-align: left;}
main .series#series05 ol li {position: relative; width: 620px; height: 520px; padding: 120px 0 0;}
main .series#series05 ol li {margin: 0 53px 0 0;}
main .series#series05 ol li:nth-child(even) {margin: 0 0 0 53px;}
main .series#series05 ol li p {font-size: 15px; line-height: 24px; padding: 0 50px;
-moz-font-feature-settings: "halt";
-webkit-font-feature-settings: "halt";
font-feature-settings: "halt";}
main .series#series05 ol li:nth-child(n+3) {margin-top: 82px;}
main .series#series05 ol li ul {position: absolute; left: -21px; bottom: 283px;}
main .series#series05 ol li ul li {width: 374px; height: auto; padding: 0; margin: 0 !important; font-size: 13px; line-height: 1; position: absolute; left: 0; top: 0; z-index: 10;}
main .series#series05 ol li ul li + li {top: 83px; left: 288px; z-index: 0;}
main .series#series05 ol li ul li i {font-style: normal; display: block; padding: 18px 0 0 74px;}
main .series#series05 ol li ul li + li i {position: absolute; padding: 0; right: 66px; top: -28px;}
main .series#series05 ol li li img {width: 374px; height: auto;}

}

@media screen and (min-width:1701px){
main .series#series04 {background-size: 100vw auto;}
}

@media screen and (max-width:1600px) and (min-width:1361px){
main .series#series05 ol {margin-top: 1.563vw; /*margin-bottom: 8.125vw;*/ background: url(../png/cycle.png) center top no-repeat; height: 70.313vw; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; color: #373d85; text-align: left; background-size: auto 100%;}
main .series#series05 ol li {position: relative; width: 38.75vw; height: 32.5vw; padding: 7.5vw 0 0;}
main .series#series05 ol li {margin: 0 3.313vw 0 0;}
main .series#series05 ol li:nth-child(even) {margin: 0 0 0 3.313vw;}
/*main .series#series05 ol li p {font-size: 0.938vw; line-height: 1.5vw; padding: 0 3.125vw;}*/
main .series#series05 ol li:nth-child(n+3) {margin-top: 5.125vw;}
main .series#series05 ol li ul {position: absolute; left: -1.313vw; bottom: 17.688vw;}
main .series#series05 ol li ul li {width: 23.375vw; height: auto; padding: 0; margin: 0 !important; font-size: 0.813vw; line-height: 1; position: absolute; left: 0; top: 0; z-index: 10;}
main .series#series05 ol li ul li + li {top: 5.188vw; left: 18vw; z-index: 0;}
main .series#series05 ol li ul li i {font-style: normal; display: block; padding: 1.125vw 0 0 4.625vw;}
main .series#series05 ol li ul li + li i {position: absolute; padding: 0; right: 4.125vw; top: -1.75vw;}
main .series#series05 ol li li img {width: 23.375vw; height: auto;}
}

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

main .series#series05 ol {margin-top: 25px; /*margin-bottom: 130px;*/ height: 900px; background-size: auto 100%;}
main .series#series05 ol li {width: 496px; height: 418px; padding: 94px 0 0;}
main .series#series05 ol li {margin: 0 42px 0 0;}
main .series#series05 ol li:nth-child(even) {margin: 0 0 0 42px;}
main .series#series05 ol li p {font-size: 15px; line-height: 23px; padding: 0 40px;}
main .series#series05 ol li:nth-child(n+3) {margin-top: 64px;}
main .series#series05 ol li ul {position: absolute; left: -18px; bottom: 227px;}
main .series#series05 ol li ul li {width: 300px; height: auto; padding: 0; margin: 0 !important; font-size: 11px; line-height: 1; position: absolute; left: 0; top: 0; z-index: 10;}
main .series#series05 ol li ul li + li {top: 67px; left: 231px; z-index: 0;}
main .series#series05 ol li ul li i {font-style: normal; display: block; padding: 12px 0 0 60px;}
main .series#series05 ol li ul li + li i {position: absolute; padding: 0; right: 52px; top: -24px;}
main .series#series05 ol li li img {width: 300px; height: auto;}
}


@media screen and (max-width:1400px) and (min-width:641px) {
main .series .wrap {width: 100vw;}
main .series#series04 .wrap{width: 1100px; min-width: inherit;}
main .series#series04 .text {margin-left:20px;}
main .series#series04 img {margin-right: 20px;}
}


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

    SP

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

#series h2.pagetitle {position: relative; z-index: 10; padding:12.5vw 0 2.344vw; width: 100vw;}
#series h2.pagetitle span {display: block; background: url(../png/h2-sp.png) center top no-repeat; width: 100vw; height: 9.844vw; background-size: cover;}

main p.copy {width:93.75vw; /*height:67.031vw;*/ text-align:left; color: #373d85; position:relative; font-size:3.125vw; line-height:5.625vw; margin:0 auto 7.344vw;padding-bottom: 9.0vw; position: relative;}
main p.copy::after{content: ''; background: url(../png/bg_lead-sp.png) no-repeat center bottom / 100% auto; height: 9.075vw; position: absolute; left: 0; bottom: 0; width: 100%;}
main p.copy span {display: block; background:url(../png/bg_lead-sp.png) no-repeat left top / 100% auto; padding:9.075vw 6.25vw 0; position: relative; z-index: 10;}

main .series h3 {height: 24.219vw; margin-bottom:0.313vw; background-size: auto 100%;}
main .series h3 span {display: block; height: 24.219vw; background-size: auto 100%;}

main .series section .wrap{min-width: inherit;}

main .series .text { width: 93.75vw; text-align: left; color: #373d85; position: relative; padding-bottom: 7.0vw; margin:0 auto 6.25vw;}
main .series .text::after{content: ''; background: url(../png/bg_text-sp.png) center bottom no-repeat; height: 7.031vw; width: 100%; position: absolute; left:0; bottom: 0;background-size: 100% auto; }
main .series .text p { font-size: 3.125vw; line-height: 5.625vw;}
main .series .text span{display: block; padding: 7.031vw 6.25vw 0;background: url(../png/bg_text-sp.png) left top no-repeat; background-size: 100% auto; position: relative; z-index: 10;}

main .series .imgs {display: flex; width: 100vw; flex-wrap: wrap; margin:0 0 8.906vw 0; justify-content: center;}
main .series#series03 .imgs {margin-bottom:12.188vw;}
main .series .imgs li {padding: 0 1.25vw 2.5vw;}
main .series .imgs img {height: auto; width: 45.625vw;}
main .series .imgs li a.colorboxmodal i {background:url(../png/icon_zoom.png) left top no-repeat #c0344d; width: 6.563vw; height: 6.563vw; position: absolute; right: 0; bottom: 0; z-index: 10; background-size: cover;}
main .series .imgs li a{transition: 0.3s; display: block; position: relative;}
main .series .imgs li a:hover {filter: brightness(120%);}

main .series .about {width: 50vw; background:rgba(255,255,255,0.73); border: 2px solid #d3b18a; text-align: left; color: #373d85; clear: both; margin-bottom:7.656vw; margin-left: 3.125vw;}
main .series .about div {padding:4.688vw 4.688vw 5.313vw; position: relative;}
main .series#series02 .about div{padding-bottom:12.813vw;}
main .series#series03 .about div{padding-bottom:5.938vw;}
main .series .about div::after{content: ''; background: url(../png/bg_message-bottom.png) right bottom no-repeat; background-size: 49.375vw auto; width: 49.375vw; height: 44px; position: absolute; left: 0px; bottom: -2px; z-index: 30; opacity: 0.79;}
main .series .about div::before{content: ''; background: url(../png/bg_message-top.png) left top no-repeat; background-size: 49.375vw auto; width: 49.375vw; height: 44px; position: absolute; left: 0px; top: -2px; z-index: 30; opacity: 0.79;}
main .series .about div h4 {margin-bottom:2.344vw; font-size: 4.531vw; line-height: 5.938vw; position: relative; z-index: 10; font-weight: bold; white-space: nowrap;}
main .series .about div p {font-size: 3.125vw; line-height: 5.625vw; position: relative; z-index: 10; margin-bottom: -0.781vw;  word-wrap : break-word;
  overflow-wrap : break-word;}

main .series .chara{display: block; background-image: url(../png/chara01.png);background-position: left top;background-repeat: no-repeat; background-size: auto 100%; width: 200vw; height: 134.063vw; position: absolute; left: -17.5vw; top:71.719vw; z-index: 10; margin: 0;}

main .series#series02 .chara{background-image:url(../png/chara02.png); top:72.344vw; left:-30vw}
main .series#series02 .about{margin-left: 46.875vw}

main .series#series03 .chara{ background-image: url(../png/chara03-sp.png); height: 132.344vw; left: -2vw; top:70.313vw;}

main .series#series04 {background: url(../png/bg_meru-sp.png) center 17.969vw no-repeat; background-size: 100vw auto;}
main .series#series04 h3{background: none; height:25.313vw; margin: 0;}
main .series#series04 h3 span {background: url(../png/h304-sp.png) center top no-repeat; background-size: 100vw auto;}
main .series#series04 img {width: 36.563vw; height: auto;position: absolute; right: 0; top: 0; z-index: 100;}
main .series#series04 .text {margin-bottom:14.531vw;}
main .series#series04 .text p{font-size:2.813vw; line-height:5vw;}

main .series#series04 .text dd {font-size: 2.344vw; line-height: 4.375vw; padding: 11.719vw 38.281vw 0 3.125vw; background:url(../png/profile-sp.png) left top no-repeat; height: 56.875vw; width: 80.781vw; background-size: 100% auto; position: relative;}

main .series#series05 h2 {margin-bottom: -13.5vw; position: relative; z-index: 10;}
main .series#series05 .wrap {position: relative; z-index:-1;}
main .series#series05 ol{display:flex; flex-wrap:wrap; margin:-14.375vw auto 0; padding-top:87.5vw; background: url(../png/cycle-sp.png) no-repeat center top / 95vw auto; width: 95vw;}
main .series#series05 ol li {padding:15.625vw 0 8.438vw; position: relative; color: #373d85; text-align: left;}
main .series#series05 ol li.synthesis{order:1;}
main .series#series05 ol li.battle{order:2;}
main .series#series05 ol li.quests{order:4;}
main .series#series05 ol li.explore{order:3;}
main .series#series05 ol > li::before{content: ''; position:absolute; top:0; left:0.156vw; width:100%; height:15.625vw; background:no-repeat center bottom / 100vw auto;}
main .series#series05 ol > li.synthesis::before{background-image:url(../png/h401-sp.png);}
main .series#series05 ol > li.battle::before{background-image:url(../png/h402-sp.png);}
main .series#series05 ol > li.quests::before{background-image:url(../png/h404-sp.png);}
main .series#series05 ol > li.explore::before{background-image:url(../png/h403-sp.png);}
main .series#series05 ol li::after{content: ''; background: url(../png/cycle_bg-bottom.png) center top no-repeat; background-size: 100% auto; height:8.438vw; width: 100vw; position: absolute; left: -2.5vw; bottom: 0;}
main .series#series05 ol li + li {margin-top:6.25vw;}
main .series#series05 ol li h3 {background: url(../png/h401-sp.png) center bottom no-repeat; background-size: 100vw auto; height: 15.625vw;}
main .series#series05 ol li:nth-child(2) h3 {background-image: url(../png/h402-sp.png);}
main .series#series05 ol li:nth-child(3) h3 {background-image: url(../png/h403-sp.png);}
main .series#series05 ol li:nth-child(4) h3 {background-image: url(../png/h404-sp.png);}
main .series#series05 ol li span {background: url(../png/cycle_bg-mid.png) center top repeat-y;background-size: 100vw auto; display: block;}
main .series#series05 ol li li {padding: 0; margin: 0; font-size: 3.125vw;}
main .series#series05 ol li li img {display:block; text-align: center; margin: 0 auto; width: 66.094vw; height: auto;}
main .series#series05 ol li li i{display:block; text-align: center; font-style: normal; padding-top:2.656vw;}
main .series#series05 ol li li:nth-child(2) i{padding-top:3.906vw;}
main .series#series05 ol li li + li{margin-top:5.938vw;}
main .series#series05 ol li li::after{display: none;}
main .series#series05 ol li p{ font-size: 3.438vw; line-height: 5.625vw; padding:4.063vw 9.375vw 0; margin-bottom:10.938vw;}
main .series#series05 ol li ul{position:relative; z-index: 20;}

}