@charset "UTF-8";
/* =========================================================
   トップページ 共通セクション（A / B / C 共通部分）
   ========================================================= */

.ca-front { display: block; }
.ca-sec { padding-block: 80px; }

/* ---- セクション見出し  Figma: contentstitle ------------ */
.ca-ttl {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 30px;
	font: 700 24px/1.4 var(--ca-font);
	letter-spacing: .06em;
	color: var(--ca-navy);
}
.ca-ttl__mark {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	background: url("../img/common/ttl-mark.png") no-repeat center / contain;
}

/* =========================================================
   貸切バスを探す
   ========================================================= */
.ca-search { padding-top: 60px; padding-bottom: 50px; }

/* ---- セクション背景はパターンごとに違う（Figma実測） -------
   A : 全幅 1920 / FVの斜めライン上にすりガラス（#192942 50% + blur）
   B : 左右 40px インセットの 1540 幅 / #eef4ff / 角丸20（下端のバーまで1ブロック）
   C : 全幅 1620 / #eef4ff
   ----------------------------------------------------------- */
body.is-pattern-a .ca-search {
	position: relative;
	background: rgba(25, 41, 66, .5);
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
}
/* 見出しの文字だけ白。マークはデザイン通り元の青のまま使う */
body.is-pattern-a .ca-search .ca-ttl { color: #fff; }

body.is-pattern-b .ca-search,
body.is-pattern-c .ca-search { background: var(--ca-bg-gray); }

body.is-pattern-b .ca-search {
	margin-inline: clamp(16px, 2.47%, 40px);
	border-radius: 20px 20px 0 0;
}
body.is-pattern-b .ca-contactbar {
	margin-inline: clamp(16px, 2.47%, 40px);
	border-radius: 0 0 20px 20px;
	overflow: hidden;
}

/* Figma 実測: 300px幅 x3、隙間なし。アクティブだけ背が高い */
.ca-tabs { display: flex; align-items: flex-end; }
.ca-tabs__btn {
	flex: 0 0 25%;
	height: 40px;
	border: 0;
	border-radius: 6px 6px 0 0;
	background: var(--ca-navy);
	color: #fff;
	font: 700 14px/1 var(--ca-font);
	letter-spacing: .04em;
	cursor: pointer;
	transition: filter .2s, height .2s ease, background-color .2s ease;
}
.ca-tabs__btn:hover { filter: brightness(1.1); }
.ca-tabs__btn.is-active { height: 48px; background: var(--ca-blue); }

/* 2番目のタブだけパターンごとに色が違う（Figma実測） */
body.is-pattern-a .ca-tabs__btn:nth-child(2) { background: var(--ca-red); }    /* #df1e3e */
body.is-pattern-b .ca-tabs__btn:nth-child(2) { background: var(--ca-orange); } /* #f96c26 */
body.is-pattern-c .ca-tabs__btn:nth-child(2) { background: #045ed3; }

.ca-search__panel {
	padding: 0;
	border-radius: 10px;
	background: transparent;
}
.ca-search__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 20px;
	border-radius: 0 10px 10px 10px;
	background: #fff;
	box-shadow: 0 4px 20px rgba(8, 56, 134, .08);
}

.ca-scard {
	position: relative;
	display: grid;
	/* Figma実測: 文字パネル : 写真 = 50 : 50、カードは 373 x 220（比 1.69） */
	grid-template-columns: 1fr 1fr;
	min-height: 220px;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	transition: transform .2s, box-shadow .2s;
}
.ca-scard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(8, 56, 134, .18); }

/* Figma実測: 内側の余白15px、見出し18px / en14px / リスト12px、
   リストはカード下端に寄せる（見出しとの間が大きく空く）。
   青パネルは写真の上に重なる不透明度90%のグラデ。グラデ自体はカード全幅
   （＝パネル幅の2倍）に渡るので background-size で伸ばす */
.ca-scard__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 15px;
	min-width: 0;
	background: linear-gradient(90deg, rgba(34, 119, 230, .9) 0%, rgba(235, 235, 235, .9) 100%);
	background-size: 200% 100%;
}
.ca-scard__ja { margin: 0; font: 700 18px/1.4 var(--ca-font); letter-spacing: .04em; white-space: nowrap; }
.ca-scard__en { margin: 2px 0 0; font: 600 14px/1.2 var(--ca-font-en); opacity: .85; }
.ca-scard__list { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
/* 項目の途中で折り返さない（1項目=1行）。Figmaでは行頭の「・」なし */
.ca-scard__list li { font: 400 12px/1.5 var(--ca-font); opacity: .95; white-space: nowrap; }

/* 写真はカード全面に敷く（左半分は上の青パネルから透けて見える） */
.ca-scard__img { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ca-scard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Figma実測: 白い輪郭だけの丸（中は透明）30px、右下から18px */
.ca-scard__arrow {
	position: absolute;
	z-index: 1;
	right: 18px;
	bottom: 18px;
	width: 30px;
	height: 30px;
	border: 1.5px solid rgba(255, 255, 255, .9);
	border-radius: 50%;
	background: transparent;
}
.ca-scard__arrow::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	-webkit-mask: url("../img/common/arrow-sm-white.svg") no-repeat center / 12px 9px;
	        mask: url("../img/common/arrow-sm-white.svg") no-repeat center / 12px 9px;
}

/* ---- タブ切り替えのアニメーション ---------------------- */
/* display:none → 表示 に変わったタイミングで再生される */
@keyframes caPanelIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
@keyframes caCardIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
.ca-search__cards { animation: caPanelIn .3s ease backwards; }
.ca-search__cards > * { animation: caCardIn .42s cubic-bezier(.2, .7, .3, 1) backwards; }
.ca-search__cards > *:nth-child(2) { animation-delay: .07s; }
.ca-search__cards > *:nth-child(3) { animation-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
	.ca-search__cards,
	.ca-search__cards > * { animation: none; }
}

/* タブ②「乗車人数から」の写真カード */
.ca-search__cards[hidden] { display: none; }
.ca-search__cards--seat { align-items: start; }
/* タブ①以外がアクティブなときは左上も角丸 */
.ca-search__cards--seat,
.ca-search__cards--empty { border-radius: 10px; }
.ca-search__cards--empty { display: block; }
.ca-search__note { margin: 0; padding: 40px 0; text-align: center; font: 400 14px/1.6 var(--ca-font); color: #6b7b95; }

/* 写真は切り抜かず元の比率のまま（Figmaも写真そのままの比率＝約1.45）*/
.ca-seatcard {
	position: relative;
	display: block;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	transition: transform .2s, box-shadow .2s;
}
.ca-seatcard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(8, 56, 134, .18); }
.ca-seatcard__img { display: block; width: 100%; height: auto; }
/* 下端の帯。Figma: 線形 左#2277E6 → 右#EBEBEB / 不透明度90%（高さはカードの約23%）*/
.ca-seatcard::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 58px;
	background: linear-gradient(90deg, rgba(34, 119, 230, .9) 0%, rgba(235, 235, 235, .9) 100%);
}
.ca-seatcard__label {
	position: absolute;
	left: 16px;
	bottom: 22px;
	z-index: 1;
	margin: 0;
	font: 700 14px/1 var(--ca-font);
	letter-spacing: .04em;
}
/* 帯の上の矢印はひとまわり小さく（実測24px）、帯の中で天地中央に */
.ca-seatcard .ca-scard__arrow {
	z-index: 1;
	right: 18px;
	bottom: 17px;
	width: 24px;
	height: 24px;
}

/* =========================================================
   お問い合わせバー
   ========================================================= */
.ca-contactbar { background: var(--ca-blue); }
.ca-contactbar__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 24px;
	max-width: calc(var(--ca-container) + 340px);
	margin-inline: auto;
	min-height: 120px;
	padding: 20px 24px;
}
.ca-contactbar__lead { margin: 0; font: 700 20px/1.4 var(--ca-font); letter-spacing: .05em; color: #fff; }
.ca-contactbar__btns { display: flex; gap: 10px; }

.ca-obtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding-inline: 16px;
	border: 1px solid #fff;
	border-radius: 4px;
	background: transparent;
	font: 500 13px/1 var(--ca-font);
	color: #fff;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.ca-obtn:hover { background: #fff; color: var(--ca-blue); }
.ca-obtn__ico,
.ca-tel__ico {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background: currentColor;
	-webkit-mask: url("../img/common/envelope.svg") no-repeat center / contain;
	        mask: url("../img/common/envelope.svg") no-repeat center / contain;
}

.ca-contactbar__tel {
	position: relative;
	padding: 10px 34px 10px 20px; /* 右は 24H受付 バッジの逃げ */
	border-radius: 4px;
	background: #fff;
}
.ca-tel { display: flex; gap: 18px; margin: 0; }
.ca-tel a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 700 20px/1.2 var(--ca-font-en);
	color: var(--ca-navy);
	text-decoration: none;
}
.ca-tel__note { margin: 4px 0 0; font: 400 11px/1.4 var(--ca-font); color: var(--ca-tx2); }
.ca-badge {
	position: absolute;
	right: -14px;
	top: -14px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ca-navy);
	font: 700 10px/1.15 var(--ca-font);
	color: #fff;
	text-align: center;
}

/* =========================================================
   企業情報
   ========================================================= */
.ca-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 535fr) minmax(0, 620fr);
	gap: 45px;
	align-items: start;
}
.ca-about__lead { margin: 0 0 18px; font: 700 26px/1.6 var(--ca-font); letter-spacing: .04em; }
.ca-about__lead em { font-style: normal; color: var(--ca-blue); }
.ca-about__txt { margin: 0 0 30px; font: 400 14px/2 var(--ca-font); color: var(--ca-tx2); }

/* 認定マークは枠の上端から 26px はみ出す（提供カンプの実測値）。
   上パディングを持たせず、バッジを absolute で負のオフセットに置く。 */
.ca-safety {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 216fr) minmax(0, 224fr);
	gap: 30px;
	align-items: center;
	margin-top: 40px;                 /* はみ出す分の逃げ */
	padding: 0 24px 20px;
	border-radius: 10px;
	background: var(--ca-bg-gray);
}
.ca-safety__mark { position: relative; padding-top: 94px; }
.ca-safety__badge {
	position: absolute;
	top: -26px;
	left: 50%;
	translate: -50% 0;
	width: min(133px, 62%);
	height: auto;
}
.ca-safety__caption {
	margin: 0;
	padding: 14px 8px;
	border-radius: 8px;
	/* カンプ実測: 左上 #2277e6 → 右下 #c3d4ea の斜めグラデ */
	background: linear-gradient(135deg, #2277e6 0%, #6da2e8 50%, #c3d4ea 100%);
	color: #fff;
	font: 700 13px/1.65 var(--ca-font);
	text-align: center;
}
.ca-safety .ca-counter { border: 0; background: transparent; padding: 0; }
.ca-safety .ca-counter__note {
	width: 100%;
	padding-top: 10px;
	border-top: 1px solid #cbd0d9;
}

.ca-about__boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ca-abox {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
}
.ca-abox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ca-abox::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 56, 134, .35), rgba(8, 56, 134, .05) 45%, rgba(8, 56, 134, .55)); }
.ca-abox:hover img { transform: scale(1.05); }
.ca-abox__en, .ca-abox__ja { position: absolute; z-index: 1; }
.ca-abox__en { left: 14px; top: 12px; font: 600 12px/1 var(--ca-font-en); letter-spacing: .06em; }
.ca-abox__ja { left: 14px; bottom: 14px; font: 700 15px/1 var(--ca-font); letter-spacing: .05em; }
.ca-abox__ja::before { content: "●"; margin-right: 6px; font-size: 8px; vertical-align: middle; }
.ca-abox__arrow {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 1;
	width: 22px;
	height: 22px;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 50%;
}
.ca-abox__arrow::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	-webkit-mask: url("../img/common/arrow-sm-white.svg") no-repeat center / 8px 6px;
	        mask: url("../img/common/arrow-sm-white.svg") no-repeat center / 8px 6px;
}

/* =========================================================
   Instagram
   ========================================================= */
.ca-insta { padding-block: 30px 40px; }
.ca-insta__id { margin: 0 0 12px; text-align: center; }
.ca-insta__id a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 12px/1 var(--ca-font);
	color: var(--ca-tx2);
	text-decoration: none;
}
.ca-insta__id .ca-insta-glyph { width: 16px; height: 16px; }

.ca-insta__strip { overflow: hidden; }
.ca-insta__track {
	display: flex;
	width: max-content;
	animation: ca-insta-scroll 60s linear infinite;
}
.ca-insta__card { display: block; width: 200px; height: 200px; flex: 0 0 200px; }
.ca-insta__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-insta__strip:hover .ca-insta__track { animation-play-state: paused; }

@keyframes ca-insta-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-1600px); } /* 200px * 8枚 */
}
@media (prefers-reduced-motion: reduce) {
	.ca-insta__track { animation: none; }
}

/* =========================================================
   ご利用の流れ
   ========================================================= */
.ca-flow { background: var(--ca-bg-gray); }
.ca-flow__list {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ca-flow__item { flex: 1 1 0; display: grid; justify-items: center; gap: 10px; text-align: center; }
.ca-flow__ico { width: 76px; height: 76px; border-radius: 50%; background: #d9d9d9; }
.ca-flow__ttl { margin: 0; font: 700 14px/1.5 var(--ca-font); color: var(--ca-navy); }
.ca-flow__txt { margin: 0; font: 400 12px/1.8 var(--ca-font); color: var(--ca-tx2); text-align: left; }
.ca-flow__arrow {
	flex: 0 0 20px;
	width: 0;
	height: 0;
	margin-top: 28px;
	border-left: 12px solid var(--ca-blue);
	border-block: 10px solid transparent;
}
.ca-flow__more { margin: 40px 0 0; text-align: center; }

.ca-linkbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 229px;
	height: 45px;
	padding-inline: 20px;
	border: 1px solid var(--ca-blue);
	border-radius: 4px;
	background: #fff;
	font: 500 13px/1 var(--ca-font);
	color: var(--ca-navy);
	text-decoration: none;
	transition: background .2s, color .2s;
}
.ca-linkbtn span {
	width: 8px;
	height: 6px;
	background: currentColor;
	-webkit-mask: url("../img/common/arrow-sm-blue.svg") no-repeat center / contain;
	        mask: url("../img/common/arrow-sm-blue.svg") no-repeat center / contain;
}
.ca-linkbtn:hover { background: var(--ca-blue); color: #fff; }
.ca-linkbtn--white { background: rgba(255, 255, 255, .95); border-color: #fff; }

/* =========================================================
   採用情報
   ========================================================= */
.ca-recruit__box {
	position: relative;
	min-height: 300px;
	border-radius: 10px;
	overflow: hidden;
	color: #fff;
}
.ca-recruit__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 素材そのものは淡い水色（平均 #99b6d5）で、Figma 側で青を重ねている。
   デザインの実測値（左 #4489e3 → 中 #5897e2 → 右 #69a1dc）に合わせた最小限のオーバーレイ。
   青が焼き込み済みの素材に差し替えたら、このブロックごと削除する。 */
.ca-recruit__box::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right,
		rgba(34, 119, 230, .72) 0%,
		rgba(34, 119, 230, .52) 50%,
		rgba(34, 119, 230, .38) 100%);
}
.ca-recruit__body { position: relative; z-index: 2; padding: 40px; max-width: 620px; }
.ca-recruit__body .ca-ttl { color: #fff; }
.ca-recruit__lead { margin: 0 0 24px; font: 700 16px/1.9 var(--ca-font); letter-spacing: .04em; }
.ca-recruit__copy {
	position: absolute;
	right: 24px;
	bottom: 16px;
	z-index: 2;
	width: min(52%, 520px);
	height: auto;
}

/* =========================================================
   レスポンシブ
   ========================================================= */
/* カード幅が縮む帯域だけ、リストが1行に収まるよう文字を少し小さく */
@media (min-width: 1101px) and (max-width: 1248px) {
	.ca-scard__ja { font-size: 16px; }
	.ca-scard__list li { font-size: 11px; }
}

@media (max-width: 1100px) {
	.ca-sec { padding-block: 56px; }
	.ca-about__grid { grid-template-columns: 1fr; gap: 32px; }
	.ca-search__cards { grid-template-columns: 1fr; }
	.ca-flow__list { flex-wrap: wrap; }
	.ca-flow__item { flex: 1 1 40%; }
	.ca-flow__arrow { display: none; }
	.ca-contactbar__in { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
	.ca-ttl { font-size: 20px; }
	.ca-about__lead { font-size: 20px; }
	.ca-about__boxes { grid-template-columns: 1fr 1fr; gap: 12px; }
	.ca-safety { grid-template-columns: 1fr; }
	.ca-flow__item { flex: 1 1 100%; }
	.ca-recruit__body { padding: 28px 20px; }
	.ca-recruit__copy { position: static; display: block; width: 80%; margin: 0 auto 20px; }
	.ca-tabs { flex-wrap: wrap; }
	.ca-tabs__btn { max-width: none; flex: 1 1 30%; font-size: 12px; }
}