@charset "utf-8";


.sec_01 h2{
	margin-bottom: 1em;
}
.sec_01 h3{
	margin-bottom: .5em;
}
.sec_01 h3 .num{
	font-size: clamp(2.5rem, 1.364rem + 5.68vw, 5.625rem);
	color: #FB4239;
	margin: 0 .25em 0 .1em;
	vertical-align: -0.1em;
}

.sec_01 .list{
	gap: 2em 1em;
}
.sec_01 .list li{
	width: calc(100% / 3 - 1em);
	background: #fff;
	padding: 1.5em 2em;
}

.sec_01 .features04 .list li{width: calc(100% / 2 - 1em);}


.sec_01 .list li .img_area{
	width: 80%;
	max-width: 300px;
	margin: 0 auto 1em;
}
.sec_01 .list li h4{
	position: relative;
	padding-left: 1.5em;
	margin-bottom: .5em;
}
.sec_01 .list li h4::before{
  content: '';
  background: url(../images/about/icon_check.png);
  background-size: cover;
  width: 7vw;
  height: 6vw;
  max-width: 28px;
  max-height: 24px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.sec_01 .features02 .txt_area{
	width: 54%;
}

.sec_01 .features02 .img_area{
	width: 46%;
	max-width: 300px;
	margin: auto;
}

.sec_01 .features04{background: #EFFFE2;}

.sec_04 .list li:not(:last-child){margin-bottom: 2em;}


.sec_04 .list .txt_area{width: 56%;}
.sec_04 .list .img_area{width: 30%;margin: auto}

.sec_04 .box{
	padding: 4em 5em 3em;
	border-radius: var(--br30);
	position: relative;
}

.sec_04 .box .txt_area{width: 50%;}
.sec_04 .box .img_area{width: 46%;position: relative;}

.sec_04 .box h3 .wrap{
	width: 70%;
	max-width: 400px;
	background: #A2DB71;
	color: #fff;
	padding: .5em;
	position: absolute;
	top: -1.35em;
	left: 50%;
	transform: translateX(-50%);
	margin: auto;
}
.sec_04 .box h3 .wrap:before, .sec_04 .box h3 .wrap:after {
  position: absolute;
  top: 0;
  content: '';
  background: #A2DB71;
  width: 2em;
  height: 100%;
}

.sec_04 .box h3 .wrap:before {
  left: -1.75em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 50% 50%);
}

.sec_04 .box h3 .wrap:after {
  right: -1.75em;
  clip-path: polygon(100% 0, 50% 50%, 100% 100%, 0 100%, 0 0);
}

.sec_04 .box li:not(:last-child){margin-bottom: 3em;}

.sec_04 .box li .txt_area{
	padding: 1.5em 2em;
	border-radius: var(--br30);
	position: relative;
}
.sec_04 .box li:nth-of-type(1) .txt_area{background: var(--c_lblue);}
.sec_04 .box li:nth-of-type(2) .txt_area{background: #FFEB6A;}

.sec_04 .box li .txt_area::after{
	content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 34px solid transparent;
  border-left: 34px solid transparent;
  border-top: 0;
  position: absolute;
  bottom: -10px;
}
.sec_04 .box li:nth-of-type(1) .txt_area::after{
  border-bottom: 18px solid var(--c_lblue);
  right: 0;
  transform: rotate(25deg);
}
.sec_04 .box li:nth-of-type(2) .txt_area::after{
  border-bottom: 18px solid #FFEB6A;
  left: 0;
  transform: rotate(-25deg);
}

.sec_04 .box li .img_area::after{
	background: #FFAA00;
	font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
	color: #fff;
	text-align: center;
	line-height: 1.2;
	padding: 1.5em 1.75em;
	border-radius: 50%;
	position: absolute;
	top: -2.5em;
}
.sec_04 .box li:nth-of-type(1) .img_area::after{
	content: "社会人";
	right: -2.5em;
}
.sec_04 .box li:nth-of-type(2) .img_area::after{
	content: "高校\A卒業後";
	white-space: pre;
	left: -2.5em;
}

@media (max-width: 799px){



.sec_01 .list li,
.sec_01 .features04 .list li{
	width: 100%;
	padding: 1.25em 1.5em;
}

.sec_01 .features02 .txt_area,
.sec_04 .list .txt_area,
.sec_04 .box .txt_area{
	width: 100%;
}

.sec_01 .features02 .img_area,
.sec_04 .list .img_area,
.sec_04 .box .img_area{
	width: 80%;
}

.sec_01 .features02 .txt_area,
.sec_02 .txt_area,.sec_03 .txt_area,
.sec_04 .list .img_area{
	margin-bottom: 1.5em;
}

.sec_04 .box{padding: 2.5em 3em 2em;}

.sec_04 .box .txt_area{
	margin-bottom: 10vw;
}
.sec_04 .box li:nth-of-type(1) .txt_area::after{
  right: unset;
  left: 2em;
}
.sec_04 .box li:nth-of-type(2) .txt_area::after{
  left: unset;
  right: 2em;
}



}


@media (max-width: 599px){


.sec_04 .box h3 .wrap{
	padding: .25em;
	top: -1em;
}
.sec_04 .box{padding: 2em 1.5em 1.5em;}
.sec_04 .box li .txt_area{padding: 1em 1.25em;}
.sec_04 .box li .img_area::after{
	padding: 1em 1.25em;
	top: -1.5em;
}
.sec_04 .box li:nth-of-type(1) .img_area::after{right: -1.5em;}
.sec_04 .box li:nth-of-type(2) .img_area::after{left: -1.5em;}

}