/* ========================================
   BASYS HOTELS LP
   Scoped under .hotels-lp — does not alter global page styles.
======================================== */

/* ----------------------------------------
   01. Layout foundation
---------------------------------------- */

.hotels-lp {
	--hotels-category-indicator-h: 40px;
	color: var(--color-text);
	background: var(--color-white);
}

/* Match Header / top page: .site-header__inner / .l-container / .hero__inner */
.hotels-lp .l-container {
	width: min(calc(100% - 48px), var(--max));
	margin-inline: auto;
}

.hotels-lp .hotels-section {
	padding: 152px 0;
	scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Do NOT set width here — would override .l-container (same specificity). */
.hotels-lp .hotels-section__inner {
	box-sizing: border-box;
}

.hotels-lp .hotels-heading-phrase {
	display: inline-block;
}

.hotels-lp .hotels-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 640px;
	padding-top: calc(var(--header-h) + 28px);
	padding-bottom: 48px;
	background: var(--color-blue-dark);
	color: var(--color-white);
}

.hotels-lp .hotels-concierge,
.hotels-lp .hotels-understand,
.hotels-lp .hotels-portal,
.hotels-lp .hotels-why,
.hotels-lp .hotels-start {
	background: var(--color-white);
}

.hotels-lp .hotels-problem,
.hotels-lp .hotels-front-desk,
.hotels-lp .hotels-attract,
.hotels-lp .hotels-price {
	background: var(--color-pale);
}

.hotels-lp .hotels-problem {
	scroll-margin-top: 180px;
}

.hotels-lp .hotels-faq {
	background: var(--color-pale);
}

/* Category anchors clear fixed header + sticky indicator */
.hotels-lp .hotels-concierge,
.hotels-lp .hotels-front-desk,
.hotels-lp .hotels-understand,
.hotels-lp .hotels-attract {
	scroll-margin-top: calc(var(--header-h) + var(--hotels-category-indicator-h) + 16px);
}

/*
 * #price: section padding-top (152px) already creates space above the label.
 * Offset only header + ~48px so PRICE sits just under the fixed header.
 */
.hotels-lp #price {
	scroll-margin-top: calc(var(--header-h) + 48px - 152px);
}

.hotels-lp .hotels-cycle,
.hotels-lp .hotels-final-cta {
	padding: 140px 0;
	background: var(--color-blue-deep);
	color: var(--color-white);
}

/* ----------------------------------------
   01b. Sticky Category Indicator
---------------------------------------- */

.hotels-lp .hotels-category-indicator {
	position: fixed;
	top: var(--header-h);
	left: 0;
	right: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	height: var(--hotels-category-indicator-h);
	background: rgba(255, 255, 255, 0.82);
	border-bottom: 1px solid rgba(230, 235, 245, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}

.hotels-lp .hotels-category-indicator.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hotels-lp .hotels-category-indicator__inner {
	display: flex;
	align-items: center;
	height: 100%;
	/* Keep .l-container width / max-width / margin — do not set width:100% */
}

.hotels-lp .hotels-category-indicator__label.hotels-section-label {
	margin: 0;
	line-height: 1;
	white-space: nowrap;
	transition: opacity 0.18s ease;
}

.hotels-lp .hotels-category-indicator__label.is-changing {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hotels-lp .hotels-category-indicator,
	.hotels-lp .hotels-category-indicator__label {
		transition: none;
	}

	.hotels-lp .hotels-category-indicator {
		transform: none;
	}
}

/* ----------------------------------------
   02. Typography foundation
---------------------------------------- */

.hotels-lp .hotels-section-label {
	margin: 0 0 18px;
	color: var(--color-blue);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.5;
}

.hotels-lp .hotels-cycle .hotels-section-label,
.hotels-lp .hotels-final-cta .hotels-section-label {
	color: rgba(255, 255, 255, 0.72);
}

/* Mirror existing .section-heading (style.css) */
.hotels-lp h2.hotels-section-heading,
.hotels-lp .hotels-section-heading {
	margin: 0 0 28px;
	color: var(--color-navy);
	font-size: clamp(36px, 3.5vw, 46px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

.hotels-lp .hotels-cycle .hotels-section-heading,
.hotels-lp .hotels-final-cta .hotels-section-heading {
	color: var(--color-white);
}

/* Mirror existing .section-lead */
.hotels-lp .hotels-section-lead {
	max-width: 760px;
	margin: 0 0 64px;
	color: var(--color-muted);
	font-size: 17px;
	line-height: 1.85;
}

.hotels-lp .hotels-cycle .hotels-section-lead,
.hotels-lp .hotels-final-cta .hotels-section-lead {
	color: rgba(255, 255, 255, 0.84);
}

.hotels-lp .hotels-section-body {
	max-width: 760px;
	margin: 0;
	color: var(--color-muted);
	font-size: 17px;
	line-height: 1.85;
}

.hotels-lp .hotels-section-body p + p {
	margin-top: 1em;
}

.hotels-lp .hotels-cycle .hotels-section-body,
.hotels-lp .hotels-final-cta .hotels-section-body {
	color: rgba(255, 255, 255, 0.84);
}

/* ----------------------------------------
   03. Shared layout helpers
---------------------------------------- */

.hotels-lp .hotels-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.hotels-lp .hotels-estimate-label {
	margin: 0 0 12px;
	color: var(--color-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.hotels-lp .hotels-estimate-note {
	margin: 12px 0 0;
	color: var(--color-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

/* ----------------------------------------
   04. HERO
---------------------------------------- */

/* Hotels page only: remove body padding white gap under fixed header */
body.page-hotels {
	padding-top: 0;
}

/*
 * Hotels Header brand — .site-logo__text exists only on Hotels page.
 * Do not rely on body.page-hotels alone (may be missing via body_class filters / cache).
 * Beat inherited color from .site-logo { color: var(--color-navy) }.
 */
.site-header .site-logo .site-logo__text.brand-name {
	display: inline-block;
	color: #2f6bff !important;
	font-size: 28px !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.1;
	white-space: nowrap;
}

.hotels-lp .hotels-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.05fr);
	gap: 36px 40px;
	align-items: center;
	/* Do NOT set width:100% — would override .l-container max-width. */
}

.hotels-lp .hotels-brand {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.28em;
	color: var(--color-blue);
	font-family: "Laro", sans-serif;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

.hotels-lp .hotels-hero__offer {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;
	max-width: 100%;
	margin: 0 0 18px;
	padding: 0;
	overflow: hidden;
	border-radius: 4px;
	line-height: 1.3;
}

.hotels-lp .hotels-hero__offer-part {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	font-size: 13px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.hotels-lp .hotels-hero__offer-part--strong {
	position: relative;
	padding-right: 16px;
	background: var(--color-blue-deep);
	color: var(--color-white);
	font-weight: 700;
}

.hotels-lp .hotels-hero__offer-mark {
	position: absolute;
	top: 3px;
	right: 5px;
	color: var(--color-white);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

.hotels-lp .hotels-hero__offer-part--soft {
	background: var(--color-pale);
	color: var(--color-navy);
	font-weight: 600;
}

/*
 * Below blue Hero — full-bleed bg on outer (same as .hotels-problem),
 * content max-width only on inner .l-container.
 */
.hotels-lp .hotels-hero-footnote {
	box-sizing: border-box;
	width: 100%;
	padding-top: 14px;
	padding-bottom: 4px;
	background: var(--color-pale);
}

.hotels-lp .hotels-hero-footnote__inner {
	display: flex;
	justify-content: flex-end;
	box-sizing: border-box;
}

.hotels-lp .hotels-hero-footnote__text {
	box-sizing: border-box;
	width: fit-content;
	max-width: min(36em, 100%);
	margin: 0;
	color: rgba(26, 39, 68, 0.62);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	text-align: right;
}

.hotels-lp .hotels-hero__title {
	margin: 0 0 20px;
	color: var(--color-white);
	/* Base ≈ 65% of emphasis — helps PC fit line 1 in two-line layout. */
	font-size: clamp(22px, 2.3vw, 31px);
	font-weight: 700;
	/* Tall enough for large emphasis glyphs on the shared baseline. */
	line-height: 1.45;
	letter-spacing: 0.02em;
}

.hotels-lp .hotels-hero__title-line {
	display: block;
}

.hotels-lp .hotels-hero__title-text,
.hotels-lp .hotels-hero__char--text {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	vertical-align: baseline;
}

.hotels-lp .hotels-hero__title-price,
.hotels-lp .hotels-hero__title-ai,
.hotels-lp .hotels-hero__char--price,
.hotels-lp .hotels-hero__char--ai {
	display: inline-block;
	font-size: clamp(34px, 3.6vw, 48px);
	font-weight: 700;
	/* Match surrounding baseline (no center / middle alignment). */
	line-height: 1;
	vertical-align: baseline;
}

.hotels-lp .hotels-hero__title-unit,
.hotels-lp .hotels-hero__char--unit {
	display: inline-block;
	font-size: 0.8em;
	font-weight: inherit;
	line-height: 1;
	vertical-align: baseline;
}

.hotels-lp .hotels-hero__char {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.4em);
	animation: hotelsHeroCharIn 0.32s ease forwards;
}

.hotels-lp .hotels-hero__char--space {
	min-width: 0.32em;
}

@keyframes hotelsHeroCharIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hotels-lp .hotels-hero__lead {
	max-width: 30em;
	margin: 0 0 32px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 16px;
	line-height: 1.8;
}

.hotels-lp .hotels-hero__lead-line {
	display: block;
}

.hotels-lp .hotels-hero__lead strong {
	color: inherit;
	font-weight: 700;
}

.hotels-lp .hotels-hero__cta--primary {
	background: var(--color-white);
	color: var(--color-blue-dark);
}

.hotels-lp .hotels-hero__cta--primary:hover {
	background: var(--color-white);
	color: var(--color-blue-deep);
}

.hotels-lp .hotels-hero__cta--secondary {
	border: 1px solid rgba(255, 255, 255, 0.72);
	background: transparent;
	color: var(--color-white);
}

.hotels-lp .hotels-hero__cta--secondary:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-white);
}

.hotels-lp .hotels-hero__visual {
	min-width: 0;
	max-width: 100%;
}

.hotels-lp .hotels-hero__stack {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding-bottom: 18%;
}

.hotels-lp .hotels-hero__dashboard {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: var(--color-white);
	box-shadow: 0 18px 42px rgba(10, 24, 64, 0.28);
}

.hotels-lp .hotels-hero__dashboard img {
	display: block;
	width: 100%;
	height: auto;
}

.hotels-lp .hotels-hero__chat {
	position: absolute;
	right: 0;
	bottom: -2%;
	z-index: 2;
	width: min(55%, 295px);
}

.hotels-lp .hotels-hero__chat-float {
	will-change: transform;
	animation: hotelsHeroFloat 5s ease-in-out infinite;
}

.hotels-lp .hotels-hero__chat img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 34px rgba(10, 24, 64, 0.38));
}

@keyframes hotelsHeroFloat {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

/* Staged reveal — only when JS adds .hotels-hero--animate */
.hotels-lp .hotels-hero--animate .hotels-hero__lead,
.hotels-lp .hotels-hero--animate .hotels-hero__actions,
.hotels-lp .hotels-hero--animate .hotels-hero__dashboard,
.hotels-lp .hotels-hero--animate .hotels-hero__chat {
	opacity: 0;
	transform: translateY(16px);
}

.hotels-lp .hotels-hero--animate.is-hotels-hero-lead .hotels-hero__lead,
.hotels-lp .hotels-hero--animate.is-hotels-hero-cta .hotels-hero__actions,
.hotels-lp .hotels-hero--animate.is-hotels-hero-dashboard .hotels-hero__dashboard,
.hotels-lp .hotels-hero--animate.is-hotels-hero-chat .hotels-hero__chat {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.hotels-lp .hotels-hero--animate.is-hotels-hero-chat .hotels-hero__chat-float {
	animation: hotelsHeroFloat 5s ease-in-out infinite;
}

.hotels-lp .hotels-hero--animate:not(.is-hotels-hero-chat) .hotels-hero__chat-float {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.hotels-lp .hotels-hero__char {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.hotels-lp .hotels-hero--animate .hotels-hero__lead,
	.hotels-lp .hotels-hero--animate .hotels-hero__actions,
	.hotels-lp .hotels-hero--animate .hotels-hero__dashboard,
	.hotels-lp .hotels-hero--animate .hotels-hero__chat {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hotels-lp .hotels-hero__chat-float,
	.hotels-lp .hotels-hero--animate.is-hotels-hero-chat .hotels-hero__chat-float {
		animation: none;
	}
}

/* ----------------------------------------
   05. PROBLEM
---------------------------------------- */

.hotels-lp .hotels-problem .hotels-section-heading {
	max-width: 16em;
	margin-bottom: 56px;
}

.hotels-lp .hotels-problem__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px; /* same as .why__grid */
	align-items: stretch;
}

/* Mirror top-page `.why-card` (scoped; do not alter global why-card). */
.hotels-lp .hotels-problem__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 64px 36px 48px;
	border: 1px solid #e8eef8;
	border-radius: var(--radius);
	background: var(--color-white);
	box-shadow: 0 8px 24px rgba(26, 39, 68, 0.035);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
	.hotels-lp .hotels-problem__card:hover {
		transform: translateY(-3px);
		border-color: #c8d9f5;
		box-shadow: 0 12px 32px rgba(26, 39, 68, 0.055);
	}
}

.hotels-lp .hotels-problem__head {
	position: relative;
	margin-bottom: 16px;
}

.hotels-lp .hotels-problem__num {
	position: absolute;
	left: -4px;
	z-index: 0;
	margin: 0;
	color: rgba(47, 107, 255, 0.18);
	font-size: 68px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	transform: scaleY(1.1);
	transform-origin: left bottom;
	pointer-events: none;
	user-select: none;
}

.hotels-lp .hotels-problem__card:nth-child(1) .hotels-problem__num {
	top: -30px;
}

.hotels-lp .hotels-problem__card:nth-child(2) .hotels-problem__num,
.hotels-lp .hotels-problem__card:nth-child(3) .hotels-problem__num {
	top: -34px;
}

.hotels-lp .hotels-problem__title {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--color-navy);
	font-size: clamp(20px, 1.7vw, 23px);
	font-weight: 700;
	line-height: 1.45;
}

.hotels-lp .hotels-problem__title .hotels-heading-phrase {
	display: block;
	white-space: nowrap;
}

.hotels-lp .hotels-problem__text {
	margin: 0;
	color: var(--color-muted);
	font-size: 16px;
	line-height: 1.85;
}

.hotels-lp .hotels-problem {
	padding-bottom: 80px;
}

.hotels-lp .hotels-problem__bridge {
	position: relative;
	margin: 56px 0 0;
	padding: 8px 16px 0;
	color: var(--color-navy);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0;
	text-align: center;
}

.hotels-lp .hotels-problem__bridge::before {
	content: "";
	position: absolute;
	inset: -8% -6% -4%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse 65% 55% at 50% 42%,
		rgba(255, 255, 255, 0.5) 0%,
		rgba(47, 107, 255, 0.035) 42%,
		transparent 72%
	);
}

.hotels-lp .hotels-problem__bridge-copy,
.hotels-lp .hotels-problem__bridge-accent {
	position: relative;
	z-index: 1;
}

.hotels-lp .hotels-problem__bridge-copy {
	margin: 0;
	letter-spacing: 0.03em;
}

.hotels-lp .hotels-problem__bridge-line:first-child {
	letter-spacing: 0;
}

.hotels-lp .hotels-problem__bridge .hotels-heading-phrase,
.hotels-lp .hotels-problem__bridge-line {
	display: block;
}

.hotels-lp .hotels-problem__bridge .hotels-brand {
	display: inline;
	font-size: 0.92em;
	letter-spacing: 0.04em;
	vertical-align: baseline;
}

.hotels-lp .hotels-problem__bridge-word {
	display: inline;
	color: inherit;
	font-size: 1.16em;
	font-weight: 800;
	transition: color 0.45s ease;
}

.hotels-lp .hotels-problem__bridge-word.is-blue,
.hotels-lp .hotels-problem__bridge.is-complete .hotels-problem__bridge-word {
	color: var(--color-blue);
}

.hotels-lp .hotels-problem__bridge-accent {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hotels-lp .hotels-problem__bridge-chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
	color: var(--color-blue);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.hotels-lp .hotels-problem__bridge.is-chevron .hotels-problem__bridge-chevron {
	opacity: 1;
}

.hotels-lp .hotels-problem__bridge-chevron-icon {
	display: block;
}

.hotels-lp .hotels-problem__bridge.is-chevron .hotels-problem__bridge-chevron-icon {
	animation: hotelsBridgeBob 2.6s ease-in-out infinite;
}

@keyframes hotelsBridgeBob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

/* Char reveal only after JS enhancement (progressive: readable without JS) */
.hotels-lp .hotels-problem__bridge.is-enhanced .hotels-problem__bridge-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.28em);
	animation: hotelsBridgeCharIn 0.24s ease forwards;
	letter-spacing: 0.03em;
}

.hotels-lp .hotels-problem__bridge.is-enhanced .hotels-problem__bridge-line:first-child .hotels-problem__bridge-char {
	letter-spacing: 0;
}

.hotels-lp .hotels-problem__bridge.is-enhanced .hotels-brand .hotels-problem__bridge-char {
	letter-spacing: 0.04em;
}

.hotels-lp .hotels-problem__bridge.is-enhanced .hotels-problem__bridge-char--space {
	min-width: 0.28em;
}

@keyframes hotelsBridgeCharIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hotels-lp .hotels-problem__bridge-word {
		transition: none;
	}

	.hotels-lp .hotels-problem__bridge-chevron {
		transition: none;
	}

	.hotels-lp .hotels-problem__bridge.is-enhanced .hotels-problem__bridge-char {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.hotels-lp .hotels-problem__bridge.is-chevron .hotels-problem__bridge-chevron-icon,
	.hotels-lp .hotels-problem__bridge-chevron-icon {
		animation: none;
	}
}

/* ----------------------------------------
   07. Shared Phase C helpers
---------------------------------------- */

.hotels-lp .hotels-service-name {
	display: inline-block;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 0 20px;
	padding: 10px 18px;
	border-radius: 8px;
	/* Same blue as Hotels LP HERO (.hotels-hero) */
	background: var(--color-blue-dark);
	color: var(--color-white);
	font-family: "Laro", sans-serif;
	font-size: clamp(18px, 1.7vw, 22px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hotels-lp .hotels-section-label:has(+ .hotels-service-name),
.hotels-lp .hotels-section-label:has(+ .hotels-service-name-row) {
	margin-bottom: 12px;
}

.hotels-lp .hotels-service-name-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 20px;
}

.hotels-lp .hotels-service-name-row .hotels-service-name {
	margin-bottom: 0;
}

.hotels-lp .hotels-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid rgba(47, 107, 255, 0.35);
	border-radius: 999px;
	background: rgba(47, 107, 255, 0.08);
	color: var(--color-blue);
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.hotels-lp .hotels-visual-slot {
	width: 100%;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 10px 30px rgba(26, 39, 68, 0.04);
}

.hotels-lp .hotels-visual-slot--tall {
	aspect-ratio: 9 / 14;
	max-width: 320px;
	margin-inline: auto;
}

.hotels-lp .hotels-visual-slot--wide {
	aspect-ratio: 16 / 10;
}

.hotels-lp .hotels-visual-slot--report {
	aspect-ratio: 16 / 10;
	margin-top: 28px;
}

.hotels-lp .hotels-visual-slot--map {
	aspect-ratio: 4 / 3;
}

.hotels-lp .hotels-visual-slot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* Shared autoplay progress for feature showcases. */
.hotels-lp .has-autoplay-progress [data-hotels-showcase-item] {
	position: relative;
}

.hotels-lp .has-autoplay-progress [data-hotels-showcase-item]::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background: var(--color-blue);
	content: "";
	pointer-events: none;
	transform: scaleY(0);
	transform-origin: top;
}

.hotels-lp .has-autoplay-progress.is-progress-running [data-hotels-showcase-item].is-active::before {
	animation: hotels-front-desk-progress var(--hotels-showcase-interval) linear forwards;
}

.hotels-lp .has-autoplay-progress [data-hotels-showcase-item].is-active > [role="tab"] {
	border-left-color: transparent;
}

@keyframes hotels-front-desk-progress {
	from {
		transform: scaleY(0);
	}

	to {
		transform: scaleY(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hotels-lp .has-autoplay-progress [data-hotels-showcase-item].is-active::before,
	.hotels-lp .has-autoplay-progress.is-progress-running [data-hotels-showcase-item].is-active::before {
		animation: none;
		transform: scaleY(1);
	}
}

/* ----------------------------------------
   08. AI CONCIERGE
---------------------------------------- */

.hotels-lp .hotels-concierge__header {
	margin-bottom: 28px;
}

.hotels-lp .hotels-concierge__header .hotels-service-name {
	margin-bottom: 0;
}

.hotels-lp .hotels-concierge .hotels-heading-phrase {
	display: block;
}

.hotels-lp .hotels-concierge .hotels-section-heading {
	font-size: clamp(30px, 2.6vw, 42px);
	word-break: keep-all;
}

.hotels-lp .hotels-concierge-showcase {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.05fr);
	grid-template-areas:
		"heading panels"
		"body panels"
		"tabs panels";
	column-gap: 48px;
	row-gap: 0;
	align-items: stretch;
}

.hotels-lp .hotels-concierge-showcase__heading {
	grid-area: heading;
	margin: 0 0 18px;
	align-self: start;
}

.hotels-lp .hotels-concierge-showcase__body {
	grid-area: body;
	max-width: none;
	margin: 0 0 28px;
	align-self: start;
}

.hotels-lp .hotels-concierge-showcase__body p {
	margin: 0;
}

.hotels-lp .hotels-concierge-showcase__body strong {
	color: var(--color-navy);
	font-weight: 700;
}

.hotels-lp .hotels-concierge__body-break {
	display: none;
}

@media (min-width: 1025px) {
	.hotels-lp .hotels-concierge__body-break {
		display: inline;
	}
}

.hotels-lp .hotels-concierge-showcase__tabs {
	grid-area: tabs;
	display: flex;
	flex-direction: column;
	min-height: 0;
	align-self: start;
}

.hotels-lp .hotels-concierge-showcase__item {
	border-top: 1px solid var(--color-line);
}

.hotels-lp .hotels-concierge-showcase__item:last-child {
	border-bottom: 1px solid var(--color-line);
}

.hotels-lp .hotels-concierge-showcase__tab {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 0 14px 14px;
	border: 0;
	border-left: 2px solid transparent;
	background: transparent;
	color: var(--color-navy);
	text-align: left;
	cursor: pointer;
	appearance: none;
	font: inherit;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.hotels-lp .hotels-concierge-showcase__tab:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

.hotels-lp .hotels-concierge-showcase__title {
	display: block;
	color: var(--color-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	transition: color 0.25s ease;
}

.hotels-lp .hotels-concierge-showcase__desc {
	display: grid;
	grid-template-rows: 1fr;
	padding: 0 0 14px 14px;
	transition: grid-template-rows 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
}

.hotels-lp .hotels-concierge-showcase__desc-inner {
	overflow: hidden;
	min-height: 0;
}

.hotels-lp .hotels-concierge-showcase__desc p {
	margin: 0;
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.7;
}

/* Enhanced: collapse inactive descriptions */
.hotels-lp .hotels-concierge-showcase.is-enhanced .hotels-concierge-showcase__item:not(.is-active) .hotels-concierge-showcase__desc {
	grid-template-rows: 0fr;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

.hotels-lp .hotels-concierge-showcase__item.is-active .hotels-concierge-showcase__tab {
	border-left-color: var(--color-blue);
	padding-bottom: 8px;
}

.hotels-lp .hotels-concierge-showcase__item.is-active .hotels-concierge-showcase__title {
	color: var(--color-blue);
}

.hotels-lp .hotels-concierge-showcase__panels {
	grid-area: panels;
	position: relative;
	min-width: 0;
	width: 100%;
	align-self: stretch;
}

.hotels-lp .hotels-concierge-showcase__panel {
	border-radius: var(--radius);
	overflow: hidden;
}

.hotels-lp .hotels-concierge-showcase__panel + .hotels-concierge-showcase__panel {
	margin-top: 16px;
}

.hotels-lp .hotels-concierge-showcase__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-pale);
	box-shadow: 0 12px 32px rgba(26, 39, 68, 0.06);
}

.hotels-lp .hotels-concierge-showcase__placeholder-label {
	color: rgba(47, 107, 255, 0.55);
	font-family: "Laro", sans-serif;
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

/* 01 real media: keep pale panel chrome; enlarge image inside. */
.hotels-lp .hotels-concierge-showcase__panel--media {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-pale);
	box-shadow: 0 12px 32px rgba(26, 39, 68, 0.06);
	padding: 0;
}

.hotels-lp .hotels-concierge-showcase__panel--media .hotels-concierge-showcase__media {
	display: block;
	width: 96%;
	max-width: 96%;
	height: auto;
	object-fit: contain;
}

/*
 * PC + enhanced: drop fixed 4:3 so the right stage fills the
 * full grid height (heading → last tab), matching left column ends.
 */
.hotels-lp .hotels-concierge-showcase.is-enhanced .hotels-concierge-showcase__panels {
	aspect-ratio: auto;
	height: 100%;
	min-height: 100%;
}

.hotels-lp .hotels-concierge-showcase.is-enhanced .hotels-concierge-showcase__panel {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	opacity: 0;
	transform: translateY(8px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.hotels-lp .hotels-concierge-showcase.is-enhanced .hotels-concierge-showcase__panel.is-active {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

.hotels-lp .hotels-concierge-showcase.is-enhanced .hotels-concierge-showcase__placeholder {
	height: 100%;
	aspect-ratio: auto;
}

.hotels-lp .hotels-concierge-showcase.is-enhanced .hotels-concierge-showcase__panel--media .hotels-concierge-showcase__media {
	width: 96%;
	max-width: 96%;
	height: auto;
	max-height: calc(100% - 8px);
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.hotels-lp .hotels-concierge-showcase__tab,
	.hotels-lp .hotels-concierge-showcase__title,
	.hotels-lp .hotels-concierge-showcase__desc,
	.hotels-lp .hotels-concierge-showcase.is-enhanced .hotels-concierge-showcase__panel {
		transition: none;
	}

	.hotels-lp .hotels-concierge-showcase.is-enhanced .hotels-concierge-showcase__panel {
		transform: none;
	}
}

/* ----------------------------------------
   09. AI FRONT DESK
---------------------------------------- */

.hotels-lp .hotels-front-desk__intro {
	margin-bottom: 28px;
}

.hotels-lp .hotels-front-desk__intro .hotels-service-name {
	margin-bottom: 0;
}

.hotels-lp .hotels-front-desk .hotels-heading-phrase {
	display: block;
}

.hotels-lp .hotels-front-desk .hotels-section-heading {
	font-size: clamp(30px, 2.6vw, 42px);
	word-break: keep-all;
}

.hotels-lp .hotels-front-desk-showcase {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.05fr);
	grid-template-areas:
		"heading panels"
		"body panels"
		"tabs panels";
	column-gap: 48px;
	row-gap: 0;
	align-items: stretch;
}

.hotels-lp .hotels-front-desk-showcase__heading {
	grid-area: heading;
	margin: 0 0 18px;
	align-self: start;
}

.hotels-lp .hotels-front-desk-showcase__body {
	grid-area: body;
	min-width: 0;
	max-width: none;
	margin: 0 0 28px;
	align-self: start;
}

.hotels-lp .hotels-front-desk-showcase__body p {
	margin: 0;
}

.hotels-lp .hotels-front-desk-showcase__body strong {
	color: var(--color-navy);
	font-weight: 700;
}

.hotels-lp .hotels-front-desk-showcase__tabs {
	grid-area: tabs;
	display: flex;
	flex-direction: column;
	min-height: 0;
	align-self: start;
}

.hotels-lp .hotels-front-desk-showcase__item {
	border-top: 1px solid var(--color-line);
}

.hotels-lp .hotels-front-desk-showcase__item:last-child {
	border-bottom: 1px solid var(--color-line);
}

.hotels-lp .hotels-front-desk-showcase__tab {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 0 14px 14px;
	border: 0;
	border-left: 2px solid transparent;
	background: transparent;
	color: var(--color-navy);
	text-align: left;
	cursor: pointer;
	appearance: none;
	font: inherit;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.hotels-lp .hotels-front-desk-showcase__tab:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

.hotels-lp .hotels-front-desk-showcase__title {
	display: block;
	color: var(--color-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	transition: color 0.25s ease;
}

.hotels-lp .hotels-front-desk-showcase__desc {
	display: grid;
	grid-template-rows: 1fr;
	padding: 0 0 14px 14px;
	transition: grid-template-rows 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
}

.hotels-lp .hotels-front-desk-showcase__desc-inner {
	overflow: hidden;
	min-height: 0;
}

.hotels-lp .hotels-front-desk-showcase__desc p {
	margin: 0;
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.7;
}

.hotels-lp .hotels-front-desk-showcase.is-enhanced .hotels-front-desk-showcase__item:not(.is-active) .hotels-front-desk-showcase__desc {
	grid-template-rows: 0fr;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

.hotels-lp .hotels-front-desk-showcase__item.is-active .hotels-front-desk-showcase__tab {
	border-left-color: var(--color-blue);
	padding-bottom: 8px;
}

.hotels-lp .hotels-front-desk-showcase__item.is-active .hotels-front-desk-showcase__title {
	color: var(--color-blue);
}

.hotels-lp .hotels-front-desk-showcase__panels {
	grid-area: panels;
	position: relative;
	min-width: 0;
	width: 100%;
	align-self: stretch;
}

.hotels-lp .hotels-front-desk-showcase__panel {
	border-radius: var(--radius);
	overflow: hidden;
}

.hotels-lp .hotels-front-desk-showcase__panel + .hotels-front-desk-showcase__panel {
	margin-top: 16px;
}

.hotels-lp .hotels-front-desk-showcase__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 12px 32px rgba(26, 39, 68, 0.06);
}

.hotels-lp .hotels-front-desk-showcase__placeholder-label {
	color: rgba(47, 107, 255, 0.55);
	font-family: "Laro", sans-serif;
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.hotels-lp .hotels-front-desk-showcase__panel--media {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 12px 32px rgba(26, 39, 68, 0.06);
	padding: 0;
}

.hotels-lp .hotels-front-desk-showcase__panel--media .hotels-front-desk-showcase__media {
	display: block;
	width: 96%;
	max-width: 96%;
	height: auto;
	object-fit: contain;
}

.hotels-lp .hotels-front-desk-showcase.is-enhanced .hotels-front-desk-showcase__panels {
	aspect-ratio: auto;
	height: 100%;
	min-height: 100%;
}

.hotels-lp .hotels-front-desk-showcase.is-enhanced .hotels-front-desk-showcase__panel {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	opacity: 0;
	transform: translateY(8px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.hotels-lp .hotels-front-desk-showcase.is-enhanced .hotels-front-desk-showcase__panel.is-active {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

.hotels-lp .hotels-front-desk-showcase.is-enhanced .hotels-front-desk-showcase__placeholder {
	height: 100%;
	aspect-ratio: auto;
}

.hotels-lp .hotels-front-desk-showcase.is-enhanced .hotels-front-desk-showcase__panel--media .hotels-front-desk-showcase__media {
	width: 96%;
	max-width: 96%;
	height: auto;
	max-height: calc(100% - 8px);
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.hotels-lp .hotels-front-desk-showcase__tab,
	.hotels-lp .hotels-front-desk-showcase__title,
	.hotels-lp .hotels-front-desk-showcase__desc,
	.hotels-lp .hotels-front-desk-showcase.is-enhanced .hotels-front-desk-showcase__panel {
		transition: none;
	}

	.hotels-lp .hotels-front-desk-showcase.is-enhanced .hotels-front-desk-showcase__panel {
		transform: none;
	}
}

/* ----------------------------------------
   10. GUEST INSIGHTS
---------------------------------------- */

.hotels-lp .hotels-understand__intro {
	margin-bottom: 28px;
}

.hotels-lp .hotels-understand .hotels-heading-phrase {
	display: block;
}

.hotels-lp .hotels-understand .hotels-section-heading {
	font-size: clamp(30px, 2.6vw, 42px);
	word-break: keep-all;
}

.hotels-lp .hotels-understand-showcase {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.05fr);
	grid-template-areas:
		"heading panels"
		"body panels"
		"tabs panels";
	column-gap: 48px;
	row-gap: 0;
	align-items: stretch;
	min-width: 0;
	width: 100%;
}

.hotels-lp .hotels-understand-showcase__heading {
	grid-area: heading;
	margin: 0 0 18px;
	align-self: start;
	min-width: 0;
	max-width: 100%;
}

@media (min-width: 1025px) {
	.hotels-lp .hotels-understand .hotels-section-heading {
		font-size: clamp(26px, 2.15vw, 34px);
		letter-spacing: 0.01em;
		word-break: normal;
		overflow-wrap: normal;
	}

	.hotels-lp .hotels-understand-showcase__heading .hotels-heading-phrase:first-child {
		white-space: nowrap;
	}
}

.hotels-lp .hotels-understand-showcase__body {
	grid-area: body;
	min-width: 0;
	max-width: 100%;
	margin: 0 0 28px;
	align-self: start;
}

.hotels-lp .hotels-understand-showcase__body p {
	margin: 0;
}

.hotels-lp .hotels-understand-showcase__body strong {
	color: var(--color-navy);
	font-weight: 700;
}

.hotels-lp .hotels-understand-showcase__tabs {
	grid-area: tabs;
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
	min-height: 0;
	align-self: start;
}

.hotels-lp .hotels-understand-showcase__item {
	border-top: 1px solid var(--color-line);
}

.hotels-lp .hotels-understand-showcase__item:last-child {
	border-bottom: 1px solid var(--color-line);
}

.hotels-lp .hotels-understand-showcase__tab {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 0 14px 14px;
	border: 0;
	border-left: 2px solid transparent;
	background: transparent;
	color: var(--color-navy);
	text-align: left;
	cursor: pointer;
	appearance: none;
	font: inherit;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.hotels-lp .hotels-understand-showcase__tab:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

.hotels-lp .hotels-understand-showcase__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
}

.hotels-lp .hotels-understand-showcase__prefix {
	color: var(--color-blue);
}

.hotels-lp .hotels-understand-showcase__name {
	color: var(--color-navy);
	transition: color 0.25s ease;
}

.hotels-lp .hotels-understand-showcase__desc {
	display: grid;
	grid-template-rows: 1fr;
	padding: 0 0 14px 14px;
	transition: grid-template-rows 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
}

.hotels-lp .hotels-understand-showcase__desc-inner {
	overflow: hidden;
	min-height: 0;
}

.hotels-lp .hotels-understand-showcase__desc p {
	margin: 0;
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.7;
}

.hotels-lp .hotels-understand-showcase.is-enhanced .hotels-understand-showcase__item:not(.is-active) .hotels-understand-showcase__desc {
	grid-template-rows: 0fr;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

.hotels-lp .hotels-understand-showcase__item.is-active .hotels-understand-showcase__tab {
	border-left-color: var(--color-blue);
	padding-bottom: 8px;
}

.hotels-lp .hotels-understand-showcase__item.is-active .hotels-understand-showcase__prefix {
	color: var(--color-blue);
}

.hotels-lp .hotels-understand-showcase__item.is-active .hotels-understand-showcase__name {
	color: var(--color-navy);
}

.hotels-lp .hotels-understand-showcase__panels {
	grid-area: panels;
	position: relative;
	min-width: 0;
	max-width: 100%;
	width: 100%;
	align-self: stretch;
}

.hotels-lp .hotels-understand-showcase__panel {
	box-sizing: border-box;
	max-width: 100%;
	border-radius: var(--radius);
	overflow: hidden;
}

.hotels-lp .hotels-understand-showcase__panel + .hotels-understand-showcase__panel {
	margin-top: 16px;
}

.hotels-lp .hotels-understand-showcase__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-pale);
	box-shadow: 0 12px 32px rgba(26, 39, 68, 0.06);
}

.hotels-lp .hotels-understand-showcase__placeholder-label {
	color: rgba(47, 107, 255, 0.55);
	font-family: "Laro", sans-serif;
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.hotels-lp .hotels-understand-showcase__panel--media {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-pale);
	box-shadow: 0 12px 32px rgba(26, 39, 68, 0.06);
	padding: 0;
}

.hotels-lp .hotels-understand-showcase__panel--media .hotels-understand-showcase__media {
	display: block;
	width: 96%;
	max-width: 96%;
	height: auto;
	object-fit: contain;
}

.hotels-lp .hotels-understand-showcase.is-enhanced .hotels-understand-showcase__panels {
	aspect-ratio: auto;
	height: 100%;
	min-height: 100%;
}

.hotels-lp .hotels-understand-showcase.is-enhanced .hotels-understand-showcase__panel {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	opacity: 0;
	transform: translateY(8px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.hotels-lp .hotels-understand-showcase.is-enhanced .hotels-understand-showcase__panel.is-active {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

.hotels-lp .hotels-understand-showcase.is-enhanced .hotels-understand-showcase__placeholder {
	height: 100%;
	aspect-ratio: auto;
}

.hotels-lp .hotels-understand-showcase.is-enhanced .hotels-understand-showcase__panel--media .hotels-understand-showcase__media {
	width: 96%;
	max-width: 96%;
	height: auto;
	max-height: calc(100% - 8px);
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.hotels-lp .hotels-understand-showcase__tab,
	.hotels-lp .hotels-understand-showcase__name,
	.hotels-lp .hotels-understand-showcase__desc,
	.hotels-lp .hotels-understand-showcase.is-enhanced .hotels-understand-showcase__panel {
		transition: none;
	}

	.hotels-lp .hotels-understand-showcase.is-enhanced .hotels-understand-showcase__panel {
		transform: none;
	}
}

/* ----------------------------------------
   11. GLOBAL REACH
---------------------------------------- */

.hotels-lp .hotels-attract__intro {
	margin-bottom: 28px;
}

.hotels-lp .hotels-attract .hotels-heading-phrase {
	display: block;
}

.hotels-lp .hotels-attract .hotels-section-heading {
	font-size: clamp(30px, 2.6vw, 42px);
	word-break: keep-all;
}

.hotels-lp .hotels-attract-showcase {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.05fr);
	grid-template-areas: "copy panels";
	column-gap: 48px;
	row-gap: 0;
	align-items: start;
	min-width: 0;
	width: 100%;
}

.hotels-lp .hotels-attract-showcase__copy {
	grid-area: copy;
	min-width: 0;
	max-width: 100%;
}

.hotels-lp h2.hotels-attract-showcase__heading,
.hotels-lp .hotels-attract-showcase__heading {
	margin: 0 0 18px;
	min-width: 0;
	max-width: 100%;
}

@media (min-width: 1025px) {
	.hotels-lp .hotels-attract .hotels-section-heading {
		font-size: clamp(26px, 2.15vw, 34px);
		letter-spacing: 0.01em;
		word-break: normal;
		overflow-wrap: normal;
	}

	.hotels-lp .hotels-attract-showcase__heading .hotels-heading-phrase:first-child {
		white-space: nowrap;
	}
}

.hotels-lp .hotels-attract-showcase__body {
	min-width: 0;
	max-width: 100%;
	margin: 0 0 28px;
	line-height: 1.85;
}

.hotels-lp .hotels-attract-showcase__body p {
	margin: 0;
}

.hotels-lp .hotels-attract-showcase__body p + p {
	margin-top: 0.65em;
}

.hotels-lp .hotels-attract-showcase__tabs {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
	min-height: 0;
}

.hotels-lp .hotels-attract-showcase__item {
	border-top: 1px solid var(--color-line);
}

.hotels-lp .hotels-attract-showcase__item:last-child {
	border-bottom: 1px solid var(--color-line);
}

.hotels-lp .hotels-attract-showcase__tab {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 0 14px 14px;
	border: 0;
	border-left: 2px solid transparent;
	background: transparent;
	color: var(--color-navy);
	text-align: left;
	cursor: pointer;
	appearance: none;
	font: inherit;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.hotels-lp .hotels-attract-showcase__tab:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

.hotels-lp .hotels-attract-showcase__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
}

.hotels-lp .hotels-attract-showcase__name {
	color: var(--color-navy);
	transition: color 0.25s ease;
}

.hotels-lp .hotels-attract-showcase__desc {
	display: grid;
	grid-template-rows: 1fr;
	padding: 0 0 14px 14px;
	transition: grid-template-rows 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
}

.hotels-lp .hotels-attract-showcase__desc-inner {
	overflow: hidden;
	min-height: 0;
}

.hotels-lp .hotels-attract-showcase__desc p {
	margin: 0;
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.7;
}

.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__item:not(.is-active) .hotels-attract-showcase__desc {
	grid-template-rows: 0fr;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

.hotels-lp .hotels-attract-showcase__item.is-active .hotels-attract-showcase__tab {
	border-left-color: var(--color-blue);
	padding-bottom: 8px;
}

.hotels-lp .hotels-attract-showcase__item.is-active .hotels-attract-showcase__name {
	color: var(--color-navy);
}

.hotels-lp .hotels-attract-showcase__panels {
	grid-area: panels;
	position: relative;
	min-width: 0;
	max-width: 100%;
	width: 100%;
	align-self: start;
}

.hotels-lp .hotels-attract-showcase__panel {
	box-sizing: border-box;
	max-width: 100%;
	border-radius: var(--radius);
	overflow: hidden;
}

.hotels-lp .hotels-attract-showcase__panel + .hotels-attract-showcase__panel {
	margin-top: 16px;
}

.hotels-lp .hotels-attract-showcase__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 12px 32px rgba(26, 39, 68, 0.06);
}

.hotels-lp .hotels-attract-showcase__placeholder-label {
	color: rgba(47, 107, 255, 0.55);
	font-family: "Laro", sans-serif;
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.hotels-lp .hotels-attract-showcase__panel--media {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 12px 32px rgba(26, 39, 68, 0.06);
	padding: 0;
}

.hotels-lp .hotels-attract-showcase__panel--media .hotels-attract-showcase__media {
	display: block;
	width: 96%;
	max-width: 96%;
	height: auto;
	object-fit: contain;
}

.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__panels {
	height: auto;
	min-height: 0;
	align-self: start;
}

.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__panel {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	opacity: 0;
	transform: translateY(8px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__panel.is-active {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__placeholder {
	height: 100%;
	aspect-ratio: auto;
}

.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__panel--media .hotels-attract-showcase__media {
	width: auto;
	max-width: 96%;
	height: auto;
	max-height: calc(100% - 16px);
	object-fit: contain;
	margin: auto;
}

@media (min-width: 1025px) {
	/* Must come after the base is-enhanced panels rule so PC height is not overridden. */
	.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__panels {
		aspect-ratio: 5 / 3;
		width: 100%;
		height: auto;
		max-height: none;
		align-self: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hotels-lp .hotels-attract-showcase__tab,
	.hotels-lp .hotels-attract-showcase__name,
	.hotels-lp .hotels-attract-showcase__desc,
	.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__panel {
		transition: none;
	}

	.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__panel {
		transform: none;
	}
}

/* ----------------------------------------
   12. BASYS HOTELS CYCLE
---------------------------------------- */

.hotels-lp .hotels-cycle__intro {
	max-width: 820px;
	margin-bottom: 40px;
}

.hotels-lp .hotels-cycle .hotels-heading-phrase {
	display: block;
}

.hotels-lp .hotels-cycle__body p {
	margin: 0;
}

.hotels-lp .hotels-cycle__body p + p {
	margin-top: 0.4em;
}

@media (min-width: 1025px) {
	/* Widen body only; heading stays 2 lines via display:block phrases. */
	.hotels-lp .hotels-cycle__intro {
		max-width: min(1100px, 100%);
	}

	.hotels-lp .hotels-section-body.hotels-cycle__body {
		max-width: none;
		width: 100%;
	}
}

.hotels-lp .hotels-cycle__diagram {
	position: relative;
	width: min(100%, 560px);
	margin: 0 auto;
	aspect-ratio: 1;
}

.hotels-lp .hotels-cycle__svg {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hotels-lp .hotels-cycle__ring-base {
	opacity: 1;
}

.hotels-lp .hotels-cycle__ring-flow {
	stroke-dasharray: 42 958;
	stroke-dashoffset: 0;
	animation: hotels-cycle-flow 5.5s linear infinite;
}

@keyframes hotels-cycle-flow {
	to {
		stroke-dashoffset: -1000;
	}
}

.hotels-lp .hotels-cycle__node {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: clamp(104px, 24%, 128px);
	aspect-ratio: 1;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(12, 28, 64, 0.82);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
	text-align: center;
	transform: translate(-50%, -50%);
}

/* Circle nodes at 12 / 4 / 8 o'clock (r=198 / viewBox 560) */
.hotels-lp .hotels-cycle__node--service {
	left: 50%;
	top: 14.6%;
}

.hotels-lp .hotels-cycle__node--understand {
	left: 80.6%;
	top: 67.9%;
}

.hotels-lp .hotels-cycle__node--attract {
	left: 19.4%;
	top: 67.9%;
}

.hotels-lp .hotels-cycle__en {
	display: block;
	margin: 0 0 6px;
	color: rgba(159, 189, 255, 0.92);
	font-family: "Laro", sans-serif;
	font-size: clamp(8px, 1.35vw, 10px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.25;
}

.hotels-lp .hotels-cycle__ja {
	display: block;
	margin: 0;
	color: var(--color-white);
	font-size: clamp(22px, 3.2vw, 28px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
}

.hotels-lp .hotels-cycle__hub {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
}

.hotels-lp .hotels-cycle__hub-brand {
	margin: 0 0 8px;
	color: rgba(255, 255, 255, 0.58);
	font-family: "Laro", sans-serif;
	font-size: clamp(11px, 1.7vw, 13px);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
}

.hotels-lp .hotels-cycle__hub-note {
	margin: 0;
	color: rgba(159, 189, 255, 0.55);
	font-family: "Laro", sans-serif;
	font-size: clamp(9px, 1.35vw, 10px);
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
	.hotels-lp .hotels-cycle__ring-flow {
		animation: none;
		opacity: 0;
	}
}

/* ----------------------------------------
   14. CUSTOMER PORTAL
---------------------------------------- */

.hotels-lp .hotels-portal__intro {
	margin-bottom: 0;
}

.hotels-lp .hotels-portal__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	column-gap: 48px;
	row-gap: 0;
	align-items: start;
	min-width: 0;
	width: 100%;
}

.hotels-lp .hotels-portal__copy {
	min-width: 0;
	max-width: 100%;
}

.hotels-lp h2.hotels-portal__heading,
.hotels-lp .hotels-portal__heading {
	margin: 0 0 18px;
}

@media (min-width: 1025px) {
	.hotels-lp .hotels-portal .hotels-section-heading,
	.hotels-lp .hotels-portal__heading {
		font-size: clamp(32px, 2.85vw, 40px);
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	/* Safe fixed height: keep current portal image area as-is. */
	.hotels-lp .hotels-portal__frame {
		height: 340px;
		min-height: 340px;
	}

	.hotels-lp .hotels-portal__image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

.hotels-lp .hotels-portal__body {
	max-width: none;
}

.hotels-lp .hotels-portal__body p {
	margin: 0;
}

.hotels-lp .hotels-portal__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.hotels-lp .hotels-portal__list li {
	padding: 8px 14px;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	color: var(--color-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.hotels-lp .hotels-portal__media {
	min-width: 0;
	max-width: 100%;
	width: 100%;
	align-self: start;
}

.hotels-lp .hotels-portal__frame {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-pale);
	box-shadow: 0 12px 32px rgba(26, 39, 68, 0.06);
}

.hotels-lp .hotels-portal__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* ----------------------------------------
   15. 3 REASONS
---------------------------------------- */

.hotels-lp .hotels-why__intro {
	margin-bottom: 32px;
}

.hotels-lp .hotels-why__intro .hotels-section-label {
	margin-bottom: 12px;
}

/* Keep same heading scale as other major sections; PC stays 1 line. */
.hotels-lp .hotels-why .hotels-section-heading {
	margin-bottom: 0;
	font-size: clamp(36px, 3.5vw, 46px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.hotels-lp .hotels-why .hotels-section-heading .hotels-brand,
.hotels-lp .hotels-why__heading-brand {
	display: inline;
	margin: 0;
	color: var(--color-navy);
	font-size: inherit;
	letter-spacing: 0.04em;
	vertical-align: baseline;
	white-space: nowrap;
}

.hotels-lp .hotels-why__heading-sub {
	margin: 0;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.02em;
	vertical-align: baseline;
}

.hotels-lp .hotels-why__heading-num {
	display: inline;
	margin: 0;
	color: var(--color-navy);
	font-size: 1.22em;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1;
	vertical-align: baseline;
}

.hotels-lp .hotels-why__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.hotels-lp .hotels-why__card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	padding: 48px 28px 24px;
	border: 1px solid #e8eef8;
	border-radius: var(--radius);
	background: var(--color-white);
	box-shadow: 0 8px 24px rgba(26, 39, 68, 0.035);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hotels-lp .hotels-why__top {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hotels-lp .hotels-why__top .hotels-why__text,
.hotels-lp .hotels-why__top .hotels-why__combo-desc,
.hotels-lp .hotels-why__top .hotels-why__limited {
	margin-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
	.hotels-lp .hotels-why__card:hover {
		transform: translateY(-3px);
		border-color: #c8d9f5;
		box-shadow: 0 12px 32px rgba(26, 39, 68, 0.055);
	}
}

.hotels-lp .hotels-why__head {
	position: relative;
	margin-bottom: 14px;
}

.hotels-lp .hotels-why__num {
	position: absolute;
	left: -4px;
	top: -28px;
	z-index: 0;
	margin: 0;
	color: rgba(47, 107, 255, 0.18);
	font-size: 68px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	transform: scaleY(1.1);
	transform-origin: left bottom;
	pointer-events: none;
	user-select: none;
}

.hotels-lp .hotels-why__en {
	position: relative;
	z-index: 1;
	margin: 0 0 10px;
	color: var(--color-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}

.hotels-lp .hotels-why__title {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--color-navy);
	font-size: clamp(20px, 1.7vw, 24px);
	font-weight: 700;
	line-height: 1.4;
}

.hotels-lp .hotels-why__title .hotels-heading-phrase {
	display: block;
}

.hotels-lp .hotels-why__price {
	display: inline-block;
	margin: 0 0.05em;
	color: var(--color-blue);
	font-size: 1.75em;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	vertical-align: -0.08em;
}

.hotels-lp .hotels-why__text {
	margin: 0 0 18px;
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.7;
}

/* 01 — force exact 2-line title on PC */
.hotels-lp .hotels-why__card--allinone .hotels-why__title {
	font-size: clamp(19px, 1.55vw, 22px);
	letter-spacing: 0.01em;
}

.hotels-lp .hotels-why__card--allinone .hotels-why__title .hotels-heading-phrase {
	display: block;
	white-space: nowrap;
}

.hotels-lp .hotels-why__card--allinone .hotels-why__head {
	margin-bottom: 10px;
}

/* 03 — tighten title→body; move that space below the body (net height unchanged) */
.hotels-lp .hotels-why__card--continuous .hotels-why__head {
	margin-bottom: 8px; /* was 14px */
}

.hotels-lp .hotels-why__card--continuous .hotels-why__top {
	padding-bottom: 6px; /* +6px before divider; offsets the -6px above */
	box-sizing: border-box;
}

/* Shared footer: divider + supporting info */
.hotels-lp .hotels-why__foot {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--color-line);
}

/*
 * PC: share one top-row height + one foot-row height via subgrid
 * so all three divider lines sit on the exact same Y.
 */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 1025px) {
		.hotels-lp .hotels-why__grid {
			grid-template-rows: auto auto;
			gap: 0 24px;
			align-items: stretch;
		}

		.hotels-lp .hotels-why__card {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 2;
			height: auto;
		}

		.hotels-lp .hotels-why__foot {
			margin-top: 0;
		}
	}
}

/* Fallback without subgrid: pin feet to a shared bottom edge */
@supports not (grid-template-rows: subgrid) {
	@media (min-width: 1025px) {
		.hotels-lp .hotels-why__foot {
			margin-top: auto;
		}
	}
}

.hotels-lp .hotels-why__combo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3em 0.4em;
	margin: 0 0 8px;
	color: var(--color-navy);
	font-family: "Laro", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.35;
}

.hotels-lp .hotels-why__combo-part {
	color: var(--color-navy);
}

.hotels-lp .hotels-why__combo-part--ja {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.hotels-lp .hotels-why__combo--ja {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
	letter-spacing: 0.02em;
}

.hotels-lp .hotels-why__combo-x {
	color: var(--color-blue);
	font-size: 1.15em;
	font-weight: 800;
}

.hotels-lp .hotels-why__combo-desc {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.65;
}

/* 01 / 03 shared info blocks — vertical stack (align with VALUE metrics) */
.hotels-lp .hotels-why__blocks {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* 01 has 4 items — keep foot readable without shifting the shared divider row */
.hotels-lp .hotels-why__card--allinone .hotels-why__blocks {
	gap: 8px;
}

.hotels-lp .hotels-why__blocks li {
	display: grid;
	gap: 2px;
	min-width: 0;
	padding: 0;
	border: 0;
}

.hotels-lp .hotels-why__block-en {
	color: var(--color-blue);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
}

.hotels-lp .hotels-why__block-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.55em;
	margin: 0;
	line-height: 1.4;
}

.hotels-lp .hotels-why__block-ja {
	color: var(--color-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
}

.hotels-lp .hotels-why__block-text {
	color: var(--color-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
}

/* 02 — limited price + metrics */
.hotels-lp .hotels-why__limited {
	display: inline-block;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 0 16px;
	padding: 4px 10px;
	border: 1px solid rgba(47, 107, 255, 0.28);
	border-radius: 4px;
	background: rgba(47, 107, 255, 0.06);
	color: var(--color-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.hotels-lp .hotels-why__metrics {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.hotels-lp .hotels-why__metrics li {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.hotels-lp .hotels-why__metric-label {
	color: var(--color-blue);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
}

.hotels-lp .hotels-why__metric-row {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.18em;
	margin: 0;
	line-height: 1.2;
}

.hotels-lp .hotels-why__metric-sign {
	color: var(--color-blue);
	/* Slightly under metric-num (clamp 20–24) so digits stay primary */
	font-size: clamp(18px, 1.55vw, 22px);
	font-weight: 700;
	line-height: 1;
	vertical-align: baseline;
}

.hotels-lp .hotels-why__metric-sign--plus {
	color: var(--color-blue);
}

.hotels-lp .hotels-why__metric-prefix {
	color: var(--color-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

.hotels-lp .hotels-why__metric-num {
	color: var(--color-navy);
	font-size: clamp(20px, 1.7vw, 24px);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.1;
	white-space: nowrap;
}

.hotels-lp .hotels-why__metric-unit {
	color: var(--color-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.hotels-lp .hotels-why__note {
	margin: 12px 0 0;
	color: var(--color-muted);
	font-size: 11px;
	line-height: 1.5;
}

.hotels-lp .hotels-why__planned {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--color-line);
}

.hotels-lp .hotels-why__planned-en {
	margin: 0 0 4px;
	color: var(--color-blue);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
}

.hotels-lp .hotels-why__planned-text {
	margin: 0;
	color: var(--color-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	white-space: nowrap;
}

/* ----------------------------------------
   17. PRICE
---------------------------------------- */

.hotels-lp .hotels-price__intro {
	max-width: 760px;
	margin-bottom: 36px;
}

.hotels-lp .hotels-price__intro .hotels-section-label {
	margin-bottom: 12px;
}

.hotels-lp .hotels-price__intro .hotels-section-heading {
	margin-bottom: 14px;
}

.hotels-lp .hotels-price__lead {
	max-width: 760px;
	margin: 0;
	color: var(--color-muted);
	font-size: 16px;
	line-height: 1.75;
}

.hotels-lp .hotels-price__lead p {
	margin: 0;
}

.hotels-lp .hotels-price__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
	margin-bottom: 16px;
}

.hotels-lp .hotels-plan {
	display: flex;
	flex-direction: column;
	padding: 14px 24px 20px;
	border: 1px solid #e8eef8;
	border-radius: var(--radius);
	background: var(--color-white);
	box-shadow: 0 8px 24px rgba(26, 39, 68, 0.035);
}

.hotels-lp .hotels-plan--pro {
	border-color: #c8d9f5;
	box-shadow: 0 12px 32px rgba(26, 39, 68, 0.06);
}

.hotels-lp .hotels-plan__name {
	margin: 0 0 12px;
	color: var(--color-navy);
	font-family: "Laro", sans-serif;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.hotels-lp .hotels-plan__annual-label {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	color: var(--color-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
}

.hotels-lp .hotels-plan__annual-label-text {
	flex: 0 0 auto;
}

.hotels-lp .hotels-plan__annual-recommend {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--color-blue);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	white-space: nowrap;
}

.hotels-lp .hotels-plan__price-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hotels-lp .hotels-plan__price-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 6px;
	width: 100%;
}

/* Match 3 REASONS limited badge */
.hotels-lp .hotels-plan__offer-label {
	display: inline-block;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 4px 10px;
	border: 1px solid rgba(47, 107, 255, 0.28);
	border-radius: 4px;
	background: rgba(47, 107, 255, 0.06);
	color: var(--color-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	flex: 0 0 auto;
}

.hotels-lp .hotels-plan__usual {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15em 0.3em;
	margin: 0;
	color: var(--color-muted);
	line-height: 1.3;
	flex: 1 1 auto;
	min-width: 0;
}

.hotels-lp .hotels-plan__usual-label {
	margin: 0;
	color: var(--color-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.hotels-lp .hotels-plan__usual-num {
	color: var(--color-muted);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.hotels-lp .hotels-plan__usual-unit {
	color: var(--color-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

.hotels-lp .hotels-plan__usual .hotels-plan__tax {
	font-size: 11px;
}

.hotels-lp .hotels-plan__strike {
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}

.hotels-lp .hotels-plan__offer {
	margin: 0 0 12px;
	color: var(--color-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

.hotels-lp .hotels-plan__offer-num {
	font-size: clamp(36px, 3.2vw, 44px);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.hotels-lp .hotels-plan__tax {
	color: var(--color-muted);
	font-size: 12px;
	font-weight: 600;
}

.hotels-lp .hotels-plan__annual {
	margin-bottom: 12px;
	padding: 10px 12px;
	border: 1px solid var(--color-line);
	border-radius: 12px;
	background: #f8faff;
}

.hotels-lp .hotels-plan__annual-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2em 0.35em;
	margin: 0 0 4px;
	color: var(--color-navy);
	line-height: 1.2;
}

.hotels-lp .hotels-plan__annual-num {
	font-size: clamp(26px, 2.2vw, 32px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.hotels-lp .hotels-plan__annual-unit {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.hotels-lp .hotels-plan__annual-badge {
	margin: 0;
	color: var(--color-blue);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.45;
}

.hotels-lp .hotels-plan__includes {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.5;
}

.hotels-lp .hotels-plan__includes li + li {
	margin-top: 3px;
}

.hotels-lp .hotels-plan__includes-combo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.55em;
	row-gap: 0.15em;
}

.hotels-lp .hotels-plan--pro .hotels-plan__includes {
	margin-bottom: 12px;
}

.hotels-lp .hotels-plan--pro .hotels-plan__includes li + li {
	margin-top: 3px;
}

.hotels-lp .hotels-plan__includes-highlight {
	color: var(--color-navy);
	font-weight: 700;
}

.hotels-lp .hotels-plan__includes-plus {
	color: var(--color-blue);
	font-weight: 700;
}

.hotels-lp .hotels-plan__plus {
	margin-right: 2px;
	color: var(--color-blue);
	font-weight: 700;
}

.hotels-lp .hotels-plan__feature-en {
	display: block;
	margin: 4px 0 2px;
	color: var(--color-blue);
	font-family: "Laro", sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.hotels-lp .hotels-plan__feature-ja {
	display: block;
	color: var(--color-muted);
	font-size: 14px;
	font-weight: 600;
}

.hotels-lp .hotels-plan--demo {
	border-color: #c8d9f5;
	background: #f7faff;
}

.hotels-lp .hotels-plan__demo-name {
	margin-bottom: 16px;
	font-family: inherit;
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.hotels-lp .hotels-plan__demo-lead {
	margin: 0 0 16px;
	color: var(--color-text);
	font-size: 15px;
	line-height: 1.75;
}

.hotels-lp .hotels-plan__demo-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.hotels-lp .hotels-plan__demo-meta li {
	padding: 5px 9px;
	border: 1px solid rgba(47, 107, 255, 0.22);
	border-radius: 999px;
	background: rgba(47, 107, 255, 0.06);
	color: var(--color-blue);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.hotels-lp .hotels-plan__demo-recommend {
	margin: 0 0 10px;
	padding-top: 18px;
	border-top: 1px solid #dce6f5;
	color: var(--color-navy);
	font-size: 14px;
	font-weight: 700;
}

.hotels-lp .hotels-plan__demo-list {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	color: var(--color-muted);
	font-size: 13px;
	line-height: 1.6;
}

.hotels-lp .hotels-plan__demo-list li {
	position: relative;
	padding-left: 16px;
}

.hotels-lp .hotels-plan__demo-list li::before {
	position: absolute;
	top: 0.65em;
	left: 1px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-blue);
	content: "";
}

.hotels-lp .hotels-plan__demo-list li + li {
	margin-top: 6px;
}

.hotels-lp .hotels-plan__value {
	margin: 0 0 10px;
	padding-top: 8px;
	border-top: 1px solid var(--color-line);
}

.hotels-lp .hotels-plan__value-toggle {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 12px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid rgba(47, 107, 255, 0.16);
	border-radius: 12px;
	background: rgba(47, 107, 255, 0.04);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.hotels-lp .hotels-plan__value-toggle:hover {
	border-color: rgba(47, 107, 255, 0.3);
	background: rgba(47, 107, 255, 0.08);
}

.hotels-lp .hotels-plan__value-toggle:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

.hotels-lp .hotels-plan__value-toggle[aria-expanded="true"] {
	border-color: rgba(47, 107, 255, 0.28);
	background: rgba(47, 107, 255, 0.06);
}

.hotels-lp .hotels-plan__value-toggle-main {
	display: grid;
	gap: 1px;
	min-width: 0;
	flex: 1 1 auto;
}

.hotels-lp .hotels-plan__value-label {
	display: block;
	margin: 0;
	color: var(--color-blue);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.25;
}

.hotels-lp .hotels-plan__value-total {
	display: block;
	margin: 0;
	color: var(--color-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
}

.hotels-lp .hotels-plan__value-action {
	display: none;
	align-items: center;
	justify-content: flex-end;
	gap: 0.3em;
	flex: 0 0 auto;
	margin-bottom: 0.15em;
	color: var(--color-blue);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
}

.hotels-lp .hotels-plan__value.is-enhanced .hotels-plan__value-action {
	display: inline-flex;
}

.hotels-lp .hotels-plan__value-action-label--close {
	display: none;
}

.hotels-lp .hotels-plan__value-toggle[aria-expanded="true"] .hotels-plan__value-action-label--open {
	display: none;
}

.hotels-lp .hotels-plan__value-toggle[aria-expanded="true"] .hotels-plan__value-action-label--close {
	display: inline;
}

.hotels-lp .hotels-plan__value-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--color-blue);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.hotels-lp .hotels-plan__value-chevron::before {
	content: "⌄";
}

.hotels-lp .hotels-plan__value-toggle[aria-expanded="true"] .hotels-plan__value-chevron::before {
	content: "⌃";
}

.hotels-lp .hotels-plan__value-panel-inner {
	min-height: 0;
}

.hotels-lp .hotels-plan__value.is-enhanced .hotels-plan__value-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease;
}

.hotels-lp .hotels-plan__value.is-enhanced .hotels-plan__value-panel-inner {
	overflow: hidden;
}

.hotels-lp .hotels-plan__value.is-enhanced .hotels-plan__value-toggle[aria-expanded="true"] + .hotels-plan__value-panel {
	grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
	.hotels-lp .hotels-plan__value.is-enhanced .hotels-plan__value-panel {
		transition: none;
	}
}

.hotels-lp .hotels-plan__value-total-num {
	display: inline-block;
	margin: 0 0.04em;
	color: var(--color-muted);
	font-size: clamp(22px, 1.8vw, 26px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.05;
	vertical-align: -0.06em;
}

.hotels-lp .hotels-plan__value-total-mark {
	display: inline-block;
	margin-left: 0.2em;
	color: var(--color-muted);
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	vertical-align: 0.55em;
}

.hotels-lp .hotels-plan__value-list {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 4px;
	margin: 0;
	padding: 6px 0 0;
	list-style: none;
}

.hotels-lp .hotels-plan__value-item {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.hotels-lp .hotels-plan__value-item-label {
	color: var(--color-blue);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.hotels-lp .hotels-plan__value-row {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 0.2em;
	row-gap: 0.1em;
	margin: 0;
	line-height: 1.2;
}

.hotels-lp .hotels-plan__value-sign {
	color: var(--color-blue);
	font-size: clamp(18px, 1.55vw, 22px);
	font-weight: 700;
	line-height: 1;
	vertical-align: baseline;
	flex: 0 0 auto;
}

.hotels-lp .hotels-plan__value-arrow {
	display: inline-block;
	margin: 0 0.15em;
	color: #8a94a8;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	flex: 0 0 auto;
}

.hotels-lp .hotels-plan__value-prefix {
	color: var(--color-muted);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	flex: 0 0 auto;
}

.hotels-lp .hotels-plan__value-num {
	color: var(--color-muted);
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.1;
	white-space: nowrap;
	flex: 0 0 auto;
}

.hotels-lp .hotels-plan__value-unit {
	color: var(--color-muted);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	flex: 0 1 auto;
	white-space: nowrap;
}

.hotels-lp .hotels-plan__cta {
	margin-top: auto;
	width: 100%;
}

/* ご利用条件 */
.hotels-lp .hotels-price__terms {
	padding-top: 8px;
}

.hotels-lp .hotels-price__terms-title {
	margin: 0 0 14px;
	color: var(--color-navy);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.hotels-lp .hotels-price__terms-panel {
	display: block;
	height: auto;
	min-height: 0;
	padding: 20px 24px 16px;
	border: 1px solid #e8eef8;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.7);
}

.hotels-lp .hotels-price__terms-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 18px 32px;
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1px solid #e8eef8;
	height: auto;
	min-height: 0;
}

.hotels-lp .hotels-price__term {
	min-height: 0;
	height: auto;
}

.hotels-lp .hotels-price__term-label {
	margin: 0 0 5px;
	color: var(--color-blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.35;
}

.hotels-lp .hotels-price__term-body {
	color: var(--color-muted);
	font-size: 13px;
	line-height: 1.6;
}

.hotels-lp .hotels-price__term-body p {
	margin: 0;
}

.hotels-lp .hotels-price__term-body p + p {
	margin-top: 0.3em;
}

.hotels-lp .hotels-price__terms-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 20px;
	height: auto;
	min-height: 0;
}

.hotels-lp .hotels-price__terms-note {
	flex: 1 1 280px;
	margin: 0;
	color: var(--color-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.55;
}

.hotels-lp .hotels-price__terms-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--color-blue);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.4;
	white-space: nowrap;
}

.hotels-lp .hotels-price__terms-link-icon {
	display: block;
	width: 0.85em;
	height: 0.85em;
	flex: 0 0 auto;
}

.hotels-lp .hotels-price__terms-link:hover {
	text-decoration: underline;
}

/* ASK AI */
.hotels-lp .hotels-ask-ai {
	max-width: 860px;
	margin: 64px auto 0;
	padding-top: 56px;
	text-align: center;
}

.hotels-lp .hotels-ask-ai .hotels-section-label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: 0 auto 14px;
	gap: 8px;
}

.hotels-lp .hotels-ask-ai__sparkles {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.hotels-lp .hotels-ask-ai__heading {
	max-width: 760px;
	margin: 0 auto 18px;
	color: var(--color-navy);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.45;
}

.hotels-lp .hotels-ask-ai__heading-sp-break {
	display: none;
}

.hotels-lp .hotels-ask-ai__lead {
	max-width: 720px;
	margin: 0 auto 28px;
	color: var(--color-muted);
	font-size: 16px;
	line-height: 1.85;
}

.hotels-lp .hotels-ask-ai__lead p {
	margin: 0;
}

.hotels-lp .hotels-ask-ai__actions {
	align-items: stretch;
	justify-content: center;
}

.hotels-lp .hotels-ask-ai__actions .btn {
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	cursor: pointer;
}

.hotels-lp .hotels-ask-ai__actions .btn-primary {
	border-color: var(--color-blue);
}

.hotels-lp .hotels-ask-ai__chatgpt {
	gap: 10px;
}

.hotels-lp .hotels-ask-ai__chatgpt-icon {
	display: block;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.hotels-lp .hotels-ask-ai__actions .btn:focus-visible {
	outline: 3px solid rgba(47, 107, 255, 0.35);
	outline-offset: 3px;
}

.hotels-lp .hotels-ask-ai__helper,
.hotels-lp .hotels-ask-ai__status,
.hotels-lp .hotels-ask-ai__note {
	color: var(--color-muted);
	font-size: 12px;
	line-height: 1.65;
}

.hotels-lp .hotels-ask-ai__helper {
	margin: 12px 0 0;
}

.hotels-lp .hotels-ask-ai__status {
	margin: 10px 0 0;
	color: var(--color-blue);
	font-weight: 700;
}

.hotels-lp .hotels-ask-ai__status:empty {
	display: none;
}

.hotels-lp .hotels-ask-ai__status.is-error {
	color: #a52626;
}

.hotels-lp .hotels-ask-ai__manual-copy {
	max-width: 760px;
	margin: 16px auto 0;
}

.hotels-lp .hotels-ask-ai__manual-copy[hidden] {
	display: none;
}

.hotels-lp .hotels-ask-ai__manual-label {
	display: block;
	margin-bottom: 8px;
	color: var(--color-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}

.hotels-lp .hotels-ask-ai__prompt {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 14px;
	border: 1px solid rgba(47, 107, 255, 0.28);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.72);
	color: var(--color-text);
	font: inherit;
	font-size: 14px;
	line-height: 1.65;
	text-align: left;
	resize: vertical;
}

.hotels-lp .hotels-ask-ai__prompt:focus {
	border-color: var(--color-blue);
	outline: 3px solid rgba(47, 107, 255, 0.22);
	outline-offset: 2px;
}

.hotels-lp .hotels-ask-ai__note {
	margin: 20px 0 0;
}

/* ----------------------------------------
   18. START
---------------------------------------- */

.hotels-lp .hotels-start .hotels-section-heading,
.hotels-lp .hotels-start .hotels-heading-phrase {
	background: none;
	box-shadow: none;
	text-decoration: none;
}

.hotels-lp .hotels-start__intro {
	max-width: 760px;
	margin-bottom: 40px;
}

.hotels-lp .hotels-start__lead {
	margin: 0;
}

.hotels-lp .hotels-start__lead p {
	margin: 0;
	line-height: 1.85;
}

.hotels-lp .hotels-start__lead-note {
	display: inline;
	margin: 0;
	color: var(--color-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: inherit;
}

.hotels-lp .hotels-start__steps {
	--hotels-chevron: 20px;
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-bottom: 0;
}

.hotels-lp .hotels-start__step {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	box-sizing: border-box;
	padding: 22px calc(var(--hotels-chevron) + 18px) 22px 22px;
	background: rgba(47, 107, 255, 0.045);
	clip-path: polygon(
		0 0,
		calc(100% - var(--hotels-chevron)) 0,
		100% 50%,
		calc(100% - var(--hotels-chevron)) 100%,
		0 100%,
		var(--hotels-chevron) 50%
	);
	filter: drop-shadow(0 0 0.6px rgba(47, 107, 255, 0.28));
}

.hotels-lp .hotels-start__step:first-child {
	padding-left: 22px;
	clip-path: polygon(
		0 0,
		calc(100% - var(--hotels-chevron)) 0,
		100% 50%,
		calc(100% - var(--hotels-chevron)) 100%,
		0 100%
	);
}

.hotels-lp .hotels-start__step:not(:first-child) {
	margin-left: calc(var(--hotels-chevron) * -0.55);
	padding-left: calc(var(--hotels-chevron) + 18px);
}

.hotels-lp .hotels-start__step-label {
	margin: 0 0 10px;
	color: var(--color-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
}

.hotels-lp .hotels-start__step-label span {
	letter-spacing: 0.14em;
}

.hotels-lp .hotels-start__step-title {
	margin: 0 0 10px;
	color: var(--color-navy);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.hotels-lp .hotels-start__step-text {
	margin: 0;
	color: var(--color-muted);
	font-size: 13px;
	line-height: 1.7;
}

.hotels-lp .hotels-start__step-note {
	display: inline;
	margin-left: 0.15em;
	color: #8a94a8;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.6;
}

/* ----------------------------------------
   19. FAQ
---------------------------------------- */

.hotels-lp .hotels-faq__content {
	max-width: none;
	margin-inline: 0;
	width: 100%;
}

.hotels-lp .hotels-faq__intro {
	margin-bottom: 40px;
}

.hotels-lp .hotels-faq__groups {
	display: grid;
	gap: 40px;
	width: 100%;
}

.hotels-lp .hotels-faq__group-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	color: var(--color-blue);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.35;
}

.hotels-lp .hotels-faq__group-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--color-blue);
}

.hotels-lp .hotels-faq__group-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.hotels-lp .hotels-faq__group-icon:has(.hotels-faq__group-icon-svg--gear) {
	width: 26px;
	height: 26px;
}

.hotels-lp .hotels-faq__group-icon-svg--gear {
	width: 26px;
	height: 26px;
}

.hotels-lp .hotels-faq__group-label {
	display: inline-block;
}

.hotels-lp .hotels-faq__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 12px;
	max-width: none;
	width: 100%;
}

.hotels-lp .hotels-faq__item {
	align-self: start;
	height: auto;
	border: 1px solid #e8eef8;
	border-radius: 12px;
	background: var(--color-white);
	overflow: hidden;
}

.hotels-lp .hotels-faq__question {
	margin: 0;
}

.hotels-lp .hotels-faq__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	margin: 0;
	padding: 22px 24px;
	border: 0;
	background: transparent;
	color: var(--color-navy);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

.hotels-lp .hotels-faq__icon {
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

.hotels-lp .hotels-faq__icon::before,
.hotels-lp .hotels-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background: var(--color-blue);
	transform: translate(-50%, -50%);
}

.hotels-lp .hotels-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.hotels-lp .hotels-faq__button.is-open .hotels-faq__icon::after,
.hotels-lp .hotels-faq__button[aria-expanded="true"] .hotels-faq__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}

.hotels-lp .hotels-faq__panel[hidden] {
	display: none;
}

.hotels-lp .hotels-faq__answer {
	padding: 0 24px 22px;
	color: var(--color-muted);
	font-size: 16px;
	line-height: 1.7;
}

.hotels-lp .hotels-faq__answer p {
	margin: 0 0 0.35em;
}

.hotels-lp .hotels-faq__answer p:last-child {
	margin-bottom: 0;
}

.hotels-lp .hotels-faq__answer a {
	color: var(--color-blue);
	font-weight: 700;
}

/* ----------------------------------------
   20. FINAL CTA
---------------------------------------- */

.hotels-lp .hotels-final-cta__inner {
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
}

.hotels-lp .hotels-final-cta__label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.35em 0.45em;
	margin-bottom: 18px;
}

.hotels-lp .hotels-final-cta__label-prefix {
	white-space: nowrap;
}

.hotels-lp .hotels-final-cta .hotels-section-label {
	justify-content: center;
}

.hotels-lp .hotels-final-cta .hotels-brand {
	color: #9fbdff;
	font-size: inherit;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.hotels-lp .hotels-final-cta__body {
	max-width: 640px;
	margin: 0 auto 40px;
}

.hotels-lp .hotels-final-cta__body p {
	margin: 0;
}

.hotels-lp .hotels-final-cta__body p + p {
	margin-top: 1em;
}

.hotels-lp .hotels-final-cta__actions {
	justify-content: center;
}

.hotels-lp .hotels-final-cta__primary {
	background: var(--color-blue);
	color: var(--color-white);
}

.hotels-lp .hotels-final-cta__primary:hover {
	background: var(--color-blue-dark);
}

.hotels-lp .hotels-final-cta__secondary {
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: transparent;
	color: var(--color-white);
}

.hotels-lp .hotels-final-cta__secondary:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* Final CTA heading: per-character reveal */
.hotels-lp .hotels-final-cta--prepared .hotels-final-cta__char {
	display: inline-block;
	opacity: 0;
	transform: translateY(6px);
}

.hotels-lp .hotels-final-cta--prepared .hotels-final-cta__char--space {
	min-width: 0.32em;
}

.hotels-lp .hotels-final-cta.is-heading-animate .hotels-final-cta__char {
	animation: hotelsFinalCtaCharIn 0.42s ease forwards;
}

@keyframes hotelsFinalCtaCharIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hotels-lp .hotels-final-cta--prepared .hotels-final-cta__char,
	.hotels-lp .hotels-final-cta.is-heading-animate .hotels-final-cta__char {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ----------------------------------------
   13. Responsive
---------------------------------------- */

@media (max-width: 1024px) {
	.hotels-lp .l-container {
		width: min(calc(100% - 40px), var(--max));
	}

	.hotels-lp .hotels-hero {
		min-height: 0;
		padding-top: calc(var(--header-h) + 24px);
		padding-bottom: 40px;
	}

	.hotels-lp .hotels-hero__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.hotels-lp .hotels-hero__chat {
		right: 0;
		top: 28%;
		bottom: auto;
		width: min(44%, 210px);
	}

	.hotels-lp .hotels-hero__stack {
		padding-bottom: 18%;
	}

	.hotels-lp .hotels-hero__visual {
		margin-top: 8px;
	}

	.hotels-lp .hotels-problem__grid {
		grid-template-columns: 1fr;
	}

	.hotels-lp .hotels-concierge__header {
		margin-bottom: 28px;
	}

	.hotels-lp .hotels-concierge-showcase {
		grid-template-columns: 1fr;
		grid-template-areas:
			"heading"
			"body"
			"panels"
			"tabs";
		row-gap: 0;
		column-gap: 0;
		align-items: start;
	}

	.hotels-lp .hotels-concierge-showcase__heading {
		margin-bottom: 16px;
	}

	.hotels-lp .hotels-concierge-showcase__body {
		margin-bottom: 28px;
	}

	.hotels-lp .hotels-concierge-showcase__panels {
		margin-bottom: 28px;
		height: auto;
		align-self: start;
	}

	.hotels-lp .hotels-concierge-showcase__placeholder {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.hotels-lp .hotels-concierge-showcase.is-enhanced .hotels-concierge-showcase__panels {
		aspect-ratio: 4 / 3;
		height: auto;
		min-height: 0;
	}

	.hotels-lp .hotels-concierge-showcase.is-enhanced .hotels-concierge-showcase__panel {
		height: auto;
	}

	.hotels-lp .hotels-concierge-showcase.is-enhanced .hotels-concierge-showcase__placeholder {
		height: 100%;
		aspect-ratio: auto;
	}

	.hotels-lp .hotels-concierge-showcase__panel--media .hotels-concierge-showcase__media {
		width: calc(100% - 8px);
		max-width: calc(100% - 8px);
		height: auto;
		max-height: calc(100% - 8px);
		object-fit: contain;
	}

	.hotels-lp .hotels-concierge-showcase__tabs {
		min-height: 0;
	}

	.hotels-lp .hotels-front-desk-showcase {
		grid-template-columns: 1fr;
		grid-template-areas:
			"heading"
			"body"
			"panels"
			"tabs";
		row-gap: 0;
		column-gap: 0;
		align-items: start;
	}

	.hotels-lp .hotels-front-desk-showcase__heading {
		margin-bottom: 16px;
	}

	.hotels-lp .hotels-front-desk-showcase__body {
		margin-bottom: 28px;
	}

	.hotels-lp .hotels-front-desk-showcase__panels {
		margin-bottom: 28px;
		height: auto;
		align-self: start;
	}

	.hotels-lp .hotels-front-desk-showcase__placeholder {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.hotels-lp .hotels-front-desk-showcase.is-enhanced .hotels-front-desk-showcase__panels {
		aspect-ratio: 4 / 3;
		height: auto;
		min-height: 0;
	}

	.hotels-lp .hotels-front-desk-showcase.is-enhanced .hotels-front-desk-showcase__panel {
		height: auto;
	}

	.hotels-lp .hotels-front-desk-showcase.is-enhanced .hotels-front-desk-showcase__placeholder {
		height: 100%;
		aspect-ratio: auto;
	}

	.hotels-lp .hotels-front-desk-showcase__panel--media .hotels-front-desk-showcase__media {
		width: calc(100% - 8px);
		max-width: calc(100% - 8px);
		height: auto;
		max-height: calc(100% - 8px);
		object-fit: contain;
	}

	.hotels-lp .hotels-front-desk-showcase__tabs {
		min-height: 0;
	}

	.hotels-lp .hotels-understand-showcase {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"heading"
			"body"
			"panels"
			"tabs";
		row-gap: 0;
		column-gap: 0;
		align-items: start;
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-understand .hotels-section-heading {
		font-size: clamp(26px, 7vw, 32px);
		letter-spacing: 0.01em;
		word-break: normal;
		overflow-wrap: break-word;
	}

	.hotels-lp .hotels-understand-showcase__heading .hotels-heading-phrase {
		white-space: normal;
	}

	.hotels-lp .hotels-understand-showcase__heading {
		margin-bottom: 16px;
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-understand-showcase__body {
		margin-bottom: 28px;
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-understand-showcase__panels {
		margin-bottom: 28px;
		height: auto;
		align-self: start;
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-understand-showcase__placeholder {
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.hotels-lp .hotels-understand-showcase__placeholder-label {
		font-size: clamp(18px, 5.5vw, 28px);
		letter-spacing: 0.04em;
		max-width: 100%;
		padding: 0 8px;
		box-sizing: border-box;
		text-align: center;
		overflow-wrap: break-word;
	}

	.hotels-lp .hotels-understand-showcase.is-enhanced .hotels-understand-showcase__panels {
		aspect-ratio: 4 / 3;
		height: auto;
		min-height: 0;
	}

	.hotels-lp .hotels-understand-showcase.is-enhanced .hotels-understand-showcase__panel {
		height: auto;
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-understand-showcase.is-enhanced .hotels-understand-showcase__placeholder {
		height: 100%;
		aspect-ratio: auto;
	}

	.hotels-lp .hotels-understand-showcase__panel--media .hotels-understand-showcase__media {
		width: calc(100% - 8px);
		max-width: calc(100% - 8px);
		height: auto;
		max-height: calc(100% - 8px);
		object-fit: contain;
	}

	.hotels-lp .hotels-understand-showcase__tabs {
		min-height: 0;
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-understand-showcase__tab {
		max-width: 100%;
		box-sizing: border-box;
	}

	.hotels-lp .hotels-understand-showcase__desc {
		max-width: 100%;
		box-sizing: border-box;
	}

	.hotels-lp .hotels-attract-showcase {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"heading"
			"body"
			"panels"
			"tabs";
		row-gap: 0;
		column-gap: 0;
		align-items: start;
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-portal__layout {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		row-gap: 0;
	}

	/* SP order: heading → body → image → tags */
	.hotels-lp .hotels-portal__copy {
		display: contents;
	}

	.hotels-lp .hotels-portal__heading {
		order: 1;
		white-space: normal;
	}

	.hotels-lp .hotels-portal__body {
		order: 2;
	}

	.hotels-lp .hotels-portal__media {
		order: 3;
		margin-top: 28px;
		width: 100%;
	}

	.hotels-lp .hotels-portal__list {
		order: 4;
		margin-top: 24px;
		gap: 8px;
	}

	.hotels-lp .hotels-portal__list li {
		padding: 6px 10px;
		font-size: 12px;
	}

	.hotels-lp .hotels-portal__frame {
		padding: 8px;
		aspect-ratio: auto;
		height: auto;
		min-height: 0;
	}

	.hotels-lp .hotels-portal__image {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.hotels-lp .hotels-attract-showcase__copy {
		display: contents;
	}

	.hotels-lp .hotels-attract .hotels-section-heading {
		font-size: clamp(26px, 7vw, 32px);
		letter-spacing: 0.01em;
		word-break: normal;
		overflow-wrap: break-word;
	}

	.hotels-lp .hotels-attract-showcase__heading .hotels-heading-phrase {
		white-space: normal;
	}

	.hotels-lp h2.hotels-attract-showcase__heading,
	.hotels-lp .hotels-attract-showcase__heading {
		grid-area: heading;
		margin-bottom: 16px;
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-attract-showcase__body {
		grid-area: body;
		margin-bottom: 28px;
		width: 100%;
		max-width: 100%;
		line-height: 1.7;
	}

	.hotels-lp .hotels-attract-showcase__tabs {
		grid-area: tabs;
	}

	.hotels-lp .hotels-attract-showcase__panels {
		grid-area: panels;
		margin-bottom: 28px;
		height: auto;
		align-self: start;
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-attract-showcase__placeholder {
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.hotels-lp .hotels-attract-showcase__placeholder-label {
		font-size: clamp(18px, 5.5vw, 28px);
		letter-spacing: 0.04em;
		max-width: 100%;
		padding: 0 8px;
		box-sizing: border-box;
		text-align: center;
		overflow-wrap: break-word;
	}

	.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__panels {
		aspect-ratio: 4 / 3;
		height: auto;
		min-height: 0;
	}

	.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__panel {
		height: auto;
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-attract-showcase.is-enhanced .hotels-attract-showcase__placeholder {
		height: 100%;
		aspect-ratio: auto;
	}

	.hotels-lp .hotels-attract-showcase__panel--media .hotels-attract-showcase__media {
		width: calc(100% - 8px);
		max-width: calc(100% - 8px);
		height: auto;
		max-height: calc(100% - 8px);
		object-fit: contain;
	}

	.hotels-lp .hotels-attract-showcase__tabs {
		min-height: 0;
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-attract-showcase__tab {
		max-width: 100%;
		box-sizing: border-box;
	}

	.hotels-lp .hotels-attract-showcase__desc {
		max-width: 100%;
		box-sizing: border-box;
	}

	.hotels-lp .hotels-why__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: 16px;
	}

	.hotels-lp .hotels-why__card {
		display: flex;
		flex-direction: column;
		grid-row: auto;
		height: auto;
	}

	.hotels-lp .hotels-why .hotels-section-heading {
		white-space: normal;
	}

	.hotels-lp .hotels-price__grid {
		grid-template-columns: 1fr;
	}

	.hotels-lp .hotels-start__intro {
		margin-bottom: 32px;
	}

	.hotels-lp .hotels-start__steps {
		--hotels-chevron: 14px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
		column-gap: 0;
		row-gap: 12px;
	}

	.hotels-lp .hotels-start__step {
		padding: 16px calc(var(--hotels-chevron) + 12px) 16px 14px;
	}

	.hotels-lp .hotels-start__step:nth-child(odd) {
		margin-left: 0;
		padding-left: 14px;
		clip-path: polygon(
			0 0,
			calc(100% - var(--hotels-chevron)) 0,
			100% 50%,
			calc(100% - var(--hotels-chevron)) 100%,
			0 100%
		);
	}

	.hotels-lp .hotels-start__step:nth-child(even) {
		margin-left: calc(var(--hotels-chevron) * -0.55);
		padding-left: calc(var(--hotels-chevron) + 12px);
		clip-path: polygon(
			0 0,
			calc(100% - var(--hotels-chevron)) 0,
			100% 50%,
			calc(100% - var(--hotels-chevron)) 100%,
			0 100%,
			var(--hotels-chevron) 50%
		);
	}

	.hotels-lp .hotels-start__step-label {
		margin-bottom: 6px;
		font-size: 11px;
	}

	.hotels-lp .hotels-start__step-title {
		margin-bottom: 6px;
		font-size: 15px;
		min-height: 0;
		line-height: 1.35;
	}

	.hotels-lp .hotels-start__step-text {
		font-size: 12px;
		line-height: 1.6;
	}

	.hotels-lp .hotels-start__step-note {
		display: inline;
		margin-left: 0.1em;
		font-size: 10px;
	}

	.hotels-lp .hotels-cycle__diagram {
		width: min(100%, 360px);
	}

	.hotels-lp .hotels-cycle__node {
		width: clamp(84px, 26vw, 104px);
		padding: 8px 8px;
	}

	.hotels-lp .hotels-cycle__en {
		margin-bottom: 4px;
		font-size: clamp(7px, 2.2vw, 9px);
		letter-spacing: 0.04em;
	}

	.hotels-lp .hotels-cycle__ja {
		font-size: clamp(18px, 5.2vw, 24px);
	}

	.hotels-lp .hotels-cycle__hub-brand {
		font-size: clamp(10px, 2.8vw, 12px);
		letter-spacing: 0.1em;
	}

	.hotels-lp .hotels-cycle__hub-note {
		font-size: clamp(8px, 2.2vw, 10px);
		letter-spacing: 0.12em;
	}
}

@media (max-width: 768px) {
	.hotels-lp {
		--hotels-category-indicator-h: 36px;
	}

	.hotels-lp .l-container {
		width: calc(100% - 32px);
	}

	.hotels-lp .hotels-section {
		padding: 84px 0;
		scroll-margin-top: calc(var(--header-h) + 12px);
	}

	.hotels-lp .hotels-concierge,
	.hotels-lp .hotels-front-desk,
	.hotels-lp .hotels-understand,
	.hotels-lp .hotels-attract {
		scroll-margin-top: calc(var(--header-h) + var(--hotels-category-indicator-h) + 12px);
	}

	/* #price: SP section padding-top is 84px; keep ~32px under header */
	.hotels-lp #price {
		scroll-margin-top: calc(var(--header-h) + 32px - 84px);
	}

	.hotels-lp .hotels-hero {
		min-height: 0;
		padding-top: calc(var(--header-h) + 16px);
		padding-bottom: 36px;
	}

	.site-header .site-logo .site-logo__text.brand-name {
		font-size: 20px !important;
		letter-spacing: 0.03em;
	}

	.hotels-lp .hotels-cycle,
	.hotels-lp .hotels-final-cta {
		padding: 88px 0;
	}

	.hotels-lp .hotels-section-heading {
		font-size: 28px;
	}

	/* HOW TO START: keep title as exactly 2 lines */
	.hotels-lp .hotels-start .hotels-section-heading {
		font-size: clamp(24px, 7vw, 28px);
		letter-spacing: 0;
		line-height: 1.4;
	}

	.hotels-lp .hotels-start .hotels-heading-phrase {
		display: block;
		white-space: nowrap;
	}

	/* PRICE: keep title as exactly 2 lines */
	.hotels-lp .hotels-price .hotels-section-heading {
		font-size: clamp(24px, 7vw, 28px);
		line-height: 1.4;
	}

	.hotels-lp .hotels-price .hotels-heading-phrase {
		display: block;
		white-space: nowrap;
	}

	/* FINAL CTA: keep title as exactly 2 lines (char animation intact) */
	.hotels-lp .hotels-final-cta .hotels-section-heading {
		font-size: clamp(22px, 6.4vw, 26px);
		line-height: 1.4;
	}

	.hotels-lp .hotels-final-cta .hotels-heading-phrase {
		display: block;
		white-space: nowrap;
	}

	/* CYCLE: keep each headline sentence on one line at ~375–430px */
	.hotels-lp .hotels-cycle .hotels-section-heading {
		font-size: 21px;
		line-height: 1.4;
	}

	.hotels-lp .hotels-cycle .hotels-heading-phrase {
		white-space: nowrap;
	}

	/* Concierge: keep first heading line intact; ~30px when width allows */
	.hotels-lp .hotels-concierge .hotels-section-heading {
		font-size: clamp(28px, 7.6vw, 32px);
	}

	.hotels-lp .hotels-service-name {
		font-size: 20px;
		padding: 11px 19px;
	}

	.hotels-lp .hotels-concierge-showcase__tab {
		padding: 12px 0 12px 12px;
	}

	.hotels-lp .hotels-concierge-showcase__title {
		font-size: 15px;
	}

	.hotels-lp .hotels-concierge-showcase__desc {
		padding-left: 12px;
		padding-bottom: 12px;
	}

	.hotels-lp .hotels-concierge-showcase__desc p {
		font-size: 13px;
		line-height: 1.65;
	}

	.hotels-lp .hotels-concierge-showcase__item.is-active .hotels-concierge-showcase__tab {
		padding-bottom: 6px;
	}

	.hotels-lp .hotels-section-lead,
	.hotels-lp .hotels-section-body {
		font-size: 16px;
		margin-bottom: 40px;
	}

	.hotels-lp .hotels-section-body.hotels-concierge-showcase__body,
	.hotels-lp .hotels-section-body.hotels-front-desk-showcase__body,
	.hotels-lp .hotels-section-body.hotels-understand-showcase__body,
	.hotels-lp .hotels-section-body.hotels-attract-showcase__body {
		margin-bottom: 28px;
		font-size: 15px;
		line-height: 1.7;
	}

	.hotels-lp .hotels-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hotels-lp .hotels-actions .btn {
		width: 100%;
	}

	.hotels-lp .hotels-hero__offer {
		margin-bottom: 16px;
	}

	.hotels-lp .hotels-hero__offer-part {
		padding: 5px 10px;
		font-size: 12px;
	}

	.hotels-lp .hotels-hero__offer-part--strong {
		padding-right: 14px;
	}

	.hotels-lp .hotels-hero__offer-mark {
		top: 2px;
		right: 4px;
		font-size: 8px;
	}

	.hotels-lp .hotels-hero-footnote {
		padding-top: 12px;
		padding-bottom: 2px;
	}

	.hotels-lp .hotels-hero-footnote__text {
		font-size: 10px;
		line-height: 1.5;
		max-width: min(32em, 100%);
	}

	.hotels-lp .hotels-hero__title {
		margin-bottom: 16px;
		font-size: 19px;
		line-height: 1.5;
	}

	.hotels-lp .hotels-hero__title-price,
	.hotels-lp .hotels-hero__title-ai,
	.hotels-lp .hotels-hero__char--price,
	.hotels-lp .hotels-hero__char--ai {
		font-size: 30px;
		vertical-align: baseline;
	}

	.hotels-lp .hotels-hero__title-unit,
	.hotels-lp .hotels-hero__char--unit {
		font-size: 0.85em;
		vertical-align: baseline;
	}

	.hotels-lp .hotels-hero__lead {
		max-width: none;
		margin-bottom: 24px;
		font-size: 15px;
		line-height: 1.75;
	}

	.hotels-lp .hotels-hero__stack {
		/* Extra room: Chat starts higher and extends further below Dashboard */
		padding-bottom: 32%;
	}

	.hotels-lp .hotels-hero__visual {
		margin-top: 12px;
	}

	.hotels-lp .hotels-hero__chat {
		right: 0;
		/* Was 27% (vs 1024px's 28%) — only ~5% delta, ~10px on short stack.
		   8% moves Chat ~40–50px+ up within stack for clear overlap mid-Dashboard. */
		top: 8%;
		bottom: auto;
		width: min(46%, 210px);
	}

	.hotels-lp .hotels-problem .hotels-section-heading {
		max-width: none;
		margin-bottom: 40px;
		font-size: clamp(22px, 5.9vw, 26px);
		line-height: 1.4;
	}

	.hotels-lp .hotels-problem .hotels-section-heading .hotels-heading-phrase {
		display: block;
		white-space: nowrap;
	}

	.hotels-lp .hotels-problem__card {
		padding: 56px 28px 36px;
	}

	.hotels-lp .hotels-problem__head {
		margin-bottom: 14px;
	}

	.hotels-lp .hotels-problem__num {
		left: -2px;
		font-size: 56px;
	}

	.hotels-lp .hotels-problem__card:nth-child(1) .hotels-problem__num {
		top: -22px;
	}

	.hotels-lp .hotels-problem__card:nth-child(2) .hotels-problem__num,
	.hotels-lp .hotels-problem__card:nth-child(3) .hotels-problem__num {
		top: -26px;
	}

	.hotels-lp .hotels-problem__title {
		font-size: clamp(20px, 5.4vw, 23px);
		line-height: 1.45;
	}

	.hotels-lp .hotels-problem {
		padding-bottom: 56px;
	}

	.hotels-lp .hotels-problem__bridge {
		margin-top: 40px;
		padding: 4px 0 0;
		font-size: 18px;
		line-height: 1.65;
		letter-spacing: 0;
		text-align: center;
	}

	.hotels-lp .hotels-problem__bridge-accent {
		align-items: center;
	}

	.hotels-lp .hotels-problem__bridge-chevron {
		justify-content: center;
		margin-top: 14px;
	}

	.hotels-lp .hotels-problem__bridge-chevron-icon {
		width: 20px;
		height: 12px;
	}

	.hotels-lp .hotels-visual-slot--tall {
		max-width: 240px;
	}

	.hotels-lp .hotels-front-desk__intro {
		margin-bottom: 28px;
	}

	.hotels-lp .hotels-front-desk .hotels-section-heading {
		font-size: clamp(28px, 7.6vw, 32px);
	}

	.hotels-lp .hotels-front-desk-showcase__tab {
		padding: 12px 0 12px 12px;
	}

	.hotels-lp .hotels-front-desk-showcase__title {
		font-size: 15px;
	}

	.hotels-lp .hotels-front-desk-showcase__desc {
		padding-left: 12px;
		padding-bottom: 12px;
	}

	.hotels-lp .hotels-front-desk-showcase__desc p {
		font-size: 13px;
		line-height: 1.65;
	}

	.hotels-lp .hotels-front-desk-showcase__item.is-active .hotels-front-desk-showcase__tab {
		padding-bottom: 6px;
	}

	.hotels-lp .hotels-understand__intro,
	.hotels-lp .hotels-attract__intro {
		margin-bottom: 28px;
	}

	/* Insights / Attract: keep each headline phrase on one line at ~375–430px */
	.hotels-lp .hotels-understand .hotels-section-heading {
		font-size: 23px;
		line-height: 1.4;
	}

	.hotels-lp .hotels-understand-showcase__heading .hotels-heading-phrase {
		white-space: nowrap;
	}

	.hotels-lp .hotels-attract .hotels-section-heading {
		font-size: 22.5px;
		line-height: 1.4;
	}

	.hotels-lp .hotels-attract-showcase__heading .hotels-heading-phrase {
		white-space: nowrap;
	}

	.hotels-lp .hotels-understand-showcase__tab,
	.hotels-lp .hotels-attract-showcase__tab {
		padding: 12px 0 12px 12px;
	}

	.hotels-lp .hotels-understand-showcase__title,
	.hotels-lp .hotels-attract-showcase__title {
		font-size: 15px;
	}

	.hotels-lp .hotels-understand-showcase__desc,
	.hotels-lp .hotels-attract-showcase__desc {
		padding-left: 12px;
		padding-bottom: 12px;
	}

	.hotels-lp .hotels-understand-showcase__desc p,
	.hotels-lp .hotels-attract-showcase__desc p {
		font-size: 13px;
		line-height: 1.65;
	}

	.hotels-lp .hotels-understand-showcase__item.is-active .hotels-understand-showcase__tab,
	.hotels-lp .hotels-attract-showcase__item.is-active .hotels-attract-showcase__tab {
		padding-bottom: 6px;
	}

	.hotels-lp .hotels-cycle__intro {
		margin-bottom: 48px;
	}

	.hotels-lp .hotels-why__intro {
		margin-bottom: 28px;
	}

	.hotels-lp .hotels-why .hotels-section-heading {
		font-size: 28px;
		line-height: 1.4;
		white-space: normal;
	}

	.hotels-lp .hotels-why__heading-num {
		font-size: 1.28em;
	}

	.hotels-lp .hotels-why__card {
		padding: 40px 24px 24px;
	}

	.hotels-lp .hotels-why__head {
		margin-bottom: 12px;
	}

	.hotels-lp .hotels-why__num {
		left: -2px;
		top: -22px;
		font-size: 56px;
	}

	.hotels-lp .hotels-why__en {
		margin-bottom: 8px;
	}

	.hotels-lp .hotels-why__title {
		font-size: clamp(20px, 5.2vw, 23px);
		line-height: 1.4;
	}

	.hotels-lp .hotels-why__card--allinone .hotels-why__title {
		font-size: clamp(20px, 5.2vw, 23px);
	}

	.hotels-lp .hotels-why__card--allinone .hotels-why__title .hotels-heading-phrase {
		white-space: normal;
	}

	.hotels-lp .hotels-why__text {
		margin-bottom: 14px;
		font-size: 14px;
		line-height: 1.65;
	}

	.hotels-lp .hotels-why__combo {
		margin-bottom: 6px;
		font-size: 12px;
	}

	.hotels-lp .hotels-why__combo-desc {
		margin-bottom: 12px;
		font-size: 13px;
		line-height: 1.6;
	}

	.hotels-lp .hotels-why__foot {
		margin-top: 0;
		min-height: 0;
		padding-top: 12px;
	}

	.hotels-lp .hotels-why__blocks {
		gap: 10px;
	}

	.hotels-lp .hotels-why__block-ja {
		font-size: 13px;
	}

	.hotels-lp .hotels-why__limited {
		font-size: 12px;
	}

	/* SP only: air between VALUE badge and the divider (PC unchanged) */
	.hotels-lp .hotels-why__top .hotels-why__limited {
		margin-bottom: 22px;
	}

	.hotels-lp .hotels-why__metrics {
		gap: 12px;
	}

	.hotels-lp .hotels-why__metric-num {
		font-size: 22px;
	}

	.hotels-lp .hotels-why__metric-sign {
		font-size: 20px;
	}

	.hotels-lp .hotels-why__metric-unit {
		font-size: 13px;
	}

	.hotels-lp .hotels-why__planned {
		margin-top: 12px;
		padding-top: 10px;
	}

	.hotels-lp .hotels-why__planned-text {
		font-size: 11px;
		white-space: normal;
	}

	.hotels-lp .hotels-plan {
		padding: 10px 18px 18px;
	}

	.hotels-lp .hotels-plan__value-toggle {
		padding: 7px 10px;
		gap: 6px 8px;
	}

	.hotels-lp .hotels-plan__value-action {
		font-size: 9px;
	}

	.hotels-lp .hotels-price__intro {
		margin-bottom: 28px;
	}

	.hotels-lp .hotels-plan__offer-num {
		font-size: 36px;
	}

	.hotels-lp .hotels-plan__usual-num {
		font-size: 13px;
	}

	.hotels-lp .hotels-plan__price-meta {
		gap: 4px 8px;
		margin-bottom: 5px;
	}

	.hotels-lp .hotels-plan__annual-num {
		font-size: 28px;
	}

	.hotels-lp .hotels-plan__value-total-num {
		font-size: 24px;
	}

	.hotels-lp .hotels-plan__value-num {
		font-size: 20px;
	}

	.hotels-lp .hotels-plan__value-row--convert {
		flex-wrap: nowrap;
		max-width: 100%;
		column-gap: 0.12em;
	}

	.hotels-lp .hotels-plan__value-row--convert .hotels-plan__value-sign {
		font-size: 15px;
	}

	.hotels-lp .hotels-plan__value-row--convert .hotels-plan__value-num {
		font-size: 15px;
		font-weight: 700;
	}

	.hotels-lp .hotels-plan__value-row--convert .hotels-plan__value-unit {
		font-size: 9px;
		white-space: nowrap;
	}

	.hotels-lp .hotels-plan__value-row--convert .hotels-plan__value-arrow {
		font-size: 10px;
		margin: 0 0.06em;
	}

	.hotels-lp .hotels-price__terms-panel {
		padding: 16px 16px 14px;
		height: auto;
		min-height: 0;
	}

	.hotels-lp .hotels-price__terms-grid {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 14px;
		margin-bottom: 12px;
		padding-bottom: 12px;
		height: auto;
		min-height: 0;
	}

	.hotels-lp .hotels-price__term-label {
		margin-bottom: 4px;
	}

	.hotels-lp .hotels-price__term-body {
		font-size: 13px;
		line-height: 1.55;
	}

	.hotels-lp .hotels-price__terms-footer {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 10px;
		height: auto;
		min-height: 0;
	}

	.hotels-lp .hotels-price__terms-note {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}

	.hotels-lp .hotels-price__terms-link {
		align-self: flex-end;
		margin-left: 0;
	}

	.hotels-lp .hotels-ask-ai {
		max-width: 100%;
		margin-top: 48px;
		padding-top: 40px;
	}

	.hotels-lp .hotels-ask-ai .hotels-section-label {
		margin-bottom: 12px;
	}

	.hotels-lp .hotels-ask-ai__heading {
		margin-bottom: 16px;
		font-size: clamp(24px, 7vw, 30px);
		line-height: 1.45;
	}

	.hotels-lp .hotels-ask-ai__heading-sp-break {
		display: block;
	}

	.hotels-lp .hotels-ask-ai__heading-keep {
		white-space: nowrap;
	}

	.hotels-lp .hotels-ask-ai__lead {
		margin-bottom: 24px;
		font-size: 15px;
		line-height: 1.75;
	}

	.hotels-lp .hotels-ask-ai__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.hotels-lp .hotels-ask-ai__actions .btn {
		width: 100%;
		max-width: 100%;
	}

	.hotels-lp .hotels-ask-ai__helper {
		margin-top: 10px;
	}

	.hotels-lp .hotels-plan__value-sign {
		font-size: 20px;
	}

	.hotels-lp .hotels-faq__groups {
		gap: 32px;
	}

	.hotels-lp .hotels-faq__group-title {
		gap: 8px;
		margin-bottom: 14px;
		font-size: 19px;
	}

	.hotels-lp .hotels-faq__group-icon {
		width: 22px;
		height: 22px;
	}

	.hotels-lp .hotels-faq__group-icon svg {
		width: 20px;
		height: 20px;
	}

	.hotels-lp .hotels-faq__group-icon:has(.hotels-faq__group-icon-svg--gear) {
		width: 24px;
		height: 24px;
	}

	.hotels-lp .hotels-faq__group-icon-svg--gear {
		width: 24px;
		height: 24px;
	}

	.hotels-lp .hotels-faq__list {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.hotels-lp .hotels-faq__button {
		font-size: 16px;
		padding: 18px 16px;
		gap: 16px;
	}

	.hotels-lp .hotels-faq__answer {
		padding: 0 16px 18px;
	}

	.hotels-lp .hotels-final-cta__label {
		font-size: 12px;
		letter-spacing: 0.12em;
	}

	.hotels-lp .hotels-final-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hotels-lp .hotels-final-cta__actions .btn {
		width: 100%;
	}

}