@charset "shift_jis";
@media screen and (max-width:768px) {
	.sp_off {
		display: none;
	}
	.tokusen_pack_wrap {
		width: 1100px;
		display: flex;
		justify-content: space-between;
		align-content: flex-start;
		margin: 0;
		padding: 0;
	}
	.tokusen_pack_wrap>li {
		position: relative;
		width: 265px;
		border: 1px solid #ccc;
		box-sizing: border-box;
		overflow: hidden;
	}
	.tokusen_pack_wrap>li:hover {
		border: 1px solid #ffdd00;
		background: #fffdf3;
	}
	.tokusen_pack_img {
		width: 100%;
		height: 140px;
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	.tokusen_pack_img img {
		width: 100%;
		height: auto;
	}
	.tokusen_pack_title {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.tokusen_pack_title span {
		position: absolute;
		box-sizing: border-box;
		color: #fff;
		font-size: 14px;
		height: 30px;
		padding: 5px;
		background: #000;
		display: block;
		width: 100%;
		top: 140px;
		left: 0px;
	}
	.tokusen_pack_txt {
		margin-top: 30px;
		font-size: 12px;
		list-style: none;
		padding: 10px;
	}
	.tokusen_pack_txt ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	span.tokusen_pack_yachin {
		font-size: 16px;
		color: #FF0000;
	}
	.tokusen_pack_kakaku>div {
		display: inline-block;
		margin-left: 5px;
	}
	.tokusen_pack_kyouekihi:not(:empty)::before {
		content: "[共益費]";
		margin-right: 3px;
	}
	.tokusen_pack_kanrihi:not(:empty)::before {
		content: "[管理費]";
		margin-right: 3px;
	}
	.tokusen_pack_txt ul li {
		margin-bottom: 0px;
		font-size: 11px;
	}
	.tokusen_pack_comment {
		background: #f5f5f5;
		margin-top: 10px;
		box-sizing: border-box;
		border: 1px solid #eee;
		height: 75px;
		overflow: hidden;
	}
	.tokusen_pack_comment p {
		margin: 10px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-height: 18px;
	}
	.swiper-container4 {
		overflow: hidden;
		& h2, h3, ul, li, p {
			margin: 0;
			padding: 0;
		}
		& ul, li {
			list-style: none;
		}
		& a {
			text-decoration: none;
			color: #333333;
		}
		.t_bukken_r {
			>li {
				width: 78%;
				>a {
					display: block;
					background-color: #eceadc;
					border-radius: 10px;
					position: relative;
					z-index: 0;
					&:after {
						content: "";
						display: block;
						width: 20%;
						height: auto;
						aspect-ratio: 65 / 36;
						background-repeat: no-repeat;
						background-size: contain;
						position: absolute;
						bottom: 10px;
						right: 5%;
						background-image: url(/img/sp_index/t_bukken_arrow.webp);
						z-index: -1;
					}
					.t_bukken_pho {
						width: 100%;
						aspect-ratio: 3 / 2;
						border-radius: 10px;
						overflow: hidden;
						>img {
							object-fit: cover;
							width: 100%;
							height: 100%;
							object-position: center;
						}
					}
					.t_bukken_box {
						box-sizing: border-box;
						padding: 10px 7% 13px 7%;
						font-family: -apple-system, BlinkMacSystemFont, 'Arial', '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
						.t_bukken_kind {
							font-size: clamp(10px, 2.8vw, 14px);
							line-height: 1;
							letter-spacing: 0.05em;
							position: relative;
							display: inline-block;
							padding: 0px 0px 0px 10px;
							font-weight: bold;
							&:before {
								content: "[";
								display: block;
								font-size: clamp(10px, 0.76vw, 14px);
								position: absolute;
								top: -1px;
								left: 2px;
								font-family: "Zen Kaku Gothic Antique", sans-serif;
								font-weight: 700;
								font-style: normal;
								line-height: 1;
								color: #333333;
							}
							&:after {
								content: "]";
								display: block;
								font-size: clamp(10px, 0.76vw, 14px);
								position: absolute;
								top: -1px;
								right: -8px;
								font-family: "Zen Kaku Gothic Antique", sans-serif;
								font-weight: 700;
								font-style: normal;
								line-height: 1;
								color: #333333;
							}
						}
						.t_bukken_tit {
							font-size: clamp(12px, 3.4vw, 15px);
							line-height: 1.2;
							letter-spacing: 0.05em;
							margin: 5px 0px 0px 0px;
							font-weight: bold;
							>span {
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								font-weight: bold;
							}
						}
						.t_bukken_mid {
							display: flex;
							gap: 0px 20px;
							margin: 8px 0px 0px 0px;
							align-items: flex-end;
							.t_bukken_mo {
								font-size: clamp(13px, 3.7vw, 16px);
								line-height: 1;
								letter-spacing: 0.05em;
								font-weight: bold;
								color: #ea3c3c;
								position: relative;
								&:after {
									position: absolute;
									content: "";
									right: -15%;
									bottom: 1px;
									width: 1px;
									height: clamp(13px, 1.8vh, 15px);
									transform: rotate(25deg);
									background-color: #333333;
									border-radius: 1px;
								}
							}
							.t_bukken_floor {
								font-size: clamp(10px, 2.8vw, 13px);
								line-height: 1;
								letter-spacing: 0.05em;
								font-weight: bold;
							}
						}
						.t_bukken_det {
							font-size: clamp(10px, 2.8vw, 13px);
							line-height: 1.6;
							letter-spacing: 0.05em;
							font-weight: bold;
							margin: 10px 0px 0px 0px;
							width: 75%;
							>span {
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
	.swiper-button-prev, .swiper-button-next {
		width: 15% !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
		position: absolute !important;
		bottom: 0px !important;
		left: auto !important;
		top: auto !important;
		bottom: 0 !important;
		left: auto !important;
		z-index: 100 !important;
	}
	.swiper-button-prev {
		content: url(/img/sp_index/slide_arrow_l.webp);
		right: 27% !important;
	}
	.swiper-button-next {
		content: url(/img/sp_index/slide_arrow_r.webp);
		right: 10% !important;
	}
	.swiper-pagination {
		position: absolute;
		left: 0px;
		bottom: 0px;
		right: auto;
		display: flex;
		gap: 0px 8px;
		align-items: center;
		justify-content: flex-start;
		.swiper-pagination-bullet {
			margin: 0 !important;
			width: 11px;
			height: 11px;
			aspect-ratio: 1 / 1;
			background: #e9e6dc;
			opacity: 1;
			border-radius: 0 !important;
		}
		.swiper-pagination-bullet-active {
			background: #d8cfb7;
		}
	}
}
@media screen and (min-width: 769px) {
	.pc_off {
		display: none;
	}
	.tokusen_pack_wrap {
		width: 1100px;
		display: flex;
		justify-content: space-between;
		align-content: flex-start;
		margin: 0;
		padding: 0;
	}
	.tokusen_pack_wrap>li {
		position: relative;
		width: 265px;
		border: 1px solid #ccc;
		box-sizing: border-box;
		overflow: hidden;
	}
	.tokusen_pack_wrap>li:hover {
		border: 1px solid #ffdd00;
		background: #fffdf3;
	}
	.tokusen_pack_img {
		width: 100%;
		height: 140px;
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	.tokusen_pack_img img {
		width: 100%;
		height: auto;
	}
	.tokusen_pack_title {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.tokusen_pack_title span {
		position: absolute;
		box-sizing: border-box;
		color: #fff;
		font-size: 14px;
		height: 30px;
		padding: 5px;
		background: #000;
		display: block;
		width: 100%;
		top: 140px;
		left: 0px;
	}
	.tokusen_pack_txt {
		margin-top: 30px;
		font-size: 12px;
		list-style: none;
		padding: 10px;
	}
	.tokusen_pack_txt ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	span.tokusen_pack_yachin {
		font-size: 16px;
		color: #FF0000;
	}
	.tokusen_pack_kakaku>div {
		display: inline-block;
		margin-left: 5px;
	}
	.tokusen_pack_kyouekihi:not(:empty)::before {
		content: "[共益費]";
		margin-right: 3px;
	}
	.tokusen_pack_kanrihi:not(:empty)::before {
		content: "[管理費]";
		margin-right: 3px;
	}
	.tokusen_pack_txt ul li {
		margin-bottom: 0px;
		font-size: 11px;
	}
	.tokusen_pack_comment {
		background: #f5f5f5;
		margin-top: 10px;
		box-sizing: border-box;
		border: 1px solid #eee;
		height: 75px;
		overflow: hidden;
	}
	.tokusen_pack_comment p {
		margin: 10px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-height: 18px;
	}
	.t_bukken_con {
		overflow: hidden;
		& h2, h3, ul, li, p {
			margin: 0;
			padding: 0;
		}
		& ul, li {
			list-style: none;
		}
		& a {
			text-decoration: none;
			color: #333333;
		}
		display: flex;
		margin: 50px 0px 0px 0px;
		gap: 0px 40px !important;
		.t_bukken_l {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 35px 0px;
			margin: 40px 0px 0px 10px;
			>p {
				font-family: "Zen Kaku Gothic Antique", sans-serif;
				font-weight: 900;
				font-style: normal;
				font-size: clamp(20px, 2vw, 30px);
				line-height: 1.2;
				letter-spacing: 0.05em;
				writing-mode: vertical-rl;
				margin: 0px 20px 0px 0px;
			}
			>img {
				width: clamp(130px, 10.2vw, 154px) !important;
			}
		}
		.t_bukken_r {
			display: flex;
			gap: 0px 50px;
			>li {
				width: calc((100% - 100px) / 3);
				transition: all 0.3s;
				>a {
					display: block;
					background-color: #eceadc;
					border-radius: 20px;
					position: relative;
					transition: all 0.4s;
					z-index: 0;
					&:hover {
						transform: translateY(-7px);
						.t_bukken_pho {
							>img {
								transform: scale(1.2);
								filter: brightness(0.8);
							}
						}
						&:after {
							transform: translateX(5px);
						}
					}
					&:before {
						content: "";
						width: 55px;
						height: auto;
						aspect-ratio: 11 / 6;
						background-color: #ffffff;
						position: absolute;
						bottom: 20px;
						right: 20px;
						border-radius: 15px;
						z-index: -2;
					}
					&:after {
						content: "";
						display: block;
						width: 15px;
						height: auto;
						aspect-ratio: 3 / 2;
						background-repeat: no-repeat;
						background-size: contain;
						position: absolute;
						bottom: 30px;
						right: 40px;
						background-image: url(/img/top/t_bukken_arrow.webp);
						z-index: -1;
						transition: all 0.4s;
					}
					.t_bukken_pho {
						width: 100%;
						aspect-ratio: 3 / 2;
						border-radius: 20px;
						overflow: hidden;
						>img {
							object-fit: cover;
							width: 100%;
							height: 100%;
							object-position: center;
							transition: all 0.4s;
						}
					}
					.t_bukken_box {
						box-sizing: border-box;
						padding: clamp(20px, 2.8vh, 30px) 25px;
						.t_bukken_kind {
							font-size: clamp(10px, 0.76vw, 14px);
							line-height: 1;
							letter-spacing: 0.05em;
							position: relative;
							display: inline-block;
							padding: 0px 0px 0px 10px;
							font-weight: bold;
							&:before {
								content: "[";
								display: block;
								font-size: clamp(10px, 0.76vw, 14px);
								position: absolute;
								top: -1px;
								left: 2px;
								font-family: "Zen Kaku Gothic Antique", sans-serif;
								font-weight: 700;
								font-style: normal;
								line-height: 1;
								color: #333333;
							}
							&:after {
								content: "]";
								display: block;
								font-size: clamp(10px, 0.76vw, 14px);
								position: absolute;
								top: -1px;
								right: -8px;
								font-family: "Zen Kaku Gothic Antique", sans-serif;
								font-weight: 700;
								font-style: normal;
								line-height: 1;
								color: #333333;
							}
						}
						.t_bukken_tit {
							font-size: clamp(17px, 1.3vw, 21px);
							line-height: 1;
							letter-spacing: 0.05em;
							margin: 8px 0px 0px 0px;
							font-weight: bold;
							>span {
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
							}
						}
						.t_bukken_mid {
							display: flex;
							gap: 0px 25px;
							margin: 10px 0px 0px 0px;
							align-items: flex-end;
							.t_bukken_mo {
								font-size: clamp(17px, 1.3vw, 21px);
								line-height: 1;
								letter-spacing: 0.05em;
								font-weight: bold;
								color: #ea3c3c;
								position: relative;
								&:after {
									position: absolute;
									content: "";
									right: -13px;
									bottom: 2px;
									width: 2px;
									height: clamp(13px, 1.8vh, 15px);
									transform: rotate(25deg);
									background-color: #333333;
									border-radius: 1px;
								}
							}
							.t_bukken_floor {
								font-size: clamp(12px, 0.92vw, 16px);
								line-height: 1;
								letter-spacing: 0.05em;
								font-weight: bold;
							}
						}
						.t_bukken_det {
							font-size: clamp(11px, 0.84vw, 14px);
							line-height: 1.6;
							letter-spacing: 0.05em;
							font-weight: bold;
							margin: 10px 0px 0px 0px;
							width: 75%;
							>span {
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
							}
						}
					}
				}
			}
			>li:nth-child(1) {
				margin: 60px 0px 0px 0px;
			}
			>li:nth-child(2) {
				margin: 30px 0px 0px 0px;
			}
			>li:nth-child(3) {
				margin: 0px 0px 0px 0px;
			}
		}
	}
}
.moji_gold {
	color: #beaf87;
}