@charset "utf-8";
.bgn_bg{background:url(/winningpost8/2017/img/newcomer/main_bg.jpg); padding-top: 90px;}
.header{width: 100%; background:url(/winningpost8/2017/img/newcomer/header_bg.jpg) top center no-repeat; margin: 0 auto; -moz-background-size:100% auto; background-size:100% auto; padding-bottom: 20px; }
.header_menu{width: 90%; max-width: 1000px; margin: 0 auto 0 auto; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; margin-top: -6px;
background: rgb(255,255,255);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(231,255,198,1) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(231,255,198,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(231,255,198,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7ffc6',GradientType=0 );


}
.header_menu li{width: 20%; float: left;}
.header_menu img{width: auto; max-width: 100%;}
.header_menu a{color: #1e7c10; text-align: center; width: 100%; display: block; font-weight: 600; font-size: 20px; padding: 30px 10px 20px 10px;}
.header_menu a:hover{color: #f00; padding: 20px 10px 20px 10px;}
.header_menu a:hover:before{content: "▼"; display: block;}

#step1 .beginnerstep1 a,
#step2 .beginnerstep2 a,
#step3 .beginnerstep3 a,
#step4 .beginnerstep4 a,
#step5 .beginnerstep5 a{color: #f00; padding: 20px 10px 20px 10px;}

#step1 .beginnerstep1 a:before,
#step2 .beginnerstep2 a:before,
#step3 .beginnerstep3 a:before,
#step4 .beginnerstep4 a:before,
#step5 .beginnerstep5 a:before{content: "▼"; display: block; color: #f00;}

.text_tobecontinued{text-align: center; padding: 50px 0; font-size: 24px; }


.header_title{width: 95%; max-width: 950px; margin: 0 auto; padding: 24px 0 0 0;}
.header_title img{width: auto; max-width: 100%;}

.left_chara{overflow: hidden; width: 100%; max-width: 1000px; margin: 0 auto;}
.left_chara dt{ float: left; width: 300px;}
.left_chara dd{ float: left; width: calc(90% - 40px); margin-right: -300px; padding-right: 300px; box-sizing: border-box; padding-top: 10%;}

.right_chara{overflow: hidden; width: 100%; max-width: 1000px; margin: 0 auto;}
.right_chara dt{ float: right; width: 300px;}
.right_chara dd{ float: right; width: calc(90% - 40px); margin-right: -300px; padding-right: 300px; box-sizing: border-box; padding-top: 10%;}


.arrow_box { width: 85%; position: relative; background: #fff; border: 4px solid #fff; font-size: 22px; padding: 40px 20px; line-height:1.5; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #215d00; font-weight: 800; font-feature-settings : "palt";}
.arrow_box:after, .arrow_box:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.arrow_box:after { border-color: rgba(136, 183, 213, 0); border-right-color: #fff; border-width: 10px; margin-top: -10px;}
.arrow_box:before { border-color: rgba(194, 225, 245, 0); border-right-color: #fff; border-width: 16px; margin-top: -16px;}


.arrow_box2 { width: 95%; position: relative; background: #fff; border: 4px solid #fff; font-size: 22px; padding: 40px 20px; line-height:1.5; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #215d00; font-weight: 800; font-feature-settings : "palt";}
.arrow_box2:after, .arrow_box2:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.arrow_box2:after { border-color: rgba(136, 183, 213, 0); border-left-color: #fff; border-width: 10px; margin-top: -10px;}
.arrow_box2:before { border-color: rgba(194, 225, 245, 0); border-left-color: #fff; border-width: 16px; margin-top: -16px;}


.red{font-weight: 800; color: #f00;}
.mark{font-weight: 800; background: linear-gradient(transparent 50%, #ff0 0%);}

.subtitle{width: 95%; max-width: 773px; margin: 0 auto; padding: 42px 0; text-align: center;}
.subtitle img{width: auto; max-width: 100%;}

.matome{width: 95%; max-width: 1000px; margin: 0 auto; padding: 40px 0;}
.matome img{width: auto; max-width: 100%;}

.ss_box{width: 95%; max-width: 900px; margin: 0 auto; padding: 40px 0;}
.ss_box img{width: calc(100% - 4px); border: solid 2px #fff;}

.ss_box_2type li{float: left; width: 49.5%; padding:0.25%;}

.next_page a{background: #dd0000; padding: 3%; display:block; color: #fff; margin-top: 24px;}


@media screen and (max-width: 480px) {
.header_title{width: 100%; max-width: 950px; margin: 0 auto; padding: 24px 0 0 0;}

.left_chara dt{ width: 50%;}
.left_chara dd{ width: calc(50% - 20px); margin-right: 0; padding-right: 0;}
.arrow_box{font-size: 4vw; padding: 10px; font-weight: 400;}
.arrow_box br{display: none;}

.left_chara dt img,
.right_chara dt img{width: auto; max-width: 100%;}

.right_chara dt{ width: 50%;}
.right_chara dd{ width: calc(50% - 20px); margin-right: 0; padding-right: 0;}
.arrow_box2{font-size: 4vw; padding: 10px; font-weight: 400;}
.arrow_box2 br{display: none;}

.header_menu{padding: 5px 0;}
.header_menu li{width: 90%; float: none; margin: 0 auto; padding: 0; border-top: solid 1px #d0ff91; border-bottom: solid 1px #fff;}
.header_menu a{color: #1e7c10; text-align: center; width: 100%; display: block; font-weight: 600; font-size: 3.4vw; padding: 0.5% 0.5%;}
.header_menu a:hover{color: #f00; padding: 0;}
.header_menu a:hover:before{content: "▶"; display:inline-block;}


#step1 .beginnerstep1 a,
#step2 .beginnerstep2 a,
#step3 .beginnerstep3 a,
#step4 .beginnerstep4 a,
#step5 .beginnerstep5 a{color: #f00; padding: 0.5% 0.5%;}

#step1 .beginnerstep1 a:before,
#step2 .beginnerstep2 a:before,
#step3 .beginnerstep3 a:before,
#step4 .beginnerstep4 a:before,
#step5 .beginnerstep5 a:before{content: "▶"; display:inline-block;}






}

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}