/* =========================================================
   MOFUTERRA TRAVEL JOURNAL
   FRONT-PAGE.CSS
   FINAL
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.mofuterra-front-page {
	--mtj-ivory: #f3ede5;
	--mtj-ivory-light: #f7f2eb;

	--mtj-brown: #5a4639;
	--mtj-brown-dark: #49372d;

	--mtj-orange: #bf5736;
	--mtj-orange-dark: #a94327;
	--mtj-apricot: #d98259;

	--mtj-gold: #d6a55e;
	--mtj-taupe: #968779;
	--mtj-greige: #bbb3aa;

	--mtj-text: #49372d;
	--mtj-line: rgba(73, 55, 45, 0.20);
}


/* =========================================================
   COMMON
========================================================= */

.mtj-main {
	width: 100%;
	margin: 0;
	padding: 0;

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

.mtj-main *,
.mtj-main *::before,
.mtj-main *::after {
	box-sizing: border-box;
}

.mtj-section-inner {
	width: min(calc(100% - 128px), 1000px);
	margin: 0 auto;
}

.mtj-section-label {
	margin: 0;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 13px;
	font-weight: 500;
	line-height: 1;

	letter-spacing: 0.28em;

	color: #c65434;
}

.mtj-section-label--gold {
	color: #d99a43;
}

.mtj-section-label--orange {
	color: #d45c38;
}


/* =========================================================
   TEXT LINK
========================================================= */

.mtj-text-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	gap: 34px;

	min-width: 180px;

	padding: 0 0 10px;

	border-bottom: 1px solid currentColor;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 13px;
	font-weight: 500;
	line-height: 1;

	letter-spacing: 0.18em;

	color: var(--mtj-text);
	text-decoration: none;

	transition:
		color 0.28s ease,
		opacity 0.28s ease;
}

.mtj-text-link:hover {
	color: var(--mtj-orange);
}


/* =========================================================
   01 HERO
========================================================= */

.mtj-hero {
	background: var(--mtj-ivory-light);
}

.mtj-hero__inner {
	position: relative;

	min-height: 720px;

	padding:
		160px
		90px
		72px;

	overflow: hidden;

	background:
		linear-gradient(
			110deg,
			#f7f2eb 0%,
			#f5efe7 42%,
			#ead8cb 72%,
			#df8b62 100%
		);
}

.mtj-hero__content {
	position: relative;
	z-index: 2;

	max-width: 800px;
}

.mtj-kicker {
	margin: 0 0 50px;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 12px;
	font-weight: 500;
	line-height: 1;

	letter-spacing: 0.25em;

	color: #c65738;
}

.mtj-hero__title {
	max-width: 770px;

	margin: 0;

	font-family:
		"Noto Serif JP",
		"Yu Mincho",
		serif;

	font-size: clamp(62px, 6.2vw, 88px);
	font-weight: 400;
	line-height: 1.4;

	letter-spacing: 0.02em;

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

.mtj-hero__bottom {
	margin-top: 50px;
}

.mtj-hero__copy {
	margin-bottom: 42px;
}

.mtj-hero__copy p {
	margin: 0 0 8px;

	font-family:
		"Noto Serif JP",
		"Yu Mincho",
		serif;

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

	letter-spacing: 0.025em;

	color: rgba(73, 55, 45, 0.86);
}

.mtj-hero__scroll {
	position: absolute;

	left: 48px;
	bottom: 24px;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	letter-spacing: 0.25em;

	color: #7d6b60;

	writing-mode: vertical-rl;
}

.mtj-hero__volume {
	position: absolute;

	right: 48px;
	bottom: 52px;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;

	letter-spacing: 0.20em;

	color: #84776c;
}


/* =========================================================
   02 PHILOSOPHY
========================================================= */

.mtj-philosophy {
	padding: 82px 0 124px;

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

.mtj-philosophy__grid {
	display: grid;

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

	gap: 125px;

	margin-top: 88px;
}

.mtj-philosophy__heading h2 {
	margin: 0;

	font-family:
		"Noto Serif JP",
		"Yu Mincho",
		serif;

	font-size: clamp(42px, 4.4vw, 58px);
	font-weight: 400;
	line-height: 1.68;

	letter-spacing: 0.035em;

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

.mtj-philosophy__copy {
	padding-top: 4px;
}

.mtj-philosophy__copy p {
	margin: 0 0 42px;

	font-family:
		"Noto Serif JP",
		"Yu Mincho",
		serif;

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

	letter-spacing: 0.02em;

	color: rgba(73, 55, 45, 0.92);
}

.mtj-philosophy__copy p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   03 THE ART OF STAYING
========================================================= */

.mtj-staying {
	display: grid;
	grid-template-columns: 56% 44%;

	min-height: 640px;

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

.mtj-staying__visual {
	position: relative;

	min-height: 640px;

	overflow: hidden;

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

.mtj-staying__shape {
	position: absolute;
}

.mtj-staying__shape--top {
	left: -20%;
	top: 18%;

	width: 135%;
	height: 65%;

	background: var(--mtj-apricot);

	transform: rotate(-36deg);
}

.mtj-staying__shape--bottom {
	left: 9%;
	bottom: -31%;

	width: 120%;
	height: 61%;

	background: var(--mtj-orange-dark);

	transform: rotate(-36deg);
}

.mtj-staying__vertical {
	position: absolute;

	left: 30px;
	bottom: 28px;

	z-index: 2;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 9px;

	letter-spacing: 0.28em;

	color: #ffffff;

	writing-mode: vertical-rl;
}

.mtj-staying__content {
	display: flex;
	align-items: center;

	padding: 82px 72px;

	background: #eee5d9;
}

.mtj-staying__content-inner {
	width: 100%;
}

.mtj-staying__content h2 {
	margin: 33px 0 46px;

	font-family:
		"Noto Serif JP",
		"Yu Mincho",
		serif;

	font-size: clamp(38px, 4.2vw, 52px);
	font-weight: 400;
	line-height: 1.55;

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

.mtj-staying__description {
	max-width: 390px;

	margin: 0 0 56px;

	font-family:
		"Noto Serif JP",
		"Yu Mincho",
		serif;

	font-size: 15px;
	line-height: 2.15;

	letter-spacing: 0.02em;

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

.mtj-button {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 280px;

	padding: 24px 28px;

	background: var(--mtj-orange);

	font-family:
		"Noto Serif JP",
		serif;

	font-size: 14px;
	font-weight: 600;

	color: #ffffff;
	text-decoration: none;

	transition:
		background-color 0.3s ease,
		transform 0.3s ease;
}

.mtj-button:hover {
	background: var(--mtj-orange-dark);

	transform: translateY(-2px);
}


/* =========================================================
   04 DESTINATIONS
========================================================= */

.mtj-destinations {
	padding: 76px 0 72px;

	background: #503c31;
	color: #fff9f0;
}

.mtj-destinations__intro {
	display: grid;
	grid-template-columns: 1fr 1fr;

	align-items: end;

	gap: 60px;

	margin-top: 72px;
	margin-bottom: 82px;
}

.mtj-destinations__intro h2 {
	margin: 0;

	font-family:
		"Noto Serif JP",
		"Yu Mincho",
		serif;

	font-size: clamp(44px, 5vw, 62px);
	font-weight: 400;
	line-height: 1.55;

	color: #fffaf2;
}

.mtj-destinations__intro p {
	margin: 0 0 13px;

	font-family:
		"Noto Serif JP",
		serif;

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

	color: #e7d8ca;
}

.mtj-destination-list {
	display: block;

	border-top: 1px solid rgba(255,255,255,0.22);
}

.mtj-destination {
	position: relative;

	display: grid;

	grid-template-columns:
		70px
		1.4fr
		1fr
		25px;

	align-items: center;

	gap: 20px;

	min-height: 118px;

	padding: 0 10px;

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

	background: transparent;

	color: #fffaf2;
	text-decoration: none;

	transition:
		background-color 0.34s ease,
		transform 0.34s cubic-bezier(.2,.7,.2,1),
		padding-left 0.34s ease,
		padding-right 0.34s ease,
		box-shadow 0.34s ease;
}

.mtj-destination__number {
	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 11px;

	color: #e2a947;

	transition: color 0.3s ease;
}

.mtj-destination strong {
	font-family:
		"Cormorant Garamond",
		serif;

	font-size: 40px;
	font-weight: 600;
	line-height: 1;

	letter-spacing: 0.01em;

	color: #fffaf2;

	transition:
		color 0.3s ease,
		transform 0.3s ease;
}

.mtj-destination__desc {
	font-family:
		"Noto Serif JP",
		serif;

	font-size: 14px;

	color: #ead9cb;

	transition: color 0.3s ease;
}

.mtj-destination__arrow {
	font-size: 18px;

	color: #e0a43f;

	transition:
		transform 0.3s ease,
		color 0.3s ease;
}


/* DESTINATIONS HOVER */

.mtj-destination:hover {
	z-index: 3;

	background: rgba(255, 250, 242, 0.07);

	transform: translateY(-3px);

	padding-left: 20px;
	padding-right: 20px;

	box-shadow:
		0 10px 24px rgba(35, 24, 18, 0.10);
}

.mtj-destination:hover strong {
	color: #ffffff;

	transform: translateX(4px);
}

.mtj-destination:hover .mtj-destination__desc {
	color: #f0dfcf;
}

.mtj-destination:hover .mtj-destination__number {
	color: #e7b55c;
}

.mtj-destination:hover .mtj-destination__arrow {
	color: #e7b55c;

	transform: translate(6px, -6px);
}


/* =========================================================
   05 TRAVEL THEMES
   PC: hover / MOBILE: 2列×2段 + tap/focus
========================================================= */

.mtj-themes {
	padding: 74px 0 102px;

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

.mtj-themes__title {
	margin: 62px 0 78px;

	text-align: center;

	font-family:
		"Noto Serif JP",
		"Yu Mincho",
		serif;

	font-size: clamp(42px, 4.4vw, 56px);
	font-weight: 400;

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

.mtj-theme-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);

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

.mtj-theme-card {
	position: relative;
	z-index: 1;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	min-height: 310px;

	padding: 40px 34px 38px;

	overflow: hidden;

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

	background-color: transparent !important;

	color: var(--mtj-text) !important;
	text-decoration: none;

	transform: translateY(0);

	transition:
		background-color 0.38s ease,
		color 0.38s ease,
		transform 0.38s cubic-bezier(.2,.7,.2,1),
		box-shadow 0.38s ease;
}

.mtj-theme-card__number {
	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 10px;

	color: #c75636;

	transition:
		color 0.35s ease,
		transform 0.35s ease;
}

.mtj-theme-card__body {
	margin-top: auto;
}

.mtj-theme-card h3 {
	margin: 0 0 16px;

	font-family:
		"Cormorant Garamond",
		serif;

	font-size: 38px;
	font-weight: 600;
	line-height: 1;

	color: var(--mtj-text) !important;

	transition:
		color 0.35s ease,
		transform 0.35s ease;
}

.mtj-theme-card p {
	max-width: 160px;

	margin: 0;

	font-family:
		"Noto Serif JP",
		serif;

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

	color: var(--mtj-text) !important;

	transition:
		color 0.35s ease,
		transform 0.35s ease;
}

.mtj-theme-card__arrow {
	position: absolute;

	top: 38px;
	right: 30px;

	font-size: 17px;

	color: transparent;

	transform: translate(-5px, 5px);

	opacity: 0;

	transition:
		color 0.35s ease,
		transform 0.35s ease,
		opacity 0.35s ease;
}


/* =========================================================
   TRAVEL THEMES HOVER
   強制適用
========================================================= */

.mtj-theme-card:hover {
	z-index: 5;

	background-color: #BF5736 !important;

	color: #FFFAF4 !important;

	transform: translateY(-7px) !important;

	box-shadow:
		0 18px 36px rgba(73, 55, 45, 0.16);
}

.mtj-theme-card:hover h3 {
	color: #FFFAF4 !important;

	transform: translateY(-2px);
}

.mtj-theme-card:hover p {
	color: rgba(255, 250, 244, 0.90) !important;
}

.mtj-theme-card:hover .mtj-theme-card__number {
	color: rgba(255,250,244,0.72) !important;
}

.mtj-theme-card:hover .mtj-theme-card__arrow {
	color: #FFFAF4;

	opacity: 1;

	transform: translate(0, 0);
}

.mtj-theme-card:active {
	transform: translateY(-2px) !important;
}


/* =========================================================
   06 HOTEL JOURNAL
========================================================= */

.mtj-journal {
	padding: 82px 0 124px;

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

.mtj-journal__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 50px;

	margin-top: 76px;
	margin-bottom: 90px;
}

.mtj-journal__heading h2 {
	margin: 0;

	font-family:
		"Noto Serif JP",
		"Yu Mincho",
		serif;

	font-size: clamp(44px, 4.5vw, 58px);
	font-weight: 400;
	line-height: 1.7;

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

.mtj-journal-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1.48fr)
		minmax(320px, 0.9fr);

	gap: 58px;
}

.mtj-journal-grid__right {
	display: flex;
	flex-direction: column;

	gap: 105px;
}

.mtj-story__visual {
	position: relative;

	display: block;

	width: 100%;

	overflow: hidden;
}

.mtj-story--large .mtj-story__visual {
	aspect-ratio: 0.88;
}

.mtj-journal-grid__right .mtj-story__visual {
	aspect-ratio: 1.18;
}

.mtj-story__visual--one {
	background:
		linear-gradient(
			166deg,
			#bbb3aa 0%,
			#bbb3aa 33%,
			#eee5d9 33.2%,
			#eee5d9 68%,
			#bf5736 68.2%,
			#bf5736 100%
		);
}

.mtj-story__visual--two {
	background:
		linear-gradient(
			145deg,
			#968779 0%,
			#968779 26%,
			#bbb3aa 26.2%,
			#bbb3aa 54%,
			#eee5d9 54.2%,
			#eee5d9 100%
		);
}

.mtj-story__visual--three {
	background:
		linear-gradient(
			36deg,
			#49372d 0%,
			#49372d 31%,
			#a94327 31.2%,
			#a94327 67%,
			#d6a55e 67.2%,
			#d6a55e 100%
		);
}

.mtj-story__content {
	padding: 42px 5px 0;
}

.mtj-story__meta {
	margin: 0 0 24px;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 11px;

	letter-spacing: 0.23em;

	color: #c45434;
}

.mtj-story h3 {
	margin: 0 0 28px;

	font-family:
		"Noto Serif JP",
		"Yu Mincho",
		serif;

	font-size: 24px;
	font-weight: 400;
	line-height: 1.9;

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

.mtj-story--large h3 {
	font-size: 29px;
}

.mtj-story__excerpt {
	margin: 0 0 36px;

	font-family:
		"Noto Serif JP",
		serif;

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

	color: rgba(73, 55, 45, 0.88);
}


/* =========================================================
   07 QUOTE
========================================================= */

.mtj-quote {
	min-height: 620px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 100px 40px;

	background: #bd5736;

	text-align: center;

	color: #fffaf4;
}

.mtj-quote__inner {
	width: min(100%, 900px);
	margin: 0 auto;
}

.mtj-quote__english {
	margin: 0;

	font-family:
		"Cormorant Garamond",
		serif;

	font-size: clamp(66px, 7vw, 96px);
	font-weight: 600;
	line-height: 0.94;

	letter-spacing: -0.02em;

	color: #fffaf4;
}

.mtj-quote__japanese {
	margin: 64px 0 0;

	font-family:
		"Noto Serif JP",
		serif;

	font-size: 14px;

	letter-spacing: 0.08em;

	color: #f4d8c9;
}


/* =========================================================
   08 ABOUT
========================================================= */

.mtj-about {
	padding: 78px 0 130px;

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

.mtj-about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;

	align-items: center;

	gap: 120px;

	margin-top: 96px;
}

.mtj-about__brand {
	display: flex;
	flex-direction: column;

	font-family:
		"Cormorant Garamond",
		serif;

	font-size: clamp(92px, 10vw, 132px);
	font-weight: 500;
	line-height: 0.72;

	letter-spacing: -0.05em;

	color: #bf5736;
}

.mtj-about__content h2 {
	margin: 0 0 46px;

	font-family:
		"Noto Serif JP",
		serif;

	font-size: 31px;
	font-weight: 400;
	line-height: 1.85;

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

.mtj-about__content p {
	max-width: 490px;

	margin: 0 0 48px;

	font-family:
		"Noto Serif JP",
		serif;

	font-size: 16px;
	line-height: 2.3;

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


/* =========================================================
   ACCESSIBILITY
========================================================= */

.mtj-theme-card:focus-visible,
.mtj-destination:focus-visible {
	outline: 1px solid var(--mtj-gold);
	outline-offset: -3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {

	.mtj-section-inner {
		width: min(calc(100% - 64px), 800px);
	}

	.mtj-hero__inner {
		min-height: 640px;

		padding:
			140px
			55px
			60px;
	}

	.mtj-hero__title {
		font-size: clamp(54px, 7vw, 72px);
	}

	.mtj-philosophy__grid {
		gap: 70px;
	}

	.mtj-staying {
		grid-template-columns: 52% 48%;
	}

	.mtj-staying__content {
		padding: 65px 45px;
	}

	.mtj-theme-card {
		padding-left: 22px;
		padding-right: 22px;
	}

	.mtj-journal-grid {
		gap: 36px;
	}

	.mtj-journal-grid__right {
		gap: 80px;
	}

	.mtj-about__grid {
		gap: 70px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.mtj-section-inner {
		width: calc(100% - 40px);
	}

	.mtj-section-label {
		font-size: 10px;
	}


	/* HERO */

	.mtj-hero__inner {
		min-height: 650px;

		padding:
			120px
			25px
			58px;
	}

	.mtj-kicker {
		margin-bottom: 40px;

		font-size: 9px;
	}

	.mtj-hero__title {
		font-size: 42px;
		line-height: 1.55;
	}

	.mtj-hero__bottom {
		margin-top: 44px;
	}

	.mtj-hero__copy p {
		font-size: 13px;
		line-height: 2;
	}


	/* PHILOSOPHY */

	.mtj-philosophy {
		padding-top: 58px;
		padding-bottom: 82px;
	}

	.mtj-philosophy__grid {
		grid-template-columns: 1fr;

		gap: 52px;

		margin-top: 58px;
	}

	.mtj-philosophy__heading h2 {
		font-size: 36px;
	}

	.mtj-philosophy__copy p {
		font-size: 14px;
		line-height: 2.15;
	}


	/* STAYING */

	.mtj-staying {
		grid-template-columns: 1fr;
	}

	.mtj-staying__visual {
		min-height: 430px;
	}

	.mtj-staying__content {
		padding: 58px 25px 68px;
	}

	.mtj-staying__content h2 {
		font-size: 36px;
	}

	.mtj-staying__description {
		font-size: 14px;
	}

	.mtj-button {
		width: 100%;
	}


	/* DESTINATIONS */

	.mtj-destinations {
		padding-top: 58px;
		padding-bottom: 48px;
	}

	.mtj-destinations__intro {
		grid-template-columns: 1fr;

		gap: 32px;

		margin-top: 52px;
		margin-bottom: 58px;
	}

	.mtj-destinations__intro h2 {
		font-size: 43px;
	}

	.mtj-destination {
		grid-template-columns:
			34px
			1fr
			25px;

		gap: 12px;

		min-height: 96px;

		padding-left: 0;
		padding-right: 0;
	}

	.mtj-destination strong {
		font-size: 32px;
	}

	.mtj-destination__desc {
		display: none;
	}

	/* モバイルでは浮かせない */

	.mtj-destination:hover {
		transform: none;

		padding-left: 0;
		padding-right: 0;

		box-shadow: none;
	}


	/* THEMES */

	.mtj-themes {
		padding-top: 54px;
		padding-bottom: 68px;
	}

	.mtj-themes__title {
		margin-top: 46px;
		margin-bottom: 52px;

		font-size: 34px;
	}

	/* PC版の4テーマ感を残し、モバイルは2列×2段 */
	.mtj-theme-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mtj-theme-card {
		min-height: 220px;

		padding: 26px 21px 25px;
	}

	.mtj-theme-card h3 {
		font-size: 29px;
	}

	.mtj-theme-card p {
		font-size: 11px;
		line-height: 1.8;
	}

	.mtj-theme-card__arrow {
		top: 23px;
		right: 19px;
	}

	/* スマホはタップ中 / フォーカス中にPCホバーと同じ演出 */
	.mtj-theme-card:active,
	.mtj-theme-card:focus {
		z-index: 5;

		background-color: #BF5736 !important;
		color: #FFFAF4 !important;

		transform: translateY(-4px) !important;

		box-shadow:
			0 12px 26px rgba(73, 55, 45, 0.12);
	}

	.mtj-theme-card:active h3,
	.mtj-theme-card:active p,
	.mtj-theme-card:focus h3,
	.mtj-theme-card:focus p {
		color: #FFFAF4 !important;
	}

	.mtj-theme-card:active .mtj-theme-card__number,
	.mtj-theme-card:focus .mtj-theme-card__number {
		color: rgba(255, 250, 244, 0.72) !important;
	}

	.mtj-theme-card:active .mtj-theme-card__arrow,
	.mtj-theme-card:focus .mtj-theme-card__arrow {
		color: #FFFAF4;
		opacity: 1;
		transform: translate(0, 0);
	}


	/* JOURNAL */

	.mtj-journal {
		padding-top: 60px;
		padding-bottom: 90px;
	}

	.mtj-journal__heading {
		align-items: flex-start;
		flex-direction: column;

		margin-top: 52px;
		margin-bottom: 60px;
	}

	.mtj-journal__heading h2 {
		font-size: 38px;
	}

	.mtj-journal-grid {
		grid-template-columns: 1fr;

		gap: 80px;
	}

	.mtj-journal-grid__right {
		gap: 80px;
	}

	.mtj-story--large .mtj-story__visual,
	.mtj-journal-grid__right .mtj-story__visual {
		aspect-ratio: 1 / 1;
	}

	.mtj-story__content {
		padding-top: 30px;
	}

	.mtj-story h3,
	.mtj-story--large h3 {
		font-size: 22px;
	}


	/* QUOTE */

	.mtj-quote {
		min-height: 480px;

		padding: 90px 22px;
	}

	.mtj-quote__english {
		font-size: 48px;
	}

	.mtj-quote__japanese {
		margin-top: 40px;

		font-size: 12px;
	}


	/* ABOUT */

	.mtj-about {
		padding-top: 60px;
		padding-bottom: 88px;
	}

	.mtj-about__grid {
		grid-template-columns: 1fr;

		gap: 62px;

		margin-top: 68px;
	}

	.mtj-about__brand {
		font-size: 88px;
	}

	.mtj-about__content h2 {
		font-size: 26px;
	}

	.mtj-about__content p {
		font-size: 14px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

	.mtj-hero__title {
		font-size: 37px;
	}

	/* 420px以下でも2列×2段を維持 */
	.mtj-theme-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mtj-theme-card {
		min-height: 190px;
		padding: 23px 17px 22px;
	}

	.mtj-theme-card h3 {
		font-size: 25px;
	}

	.mtj-theme-card p {
		font-size: 10px;
	}

	.mtj-about__brand {
		font-size: 76px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

	.mtj-theme-card,
	.mtj-theme-card *,
	.mtj-destination,
	.mtj-destination * {
		transition: none !important;
	}

}

/* =========================================================
   MOFUTERRA
   FINAL SIZE & SPACING BALANCE
   全体を一段コンパクトに整える
========================================================= */


/* =========================================================
   HERO
========================================================= */

.mtj-hero__inner {
	min-height: 620px;

	padding:
		135px
		90px
		60px;
}

.mtj-kicker {
	margin-bottom: 38px;
}

.mtj-hero__title {
	max-width: 700px;

	font-size: clamp(54px, 5.4vw, 76px);
	line-height: 1.42;
}

.mtj-hero__bottom {
	margin-top: 38px;
}

.mtj-hero__copy {
	margin-bottom: 32px;
}

.mtj-hero__copy p {
	font-size: 15px;
	line-height: 1.95;
}


/* =========================================================
   01 PHILOSOPHY
========================================================= */

.mtj-philosophy {
	padding:
		66px
		0
		96px;
}

.mtj-philosophy__grid {
	gap: 96px;

	margin-top: 68px;
}

.mtj-philosophy__heading h2 {
	font-size: clamp(38px, 4vw, 50px);
	line-height: 1.62;
}

.mtj-philosophy__copy p {
	margin-bottom: 30px;

	font-size: 15px;
	line-height: 2.2;
}


/* =========================================================
   02 THE ART OF STAYING
========================================================= */

.mtj-staying {
	min-height: 570px;
}

.mtj-staying__visual {
	min-height: 570px;
}

.mtj-staying__content {
	padding:
		68px
		62px;
}

.mtj-staying__content h2 {
	margin:
		28px
		0
		36px;

	font-size: clamp(34px, 3.7vw, 46px);
}

.mtj-staying__description {
	margin-bottom: 42px;

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

.mtj-button {
	width: 260px;

	padding:
		21px
		25px;
}


/* =========================================================
   03 DESTINATIONS
========================================================= */

.mtj-destinations {
	padding:
		64px
		0
		60px;
}

.mtj-destinations__intro {
	margin-top: 58px;
	margin-bottom: 66px;
}

.mtj-destinations__intro h2 {
	font-size: clamp(40px, 4.5vw, 56px);
}

.mtj-destination {
	min-height: 106px;
}

.mtj-destination strong {
	font-size: 37px;
}


/* =========================================================
   04 TRAVEL THEMES
========================================================= */

.mtj-themes {
	padding:
		62px
		0
		86px;
}

.mtj-themes__title {
	margin:
		52px
		0
		64px;

	font-size: clamp(38px, 4vw, 48px);
}

.mtj-theme-card {
	min-height: 265px;

	padding:
		34px
		30px
		32px;
}

.mtj-theme-card h3 {
	font-size: 34px;
}

.mtj-theme-card p {
	font-size: 12px;
}


/* =========================================================
   05 HOTEL JOURNAL
========================================================= */

.mtj-journal {
	padding:
		68px
		0
		105px;
}

.mtj-journal__heading {
	margin-top: 62px;
	margin-bottom: 72px;
}

.mtj-journal__heading h2 {
	font-size: clamp(40px, 4vw, 52px);
	line-height: 1.65;
}

.mtj-journal-grid {
	gap: 48px;
}

.mtj-journal-grid__right {
	gap: 82px;
}

.mtj-story__content {
	padding-top: 34px;
}

.mtj-story h3 {
	font-size: 22px;
	line-height: 1.8;
}

.mtj-story--large h3 {
	font-size: 26px;
}

.mtj-story__excerpt {
	margin-bottom: 30px;

	font-size: 13px;
	line-height: 2;
}


/* =========================================================
   06 QUOTE
========================================================= */

.mtj-quote {
	min-height: 500px;

	padding:
		82px
		40px;
}

.mtj-quote__english {
	font-size: clamp(58px, 6vw, 82px);
	line-height: 0.96;
}

.mtj-quote__japanese {
	margin-top: 48px;

	font-size: 13px;
}


/* =========================================================
   07 ABOUT
========================================================= */

.mtj-about {
	padding:
		66px
		0
		108px;
}

.mtj-about__grid {
	gap: 100px;

	margin-top: 76px;
}

.mtj-about__brand {
	font-size: clamp(82px, 8.8vw, 116px);
}

.mtj-about__content h2 {
	margin-bottom: 34px;

	font-size: 28px;
	line-height: 1.8;
}

.mtj-about__content p {
	margin-bottom: 38px;

	font-size: 15px;
	line-height: 2.15;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {

	.mtj-hero__inner {
		min-height: 590px;

		padding:
			125px
			55px
			55px;
	}

	.mtj-hero__title {
		font-size: clamp(48px, 6.5vw, 64px);
	}

	.mtj-philosophy__grid {
		gap: 60px;
	}

	.mtj-staying,
	.mtj-staying__visual {
		min-height: 540px;
	}

	.mtj-theme-card {
		min-height: 245px;
	}

	.mtj-quote {
		min-height: 450px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.mtj-hero__inner {
		min-height: 570px;

		padding:
			105px
			25px
			50px;
	}

	.mtj-hero__title {
		font-size: 38px;
	}

	.mtj-philosophy {
		padding:
			52px
			0
			72px;
	}

	.mtj-philosophy__grid {
		margin-top: 48px;
	}

	.mtj-philosophy__heading h2 {
		font-size: 33px;
	}

	.mtj-staying__visual {
		min-height: 380px;
	}

	.mtj-staying__content {
		padding:
			50px
			25px
			58px;
	}

	.mtj-staying__content h2 {
		font-size: 33px;
	}

	.mtj-themes {
		padding-bottom: 68px;
	}

	.mtj-theme-card {
		min-height: 220px;
	}

	.mtj-journal {
		padding-bottom: 78px;
	}

	.mtj-quote {
		min-height: 400px;

		padding:
			72px
			22px;
	}

	.mtj-quote__english {
		font-size: 42px;
	}

	.mtj-about {
		padding-bottom: 76px;
	}

	.mtj-about__brand {
		font-size: 78px;
	}

}