/* =========================================================
   MOFUTERRA TRAVEL JOURNAL
   ARTICLE.CSS — FINAL
   single.php 完全一致
========================================================= */


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

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

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

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

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

.mt-article h1,
.mt-article h2,
.mt-article h3,
.mt-article p,
.mt-article figure {
	margin: 0;
}


/* =========================================================
   02. ARTICLE HERO
========================================================= */

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

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

.mt-article-hero__grid {
	display: grid;

	grid-template-columns:
		minmax(0, 0.92fr)
		minmax(0, 1.08fr);

	min-height: 560px;
}

.mt-article-hero__content {
	display: flex;
	align-items: stretch;

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

.mt-article-hero__content-inner {
	display: flex;

	flex-direction: column;
	justify-content: center;

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

	margin-left: auto;

	padding:
		72px
		58px
		64px
		0;
}

.mt-article-hero__brand {
	margin-bottom: 28px !important;

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

	letter-spacing: 0.22em;

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

.mt-article-hero__meta-top {
	display: flex;
	align-items: center;

	flex-wrap: wrap;

	gap: 9px;

	margin-bottom: 22px;

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

	letter-spacing: 0.16em;

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

.mt-article-hero__category {
	color: var(--mt-apricot);
}

.mt-article-hero__category:hover {
	color: var(--mt-gold);
}

.mt-article-hero__title {
	max-width: 620px;

	font-size: clamp(42px, 4.7vw, 68px);
	font-weight: 400;
	line-height: 1.35;

	letter-spacing: 0.01em;

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

.mt-article-hero__lead {
	max-width: 560px;

	margin-top: 30px !important;

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

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

.mt-article-hero__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 24px;

	margin-top: 40px;

	padding-top: 18px;

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

	font-family: var(--mt-font-sans);
	font-size: 9px;
	line-height: 1;

	letter-spacing: 0.14em;

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


/* =========================================================
   03. HERO IMAGE
========================================================= */

.mt-article-hero__visual {
	position: relative;

	min-width: 0;

	overflow: hidden;

	background: var(--mt-dark-brown);
}

.mt-article-hero__image {
	width: 100%;
	height: 100%;

	object-fit: cover;
}

.mt-article-hero__placeholder {
	display: flex;

	flex-direction: column;
	align-items: center;
	justify-content: center;

	gap: 10px;

	width: 100%;
	height: 100%;

	min-height: 560px;

	background:
		linear-gradient(
			135deg,
			var(--mt-mocha),
			var(--mt-dark-brown)
		);
}

.mt-article-hero__placeholder span {
	font-family: var(--mt-font-display);
	font-size: 38px;

	letter-spacing: 0.12em;

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

.mt-article-hero__placeholder small {
	font-family: var(--mt-font-sans);
	font-size: 9px;

	letter-spacing: 0.22em;

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


/* =========================================================
   04. ARTICLE LAYOUT
========================================================= */

.mt-article-layout {
	width: 100%;

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

.mt-article-layout__inner {
	display: grid;

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

	gap: 70px;

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

	margin-inline: auto;

	padding:
		88px
		0
		96px;
}


/* =========================================================
   05. SIDEBAR
========================================================= */

.mt-article-sidebar {
	min-width: 0;
}

.mt-article-sidebar__sticky {
	position: sticky;
	top: 110px;

	padding-right: 28px;

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

body.admin-bar
.mt-article-sidebar__sticky {
	top: 142px;
}

.mt-article-sidebar__title {
	margin-bottom: 24px !important;

	font-family: var(--mt-font-display);
	font-size: 30px;
	font-weight: 500;
	line-height: 1;

	letter-spacing: 0.05em;

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


/* =========================================================
   06. TABLE OF CONTENTS
========================================================= */

.mt-article-toc {
	border-top:
		1px solid var(--mt-line);
}

.mt-article-toc__item {
	display: grid;

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

	gap: 14px;

	align-items: start;

	padding:
		15px
		0;

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

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

.mt-article-toc__number {
	padding-top: 2px;

	font-family: var(--mt-font-display);
	font-size: 16px;

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

.mt-article-toc__text {
	font-size: 13px;
	line-height: 1.7;
}

.mt-article-toc__item:hover
.mt-article-toc__text {
	color: var(--mt-terracotta);
}


/* =========================================================
   07. SIDEBAR JOURNAL
========================================================= */

.mt-article-sidebar__journal {
	margin-top: 34px;

	padding-top: 26px;

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

.mt-article-sidebar__category {
	margin-bottom: 12px !important;

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

	letter-spacing: 0.18em;

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

.mt-article-sidebar__journal > p:last-child {
	font-family: var(--mt-font-display);
	font-size: 17px;
	line-height: 1.65;

	letter-spacing: 0.05em;

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


/* =========================================================
   08. ARTICLE MAIN
========================================================= */

.mt-article-main {
	min-width: 0;
}

.mt-article-content {
	width: 100%;
}


/* =========================================================
   09. COMMON ARTICLE SECTION
========================================================= */

.mt-article-section {
	position: relative;

	margin-bottom: 96px;

	padding-bottom: 86px;

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

.mt-article-section:last-child {
	margin-bottom: 0;

	padding-bottom: 0;

	border-bottom: 0;
}

.mt-article-section__number {
	margin-bottom: 14px !important;

	font-family: var(--mt-font-display);
	font-size: 48px;
	font-weight: 500;
	line-height: 1;

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

.mt-article-section__label {
	margin-bottom: 14px !important;

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

	letter-spacing: 0.20em;

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

.mt-article-section__title {
	max-width: 760px;

	margin-bottom: 34px !important;

	font-size: clamp(34px, 3.7vw, 48px);
	font-weight: 400;
	line-height: 1.45;

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

.mt-article-section__body {
	max-width: 790px;
}

.mt-article-section__body p {
	margin-bottom: 26px !important;

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

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


/* =========================================================
   10. H3
========================================================= */

.mt-article-section__body h3 {
	position: relative;

	margin:
		52px
		0
		22px;

	padding-left: 20px;

	font-size: 23px;
	font-weight: 500;
	line-height: 1.6;

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

.mt-article-section__body h3::before {
	content: "";

	position: absolute;

	top: 0.3em;
	left: 0;

	width: 2px;
	height: 1.4em;

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


/* =========================================================
   11. FIGURE
========================================================= */

.mt-article-figure {
	margin:
		46px
		0
		52px;
}

.mt-article-figure img {
	width: 100%;

	aspect-ratio: 16 / 10;

	object-fit: cover;

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

.mt-article-figure figcaption {
	margin-top: 11px;

	font-family: var(--mt-font-sans);
	font-size: 10px;
	line-height: 1.7;

	letter-spacing: 0.05em;

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


/* =========================================================
   12. HIGHLIGHT / MOFUTERRA NOTE
========================================================= */

.mt-article-highlight {
	margin:
		48px
		0;

	padding:
		38px
		42px;

	background:
		linear-gradient(
			135deg,
			var(--mt-mocha),
			var(--mt-dark-brown)
		);

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

.mt-article-highlight__label {
	margin-bottom: 16px !important;

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

	letter-spacing: 0.20em;

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

.mt-article-highlight p {
	margin: 0 !important;

	font-size: 15px !important;
	line-height: 2 !important;

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


/* =========================================================
   13. LIST
========================================================= */

.mt-article-list {
	margin-top: 32px;

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

.mt-article-list li {
	position: relative;

	padding:
		17px
		10px
		17px
		32px;

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

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

.mt-article-list li::before {
	content: "—";

	position: absolute;

	left: 4px;
	top: 17px;

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


/* =========================================================
   14. INFORMATION TABLE
========================================================= */

.mt-article-table-wrap {
	width: 100%;

	margin:
		34px
		0
		42px;

	overflow-x: auto;
}

.mt-article-info-table {
	width: 100%;

	border-collapse: collapse;

	background: var(--mt-white-warm);
}

.mt-article-info-table th,
.mt-article-info-table td {
	border:
		1px solid var(--mt-line);
}

.mt-article-info-table th {
	width: 190px;

	padding:
		18px
		20px;

	background: var(--mt-beige);

	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;

	text-align: left;
	vertical-align: top;
}

.mt-article-info-table td {
	padding:
		18px
		22px;

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

.mt-article-info-table a {
	color: var(--mt-terracotta);

	border-bottom:
		1px solid currentColor;
}


/* =========================================================
   15. NOTE / PR
========================================================= */

.mt-article-note,
.mt-article-pr-note,
.mt-article-pr {
	margin:
		32px
		0;

	padding:
		26px
		30px;
}

.mt-article-note {
	background: var(--mt-beige);

	border-left:
		3px solid var(--mt-gold);
}

.mt-article-pr-note,
.mt-article-pr {
	background:
		rgba(217, 130, 89, 0.13);

	border-left:
		3px solid var(--mt-terracotta);
}

.mt-article-note strong,
.mt-article-pr-note strong,
.mt-article-pr span {
	display: block;

	margin-bottom: 10px;

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

	letter-spacing: 0.18em;
}

.mt-article-note strong {
	color: var(--mt-gold);
}

.mt-article-pr-note strong,
.mt-article-pr span {
	color: var(--mt-terracotta);
}

.mt-article-note p,
.mt-article-pr-note p,
.mt-article-pr p {
	margin: 0 !important;

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


/* =========================================================
   16. CLOSING
========================================================= */

.mt-article-closing {
	margin-top: 52px;

	padding:
		40px
		42px;

	background: var(--mt-apricot);

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

.mt-article-closing__label {
	margin-bottom: 15px !important;

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

	letter-spacing: 0.18em;

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

.mt-article-closing__text {
	margin: 0 !important;

	font-size: 22px !important;
	line-height: 1.8 !important;

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


/* =========================================================
   17. ARTICLE FOOT
========================================================= */

.mt-article-foot {
	width: 100%;

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

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

	margin-inline: auto;

	padding:
		0
		0
		100px;
}


/* =========================================================
   18. TAGS
========================================================= */

.mt-article-tags {
	display: flex;
	align-items: flex-start;

	gap: 28px;

	padding:
		26px
		0;

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

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

.mt-article-tags__label {
	flex-shrink: 0;

	padding-top: 8px;

	font-family: var(--mt-font-display);
	font-size: 18px;
	line-height: 1;

	letter-spacing: 0.08em;
}

.mt-article-tags__list {
	display: flex;

	flex-wrap: wrap;

	gap: 8px;
}

.mt-article-tags__list a {
	display: inline-flex;

	align-items: center;

	min-height: 34px;

	padding:
		6px
		12px;

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

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

	letter-spacing: 0.08em;

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

.mt-article-tags__list a:hover {
	background: var(--mt-mocha);
	border-color: var(--mt-mocha);

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


/* =========================================================
   19. PREVIOUS / NEXT
========================================================= */

.mt-article-navigation {
	display: grid;

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

	margin-top: 38px;

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

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

.mt-article-navigation__item {
	min-width: 0;

	padding:
		26px
		28px
		26px
		0;
}

.mt-article-navigation__item--next {
	padding:
		26px
		0
		26px
		28px;

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

.mt-article-navigation__link {
	display: flex;

	align-items: center;

	gap: 20px;

	min-height: 86px;
}

.mt-article-navigation__item--next
.mt-article-navigation__link {
	justify-content: flex-end;

	text-align: right;
}

.mt-article-navigation__visual {
	flex:
		0
		0
		104px;

	width: 104px;

	aspect-ratio:
		4 / 3;

	overflow: hidden;
}

.mt-article-navigation__image {
	width: 100%;
	height: 100%;

	object-fit: cover;
}

.mt-article-navigation__label {
	margin-bottom: 7px !important;

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

	letter-spacing: 0.18em;

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

.mt-article-navigation__title {
	max-width: 320px;

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

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


/* =========================================================
   20. RELATED STORIES
========================================================= */

.mt-article-related {
	margin-top: 58px;
}

.mt-article-related__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 40px;

	margin-bottom: 30px;

	padding-bottom: 18px;

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

.mt-article-related__label {
	margin-bottom: 8px !important;

	font-family: var(--mt-font-display);
	font-size: 24px;

	letter-spacing: 0.10em;
}

.mt-article-related__head h2 {
	font-size: 16px;
	font-weight: 400;

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

.mt-article-related__all {
	display: inline-flex;

	align-items: center;

	gap: 24px;

	padding-bottom: 5px;

	border-bottom:
		1px solid currentColor;

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

	letter-spacing: 0.10em;
}

.mt-article-related__all:hover {
	color: var(--mt-terracotta);
}

.mt-article-related__grid {
	display: grid;

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

	gap: 26px;
}

.mt-article-related-card {
	min-width: 0;
}

.mt-article-related-card__visual {
	aspect-ratio:
		4 / 3;

	overflow: hidden;

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

.mt-article-related-card__image {
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.4s ease;
}

.mt-article-related-card__link:hover
.mt-article-related-card__image {
	transform: scale(1.03);
}

.mt-article-related-card__placeholder {
	display: flex;

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

	width: 100%;
	height: 100%;

	background: var(--mt-mocha);

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

.mt-article-related-card__placeholder span {
	font-family: var(--mt-font-display);
	font-size: 18px;

	letter-spacing: 0.12em;
}

.mt-article-related-card__category {
	margin-top: 16px !important;

	font-family: var(--mt-font-sans);
	font-size: 8px;

	letter-spacing: 0.16em;

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

.mt-article-related-card__title {
	margin-top: 9px !important;

	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
}

.mt-article-related-card time {
	display: block;

	margin-top: 10px;

	font-family: var(--mt-font-sans);
	font-size: 8px;

	letter-spacing: 0.08em;

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


/* =========================================================
   21. TABLET
========================================================= */

@media (max-width: 1024px) {

	.mt-article-hero__grid {
		grid-template-columns:
			1fr
			1fr;

		min-height: 500px;
	}

	.mt-article-hero__content-inner {
		width:
			calc(100% - 56px);

		padding-right: 34px;
	}

	.mt-article-layout__inner {
		grid-template-columns:
			220px
			minmax(0, 1fr);

		gap: 46px;

		width:
			calc(100% - 56px);
	}

	.mt-article-foot__inner {
		width:
			calc(100% - 56px);
	}

}


/* =========================================================
   22. MOBILE
========================================================= */

@media (max-width: 767px) {

	.mt-article-hero__grid {
		grid-template-columns: 1fr;

		min-height: 0;
	}

	.mt-article-hero__content-inner {
		width:
			calc(100% - 40px);

		margin-inline: auto;

		padding:
			54px
			0
			48px;
	}

	.mt-article-hero__brand {
		margin-bottom: 22px !important;
	}

	.mt-article-hero__title {
		font-size: 38px;
	}

	.mt-article-hero__lead {
		margin-top: 24px !important;

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

	.mt-article-hero__bottom {
		margin-top: 30px;
	}

	.mt-article-hero__visual {
		aspect-ratio:
			4 / 3;
	}

	.mt-article-hero__placeholder {
		min-height: 0;
	}


	/* layout */

	.mt-article-layout__inner {
		grid-template-columns: 1fr;

		gap: 40px;

		width:
			calc(100% - 40px);

		padding:
			50px
			0
			64px;
	}


	/* sidebar */

	.mt-article-sidebar__sticky {
		position: static;

		padding-right: 0;

		border-right: 0;
	}

	.mt-article-sidebar__title {
		font-size: 25px;
	}

	.mt-article-toc {
		display: grid;

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

		border-top: 0;
	}

	.mt-article-toc__item {
		grid-template-columns:
			28px
			minmax(0, 1fr);

		padding:
			13px
			10px;

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

		border-bottom: 0;
	}

	.mt-article-sidebar__journal {
		display: none;
	}


	/* article */

	.mt-article-section {
		margin-bottom: 64px;

		padding-bottom: 54px;
	}

	.mt-article-section__number {
		font-size: 32px;
	}

	.mt-article-section__title {
		margin-bottom: 26px !important;

		font-size: 30px;
		line-height: 1.5;
	}

	.mt-article-section__body p {
		margin-bottom: 22px !important;

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

	.mt-article-section__body h3 {
		margin:
			40px
			0
			18px;

		font-size: 20px;
	}

	.mt-article-figure {
		margin:
			34px
			0
			40px;
	}

	.mt-article-figure img {
		aspect-ratio:
			4 / 3;
	}

	.mt-article-highlight {
		padding:
			28px
			24px;
	}

	.mt-article-info-table th {
		width: 120px;

		padding:
			14px
			12px;

		font-size: 11px;
	}

	.mt-article-info-table td {
		padding:
			14px
			12px;

		font-size: 12px;
	}

	.mt-article-closing {
		padding:
			30px
			24px;
	}


	/* foot */

	.mt-article-foot__inner {
		width:
			calc(100% - 40px);

		padding-bottom: 70px;
	}

	.mt-article-tags {
		flex-direction: column;

		gap: 16px;
	}

	.mt-article-navigation {
		grid-template-columns: 1fr;
	}

	.mt-article-navigation__item,
	.mt-article-navigation__item--next {
		padding:
			22px
			0;

		border-left: 0;
	}

	.mt-article-navigation__item--next {
		border-top:
			1px solid var(--mt-line);
	}

	.mt-article-navigation__visual {
		flex-basis: 86px;

		width: 86px;
	}

	.mt-article-related__head {
		align-items: flex-start;

		flex-direction: column;

		gap: 18px;
	}

	.mt-article-related__grid {
		grid-template-columns: 1fr;

		gap: 34px;
	}

}


/* =========================================================
   23. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

	.mt-article-hero__content-inner,
	.mt-article-layout__inner,
	.mt-article-foot__inner {
		width:
			calc(100% - 32px);
	}

	.mt-article-hero__title {
		font-size: 34px;
	}

	.mt-article-toc {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
   24. ACCESSIBILITY
========================================================= */

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

	outline-offset: 4px;
}


/* =========================================================
   25. REDUCED MOTION
========================================================= */

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

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

}

/* =========================================================
   MOFUTERRA ARTICLE
   FINAL PC REFINEMENT
   BODY WIDTH / IMAGE / HERO
========================================================= */


/* =========================================================
   01. ARTICLE BODY WIDTH
========================================================= */

@media (min-width: 1025px) {

	/* 左CONTENTSと本文の距離を少し広げる */

	.mt-article-layout__inner {
		grid-template-columns:
			250px
			minmax(0, 1fr);

		gap: 82px;

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


	/* 本文そのものを少しワイドに */

	.mt-article-section__body {
		max-width: 840px;
	}


	/* H2も本文幅に合わせる */

	.mt-article-section__title {
		max-width: 860px;

		font-size:
			clamp(38px, 3.4vw, 52px);

		line-height: 1.42;
	}


	/* 本文は読みやすさを維持 */

	.mt-article-section__body p {
		font-size: 16px;

		line-height: 2.08;
	}

}


/* =========================================================
   02. ARTICLE IMAGE
   文章より写真を少し大きく見せる
========================================================= */

@media (min-width: 1025px) {

	.mt-article-figure {
		width:
			calc(100% + 92px);

		margin:
			52px
			0
			58px;
	}


	.mt-article-figure img {
		width: 100%;

		aspect-ratio:
			16 / 9.5;

		object-fit: cover;
	}


	.mt-article-figure figcaption {
		margin-top: 12px;

		padding-right: 20px;
	}

}


/* =========================================================
   03. ARTICLE HERO — FINAL
========================================================= */

@media (min-width: 1025px) {

	.mt-article-hero__grid {
		grid-template-columns:
			minmax(0, 0.88fr)
			minmax(0, 1.12fr);

		min-height: 640px;
	}


	/* 左側 */

	.mt-article-hero__content-inner {
		width: min(
			calc(100% - 82px),
			660px
		);

		padding:
			82px
			62px
			72px
			0;
	}


	/* ブランド表記 */

	.mt-article-hero__brand {
		margin-bottom: 34px !important;

		font-size: 9px;

		letter-spacing: 0.28em;
	}


	/* HOTEL・JOURNAL */

	.mt-article-hero__meta-top {
		margin-bottom: 28px;

		font-size: 10px;

		letter-spacing: 0.18em;
	}


	/* 記事タイトル */

	.mt-article-hero__title {
		max-width: 650px;

		font-size:
			clamp(50px, 4.6vw, 74px);

		line-height: 1.28;

		letter-spacing: 0.005em;
	}


	/* 導入文 */

	.mt-article-hero__lead {
		max-width: 540px;

		margin-top: 32px !important;

		font-size: 14px;

		line-height: 2.05;

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


	/* DATE / JOURNAL */

	.mt-article-hero__bottom {
		margin-top: 46px;

		padding-top: 20px;
	}


	/* 写真 */

	.mt-article-hero__visual {
		min-height: 640px;
	}


	.mt-article-hero__image {
		width: 100%;
		height: 100%;

		object-fit: cover;

		object-position: center;
	}


	.mt-article-hero__placeholder {
		min-height: 640px;
	}

}


/* =========================================================
   04. HERO SMALL DECORATION
========================================================= */

@media (min-width: 1025px) {

	.mt-article-hero__content {
		position: relative;
	}


	.mt-article-hero__content::after {
		content: "";

		position: absolute;

		right: 0;
		bottom: 0;

		width: 86px;
		height: 2px;

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

}

/* =========================================================
   ARTICLE HERO — FINAL SPACING
========================================================= */

@media (min-width: 1025px) {

	.mt-article-hero__content-inner {
		padding-top: 92px;
		padding-bottom: 82px;
	}

	.mt-article-hero__brand {
		margin-bottom: 40px !important;
	}

	.mt-article-hero__meta-top {
		margin-bottom: 34px;
	}

	.mt-article-hero__title {
		margin-bottom: 0 !important;
	}

	.mt-article-hero__lead {
		margin-top: 38px !important;
	}

	.mt-article-hero__bottom {
		margin-top: 52px;
		padding-top: 22px;
	}

}