@media screen and (max-width: 850px) {
}


.col_missions a.btn_detail {
	width: 180px;
}

.col_missions a.btn_detail .inner {
	width: 8.6em;
}
.col_missions a.btn_detail .arrow { margin: 0 0 0 4px; }
.col_missions a.btn_detail .arrow::before {
	left: 0;
}

@media screen and (max-width: 850px) {
	.col_missions {
		padding: 37px 16px 36px;
	}

	.col_missions .mission_flex .ttl {
		top: 20px;
		opacity: 0;
		transition: all .5s;
		position: relative;
	}

	.col_missions .mission_flex.active .ttl {
		top: 0;
		opacity: 1;
	}

	.col_missions .box .image {
		opacity: 0;
		transition: opacity 1s;
	}

	.col_missions .box .image.active {
		opacity: 1;
	}

	.col_missions .box p {
		opacity: 0;
		transition: opacity 1s;
	}

	.col_missions .box p.active {
		opacity: 1;
	}

}


@media screen and (max-width: 700px) {

	.bg_features_mission {
		margin: 0 0 18vw;
		padding: 0 0 12.14vw;
	}

	.col_missions {
		margin: 0 auto -22vw;
		padding: 4.42vw 5.55%;
		top: -22vw;
	}

	.col_missions .mission_flex {
		display: flex;
		flex-direction: column;
		justify-content: center;
		max-width: 1057px;
		margin: 0 auto;
	}

	.col_missions .mission_flex .box {
		width: 100%;
		max-width: none;
	}

	.col_missions .ttl {
		font-size: clamp(18px, 8.5vw, 30px);
		margin: 0 0 15px 0;
	}

	.col_missions .box .image {
		margin: 0 auto 15px;
	}

	.col_missions .mission_flex .box.no2 {
		padding: 30px 0 36px;
		border-left: none;
		border-right: none;
		border-top: 1px solid #000;
		border-bottom: 1px solid #000;
	}

	.col_missions .mission_flex .box.no1 {
		padding: 30px 0 36px;
	}

	.col_missions .mission_flex .box.no3 {
		padding: 30px 0 36px;
	}
}

@media screen and (max-width: 500px) {
	.col_missions .box .btnarea {
		margin: 8.2vw auto 0;
	}
}