@charset "utf-8";
/* =========================================================================
   ウズバス（UZS BUS）— 徳島空港線バス サイトリニューアル
   モバイルファースト / レスポンシブ 1ページ構成
   Color: Sea Blue #0D8FC4(淡路) × Sudachi Green #83B974(徳島) / Amber=予約CTA
   ========================================================================= */

:root {
	--blue: #0d8fc4;
	--blue-deep: #0a6e9c;
	--blue-deeper: #084e72;
	--hero-blue: #a5bcdd;
	--green: #83b974;
	--green-light: #84bd5b;
	--green-mid: #6fae5d;
	--green-deep: #4e8a3a;
	--amber1: #ffb43f;
	--amber2: #ff8a3d;
	--navy: #0b3b54;
	--text2: #43657a;
	--muted: #7b98a8;
	--light: #9ab0bd;
	--bg-blue: #f2fafd;
	--bg-chip: #eef6f9;
	--bg-chip2: #eef5f8;
	--border: #e7f1f5;
	--border2: #e9f1f4;
	--grad-amber: linear-gradient(135deg, #ffb43f, #ff8a3d);
	--shadow-card: 0 6px 18px rgba(11, 59, 84, 0.06);
	--maxw: 1200px;
}

* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family:
		'Zen Kaku Gothic New',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	color: var(--navy);
	background: #fff;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* スマホ下部固定バーぶんの余白 */
	padding-bottom: 76px;
}
img {
	max-width: 100%;
}
a {
	color: inherit;
}
h1,
h2,
h3,
p {
	margin: 0;
}
button {
	font-family: inherit;
}

.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 18px;
}
/* スティッキーヘッダー分のアンカー位置補正 */
section[id],
[id] {
	scroll-margin-top: 108px;
}
.eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--blue);
}
.eyebrow.green {
	color: var(--green-deep);
}
.sec-title {
	margin: 5px 0 0;
	font-size: 21px;
	font-weight: 900;
	letter-spacing: 0.01em;
}
.sec-head {
	text-align: left;
	margin-bottom: 16px;
}

@keyframes obSpin {
	to {
		transform: rotate(360deg);
	}
}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	background: rgba(255, 255, 255, 0.93);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid #eef3f5;
}
.site-header .logo img {
	height: 40px;
	width: auto;
	display: block;
}
.header-nav {
	display: none;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.btn-reserve-sm {
	background: var(--grad-amber);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	padding: 9px 16px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 5px 12px rgba(255, 138, 61, 0.32);
	text-decoration: none;
	white-space: nowrap;
}

/* 言語切り替え（ヘッダー右端） */
.lang-switch {
	position: relative;
}
.lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--blue-deep);
	background: #fff;
	border: 1px solid var(--border);
	padding: 8px 12px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
}
.lang-ico {
	font-size: 14px;
}
.lang-caret {
	font-size: 10px;
	opacity: 0.7;
}
.lang-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 60;
	min-width: 152px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(11, 59, 84, 0.16);
	display: none;
}
.lang-switch.open .lang-menu {
	display: block;
}
.lang-menu li {
	margin: 0;
}
.lang-menu button {
	display: block;
	width: 100%;
	text-align: left;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	background: none;
	border: none;
	padding: 9px 12px;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
}
.lang-menu button:hover {
	background: var(--bg-blue);
}
.lang-menu button[aria-current='true'] {
	background: var(--bg-blue);
	color: var(--blue-deep);
}

/* quick nav chips (mobile) */
.quicknav {
	position: sticky;
	top: 56px;
	z-index: 40;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 11px 14px;
	background: rgba(255, 255, 255, 0.93);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid #eaf1f4;
	scrollbar-width: none;
}
.quicknav::-webkit-scrollbar {
	display: none;
}
.quicknav a {
	position: relative;
	flex: 0 0 auto;
	background: var(--bg-chip);
	color: var(--blue-deep);
	font-weight: 700;
	font-size: 12.5px;
	padding: 8px 14px 10px;
	border-radius: 5px;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background 0.2s,
		color 0.2s;
}
.quicknav a.green {
	background: #eef6e8;
	color: var(--green-deep);
}

/* スクロール連動：現在表示中セクションのチップを強調（下にインジケーターバー） */
.quicknav a.active {
	background: #e3f0f6;
	color: var(--blue);
	font-weight: 800;
}
.quicknav a.active::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 3px;
	height: 3px;
	border-radius: 999px;
	background: var(--blue);
}
.quicknav a.green.active {
	background: #e7f2de;
	color: var(--green-deep);
}
.quicknav a.green.active::after {
	background: var(--green-deep);
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
	position: relative;
	overflow: hidden;
	padding: 24px 18px;
	background: #84bd5b;
}
.hero::before {
	content: '';
	position: absolute;
	top: -60px;
	left: -50px;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 68%);
	z-index: 1;
}
.hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1040px;
	margin: 0 auto;
}

/* --- hero intro animation: 青い帯のスワイプ＋境界線の回転 --- */
.hero-fx {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	clip-path: inset(0 100% 0 0);
	animation: heroSwipe 0.367s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.hero-fx-blue {
	position: absolute;
	left: -100%;
	top: -100%;
	width: 300%;
	height: 300%;
	background: linear-gradient(120deg, #a5bcdd 0 51%, transparent 51% 100%);
	transform-origin: 50% 50%;
	transform: rotate(60deg);
	animation: heroRotate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.467s forwards;
}
@keyframes heroSwipe {
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes heroRotate {
	from {
		/* 水平（青が上）からスタート */
		transform: rotate(60deg);
	}
	to {
		/* 最終の傾き（120degグラデーションの境界） */
		transform: rotate(0deg);
	}
}
.hero-logo {
	/* スマホ：バスの背面に大きめに表示し、バスが走り去ると現れる演出 */
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	margin: 0 auto;
	width: 70%;
	max-width: 320px;
	height: auto;
	z-index: 1;
	filter: drop-shadow(0 5px 12px rgba(8, 50, 75, 0.22));
}
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	color: var(--blue-deep);
	font-size: 12px;
	font-weight: 800;
	padding: 7px 13px;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(8, 50, 75, 0.18);
}
.hero-badge .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--amber2);
}
.hero h1 {
	font-size: 25px;
	text-align: center;
	line-height: 1.3;
	font-weight: 900;
	color: #3e4170;
}
.hero-sub {
	margin: 0 0 4px;
	font-size: 14.5px;
	line-height: 1.7;
	color: #fff;
	font-weight: 700;
	text-shadow: 0 1px 8px rgba(8, 50, 75, 0.32);
}
.hero-bus {
	position: relative;
	height: 142px;
	margin: 8px 0 16px;
}
.hero-bus .bus-img {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	/* 3種のバスは縦横比が異なるため高さ固定（幅自動）でヒーロー高さを一定に */
	height: 116px;
	width: auto;
	z-index: 2;
	filter: drop-shadow(0 10px 14px rgba(8, 50, 75, 0.28));
}
.hero-bus .shadow {
	position: absolute;
	bottom: 2px;
	left: 50%;
	transform: translateX(-50%);
	width: 72%;
	max-width: 380px;
	height: 14px;
	z-index: 2;
	border-radius: 50%;
	background: rgba(8, 50, 75, 0.14);
	filter: blur(6px);
}
/* バス下・CTA上：運行開始の告知（雲 cloud.svg を背景に） */
.hero-notice {
	width: min(92%, 440px);
	margin: 16px auto 0;
	aspect-ratio: 533.68 / 114.61;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	text-align: center;
	color: #3e4170;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.3;
	background: url(../images/cloud.svg) no-repeat center center / 100% 100%;
}
/* 言語別フォントサイズ（i18n が <html lang> を切替）: 英語は h1 を拡大、英語/韓国語は notice を縮小 */
html[lang='en'] .hero h1 {
	font-size: 30px;
}
html[lang='en'] .hero-notice,
html[lang='ko'] .hero-notice {
	font-size: 12px;
}
/* PC（768px〜）では英語・韓国語の notice を 16px（SP は 12px のまま） */
@media (min-width: 768px) {
	html[lang='en'] .hero-notice,
	html[lang='ko'] .hero-notice {
		font-size: 16px;
	}
}
/* ヒーロー左下：淡路うず助の権利表記 */
.hero-credit {
	position: absolute;
	left: 30px;
	bottom: 120px;
	z-index: 3;
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	color: #263c65;
	text-align: left;
}
.hero-cta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* --- hero intro: キャッチコピーのフェードイン（スワイプと同時） --- */
.hero-badge,
.hero h1,
.hero-sub {
	opacity: 0;
	animation: heroTextIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-badge {
	animation-delay: 0.167s;
}
.hero h1 {
	animation-delay: 0.253s;
}
.hero-sub {
	animation-delay: 0.333s;
}
@keyframes heroTextIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- hero intro: ロゴがポンッと登場（PCのみ。スマホはバス背面で常時表示） --- */
@keyframes heroLogoPop {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
	60% {
		opacity: 1;
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* --- hero intro: バスが右→中央→左へ（エンドレスリピート） --- */
/* モバイルは left:50% + translateX(-50%) で中央寄せのため、中央寄せ分を織り込む */
.hero-bus .bus-img,
.hero-bus .shadow {
	animation: heroBusLoopSP 5.333s ease-in-out 1.333s infinite both;
}
@keyframes heroBusLoopSP {
	0% {
		transform: translateX(150%);
	}
	15% {
		transform: translateX(-50%);
	}
	71% {
		transform: translateX(-50%);
	}
	87.5%,
	100% {
		transform: translateX(-200%);
	}
}

/* buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: none;
	border-radius: 14px;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	font-weight: 800;
}
.btn-amber {
	background: var(--grad-amber);
	color: #fff;
	font-weight: 900;
	font-size: 16px;
	padding: 15px 22px;
	box-shadow: 0 9px 20px rgba(255, 138, 61, 0.4);
}
.btn-white {
	background: #fff;
	color: var(--blue-deep);
	font-size: 14px;
	padding: 15px 18px;
	box-shadow: 0 8px 16px rgba(8, 50, 75, 0.16);
}
.btn-green {
	background: linear-gradient(135deg, #84bd5b, #4e8a3a);
	color: #fff;
	font-size: 14px;
	padding: 13px 24px;
	margin-top: 6px;
	box-shadow: 0 8px 18px rgba(78, 138, 58, 0.3);
}
.btn-green .ext {
	margin-left: 2px;
	font-size: 12px;
	font-weight: 900;
}
.hero-cta .btn-amber {
	flex: 1.35;
}
.hero-cta .btn-white {
	flex: 1;
}

/* =========================================================================
   SECTION base
   ========================================================================= */
section {
	padding: 30px 0;
}
.section-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 18px;
}
.bg-blue {
	background: var(--bg-blue);
}
.bg-white {
	background: #fff;
}
.bg-green {
	background: linear-gradient(180deg, #eef7e9, #d7ecc8);
}

/* =========================================================================
   PLACES
   ========================================================================= */
.places-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.place-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border2);
	border-radius: 15px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4px 12px rgba(11, 59, 84, 0.05);
}
.place-card img {
	display: block;
	width: 100%;
	height: 108px;
	object-fit: cover;
}
.place-card .body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 11px 12px 13px;
}
.place-card .name {
	font-size: 14px;
	font-weight: 800;
}
.place-card .desc {
	font-size: 11px;
	color: var(--navy);
	margin-top: 2px;
	margin-bottom: 10px;
	line-height: 1.5;
}
/* 「公式サイト」ボタンはカード右下に配置 */
.place-card .tag {
	align-self: flex-end;
	margin-top: auto;
}
.tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-top: 8px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--blue-deep);
	background: var(--bg-chip);
	padding: 3px 9px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background 0.2s,
		color 0.2s;
}
a.tag:hover {
	background: var(--blue);
	color: #fff;
}
.tag .ext {
	font-size: 10px;
	font-weight: 900;
}
.place-card .desc-long {
	display: none;
}

/* =========================================================================
   UZS BUS（ラッピングバス紹介）スマホ縦並び → PC横並び
   ========================================================================= */
.uzsbus-lead {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--text2);
}
.uzsbus-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.uzsbus-item {
	margin: 0;
	background: #fff;
	border: 1px solid var(--border2);
	border-radius: 14px;
	padding: 14px 16px 13px;
	box-shadow: var(--shadow-card);
	text-align: center;
}
.uzsbus-item img {
	display: block;
	width: 100%;
	height: auto;
}
.uzsbus-item figcaption {
	margin-top: 10px;
	font-size: 14px;
	font-weight: 800;
	color: var(--navy);
}

/* =========================================================================
   CHARACTERS（キャラクター紹介）スマホ縦並び → PC2カラム
   ========================================================================= */
.chara-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.chara-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--border2);
	border-radius: 16px;
	padding: 18px 18px 20px;
	box-shadow: var(--shadow-card);
}
.chara-img {
	text-align: center;
	margin-bottom: 12px;
}
.chara-img img {
	height: 160px;
	width: auto;
	max-width: 100%;
}
.chara-credit {
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--text2);
	text-align: center;
}
.chara-name {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 900;
	color: var(--navy);
	text-align: center;
}
.chara-desc {
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--text2);
}

/* =========================================================================
   ROUTE (vertical stepper -> horizontal on PC)
   ========================================================================= */
.route-map {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 18px;
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(11, 59, 84, 0.08);
}
.stepper {
	position: relative;
	padding-left: 6px;
}
.stepper .line {
	position: absolute;
	left: 15px;
	top: 10px;
	bottom: 10px;
	width: 3px;
	background: linear-gradient(var(--green), var(--blue));
	border-radius: 3px;
}
/* 路線図（スマホ）は始発・終着のノード中心で線を止め、それ以上伸ばさない */
#route .stepper .line {
	top: 31px;
	bottom: 31px;
}
.stop {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 7px 0;
}
.stop .node {
	width: 14px;
	height: 14px;
	margin-left: 4px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--blue);
	z-index: 1;
	flex: 0 0 auto;
}
.stop.end-a .node,
.stop.end-b .node {
	width: 22px;
	height: 22px;
	margin-left: 0;
	border: 3px solid #fff;
}
.stop.end-a .node {
	background: var(--green);
	box-shadow: 0 0 0 2px var(--blue);
}
.stop.end-b .node {
	background: var(--blue);
	box-shadow: 0 0 0 2px var(--blue);
}
.stop .pill {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	border: 1px solid #e3eef3;
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 700;
}
.stop .pill .nm {
	font-size: 14.5px;
	font-weight: 800;
}
.stop .pill .lab {
	font-size: 11px;
	font-weight: 700;
}
.stop .pill .lab.depart {
	color: var(--amber2);
}
.stop .pill .lab.terminal {
	color: var(--blue-deep);
}
.leg {
	font-size: 11px;
	color: var(--navy);
	padding-left: 50px;
}

/* =========================================================================
   SHUTTLE
   ========================================================================= */
.shuttle-lead {
	margin: 5px 0 16px;
	font-size: 12.5px;
	color: #356b71;
	line-height: 1.7;
	font-weight: 600;
}
.shuttle-card {
	background: #fff;
	border: 1px solid #cfe3bd;
	border-radius: 16px;
	padding: 18px 16px;
	margin-top: 18px;
}
.shuttle-body {
	flex: 1;
	min-width: 0;
}
.shuttle-photo {
	display: block;
	width: 100%;
	height: 174px;
	object-fit: cover;
	border-radius: 10px;
	margin-top: 10px;
}
.shuttle-card .stepper .line {
	background: linear-gradient(var(--blue), var(--green-mid));
	top: 14px;
	bottom: 14px;
}
.shuttle-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 5px 0;
}
.shuttle-row .node {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid #fff;
	z-index: 1;
	flex: 0 0 auto;
}
.shuttle-row.start .node {
	background: var(--blue);
	box-shadow: 0 0 0 2px var(--blue);
}
.shuttle-row.end .node {
	background: var(--green-mid);
	box-shadow: 0 0 0 2px var(--green-mid);
}
.shuttle-row.mid .node {
	background: #36a0ad;
	box-shadow: 0 0 0 2px #36a0ad;
}
.shuttle-row .ttl {
	font-size: 16px;
	font-weight: 800;
}
.shuttle-row .sub {
	margin-top: 5px;
	font-size: 14px;
	color: var(--navy);
}
.shuttle-via {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 9px 0 9px 44px;
}
.shuttle-via .shuttle-bus {
	flex: 0 0 auto;
	width: 150px;
	height: auto;
	filter: drop-shadow(0 3px 6px rgba(11, 59, 84, 0.16));
}
.shuttle-via-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.badge-free {
	font-size: 11px;
	font-weight: 900;
	color: #fff;
	background: var(--green-mid);
	padding: 3px 11px;
	border-radius: 999px;
}
.shuttle-via .txt {
	font-size: 14px;
	color: #356b71;
	font-weight: 700;
}
.note {
	font-size: 15px;
	color: var(--navy);
	margin-top: 10px;
}
.note strong {
	font-weight: 700;
}
/* 注記内の特に強い強調（例:「大幅な遅延」）。文字色・下線ともに #ff5b16 */
.note-emph {
	color: #ff5b16;
	text-decoration: underline;
	text-decoration-color: #ff5b16;
}
/* 言語別に出し分ける要素（i18n.js が <html lang> を設定）。翻訳（テキストノード単位）を壊さずに一部だけ太字装飾したい注記などで使用。data-i18n-skip と併用する */
[data-lang-show] {
	display: none;
}
html[lang='ja'] [data-lang-show='ja'],
html[lang='en'] [data-lang-show='en'],
html[lang='ko'] [data-lang-show='ko'] {
	display: inline;
}
.note.green {
	color: #7fa6ab;
}

/* --- FREE SHUTTLE セクション：うずループのヒーローと同じティール斜めストライプ --- */
/* （.shuttle-* は #naruto と共有のため #shuttle スコープで上書き） */
#shuttle {
	position: relative;
	overflow: hidden;
	background-color: #06b4bf;
	background-image: repeating-linear-gradient(-45deg, #00a2af 0, #00a2af 15px, #06b4bf 15px, #06b4bf 30px);
}
#shuttle::before {
	content: '';
	position: absolute;
	top: -70px;
	right: -50px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 68%);
}
#shuttle .section-inner {
	position: relative;
	z-index: 1;
}
/* セクション外（カード外）の見出し・リードは白文字に */
#shuttle .eyebrow.green {
	color: #e6fbfd;
}
#shuttle .sec-title.left {
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 60, 66, 0.3);
}
#shuttle .shuttle-lead {
	color: #f4feff;
	font-weight: 700;
	text-shadow: 0 1px 6px rgba(0, 60, 66, 0.28);
}
#shuttle .btn-green {
	background: #fff;
	color: #067e88;
	box-shadow: 0 8px 18px rgba(0, 60, 66, 0.22);
}
/* 白カードはそのまま（中の文字は暗いまま）／ティール背景から浮かせる */
#shuttle .shuttle-card {
	border-color: rgba(255, 255, 255, 0.6);
	box-shadow: 0 10px 24px rgba(0, 60, 66, 0.16);
}
#shuttle .shuttle-card .stepper .line {
	background: linear-gradient(#06b4bf, #007e8a);
}
#shuttle .shuttle-row.start .node {
	background: #06b4bf;
	box-shadow: 0 0 0 2px #06b4bf;
}
#shuttle .shuttle-row.end .node {
	background: #007e8a;
	box-shadow: 0 0 0 2px #007e8a;
}
#shuttle .badge-free {
	background: #06b4bf;
}

/* =========================================================================
   TABS (course / timetable direction)
   ========================================================================= */
.tabs {
	display: flex;
	gap: 8px;
	background: var(--bg-blue);
	padding: 5px;
	border-radius: 14px;
	margin-bottom: 16px;
}
.tab-btn {
	flex: 1;
	text-align: center;
	padding: 11px 8px;
	border-radius: 11px;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	border: none;
	background: var(--bg-chip2);
	color: #5b7a8a;
	transition: all 0.18s;
}
.tab-btn.active {
	background: var(--blue);
	color: #fff;
	box-shadow: 0 7px 15px rgba(13, 143, 196, 0.28);
}
.tabpanel {
	display: none;
}
.tabpanel.active {
	display: block;
}

.course-block {
	display: flex;
	flex-direction: column;
}
.course-img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 13px;
	margin-bottom: 16px;
	order: 1; /* スマホではタブパネルの下に表示 */
}
.course-box {
	background: #f7fbfd;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px 16px;
}
.day-label {
	font-size: 11px;
	font-weight: 800;
	color: var(--blue-deep);
	background: #e3f0f6;
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}
.step {
	display: flex;
	align-items: center;
	gap: 12px;
}
.step .num {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 14px;
	flex: 0 0 auto;
}
.num.b {
	background: var(--blue);
}
.num.g {
	background: var(--green);
}
.num.a {
	background: var(--amber2);
}
.step .txt {
	font-size: 14.5px;
	font-weight: 800;
}
.step .txt small {
	font-size: 11px;
	color: var(--navy);
	font-weight: 600;
}
.step-line {
	height: 16px;
	border-left: 2px dashed #c5dde8;
	margin-left: 15px;
}

/* =========================================================================
   TIMETABLE
   ========================================================================= */
.tt-lead {
	margin: 5px 0 14px;
	font-size: 14px;
	color: var(--navy);
	line-height: 1.6;
}
.tt-toggle {
	display: flex;
	gap: 5px;
	background: #e4eef3;
	padding: 5px;
	border-radius: 11px;
	margin-bottom: 14px;
}
.tt-toggle .seg {
	flex: 1;
	text-align: center;
	padding: 9px 6px;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 800;
	cursor: pointer;
	border: none;
	background: transparent;
	color: var(--navy);
}
.tt-toggle .seg.active {
	background: #fff;
	color: var(--blue-deep);
	box-shadow: 0 2px 6px rgba(11, 59, 84, 0.12);
}
.tt-tables {
	display: block;
	margin-bottom: 20px;
}
.tt-panel {
	display: none;
}
.tt-panel.active {
	display: block;
}

/* 経由バス停を含むマトリクス表（スマホ＝横スクロール／停留所列は固定） */
.tt-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 6px 16px rgba(11, 59, 84, 0.05);
	/* 「予約」バッジを表（運行会社の行）の上にはみ出して表示するための余白 */
	padding-top: 33px;
}
.tt-matrix {
	border-collapse: collapse;
	width: max-content;
	min-width: 100%;
	font-size: 14px;
}
.tt-matrix th,
.tt-matrix td {
	padding: 9px 8px;
	text-align: center;
	white-space: nowrap;
	border-bottom: 1px solid #eef4f6;
	border-left: 1px solid #f1f6f8;
}
.tt-matrix tr:last-child td,
.tt-matrix tr:last-child th {
	border-bottom: none;
}
.tt-matrix td {
	font-weight: 800;
	color: var(--navy);
	min-width: 54px;
}
.tt-matrix td.dash {
	color: #c2d2da;
	font-weight: 600;
}
/* 予約便の列は tt-resv-alert と同系のオレンジで淡い背景。背景は col、枠はセル側で描く（col の上下辺は一部ブラウザで描画されないため） */
.tt-matrix col.tt-col-resv {
	background: #fff7ee;
}
/* 予約便の列の枠（2px オレンジ）をセル側で描き、上下左右の4辺を確実に表示する。
   空港発(air): 予約便=nth-child 2,8,9,10 / 福良発(fukura): 2,8,9（stop-col=1 を除く便の並び順） */
[data-panel='air'] .tt-matrix tr > :nth-child(2),
[data-panel='air'] .tt-matrix tr > :nth-child(8),
[data-panel='air'] .tt-matrix tr > :nth-child(9),
[data-panel='air'] .tt-matrix tr > :nth-child(10),
[data-panel='fukura'] .tt-matrix tr > :nth-child(2),
[data-panel='fukura'] .tt-matrix tr > :nth-child(8),
[data-panel='fukura'] .tt-matrix tr > :nth-child(9) {
	border-left: 2px solid var(--amber2);
	border-right: 2px solid var(--amber2);
}
[data-panel='air'] .tt-matrix thead .origin > :nth-child(2),
[data-panel='air'] .tt-matrix thead .origin > :nth-child(8),
[data-panel='air'] .tt-matrix thead .origin > :nth-child(9),
[data-panel='air'] .tt-matrix thead .origin > :nth-child(10),
[data-panel='fukura'] .tt-matrix thead .origin > :nth-child(2),
[data-panel='fukura'] .tt-matrix thead .origin > :nth-child(8),
[data-panel='fukura'] .tt-matrix thead .origin > :nth-child(9) {
	border-top: 2px solid var(--amber2);
}
[data-panel='air'] .tt-matrix tbody tr:last-child > :nth-child(2),
[data-panel='air'] .tt-matrix tbody tr:last-child > :nth-child(8),
[data-panel='air'] .tt-matrix tbody tr:last-child > :nth-child(9),
[data-panel='air'] .tt-matrix tbody tr:last-child > :nth-child(10),
[data-panel='fukura'] .tt-matrix tbody tr:last-child > :nth-child(2),
[data-panel='fukura'] .tt-matrix tbody tr:last-child > :nth-child(8),
[data-panel='fukura'] .tt-matrix tbody tr:last-child > :nth-child(9) {
	border-bottom: 2px solid var(--amber2);
}
/* 停留所名（固定列） */
.tt-matrix .stop-col {
	position: sticky;
	left: 0;
	z-index: 2;
	background: #fff;
	text-align: left;
	font-weight: 700;
	color: var(--navy);
	font-size: 12px;
	min-width: 120px;
	border-left: none;
	box-shadow: 1px 0 0 #e7f1f5;
}
/* ヘッダー＝始発（発）行 */
.tt-matrix thead .origin th {
	background: var(--blue);
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	position: sticky;
	top: 0;
}
.tt-matrix thead .origin .stop-col {
	background: var(--blue-deep);
	z-index: 3;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
}
/* 「予約」バッジ＝時刻の真上・表の外（上の余白）に浮かせて表示 */
.tt-matrix .resv {
	/* 運行会社（最上段）の上に浮かせて表示する「予約」バッジ */
	position: absolute;
	top: -27px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
	color: #fff;
	background: var(--grad-amber);
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;
	box-shadow: 0 2px 5px rgba(255, 138, 61, 0.45);
	z-index: 2;
}
/* 予約便は予約がないと運行されない旨を強調するアラート */
.tt-resv-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0 14px;
	padding: 12px 14px;
	background: #fff7ee;
	border: 1.5px solid var(--amber2);
	border-radius: 12px;
	color: #8a4b1d;
	font-size: 14px;
	line-height: 1.6;
	font-weight: 700;
}
.tt-resv-alert .ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--grad-amber);
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
}
.tt-resv-alert strong {
	color: #c25a16;
	font-weight: 900;
}
.tt-resv-alert .resv-word {
	color: #c25a16;
}
/* 終点（着）行は他の行と同じ背景に（透明化。予約便列では col の淡いオレンジ背景を透過表示する） */
.tt-matrix .dest th,
.tt-matrix .dest td {
	background: transparent;
}
.tt-matrix .dest .stop-col {
	background: #fff;
}
/* 接続便行（旧・終点行の薄色をこちらに移動） */
.tt-matrix .conn-row td,
.tt-matrix .conn-row .stop-col {
	white-space: normal;
	/* 接続便の便名・時刻も時刻表の数字（td）と同じ大きさ・一段濃い色に */
	font-size: 14px;
	font-weight: 600;
	color: var(--text2);
	line-height: 1.4;
	background: #f2fafd;
}
.tt-matrix .conn-row .stop-col {
	/* 接続便のタイトルは時刻（td）と同じ大きさに */
	font-size: 14px;
	font-weight: 700;
	color: var(--blue-deep);
	background: #eaf4f9;
}
.tt-dir {
	display: none;
	font-size: 14px;
	font-weight: 900;
	color: var(--blue-deep);
	margin: 20px 0 10px;
}

/* =========================================================================
   FARE
   ========================================================================= */
.fare-table {
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 16px rgba(11, 59, 84, 0.05);
}
.fare-table .head {
	display: flex;
	background: var(--bg-blue);
	font-size: 11px;
	font-weight: 800;
	color: #5b7a8a;
	padding: 11px 14px;
}
.fare-row {
	display: flex;
	align-items: center;
	padding: 13px 14px;
	border-top: 1px solid #eef4f6;
}
.fare-row .sec {
	flex: 2;
	font-size: 13.5px;
	font-weight: 700;
}
.fare-row .adult {
	flex: 1;
	text-align: right;
	font-size: 15px;
	font-weight: 900;
}
.fare-row .child {
	flex: 1;
	text-align: right;
	font-size: 14px;
	color: var(--navy);
}
.fare-table .head .sec {
	flex: 2;
}
.fare-table .head .adult,
.fare-table .head .child {
	flex: 1;
	text-align: right;
	font-weight: 800;
}

/* ===== 運賃マトリクス（三角運賃表） ===== */
.fare-cap {
	font-size: 12px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 8px;
}
.fare-matrix-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 6px 16px rgba(11, 59, 84, 0.05);
}
.fare-matrix {
	border-collapse: collapse;
	width: max-content;
	min-width: 100%;
	font-size: 14px;
}
.fare-matrix th,
.fare-matrix td {
	padding: 9px 8px;
	text-align: center;
	border-bottom: 1px solid #eef4f6;
	border-left: 1px solid #f1f6f8;
	line-height: 1.35;
}
.fare-matrix tr:last-child th,
.fare-matrix tr:last-child td {
	border-bottom: none;
}
.fare-matrix thead th {
	position: sticky;
	top: 0;
	background: var(--blue);
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	min-width: 78px;
}
.fare-matrix .row-h,
.fare-matrix .corner {
	position: sticky;
	left: 0;
	z-index: 2;
	text-align: left;
	background: var(--bg-chip);
	color: var(--navy);
	font-size: 12px;
	font-weight: 700;
	min-width: 122px;
	border-left: none;
	box-shadow: 1px 0 0 #e7f1f5;
}
.fare-matrix .corner {
	z-index: 3;
	background: var(--blue-deep);
	color: #fff;
	font-weight: 800;
	font-size: 11px;
}
.fare-matrix tbody td {
	font-weight: 800;
	color: var(--navy);
	min-width: 66px;
	white-space: nowrap;
}
.fare-matrix tbody td.fx {
	background: #f4f8fa;
}
.fare-matrix tbody td.na {
	color: #b9cad3;
	font-weight: 700;
}
.fare-note {
	line-height: 1.85;
}

/* =========================================================================
   RESERVE band + form
   ========================================================================= */
.reserve-band {
	padding: 36px 18px;
	background: linear-gradient(135deg, #13a3d6, #0a6ea0);
	position: relative;
	overflow: hidden;
	color: #fff;
}
.reserve-band::before {
	content: '';
	position: absolute;
	bottom: -140px;
	left: -80px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
	opacity: 0.5;
	animation: obSpin 70s linear infinite;
}
.reserve-band .inner {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}
.reserve-band h2 {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.35;
}
.band-tags {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.band-lead {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}
.band-tags span {
	font-size: 14px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.18);
	padding: 8px 15px;
	border-radius: 999px;
}
.band-btns {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.band-btns .btn-amber {
	font-size: 17px;
	padding: 18px;
	width: 100%;
}
/* 「一部便は予約が必要です」白枠線の注意あしらい */
.reserve-alert {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 10px 18px 10px 11px;
	background: transparent;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.35;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 12px;
}
.reserve-alert strong {
	font-weight: 900;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}
.reserve-alert-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	color: var(--blue-deep);
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
}

/* =========================================================================
   PAYMENT
   ========================================================================= */
.pay-lead {
	font-size: 14px;
	color: var(--text2);
	line-height: 1.8;
	margin-bottom: 18px;
}
/* 運行会社別の決済方法カード */
.pay-ops {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.pay-op {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	background: #fff;
	border: 1px solid var(--border2);
	border-radius: 15px;
	padding: 18px 20px 20px;
	box-shadow: var(--shadow-card);
}
.pay-op-co {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 17px;
	font-weight: 800;
	color: var(--navy);
	margin-bottom: 13px;
}
.pay-op-badge {
	font-size: 11px;
	font-weight: 700;
	color: var(--green-deep);
	background: var(--bg-chip);
	border: 1px solid var(--border2);
	padding: 3px 9px;
	border-radius: 999px;
	line-height: 1.4;
}
.pay-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pay-tags span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--navy);
	background: var(--bg-chip);
	border: 1px solid var(--border2);
	padding: 11px 17px;
	border-radius: 999px;
}
.pay-tags span::before {
	content: '✓';
	color: var(--green-deep);
	font-weight: 900;
	font-size: 14px;
}
.pay-op-note {
	font-size: 13px;
	color: var(--text2);
	line-height: 1.7;
	margin-top: 11px;
}
.pay-op-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--green-deep);
	text-decoration: none;
	background: var(--bg-chip);
	border: 1px solid var(--border2);
	padding: 9px 16px;
	border-radius: 999px;
}
.pay-op-link .ext {
	font-size: 12px;
}

/* =========================================================================
   RESERVATION / TICKET LOCATIONS
   ========================================================================= */
.ticket-lead {
	font-size: 14px;
	color: var(--text2);
	line-height: 1.8;
	margin: 0 0 16px;
	max-width: 640px;
	text-align: left;
}
/* 路線図の停留所名 PC専用改行（スマホでは1行のまま） */
.rt-br {
	display: none;
}
/* PC・タブレット用改行（スマホでは無効、600px以上で有効） */
.pc-br {
	display: none;
}
/* スマホ専用改行（600px以上で無効） */
.sp-br {
	display: inline;
}
@media (min-width: 600px) {
	.pc-br {
		display: inline;
	}
	.sp-br {
		display: none;
	}
}
.ticket-attn {
	font-weight: 800;
	color: var(--blue-deep);
	font-size: 22px;
}
.ticket-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.ticket-card {
	background: #fff;
	border: 1px solid var(--border2);
	border-radius: 15px;
	padding: 20px 28px 15px;
	box-shadow: var(--shadow-card);
}
.ticket-co {
	font-size: 18px;
	font-weight: 800;
	color: var(--navy);
	margin-bottom: 7px;
}
.ticket-tel {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 24px;
	font-weight: 900;
	color: var(--blue);
	text-decoration: none;
	letter-spacing: 0.01em;
}
.ticket-tel .ico {
	font-size: 24px;
}
.ticket-hours {
	font-size: 16px;
	color: var(--navy);
	margin-top: 3px;
}
.ticket-map {
	display: flex;
	width: fit-content;
	margin-left: auto;
	align-items: center;
	margin-top: 12px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--blue-deep);
	text-decoration: none;
	background: var(--bg-chip);
	padding: 8px 15px;
	border-radius: 999px;
}

/* reserve form */
.form-wrap {
	max-width: 680px;
	margin: 24px auto 0;
}
.form-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px 16px;
	margin-bottom: 14px;
	box-shadow: var(--shadow-card);
}
.form-card h3 {
	font-size: 14px;
	font-weight: 800;
	margin-bottom: 14px;
	color: var(--blue-deep);
}
.form-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #5b7a8a;
	margin-bottom: 6px;
}
.form-label .req {
	color: #ff6a4d;
}
.field {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid #d8e6ec;
	border-radius: 12px;
	font-size: 15px;
	font-family: inherit;
	color: var(--navy);
	background: #fff;
	outline: none;
}
.field:focus {
	border-color: var(--blue);
}
.field-row {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}
.field-row .col {
	flex: 1;
}
.mt14 {
	margin-top: 14px;
}
.err {
	font-size: 11.5px;
	color: #ff6a4d;
	font-weight: 700;
	margin-top: 5px;
	display: none;
}
.err.show {
	display: block;
}
.counter {
	flex: 1;
	background: #f7fbfd;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px;
}
.counter .lab {
	font-size: 12px;
	font-weight: 700;
	color: #5b7a8a;
	margin-bottom: 9px;
}
.counter .ctrl {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.counter button {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	border: 1.5px solid #cfe6ef;
	background: #fff;
	color: var(--blue-deep);
	font-size: 18px;
	font-weight: 900;
	cursor: pointer;
}
.counter .val {
	font-size: 18px;
	font-weight: 900;
}
.form-submit {
	width: 100%;
	height: 54px;
	font-size: 16px;
	margin-top: 4px;
}

/* done */
.done {
	display: none;
	max-width: 520px;
	margin: 24px auto 0;
	text-align: center;
	background: linear-gradient(180deg, #eaf7fc, #d2ecf8);
	border-radius: 18px;
	padding: 36px 22px;
}
.done.show {
	display: block;
}
.done .check {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: linear-gradient(135deg, #13a3d6, #0a6ea0);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 26px rgba(13, 143, 196, 0.34);
	margin: 0 auto 18px;
	color: #fff;
	font-size: 38px;
	font-weight: 900;
}
.done h2 {
	font-size: 23px;
	font-weight: 900;
	margin-bottom: 6px;
}
.done .sub {
	font-size: 14px;
	color: var(--text2);
	line-height: 1.7;
	font-weight: 600;
	margin-bottom: 20px;
}
.done .receipt {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 20px 18px;
	box-shadow: 0 10px 24px rgba(11, 59, 84, 0.08);
	text-align: left;
}
.done .receipt .r-no {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px dashed #d9e7ee;
}
.done .receipt .r-no .k {
	font-size: 12px;
	color: var(--navy);
	font-weight: 700;
}
.done .receipt .r-no .v {
	font-size: 18px;
	font-weight: 900;
	color: var(--blue-deep);
	letter-spacing: 0.05em;
}
.done .receipt .r-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 0;
	border-bottom: 1px solid #f0f5f7;
}
.done .receipt .r-line:last-child {
	border-bottom: none;
}
.done .receipt .k {
	font-size: 12px;
	color: var(--navy);
	font-weight: 700;
}
.done .receipt .v {
	font-size: 14px;
	font-weight: 800;
}
.done .back {
	margin-top: 18px;
	width: 100%;
	height: 54px;
	background: #fff;
	color: var(--blue-deep);
	font-weight: 900;
	font-size: 16px;
	border: 1.5px solid #b9dcea;
	border-radius: 14px;
	cursor: pointer;
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.faq-item {
	background: #f7fbfd;
	border: 1px solid var(--border);
	border-radius: 13px;
	overflow: hidden;
}
.faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: none;
	border: none;
	padding: 15px 14px;
	cursor: pointer;
	text-align: left;
}
.faq-q .q-txt {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--navy);
}
.faq-q .q-ico {
	font-size: 18px;
	font-weight: 900;
	color: var(--blue);
	flex: 0 0 auto;
}
.faq-q .q-ico::after {
	content: '＋';
}
.faq-item.open .faq-q .q-ico::after {
	content: '−';
}
.faq-a {
	display: none;
	padding: 0 14px 15px;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--text2);
}
.faq-item.open .faq-a {
	display: block;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
	padding: 28px 18px 30px;
	background: linear-gradient(180deg, #0a6ea0, #084e72);
	color: #fff;
}
.site-footer .inner {
	max-width: var(--maxw);
	margin: 0 auto;
}
.footer-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}
.footer-logo img {
	height: 60px;
	width: auto;
	display: block;
}
.footer-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.78);
	text-align: center;
}
.footer-contact {
	margin-top: 33px;
}
.fc-ttl {
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 12px;
}
.fc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fc-list li {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}
.fc-list a {
	font-weight: 800;
	color: #fff;
	text-decoration: none;
}
.fc-list li span {
	display: block;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 1px;
}

/* =========================================================================
   STICKY CTA BAR (mobile only)
   ========================================================================= */
.sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(10px);
	border-top: 1px solid #eaf1f4;
	box-shadow: 0 -6px 18px rgba(11, 59, 84, 0.06);
}
.sticky-cta .ico-btn {
	flex: 0 0 auto;
	height: 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #cfe6ef;
	border-radius: 14px;
	color: var(--blue-deep);
	background: #fff;
	font-size: 11px;
	font-weight: 800;
	gap: 2px;
	cursor: pointer;
	text-decoration: none;
	padding: 0 14px;
}
.sticky-cta .ico-btn.tel {
	width: 52px;
	padding: 0;
}
.sticky-cta .ico-btn .big {
	font-size: 15px;
	font-weight: 900;
}
.sticky-cta .btn-amber {
	flex: 1;
	height: 52px;
	font-size: 16px;
	padding: 0;
}

/* =========================================================================
   RESPONSIVE — Tablet / PC
   ========================================================================= */
@media (min-width: 768px) {
	body {
		padding-bottom: 0;
	}
	.sticky-cta {
		display: none;
	}
	.quicknav {
		display: none;
	}

	.site-header {
		padding: 16px 40px;
	}
	.site-header .logo img {
		height: 50px;
	}
	.header-nav {
		display: flex;
		align-items: center;
		gap: 22px;
	}
	.header-nav a {
		font-size: 13.5px;
		font-weight: 700;
		color: var(--text2);
		text-decoration: none;
		background: none;
		border: none;
		cursor: pointer;
	}
	.header-nav a:hover {
		color: var(--blue);
	}
	/* ticket-lead は PC では中央寄せ */
	#ticket .ticket-lead {
		margin: 0 auto 16px;
		text-align: center;
	}
	.btn-reserve-sm {
		font-size: 13.5px;
		padding: 11px 22px;
		box-shadow: 0 6px 14px rgba(255, 138, 61, 0.3);
	}

	.section-inner,
	.wrap {
		padding: 0 40px;
	}
	section {
		padding: 56px 0;
	}
	.sec-head {
		text-align: center;
		margin-bottom: 36px;
	}
	.sec-title {
		font-size: 32px;
	}

	/* hero */
	.hero {
		padding: 30px;
		background: #84bd5b;
	}
	.hero::before {
		top: -90px;
		left: -70px;
		width: 300px;
		height: 300px;
	}
	/* PCはヒーロー右上に配置（hero-bus を static にして hero-inner 基準に戻す） */
	.hero-bus {
		position: static;
	}
	.hero-logo {
		top: 6px;
		left: 0;
		right: 0;
		bottom: auto;
		margin: 0 auto;
		width: 400px;
		max-width: none;
		z-index: 4;
		opacity: 0;
		transform: scale(0.4);
		transform-origin: 70% 40%;
		animation: heroLogoPop 0.333s cubic-bezier(0.34, 1.7, 0.5, 1) 1.033s forwards;
	}
	.hero-text {
		position: relative;
		z-index: 3;
		max-width: 280px;
	}
	.hero h1 {
		font-size: 25px;
		line-height: 1.22;
		text-align: center;
		text-shadow: none;
		color: #3e4170;
	}
	.hero-sub {
		font-size: 17px;
		max-width: 480px;
	}
	.hero-bus {
		height: auto;
		margin: 130px 0 0;
	}
	.hero-bus .bus-img {
		position: relative;
		left: auto;
		transform: none;
		display: block;
		/* 3種のバスで高さを一定にしてヒーロー高さを固定（幅自動・画面幅に追従） */
		height: clamp(220px, 27vw, 320px);
		width: auto;
		margin: 0 auto;
		filter: drop-shadow(0 16px 22px rgba(8, 50, 75, 0.3));
		/* PCは中央寄せが margin:auto のため translateX(0) が中央 */
		animation: heroBusLoopPC 5.333s ease-in-out 1.333s infinite both;
	}
	@keyframes heroBusLoopPC {
		0% {
			transform: translateX(120%);
		}
		15% {
			transform: translateX(0);
		}
		71% {
			transform: translateX(0);
		}
		87.5%,
		100% {
			transform: translateX(-140%);
		}
	}
	.hero-bus .shadow {
		display: none;
	}
	.hero-cta {
		justify-content: center;
		margin-top: 28px;
	}
	.hero-cta .btn-amber,
	.hero-cta .btn-white {
		flex: 0 0 auto;
	}
	.hero-cta .btn-amber {
		font-size: 17px;
		padding: 17px 40px;
	}
	.hero-cta .btn-white {
		font-size: 15px;
		padding: 17px 32px;
	}

	/* places */
	.places-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 22px;
		max-width: 1000px;
		margin: 0 auto;
	}
	.place-card {
		border-radius: 18px;
		box-shadow: var(--shadow-card);
	}
	.place-card img {
		height: 210px;
	}
	.place-card .body {
		padding: 18px 20px 20px;
	}
	.place-card .name {
		font-size: 18px;
	}
	.place-card .tag {
		margin-top: auto;
		font-size: 11px;
		padding: 4px 11px;
	}
	.place-card .desc {
		display: none;
	}
	.place-card .desc-long {
		display: block;
		font-size: 14px;
		color: var(--navy);
		margin-top: 7px;
		margin-bottom: 12px;
		line-height: 1.6;
	}

	/* UZS BUS — 3台を横並び */
	.uzsbus-lead {
		font-size: 15px;
		text-align: center;
		max-width: 880px;
		margin: 0 auto 28px;
	}
	.uzsbus-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 22px;
		max-width: 1000px;
		margin: 0 auto;
	}
	.uzsbus-item {
		display: flex;
		flex-direction: column;
		padding: 18px 20px 16px;
	}
	.uzsbus-item img {
		height: 130px;
		object-fit: contain;
		margin: auto 0;
	}
	.uzsbus-item figcaption {
		font-size: 16px;
	}

	/* CHARACTERS — 2カラム */
	.chara-grid {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		max-width: 1000px;
		margin: 0 auto;
	}
	.chara-card {
		padding: 24px 26px 26px;
	}
	.chara-img img {
		height: 200px;
	}
	.chara-name {
		font-size: 20px;
	}
	.chara-desc {
		font-size: 14.5px;
	}

	/* route — horizontal */
	.route-map {
		max-width: 920px;
		margin: 0 auto 36px;
		border-radius: 18px;
	}
	.stepper {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 4px;
		flex-wrap: nowrap;
		max-width: 1120px;
		margin: 0 auto;
		padding-left: 0;
	}
	.stepper .line {
		display: none;
	}
	.stop {
		flex-direction: column;
		align-items: center;
		width: 118px;
		padding: 0;
		text-align: center;
	}
	.stop .node {
		margin: 0;
	}
	.stop.end-a .node,
	.stop.end-b .node {
		width: 24px;
		height: 24px;
		border: 4px solid #fff;
	}
	.stop .node {
		margin-top: 4px;
	}
	.stop.end-a .node,
	.stop.end-b .node {
		margin-top: 0;
	}
	.stop .pill {
		flex: none;
		background: none;
		border: none;
		border-radius: 0;
		padding: 0;
		flex-direction: column;
		gap: 3px;
		margin-top: 12px;
	}
	.stop .pill .nm {
		font-size: 14px;
	}
	.leg {
		padding: 0;
		padding-top: 8px;
		width: 34px;
		text-align: center;
		color: #9fc4d4;
		font-size: 14px;
		font-weight: 700;
	}
	.leg .arrow-down {
		display: none;
	}
	/* route stepper — 全バス停を1本の直線で結び、区間ごとに所要時間を表示 */
	#route .stop .node {
		position: relative;
		z-index: 1;
	}
	/* 始発「徳島阿波おどり空港」は折り返さず1行で（列幅は118pxのまま、はみ出しは許容） */
	#route .stop.end-a .pill,
	#route .stop.end-a .pill .nm {
		white-space: nowrap;
	}
	#route .leg {
		position: relative;
		padding-top: 16px;
		white-space: nowrap;
	}
	/* 隣り合うノード中心どうしを実線でつなぐ（左右の停留所の中心まで伸ばす） */
	#route .leg::before {
		content: '';
		position: absolute;
		top: 10px;
		left: -63px;
		width: 160px;
		height: 3px;
		background: linear-gradient(90deg, var(--green), var(--blue));
		border-radius: 3px;
		z-index: 0;
	}
	#route .leg::after {
		content: none;
	}
	/* 始発・終点の停留所名を他バス停と同じ高さに揃える（大きいノードの分だけ詰める） */
	#route .stop.end-a .pill,
	#route .stop.end-b .pill {
		margin-top: 6px;
	}
	/* アオアヲナルトリゾート前は PC で「アオアヲナルト」で改行 */
	#route .rt-br {
		display: inline;
	}
	.leg::before {
		content: '— ';
	}
	.leg::after {
		content: ' →';
	}

	/* shuttle — PCも縦並び（スマホと同じ） */
	.shuttle-grid {
		max-width: 720px;
		margin: 0 auto;
	}
	.shuttle-lead {
		font-size: 14px;
		margin-bottom: 20px;
	}

	/* shuttle / naruto stepper — PCは横並び（◎—◎を上段、バス停名は下段） */
	.shuttle-card .stepper {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 10px;
		padding-left: 0;
	}
	.shuttle-card .stepper .line {
		display: none;
	}
	.shuttle-card .stepper > .shuttle-row,
	.shuttle-card .stepper > .shuttle-via {
		position: relative;
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0;
		padding: 0;
	}
	/* ◎と◎をつなぐ横線（最後の項目以外に右へ伸ばす）。
	   gap:10px ぶん隣の項目が離れるため、線も +10px 伸ばして隣の中心まで届かせる */
	.shuttle-card .stepper > .shuttle-row::after,
	.shuttle-card .stepper > .shuttle-via::after {
		content: '';
		position: absolute;
		top: 9px;
		left: 50%;
		width: calc(100% + 10px);
		height: 3px;
		background: #b9d9c0;
		z-index: 0;
	}
	.shuttle-card .stepper > *:last-child::after {
		display: none;
	}
	.shuttle-card .stepper .node {
		position: relative;
		z-index: 1;
	}
	.shuttle-card .stepper .shuttle-body {
		flex: 0 0 auto;
		width: 100%;
		margin-top: 18px;
	}
	.shuttle-card .stepper .shuttle-photo {
		height: 148px;
	}
	/* via（バスのイラスト）は横線から少し離して下にぶら下げる */
	.shuttle-card .stepper > .shuttle-via {
		padding-top: 32px;
	}
	.shuttle-card .stepper .shuttle-bus {
		width: 190px;
	}
	.shuttle-card .stepper .shuttle-via-label {
		justify-content: center;
		margin-top: 8px;
	}
	.sec-title.left {
		font-size: 28px;
		line-height: 1.32;
	}

	/* course + timetable — 縦積み・時刻表は全幅で接続便まで表示 */
	.ct-stack {
		max-width: 1040px;
		margin: 0 auto;
	}
	.course-block {
		display: block;
		max-width: 700px;
		margin: 0 auto 44px;
	}
	.course-img {
		order: 0;
	}
	.time-block {
		max-width: 1040px;
		margin: 0 auto;
	}
	.course-img {
		height: 400px;
	}
	.tabs {
		max-width: 300px;
	}

	/* timetable — 両方向を接続便つきで表示 / トグルは非表示 */
	.tt-toggle {
		display: none;
	}
	.tt-lead-m {
		display: none;
	}
	section[id],
	[id] {
		scroll-margin-top: 80px;
	}
	/* PC＝上下2表（全幅）。横スクロール不要なので幅いっぱいに広げる */
	.tt-tables {
		display: block;
	}
	.tt-panel {
		display: block !important;
	}
	.tt-panel + .tt-panel {
		margin-top: 24px;
	}
	.tt-dir {
		display: block;
	}
	.tt-scroll {
		overflow-x: visible;
	}
	.tt-matrix {
		font-size: 14px;
	}
	.tt-matrix th,
	.tt-matrix td {
		padding: 11px 6px;
	}
	.tt-matrix .stop-col {
		min-width: 150px;
		font-size: 14px;
	}
	.tt-matrix thead .origin th {
		font-size: 15px;
	}
	.tt-matrix .conn-row td,
	.tt-matrix .conn-row .stop-col {
		/* PCは時刻（td）が14pxなので接続便も14pxに */
		font-size: 14px;
	}

	/* fare */
	.fare-wrap {
		max-width: 840px;
		margin: 0 auto;
	}
	.fare-table {
		border-radius: 18px;
	}
	.fare-table .head {
		background: #fff;
		padding: 14px 24px;
		font-size: 12px;
		border-bottom: 1px solid #eef4f6;
	}
	.fare-row {
		padding: 16px 24px;
		border-top: none;
		border-bottom: 1px solid #f0f5f7;
	}
	.fare-row:last-child {
		border-bottom: none;
	}
	.fare-row .sec {
		font-size: 15px;
	}
	.fare-row .adult {
		font-size: 18px;
	}
	.fare-row .child {
		font-size: 14px;
	}

	/* reserve band 2col */
	.reserve-band {
		padding: 60px 40px;
	}
	.reserve-band .inner {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: 40px;
		align-items: center;
	}
	.reserve-band h2 {
		font-size: 30px;
	}
	.reserve-alert {
		font-size: 16px;
		padding: 11px 20px 11px 13px;
	}
	.band-tags {
		margin-bottom: 0;
	}

	/* faq */
	.faq-wrap {
		max-width: 760px;
		margin: 0 auto;
	}
	.faq-q {
		padding: 19px 22px;
	}
	.faq-q .q-txt {
		font-size: 15.5px;
	}
	.faq-q .q-ico {
		font-size: 22px;
	}
	.faq-a {
		padding: 0 22px 20px;
		font-size: 14px;
		line-height: 1.8;
	}
	.faq-item {
		border-radius: 14px;
	}

	/* footer */
	.site-footer {
		padding: 40px;
	}
	.site-footer .inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 16px;
	}
	.footer-logo {
		justify-content: flex-start;
		margin-bottom: 0;
	}
	.footer-logo img {
		height: 100px;
	}
	.footer-text {
		font-size: 14px;
		text-align: right;
	}
	.footer-info {
		text-align: right;
	}

	/* payment / ticket — PC */
	.ticket-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		max-width: 600px;
		margin: 0 auto;
	}
	/* payment は PC では見出し・リードを中央寄せ、カードは3カラム */
	#payment .section-inner {
		text-align: center;
	}
	#payment .pay-lead {
		text-align: center;
	}
	#payment .pay-ops {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
}

/* アニメーションを抑制する設定の場合は最終状態を即時表示 */
@media (prefers-reduced-motion: reduce) {
	.hero-fx {
		clip-path: none;
		animation: none;
	}
	.hero-fx-blue {
		transform: rotate(0deg);
		animation: none;
	}
	.hero-badge,
	.hero h1,
	.hero-sub,
	.hero-logo {
		opacity: 1;
		transform: none;
		animation: none;
	}
	.hero-bus .bus-img,
	.hero-bus .shadow {
		animation: none;
	}
}

/* ============ SP（〜767px）ヒーロー調整 ============ */
@media (max-width: 767px) {
	/* ヒーローを画面下端まで（ヘッダー56px＋クイックナビ約56px＝約112pxを差し引く） */
	.hero {
		min-height: calc(100vh - 112px);
		min-height: calc(100dvh - 196px);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.hero-inner {
		width: 100%;
	}
	/* フッタに予約ボタンがあるため、SP ではヒーローの CTA は非表示 */
	.hero-cta {
		display: none;
	}
	/* 運行開始の告知（雲）：中央寄せ・やや小さめ */
	.hero-notice {
		width: min(90%, 360px);
		margin: 18px auto 0;
		font-size: 15px;
	}
	/* 淡路うず助クレジット（画面左下） */
	.hero-credit {
		left: 14px;
		bottom: 14px;
	}
}