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


.c-1 {
	padding: 90px 5vw;
}

.c-1 .flex {
	display: flex;
	justify-content: space-between;
	gap:40px;
}

.c-1 .flex .text {
	width: 35%;
}

.c-1 .flex .text h2 {
	background: url("../images/plan/type.svg")no-repeat;
	background-size: cover;
	display: block;
	color: #FFF;
	font-size: 48px;
	line-height: 100%;
	padding: 10px 0;
	text-align: center;
}

.c-1 .flex .text h2 span {
	margin-left: 10px;
	font-size: 25px;
}

.c-1 .flex .text h3 {
	background: #231815;
	color: #FFF;
	text-align: center;
	font-size: 24px;
}

.c-1 .flex .text h3 span {
	font-size: 16px;
}

.c-1 .flex .text .data {
	padding: 0 10px;
	display: flex;
	flex-flow: column;
	align-items: center;
}
.c-1 .flex .text .data h4 {
	font-size: 16px;
	line-height: 140%;
	padding: 10px 0;
}

.c-1 .flex .text .data h4 span.big {
	font-size: 48px;
	line-height: 48px;
}

.c-1 .flex .text .data h4 span.mid {
	font-size: 24px;
}

.c-1 .flex .text .data p span {
	width: 150px;
	display: inline-block;
	text-align: right;
}

.c-1 .copy-area {
	display: flex;
	gap:18px;
	justify-content: center;
	margin-top: 20px;
}

.c-1 .copy-area h5 {
	writing-mode: vertical-rl;
	text-orientation: upright;
	white-space: nowrap;
	background: url("../images/plan/reaf.svg") no-repeat top;
	background-size: contain;
	padding: 50px 15px;
	font-size: 28px;
	letter-spacing: 2px;
}

.c-1 .copy-area .copy-text {
	display: flex;
	padding: 50px 0;
	gap:10px;
}

.c-1 .copy-area .copy-text p {
	writing-mode: vertical-rl;
	text-orientation: upright;
	padding: 0;
	font-size: 16px;
}

.c-1 .copy-area .icon {
	margin-top: 40px;
}

.c-1 .left .comment {
	font-size: 12px;
	line-height: 140%;
	margin-top: 20px;
}

.c-1 .flex .floor {
	width: 60%;
}

@media screen and (max-width: 767px) {
	.c-1 {
		padding: 60px 5vw;
	}

	.c-1 .flex {
		display: flex;
		flex-flow: column;
		gap:30px;
	}

	.c-1 .flex .text {
		width: auto;
	}

	.c-1 .flex .text h2 {
		background: url("../images/plan/type.svg")no-repeat;
		background-size: cover;
		display: block;
		color: #FFF;
		font-size: 40px;
		text-align: center;
	}

	.c-1 .flex .text h3 {
		background: #231815;
		color: #FFF;
		text-align: center;
		font-size: 24px;
	}

	.c-1 .flex .text h3 span {
		font-size: 16px;
	}

	.c-1 .flex .text h4 {
		font-size: 16px;
		text-align: center;
		line-height: 140%;
		padding: 10px 0;
	}

	.c-1 .flex .text h4 span.big {
		font-size: 48px;
		line-height: 48px;
	}

	.c-1 .flex .text h4 span.mid {
		font-size: 24px;
	}

	.c-1 .copy-area {
		display: flex;
		flex-flow: column;
	}

	.c-1 .copy-area h5 {
		writing-mode: horizontal-tb; /* 横書き: 上から下への通常のレイアウト */
  		text-orientation: mixed;     /* 混合の文字方向（必要に応じて） */
		white-space: normal;
		background: url("../images/plan/reaf.svg") no-repeat top;
		background-size: 60px;
		background-position: left top;
		padding: 20px 15px;
		font-size: 20px;
		letter-spacing: 2px;
		line-height: 140%;
	}

	.c-1 .copy-area .copy-text {
		flex-flow: column;
		padding-top: 0;
	}

	.c-1 .copy-area .copy-text p {
		writing-mode: horizontal-tb; /* 横書き: 上から下への通常のレイアウト */
  		text-orientation: mixed;     /* 混合の文字方向（必要に応じて） */
		padding: 0;
		font-size: 14px;
		line-height: 160%;
	}

	.c-1 .flex .floor {
		width: 80vw;
		max-width: 960px;
		margin: 0 auto;
	}
}