@charset "shift_jis";
/* CSS Document */
/****************************
トップページ専用cssです

※新規制作の際は下記cssを全て消してから制作してください

****************************/
.master_kino_wrap {
	display: flex;
	justify-content: space-around;
}
.tokusen_pack_wrap {
	margin: 60px auto;
	width: 1100px;
}
.tokusen_pack_wrap h2 {
	font-size: 19px;
	text-align: center;
	margin: 0 0 10px 0;
}
.tokusen_pack_wrap iframe {
	width: 100%;
	height: 360px;
	border: 0;
}
.tokusen_pack_wrap p {
	font-size: 14px;
	line-height: 22px;
	padding: 20px;
	background: #eee;
}
body {
	background: #fdfaf4;
}
#top_rent {
	overflow-x: hidden;
	& h2, h3, ul, li, p {
		margin: 0;
		padding: 0;
	}
	& ul {
		list-style: none;
	}
	& a {
		text-decoration: none;
		color: #333333;
	}
	.font_blue {
		color: #5075bb;
	}
	.font_gold {
		color: #bdac6f;
	}
	.font_gray {
		color: #878787;
	}
	.lpo_conts_wide {
		width: 1200px;
		margin-right: auto;
		margin-left: auto;
	}
	.lpo_btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		background: #333333;
		line-height: 20px;
		color: #FFF;
		letter-spacing: 0.1em;
		transition: all 0.2s;
		&:after {
			content: "";
			width: 16px;
			height: auto;
			aspect-ratio: 1 / 1;
			background-image: url(/img/top/more_ar.webp);
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
	& a.lpo_btn:hover {
		background-color: #bdac6f;
	}
	.lpo_btn_t {
		width: 300px;
		padding: 25px 20px 25px 28px;
		border-radius: 35px;
		font-size: 16px;
	}
	.lpo_btn_m {
		width: 360px;
		padding: 30px 20px 30px 28px;
		border-radius: 40px;
		font-size: 18px;
	}
	.lpo_btn_w {
		width: 420px;
		padding: 30px 20px 30px 28px;
		border-radius: 40px;
		font-size: 18px;
	}
	.lpo_title {
		>p {
			margin: 0 0 25px 0;
			font-size: 55px;
			line-height: 1;
			letter-spacing: 0.1em;
		}
		>h2 {
			font-size: 20px;
			line-height: 1;
			color: #767676;
			letter-spacing: 0.1em;
		}
	}
	.lpo_main {
		margin: 0 0 100px 0;
		background: #efecdf;
		>div {
			display: flex;
			align-items: center;
			gap: 0 20px;
			.lpo_main_sr {
				width: 450px;
				box-sizing: border-box;
				padding: 40px 30px 20px 30px;
				background: #d8cfaf;
				.lpo_main_sr_tl {
					margin: 0 0 20px 0;
					>div {
						display: flex;
						align-items: baseline;
						gap: 0 15px;
						margin: 0 0 12px 0;
						letter-spacing: 0.1em;
						>h2 {
							font-size: 30px;
							font-weight: bold;
							line-height: 1;
						}
						>p {
							font-size: 18px;
							font-weight: 300;
							color: #FFF;
						}
					}
					>p {
						font-size: 14px;
						line-height: 1.2;
					}
				}
				.lpo_main_sr_box {
					margin: 0 0 20px 0;
					padding: 25px 25px 25px 25px;
					background: #FFF;
					border-radius: 20px;
					>div {
						&:not(:last-of-type) {
							margin: 0 0 25px 0;
						}
						.buy_main_sr_item {
							display: flex;
							align-items: center;
							gap: 0 8px;
							margin: 0 0 12px 0;
							font-size: 14px;
							color: #c8ba8d;
							font-weight: bold;
							line-height: 1;
							letter-spacing: 0.1em;
							&:before {
								content: "";
								width: 15px;
								height: 12px;
								background-image: url(/chintai/img/top/main_check.webp);
								background-repeat: no-repeat;
								background-size: cover;
								background-position: center;
							}
						}
						.search_space {
							display: flex;
							justify-content: space-between;
							>input {
								width: 277px;
								box-sizing: border-box;
								border-radius: 5px;
								border: 2px solid #c8ba8d;
								padding: 0px 12px;
								font-size: 14px;
								line-height: 40px;
								font-weight: bold;
								letter-spacing: 0.1em;
								&::placeholder {
									color: #afafaf;
									font-weight: 500;
								}
							}
							.quick_keyword {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 55px;
								border-radius: 5px;
								overflow: hidden;
								.free_btn {
									width: 55px;
									box-sizing: border-box;
									padding: 10px 15px;
									background-color: #c8ba8d;
									transition: all 0.2s;
									&:hover {
										background-color: #333333;
									}
								}
							}
						}
						>ul {
							display: flex;
							flex-wrap: wrap;
							gap: 7px 5px;
							>li {
								width: calc((100% - 10px)/3);
								>a {
									display: block;
									padding: 10px 0;
									background-color: #efecdf;
									border-radius: 5px;
									font-size: 13px;
									line-height: 15px;
									text-align: center;
									box-shadow: 0px 2px 0px 0px #ddd9c6;
									transition: all 0.2s;
									position: relative;
									&:after {
										content: "";
										width: 6px;
										height: 9px;
										margin: auto;
										clip-path: polygon(0 0, 0% 100%, 100% 50%);
										background: #c8ba8d;
										position: absolute;
										top: 0;
										bottom: 0;
										right: 6px;
									}
									&:hover {
										background-color: #ddd9c6;
										box-shadow: 0px 0px 0px 0px #ddd9c6;
										transform: translateY(2px);
									}
								}
							}
						}
					}
				}
				.lpo_main_sr_btn {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 300px;
					box-sizing: border-box;
					margin: 0 auto;
					padding: 20px 20px 20px 30px;
					background: #333333;
					border-radius: 35px;
					font-size: 15px;
					line-height: 20px;
					color: #FFF;
					letter-spacing: 0.1em;
					transition: all 0.2s;
					&:after {
						content: "";
						width: 14px;
						height: auto;
						aspect-ratio: 1 / 1;
						background-image: url(/img/top/more_ar.webp);
						background-repeat: no-repeat;
						background-size: cover;
					}
					&:hover {
						background-color: #bdac6f;
					}
				}
			}
		}
	}
	.lpo_catch {
		display: inline-block;
		margin-bottom: 40px;
		font-size: 36px;
		line-height: 1.5;
		font-weight: 700;
		color: #bdac6f;
		letter-spacing: 0.1em;
		position: relative;
		&:before {
			content: "“";
			font-size: 40px;
			position: absolute;
			left: -25px;
			top: -15px;
		}
		&:after {
			content: "”";
			font-size: 40px;
			position: absolute;
			right: -35px;
			bottom: -30px;
		}
	}
	.lpo_txt {
		font-size: 16px;
		line-height: 1.75;
		letter-spacing: 0.1em;
	}
	.lpo_tl_para {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin: 0 0 35px 0;
	}
	>main {
		#lpo_reco {
			margin-bottom: 125px;
			.lpo_title {
				margin: 0 0 35px 0;
			}
		}
		.lpo_bukken {
			display: flex;
			gap: 0 26.6px;
			>li {
				width: calc((100% - 80px)/4);
				>a {
					display: block;
					box-sizing: border-box;
					padding: 15px 15px 20px 15px;
					background: #FFF;
					border-radius: 20px;
					box-shadow: 0px 0px 6px 0px RGBA(179, 179, 179, 0.2);
					.lpo_bukken_img {
						width: 100%;
						aspect-ratio: 25 / 18;
						margin: 0 0 15px 0;
						border-radius: 16px 16px 16px 0;
						overflow: hidden;
						position: relative;
						>img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							transition: all 0.2s;
						}
						>p {
							display: inline-block;
							border-radius: 0 16px 0 0;
							padding: 10px 15px 0 0;
							background: #FFF;
							font-size: 16px;
							line-height: 1.2;
							color: #bdac6f;
							position: absolute;
							bottom: 0;
							left: 0;
						}
					}
					.lpo_bukken_name {
						margin: 0 0 12px 0;
						font-size: 22px;
						line-height: 1;
						letter-spacing: 0.1em;
						transition: all 0.2s;
						>span {
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}
					}
					.lpo_bukken_price {
						display: flex;
						align-items: baseline;
						gap: 0 10px;
						margin: 0 0 12px 0;
						>p {
							display: flex;
							align-items: baseline;
							font-size: 13px;
							line-height: 1;
							>span {
								font-size: 20px;
							}
						}
						.lpo_bukken_yachin:after {
							content: "";
							width: 2px;
							height: 14px;
							margin-left: 12px;
							background: #333333;
							border-radius: 1px;
							transform: rotate(20deg);
						}
						.lpo_bukken_yachin span {
							color: #bdac6f;
							margin-left: 8px;
						}
						.lpo_bukken_kanri span {
							margin-left: 8px;
						}
						.lpo_bukken_kakaku:after {
							content: "";
							width: 2px;
							height: 18px;
							margin-left: 12px;
							background: #333333;
							border-radius: 1px;
							transform: rotate(20deg);
						}
						.lpo_bukken_kakaku span {
							color: #bdac6f;
							margin-left: 8px;
						}
					}
					>ul {
						>li {
							font-size: 14px;
							line-height: 1;
							color: #878787;
							&:not(:last-child) {
								margin: 0 0 5px 0;
							}
							>span {
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
							}
						}
					}
					&:hover {
						.lpo_bukken_img {
							>img {
								transform: scale(1.1);
							}
						}
						.lpo_bukken_name {
							color: #bdac6f;
						}
					}
				}
			}
		}
		.lpo_bukken_w {
			display: flex;
			flex-wrap: wrap;
			gap: 40px 45px;
			>li {
				width: calc((100% - 90px)/3);
				>a {
					display: block;
					box-sizing: border-box;
					padding: 25px 25px 25px 25px;
					background: #FFF;
					border-radius: 20px;
					box-shadow: 0px 0px 6px 0px RGBA(179, 179, 179, 0.2);
					.lpo_bukken_w_img {
						width: 100%;
						aspect-ratio: 25 / 18;
						margin: 0 0 25px 0;
						border-radius: 16px 16px 16px 0;
						overflow: hidden;
						position: relative;
						>img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							transition: all 0.2s;
						}
						>p {
							display: inline-block;
							border-radius: 0 16px 0 0;
							padding: 12px 20px 0 0;
							background: #FFF;
							font-size: 20px;
							line-height: 1.2;
							color: #bdac6f;
							position: absolute;
							bottom: 0;
							left: 0;
						}
					}
					.lpo_bukken_w_name {
						margin: 0 0 15px 0;
						font-size: 26px;
						line-height: 1;
						letter-spacing: 0.1em;
						transition: all 0.2s;
						>span {
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}
					}
					.lpo_bukken_w_price {
						display: flex;
						align-items: baseline;
						gap: 0 15px;
						margin: 0 0 18px 0;
						>p {
							display: flex;
							align-items: baseline;
							font-size: 18px;
							line-height: 1;
							>span {
								font-size: 26px;
							}
						}
						.lpo_bukken_w_yachin:after {
							content: "";
							width: 2px;
							height: 18px;
							margin-left: 12px;
							background: #333333;
							border-radius: 1px;
							transform: rotate(20deg);
						}
						.lpo_bukken_w_yachin span {
							color: #bdac6f;
							margin-left: 8px;
						}
						.lpo_bukken_w_kanri span {
							margin-left: 8px;
						}
						.lpo_bukken_w_kakaku:after {
							content: "";
							width: 2px;
							height: 18px;
							margin-left: 12px;
							background: #333333;
							border-radius: 1px;
							transform: rotate(20deg);
						}
						.lpo_bukken_w_kakaku span {
							color: #bdac6f;
							margin-left: 8px;
						}
					}
					>ul {
						>li {
							font-size: 18px;
							line-height: 1;
							color: #878787;
							&:not(:last-child) {
								margin: 0 0 5px 0;
							}
							>span {
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
							}
						}
					}
					&:hover {
						.lpo_bukken_w_img {
							>img {
								transform: scale(1.1);
							}
						}
						.lpo_bukken_w_name {
							color: #bdac6f;
						}
					}
				}
			}
		}
		#lpo_sha {
			margin: 0 0 140px 0;
			position: relative;
			z-index: 2;
			&:before {
				content: "";
				width: 100%;
				height: calc(100% - 330px);
				background: #efecdf;
				position: absolute;
				top: 65px;
				left: 0;
				z-index: -1;
			}
			>img {
				width: calc(50% - 20px);
				height: 400px;
				border-radius: 20px;
				object-fit: cover;
				object-position: left bottom;
				position: absolute;
				top: 0;
				right: 20px;
			}
			.lpo_conts_wide {
				padding: 155px 0 0 0;
				>div {
					width: 540px;
					margin: 0 0 55px 0;
					.lpo_sha_tl {
						margin: 0 0 45px 0;
						>img {
							margin: 0 0 25px 0;
						}
						>h2 {
							font-size: 20px;
							line-height: 1;
							color: #767676;
							letter-spacing: 0.1em;
						}
					}
					.lpo_txt {
						margin: 0 0 25px 0;
					}
					>a {
						display: block;
						width: 250px;
						transition: all 0.2s;
						>img {
							max-width: 100%;
							height: auto;
						}
						&:hover {
							transform: translateY(-5px);
						}
					}
				}
				.lpo_bukken {
					margin: 0 0 50px 0;
				}
			}
			.lpo_btn {
				margin: 0 auto;
			}
		}
		#lpo_univ {
			margin: 0 0 110px 0;
			padding: 0 0 60px 0;
			position: relative;
			&:before {
				content: "";
				width: calc(50% + 90px);
				height: calc(100% - 50px);
				background: #efecdf;
				position: absolute;
				bottom: 0;
				right: 0;
			}
			>img {
				width: calc(50% - 20px);
				height: 400px;
				border-radius: 20px;
				object-fit: cover;
				object-position: left bottom;
				position: absolute;
				top: 0;
				left: 20px;
			}
			.lpo_conts_wide {
				padding: 180px 0 0 0;
				position: relative;
				z-index: 2;
				>div {
					margin: 0 0 60px 660px;
					.lpo_title {
						margin: 0 0 40px 0;
					}
				}
				>ul {
					margin: 0 0 50px 0;
				}
				.lpo_btn {
					margin: 0 auto;
				}
			}
		}
		#lpo_latest {
			margin-bottom: 90px;
		}
		#lpo_gallery {
			display: block;
			width: 1200px;
			margin: 0 auto 160px auto;
			transition: all 0.2s;
			position: relative;
			&:hover {
				transform: translateY(-5px);
				box-shadow: 0px 0px 12px 0px RGBA(179, 179, 179, 0.4);
			}
		}
		#lpo_voice {
			margin: 0 0 130px 0;
			padding: 0 0 50px 0;
			position: relative;
			z-index: 2;
			&:after {
				content: "";
				width: 100%;
				height: calc(100% - 30px);
				background: #efecdf;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: -1;
			}
			.lpo_title {
				margin: 0 0 60px 0;
				text-align: center;
			}
			>iframe {
				margin: 0 0 40px 0;
				width: 100%;
				height: clamp(360px, 49vh, 430px);
			}
			.lpo_btn {
				margin: 0 auto;
			}
		}
		#lpo_company {
			>div {
				position: relative;
				padding: 100px 0 75px 0;
				margin: 0 0 60px 0;
				&:before {
					content: "";
					width: calc(50% + 365px);
					height: 100%;
					border-radius: 50px;
					background: #FFF;
					position: absolute;
					top: 0;
					right: 25px;
					z-index: -1;
				}
				>div {
					display: flex;
					justify-content: space-between;
					.lpo_company_l {
						width: 600px;
						position: relative;
						>img {
							width: 145px;
							height: auto;
							position: absolute;
							top: 30px;
							right: 90px;
						}
						.lpo_title {
							margin: 0 0 45px 0;
						}
						.lpo_txt {
							width: 585px;
							margin: 0 0 60px 0;
						}
						>ul {
							>li {
								display: flex;
								align-items: center;
								gap: 0 30px;
								>p {
									font-size: 16px;
									line-height: 1.5;
								}
								.lpo_company_item {
									display: flex;
									align-items: center;
									justify-content: space-between;
									width: 110px;
									&:after {
										content: ":";
										font-size: 20px;
									}
								}
								&:not(:first-child) {
									padding-top: 25px;
								}
								&:not(:last-child) {
									padding-bottom: 25px;
									border-bottom: 1px solid #464646;
								}
							}
						}
					}
					.lpo_company_r {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 560px;
						>img {
							width: 560px;
							height: 400px;
							object-fit: cover;
						}
					}
				}
			}
			>ul {
				display: flex;
				gap: 0 40px;
				>li {
					width: calc((100% - 120px)/4);
					>a {
						>div {
							width: 100%;
							aspect-ratio: 17 / 20;
							margin: 0 0 15px 0;
							border-radius: 15px;
							overflow: hidden;
							>img {
								width: 100%;
								height: 100%;
								object-fit: cover;
								transition: all 0.2s;
							}
						}
						.lpo_company_nav_name {
							margin: 0 0 12px 0;
							font-size: 21px;
							line-height: 1;
							letter-spacing: 0.05em;
							transition: all 0.2s;
							>span {
								display: inline-block;
								padding-bottom: 8px;
								border-bottom: 1px solid #333333;
								transition: all 0.2s;
							}
						}
						.lpo_company_nav_txt {
							font-size: 12px;
							line-height: 1.5;
							letter-spacing: 0.1em;
							color: #878787;
						}
						&:hover {
							>div {
								>img {
									transform: scale(1.1);
								}
							}
							.lpo_company_nav_name {
								color: #bdac6f;
								>span {
									border-bottom: 1px solid #bdac6f;
								}
							}
						}
					}
				}
			}
		}
	}
}