/* ============================================================
   JTB CHINA 2026 Visual Refresh — templates.css
   T-top / T-list / T-detail / T-contact template layouts
   ============================================================ */

/* ---------- T-top : homepage hero ---------- */
.top-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: auto;
	min-height: 720px;
	background: var(--navy);
	margin-bottom: 40px;
}

.top-hero .bx-viewport { height: 100% !important; }

.top-hero .bxslider,
.top-hero .bxslider > li { height: 100%; margin: 0; }

.top-hero-slide {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

a.top-hero-slide { text-decoration: none; }

.top-hero-slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 28, 123, 0.72) 0%, rgba(0, 28, 123, 0.28) 42%, rgba(0, 28, 123, 0) 72%);
	pointer-events: none;
}

.top-hero-text {
	position: absolute;
	top: 16%;
	left: 50%;
	transform: translateX(-50%);
	width: min(56%, 640px);
	max-height: 44%;
	object-fit: contain;
	z-index: 2;
	pointer-events: none;
}

.top-hero-panel {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 3;
}

.top-hero-panel .wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding-bottom: 56px;
}

.top-hero-lead {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.8;
}

.top-hero-title {
	font-size: 16px;
	font-weight: 900;
	line-height: 1.7;
	letter-spacing: 0.06em;
	color: #ffffff;
	max-width: 640px;
	text-shadow: 0 2px 18px rgba(0, 10, 60, 0.35);
}

/* 中文导语：整句一行显示，不改行 */
.top-hero-title-cn {
	max-width: none;
	white-space: nowrap;
}

.top-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* homepage band strip */
.top-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.top-link-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 30px 28px;
	background: #ffffff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	text-decoration: none;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.top-link-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }

.top-link-card .t-name { font-size: 18px; font-weight: 700; color: var(--ink); }

.top-link-card .t-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.9; }

.top-link-card .t-more {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--jtb-red);
}

/* ---------- T-list : page hero ---------- */
.list-hero {
	position: relative;
	padding: calc(var(--header-h) + 72px) 0 64px;
	color: #ffffff;
	background: linear-gradient(140deg, #CC0000 0%, #EB5514 58.85%, #FFB900 100%);
}

.list-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.18);
	pointer-events: none;
	z-index: 1;
}

.list-hero .wrap {
	position: relative;
	z-index: 2;
}

.list-hero::after {
	content: '';
	position: absolute;
	right: -4%; bottom: -1px;
	width: 46%;
	height: 78%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), transparent);
	pointer-events: none;
	z-index: 1;
}

.list-hero .hero-crumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: 26px;
}

.list-hero .hero-crumb a { color: rgba(255, 255, 255, 0.78); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }

.list-hero .hero-crumb a:hover { color: #ffffff; text-decoration: underline; }

.list-hero .hero-crumb .sep { opacity: 0.6; }

.list-hero .hero-en {
	font-family: var(--font-en);
	font-weight: 300;
	font-size: 22px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #ffffff;
	opacity: 0.92;
	display: block;
	margin-bottom: 8px;
}

.list-hero .hero-en em { font-style: normal; color: #ffb1b1; }

.list-hero h1 {
	font-size: 42px;
	font-weight: 900;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.list-hero .hero-crumb,
.list-hero .hero-en,
.list-hero .hero-sub {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.list-hero .hero-sub {
	margin-top: 18px;
	font-size: 15px;
	line-height: 2;
	color: rgba(255, 255, 255, 0.9);
	max-width: 680px;
}

/* list-hero red ribbon (intertour) */
.hero-ribbon {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
	padding: 8px 26px;
	background: var(--jtb-red);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	border-radius: 4px;
}

.hero-ribbon-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 12px 28px;
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
	min-height: 48px;
}

.hero-ribbon-link:hover { background: #ffffff; color: var(--navy); }

/* tab-style section title (intertour) */
.band-tab {
	padding: 40px 0 8px;
}

.band-tab .tab-title {
	position: relative;
	display: inline-block;
	padding: 10px 30px 10px 46px;
	background: var(--navy);
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.12em;
	border-radius: 4px;
}

.band-tab .tab-title::before {
	content: '';
	position: absolute;
	left: 20px; top: 50%;
	width: 8px; height: 8px;
	margin-top: -4px;
	background: var(--sky);
	border-radius: 50%;
}

.brand-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 0 6px;
}

.brand-row img { max-height: 44px; width: auto; }

.brand-row .pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 22px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	background: #ffffff;
	text-decoration: none;
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.brand-row .pdf-link:hover { border-color: var(--jtb-red); color: var(--jtb-red); box-shadow: var(--shadow-hover); }

.brand-row .pdf-link img { max-height: 20px; }

.items-note {
	margin-top: 28px;
	font-size: 13px;
	color: var(--ink-soft);
	text-align: center;
	letter-spacing: 0.05em;
}

/* ---------- WeChat / QR / payment ---------- */
.qr-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 380px));
	gap: 30px;
	justify-content: center;
	margin-top: 36px;
}

.qr-card {
	background: #ffffff;
	border-radius: var(--radius);
	box-shadow: none;
	padding: 6px;
	text-align: center;
}

.qr-card .qr-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ink);
	margin-bottom: 4px;
}

.qr-card .qr-img {
	width: 300px;
	height: auto;
	border: 0;
	border-radius: 0;
}

.payment-card {
	margin-top: 36px;
	background: #ffffff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 20px;
}

.payment-card .payment-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.7;
}

.payment-card p { margin-top: 10px; font-size: 14px; line-height: 2; color: var(--ink); }

/* ---------- T-detail ---------- */
.detail-hero {
	position: relative;
	height: 560px;
	background: var(--navy);
}

.top-hero .bx-wrapper,
.detail-hero .bx-wrapper {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}

.top-hero .bx-wrapper { min-height: 720px !important; }

.top-hero .bx-viewport,
.detail-hero .bx-viewport { height: 100% !important; width: 100% !important; }

.detail-hero .bxslider,
.detail-hero .bxslider > li { height: 100%; margin: 0; }

.detail-hero .kv-slide {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.detail-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 10, 50, 0.30) 0%, rgba(0, 10, 50, 0) 34%, rgba(0, 10, 50, 0.66) 100%);
	pointer-events: none;
}

.detail-hero-title {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 4;
}

.detail-hero-title .wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding-bottom: 44px;
	color: #ffffff;
}

.detail-hero-title .hero-crumb { margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.8); }

.detail-hero-title .hero-crumb a { color: rgba(255, 255, 255, 0.8); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }

.detail-hero-title .hero-crumb a:hover { color: #ffffff; text-decoration: underline; }

.detail-hero-title .hero-crumb .sep { opacity: 0.6; }

.detail-hero-title h1 {
	font-size: 40px;
	font-weight: 900;
	line-height: 1.45;
	letter-spacing: 0.05em;
	text-shadow: 0 2px 18px rgba(0, 10, 60, 0.45);
}

.detail-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 18px;
	border-radius: 50px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	background: rgba(0, 18, 80, 0.35);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.detail-lead { background: #ffffff; }

.detail-lead .lead-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
}

.detail-lead .lead-text { max-width: 760px; font-size: 15px; line-height: 2.1; color: var(--ink); }

.detail-lead .lead-cta {
	display: inline-flex;
	flex-direction: column;
	gap: 12px;
}

.detail-lead .lead-text p + p { margin-top: 6px; }

/* detail sections */
.detail-block { margin-top: 0; }

.detail-block + .detail-block { margin-top: 34px; }

.detail-block .block-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 0.08em;
	color: var(--ink);
	line-height: 1.5;
}

.detail-block .block-title::before {
	content: '';
	width: 12px; height: 12px;
	flex: none;
	background: var(--jtb-red);
}

.detail-block .block-body {
	margin-top: 18px;
	background: #ffffff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 30px 34px;
	font-size: 15px;
	line-height: 2;
}

.detail-block .block-body p + p { margin-top: 8px; }

/* schedule table (desktop) */
.detail-block .block-body.is-table { padding: 0; overflow: hidden; }

.detail-table { width: 100%; border-collapse: collapse; }

.detail-table thead th {
	background: var(--band);
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 14px 12px;
	border-bottom: 2px solid var(--hairline);
	text-align: left;
	white-space: nowrap;
}

.detail-table tbody th,
.detail-table tbody td {
	padding: 16px 12px;
	border-bottom: 1px dashed var(--hairline);
	vertical-align: top;
	font-size: 14px;
	line-height: 1.95;
	color: var(--ink);
}

.detail-table tbody tr:last-child th,
.detail-table tbody tr:last-child td { border-bottom: 0; }

.detail-table tbody th {
	font-weight: 900;
	font-family: var(--font-en);
	letter-spacing: 0.06em;
	color: var(--jtb-red);
	white-space: nowrap;
	text-align: left;
}

.detail-table td strong { font-weight: 700; }

.detail-table .tour { min-width: 260px; }

/* meal + timezone sub-widgets (notes block) */
.detail-block .meal-detail {
	width: auto;
	margin: 10px 0 22px;
	border-collapse: collapse;
}

.detail-block .meal-detail th,
.detail-block .meal-detail td {
	border: 1px solid var(--hairline);
	padding: 10px 20px;
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
	min-width: 92px;
	color: var(--ink);
}

.detail-block .meal-detail thead th {
	background: var(--band);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.detail-block .meal-detail tbody th {
	background: var(--band);
	font-weight: 700;
	white-space: nowrap;
}

.detail-block .timezone {
	display: flex;
	width: 100%;
	margin: 10px 0 36px;
	white-space: nowrap;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
}

.detail-block .timezone > div {
	position: relative;
	box-sizing: border-box;
	padding: 10px 4px;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	line-height: 2;
	color: var(--ink);
	background: #ffffff;
	border-right: 1px solid var(--hairline);
}

.detail-block .timezone > div:first-child { border-radius: var(--radius) 0 0 var(--radius); }

.detail-block .timezone > div:last-child { border-right: 0; border-radius: 0 var(--radius) var(--radius) 0; }

.detail-block .timezone .am0,
.detail-block .timezone .pm18,
.detail-block .timezone .pm23 { background: var(--band); }

.detail-block .timezone .am0,
.detail-block .timezone .am4,
.detail-block .timezone .am6,
.detail-block .timezone .pm16,
.detail-block .timezone .pm18,
.detail-block .timezone .pm23 { width: 8%; }

.detail-block .timezone .am8,
.detail-block .timezone .pm12 { width: 26%; }

.detail-block .timezone .start {
	display: block;
	position: absolute;
	height: 2em;
	left: 0;
	top: 100%;
	transform: translateX(-50%);
	font-size: 11px;
	color: var(--ink-soft);
}

.detail-block .timezone .am0 .start { left: 3px; transform: none; text-align: left; }

.detail-block .timezone .pm23 .end {
	display: block;
	position: absolute;
	height: 2em;
	right: 3px;
	top: 100%;
	text-align: right;
	font-size: 11px;
	color: var(--ink-soft);
}

.detail-block .block-body .mark { color: var(--jtb-red); font-weight: 700; }

/* gallery */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 18px;
}

.gallery-item {
	background: #ffffff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.gallery-item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.gallery-item:hover img { transform: scale(1.04); }

.gallery-item figcaption {
	padding: 12px 16px 14px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--ink);
}

/* contact cards (detail + contact pages) */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 480px));
	gap: 30px;
	margin-top: 18px;
}

.contact-card {
	position: relative;
	background: linear-gradient(140deg, #B80000 0%, #D94D1A 55%, #E0A000 100%);
	border-radius: 20px;
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.10),
		inset 0 -2px 5px rgba(0, 0, 0, 0.18),
		0 4px 8px rgba(0, 0, 0, 0.12),
		0 12px 24px rgba(0, 0, 0, 0.12),
		0 28px 56px rgba(0, 0, 0, 0.10),
		0 0 0 1px rgba(255, 255, 255, 0.06);
	padding: 32px;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s ease;
}

.contact-card:hover {
	transform: translateY(-8px);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.10),
		inset 0 -2px 5px rgba(0, 0, 0, 0.18),
		0 8px 16px rgba(0, 0, 0, 0.14),
		0 18px 36px rgba(0, 0, 0, 0.14),
		0 40px 72px rgba(0, 0, 0, 0.12),
		0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Shanghai paper-cut style yellow arc */
.contact-card::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 70%;
	height: 84%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='0' dy='-2' stdDeviation='3' flood-color='%235a150f' flood-opacity='0.25'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 200 C 80 200, 130 160, 200 55 L 200 200 Z' fill='%23F7CE86' filter='url(%23s)'/%3E%3Cpath d='M8 200 C 84 200, 132 162, 200 62 L 200 200 Z' fill='%23ECAA4E'/%3E%3C/svg%3E") no-repeat right bottom / contain;
	pointer-events: none;
	z-index: 0;
}

.contact-card > .c-city {
	position: absolute;
	inset: auto;
	right: 5%;
	bottom: 5%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	font-size: clamp(44px, 7vw, 84px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	color: #ffffff;
	text-shadow:
		1px 1px 0 #b30000,
		2px 2px 0 #990000,
		3px 3px 0 rgba(0, 0, 0, 0.25);
	z-index: 1;
	pointer-events: none;
	user-select: none;
}

.contact-card > *:not(.c-city) {
	position: relative;
	z-index: 1;
}

.contact-card > .c-city { z-index: 1; }

/* keep content readable above the decorative arc */
.contact-card .c-head,
.contact-card .c-tel-line,
.contact-card .c-mail,
.contact-card .c-more {
	max-width: 62%;
}

.contact-card .c-head { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

.contact-card .c-tel {
	display: block;
	margin-top: 14px;
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #ffffff;
	text-decoration: none;
	line-height: 1.5;
	word-break: break-all;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.contact-card .c-mail {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 8px;
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
	transition: color 0.25s ease, border-color 0.25s ease;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.contact-card .c-mail:hover { color: #ffffff; border-color: #ffffff; }

.contact-card a.c-mail,
.contact-card a.c-more { cursor: pointer; }

.contact-card .c-tel-line {
	margin-top: 14px;
	font-size: 0;
	line-height: 1.5;
	white-space: nowrap;
}

.contact-card .c-tel-label,
.contact-card .c-tel-sep {
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #ffffff;
	vertical-align: baseline;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.contact-card a.c-tel {
	display: inline;
	margin-top: 0;
	color: #ffffff;
	text-decoration: underline;
	cursor: pointer;
}

.contact-card a.c-tel:hover { color: #ffffff; }

.contact-card .c-tel-sep { margin: 0 2px; }

.contact-card .c-tel-note {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.92);
	letter-spacing: 0.1em;
	vertical-align: baseline;
	margin-left: 4px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ---------- bxSlider chrome override ---------- */
.bx-wrapper { margin: 0 auto; border: 0; box-shadow: none; background: transparent; }

.top-hero .bx-controls,
.detail-hero .bx-controls { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.top-hero .bx-controls-direction,
.detail-hero .bx-controls-direction { pointer-events: auto; }

.top-hero .bx-prev, .top-hero .bx-next,
.detail-hero .bx-prev, .detail-hero .bx-next {
	position: absolute;
	top: 50%;
	width: 48px; height: 48px;
	margin-top: -24px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.92);
	background-image: none;
	text-indent: 0;
	z-index: 6;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.top-hero .bx-prev { left: 22px; }
.top-hero .bx-next { right: 22px; }
.detail-hero .bx-prev { left: 22px; }
.detail-hero .bx-next { right: 22px; }

.top-hero .bx-prev::before, .top-hero .bx-next::before,
.detail-hero .bx-prev::before, .detail-hero .bx-next::before {
	content: '';
	position: absolute;
	top: 50%; left: 52%;
	width: 10px; height: 10px;
	border-left: 2px solid var(--jtb-red);
	border-bottom: 2px solid var(--jtb-red);
}

.top-hero .bx-prev::before, .detail-hero .bx-prev::before { transform: translate(-50%, -50%) rotate(45deg); }

.top-hero .bx-next::before, .detail-hero .bx-next::before { transform: translate(-50%, -50%) rotate(225deg); margin-left: -3px; }

.top-hero .bx-prev:hover, .top-hero .bx-next:hover,
.detail-hero .bx-prev:hover, .detail-hero .bx-next:hover {
	background-color: #ffffff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
	text-indent: 0;
}

.top-hero .bx-pager,
.detail-hero .bx-pager {
	position: absolute;
	bottom: 18px;
	left: 0; right: 0;
	text-align: center;
	pointer-events: auto;
	padding: 0;
	font-size: 0;
	z-index: 6;
}

.top-hero .bx-pager-link,
.detail-hero .bx-pager-link {
	display: inline-block;
	width: 10px; height: 10px;
	margin: 0 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	text-indent: -9999px;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.top-hero .bx-pager-link.active,
.detail-hero .bx-pager-link.active { background: var(--jtb-red); transform: scale(1.25); }

.detail-hero .bx-pager { bottom: 14px; }

/* ---------- T-contact ---------- */
.office-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.office-card {
	background: #ffffff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.office-card .office-photo {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.office-card .office-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.office-card .office-body { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }

.office-card .office-name { font-size: 20px; font-weight: 900; letter-spacing: 0.06em; color: var(--ink); }

.office-card .office-row { margin-top: 12px; font-size: 14px; line-height: 2; color: var(--ink); }

.office-card .office-row .row-label {
	display: inline-block;
	min-width: 5.5em;
	font-weight: 700;
	color: var(--ink-soft);
	letter-spacing: 0.08em;
}

.office-card .office-tel-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	align-self: flex-start;
	min-height: 46px;
	padding: 8px 26px;
	border-radius: 50px;
	border: 1px solid var(--jtb-red);
	color: var(--jtb-red);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	font-size: 14px;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.office-card .office-tel-link:hover { background: var(--jtb-red); color: #ffffff; }

.map-figure { margin-top: 40px; text-align: center; }

.map-figure img { max-width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-card); }

/* ---------- responsive templates ---------- */
@media (max-width: 1199px) {
	.top-hero { height: auto; min-height: 720px; }
	.detail-hero { height: 50vw; min-height: 420px; }
}

@media (max-width: 1023px) {
	.top-links { grid-template-columns: repeat(3, 1fr); gap: 18px; }

	.gallery-grid { grid-template-columns: repeat(2, 1fr); }

	.office-grid { grid-template-columns: 1fr; }

	.list-hero h1 { font-size: 34px; }

	.detail-hero-title h1 { font-size: 32px; }

	.contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	/* T-top hero: taller image so all text sits inside the background */
	.top-hero {
		height: auto;
		min-height: 720px;
		max-height: none;
	}

	.top-hero .bx-wrapper {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		min-height: 720px !important;
		margin: 0 !important;
	}

	.top-hero-panel {
		position: absolute;
		padding: 0 0 36px;
		background: none;
	}

	.top-links { grid-template-columns: 1fr; gap: 14px; }


	.top-hero-text { top: calc(var(--header-h) + 20px); transform: translateX(-50%); width: 82%; max-height: 30%; }

	.top-hero-panel .wrap { padding-bottom: 0; gap: 10px; }

	.top-hero-lead { font-size: 14px; letter-spacing: 0.03em; line-height: 1.7; white-space: nowrap; margin-bottom: 18px; transform: translateY(-10px); }

	.top-hero-title { font-size: 14px; line-height: 1.7; }

	.top-hero-title-cn { font-size: 14px; line-height: 1.7; white-space: normal; margin-left: 0; padding-left: 0; }

	.top-hero-ctas { gap: 10px; width: 100%; }

	.top-hero-ctas .btn { flex: 1 1 auto; min-width: 140px; padding: 9px 18px; font-size: 13px; }

	.top-hero .bx-prev, .top-hero .bx-next,
	.detail-hero .bx-prev, .detail-hero .bx-next { width: 40px; height: 40px; margin-top: -20px; }

	.top-hero .bx-prev { left: 10px; }
	.top-hero .bx-next { right: 10px; }

	/* T-list hero */
	.list-hero { padding: calc(var(--header-h) + 44px) 0 44px; }

	.list-hero .hero-en { font-size: 16px; letter-spacing: 0.22em; }

	.list-hero h1 { font-size: 27px; }

	.list-hero .hero-sub { font-size: 13px; }

	.hero-ribbon { font-size: 13px; padding: 7px 18px; }

	.band-tab .tab-title { font-size: 15px; padding: 9px 20px 9px 36px; }

	.brand-row .pdf-link { width: 100%; justify-content: center; }

	.qr-grid { grid-template-columns: 1fr; gap: 20px; }

	.qr-card .qr-img { width: 300px; }

	.payment-card { padding: 20px; }

	/* T-detail hero: breadcrumb above arrows, title below arrows */
	.detail-hero { height: 110vw; min-height: 420px; max-height: 520px; }

	.detail-hero-title {
		top: 0;
		bottom: 0;
		display: flex;
	}

	.detail-hero-title .wrap {
		position: relative;
		flex: 1;
		padding: 0 var(--gutter);
	}

	.detail-hero-title .hero-crumb {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin: 0;
		padding-left: var(--gutter);
		font-size: 11px;
		gap: 6px;
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
		transform: translateY(calc(-100% - 18px));
	}

	.detail-hero-title h1 {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin: 0;
		padding: 0 32px;
		font-size: 18px;
		line-height: 1.5;
		overflow-wrap: break-word;
		word-break: keep-all;
		line-break: strict;
		text-wrap: balance;
		transform: translateY(18px);
	}

	.detail-hero-title .detail-chip {
		position: absolute;
		top: calc(50% + 18px + 120px);
		left: 32px;
		right: 32px;
		margin: 0;
		font-size: 12px;
		padding: 4px 14px;
		max-width: fit-content;
	}

	.detail-lead .lead-text { font-size: 14px; line-height: 2.05; }

	.detail-lead .lead-cta {
		flex-direction: row;
		width: 100%;
		gap: 10px;
	}

	.detail-lead .lead-cta .btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 9px 10px;
		font-size: 13px;
		text-align: center;
	}

	.detail-block .block-title { font-size: 19px; }

	.detail-block .block-body { padding: 20px 18px; font-size: 13px; line-height: 1.95; }

	.gallery-grid { grid-template-columns: 1fr; gap: 16px; }

	.contact-card { padding: 24px 20px 40px; }

	.contact-card > .c-city {
		font-size: clamp(32px, 10vw, 52px);
		font-weight: 700;
		letter-spacing: 0.12em;
		color: #ffffff;
		text-shadow:
			1px 1px 0 #b30000,
			2px 2px 0 #990000,
			3px 3px 0 rgba(0, 0, 0, 0.25);
		right: 16px;
		bottom: 12px;
	}

	.contact-card .c-more { margin-bottom: 32px; }

	/* larger paper-cut arc on mobile to fully frame the city name */
	.contact-card::before { width: 54%; height: 66%; }

	/* content can use full card width on mobile */
	.contact-card .c-head,
	.contact-card .c-tel-line,
	.contact-card .c-mail,
	.contact-card .c-more {
		max-width: 100%;
	}

	.contact-card .c-tel { font-size: 13px; }

	.contact-card .c-tel-label,
	.contact-card .c-tel-sep { font-size: 13px; }

	/* モバイル：TEL行は片段の間だけ改行、電話番号の中では折り返さない */
	.contact-card .c-tel-line {
		white-space: normal;
	}

	.contact-card .c-tel-line .c-tel {
		display: inline;
		white-space: nowrap;
		word-break: normal;
	}

	.contact-card .c-tel-line .c-tel-note {
		white-space: nowrap;
	}


	/* schedule table: full-width proportional wrap (proven baseline) */
	.detail-block .block-body.is-table { overflow-x: auto; }

	.detail-table { table-layout: fixed; width: 100%; min-width: 0; }

	.detail-table thead th { padding: 10px 6px; font-size: 11px; letter-spacing: 0.04em; white-space: normal; }

	.detail-table thead th.day { width: 12%; }
	.detail-table thead th.city { width: 10%; }
	.detail-table thead th.transit { width: 12%; }
	.detail-table thead th.time { width: 16%; }
	.detail-table thead th.dinner { width: 10%; }
	.detail-table thead th.hotel { width: 12%; }

	.detail-table tbody th,
	.detail-table tbody td { padding: 10px 6px; font-size: 12px; line-height: 1.8; word-break: break-word; white-space: normal; }

	.detail-table tbody th { writing-mode: horizontal-tb; white-space: normal; }

	.detail-table .tour { min-width: 0; }

	.detail-table tfoot td { padding: 6px 8px; font-size: 12px; }

	.detail-block .timezone { margin: 6px 0 30px; }

	.detail-block .timezone > div { min-height: 40px; padding: 4px 2px; font-size: 10px; }

	.detail-block .timezone .start,
	.detail-block .timezone .end { font-size: 9px; }

	.detail-block .meal-detail { width: 100%; table-layout: fixed; }

	.detail-block .meal-detail td, .detail-block .meal-detail th { width: auto; min-width: 0; padding: 8px 4px; font-size: 12px; line-height: 1.7; word-break: break-word; }

	.office-tabs { gap: 10px; }

	.office-tab { padding: 10px 20px; font-size: 13px; }

	.office-photos { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- contact hub / office pages ---------- */
.contact-card.is-link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card.is-link:hover {
	transform: translateY(-8px);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.18),
		inset 0 -2px 5px rgba(0, 0, 0, 0.18),
		0 8px 16px rgba(0, 0, 0, 0.14),
		0 18px 36px rgba(0, 0, 0, 0.14),
		0 40px 72px rgba(0, 0, 0, 0.12),
		0 0 0 1px rgba(255, 255, 255, 0.06);
}

.contact-card .c-more {
	display: block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #ffffff;
	text-decoration: none;
	transition: text-decoration 0.25s ease;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.contact-card .c-more::after {
	content: '→';
	margin-left: 8px;
	transition: margin-left 0.25s ease;
}

.contact-card a.c-more:hover { text-decoration: underline; }

.contact-card a.c-more:hover::after { margin-left: 14px; }

.block-body a.c-tel,
.block-body a.c-mail {
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.block-body a.c-tel:hover,
.block-body a.c-mail:hover { color: var(--jtb-red); }

.office-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 36px;
}

.office-tab {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 11px 28px;
	border-radius: 999px;
	border: 1px solid var(--hairline);
	background: #ffffff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--ink);
	text-decoration: none;
	transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.office-tab:hover { border-color: var(--jtb-red); color: var(--jtb-red); }

.office-tab.is-active {
	background: var(--jtb-red);
	border-color: var(--jtb-red);
	color: #ffffff;
}

.office-photos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	margin-top: 18px;
}

.office-photos img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

.office-map {
	display: block;
	margin-top: 20px;
	max-width: 560px;
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

/* ---------- info document page (looklandonly) ---------- */
.land-doc { padding: calc(var(--header-h) + 64px) 0 72px; background: var(--band); }

.land-doc .doc-card {
	max-width: 980px;
	margin: 0 auto;
	padding: clamp(16px, 3vw, 40px);
	background: #ffffff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

.land-doc .doc-card img { display: block; width: 100%; height: auto; border-radius: 4px; }

.land-doc .doc-close { margin-top: 28px; text-align: center; }

/* ---------- desktop text scale-up (min-width: 1024px) ----------
   Loaded last, so these bump the desktop base sizes by about 1-2px.
   Mobile / tablet (max-width: 1023px) keeps its existing overrides untouched. */
@media (min-width: 1024px) {
	body { font-size: 17px; }

	/* chrome (theme.css) */
	.sect-kicker { font-size: 21px; }
	.sect-title { font-size: 34px; }
	.sect-lead { font-size: 16px; }
	.btn { font-size: 16px; }
	.nav-link { font-size: 15px; }
	.tour-card-chip { font-size: 13px; }
	.tour-card-place { font-size: 19px; }
	.tour-card-city { font-size: 14px; }
	.tour-card-more { font-size: 14px; }
	.check-title { font-size: 17px; }
	.check-text { font-size: 15px; }
	.site-footer { font-size: 15px; }
	.site-footer .footer-col-title { font-size: 16px; }
	.site-footer .footer-legal { font-size: 13px; }
	.footer-copy { font-size: 13px; }

	/* T-top */
	.top-hero-lead { font-size: 20px; }
	.top-hero-title { font-size: 16px; }
	.top-link-card .t-name { font-size: 19px; }
	.top-link-card .t-desc { font-size: 14px; }
	.top-link-card .t-more { font-size: 14px; }

	/* T-list */
	.list-hero .hero-crumb { font-size: 13px; }
	.list-hero .hero-en { font-size: 23px; }
	.list-hero h1 { font-size: 44px; }
	.list-hero .hero-sub { font-size: 16px; }
	.hero-ribbon { font-size: 16px; }
	.hero-ribbon-link { font-size: 15px; }
	.band-tab .tab-title { font-size: 19px; }
	.brand-row .pdf-link { font-size: 14px; }
	.brand-row .pdf-link img { max-height: 22px; }
	.items-note { font-size: 14px; }
	.qr-card .qr-label { font-size: 15px; }
	.payment-card .payment-title { font-size: 17px; }
	.payment-card p { font-size: 15px; }

	/* T-detail */
	.detail-hero-title .hero-crumb { font-size: 13px; }
	.detail-hero-title h1 { font-size: 42px; }
	.detail-chip { font-size: 14px; }
	.detail-lead .lead-text { font-size: 16px; }
	.detail-block .block-title { font-size: 24px; }
	.detail-block .block-body { font-size: 16px; }
	.detail-table thead th { font-size: 15px; }
	.detail-table tbody th,
	.detail-table tbody td { font-size: 15px; }
	.detail-block .meal-detail th,
	.detail-block .meal-detail td { font-size: 15px; }
	.detail-block .timezone > div { font-size: 13px; }
	.detail-block .timezone .start,
	.detail-block .timezone .pm23 .end { font-size: 12px; }
	.gallery-item figcaption { font-size: 14px; }

	/* contact / office */
	.contact-card .c-head { font-size: 17px; }
	.contact-card .c-tel { font-size: 15px; }
	.contact-card .c-tel-label,
	.contact-card .c-tel-sep { font-size: 15px; }
	.contact-card .c-note { font-size: 13px; }
	.contact-card .c-mail { font-size: 15px; font-weight: 700; }
	.contact-card .c-more { font-size: 14px; }
	.office-card .office-name { font-size: 22px; }
	.office-card .office-row { font-size: 15px; }
	.office-card .office-tel-link { font-size: 15px; }
	.office-tab { font-size: 15px; }
}

/* 募集ツアー区段間の余白調整 */
.sect-follow { padding-top: 32px; }

/* 準備中表示 */
.tour-soon {
	text-align: center;
	color: #666;
	font-size: 16px;
	padding: 24px 0;
}