/* =========================================================
   MOFUTERRA TRAVEL JOURNAL
   SITEMAP.CSS — FINAL ADJUSTED
   page-sitemap.php 完全一致
========================================================= */


/* =========================================================
   01. ROOT / PAGE BASE
========================================================= */

body.mofuterra-sitemap-page {
	background: var(--mt-ivory);
	color: var(--mt-text);
}

.mt-sitemap-page {
	width: 100%;
	margin: 0;
	padding: 0;

	background: var(--mt-ivory);
	color: var(--mt-text);

	overflow: hidden;
}

.mt-sitemap-page *,
.mt-sitemap-page *::before,
.mt-sitemap-page *::after {
	box-sizing: border-box;
}

.mt-sitemap-page a {
	color: inherit;
	text-decoration: none;
}

.mt-sitemap-page h1,
.mt-sitemap-page h2,
.mt-sitemap-page h3,
.mt-sitemap-page p {
	margin: 0;
}


/* =========================================================
   02. COMMON CONTAINER
========================================================= */

.mt-sitemap-container {
	width: min(
		calc(100% - 96px),
		1240px
	);

	margin-inline: auto;
}


/* =========================================================
   03. COMMON LABEL
========================================================= */

.mt-sitemap-kicker {
	margin: 0 0 13px;

	font-family: var(--mt-font-sans);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.22em;

	color: var(--mt-gold);
}


/* =========================================================
   04. HERO
========================================================= */

.mt-sitemap-hero {
	width: 100%;

	background: var(--mt-mocha);
	color: var(--mt-white);
}

.mt-sitemap-hero .mt-sitemap-container {
	padding:
		94px
		0
		88px;
}

.mt-sitemap-hero__brand {
	font-family: var(--mt-font-sans);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.20em;

	color: var(--mt-gold);
}

.mt-sitemap-hero__label {
	margin-top: 26px !important;

	font-family: var(--mt-font-sans);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.18em;

	color: var(--mt-apricot);
}

.mt-sitemap-hero h1 {
	margin-top: 18px;

	font-size: clamp(46px, 5vw, 70px);
	font-weight: 400;
	line-height: 1.25;

	color: var(--mt-white);
}


/* =========================================================
   05. INTRO
========================================================= */

.mt-sitemap-intro {
	background: var(--mt-ivory);
}

.mt-sitemap-intro__grid {
	display: grid;

	grid-template-columns:
		minmax(0, 0.9fr)
		minmax(0, 1fr);

	gap: 100px;

	align-items: center;

	padding:
		100px
		0
		108px;
}

.mt-sitemap-intro h2 {
	font-size: clamp(40px, 4vw, 58px);
	font-weight: 400;
	line-height: 1.48;

	color: var(--mt-text);
}

.mt-sitemap-intro__copy {
	max-width: 520px;
}

.mt-sitemap-intro__copy p {
	margin-bottom: 18px;

	font-size: 14px;
	line-height: 2.05;

	color: var(--mt-taupe);
}

.mt-sitemap-intro__copy p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   06. COMMON SECTION HEADING
========================================================= */

.mt-sitemap-heading {
	display: grid;

	grid-template-columns:
		70px
		minmax(0, 1fr);

	gap: 26px;

	align-items: start;
}

.mt-sitemap-heading__number {
	font-family: var(--mt-font-display);
	font-size: 48px;
	font-weight: 500;
	line-height: 0.9;

	color: var(--mt-apricot);
}

.mt-sitemap-heading h2 {
	font-size: clamp(38px, 3.8vw, 52px);
	font-weight: 400;
	line-height: 1.3;

	color: var(--mt-text);
}


/* =========================================================
   07. TRAVEL
========================================================= */

.mt-sitemap-travel {
	padding:
		24px
		0
		124px;

	background: var(--mt-ivory);
}

.mt-sitemap-travel .mt-sitemap-heading {
	margin-bottom: 46px;
}

.mt-sitemap-travel-grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 5px;
}

.mt-sitemap-travel-card {
	display: flex;

	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;

	min-width: 0;
	min-height: 250px;

	padding:
		42px
		40px;

	background: var(--mt-mocha);
	color: var(--mt-white);

	transition:
		background-color 0.35s ease,
		transform 0.35s ease,
		box-shadow 0.35s ease;
}

.mt-sitemap-travel-card:nth-child(1) {
	background: var(--mt-mocha);
}

.mt-sitemap-travel-card:nth-child(2) {
	background: #5A4337;
}

.mt-sitemap-travel-card:nth-child(3) {
	background: #513B31;
}

.mt-sitemap-travel-card:nth-child(4) {
	background: var(--mt-dark-brown);
}

.mt-sitemap-travel-card__en {
	font-family: var(--mt-font-display);
	font-size: clamp(27px, 2.4vw, 37px);
	font-weight: 500;
	line-height: 1.1;

	letter-spacing: 0.02em;

	color: var(--mt-white);
}

.mt-sitemap-travel-card strong {
	margin-top: 12px;

	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;

	color: var(--mt-white);
}

.mt-sitemap-travel-card__desc {
	margin-top: 20px !important;

	font-size: 12px !important;
	line-height: 1.85 !important;

	color: rgba(255, 250, 244, 0.68);
}

.mt-sitemap-arrow,
.mt-sitemap-travel-card__arrow {
	margin-top: 24px;

	font-size: 17px;
	line-height: 1;

	color: var(--mt-gold);

	transition: transform 0.3s ease;
}

.mt-sitemap-travel-card:hover {
	background: var(--mt-orange);

	transform: translateY(-4px);

	box-shadow:
		0 18px 38px rgba(56, 39, 31, 0.14);
}

.mt-sitemap-travel-card:hover
.mt-sitemap-arrow,
.mt-sitemap-travel-card:hover
.mt-sitemap-travel-card__arrow {
	transform: translateX(5px);
}


/* =========================================================
   08. DISCOVER
========================================================= */

.mt-sitemap-discover {
	width: 100%;

	background: var(--mt-mocha);
	color: var(--mt-white);
}

.mt-sitemap-discover .mt-sitemap-container,
.mt-sitemap-discover__inner {
	width: min(
		calc(100% - 96px),
		1240px
	);

	margin-inline: auto;

	padding:
		88px
		0
		94px;
}

.mt-sitemap-heading--dark,
.mt-sitemap-section-head--dark {
	margin-bottom: 36px;
}

.mt-sitemap-heading--dark
.mt-sitemap-heading__number,
.mt-sitemap-section-head--dark
.mt-sitemap-section-number {
	color: var(--mt-apricot);
}

.mt-sitemap-heading--dark h2,
.mt-sitemap-section-head--dark h2 {
	color: var(--mt-white);
}

.mt-sitemap-discover-list {
	border-top:
		1px solid rgba(255, 255, 255, 0.18);
}

.mt-sitemap-discover-list > a,
.mt-sitemap-discover-item {
	display: grid;

	grid-template-columns:
		210px
		170px
		minmax(0, 1fr)
		26px;

	gap: 24px;

	align-items: center;

	min-height: 92px;

	padding:
		20px
		4px;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.18);

	color: var(--mt-white);

	transition:
		padding-left 0.3s ease,
		background-color 0.3s ease;
}

.mt-sitemap-discover__en,
.mt-sitemap-discover-item__en {
	font-family: var(--mt-font-display);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;

	color: rgba(255, 250, 244, 0.85);
}

.mt-sitemap-discover-list strong,
.mt-sitemap-discover-item strong {
	font-size: 17px;
	font-weight: 400;

	color: var(--mt-white);
}

.mt-sitemap-discover-list p,
.mt-sitemap-discover-item p {
	font-size: 12px;
	line-height: 1.8;

	color: rgba(255, 250, 244, 0.62);
}

.mt-sitemap-discover-list
.mt-sitemap-arrow,
.mt-sitemap-discover-item__arrow {
	margin-top: 0;

	text-align: right;

	color: var(--mt-gold);
}

.mt-sitemap-discover-list > a:hover,
.mt-sitemap-discover-item:hover {
	padding-left: 12px;

	background:
		rgba(255, 255, 255, 0.025);
}

.mt-sitemap-discover-list > a:hover
.mt-sitemap-arrow,
.mt-sitemap-discover-item:hover
.mt-sitemap-discover-item__arrow {
	transform: translateX(4px);
}


/* =========================================================
   09. ABOUT + INFORMATION
========================================================= */

.mt-sitemap-info,
.mt-sitemap-information {
	background: var(--mt-ivory);
}

.mt-sitemap-info__grid,
.mt-sitemap-information {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 0;

	width: min(
		calc(100% - 96px),
		1240px
	);

	margin-inline: auto;

	padding:
		92px
		0
		104px;
}

.mt-sitemap-info__column,
.mt-sitemap-information__column {
	min-width: 0;

	padding-right: 54px;
}

.mt-sitemap-info__column +
.mt-sitemap-info__column,
.mt-sitemap-information__column +
.mt-sitemap-information__column {
	padding:
		0
		0
		0
		54px;

	border-left:
		1px solid var(--mt-line);
}

.mt-sitemap-heading--small,
.mt-sitemap-section-head--small {
	grid-template-columns:
		52px
		minmax(0, 1fr);

	gap: 20px;

	margin-bottom: 32px;
}

.mt-sitemap-heading--small
.mt-sitemap-heading__number,
.mt-sitemap-section-head--small
.mt-sitemap-section-number {
	font-size: 40px;
}

.mt-sitemap-heading--small h2,
.mt-sitemap-section-head--small h2 {
	font-size: 30px;
}

.mt-sitemap-link-list {
	border-top:
		1px solid var(--mt-line);
}

.mt-sitemap-link-list a {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 24px;

	min-height: 72px;

	padding:
		16px
		2px;

	border-bottom:
		1px solid var(--mt-line);

	font-size: 14px;

	color: var(--mt-text);

	transition:
		padding-left 0.3s ease,
		color 0.3s ease;
}

.mt-sitemap-link-list a span:last-child {
	flex-shrink: 0;

	color: var(--mt-terracotta);
}

.mt-sitemap-link-list a:hover {
	padding-left: 9px;

	color: var(--mt-terracotta);
}


/* =========================================================
   10. ENDING
========================================================= */

.mt-sitemap-ending {
	width: 100%;

	background: var(--mt-apricot);
	color: var(--mt-white);
}

.mt-sitemap-ending__grid,
.mt-sitemap-ending {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 0.8fr);

	gap: 92px;

	align-items: center;
}

.mt-sitemap-ending__grid {
	width: min(
		calc(100% - 96px),
		1240px
	);

	margin-inline: auto;

	padding:
		78px
		0;
}

.mt-sitemap-ending:not(:has(.mt-sitemap-ending__grid)) {
	padding:
		78px
		max(
			48px,
			calc((100vw - 1240px) / 2)
		);
}

.mt-sitemap-ending__label {
	margin-bottom: 20px !important;

	font-family: var(--mt-font-sans);
	font-size: 9px;
	font-weight: 700;

	letter-spacing: 0.20em;

	color: var(--mt-mocha);
}

.mt-sitemap-ending h2 {
	font-size: clamp(45px, 5vw, 64px);
	font-weight: 400;
	line-height: 1.18;

	color: var(--mt-white);
}

.mt-sitemap-ending__copy {
	max-width: 470px;
}

.mt-sitemap-ending__copy p {
	margin-bottom: 12px;

	font-size: 13px;
	line-height: 1.9;

	color: rgba(255, 250, 244, 0.88);
}

.mt-sitemap-ending__copy a {
	display: inline-flex;

	align-items: center;

	gap: 36px;

	margin-top: 18px;

	padding-bottom: 7px;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.72);

	font-family: var(--mt-font-sans);
	font-size: 9px;
	font-weight: 600;

	letter-spacing: 0.15em;

	color: var(--mt-white);
}


/* =========================================================
   11. TABLET
========================================================= */

@media (max-width: 1024px) {

	.mt-sitemap-container,
	.mt-sitemap-discover__inner,
	.mt-sitemap-information,
	.mt-sitemap-info__grid {
		width:
			calc(100% - 56px);
	}

	.mt-sitemap-intro__grid {
		gap: 64px;
	}

	.mt-sitemap-travel-card {
		min-height: 220px;

		padding:
			34px
			30px;
	}

	.mt-sitemap-discover-list > a,
	.mt-sitemap-discover-item {
		grid-template-columns:
			160px
			140px
			minmax(0, 1fr)
			24px;

		gap: 18px;
	}

	.mt-sitemap-info__column,
	.mt-sitemap-information__column {
		padding-right: 34px;
	}

	.mt-sitemap-info__column +
	.mt-sitemap-info__column,
	.mt-sitemap-information__column +
	.mt-sitemap-information__column {
		padding-left: 34px;
	}

}


/* =========================================================
   12. MOBILE
========================================================= */

@media (max-width: 767px) {

	.mt-sitemap-container,
	.mt-sitemap-discover__inner,
	.mt-sitemap-information,
	.mt-sitemap-info__grid {
		width:
			calc(100% - 40px);
	}


	/* HERO */

	.mt-sitemap-hero .mt-sitemap-container {
		padding:
			66px
			0
			56px;
	}

	.mt-sitemap-hero h1 {
		font-size: 39px;
	}


	/* INTRO */

	.mt-sitemap-intro__grid {
		grid-template-columns: 1fr;

		gap: 30px;

		padding:
			54px
			0
			60px;
	}

	.mt-sitemap-intro h2 {
		font-size: 35px;
	}


	/* COMMON HEADING */

	.mt-sitemap-heading,
	.mt-sitemap-section-head {
		grid-template-columns:
			40px
			minmax(0, 1fr);

		gap: 13px;
	}

	.mt-sitemap-heading__number,
	.mt-sitemap-section-number {
		font-size: 29px;
	}

	.mt-sitemap-heading h2,
	.mt-sitemap-section-head h2 {
		font-size: 29px;
	}


	/* TRAVEL */

	.mt-sitemap-travel {
		padding:
			12px
			0
			56px;
	}

	.mt-sitemap-travel .mt-sitemap-heading,
	.mt-sitemap-travel .mt-sitemap-section-head {
		margin-bottom: 30px;
	}

	.mt-sitemap-travel-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 4px;
	}

	.mt-sitemap-travel-card {
		min-height: 180px;

		padding:
			24px
			18px;
	}

	.mt-sitemap-travel-card__en {
		font-size: 18px;
	}

	.mt-sitemap-travel-card strong {
		font-size: 11px;
	}

	.mt-sitemap-travel-card__desc {
		margin-top: 12px !important;

		font-size: 10px !important;
		line-height: 1.7 !important;
	}

	.mt-sitemap-arrow,
	.mt-sitemap-travel-card__arrow {
		margin-top: 16px;
	}


	/* DISCOVER */

	.mt-sitemap-discover .mt-sitemap-container,
	.mt-sitemap-discover__inner {
		padding:
			52px
			0
			54px;
	}

	.mt-sitemap-discover-list > a,
	.mt-sitemap-discover-item {
		grid-template-columns:
			minmax(0, 1fr)
			auto;

		gap: 6px 14px;

		min-height: 82px;

		padding:
			16px
			0;
	}

	.mt-sitemap-discover__en,
	.mt-sitemap-discover-item__en {
		grid-column: 1;

		font-size: 13px;
	}

	.mt-sitemap-discover-list strong,
	.mt-sitemap-discover-item strong {
		grid-column: 1;

		font-size: 15px;
	}

	.mt-sitemap-discover-list p,
	.mt-sitemap-discover-item p {
		display: none;
	}

	.mt-sitemap-discover-list
	.mt-sitemap-arrow,
	.mt-sitemap-discover-item__arrow {
		grid-column: 2;

		grid-row:
			1 / 3;

		align-self: center;
	}


	/* ABOUT / INFORMATION */

	.mt-sitemap-info__grid,
	.mt-sitemap-information {
		grid-template-columns: 1fr;

		gap: 54px;

		padding:
			54px
			0
			60px;
	}

	.mt-sitemap-info__column,
	.mt-sitemap-info__column +
	.mt-sitemap-info__column,
	.mt-sitemap-information__column,
	.mt-sitemap-information__column +
	.mt-sitemap-information__column {
		padding: 0;

		border-left: 0;
	}

	.mt-sitemap-heading--small,
	.mt-sitemap-section-head--small {
		grid-template-columns:
			40px
			minmax(0, 1fr);
	}

	.mt-sitemap-heading--small h2,
	.mt-sitemap-section-head--small h2 {
		font-size: 26px;
	}

	.mt-sitemap-link-list a {
		min-height: 64px;
	}


	/* ENDING */

	.mt-sitemap-ending,
	.mt-sitemap-ending__grid {
		grid-template-columns: 1fr;

		gap: 28px;
	}

	.mt-sitemap-ending__grid {
		padding:
			50px
			0;
	}

	.mt-sitemap-ending:not(:has(.mt-sitemap-ending__grid)) {
		padding:
			50px
			24px;
	}

	.mt-sitemap-ending h2 {
		font-size: 40px;
	}

}


/* =========================================================
   13. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

	.mt-sitemap-container,
	.mt-sitemap-discover__inner,
	.mt-sitemap-information,
	.mt-sitemap-info__grid {
		width:
			calc(100% - 32px);
	}

	.mt-sitemap-travel-card {
		min-height: 172px;

		padding:
			22px
			15px;
	}

	.mt-sitemap-travel-card__en {
		font-size: 16px;
	}

}


/* =========================================================
   14. ACCESSIBILITY
========================================================= */

.mt-sitemap-page a:focus-visible {
	outline:
		1px solid var(--mt-gold);

	outline-offset: 4px;
}


/* =========================================================
   15. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.mt-sitemap-page *,
	.mt-sitemap-page *::before,
	.mt-sitemap-page *::after {
		transition: none !important;
	}

}