@charset "utf-8";
/* CSS Document */

/*==============================*/
/* section */
/*==============================*/
section { padding-top: 65px; padding-bottom: 75px;}

/* ======= SP =======*/
@media (max-width: 767px){
	section { padding-top: 50px; padding-bottom: 65px;}
}

/*==============================*/
/* メインイメージ */
/*==============================*/
.mainSlide{
	background-image: url("/static/ipvpn/common/img/slide/main_slide_pc.png") ;
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center center;
	padding-top: 60vh;
}
.mainSlide ul{
	position: relative;
	top: -50px;
	display: flex; display: -webkit-flex; /* Safari */
	justify-content: space-between; -webkit-justify-content: space-between; /* Safari */
}
.mainSlide ul li{ width: 33.3%;}
.mainSlide ul li:nth-child(2){ width: calc(33.3% - 2px);}

@media (max-width: 600px) {
	.mainSlide{
		padding-top: 40vh;
	}
	.mainSlide ul li{ width: calc(50% - 2px);}
	.mainSlide ul li:nth-child(2){ display: none;}
}

/*==============================*/
/* タイトル */
/*==============================*/
/*-- メインタイトル
------------------------- */
.mainTitle{
	margin-bottom: 25px;
	font-size: 35px;
	font-weight: bold;
	font-family: 'Oswald', sans-serif; letter-spacing: 0.08em;
	text-align: center;
	line-height: 1.4em;
}
.mainTitle small{
	display: block;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3em;
	color: #CE0101;
}

/*==============================*/
/* ボタン */
/*==============================*/
.mainBtn a{
    display: inline-block;
    max-width: 320px;
    width: 100%;
    padding: 10px 0 11px 0;
    background: #ffc000;
    font-size: 20px;
    font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
    color: #fff;
}
.mainBtn a:hover{ background: #ffa200; }

/* ======= SP =======*/
@media (max-width: 767px){
    .mainBtn a{
        max-width: 220px;
        padding: 9px 0 10px 0;
        font-size: 18px;
    }
}

/*==============================*/
/* ポイント */
/*==============================*/
.pointWrap{
	width: 94%;
	margin: 0 auto;
	counter-reset: wpp-ranking;
}

.pointWrap .pointBox{
	position: relative;
	background: #C92F35;
	min-height: 490px;
}
.pointWrap .pointBox:before{
	position: absolute; bottom: 22px; right: 12px;
	content: "0" counter(wpp-ranking, decimal);
	counter-increment: wpp-ranking;
	color: #fff;
	font-size: 55px;
	font-family: 'Oswald', sans-serif;
}
.pointBox > div{
	padding: 24px;
	color: #fff;
}
.pointBox div h4{
	margin-bottom: 10px;
	font-size: 19px;
	font-weight: 500;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
	line-height: 1.5em;
	text-align: center;
}
.pointBox div p{
	font-size: 14px;
	line-height: 1.6em;
}

/* ======= SP =======*/
@media (max-width: 767px){
	.pointWrap .pointBox{ min-height: auto; }
	.pointWrap .pointBox:not(:last-child){ margin-bottom: 2px; }
	.pointBox > div{ padding: 28px 24px 80px 24px ;}
	.pointBox div h4{
		margin-bottom: 13px;
		font-size: 18px;
		line-height: 1em!important;
	}
	.pointBox div h4 br{line-height: initial;}
}

/* IEのみ適用スタイル */
@media (max-width: 767px) and (-ms-high-contrast: none){
	.pointWrap .pointBox{ min-height: 0;}
	.pointBox > div{ padding: 28px 24px 0px 24px ; min-height: 0px;}
}


/*==============================*/
/* サポート */
/*==============================*/
.supportWrap{
	margin: 0 auto;
	padding: 30px;
	background: #EFEFEF;
	display: flex; display: -webkit-flex; /* Safari */
	justify-content: space-between; -webkit-justify-content: space-between; /* Safari */
}
dl.supportBox{
	padding: 30px 30px 28px 30px;
	width: calc(50% - 2px);
	background: #fff;
}
dl.supportBox dt{
	margin-bottom: 10px;
	font-size: 22px;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.03em;
	text-align: center;
}
dl.supportBox dd.supportIcon{
	margin-bottom: 5px;
	text-align: center;
}
dl.supportBox dd.supportIcon i{
	font-size: 50px;
	color: #C92F35;
	margin-bottom: 15px;

}
dl.supportBox dd.supportContent{ padding: 0 15px; }
dl.supportBox dd.supportContent p{ line-height: 1.6em;}

/* ======= SP =======*/
@media (max-width: 767px){
	.supportWrap{
		padding: 20px;
		flex-direction: column; -webkit-flex-direction: column; /* Safari */
	}
	dl.supportBox{
		padding: 30px 10px 28px 10px;
		width: 100%;
		background: #fff;
	}
	dl.supportBox:first-child{ margin-bottom: 5px;}
}