@charset "utf-8";

/* stem
------------------------------------------------------------------------------------------- */
.stem_wp{background:url(../img/stem/bg.jpg);}

.stem_wp_in{width: 100%; max-width: 1500px; margin: 0 auto; background:url(../img/stem/bg_in.png) top center repeat-y; padding-top: 100px; -moz-background-size: 100% auto; background-size: 100% auto; padding-bottom: 5%;}

.stem_cont{
	width: 83%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 5%;
	background:#fff;
	border: solid 1px #ffdbe0;
box-shadow:rgba(255, 219, 224, 0.809804) 0px 0px 6px 3px;
-webkit-box-shadow:rgba(255, 219, 224, 0.809804) 0px 0px 6px 3px;
-moz-box-shadow:rgba(255, 219, 224, 0.809804) 0px 0px 6px 3px;
}

.title{width: 40%; max-width: 465px; margin: 0 auto 0 auto;}


h2{
	width: 90%;
	max-width: 868px;
	margin: 0 auto 3% auto;
	font-size: 28px;
	padding-top: 5%;
	padding-bottom: 2%;
	color: #c7354d;
	text-align: center;
	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;
	background:url(../img/stem/title_bg.png) bottom center no-repeat;
	-moz-background-size: 100% 40%; background-size: 100% 40%;
}

h3 {
width: calc(100% - 4px);
max-width: 996px;
text-align: center;
font-size: 20px;
padding: 1% 0;
margin: 0 auto 3% auto;
color: #ffffa4;
background: #a90329;
background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%);
background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
border: solid 2px #9b9635;

}



h4{width: 70%; max-width: 600px; text-align: center; font-size: 20px; margin: 2% auto 0 auto; padding: 8px 0; color: #9e2a30; font-weight: 800;}






.text_box{padding: 0 0 2% 0; color: #8a8a8a; font-size: 16px; text-align: center; line-height:1.61;}
.text_box2{padding: 6% 0 5% 0; color: #8a8a8a; font-size: 16px; text-align: center; line-height:1.61;}
.ss_item img.sd{box-shadow:8px 11px 1px -2px #ffdbe0;}
.ss_item2{width: 90%; max-width: 700px; margin: 0 auto 5% auto;  position: relative; }
.ss_item2 img.sd{box-shadow:8px 11px 1px -2px #ffdbe0;}


.ss_box{width: 90%; max-width: 1000px; position: relative; padding-bottom: 55%; margin: 0 auto;}
.ss_box2{width: 90%; max-width: 1000px; position: relative; padding-bottom: 30%; margin: 0 auto;}
.ss_box3{width: 90%; max-width: 1000px; position: relative; padding-bottom: 40%; margin: 0 auto;}
.ss_box4{width: 90%; max-width: 1000px; margin: 0 auto;}

.ss1{width: 49%; max-width: 500px; position: absolute; margin: 0.5%;}
.ss2{width: 49%; max-width: 500px; position: absolute; right:0; margin: 0.5%;}


.ss3{width: 50%; max-width: 500px; position: absolute; }
.ss4{width: 65%; max-width: 550px; position: absolute; bottom: 25%; right:0;}

.ss10{width: 45%; max-width: 500px; position: absolute; bottom: 0; /* transform: rotate(-3deg);*/}


.ss5{width: 70%; max-width: 700px; position: absolute; }
.ss6{width: 40%; max-width: 392px; position: absolute; bottom: 0; right:0;}



.ss7{width: 60%; max-width: 248px; margin: 0 auto 5% auto;}

.ss8{width: 49%; max-width: 500px; position: absolute; margin: 0.5%;}
.ss9{width: 49%; max-width: 500px; position: absolute; right:0; margin: 0.5%;}


.at{padding: 3% 0 6% 0; color: #8a8a8a; font-size: 14px; text-align: left; line-height:1.61;}


.item_new_icon {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

@media screen and (max-width: 640px) {
.item_new_icon {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
     width : 25%;
}

h2{font-size: 20px;
	background:url(../img/stem/title_bg.png) bottom center no-repeat;
	-moz-background-size: 100% 60%; background-size: 100% 60%;
}

.ss_box{width: 90%; max-width: 1000px; position: relative; padding-bottom: 55%; margin: 0 auto;}


}


.stem_menu{width: 95%; max-width: 800px; margin: 0 auto 5% auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.stem_menu li{width: 100%; border: solid 1px #7c4a07; text-align: center; padding: 1px; display:flex; }
.stem_menu li a{width: 100%; padding: 10px 5%; display:block; background:#c7354d; color: #fff;}
.stem_menu li a:hover{-moz-opacity:0.65; -khtml-opacity:0.65; opacity:0.65;}

.stem1 .stem_menu li.stem1tad a{background:#7c4a07;}
.stem2 .stem_menu li.stem2tad a{background:#7c4a07;}
.stem3 .stem_menu li.stem3tad a{background:#7c4a07;}

/* .stem_menu li.stem2tad{width: 70%; background:#aeaeae; padding: 10px 5%; color: #fff; display:block; text-align: center;}*/

.stem_menu li span{display:inline-block;}

.new-icon{padding-left: 3px; color: #fdd3da; animation: Flash1 1s infinite; font-size: 90%;}

@keyframes Flash1{
  50%{
    opacity: 0.5;
  }
}


.btn_free{max-width: 400px; margin: 0 auto;}

.btn_free a{
    display: block;
    padding: 5px 5px;
    border: double 4px #fff;
    letter-spacing: 0.1em;
    color: #fff;
    background: #b41c2d;
    text-align: center;
    font-size: 20px;
}
.btn_free a:hover{filter:alpha(opacity=65); -moz-opacity:0.65; -khtml-opacity:0.65; opacity:0.65;}



.game_movie { width: 100%; max-width: 1000px; margin: 0 auto;}
.game_movie video{width: 100%; display: block;}


.enjin{width: 100%; max-width: 800px; margin: 0 auto;}

.enjin dt{width: 50%;}
.enjin dd{width: 50%; text-align: left;}


@media screen and (max-width: 640px) {
.enjin {display: block;}
.enjin dt{width: 100%;}
.enjin dd{width: 100%; text-align: center;}

}