@charset "utf-8";
#system {text-align: center; padding: 40px 0 0;}
#system h2{margin: 0 0 40px;}
#system .base {position: relative; opacity: 0; width: 100%; height: auto;}
#system .swiper-slide{background-size: cover;}
#system .swiper-slide .toggleContent {position: absolute; left: 0; bottom: 0; width: 100%; overflow: hidden;}
#system .swiper-slide .toggleContent header {position: relative; min-height: 112px;}
#system .swiper-slide .toggleContent header p.close{position: absolute; left: 50%; top: 13px; margin-left: 534px; z-index: 100;}
#system .swiper-slide .toggleContent header p.close a{display: block; padding: 1px; transition: 0.3s;}
#system .swiper-slide .toggleContent header p.close a::after{content: ''; background: url(/thelastremnant/images/btn_system.png) center bottom no-repeat; position: absolute; right: 0; bottom: 0; width: 117px; height: 60px; margin: 0 0 0 -0; opacity: 0; transition: 0.8s;}
#system .swiper-slide .toggleContent header p.close a.close::after{opacity: 1;}
#system .swiper-slide .toggleContent header p.close a.close img {opacity: 0;}
#system .swiper-slide .toggleContent header p.close a:hover{opacity: 0.7;}

#system .swiper-slide h3 {position:absolute; right: 50%; width: 700px; bottom: 30px; z-index: 100; text-align: left; padding: 0 0 0 70px;}
#system .swiper-slide.guild h3 {bottom:42px;}

/* battle system */
#system .swiper-slide.h4in .toggleContent h3 {position: relative; top: -10px; padding: 0; width: 1400px; right: inherit; margin: 0 auto;}
#system .swiper-slide.h4in .toggleContent::before{content: ''; width: 1920px; height: 74px; position: absolute; left: 50%; top: 112px; z-index: 1; background:url(/thelastremnant/images/bg_battle_system.png) center top no-repeat; margin-left: -960px;}

#system .swiper-slide .togglein {position: relative; left: 0; bottom: 0; text-align: left; display: flex; align-content: flex-start; align-items: flex-start; justify-content: center; overflow: hidden;}
#system .swiper-slide .togglein::after{content: ''; width: 500%; height: 100%; position: absolute; left: 50%; bottom: 0; z-index: 0; background: rgba(0,0,0,0.7); margin-left: -250%;}
#system .swiper-slide .togglein .cell {width: 620px; position: relative; z-index: 10; padding: 0 50px 0 0;}
#system .swiper-slide .togglein .cell.full {width: 1240px; padding: 0;}
#system .swiper-slide .togglein .cell.right {padding: 0 0 0 50px;}
#system .swiper-slide .togglein h4 {font-size: 27px; line-height: 74px; color: #28292c; text-align: left; font-weight: 900;}
.macos.firefox #system .swiper-slide .togglein h4{font-weight:600;}
#system .swiper-slide .togglein p {font-size: 18px; line-height: 36px; color:#fff; padding: 38px 0 38px 300px;}
.ie #system .swiper-slide .togglein p{font-weight:400;}
.macos.firefox #system .swiper-slide .togglein p{font-weight:500;}
#system .swiper-slide.h4in .togglein p {padding: 22px 0;}

@media screen and (min-width:1921px){
#system .swiper-slide.h4in .toggleContent::before{width: 100%; left: 0; background-size:100% auto; margin-left: 0;}
}
@media screen and (min-width:641px) and (max-width:1400px){
#system .swiper-slide .togglein .cell {width: 580px; position: relative; z-index: 10; padding: 0 30px 0 0;}
#system .swiper-slide .togglein .cell.right {padding: 0 0 0 30px;}
#system .swiper-slide .togglein .cell.full {width: 1150px; padding: 0;}
#system .swiper-slide h3 {width: 600px;padding: 0 0 0 0px;}
#system .swiper-slide.h4in .toggleContent h3 {position: absolute; left: inherit; right: 50%; top: 0; margin-left: 0; width: 600px; margin-right: 65px;}
#system .swiper-slide.h4in .togglein h4 {font-size: 27px; line-height: 74px; color: #28292c; text-align: left; font-weight: 900;}
#system .swiper-slide .togglein p {font-size: 17px; line-height: 36px; color:#fff; padding: 38px 0 38px 290px;}
#system .swiper-slide.h4in .togglein p {font-size: 17px; line-height: 36px; color:#fff; padding: 22px 0;}
}
@media screen and (min-width:641px) and (max-width:1284px){
#system .swiper-slide .toggleContent header p.close {margin-left: 0; left: inherit; right:20px;}
}

@media screen and (max-width:640px){ 
/* SP */
#system {margin-bottom: 2.625vw; padding: 5vw 0 0;}
#system h2{margin:16.875vw 0 5.625vw;}
#system .swiper-slide {background:none !important;}
#system .swiper-slide .img {width: 100vw; height: auto; display: block;}

#system .swiper-slide .toggleContent {position: relative; width: 100vw; background: url(/thelastremnant/images/sp/bg_system.jpg) center top no-repeat; background-size: cover;}
#system .swiper-slide .toggleContent header {position: relative; min-height: inherit;}
#system .swiper-slide .toggleContent header p.close{display: none !important;}

#system .swiper-slide h3 {position:static !important; padding: 0; width: 100vw; height: auto;}
#system .swiper-slide.guild h3 {bottom:0;}
#system .swiper-slide h3 img {width: 100vw; height: auto;}

/* battle system */
#system .swiper-slide.h4in .toggleContent h3 {top:0; width: auto; right: inherit;}
#system .swiper-slide.h4in .toggleContent::before{display: none;}

#system .swiper-slide .togglein {text-align: left; display:block;}
#system .swiper-slide .togglein::after{display: none;}
#system .swiper-slide .togglein .cell {width: 100vw; padding: 0;}
#system .swiper-slide .togglein .cell.full {width: 100vw; padding: 0;}
#system .swiper-slide .togglein .cell.right {padding: 0;}
#system .swiper-slide .togglein h4 {font-size: 4.219vw; line-height: 11.563vw; text-align: center; background: url(/thelastremnant/images/sp/bg_system.png) center top no-repeat; background-size: cover;}
#system .swiper-slide .togglein p {font-size: 2.813vw; line-height: 2; padding:0 6.475vw 8.063vw; margin-top: -1vw;}
#system .swiper-slide.h4in .togglein p {padding: 4.063vw 6.475vw; margin-top: 0;}
#system .base{display: none;}
}


.swiper-pagination {width: 1200px; left: 50%; margin-left: -600px; bottom: -42px; z-index: 100;}
.swiper-pagination.swiper-pagination-hidden {opacity: 0;}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {bottom: 10px; left: 0; width: 100%;}
.swiper-pagination-bullet {
  width: 19px;   height: 19px;  display: inline-block;
  border-radius: 0;   background: #979b93; opacity: 1;  margin: 0 5px; cursor: pointer; outline: none !important;
}
.swiper-pagination-bullet-active {opacity: 1; background: #28292c;}
.swiper-button-prev,
.swiper-button-next {background: url(/thelastremnant/images/btn_arr.png) left top no-repeat; width: 69px; height: 150px; cursor: pointer; position: absolute; top: 20vw; margin-top: 0; padding: 0; outline: none;}
.swiper-button-prev { left: inherit; right: 50%; margin-right: 636px; margin-left: inherit; transition: 0.3s;}
.swiper-button-next { left: 50%; right: inherit; margin-left: 0; margin-left: 636px; transform: rotate(180deg); transition: 0.8s;}

.swiper-button-prev:hover,
.swiper-button-next:hover{filter: brightness(1.3);}


@media screen and (max-width:1439px) and (min-width:641px){
/*
.swiper-button-prev,
.swiper-button-next {background-size: 100% 100%; width: 40px; height: 90px; cursor: pointer; position: absolute; margin-top: 150px; top: 0;}
.swiper-button-prev { left: 20px; right: inherit; margin-right:0; margin-left: 0;}
.swiper-button-next { left: inherit; right: 20px; margin-left: 0;}
*/
.swiper-pagination {width: auto; left: inherit; margin-left: 0; bottom:0; display: inline-block; position: relative; vertical-align: middle; margin: 15px 0 0; padding: 0 50px;}

.swiper-button-prev,
.swiper-button-next {background: url(/thelastremnant/images/sp/btn_arr.jpg) left top no-repeat; background-size: 100% 100%; width: 70px; height: 70px; cursor: pointer; position: static; top: 0; margin-top: 0; padding: 0; outline: none; display: inline-block; vertical-align:middle; margin: 15px 0 0;}


}


@media screen and (max-width:640px){ 
/* SP */
.swiper-pagination {width: auto; left: inherit; margin-left: 0; bottom:0; display: inline-block; position: relative; vertical-align: middle; margin: 2.031vw 0 0; padding: 0 5.469vw;}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {bottom: 0; left: 0; width: 100%;}
.swiper-pagination-bullet {
  width: 2.969vw;   height: 2.969vw;   margin: 0 0.781vw;
}
.swiper-button-prev,
.swiper-button-next {background: url(/thelastremnant/images/sp/btn_arr.jpg) left top no-repeat; background-size: 100% 100%; width: 10.781vw; height: 10.781vw; cursor: pointer; position: static; top: 0; margin-top: 0; padding: 0; outline: none; display: inline-block; vertical-align:middle; margin: 2.031vw 0 0;}
.swiper-button-prev { left: inherit; right: 0; margin-right: 0; margin-left: inherit;}
.swiper-button-next { left: 0; right: inherit; margin-left: 0; margin-left: 0; transform: rotate(180deg);}

}