@charset "UTF-8";

.titleArea {
	position: relative;
	margin-bottom: 50px;
}
.titleArea > img {
	width: 100%;
	height: 470px;
	object-fit: cover;
}
.titleArea h1 {
	position: absolute;
	top: 200px;
	left: 0;
	right: 0;
	width: 776px;
	margin: 0 auto;
}
@media only screen and (max-width: 1000px) {
	.titleArea > img {
		height: 40vw;
	}
	.titleArea h1 {
		top: 14vw;
		width: 80vw;
	}
}
@media only screen and (max-width: 767px) {
	.titleArea {
		margin-bottom: 40px;
	}
	.titleArea > img {
		height: 76.9vw;
	}
	.titleArea h1 {
		top: 29.2vw;
		width: 100vw;
	}
}

.leadText {
	margin: 0 20px 50px;
	text-align: center;
	font-size: 2rem;
	line-height: 2;
}
.leadText strong {
	color: #2E6DA4;
	font-weight: bold;
}
@media only screen and (max-width: 1250px) {
	.leadText {
		font-size: 1.8rem;
	}
}
@media only screen and (max-width: 767px) {
	.leadText {
		margin: 0 10px 40px;
		font-size: min(1.8rem, 4.3vw);
		line-height: 1.6;
	}
}

.approach {
	background-color: rgba(235, 226, 197, 0.2);
	padding: 70px 20px;
}
.approach h2 {
	margin-bottom: 50px;
	text-align: center;
}
.approach__slide ul {
	max-width: 1360px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding-top: 41px;
}
.approach__slide li {
	width: 31.6%;
	border: 1px solid;
	background-color: #fff;
}
.approach__slide .approach__item--color01 {
	border-color: #2E6DA4;
}
.approach__slide .approach__item--color02 {
	border-color: #E58C96;
}
.approach__slide .approach__item--color03 {
	border-color: #6CB899;
}
.approach__img {
	margin: -42px auto 40px;
	width: 77.1%;
}
.approach h3 {
	margin-bottom: 25px;
	text-align: center;
	font-size: 2.6rem;
	font-weight: bold;
}
.approach__slide .approach__item--color01 h3 {
	color: #2E6DA4;
}
.approach__slide .approach__item--color02 h3 {
	color: #E58C96;
}
.approach__slide .approach__item--color03 h3 {
	color: #6CB899;
}
.approach p {
	margin: 0 20px 25px;
}
.approach__control {
	display: none;
}
@media only screen and (max-width: 1250px) {
	.approach__slide ul {
		padding-top: 3.5vw;
	}
	.approach__img {
		margin: -3.5vw auto 3vw;
	}
	.approach h3 {
		margin-bottom: 2vw;
		font-size: 2vw;
	}
	.approach h3 img {
		width: auto;
		height: 3.2vw;
	}
	.approach p {
		font-size: 1.4rem;
	}
}
@media only screen and (max-width: 767px) {
	.approach {
		padding: 35px 0 30px;
	}
	.approach h2 {
		width: 318px;
		max-width: 90%;
		margin: 0 auto 35px;
	}
	.approach__slide {
		max-width: 500px;
		margin: 0 auto;
		padding: 0 15px;
		overflow: hidden;
	}
	.approach__slide ul {
		position: relative;
		gap: 30px;
		padding-top: 35px;
	}
	.approach__slide li {
		width: 100%;
		flex-shrink: 0;
	}
	.approach__img {
		margin: -35px auto 28px;
		width: 75%;
	}
	.approach h3 {
		margin-bottom: 20px;
		font-size: min(23px, 5.9vw);
	}
	.approach h3 img {
		height: min(34px, 8.7vw);
	}
	.approach p {
	margin: 0 20px 25px;
		font-size: 1.6rem;
	}
	.approach__control {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}
	.approach__leftBtn {
		width: 25px;
		height: 20px;
		background: url(/assets/images/common/mod_icon_link_03.svg) no-repeat 50% 50%;
		background-size: 25px auto;
		cursor: pointer;
		transition: opacity 0.4s;
		transform: scale(-1,1);
	}
	.approach__rightBtn {
		width: 25px;
		height: 20px;
		background: url(/assets/images/common/mod_icon_link_03.svg) no-repeat 50% 50%;
		background-size: 25px auto;
		cursor: pointer;
		transition: opacity 0.4s;
	}
	.approach__leftBtn:hover,
	.approach__rightBtn:hover {
		opacity: 0.7;
	}
	.approach__curmark {
		display: flex;
		gap: 10px;
	}
	.approach__curmark li {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: #BEBEBE;
	}
	.approach__curmark .approach__curmark--current {
		background-color: #2E6DA4;
	}
	.approach__pauseBtn {
		width: 15px;
		height: 20px;
		border-left: 5px solid #2E6DA4;
		border-right: 5px solid #2E6DA4;
		cursor: pointer;
		transition: all 0.4s;
	}
	.approach__pauseBtn:hover {
		border-color: #6A96C2;
	}
	.approach__playBtn {
		position: relative;
		width: 15px;
		height: 20px;
		display: none;
		cursor: pointer;
		transition: all 0.4s;
	}
	.approach__playBtn:hover {
		border-color: #6A96C2;
	}
	.approach__playBtn::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border-left: 15px solid #2E6DA4;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}

}

.naviArea {
	padding: 70px 20px 80px;
	text-align: center;
	font-size: 2rem;
	line-height: 2;
}
.naviArea strong {
	font-weight: bold;
}
.naviArea strong.color01 {
	color: #2E6DA4;
}
.naviArea strong.color02 {
	color: #E58C96;
}
.naviArea strong.color03 {
	color: #6CB899;
}
.naviArea__btn {
	margin: 30px auto 0;
	max-width: 416px;
}
@media only screen and (max-width: 1250px) {
	.naviArea {
		font-size: min(1.8rem, 4.3vw);
	}
}