@charset "utf-8";

.base-wp{background:url(../img/common/cont-common-bg.jpg) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; animation-name: fade-inanime; animation-duration: 2s; background-attachment:fixed;}

.system-crumb{background:url(../img/system/system-crumb.png)top center repeat-y; -moz-background-size:100% auto; background-size:100% auto;}

h2{width: 95%; max-width: 924px; margin: 0 auto 5% auto; padding: 180px 0  0 0;}
h3{width: 95%; max-width: 924px; margin: 0 auto 5% auto; padding: 5% 0  0 0;}

.cont-box{width: 1200px; margin: 0 auto;}

.system-tab-difficulty{width: 98%; max-width: 780px; margin: 0 auto;}
.system-tab-difficulty li, .system-tab-difficulty2 li{padding:0.5%;}

.system-tab-difficulty li a:hover, .system-tab-difficulty2 li a:hover{filter: contrast(140%);}


.system-tab-difficulty2{width: 98%; max-width: 780px; margin: 0 auto; padding-bottom: 5%;}



.cont1-txt1{width: 95%; max-width: 1000px; margin: 0 auto; padding: 3% 0 5% 0; text-align: center; font-size:35px; font-weight: 600; color:#707b8d;}

.cont1-box1{width: 100%; margin: 0 auto 5% auto; position: relative;}
.cont1-title1{width: 100%; max-width: 829px; position: absolute; right:0;}
.cont1-ss1-box{width: 95%; max-width: 1200px; margin: 0 auto; padding-top: 40px;}
.cont1-ss1{width: 70%;}
.cont1-icon1{width: 26%; padding-left:4%; padding-top: 5%;}


.cont1-box2{width: 100%; margin: 0 auto 3% auto; position: relative;}
.cont1-title2{width: 70%; max-width: 829px; position: absolute; left:0;}
.cont1-ss2-box{width: 95%; max-width: 1200px; margin: 0 auto; padding-top: 40px;}
.cont1-ss2{width: 70%;}
.cont1-icon2{width: 26%; padding-top: 6%; padding-left:4%;}



.cont2-box1{width: 100%; max-width: 1500px; margin: 0 auto 0 auto; position: relative;}
.cont2-title1{width: 70%; max-width: 829px; position: absolute; right:0;}
.cont2-ss1-box{width: 95%; max-width: 1200px; margin: 0 auto; padding-top: 40px;}
.cont2-txt1 div{font-size:35px; font-weight: 600; color:#707b8d; padding: 3% 0 0 0;}
.cont2-txt1 span.red{display:inline-block; font-size:35px; font-weight: 800; padding: 18px 0 0 0; color:#e43262; background:url(../img/system/crown.png) 0 0 no-repeat; -moz-background-size:100% auto; background-size:100% auto; margin-top:-18px;}
.cont2-ss1{width: 65%; padding-bottom: 10%;}
.cont2-icon1{width: 30%; text-align:right; margin-top:-5%; margin-left:auto; margin-right:10%;}

.cont2-box2{width: 100%; max-width: 1500px; margin: 0 auto 5% auto;  }
.cont2-ss2-box{width: 95%; max-width: 1200px; margin: 0 auto; padding-top: 40px; height: 400px; position: relative;}

.cont2-ss2-ss1{width: 55%; position: absolute; top:-20px;}
.cont2-ss2-ss2{width: 55%; position: absolute; right:0;}

.cont2-txt1 div.minitxt{font-size:20px;}

.cont3-box1{width: 100%; margin: 5% auto 3% auto;  }
.cont3-txt1, .cont3-txt2, .cont3-txt3{ font-weight: 600; text-align: center;}
.cont3-txt1{font-size:35px; color:#707b8d;}
.cont3-txt2{font-size:50px; color:#e43262;}
.cont3-txt3{font-size:35px; color:#707b8d; padding-bottom: 3%;}

.cont3-box2{width: 95%; max-width: 1000px; margin: 0 auto 0 auto; position: relative;}

.cont3-ss2-ss1{width: 50%;}
.cont3-ss2-txt1{width: 40%; padding: 5%; font-size:20px; font-weight: 600; color:#707b8d;
text-shadow: 
    #fff 2px 0px 2px, #fff -2px 0px 2px,
    #fff 0px -2px 2px, #fff -2px 0px 2px,
    #fff 2px 2px 2px, #fff -2px 2px 2px,
    #fff 2px -2px 2px, #fff -2px -2px 2px,
    #fff 1px 2px 2px, #fff -1px 2px 2px,
    #fff 1px -2px 2px, #fff -1px -2px 2px,
    #fff 2px 1px 2px, #fff -2px 1px 2px,
    #fff 2px -1px 2px, #fff -2px -1px 2px,
    #fff 1px 1px 2px, #fff -1px 1px 2px,
    #fff 1px -1px 2px, #fff -1px -1px 2px;
}

.cont3-box3{width: 95%; max-width: 1000px; margin: 0 auto 0 auto; position: relative; height: 200px;}
.cont3-ss3-box{width: 55%;  margin-top:-150px; position: absolute; right:0;}
.cont3-ss3-ss1{ text-align: right;}

.cont4-box{width: 95%; max-width: 883px; margin: 0 auto 0 auto;}

.cont5-txt1{width: 95%; max-width: 1000px; margin: 0 auto; padding: 3% 0 5% 0; text-align: center; font-size:35px; font-weight: 600; color:#707b8d;}

.cont5-menu{width: 95%; max-width: 900px; margin: 0 auto 5% auto;}
.cont5-menu li{width: 32%; padding:0.5%; position: relative;}
.cont5-menu li a:hover{filter: contrast(140%);}


.cont5-cont{width: 95%; max-width: 900px; margin: 0 auto 5% auto;}
.cont5-box{width: calc(32% - 6px); border: solid 1px #e43262; position: relative; box-shadow:rgba(228, 50, 98, 1) 4px 4px 0 0; margin: 0.5%;  padding-bottom:5%; margin-bottom: 5%; position: relative;}
.cont5-cont-title{position: absolute; margin-top:-28px;}
.cont5-cont-ss{padding: 35px 4% 50% 4%; }
.easy-cont5-catch{position: absolute; top:35%; padding-bottom:50px;}


.news-new-icon {
    width: 15%;
    position: absolute;
    top: 30px;
    left: auto;
    right:5px;
    -webkit-animation: blink 1.5s ease-in-out infinite alternate;
    -moz-animation: blink 1.5s ease-in-out infinite alternate;
    animation: blink 1.5s ease-in-out infinite alternate;
}

.news-new-icon2 {
    max-width: 15%;
    position: absolute;
    top: 10%;
    bottom: auto;
    left: auto;
    right:10px;
    -webkit-animation: blink 1.5s ease-in-out infinite alternate;
    -moz-animation: blink 1.5s ease-in-out infinite alternate;
    animation: blink 1.5s ease-in-out infinite alternate;
}


.ss-play-ss{ position: relative;}
.ss-play-btn{position: absolute; top:30px;  filter:alpha(opacity=65); -moz-opacity:0.65;-khtml-opacity:0.65; opacity:0.65;}
.ss-play-btn:hover{filter:alpha(opacity=1); -moz-opacity:1;-khtml-opacity:1; opacity:1; filter: contrast(140%);}

.ss-play-btn img{width: 100%;}



.cont5-chara1-bg{background:url(../img/system/easy-cont5-chara1.png) #fff bottom center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.cont5-chara2-bg{background:url(../img/system/easy-cont5-chara2.png) #fff bottom center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.cont5-chara3-bg{background:url(../img/system/easy-cont5-chara3.png) #fff bottom center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.cont5-chara4-bg{background:url(../img/system/easy-cont5-chara4.png) #fff bottom center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.cont5-chara5-bg{background:url(../img/system/easy-cont5-chara5.png) #fff bottom center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.cont5-chara6-bg{background:url(../img/system/easy-cont5-chara6.png) #fff bottom center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.cont5-chara7-bg{background:url(../img/system/easy-cont5-chara7.png) #fff bottom center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.cont5-chara8-bg{background:url(../img/system/easy-cont5-chara8.png) #fff bottom center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.cont5-chara9-bg{background:url(../img/system/easy-cont5-chara9.png?20210405) #fff bottom center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }


.cont6-box{width: 95%; max-width: 900px; margin: 0 auto 0 auto; padding-bottom: 5%;}






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

.system-crumb{background:url(../img/system/system-crumb.png)top center repeat-y; -moz-background-size:100% auto; background-size:100% auto;}
h2{padding: 100px 0 0 0;}
.cont1-title1{width: 70%;}
.cont1-txt1{padding: 3% 0 5% 0; font-size:3.3vw; font-weight: 600;text-shadow: 
    #fff 2px 0px 2px, #fff -2px 0px 2px,
    #fff 0px -2px 2px, #fff -2px 0px 2px,
    #fff 2px 2px 2px, #fff -2px 2px 2px,
    #fff 2px -2px 2px, #fff -2px -2px 2px,
    #fff 1px 2px 2px, #fff -1px 2px 2px,
    #fff 1px -2px 2px, #fff -1px -2px 2px,
    #fff 2px 1px 2px, #fff -2px 1px 2px,
    #fff 2px -1px 2px, #fff -2px -1px 2px,
    #fff 1px 1px 2px, #fff -1px 1px 2px,
    #fff 1px -1px 2px, #fff -1px -1px 2px;}
.cont1-ss1-box{padding-top: 4.5%;}
.cont1-ss1{width: 90%;}
.cont1-icon1{display:none;}


.cont1-title2{width: 70%;}
.cont1-txt2{padding: 3% 0 5% 0; font-size:3.3vw; font-weight: 600;}
.cont1-ss2-box{padding-top: 4.5%;}
.cont1-ss2{width: 100%;}
.cont1-icon2{display:none;}

.cont2-ss1-box{width: 95%; max-width: 680px; margin: 0 auto; text-align: center;}
.cont2-txt1{width: 100%;}
.cont2-txt1 div{width: 100%;  font-size:4.3vw; text-align: center; text-shadow: 
    #fff 2px 0px 2px, #fff -2px 0px 2px,
    #fff 0px -2px 2px, #fff -2px 0px 2px,
    #fff 2px 2px 2px, #fff -2px 2px 2px,
    #fff 2px -2px 2px, #fff -2px -2px 2px,
    #fff 1px 2px 2px, #fff -1px 2px 2px,
    #fff 1px -2px 2px, #fff -1px -2px 2px,
    #fff 2px 1px 2px, #fff -2px 1px 2px,
    #fff 2px -1px 2px, #fff -2px -1px 2px,
    #fff 1px 1px 2px, #fff -1px 1px 2px,
    #fff 1px -1px 2px, #fff -1px -1px 2px;}
.cont2-txt1 span.red{display:inline-block; font-size:6vw; font-weight: 800; padding: 4% 0 0 0; color:#e43262; margin-top:0; background:url(../img/system/crown.png) 0 0 no-repeat; -moz-background-size:100% auto; background-size:100% auto;}
.cont2-ss1{width: 100%; padding-bottom: 10%;}
.cont2-icon1{display:none;}

.cont2-box2{width: 100%; max-width: 1500px; margin: 5% auto 5% auto;  }
.cont2-ss2-box{width: 95%; max-width: 1200px; margin: 0 auto; padding-top: 40px; height: auto; position: relative; padding-bottom:35%;}

.cont2-ss2-ss1{width: 55%; position: absolute; top:5%;}
.cont2-ss2-ss2{width: 55%; position: absolute; right:0;}

.cont2-txt1 div.minitxt{font-size:20px;}

.cont3-box1{width: 95%; margin: 5% auto 5% auto;  }

.cont3-txt1, .cont3-txt2, .cont3-txt3{ font-weight: 600; text-align: center; padding-bottom: 2%;
text-shadow: 
    #fff 2px 0px 2px, #fff -2px 0px 2px,
    #fff 0px -2px 2px, #fff -2px 0px 2px,
    #fff 2px 2px 2px, #fff -2px 2px 2px,
    #fff 2px -2px 2px, #fff -2px -2px 2px,
    #fff 1px 2px 2px, #fff -1px 2px 2px,
    #fff 1px -2px 2px, #fff -1px -2px 2px,
    #fff 2px 1px 2px, #fff -2px 1px 2px,
    #fff 2px -1px 2px, #fff -2px -1px 2px,
    #fff 1px 1px 2px, #fff -1px 1px 2px,
    #fff 1px -1px 2px, #fff -1px -1px 2px;
}
.cont3-txt1{font-size:4vw; color:#707b8d;}
.cont3-txt2{font-size:6vw;  font-weight: 800;}
.cont3-txt3{font-size:4vw; color:#707b8d; padding-bottom: 3%;}

.cont3-ss2-ss1{width: 100%;}
 .cont3-ss2-txt1{width: 90%; padding: 5%; font-size:3vw; text-align: center; line-height:1.61; 
 text-shadow: 
    #fff 2px 0px 2px, #fff -2px 0px 2px,
    #fff 0px -2px 2px, #fff -2px 0px 2px,
    #fff 2px 2px 2px, #fff -2px 2px 2px,
    #fff 2px -2px 2px, #fff -2px -2px 2px,
    #fff 1px 2px 2px, #fff -1px 2px 2px,
    #fff 1px -2px 2px, #fff -1px -2px 2px,
    #fff 2px 1px 2px, #fff -2px 1px 2px,
    #fff 2px -1px 2px, #fff -2px -1px 2px,
    #fff 1px 1px 2px, #fff -1px 1px 2px,
    #fff 1px -1px 2px, #fff -1px -1px 2px;
}


.cont3-box3{width: 95%; max-width: 1000px; margin: 0 auto 0 auto; position: relative; height: auto; padding-bottom:60%;}
.cont3-ss3-box{width: 100%;  margin-top:0; position: absolute; right:0;}
.cont3-ss3-ss1{ text-align: right;}

.cont4-box{width: 95%; max-width: 883px; margin: 5% auto 0 auto;}
.cont5-txt1{font-size:3vw;
 text-shadow: 
    #fff 2px 0px 2px, #fff -2px 0px 2px,
    #fff 0px -2px 2px, #fff -2px 0px 2px,
    #fff 2px 2px 2px, #fff -2px 2px 2px,
    #fff 2px -2px 2px, #fff -2px -2px 2px,
    #fff 1px 2px 2px, #fff -1px 2px 2px,
    #fff 1px -2px 2px, #fff -1px -2px 2px,
    #fff 2px 1px 2px, #fff -2px 1px 2px,
    #fff 2px -1px 2px, #fff -2px -1px 2px,
    #fff 1px 1px 2px, #fff -1px 1px 2px,
    #fff 1px -1px 2px, #fff -1px -1px 2px;
}


.cont5-cont{width: 95%; max-width: 900px; margin: 0 auto 5% auto;}
.cont5-box{width: calc(48% - 6px); border: solid 1px #e43262; position: relative; box-shadow:rgba(228, 50, 98, 1) 4px 4px 0 0; margin: 1%;  padding-bottom:5%; margin-bottom: 5%;}
.cont5-cont-title{position: absolute; margin-top:-5%; height: auto;}
.cont5-cont-ss{padding: 20% 4% 50% 4%; }
.easy-cont5-catch{position: absolute; top:35%; padding-bottom:50px;}



}




@keyframes fade-inanime {
    0% {opacity: 0;}
    100% {opacity: 1;}
}