@charset "utf-8";
#page_top {
	background-image: url(../image/about/works/works-page_top@pc.webp);
}

#works {
	width: 100%;
	height: auto;
	padding: 0;
}
	.works__inner {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
		.works__tab_area {
			width: 90%;
			max-width: 960px;
			height: auto;
			padding: 105px 0 40px;
			margin: 0 auto;
		}
			.works__tab_list {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: 30px;
				width: 100%;
				height: auto;
				margin: 0 auto;
			}
				.works__tab_list__item {
					width: 280px;
					height: auto;
					padding: 14px 0;
					border: solid 1px #333333;
					transition: .3s;
					cursor: pointer;
				}
			@media (any-hover: hover) {
				.works__tab_list__item:hover {
					background-color: #333333;
				}
					.works__tab_list__item:hover p {
						color: #ffffff;
					}
			}
				.works__tab_list__item._current {
					background-color: #333333;
				}
					.works__tab_list__item p {
						font-size: 16px;
						font-weight: 500;
						line-height: 2;
						letter-spacing: 0.04em;
						text-align: center;
						color: #333333;
					}
					.works__tab_list__item:nth-of-type(2) p {
						letter-spacing: 0.2em
					}
					.works__tab_list__item._current p {
						color: #ffffff;
					}
		.works__contents_area {
			width: 100%;
			height: auto;
			margin: 0 auto;
		}
			.works__contents {
				display: none;
				width: 100%;
				height: auto;
				margin: 0 auto;
			}
			.works__contents._active {
				display: block;
				opacity: 1;
			}
				.works__main_area {
					width: 100%;
					height: auto;
					margin: 0 auto;
				}
					.works__main_swiper {
						width: 100%;
						height: calc((530 / 1440) * 100vw);
						margin: 0 auto;
					}
						.works__main__slide {
							width: 100%;
							height: 100%;
							position: relative;
						}
							.works__main__image {
								width: 100%;
								height: 100%;
							}
								.works__main__image img {
									width: 100%;
									height: 100%;
									object-fit: cover;
								}
								._apartment .works__main__image._01 img {
									object-position: center 80%;
								}
								._apartment .works__main__image._02 img {
									object-position: center 53%;
								}
								._apartment .works__main__image._03 img {
									object-position: center 70%;
								}
								._apartment .works__main__image._04 img {
									object-position: center 62%;
								}
								._apartment.works__main__image._05 img {
									object-position: center 73%;
								}
								._house .works__main__image._01 img {
									object-position: center 40%;
								}
								._house .works__main__image._02 img {
									object-position: center 47%;
								}
								._house .works__main__image._03 img {
									object-position: center 73%;
								}
								._house .works__main__image._04 img {
									object-position: center 66%;
								}
							.works__main__info {
								display: flex;
								justify-content: flex-end;
								width: 90%;
								max-width: 1060px;
								position: absolute;
								bottom: 25px;
								left: 50%;
								transform: translateX(-50%);
							}
								.works__main__info__txt {
									font-size: 12px;
									font-weight: 400;
									line-height: 1.8;
									color: var(--color--white);
								}
				.works__sub_area {
					width: 100%;
					height: auto;
					padding: 22px 0 65px;
					border-bottom: solid 1px var(--color--navy-3);
				}
					.works__sub_area__inner {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						width: 90%;
						max-width: 1060px;
						height: auto;
						margin: 0 auto;
					}
						.works__sub_area__thumb {
							width: calc((500 / 1060) * 100%);
							height: auto;
						}
							.works__thumb_swiper {
								width: 100%;
								height: auto;
							}
								.works__thumb__slide {
									width: 100%;
									height: auto;
									cursor: pointer;
									position: relative;
									transition: all 0.3s ease;
								}
									.works__thumb__slide img {
										width: 100%;
										height: auto;
									}
							.works__sub_area__thumb__nav_area {
								display: flex;
								justify-content: space-between;
								align-items: center;
								width: 100%;
								height: auto;
								padding: 10px 0 0;
							}
								.works__thumb_swiper_pagination {
									display: flex;
									justify-content: center;
									align-items: center;
									width: calc(100% - 100px) !important;
									height: 5px;
									background-color: #e6e6e6;
									border-radius: 9999px;
									overflow: hidden;
								}
									.works__thumb_swiper_pagination .swiper-pagination-bullet {
										display: block;
										flex: 1;
										height: 100%;
										border-radius: 9999px;
										background-color: var(--color--navy-3);
										padding: 0 !important;
										margin: 0 !important;
										opacity: 0;
										transition: .3s;
									}
									.works__thumb_swiper_pagination .swiper-pagination-bullet-active {
										opacity: 1;
									}
								.works__thumb_swiper_nav {
									display: flex;
									justify-content: space-between;
									align-items: center;
									width: 60px;
									height: auto;
								}
									.works__thumb_swiper_nav__prev,
									.works__thumb_swiper_nav__next {
										width: 22px;
										height: 22px;
										position: relative;
										cursor: pointer;
									}
									.swiper-button-disabled.works__thumb_swiper_nav__prev,
									.swiper-button-disabled.works__thumb_swiper_nav__next {
										cursor: default;
									}
										.works__thumb_swiper_nav__prev::before,
										.works__thumb_swiper_nav__next::before {
											content: '';
											display: block;
											width: 11px;
											height: 11px;
											position: absolute;
											top: 50%;
											transform: translate(-50%, -50%) rotate(-45deg);
										}
										.works__thumb_swiper_nav__prev::before {
											left: 60%;
											border-top: solid 3px var(--color--navy-3);
											border-left: solid 3px var(--color--navy-3);
										}
										.works__thumb_swiper_nav__next::before {
											left: 40%;
											border-bottom: solid 3px var(--color--navy-3);
											border-right: solid 3px var(--color--navy-3);
										}
										.swiper-button-disabled.works__thumb_swiper_nav__prev::before {
											border-top: solid 3px #e6e6e6;
											border-left: solid 3px #e6e6e6;
										}
										.swiper-button-disabled.works__thumb_swiper_nav__next::before {
											border-bottom: solid 3px #e6e6e6;
											border-right: solid 3px #e6e6e6;
										}
						.works__sub_area__details {
							width: calc((406 / 1060) * 100%);
							height: auto;
						}
							.works__sub_swiper {
								width: 100%;
								height: auto;
							}
								.works__details__slide {
									width: 100%;
									height: auto;
									background-color: var(--color--white);
								}
									.works__details__slide__ttl {
										width: 100%;
										height: auto;
										font-size: 20px;
										font-weight: 400;
										line-height: 1.35;
										letter-spacing: 0em;
										opacity: 0;
										transform: translateY(10px);
										transition: .4s;
									}
									.works__details__slide__txt {
										width: 100%;
										height: auto;
										font-size: 16px;
										font-weight: 400;
										line-height: 1.8;
										letter-spacing: 0em;
										opacity: 0;
										transform: translateY(10px);
										transition: .4s;
									}
									.swiper-slide-active .works__details__slide__ttl,
									.swiper-slide-active .works__details__slide__txt {
										opacity: 1;
										transform: translateY(0);
										transition-delay: .4s;
									}
				.works__contents__other {
					width: 100%;
					height: auto;
					padding: 92px 0 168px;
				}
					.works__contents__other__inner {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						width: 90%;
						max-width: 1060px;
						height: auto;
						margin: 0 auto;
					}
						.works__contents__other__list {
							width: auto;
							height: auto;
						}
							.works__contents__other__list li {
								width: 100%;
								height: auto;
								font-size: 16px;
								font-weight: 400;
								letter-spacing: 0em;
							}
								.works__contents__other__list li span {
									display: inline-block;
								}
								.works__contents__other__list li span:nth-of-type(1) {
									width: 80px;
								}
								.works__contents__other__list li span:nth-of-type(2) {
									width: 300px;
								}
								._house .works__contents__other__list li span:nth-of-type(2) {
									width: 340px;
								}
								.works__contents__other__list li span:nth-of-type(3) {
									width: 78px;
									position: relative;
									text-align: right;
								}
									.works__contents__other__list li span:nth-of-type(3)::before {
										content: '全';
										position: absolute;
										left: 0;
									}
									.works__contents__other__list li span:nth-of-type(3) small {
										display: inline-block;
										font-size: 10px;
										position: absolute;
										bottom: 10px;
										right: -6px;
										transform: translateY(100%);
									}

/* PC ================================================== */
@media all and (max-width: 1100px){
					.works__contents__other__inner {
						flex-direction: column;
						align-items: center;
					}
}

@media all and (min-width: 769px){

}

/* Tablet ================================================== */
@media all and (max-width: 768px){
#page_top {
	background-image: url(../image/about/works/works-page_top@sp.webp);
}

#works {
	padding: 64px 0 0;
}
	.works__inner {
		width: 100%;
		max-width: initial;
	}
		.works__tab_area {
			width: 100%;
			max-width: initial;
			padding: 0 0 24px;
		}
			.works__tab_list {
				width: calc((344 / 390) * 100%);
				justify-content: space-between;
				gap: 10px;
			}
				.works__tab_list__item {
					flex: 1;
					width: auto;
					padding: 16px 0;
				}
					.works__tab_list__item p {
						font-size: 14px;
						font-weight: 400;
						line-height: 1;
						letter-spacing: 0.06em;
					}
					.works__main_swiper {
						height: 380px;
					}
							.works__main__info {
								display: none;
							}
				.works__sub_area {
					padding: 15px 0 0;
					margin: 0 auto;
					border-bottom: none;
				}
					.works__sub_area__inner {
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;
						width: 100%;
						max-width: initial;
					}
						.works__sub_area__thumb {
							width: 100%;
						}
							.works__sub_area__thumb__nav_area {
								width: calc((370 / 390) * 100%);
								padding: 8px 0 0;
								margin: 0 auto;
							}
								.works__thumb_swiper_pagination {
									width: 100% !important;
									height: 8px;
								}
								.works__thumb_swiper_nav {
									display: none;
								}
						.works__sub_area__details {
							width: calc((355 / 390) * 100%);
							margin: 36px auto 0;
							padding: 0 0 34px;
							border-bottom: solid 1px var(--color--black);
						}
									.works__details__slide__txt {
										width: 100%;
										height: auto;
									}
									.works__main__info__txt {
										margin-top: 20px;
										font-size: 14px;
										font-weight: 300;
										line-height: 1.6;
										color: var(--color--black);
										opacity: 0;
										transform: translateY(10px);
										transition: .4s;
									}
									.swiper-slide-active .works__main__info__txt {
										opacity: 1;
										transform: translateY(0);
										transition-delay: .4s;
									}
				.works__contents__other {
					padding: 36px 0 42px;
				}
					.works__contents__other__inner {
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;
						gap: 16px;
						width: calc((355 / 390) * 100%);
						margin: 0 auto;
					}
						.works__contents__other__list {
							display: flex;
							flex-direction: column;
							gap: 16px;
							width: 100%;
						}
							.works__contents__other__list li {
								display: flex;
								justify-content: space-between;
								align-items: flex-start;
								flex-wrap: wrap;
								font-size: 14px;
								line-height: 1.6;
							}
								.works__contents__other__list li span {
									display: block;
								}
								.works__contents__other__list li span:nth-of-type(1) {
									width: 100%;
								}
								.works__contents__other__list li span:nth-of-type(2) {
									width: auto;
									flex: 1;
								}
								._house .works__contents__other__list li span:nth-of-type(2) {
									width: 68px;
								}
								.works__contents__other__list li span:nth-of-type(3) {
									width: 68px;
								}
									.works__contents__other__list li span:nth-of-type(3) small {
										bottom: 4px;
									}



}
/* SP ================================================== */
@media all and (max-width: 575px){

}