@charset "UTF-8";

@import url(/assets/css/animate.css);
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);

.read{font-family:  'Noto Sans JP'; }

.cp_header{width: 100%; max-width: 1500px; margin: 30px auto 0 auto;}
.cp_bg{background: #fff; letter-spacing: 0.1em; line-height:1.61;}

.read{width: 95%; max-width: 850px; margin: 0 auto; font-size: 24px; color: #1d2088; font-weight: 600; padding: 5% 0 3% 0; text-align: center;}

.text{width: 95%; max-width: 1000px; margin: 0 auto; padding: 5% 0; font-family:  'Noto Sans JP';}

h2{font-size: 30px; color: #fff; padding-bottom: 3%; text-align: center;

	padding: 2% 0 1% 0;
    width:65%;
    border-radius: 90px 90px 0 0;
    -moz-border-radius: 90px 90px 0 0;
    -webkit-border-radius: 90px 90px 0 0;
    background:#1d2089;
    margin: 0 auto;
    


}
h3{font-size: 30px; color: #fe0041; padding-bottom: 3%; text-align: center;}
h4{padding-top: 5px;}


.step1{width: 90%; max-width: 1000px; margin: 0 auto; background:#1d2089; color: #fff; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; padding: 5%; position: relative;}
.step2{color: #fe0041; font-size: 25px; text-align: center;}

.ycolor{color: #ffe200; font-size: 20px;}

.now_icon {
    position: absolute;
    top:-4%;
    right: 2%;
    width: 40%;
    max-width: 130px;
    -webkit-animation: newBlinkFrame 1s infinite;
    animation: newBlinkFrame 1s infinite;
    background:#ffe200;
    text-align: center;
    border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
    color: #1d2089;
}



.free_btn a{
	width: 80%;
	max-width: 500px;
	display: block;
	margin: 0 auto;
	background:#fe0042;
	text-decoration: none;
	color: #fff;
	font-size: 30px;
	border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
	text-align: center;
	padding: 3% 0;
}
.free_btn {padding: 3% 0 0 0;}
.free_btn a:hover{filter:alpha(opacity=65); -moz-opacity:0.65; -khtml-opacity:0.65; opacity:0.65;}


.marker1 { background: linear-gradient(transparent 60%, #ffff66 60%); color: #fe0042; font-size: 150%;}
.marker2 { background: linear-gradient(transparent 60%, #ffff66 60%); color: #fe0042;}

.shop_box{display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; display: flex; font-size: 13px; letter-spacing: 0em;}
.shop_box .ug_box{width: calc(32% - 4px); margin: 0.5%; border: solid 2px #1d2089; padding-bottom: 3%; display: flex; flex-direction: column;}
.shop_box .dl_box, .shop_box .pk_box{width: calc(32% - 4px); margin: 0.5%; border: solid 2px #9f0f0f; padding-bottom: 3%;}


.shop_box .marker2{font-size: 170%;}

.shop_box .dl_box{  display: flex; flex-direction: column;}
.shop_box .pk_box{  display: flex; flex-direction: column;}

.shop_box .ug_box .free_btn, .shop_box .pk_box .free_btn, .shop_box .dl_box .free_btn{margin-top: auto;}

.shop_box_ug_title{background:#1a295f; text-align: center; color: #fff; padding: 10px 0; }
.shop_box_pk_title{background:#9f0f0f; text-align: center; color: #fff; padding: 10px 0; }


.shop_box_txt{padding: 3%;}

.cp_read_img{width: 95%; max-width: 950px; margin: -200px auto 0 auto;}




@media screen and (max-width: 800px) {
.read{font-size: 2.7vw;}

h2{font-size: 3vw;}
.step1{border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding: 5%; position: relative;}

.free_btn a{
	font-size: 3.5vw;
}

.cp_read_img{margin: -15% auto 0 auto;}

}


.banner a:hover{filter:alpha(opacity=65); -moz-opacity:0.65; -khtml-opacity:0.65; opacity:0.65;}