@charset "utf-8";
/* CSS Document */


.mainvisual {
    position: relative; /* 子要素配置の基準 */
    width: 100%; /* 親要素の幅を画面いっぱいに */
    height: auto; /* 高さを自動調整 */
	min-height: 70vh;
	margin-top: 20px;
	background: url("../images/plan/main-back.jpg")no-repeat;
	background-size: cover;
}@media screen and (max-width: 767px) {
	.mainvisual {
		min-height: 40vh;
		background-size: cover;
		background-position: center;
	}
}

.mainvisual-img {
    width: 100%; /* 背景画像を画面幅100%に合わせる */
    height: auto; /* 縦横比を保つ */
    display: block;
}

.mainvisual .box {
    position: absolute; /* 親要素内で絶対位置 */
    top: calc(50% - 70px);
    left: 50%; /* 左端から50%の位置 */
    transform: translateX(-50%); /* X軸方向に中央揃え */
    max-width: 1280px;
    text-align: center; /* 子要素を中央揃え */
    z-index: 1; /* 背景画像の上に表示 */

}@media screen and (max-width: 767px) {
	.mainvisual .box {
		top: calc(50% - 30px);
	}
}

.mainvisual .maincopy img {
    width: 100%; /* 親要素に合わせる */
    height: auto; /* 縦横比を保つ */
}

.mainvisual .maincopy {
	width: 960px;
}@media screen and (max-width: 767px) {
	.mainvisual .maincopy {
		max-width: 90vw;
	}
}

.mainvisual .subcopy {
	width: 500px;
	margin: 30px auto 0;
}@media screen and (max-width: 767px) {
	.mainvisual .subcopy {
		max-width: 55vw;
		margin: 25px auto 0;
	}
}

/* アニメーションの初期状態 */
.mainvisual {
    opacity: 0; /* 初期状態は非表示 */
    transition: opacity 1s ease-out, transform 1s ease-out; /* アニメーションの設定 */
}

/* ページ読み込み時にフェードイン */
.mainvisual {
    animation: fadeIn 1s ease-out forwards; /* 1秒かけてフェードイン */
    animation-delay: 0.5s; /* 0.5秒遅れて表示 */
}

/* アニメーションの初期状態 */
.mainvisual .logo,
.mainvisual .maincopy,
.mainvisual .subcopy{
    opacity: 0; /* 初期状態は非表示 */
    transform: translateY(30px); /* 下から30pxの位置 */
    transition: opacity 1s ease-out, transform 1s ease-out; /* アニメーションの設定 */
}

/* ページ読み込み時にフェードイン */
.mainvisual .maincopy {
    animation: fadeInUp 1s ease-out forwards; /* 1秒かけてフェードイン */
    animation-delay: 0.5s; /* 0.5秒遅れて表示 */
}
.mainvisual .subcopy {
    animation: fadeInUp 1s ease-out forwards; /* 1秒かけてフェードイン */
    animation-delay: 1.0s; /* 0.5秒遅れて表示 */
}

/* フェードイン用のアニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* 下から */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 元の位置 */
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.c-1 {
	padding: 158px 5vw 100px;
	text-align: center;
	background: url("../images/concept/c1.png")top center no-repeat;
}

.c-1 h2 {
	font-size: 48px;
	line-height: 100%;
	letter-spacing: 4px;
}

.c-1 p {
	font-size: 18px;
	margin-top: 50px;
	line-height: 200%;
}

@media screen and (max-width: 1280px) {
	.c-1 {
		padding: 60px 5vw 100px;
		background-size: 1200px;
	}
	
	.c-1 h2 {
		font-size: 24px;
		line-height: 140%;
		letter-spacing: 4px;
		
	}

	.c-1 p {
		font-size: 16px;
		margin-top: 50px;
		line-height: 200%;
	}

}

.c-2 {
	padding-bottom: 90px;
}

.c-2 .flex {
	display: flex;
	justify-content: space-between;
	gap:40px;
	align-items: flex-start;
}

.c-2 .flex .elevation {
	width: 32%;
}

.c-2 .flex .elevation img {
	height: 100%;
	width: auto;
}

.c-2 .flex .floor {
	width: 64%;
	display: flex;
	flex-wrap: wrap;
	gap:20px;
	justify-content: space-between;
}

.c-2 .flex .floor .box {
	width: 30%;
	display: block;
	transition: opacity 0.5s ease;
}

.c-2 .flex .floor .box h2 {
	background: #a6c58a;
	color: #FFF;
	text-align: center;
	font-size: 18px;
}

.c-2 .flex .floor .box.basic h2 {
	background: #439024;
}

.c-2 .flex .floor .box h3 {
	background: #dcdddd;
	color: #231815;
	text-align: center;
	font-size: 80px;
	line-height: 100%;
	padding: 10px 0 5px;
	vertical-align: bottom;
}

.c-2 .flex .floor .box h3 span {
	font-size: 40px;
}

.c-2 .flex .floor .box p {
	background: #231815;
	color: #FFF;
	text-align: center;
	font-size: 30px;
	line-height: 100%;
	padding: 5px 0;
}

.c-2 .flex .floor .box p span {
	font-size: 18px;
}

.c-2 .flex .floor .box p span.mini2 {
	font-size: 14px;
}

.c-2 .flex .floor .box:hover {
    opacity: 0.5; /* 50%の透明度 */
}

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

	.c-2 {
		padding: 60px 5vw;
	}

	.c-2 .flex {
		display: flex;
		gap:40px;
		flex-flow: column;
	}

	.c-2 .flex .elevation {
		width: auto;
		order: 1;
		text-align: center;
		margin: auto;
	}

	.c-2 .flex .elevation img {
		height: auto;
		width: 100%;
		margin: auto;
	}

	.c-2 .flex .floor {
		width: auto;
		display: flex;
		flex-wrap: wrap;
		gap:10px;
		justify-content: space-between;
		order: 0;
	}

	.c-2 .flex .floor .box {
		display: block;
		transition: opacity 0.5s ease;
	}

	.c-2 .flex .floor .box h2 {
		background: #a6c58a;
		color: #FFF;
		text-align: center;
		font-size: 14px;
		letter-spacing: 0;
		white-space: nowrap;
	}

	.c-2 .flex .floor .box.basic h2 {
		background: #439024;
	}

	.c-2 .flex .floor .box h3 {
		background: #dcdddd;
		color: #231815;
		text-align: center;
		font-size: 30px;
		line-height: 100%;
		padding: 10px 0 5px;
		vertical-align: bottom;
	}

	.c-2 .flex .floor .box h3 span {
		font-size: 20px;
	}

	.c-2 .flex .floor .box p {
		background: #231815;
		color: #FFF;
		text-align: center;
		font-size: 16px;
		line-height: 100%;
		padding: 5px 0;
	}

	.c-2 .flex .floor .box p span {
		font-size: 14px;
		display: block;
	}
	
	.c-2 .flex .floor .box p span.mini2 {
		font-size: 14px;
	}

	.c-2 .flex .floor .box:hover {
		opacity: 0.5; /* 50%の透明度 */
	}
}

.c-2 .flex .floor .box.nl {
	opacity: 0.2;
}