@charset "utf-8";

/* -------------------------------------- */
/* 背景画像------------------------------- */
/* -------------------------------------- */

.concept-img {
	background-image: url(../images/concept/bg-main.jpg);
}

/* -------------------------------------- */
/* コンセプト------------------------------ */
/* -------------------------------------- */

/* コンセプトコンテナー */
.feature {
	display: flex;
	justify-content: space-between;
	margin-top: 75px;
	align-items: flex-start;
}

/* 画像幅固定値設定 */
.feature img {
	width: 360px;
}

/* コンセプト文最大幅設定 */
.feature-text {
	max-width: 500px;
	margin-right: 40px;
}

.feature-text p {
	font-size: 15px;
	line-height: 28px;
	margin-top: 25px;
}

/* コンセプト2　表示順入れ替え */
.reverse {
	flex-direction: row-reverse;
}

.reverse .feature-text {
	margin-left: 40px;
	margin-right: 0;
}

/* -------------------------------------- */
/* youtuve(動画)-------------------------- */
/* -------------------------------------- */

.movie {
	background-color: #f8f8f8;
	padding: 50px 60px;
	margin-top: 55px;
}

.movie iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	margin-top: 30px;
}

.movie p {
	font-size: 15px;
	line-height: 28px;
	margin-top: 20px;
}

/* -------------------------------------- */
/* footer上部　余白------------------------ */
/* -------------------------------------- */

#concept footer {
	margin-top: 100px;
}

/* -------------------------------------- */
/* mobaile端末用　CSS--------------------- */
/* -------------------------------------- */

@media (max-width: 800px) {

	/* コンセプトエリア　縦方向に変更 */
	.feature {
		display: block;
		max-width: 500px;
		margin-top: 45px;
	}

	/* コンセプト文　左右余白調整 */
	.feature-text {
		margin-right: 0;
	}

	.reverse .feature-text {
		margin-left: 0;
	}

	/* 画像幅　親要素いっぱいに */
	.feature img {
		width: 100%;
		margin-top: 25px;
	}

	/* 動画　調整 */
	.movie {
		max-width: 500px;
		padding: 30px 25px;
	}

	.movie iframe {
		height: 240px;
	}
	
}