@charset "utf-8";
/* =============================================
	CCUS 技能者特典(個人向け)
============================================= */

/*---------------------------------------------
	ページヘッダー
---------------------------------------------*/

/*---------------------------------------------
	section
---------------------------------------------*/
.cate_ttl{
	font-size: 3rem;
	text-align: center;
	color: #fff;
	margin-bottom: 2em;
	padding: 0.5em;
	border-radius: 1em 0;
	background-color: #25b7aa;
	transform: skewX(-15deg);
}

.title_wrap{
	display: flex;
	margin-bottom: 1.5em;
}

.ttl_img{
	flex-shrink: 0;
	margin-right: 2em;
}
.ttl_type01{
	flex-grow: 1;
	font-size: 2.4rem;
	color: #fff;
	margin-top: 1.5em;
	padding: 0.5em 1em;
	background-color: #33cccc;
	position: relative;
}
.ttl_type01::before{
	content: '';
	display: block;
	width: 2em;
	height: 100%;
	background-image: linear-gradient(to bottom right, transparent 0, transparent 50%, #33cccc 51%, #33cccc 100%);
	position: absolute;
	top: 0;
	right: 100%;
}

.ttl_type02{
	font-size: 2.2rem;
	color: #fff;
	margin: 3em 0 1em 0;
	padding: 0.5em 1em;
	border: solid 2px #25b7aa;
	background-color: #33cccc;
	border-radius: 0.5em 0 0.5em 0;
}

/*****
サポート1
*****/
.capture_area{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 1em;
}
.capture_area li{
	width: 48%;
	max-width: 440px;
	margin-bottom: 3em;
	position: relative;
}
.capture_area li img{
	border-radius: 0 1em 1em 1em;
}
.capture_area li .caption{
	text-align: center;
	color: #fff;
	padding: 0.5em;
	border-radius: 0.5em 0 0.5em 0;
	background-color: #33cccc;
	transform: translate(-50%, -50%) skewX(-15deg);
	position: absolute;
	top: 100%;
	left: 50%;
}

/***STEP***/
.list_step_area{
 display: flex;
 justify-content: space-between;
 margin-bottom: 2em;
}
.list_step_area li{
 display: flex;
 flex-direction: column;
 font-size: 1.2rem;
 width: 22%;
 margin: 0 2em 0 0;
 background-color: #ACD2F2;
 position: relative;
}
.list_step_area li::after{
 content: '';
 display: block;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 1em 0 1em 1em;
 border-color: transparent transparent transparent #4079BE;
 position: absolute;
 top: 50%;
 right: -12%;
 transform: translateY(-50%);
}
.list_step_area li:last-of-type{
 margin: 0;
}
.list_step_area li:last-of-type::after{
 display: none;
}

.ttl_step{
 font-size: 1.6rem;
 font-weight: bold;
 color: #fff;
 text-align: center;
 padding: 0.25em 0.5em;
 background-color: #4079BE;
}

.list_step_area li img{
 margin: 0 auto;
}

.text_step{
 height: 100%;
 padding: 0.5em;
 border: solid 2px #ACD2F2;
 background-color: #fff;
}


/*****
サポート2
*****/

.index_list{
	margin-top: 1em;
}
.menulist{
	display: flex;
	flex-wrap: wrap;
}
.menulist li{
	margin: 0.5em 1em;
	border-bottom: dashed 1px #ccc;
}
.menulist li::before{
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 0.5em;
	border-style: solid;
	border-width: 0.25em 0 0.25em 0.5em;
	border-color: transparent transparent transparent #ccc;
	transform: translateY(-0.1em);
}

.ttl_list{
 font-size: 1.8rem;
 font-weight: bold;
 color: #4079BE;
 text-align: center;
 margin: 1em 0;
}
.ttl_list::before,
.ttl_list::after{
 content: '';
 display: inline-block;
 width: 10em;
 height: 0.25em;
 margin: 0 0.5em 0.25em 0.5em;
 background-color: #4079BE;
}

/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
 /*---------------------------------------------
 	ページヘッダー
 ---------------------------------------------*/
	
 /*---------------------------------------------
	section
	---------------------------------------------*/
	.cate_ttl{
		font-size: 1.8rem;
	}
	
	.title_wrap{
		display: block;
	}
	.ttl_img{
		width: 50%;
		max-width: 174px;
		margin: 0;
	}
	.ttl_type01{
		font-size: 1.8rem;
		margin: 0;
	}
	.ttl_type01::before{
		display: none;
	}
	
	.ttl_type02{
		font-size: 1.6rem;
	}
	
	/*****
	サポート1
	*****/
	.capture_area li .caption{
		font-size: 1.2rem;
		margin-top: 0.25em;
		transform: translate(0, 0);
		position: static;
	}
	
	/***STEP***/
 .list_step_area{
  flex-wrap: wrap;
 }
 
 .list_step_area li{
  width: 48%;
  margin: 0 0 2em 0;
 }
	.list_step_area li:last-of-type{
		margin: 0 0 2em 0;
	}
 .list_step_area li::after{
  display: none;
 }
 
 .list_step_area li img{
  width: 100%;
  max-width: 148px;
  height: auto;
 }
	
	
	/*****
	サポート2
	*****/
	.ttl_list{
  font-size: 1.6rem;
  padding: 0.25em 0.5em;
  border-left: solid 2px #4079BE;
  border-right: solid 2px #4079BE;
 }
 .ttl_list::before,
 .ttl_list::after{
  display: none;
 }
	
	.menulist li{
		font-size: 1.2rem;
	}
	
}