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

/*==============================*/
/* section */
/*==============================*/
section { padding-top: 0px; padding-bottom: 64px;}

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

/*==============================*/
/* メインイメージ */
/*==============================*/
.mainSlide{
    margin-bottom: 132px;
	background-image: url("/static/cloudbond/common/img/slide/main_slide_pc.jpg") ;
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center center;
	padding-top: 60vh;
}
.mainSlide ul{
	position: relative;
	bottom: -50px;
	display: flex; display: -webkit-flex; /* Safari */
	justify-content: center; -webkit-justify-content: center; /* Safari */
}
.mainSlide ul li{
    width: 33.3%;
    -webkit-box-shadow: 3px 3px 4px 0px rgba(201,201,201,1);
    -moz-box-shadow: 3px 3px 4px 0px rgba(201,201,201,1);
    box-shadow: 3px 3px 4px 0px rgba(201,201,201,1);
}
.mainSlide ul li:not(:last-child){margin-right: 40px;}

/* ======= TB =======*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .mainSlide{
        padding-top: 40vh;
        margin-bottom: 80px;
    }
    .mainSlide ul{
        width: 90%;
        margin: 0 auto;
        justify-content: space-between; -webkit-justify-content: space-between; /* Safari */
        bottom: -50px;
    }
    .mainSlide ul li{
        width:calc(50% - 1.5%);
    }
    .mainSlide ul li:not(:last-child){ margin-right: 0px;}
}

/* ======= SP =======*/
@media (max-width: 600px) {
	.mainSlide{
        padding-top: 40vh;
        background-image: url("/static/cloudbond/common/img/slide/main_slide_sp.jpg") ;
    }
    .mainSlide ul{ bottom: -48px; flex-direction: column; -webkit-flex-direction: column; /* Safari */ }
	.mainSlide ul li{ width: 100%;}
    .mainSlide ul li:not(:last-child){ margin-bottom: 8px;}
}

/*==============================*/
/* タイトル */
/*==============================*/
/*-- メインタイトル
------------------------- */
.mainTitle{
	margin-bottom: 32px;
	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;
}

/*-- サブタイトル
------------------------- */
.subTitle{
    position: relative;
	margin-bottom: 16px;
	font-size: 24px;
	font-weight: 500;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
	text-align: center;
}

    /* ======= SP =======*/
    @media (max-width: 767px){
        /*-- メインタイトル
        ------------------------- */
        .mainTitle{
            margin-bottom: 25px;
            font-size: 30px;
            letter-spacing: 0.01em;
            line-height: 1em;
        }
        .mainTitle small{ margin-top: 5px; }
        
        /*-- サブタイトル
        ------------------------- */
        .subTitle{
            margin-bottom: 16px;
            font-size: 20px;
            line-height: 1.3em;
        }
    }

/*==============================*/
/* テキスト装飾 */
/*==============================*/
.textRed{ color: #C92F35;}

/*==============================*/
/* table */
/*==============================*/
table{
    width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
}
table, td, th {
    border: 1px solid #ccc;
    border-collapse: collapse;
}
th {
    background: #3E3E3E;
    padding: 12px 10px;
    color: #fff;
    font-family: "Noto Sans Japanese";
    font-size: 16px;
}
td { background: #fff; padding: 4px 10px; }

.table_default th{
	background: #696969;
	color: #fff;
}

@media (max-width: 600px) {
	/*-- 
	------------------------- */
	table.overflow_x{
		display: block; 
		width: auto; 
		position: relative; 
		overflow-x: scroll; 
		white-space: nowrap; 
	}
	table.overflow_x::-webkit-scrollbar { height: 5px; }
	table.overflow_x::-webkit-scrollbar-track { border-radius: 5px; background: #eee; }
	table.overflow_x::-webkit-scrollbar-thumb { border-radius: 5px; background: #666; }

	/*-- 
	------------------------- */
	table.res{ border: none; }
	table.res col{ width: 100%; }
	table.res tr{ display: block; margin-bottom: 1vh; }
	table.res th,
	table.res td{ display: block; border-bottom: none; }
	table.res td:last-child{ border-bottom: 1px solid #ccc; }
}

/*==============================*/
/* タスク */
/*==============================*/
.taskWrap{
    position: relative;
    width: 90%;
    margin: 0 auto -4px auto;
	padding: 30px;
	background: #EFEFEF;
	display: flex; display: -webkit-flex; /* Safari */
    flex-wrap: wrap; -webkit-flex-wrap: wrap; /* Safari */
	justify-content: space-between; -webkit-justify-content: space-between; /* Safari */
}
.taskWrap:after{
	position: absolute; bottom: -30px; left: 50%;
	content: "";
	width: 0;
	height: 0;
	margin-left: -30px;
	border-style: solid;
	border-width: 30px 30px 0 30px;
	border-color: #EFEFEF transparent transparent transparent;
}
dl.taskBox{
	padding: 32px 32px 30px 32px;
	width: calc(50% - 2px);
    margin-bottom: 4px;
	background: #fff;
}
dl.taskBox dt{
	margin-bottom: 10px;
	font-size: 20px;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.03em;
	text-align: center;
}
dl.taskBox dd.taskIcon{
	margin-bottom: 16px;
	text-align: center;
}
dl.taskBox dd.taskIcon i{
	font-size: 50px;
	color: #C92F35;
	margin-bottom: 15px;
	
}
dl.taskBox dd.taskContent{ padding: 0 15px; }
dl.taskBox dd.taskContent p{ line-height: 1.6em;}

/* ======= TB以下 =======*/
@media (max-width: 1024px){
    .taskWrap{ width: 100%; padding: 20px;}
}

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

/*==============================*/
/* 課題を解決 */
/*==============================*/
.settle{
    position: relative;
    padding-top: 56px;
    padding-bottom: 56px;
    background: #0D1D4E;
    color: #fff;
}
.settle:after{
	position: absolute; bottom: -30px; left: 50%;
	content: "";
	width: 0;
	height: 0;
	margin-left: -30px;
	border-style: solid;
	border-width: 30px 30px 0 30px;
	border-color: #0D1D4E transparent transparent transparent;
}
.settle h2{
    margin-bottom: 16px;
    font-size: 32px;
    font-weight: 500;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.03em;
    text-align: center;
}

/* ======= SP =======*/
@media (max-width: 767px){
    .settle h2{
        font-size: 25px;
        line-height: 1.3em;
    }
}

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

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

/* ======= PC =======*/
@media (min-width: 1025px) {
    .pc-flex2.pointWrap > *{ width: calc( calc( 100% - calc( 4% * 1 ) ) / 2 ); margin-right: 4%; }
    .pc-flex2.pointWrap > *:nth-child(2n) { margin-right: 0; }
}
/* IEのみ適用スタイル */
@media (min-width: 1025px) and (-ms-high-contrast: none){
    .pc-flex2.pointWrap > *{ width: 48%; margin-right: 4%; }
    .pc-flex2.pointWrap > *:nth-child(2n) { margin-right: 0; }
}


/* ======= TB以下 =======*/
@media (max-width: 1024px){
    .pointWrap{ width: 100%;}
}

/* ======= TB =======*/
@media screen and (min-width: 768px) and (max-width: 1024px){
    .pointWrap{ margin: 0 auto 16px auto;}
    .pointWrap .pointBox{min-height: 352px; margin-bottom: 16px; }
}

/* ======= 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;}
}


/*==============================*/
/* mainBtn */
/*==============================*/
.mainBtn a{
    display: inline-block;
    max-width: 320px;
    width: 100%;
    padding: 10px 0 12px 0;
	border-radius: 8px;
    background: #ffc000;
    font-size: 18px;
    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;
    }
}