@charset "UTF-8";

/* ========================================
	style
======================================== */

/* --------- 土地情報共通 --------- */

/* page-title style */
.page-header-land {
	block-size: 100%;
	background: var(--gray-200) url("images/japan-map.svg") no-repeat;
	background-position: right -1em bottom 0;
	background-size: 300px auto;
	border-bottom: 2px solid var(--nawa-green);
	padding-top: clamp(110px, 14vw, 160px);
	padding-bottom: clamp(70px, 9vw, 100px);
	margin-bottom: 3em;
	text-align: center;
}

.page-title {
	text-align: center;
	margin-inline: auto;
}

.page-title--en {
	font: 500 clamp(1.6rem, 2vw, 2.2rem) / 1.7 var(--font-family-en);
	color: var(--nawa-green);
	position: relative;
	display: inline-block;
	padding-inline: 20vw;
}

.page-title--en:before,
.page-title--en:after {
	content: "";
	position: absolute;
	top: 50%;
	display: inline-block;
	inline-size: 16vw;
	block-size: 1px;
	background-color: var(--nawa-green);
}

.page-title--en:before {
	left: 0;
}

.page-title--en:after {
	right: 0;
}

.page-title--ja {
	font: 700 clamp(3.4rem, 4vw, 4.8rem) / 1 var(--font-family-jp);
}

.page-header-land .customer {
	display: inline-block;
	font-weight: 600;
	color: #fff;
	background-color: var(--nawa-green);
	border-radius: 3px;
	padding: 0.2em 3em;
	margin-top: 2em;
}

/* --------- 土地情報トップ --------- */

.intro-txt {
	font-weight: 600;
	margin-bottom: 3em;
}

/* -- アコーディオン -- */

/* タイトル部分 */
.accordion-container .accordion-title {
	position: relative;
	padding: 1.5rem 6rem 1.5rem 2rem;
	cursor: pointer;
	margin: 0;
	transition: all 0.3s ease;
}

.accordion-container .accordion-title::before,
.accordion-container .accordion-title::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	inline-size: 20px;
	block-size: 3px;
	background: var(--nawa-green);
	will-change: transformm, opacity;
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}

.accordion-container .accordion-title::before {
	transform: rotate(90deg);
}

.accordion-container .accordion-title.open::before {
	transform: rotate(180deg);
}

.accordion-container .accordion-title.open::after {
	opacity: 0;
}

.accordion-container .accordion-title:hover {
	background-color: #c9dfd8;
	border-radius: 5px;
}

.accordion-container .accordion-title.open:hover {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.accordion-container .accordion-title h2 {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.6;
	border-left: 3px solid var(--nawa-green);
	padding-left: 1em;
	padding-block: 0.5em;
}

.accordion-container .accordion-title h2 span {
	font-size: 0.85em;
	font-weight: 500;
	color: var(--text-second-color);
	padding-left: 0.5rem;
}

/* アコーディオンコンテナ */
.accordion-content {
	display: none;
	padding: 2rem 2rem 5rem;
	border-top: 3px solid var(--gray-100);
}

.accordion-container {
	inline-size: 100%;
	margin: 0 auto;
	display: flex;
	flex-flow: column;
	gap: 2rem 0;
}

.accordion-container .ac-sec {
	background-color: #fff;
	border-radius: 5px;
}

/* 詳細情報 */
.land-info {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.land-info:not(:last-of-type) {
	margin-bottom: 3em;
	padding-bottom: 3em;
	border-bottom: 1px dotted var(--line-gray);
}

.land-info-image {
	position: relative;
	inline-size: 100%;
}

.land-info-image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.land-info-detail table {
	inline-size: 100%;
	border-collapse: collapse;
	margin-bottom: 1rem;
}

.land-info-detail table th,
.land-info-detail table td {
	padding-block: 0.5rem;
	border-bottom: 5px solid #fff;
	font-size: 1.4rem;
}

.land-info-detail table td {
	padding-left: 1rem;
	text-align: left;
	line-height: 1.6;
}

.land-info-detail table th {
	white-space: nowrap;
	inline-size: 1px;
	background-color: var(--gray-100);
	text-align: center;
	padding-inline: 2rem;
}

.land-info-detail .price {
	font: 600 2.4rem/1 var(--font-family-en);
	color: var(--nawa-green);
	padding-right: 0.1em;
}

.detail-button a {
	display: block;
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	padding: 1em 5em;
	background: var(--black) url("/assets/common/images/circle-arrow-w.svg") no-repeat right 1em center/23px auto;
	box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.35);
	transition: background-color 0.3s ease;
}

.detail-button a:hover {
	background-color: var(--nawa-green);
}

/* --------- 土地情報｜詳細ページ --------- */

/* -- トップギャラリーセクション -- */

.gallery {
	margin-bottom: clamp(4em, 5vw, 6em);
}

.land-title {
	border-radius: 5px;
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.land-title .ground-grain {
	font-size: clamp(1.6rem, 2vw, 2.6rem);
	font-weight: 600;
	text-align: center;
	color: #fff;
	background-color: var(--nawa-green);
	padding: 0.5em;
}

.land-title .address {
	font-size: clamp(1.6rem, 2.2vw, 2.6rem);
	font-weight: 600;
	line-height: 1.6;
	background-color: #fff;
	padding: 1em 1em 1em 55px;
	position: relative;
}

.land-title .address::before {
	content: "";
	position: absolute;
	left: 1em;
	top: 50%;
	transform: translateY(-50%);
	inline-size: 32px;
	block-size: 32px;
	background: url("images/icon-mappin.svg") no-repeat center center/contain;
}

/* ギャラリー本体 */
/* #mainImage {
  transition: opacity 0.3s ease;
  opacity: 1;
}
#mainImage.fade-out {
  opacity: 0;
} */

.gallery__wrapper {
	margin-top: 4rem;
}

.gallery__main {
	position: relative;
	aspect-ratio: 35 / 22;
	overflow: hidden;
}

.gallery__main img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 7% 2%;
	max-width: 100%;
	margin-top: 3%;
}

.gallery__thumb {
	inline-size: 100%;
	aspect-ratio: 7 / 4;
	object-fit: cover;
	cursor: pointer;
	transition: outline 0.3s ease;
	outline: 3px solid rgba(255, 255, 255, 0);
	outline-offset: -3px;
}

.gallery__thumb.is-active {
	outline: 3px solid var(--black);
	outline-offset: -3px;
}

.overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
	padding: 8vw;
	z-index: 9999;
}

.overlay__inner {
	position: relative;
	max-inline-size: 1200px;
	max-block-size: 90vh;
	inline-size: 100%;
	block-size: auto;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
}

.overlay__inner img {
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	display: block;
}

.overlay__close {
	position: fixed;
	top: min(4vw, 4rem);
	right: min(4vw, 4rem);
	inline-size: clamp(40px, 5%, 54px);
	aspect-ratio: 1 /1;
	border: 1px solid #fff;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: clamp(1.7rem, 2.2vw, 2.6rem);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10000;
}

.gallery__zoom-button {
	position: absolute;
	bottom: 5%;
	right: 4%;
	inline-size: clamp(30px, 10%, 90px);
	aspect-ratio: 1 /1;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
	background-image: url("images/icon-zoom.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40% 40%;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
}

/* -- 概要セクション -- */

.land-overview {
	margin-bottom: clamp(4em, 5vw, 6em);
}

.map-container {
	position: relative;
	inline-size: 100%;
	block-size: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	margin-bottom: 3em;
}

.map-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.land-overview .price {
	font: 600 2.8rem/1 var(--font-family-en);
	color: var(--nawa-green);
	padding-right: 0.1em;
}

/* -- 詳細セクション -- */

.land-detail {
	margin-bottom: 6em;
}

.land-detail .detail-table {
	margin-bottom: 2em;
}

.note {
	margin-bottom: 2em;
}

.expiration-date {
	font-size: 1.2rem;
	margin-bottom: 8rem;
}

/* -- 同エリアの他の土地情報 -- */

.other {
	background-color: #fff;
	border-top: 1px solid var(--line-gray);
	border-bottom: 1px solid var(--line-gray);
	padding-block: 5rem 7rem;
	overflow: hidden;
}

.title-other {
	display: inline-block;
	inline-size: 100%;
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
	position: relative;
	margin: 0 auto 3em;
}

.title-other:before {
	content: "";
	position: absolute;
	bottom: -15px;
	display: inline-block;
	inline-size: 60px;
	block-size: 5px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: var(--nawa-green);
	border-radius: 2px;
}

/* スライドショー・共通設定 */
.swiper {
	overflow: visible;
}

.swiper.destroy .swiper-wrapper,
.swiper:has(.swiper-pagination-lock) {
	justify-content: center;
}

.swiper-slide {
	transition:
		box-shadow ease 0.3s,
		transform ease 0.3s;
}

/* スライドショー・操作部共通設定 */
.swiper.destroy .swiper-controller,
.swiper-controller:has(.swiper-pagination-lock) {
	display: none;
}

.swiper-controller {
	margin: 3rem 0 4rem;
	block-size: 22px;
	display: flex;
	align-items: center;
	gap: 0 20px;
}

/* スライドショー・プログレスバー */
.swiper-pagination-progressbar.swiper-pagination-horizontal {
	flex: 1 0;
	inline-size: auto;
	block-size: 5px;
}

.swiper-pagination-progressbar {
	background: #acacac;
	/* reset css */
	position: static;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: var(--nawa-green);
}

/* スライドショー・スライド送りボタン */
.swiper-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	inline-size: 55px;
}

.swiper-button__next,
.swiper-button__prev {
	inline-size: 22px;
	block-size: 22px;
	border-radius: 50%;
	transition: background-color 0.3s ease;
	background:
		url("/assets/common/images/chevron-right-w.svg") no-repeat center/8px auto,
		var(--black);
}

.swiper-button__prev {
	transform: rotate(180deg);
}

/* スライドショー・サムネイル画像部分 */
.other__image img {
	display: inline-block;
	aspect-ratio: 1.8427 / 1;
	object-fit: cover;
}

/* スライドショー・コンテンツ部分 */
.other__item {
	border-radius: 5px;
	overflow: hidden;
}

.other__inner {
	background: var(--gray-100);
	padding: 2rem 2.4rem 2.4rem 4rem;
	position: relative;
}

.other__inner::before {
	content: "";
	display: block;
	position: absolute;
	left: 12px;
	top: -10px;
	inline-size: 12px;
	block-size: 40px;
	background: var(--nawa-green);
}

.category__list {
	display: flex;
	column-gap: 3px;
}

.category__list > li {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.6;
	padding: 0.15em 2.25em;
	color: var(--text-base);
	background: #fff;
}

.other__title {
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--text-base);
	margin-top: 0.5em;
	block-size: 2lh;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* ========================================
	マウスポインタ専用
======================================== */
@media (hover: hover) and (pointer: fine) {
	.swiper-slide:hover {
		border-radius: 5px;
		box-shadow: 0px 3px 15px 0px rgba(62, 58, 57, 0.25);
		transform: translateY(-4px);
	}

	/* スライドショー・スライド送りボタン */
	:is(.swiper-button__next, .swiper-button__prev):hover {
		background-color: var(--nawa-green);
	}
}

/* ========================================
	1180px未満専用スタイル（TAB&SP）
======================================== */
@media screen and (width < 1180px) {
	/* --------- 土地情報トップ --------- */

	/* -- アコーディオン -- */

	/* 詳細情報 */
	.land-info-image {
		block-size: 40vw;
	}
}

/* ========================================
	768px未満専用スタイル（SP）
======================================== */
@media screen and (width < 768px) {
	/* スライドショー・共通設定 */
	.swiper.destroy {
		height: 42rem;
		height: 42rem;
	}
	.swiper {
		padding-inline: 3%;
	}
}

/* ========================================
	768px以上（PC&TAB）
======================================== */
@media screen and (768px <=width) {
	/* --------- 土地情報｜詳細ページ --------- */

	/* -- トップギャラリーセクション -- */

	/* .gallery {
		margin-bottom: 6em;
	} */

	.land-title {
		display: flex;
	}

	.land-title .ground-grain {
		display: flex;
		align-items: center;
		padding: 1em 2em;
		white-space: nowrap;
		inline-size: auto;
		flex-shrink: 0;
	}

	.land-title .address {
		flex: 1;
		padding: 1.2em 2em 1em 90px;
	}

	.land-title .address::before {
		inline-size: 50px;
		block-size: 50px;
	}

	/* ギャラリー本体 */
	.gallery__main {
		aspect-ratio: 120 / 55;
	}

	.gallery__thumbs {
		grid-template-columns: repeat(6, 1fr);
		gap: 6% 1.5%;
		margin-top: 2%;
	}

	.gallery__zoom-button {
		bottom: 8%;
	}

	/* -- 概要セクション -- */

	.map-container {
		padding-bottom: 420px;
	}

	/* -- 同エリアの他の土地情報 -- */

	.other {
		padding-block: 10rem 12rem;
	}

	.title-other {
		font-size: 2.6rem;
	}

	/* スライドショー・共通設定 */
	.swiper.destroy {
		height: 430px;
	}
	.swiper-slide {
		inline-size: 370px !important;
	}

	.swiper-slide:not(:last-child) {
		margin-right: 45px;
	}

	/* スライドショー・操作部共通設定 */
	.swiper-controller {
		margin: 4rem 0 6rem;
		block-size: 35px;
		gap: 0 40px;
	}

	/* スライドショー・スライド送りボタン */
	.swiper-button {
		inline-size: 90px;
	}

	.swiper-button__next,
	.swiper-button__prev {
		inline-size: 35px;
		block-size: 35px;
		background-size: 12px auto;
	}

	/* スライドショー・サムネイル画像部分 */
	.other__image img {
		aspect-ratio: 2.3125 / 1;
	}

	/* スライドショー・コンテンツ部分 */
	.other__inner {
		padding: 2rem 2.4rem 2.2rem 4rem;
	}

	.other__title {
		font-size: 1.8rem;
		line-height: 1.6;
	}
}

/* ========================================
	768px以上1180px未満専用スタイル（TAB）
======================================== */
@media screen and (768px <=width < 1180px) {
	/* --------- 土地情報共通 --------- */

	/* page-title style */

	.page-header-land {
		background-position: right -8em bottom -2em;
		background-size: 76vw auto;
	}

	.page-title--en {
		padding-inline: 120px;
	}

	.page-title--en::before,
	.page-title--en::after {
		inline-size: 100px;
	}

	/* --------- 土地情報トップ --------- */

	/* -- アコーディオン -- */

	/* アコーディオンコンテナ */
	.accordion-content {
		padding: 5rem 6rem 6rem;
	}
}

/* ========================================
	1180px以上専用スタイル（PC）
======================================== */
@media print, screen and (1180px <=width) {
	/* --------- 土地情報共通 --------- */

	/* page-title style */

	.page-header-land {
		background-position: right -1em top 120px;
		background-size: 800px auto;
		margin-bottom: 5em;
	}

	.page-title--en {
		padding-inline: 140px;
	}

	.page-title--en:before,
	.page-title--en:after {
		inline-size: 120px;
	}

	/* --------- 土地情報トップ --------- */

	.intro-txt {
		text-align: center;
	}

	/* -- アコーディオン -- */

	/* タイトル部分 */
	.accordion-container .accordion-title {
		padding: 2rem 6rem 2rem 3rem;
	}

	.accordion-container .accordion-title::before,
	.accordion-container .accordion-title::after {
		inline-size: 30px;
		right: 30px;
	}

	.accordion-content {
		padding: 5rem 6rem;
	}

	.accordion-container .accordion-title h2 {
		font-size: 2.4rem;
	}

	/* アコーディオンコンテナ */
	.accordion-container {
		gap: 3rem 0;
	}

	/* 詳細情報 */
	.land-info {
		flex-direction: row;
		align-items: stretch;
		gap: 2em;
	}

	.land-info-image {
		flex: 1.5;
		aspect-ratio: 16 / 9;
	}

	.land-info-detail {
		flex: 2;
	}

	.detail-button a {
		max-inline-size: 320px;
	}
}