@charset "utf-8";
/*======================================
教材の特長
========================================*/
/*****
特長
*****/
.feature_ttl{
	font-size: clamp(2rem,2.6vw,2.6rem);
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 1em;
}

/***POINT***/
.point_area{
	width: 100%;
	margin-top: 4em;
	border-radius: 2em;
	background-image: linear-gradient(45deg,#D8F0FA 0,#F9ECFE 100%);
	position: relative;
}
.point_ttl_wrap{
	text-align: center;
}
.point_ttl{
	font-size: clamp(1.6rem,2.2vw,2.2rem);
	color: #fff;
	background-color: var(--red_color);
}
.point_ttl b{
	display: inline-block;
	margin-right: 0.5em;
	padding: 0 0.5em;
	position: relative;
}
.point_ttl b > span{
	position: relative;
	/*z-index: 2;*/
}
.point_ttl b::before{
	content: '';
	display: block;
	width: 100%;
	height: 0.6em;
	border-radius: 1em;
	background-color: #e96f6e;
	position: absolute;
	bottom: 0.25em;
	left: 0;
	/*z-index: 1;*/
}
.point_ttl .point_num{
	display: inline-block;
	font-size: 1.5em;
}
.point_text_wrap{}

#point01{}
.icon_parrot{
	max-width: 175px;
}
#point01 .icon_parrot{
	transform: scaleX(-1);
}

#point02{}
.point02_img_area{}
.point02_img{}
.point02_arrow{}

#point03{}
.point03_img_area{}
.point03_img_area ul{}
.point03_img{}
#point03 .icon_arrow{}
#point03 .icon_plus{}
#point03 .icon_equal{}

.point03_under{
	text-align: center;
	margin-top: 1em;
}
.point03_under ul{}
.point03_under ul .under_speed01{
	padding: 0.5em 1em;
	border: solid 2px var(--black_color);
}
.point03_under ul .icon_arrow{}
.point03_under ul .under_speed02{
	font-weight: bold;
	color: #fff;
	padding: 0.5em 1em;
	background-color: var(--red_color);
}
.point03_under ul .under_speed03{
	font-weight: bold;
	color: #fff;
	padding: 0.5em 1em;
	border-radius: 0.5em;
	background-color: #293544;
	position: relative;
}
.point03_under ul .under_speed03 .icon_parrot{}


#point04{
	position: relative;
}
#point04 .sub_text_area{}
.point04_img{}
#point04 .icon_parrot{
	transform: scaleX(-1);
}
.point04_under{
	font-weight: bold;
	line-height: 1.75;
	margin: 1.5em 0 0 0;
}


/*****
学習の進め方
*****/
.study_ttl{
	font-size: clamp(2rem,3vw,3rem);
	font-weight: bold;
	text-align: center;
	color: #fff;
	padding: 0.5em 1em;
	background-color: var(--shadow_color);
}
.study_circle{}
.bg_study{
	background-color: #f2ecdf;
}
.bg_study_n2{
	background-color: #e3efdd;
}

/*****
活用シーン
*****/
.scene_ttl{
	font-size: clamp(1.4rem,2.6vw,2.6rem);
	font-weight: bold;
	text-align: center;
	color: #fff494;
	margin: 2.5em 0 1em 0;
	padding: 0.5em 1em;
	border-radius: 10em;
	background-color: #344977;
}
.scene_img{}

/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	/*****
	特長
	*****/
	/***POINT***/
	.point_area{
		padding: 2em;
	}
	
	.point_ttl_pc{
		display: flex;
		width: 92%;
		border: solid 4px var(--red_color);
		border-radius: 10em;
		background-color: var(--red_color);
		position: absolute;
		top: 0;
		left: 4%;
		transform: translateY(-50%);
		overflow: hidden;
	}
	
	.point_ttl_wrap{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 32%;
		background-color: var(--red_color);
	}
	.point_ttl{
		display: block;
	}
	.point_text_wrap{
		display: flex;
		align-items: center;
		width: 68%;
		padding: 0.25em 1em 0.25em 0.5em;
		background-color: #fff;
	}
	
	#point01{}
	#point01 .icon_parrot{
		width: 15%;
		position: absolute;
		top: 4em;
		left: 2em;
	}
	
	#point02{}
	.point02_img_area{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 1em;
	}
	.point02_img{
		width: 28%;
	}
	.point02_arrow{
		width: 6%;
		transform: rotateZ(-90deg);
	}
	
	#point03{}
	.point03_img_area{}
	.point03_img_area ul{
		display: flex;
		align-items: center;
		margin-top: 2em;
	}
	.point03_img_area ul li{
		margin-right: 1%;
	}
	.point03_img_area ul li:last-of-type{
		margin-right: 0;
	}
	
	.point03_img{
		width: calc(78% / 6);
	}
	
	#point03 .icon_arrow,
	#point03 .icon_plus,
	#point03 .icon_equal{
		width: 3%;
	}
	
	#point03 .icon_arrow{
		transform: rotateZ(-90deg);
	}
	#point03 .icon_plus{}
	#point03 .icon_equal{}
	
	.point03_under{}
	.point03_under ul{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.point03_under ul .under_speed01{
		font-size: min(1.54vw,1.9rem);
	}
	.point03_under ul .icon_arrow{
		font-size: min(1.46vw,1.8rem);
		width: 2em;
		transform: rotateZ(-90deg);
	}
	.point03_under ul .under_speed02{
		font-size: min(1.7vw,2.1rem);
	}
	.point03_under ul .under_speed03{
		font-size: min(1.7vw,2.1rem);
	}
	.point03_under ul .under_speed03 .icon_parrot{
		width: 45%;
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(30%,-55%);
	}
	
	#point04{}
	#point04 .sub_text_area{
		margin-top: 2em;
	}
	.point04_img{
		flex-shrink: 0;
		width: 60%;
		margin: 2em 0 0 2em;
	}
	#point04 .icon_parrot{
		width: 15.5%;
		position: absolute;
		bottom: 2em;
		left: 4em;
	}
	.point04_under{}
	
	
	/*****
	学習の進め方
	*****/
	.study_ttl{}
	.study_circle{
		padding: 0 2em 2em 2em;
	}
	.study_circle img:first-of-type{
		margin-top: -0.5em;
	}
	
	/*****
	活用シーン
	*****/
	.scene_img{
		display: flex;
		justify-content: space-around;
	}
	.scene_img li{
		width: 42%;
	}
}

/* スマホ----------------------------- */
@media (max-width: 767px){
	/*****
	特長
	*****/
	/***POINT***/
	.point_area{
		padding: 0 1em 1em 1em;
	}
	
	.point_ttl_wrap{
		transform: translateY(-50%);
	}
	.point_ttl{
		display: inline-block;
		width: 80%;
		padding: 0.25em 1em;
		border-radius: 4em;
	}
	.point_text_wrap{}
	
	#point01{}
	#point01 .point_text_wrap{
		padding-left: calc(20% + 1em);
	}
	#point01 .icon_parrot{
		width: 20%;
		position: absolute;
		top: 3em;
		left: 1em;
	}
	
	#point02{}
	.point02_img_area{}
	.point02_img{
		text-align: center;
		width: 80%;
		margin: 1em auto;
	}
	.point02_arrow{
		width: 2em;
		margin: 1em auto;
	}
	
	#point03{}
	.point03_img_area{
		display: flex;
		justify-content: space-between;
	}
	.point03_img_area ul{
		text-align: center;
		width: 40%;
	}
	.point03_img{
		aspect-ratio: 320 / 400;
		display: flex;
		align-items: flex-end;
		margin: 1em auto;
	}
	
	#point03 .icon_arrow,
	#point03 .icon_plus,
	#point03 .icon_equal{
		width: 2em;
		margin: 1em auto;
	}
	
	#point03 .icon_arrow{}
	#point03 .icon_plus{}
	#point03 .icon_equal{
		transform: rotateZ(90deg);
	}
	
	.point03_under{}
	.point03_under ul{}
	.point03_under ul .under_speed01{}
	.point03_under ul .icon_arrow{
		width: 3em;
		margin: 1em auto;
	}
	.point03_under ul .under_speed02{
		font-size: 1.2em;
	}
	.point03_under ul .under_speed03{
		width: 50%;
		margin: 1em auto 0 7.5%;
	}
	.point03_under ul .under_speed03 .icon_parrot{
		width: 30%;
		position: absolute;
		top: 50%;
		right: -5%;
		transform: translate(100%,-50%);
	}
	
	#point04{}
	#point04 .sub_text_area{
		margin-top: 1em;
	}
	.point04_img{
		text-align: center;
		margin: 2em 0;
	}
	#point04 .icon_parrot{
		width: 15%;
		position: absolute;
		bottom: 1em;
		left: 1em;
	}
	.point04_under{}
	
	/*****
	学習の進め方
	*****/
	.study_ttl{}
	.study_circle{
		padding: 1em 0.5em;
	}
	
	/*****
	活用シーン
	*****/
	.scene_img{}
	.scene_img li{
		width: 85%;
		margin: 1em auto;
	}
}