/* CSS Document */

@charset "utf-8";

/*
<weight>: Use a value from 100 to 900
<uniquifier>: Use a unique and descriptive class name
*/
.noto-sans-jp {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

/*
// <weight>: Use a value from 200 to 800
// <uniquifier>: Use a unique and descriptive class name
*/
.manrope {
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.BHO-page {
	img {
		vertical-align: bottom;
		max-width: 100%;
		height: auto;

		&.pc-only {
			display: inline;

			@media screen and (max-width: 999px) {
				display: none;
			}
		}

		&.sp-only {
			display: none;

			@media screen and (max-width: 999px) {
				display: inline;
			}
		}
	}

	.pc-only {
		display: block;

		@media screen and (max-width: 999px) {
			display: none;
		}
	}

	.sp-only {
		display: none;

		@media screen and (max-width: 999px) {
			display: block;
		}
	}

	.pc-only2 {
		display: inline;

		@media screen and (max-width: 999px) {
			display: none;
		}
	}

	.sp-only2 {
		display: none;

		@media screen and (max-width: 999px) {
			display: inline;
		}
	}

	.c-btn {
		margin: 80px 0;

		@media screen and (max-width: 999px) {
			margin: 60px 0;
		}

		a {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #f63402;
			border-radius: 100vh;
			color: #fff;
			font-size: 22px;
			font-weight: bold;
			width: 500px;
			height: 60px;
			position: relative;

			@media screen and (max-width: 999px) {
				font-size: 18px;
				width: 90%;
			}

			.arrow {
				position: absolute;
				right: 30px;
				top: 50%;
				transform: translate(0, -50%);

				img {
					width: 22px;
				}
			}
		}
	}
}

/* ------------------------
KV
------------------------ */

.BHO-kv {
	background: url(../images/bunjohalforder/kv.jpg) no-repeat center bottom / 100% auto;
	width: 100%;
	height: auto;
	aspect-ratio: 1500 / 1046;
	padding: 4vw 0 0;

	@media screen and (max-width: 999px) {
		padding: 10vw 20px 0;
		aspect-ratio: 415 / 462;
	}
}
.BHO-kv__badge {
	margin-bottom: 70px;

	@media screen and (max-width: 999px) {
		margin-bottom: 40px;
	}

	img {
		width: 604px;

		@media screen and (max-width: 999px) {
			width: 95%;
		}
	}
}
.BHO-kv__catch {
	margin-bottom: 40px;

	@media screen and (max-width: 999px) {
		margin-bottom: 30px;
	}

	img {
		width: 826px;

		@media screen and (max-width: 999px) {
			width: 80%;
		}
	}
}
.BHO-kv__body {
	line-height: 2.1;

	@media screen and (max-width: 999px) {
		text-align: left;
	}
}

/* ------------------------
導入
------------------------ */

.BHO-intro {
	line-height: 2;
	margin: 60px 0 90px;

	@media screen and (max-width: 999px) {
		margin: 0px 0 90px;
		padding: 0 20px;
	}
}
.BHO-intro-header {
	background: url(../images/bunjohalforder/intro-yume.png) no-repeat center / 403px auto;
	min-height: 521px;
	padding: 100px 0;

	@media screen and (max-width: 999px) {
		background: url(../images/bunjohalforder/intro-yume.png) no-repeat center / 70% auto;
		min-height: auto;
		padding: 60px 0;
	}
}
.BHO-intro__ttl {
	font-size: 34px;
	font-weight: bold;
	color: #525a70;
	margin-bottom: 30px;

	@media screen and (max-width: 999px) {
		font-size: 24px;
	}

	strong {
		font-size: 51px;

		@media screen and (max-width: 999px) {
			font-size: 36px;
		}

		span {
			position: relative;
			&:before {
				content: "";
				display: block;
				height: 11px;
				width: 11px;
				border-radius: 50%;
				background: #f5b32d;
				position: absolute;
				left: 50%;
				top: -20px;
				transform: translate(-50%, 0);
			}
		}
	}
}
.BHO-intro__txt-1 {
	font-weight: bold;
	margin-bottom: 30px;

	@media screen and (max-width: 999px) {
		font-size: 14px;
	}

	strong {
		font-size: 24px;
		position: relative;

		@media screen and (max-width: 999px) {
			font-size: 22px;
		}

		&:before {
			content: "";
			display: block;
			width: 89%;
			height: 2px;
			border-bottom: 3px dashed #f5b32d;
			position: absolute;
			left: 50%;
			bottom: -9px;
			transform: translate(-50%, 0);
		}
	}
}
.BHO-intro__txt-2 {
	font-weight: bold;
	font-size: 28px;

	@media screen and (max-width: 999px) {
		font-size: 22px;
	}
}
.BHO-intro__list {
	display: flex;
	max-width: 1000px;
	margin: 0 auto;
	gap: 20px;
	margin-bottom: 25px;

	@media screen and (max-width: 999px) {
		flex-direction: column;
	}
}
.BHO-intro__item {
	width: calc((100% - 20px) / 2);
	background: #ececec;

	@media screen and (max-width: 999px) {
		width: 100%;
	}
}
.BHO-intro__item .img {
	position: relative;

	.badge {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		img {
			width: 356px;

			@media screen and (max-width: 999px) {
				width: 75%;
			}
		}
	}
}
.BHO-intro__item .txt {
	padding: 30px 50px;

	@media screen and (max-width: 999px) {
		padding: 25px 40px;
	}
}
.BHO-intro__item .txt .ttl {
	text-align: center;
	background: #ffff8c;
	font-size: 20px;
	margin-bottom: 15px;

	@media screen and (max-width: 999px) {
		font-size: 15px;
	}
}
.BHO-intro__item .txt .body {
	color: #525a70;
	font-size: 14px;
	text-align: left;
}
.BHO-intro__item .txt .btn {
	margin: 30px 0;
}
.BHO-intro__item .txt .btn a {
	border: 1px solid #525a70;
	display: inline-block;
	padding: 5px 45px;
	color: #525a70;
}
.BHO-intro__note {
	font-size: 12px;

	@media screen and (max-width: 999px) {
		text-align: left;
	}
}

/* ------------------------
ご入居までの流れ
------------------------ */

.BHO-flow {
	line-height: 2;
	margin: 60px 0 90px;

	@media screen and (max-width: 999px) {
		padding: 0 20px;
	}
}
.BHO-flow__ttl {
	font-size: 30px;
	color: #525a70;
	margin-bottom: 20px;
}
.BHO-flow__figure {
	max-width: 850px;
	margin: 0 auto;
}

/* ------------------------
インテリアセレクト
------------------------ */

.BHO-interiorselect {
	line-height: 2;
	padding: 60px 0 110px;
	background: #ecece3;

	@media screen and (max-width: 999px) {
		padding: 50px 20px 60px;
	}

	.bukken-btn {
		text-align: center;
		margin-top: 70px;

		@media screen and (max-width: 999px) {
			margin-top: 50px;
		}

		a {
			border: 1px solid #525a70;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			color: #525a70;
			padding: 5px 15px;
		}
	}
}
.BHO-interiorselect__ttl {
	margin-bottom: 40px;
	.badge {
		margin-bottom: 5px;
		img {
			width: 281px;
		}
	}
	.txt {
		font-size: 12px;

		@media screen and (max-width: 999px) {
			margin-top: 20px;
		}
	}
}
.BHO-interiorselect__ttl-2 {
	line-height: 1.4;
	margin-bottom: 20px;
	.jp {
		font-size: 32px;

		@media screen and (max-width: 999px) {
			font-size: 21px;
			margin-bottom: 10px;
		}

		span {
			border-bottom: 4px solid #f5b32d;
			display: inline-block;
		}
	}
	.en {
		font-size: 48px;
		font-weight: 300;

		@media screen and (max-width: 999px) {
			font-size: 31px;
		}

		strong {
			font-weight: 700;
		}
	}
	.note {
		font-size: 12px;

		@media screen and (max-width: 999px) {
			margin-top: 5px;
		}
	}
}
.BHO-interiorselect__gallery {
	display: flex;
	max-width: 1010px;
	margin: 0 auto;

	@media screen and (max-width: 999px) {
		flex-direction: column;
		gap: 30px;
	}
}
.BHO-interiorselect__gallery-main {
	width: 78%;
	overflow: hidden;

	@media screen and (max-width: 999px) {
		width: 100%;
	}
}
.BHO-interiorselect__gallery-main__list {
}
.BHO-interiorselect__gallery-main__item {
	background: #fff;
	text-align: left;

	.txt {
		display: flex;
		align-items: center;
		gap: 20px;
		padding: 30px;

		@media screen and (max-width: 999px) {
			gap: 13px;
			padding: 15px;
		}

		.number {
			width: 76px;
			height: 76px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d7ceb7;
			color: #fff;
			font-size: 56px;
			font-weight: 300;
			position: relative;

			@media screen and (max-width: 999px) {
				width: 50px;
				height: 50px;
				font-size: 34px;
			}
			&:before {
				content: "";
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 23px 15px 0 0;
				border-color: #c2b085 transparent transparent transparent;
				transform: rotate(0deg);
				position: absolute;
				left: 0;
				top: 0;
			}
			&:after {
				content: "";
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 0 0 23px 15px;
				border-color: transparent transparent #c2b085 transparent;
				transform: rotate(0deg);
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
		.ttl {
			line-height: 1.3;
			padding-bottom: 5px;
			.en {
				font-size: 27px;
				font-weight: 300;

				@media screen and (max-width: 999px) {
					font-size: 17px;
				}

				strong {
					font-size: 37px;
					font-weight: 700;

					@media screen and (max-width: 999px) {
						font-size: 24px;
					}
				}
			}
			.jp {
				@media screen and (max-width: 999px) {
					font-size: 11px;
				}
			}
		}
	}
}
.BHO-interiorselect__gallery-sub {
	width: 22%;
	padding-left: 45px;

	@media screen and (max-width: 999px) {
		width: 100%;
		padding-left: 0;
	}
}
.BHO-interiorselect__gallery-sub__list {
	.slick-track {
		transform: unset !important;
		display: flex;
		flex-direction: column;
		width: 100% !important;

		@media screen and (max-width: 999px) {
			flex-direction: row;
			flex-wrap: wrap;
			gap: 6px;
		}
	}
	.slick-track:before,
	.slick-track:after {
		@media screen and (max-width: 999px) {
			display: none;
		}
	}
}
.BHO-interiorselect__gallery-sub__item {
	position: relative;
	width: 100%;
	margin-bottom: 17px;
	background: #000;
	position: relative;

	@media screen and (max-width: 999px) {
		width: calc((100% - 12px) / 3);
		margin-bottom: 0;
	}

	&:last-child {
		margin-bottom: 0;
	}

	&:before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: #000;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		opacity: 0.3;
		transition: opacity 0.3s linear;
	}

	.number {
		color: #fff;
		font-size: 56px;
		font-weight: 300;
		position: absolute;
		right: 5px;
		top: 5px;
		line-height: 1;

		@media screen and (max-width: 999px) {
			font-size: 40px;
		}
	}

	&.slick-current {
		&:before {
			opacity: 0;
		}
	}
}
.BHO-interiorselect__gallery__note {
	font-weight: bold;
	text-align: left;
	margin-top: 20px;

	@media screen and (max-width: 999px) {
		font-size: 12px;
		margin-top: 10px;
	}
}

.BHO-interiorselect .premium {
	max-width: 1200px;
	margin: 80px auto 95px;

	@media screen and (max-width: 999px) {
		margin: 80px auto 35px;
	}

	.premium__list {
		display: flex;
		gap: 36px;
		margin-top: 40px;

		@media screen and (max-width: 999px) {
			gap: 10px;
			flex-wrap: wrap;
		}
	}
	.premium__item {
		width: calc((100% - 72px) / 3);
		background: #fff;
		color: #231815;
		text-align: left;
		cursor: pointer;
		transition: all 0.3s linear;

		@media screen and (max-width: 999px) {
			width: calc((100% - 10px) / 2);
		}

		.img {
			overflow: hidden;
			img {
				transition: transform 0.3s ease 0s;
			}
		}
		.txt {
			padding: 20px;

			@media screen and (max-width: 999px) {
				padding: 11px;
			}
			.ttl {
				line-height: 1.3;
				.en {
					font-size: 21px;
					font-weight: 300;

					@media screen and (max-width: 999px) {
						font-size: 10px;
					}

					strong {
						font-size: 29px;
						font-weight: 700;

						@media screen and (max-width: 999px) {
							font-size: 14px;
						}
					}
				}
				.jp {
					@media screen and (max-width: 999px) {
						font-size: 8px;
					}
				}
			}
		}

		&:hover {
			color: #fff;
			background: #231815;

			.img {
				img {
					transform: scale(1.1);
				}
			}
		}
	}

	/* モーダル本体 */
	.modal__wrapper {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 120;
		width: 100%;
		height: 100%;
		z-index: 1001;

		.modal__layer {
			height: 100%;
			background: rgba(50, 50, 50, 0.5);
			cursor: pointer;
		}

		.modal__container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 960px;
			height: auto;
			max-height: calc(100% - 150px);
			padding: 50px 65px 40px;
			background: #fff;
			overflow: auto;

			@media screen and (max-width: 999px) {
				width: 100%;
				left: 0;
				transform: translate(0, -50%);
				padding: 22px 24px 30px;
			}

			.modal__inner {
				position: relative;
				height: 100%;

				.modal__content {
					.txt {
						padding: 20px;

						@media screen and (max-width: 999px) {
							padding: 20px 0;
						}

						.ttl {
							line-height: 1.3;
							margin-bottom: 20px;
							.en {
								font-size: 32px;
								font-weight: 300;

								@media screen and (max-width: 999px) {
									font-size: 22px;
								}

								strong {
									font-size: 44px;
									font-weight: 600;

									@media screen and (max-width: 999px) {
										font-size: 30px;
									}
								}
							}
							.jp {
								font-size: 24px;

								@media screen and (max-width: 999px) {
									font-size: 17px;
								}
							}
						}
						.body {
							font-size: 14px;
							color: #525a70;
							text-align: left;
							max-width: 385px;
							margin: 0 auto;

							@media screen and (max-width: 999px) {
								max-width: 100%;
							}
						}
					}
				}

				/* モーダルを閉じるボタン */
				.modal__close {
					cursor: pointer;
					margin-top: 20px;
					img {
						width: 100px;
					}
				}
			}
		}
	}
}

.BHO-interiorselect .option {
	max-width: 1200px;
	border: 1px solid #231815;
	padding: 35px 60px 55px;
	position: relative;

	@media screen and (max-width: 999px) {
		padding: 21px 22px 40px;
	}

	.option__ttl {
		font-size: 24px;

		@media screen and (max-width: 999px) {
			font-size: 17px;
		}
	}
	.option__ttl {
		margin-bottom: 10px;
	}
	.option__list {
		display: flex;
		gap: 6px;

		@media screen and (max-width: 999px) {
			flex-wrap: wrap;
			gap: 10px;
		}
	}
	.option__item {
		width: calc((100% - 36px) / 7);
		font-size: 12px;
		text-align: left;

		@media screen and (max-width: 999px) {
			width: calc((100% - 20px) / 3);
			font-size: 10px;
		}
	}
	.option__note {
		font-size: 12px;
		text-align: right;
		position: absolute;
		right: 14px;
		bottom: 7px;
	}
}

/* ------------------------
ハーフオーダー
------------------------ */

.BHO-halforder {
	line-height: 2;
	padding: 60px 0 100px;
	background: #525a70;

	@media screen and (max-width: 999px) {
		padding: 50px 20px 60px;
	}

	.BHO-interiorselect__gallery-main__item {
		.txt {
			.number {
				background: #9ca1ad;
				&:before {
					border-color: #688097 transparent transparent transparent;
				}
				&:after {
					border-color: transparent transparent #688097 transparent;
				}
			}
		}
	}

	.bukken-btn {
		text-align: center;
		margin-top: 70px;

		@media screen and (max-width: 999px) {
			margin-top: 50px;
		}

		a {
			border: 1px solid #fff;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			padding: 5px 15px;
		}
	}
}
.BHO-halforder__ttl-2 {
	line-height: 1.4;
	margin-bottom: 40px;
	.jp {
		font-size: 32px;

		@media screen and (max-width: 999px) {
			font-size: 21px;
			margin-bottom: 10px;
		}

		span {
			border-bottom: 4px solid #f5b32d;
			display: inline-block;
			color: #fff;
		}
	}
	.en {
		font-size: 48px;
		font-weight: 300;

		strong {
			font-weight: 700;
		}
	}
	.note {
		font-size: 12px;
	}
}
.BHO-interiorselect__gallery_note {
	color: #fff;
	text-align: left;
	max-width: 1010px;
	margin: 35px auto 0;
	line-height: 1.8;

	@media screen and (max-width: 999px) {
		font-size: 12px;
		margin: 10px 0 0;
	}
}

/* ------------------------
インテリアセレクト・ハーフオーダーで購入されたお客様
------------------------ */

.BHO-voice {
	line-height: 2;
	margin: 60px 0 90px;

	@media screen and (max-width: 999px) {
		padding: 0 20px;
		margin: 40px 0 80px;
	}
}
.BHO-voice-inner {
	margin: 0 auto;
}
.BHO-voice__ttl {
	font-size: 30px;
	margin-bottom: 30px;

	@media screen and (max-width: 999px) {
		font-size: 25px;
		line-height: 1.32;
		text-align: left;
	}
}
.BHO-voice__list {
	@media screen and (max-width: 999px) {
		flex-direction: column;
		padding: 0 10px;
		gap: 60px;
	}

	.slick-prev,
	.slick-next {
		width: 96px;
		height: 96px;
		top: calc(50% - 85px);
		bottom: auto;
		border-radius: 0;
		transform: translate(0, -50%);
		z-index: 1;

		@media screen and (max-width: 999px) {
			width: 64px;
			height: 64px;
			top: calc(50% - 104px);
		}
	}
	.slick-prev:before,
	.slick-prev:after,
	.slick-next:before,
	.slick-next:after {
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		content: "";
		display: block;
		opacity: 1;
		width: 100%;
		height: 100%;
	}

	.slick-prev {
		left: 15px;
	}
	@media screen and (max-width: 999px) {
		.slick-prev {
			left: -8px;
		}
	}
	.slick-prev:before {
		background-image: url(../images/bunjohalforder/slick-left.png);
	}

	.slick-next {
		right: 15px;
	}
	@media screen and (max-width: 999px) {
		.slick-next {
			right: -8px;
		}
	}
	.slick-next:before {
		background-image: url(../images/bunjohalforder/slick-right.png);
	}
}
.BHO-voice__item {
	margin: 0 30px;
	text-align: left;

	@media screen and (max-width: 999px) {
		width: 100%;
		margin: 0 10px;
	}

	.img {
		margin-bottom: 20px;
	}
	.txt {
		.data {
			font-size: 14px;
			margin-bottom: 13px;
			border-bottom: 1px solid #a0a8ba;
			color: #525a70;
			padding-bottom: 5px;
		}
		.voice {
			font-size: 20px;
			font-weight: bold;
			line-height: 1.35;
		}
	}
	.btn {
		text-align: center;
		margin-top: 30px;
		a {
			border: 1px solid #525a70;
			width: 188px;
			height: 43px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			color: #525a70;
		}
	}
}

/* ------------------------
環境にもやさしい住まいづくり
------------------------ */

.BHO-eco {
	line-height: 2;
	padding: 60px 0 90px;
	margin-bottom: 80px;
	background: url(../images/bunjohalforder/eco-bg.jpg) no-repeat center top / cover;

	@media screen and (max-width: 999px) {
		padding: 60px 20px 60px;
		background: url(../images/bunjohalforder/sp/eco-bg.jpg) no-repeat center top / cover;
	}
}
.BHO-eco-inner {
	max-width: 860px;
	margin: 0 auto;
}
.BHO-eco__ttl {
	font-size: 30px;
	margin-bottom: 30px;

	@media screen and (max-width: 999px) {
		font-size: 25px;
		line-height: 1.32;
	}
}
.BHO-eco__list {
	display: flex;
	gap: 70px;

	@media screen and (max-width: 999px) {
		flex-direction: column;
		padding: 0 10px;
	}
}
.BHO-eco__item {
	width: calc((100% - 70px) / 2);
	text-align: left;

	@media screen and (max-width: 999px) {
		width: 100%;
	}

	.img {
		margin-bottom: 15px;
	}
	.txt {
		.ttl {
			font-size: 23px;
			font-weight: bold;
			line-height: 1.35;
			text-align: center;
			border-top: 1px solid #525a70;
			border-bottom: 1px solid #525a70;
			color: #525a70;
			padding: 10px 0;
			margin-bottom: 20px;
		}
		.body {
			font-size: 14px;
			line-height: 1.78;
		}
	}
}
.BHO-eco__btn {
	text-align: center;
	margin-top: 30px;
	a {
		border: 1px solid #525a70;
		padding: 5px 34px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #525a70;
	}
}

/* ------------------------
BRAND CONCEPT
------------------------ */

.BHO-page {
	.brand_concept2025 {
		.Wbase {
			.brand_list {
				margin-top: 50px;
				gap: 30px 50px;
			}
		}
	}
}