@charset "utf-8";

.main{
background-image: url("../img/kv_rpbg.png");
background-position:top center;
background-size:84px;
background-repeat: repeat-x;
background-color: #fbe8c2;
}
.section-block{
background-image: url("../img/kv_big.png");
background-position:top center;
background-size: 1614px;
background-repeat: no-repeat;
}

/*KV*/
.main__about-title{
text-align: center;
}
.main__about-title{
min-height: 400px;
}
.main__about-title img{
max-width: 1189px;
width: 100%;
}
.kv_small{
display: none;
}

@media (max-width: 1868px){

.main{
background-size:68px;
}	

.section-block{
background-size: 1290px !important;
}
}

@media (max-width: 1400px){
.section-block{
background-size: 1100px !important;
}
.kv_big{
display: none;
}
.section-block{
background-size: 1000px;
}
.main{
background-image: none;
}
}	
@media (max-width: 789px){
.kv_small{
display: block !important;
}
.main{
background-image: none;
}
.section-block{
background-image: none;
}
.main__about-title{
min-height: 300px;
}
}

/*charm*/
.main__charm{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}

.main__charm .main__charm-box{
text-align: center;
margin: 7px;
padding: 15px;
border-radius: 10px;
border: 2px solid #ec6109;
background-color: #fff;
flex: 1;
height: 390px;

}

@media (max-width: 1868px){
.main__charm .main__charm-box{height: 360px;}
}

@media (max-width: 1080px){
.main__charm .main__charm-box{height: 310px;}
}


.main__charm .main__charm-box .main__charm-box-title{
border-bottom: 2px solid #ffc400;
padding-bottom: 5px;
margin-bottom: 10px;
}

.main__charm .main__charm-box .main__charm-box-title img{
width: 65%;
}

.main__charm .main__charm-box .main__charm-box-img img{
width: 90%;
}

.main__charm .main__charm-box .main__charm-box-text{
font-size: 95%;
}

.main__charm .main__charm-box .main__charm-box-text span{
font-size: 80%;
}

.main__charm-info{
padding-bottom: 40px;
}

.main__charm-info p{
font-size: 80%;
text-align: right;
margin-right: 10px;
}

.main__charm-info .cta-site{
width: 30%;
text-align: center;
min-width: 280px;
margin: 20px auto 0px;
}

@media (min-width: 790px){
.area__pc-only{
display: block;
}

.area__sp-only{
display: none;
}
}

@media (max-width: 789px){
.area__pc-only{
display: none !important;
}

.area__sp-only{
display: block;
padding-top: 20px;
}

.main__charm-box{
margin-top: 0px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 30px;
height: auto !important;
}	


.main__charm-box-title{
margin-top: -30px;
border: 0px !important;

}

.main__charm-box-title img{
min-width: 250px;
width: 65%;
}	

.main__charm-box-text{
text-align: left;
}

.main__charm-box-text strong{
font-weight: normal !important;
color: #ec6109 !important;
}

.ct-small{
color: #666;
font-size: 90%;
}

.main__charm-box-ponta{
margin: 15px 0px 0px;
padding: 15px 0px 0px !important;
border-top: 2px solid #ffc400;
}

.main__charm-box-ponta::after{
content: "";
display: block;
clear: both;
}

.ponta_left{
width: 25%;
float: left;
}

.ponta_right{
width: 73%;
float: right;
text-align: left;
}

.ponta_left img{
width: 100%;
}

.ponta_right h4{
font-weight: bolder !important;
color: #ec6109;
font-size: 120% !important;
}
.ponta_right p{
font-size: 90% !important;
}
}

/*topics*/
.main__topics{
background-color: #000;
margin-bottom: 50px !important;
background-image: url("../img/bg_topics.png");
background-repeat: repeat-x;
background-size: contain;
margin-top: 20px;
width: 100%;
}

.main__topics .main__topics-wrap {
max-width: 860px;
width: 90%;
margin: 0px auto;
}

.main__topics .main__topics-wrap .main__topics-title {
text-align: center !important;
margin-bottom: 10px;
}

.main__topics .main__topics-wrap .main__topics-title img {
max-width: 500px;
margin: auto;
position: relative;
margin-top: -30px;
width: 100%;
}

.main__topics .main__topics-wrap .main__topics-banners {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
padding: 0px 0px 15px;
}

.main__topics-banners .main__topics-banners-box {
flex: 1;
padding: 10px;
}

@media (max-width: 789px){
.main__topics .main__topics-wrap .main__topics-banners {
display: block;
}

.main__topics .main__topics-wrap .main__topics-title img {
margin-top: -15px;
}
}


/*ranking*/

.main__ranking{
width: 100%;
margin-bottom: 40px;
}

.main__ranking-wrap{
margin:0px auto 0px;
padding: 0px;
overflow-x: auto;
width: 100%;
}

.main__ranking-title{
width: 90%;
max-width: 380px;
margin: 10px auto 20px !important;
}

.js-lp-ranking{
background-color:transparent;
border-radius: 0px;
width: 100% !important;
min-width: 780px !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding:20px 0px;
}

.dt-num{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
list-style: none outside;
}

.dt-num_box{
background-color:#fff;
border-radius: 10px;
flex: 1;
text-align: center;
margin: 10px;
padding-bottom: 20px;
min-height: 370px;
}

.dt-num_box:nth-of-type(1)::before{
content: "";
display: block;
width: 85px;
height: 41px;
background-image: url('../img/rank_l1.png');
background-position: center;
background-size: contain;
margin-top: -20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}

.dt-num_box:nth-of-type(2)::before{
content: "";
display: block;
width: 85px;
height: 41px;
background-image: url('../img/rank_l2.png');
background-position: center;
background-size: contain;
margin-top: -20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}

.dt-num_box:nth-of-type(3)::before{
content: "";
display: block;
width: 85px;
height: 41px;
background-image: url('../img/rank_l3.png');
background-position: center;
background-size: contain;
margin-top: -20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}

.dt-num_box a img{
width: auto;
height:350px;
}

@media (max-width: 1400px){
.js-lp-ranking{
padding-bottom: 20px;
}

.dt-num_box{
min-height: 320px;
}

.dt-num_box::before{
margin-top: -20px !important;
}
.dt-num_box a img{
height: 250px;
}
}

.main__ranking-button{
width: 30%;
text-align: center;
min-width: 280px;
max-width: 300px;
margin: 10px auto 0px;
}

.main__ranking-banner{
width: 70%;
min-width: 340px;
margin:40px auto 10px;
padding-bottom: 30px;
}

/*second*/
.main__about.second{
margin-top: 30px;
margin-bottom: 80px;
}

.second .main__about-what{
width: 98%;
margin: auto;
}

.second .main__about-what-title{
width: 35%;
margin: auto;
min-width: 320px;
margin-top: -60px;
position: relative;
}
@media (max-width: 789px){
.second .main__about-what{
width: 95%;
margin: auto;
}
}

.main__about-what-list-info-detail-title{
background-color: transparent !important;
border: 0px !important;
background-image: none;
color: #eb5700;
margin: 0px !important;
}

.main__about-what-list-info-detail-title span{
font-size: 140%;
}

/*howto-nav*/
.main__nav{
background-color: #000;
margin-bottom: 50px !important;
background-image: url("../img/bg_how.png");
background-repeat: repeat-x;
background-size: contain;
margin-top: 20px;
width: 100%;
}
@media (min-width: 1861px){
.main__nav .main__nav-wrap {
max-width: 1140px;
width: 100%;
margin: 0px auto;
}
}
@media (max-width: 1860px){
.main__nav .main__nav-wrap {
max-width: 968px;
width: 90%;
margin: 0px auto;
}
}

.main__nav .main__nav-wrap .main__nav-title {
text-align: center !important;
margin-bottom: 10px;
}

.main__nav .main__nav-wrap .main__nav-title img {
max-width: 500px;
margin: auto;
position: relative;
margin-top: -30px;
width: 100%;
}

.main__nav ul.area__pc-only{
list-style: none outside;
padding: 0px;
margin: 0px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}

.main__nav ul.area__pc-only li{
flex: 1;
padding: 0px;
margin:0px 10px 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);
text-align: center;
}

.main__nav ul.area__pc-only li .main__nav-btn{
text-align: center;
background-color: #fcec36;
padding: 5px;
border-radius: 0px 0px 10px 10px;
}

.main__nav ul.area__pc-only li .main__nav-btn img{
width: 60%;
min-width: 120px;
}

.main__nav ul.area__pc-only li .main__nav-img{
padding: 10px;
}
.main__nav ul.area__pc-only li .main__nav-img .nav-title{
width: 85%;
min-width: 120px;
}

.main__nav ul.area__pc-only li .main__nav-img .nav-img{
width: 70%;
min-width: 120px;
}

@media (max-width: 789px){
.main__nav .main__nav-wrap {
width: 95%;
margin: 0px auto;
}
.main__nav .main__nav-wrap .main__nav-title img {
margin-top: -20px;
}

.area__sp-only{
list-style: outside none;
padding: 0px;
margin: 0px;
}

.area__sp-only li{
padding: 0px 0px 15px;
margin: 0px 0px 0px;
}
}

.main__plan-list{
margin-bottom: 0px;
padding-bottom: 0px;
}

.main__plan-list-info{
border: 2px solid #ea5400;
padding: 25px !important;
margin-bottom: 40px;
}

.main__plan-list-info::after{
content: "";
display: block;
clear: both;
}

.main__plan-linkbtn img{
max-width: 300px;
}

.main__plan-list-info#info-details01 .main__plan-list-info-left{
float: left;
width: 35%;
}

.main__plan-list-info#info-details01 .main__plan-list-info-right{
float: right;
width: 63%;
}

.main__plan-list-info#info-details02 .main__plan-list-info-left{
float: left;
width: 63%;
}

.main__plan-list-info#info-details02 .main__plan-list-info-right{
float: right;
width: 35%;
text-align: center !important;
}

.main__plan-list-info#info-details02 .main__plan-list-info-right img{
max-height:500px;
max-width: 280px !important;
margin: auto;
}


.main__plan-list-info-maintitle{
margin: 0px 0px 5px;
padding: 0px;
}

.main__plan-list-info-subtitle{
border-bottom: 2px solid #ea5400;
font-size: 160%;
color: #ea5400;
display: inline-block;
margin: 0px 0px 15px;
}

.main__plan-list-info-subtitle-min{
font-size: 140%;
display: inline-block;
margin: 0px 0px 5px;
}

.main__plan-list-info-subtitle-min::before{
content: "●";
color: #ea5400;
}

.main__plan-list-info-maintitle img{
max-height: 60px;
}

.main__plan-list-info-maintitle.area__pc-only img{
max-height: 60px;
	margin: auto;
}

.main__plan-list-info p.t-normal{
font-size: 120%;
margin-bottom: 15px;
}

.main__plan-list-info-bd{
border-bottom: 2px dotted #c3b29e;
display: block;
width: 100%;
margin-bottom: 15px;
padding-bottom: 15px;
}

.main__plan-list-info-widetitle{
width: 100%;
margin-bottom: 15px;
text-align: center;
}

@media (max-width: 789px){

.main__plan-list-info{
width: 95%;
margin: auto;
border-radius: 10px !important;
margin-bottom: 30px;
padding: 15px !important;
}

.main__plan-list-info-maintitle img{
max-height: 48px;
}
	
	.main__plan-list-info-maintitle.area__sp-only img{
max-height: 60px;
}

.main__plan-list-info-subtitle{
font-size: 120%;
}

.main__plan-list-info-subtitle-min{
font-size: 100%;
}
.main__plan-list-info p.t-normal{
font-size: 90%;
}
.main__plan-list-info#info-details01 .main__plan-list-info-left,
.main__plan-list-info#info-details01 .main__plan-list-info-right,
.main__plan-list-info#info-details02 .main__plan-list-info-left,
.main__plan-list-info#info-details02 .main__plan-list-info-right{
float: none;
width: 100%;
}

.main__plan-list-info-halftitle{
width: 100%;
text-align: center;
}

.main__plan-linkbtn{
display: block;
margin: auto;
width: 300px;
text-align: center;
}

.main__plan-list-info-img{
width: 70%;
margin: auto;
margin-top: 20px;
}
}

.main__others{
background-color: #ebf4db;
margin-top: 50px;
padding-top: 30px;
}

.others-box{
margin-top: 20px;
padding: 20px;
border-top: 6px solid #206a4c;
margin-bottom: 50px;
border-radius: 10px;
}

.others-box .main__others-maintitle{
font-size: 180%;
color: #206a4c;
font-weight: bolder;
margin-bottom: 5px;
text-align: center;
}

.others-box .main__others-subtitle{
font-size: 140%;
color: #709c22;
margin-bottom: 20px;
text-align: center;
}

.main__environment-list-type-terminal-img{
height: 130px;
margin: 0px;
}

.main__environment-list-type-terminal{
height: 130px;
width: 200px;
text-align: center !important;
margin: auto;
padding: 0px;
}

@media (max-width: 789px){
.others-box{
width: 95%;
margin-left: auto;
margin-right: auto;
}

.others-box .main__others-maintitle{
font-size: 140%;
}

.others-box .main__others-subtitle{
font-size: 120%;
}

.others-box .main__plan-linkbtn{
width: 100% !important;
margin-left: auto;
margin-right: auto;
}
	
.main__environment-list-type-terminal-img{
height: 80px !important;
margin: auto;
}

.main__environment-list-type-terminal{
height: 80px ;
width: 45% !important;
}
	
.main__environment-list-type-version{
width: 53% !important;
}
	
	
	
}


.t-small{
	margin-top: 10px;
	font-size: 90%;
}
@media (max-width: 789px){
.t-small{
	font-size: 85%;
}

}


.gotyuui{
	margin-top: 20px;
	margin-left: 13px;
	list-style: '※';
	font-size: 90%;
}

@media (max-width: 789px){
.gotyuui{
	font-size: 85%;
}

}

.main__payment-list{
display: flex;
}

.main__payment-list-box{
padding-left: 20px;
margin-bottom: 20px;
padding-bottom: 20px;
border-right: 1px dashed #a1b47e;
width: 50%;
}
.main__payment-list-box span{
font-size: 140%;
font-weight: bolder;
line-height: 1.6;
}
.main__payment-list-box span::before{
content: "●";
color: #fd4700;
}

@media (max-width: 789px){

.main__payment-list{
display: block;
}

.main__payment-list-box{
width: 100% !important;
padding-left: 0px !important;
border-right: 0px dashed #a1b47e;
border-bottom: 1px dashed #a1b47e;
}
}