@charset "UTF-8";
/* =========================================================
   ファーストビュー A / B / C
   Figma の座標をそのまま使えるよう、デザイン1px = var(--u) とする。
   --u はコンテナクエリで「今のカラム幅 / デザイン幅」に解決されるので、
   画面幅が変わっても Figma と同じ比率で縮尺される。
   ========================================================= */

.ca-stage {
	container-type: inline-size;
	position: relative;
	width: 100%;
	aspect-ratio: var(--dw) / var(--dh);
	overflow: hidden;
}
.ca-stage__in {
	position: absolute;
	inset: 0;
	--u: calc(100cqw / var(--dw));
}
.ca-stage__in > * { position: absolute; margin: 0; }

/* Aパターンだけ、FV〜お問い合わせバーの裏に斜めライン装飾が走る */
.ca-topblock { position: relative; }
/* Figma の Frame 234 背景（white -> #CEDAFF）。装飾SVGが届かない下端の受け皿 */
body.is-pattern-a .ca-topblock {
	container-type: inline-size;
	background: linear-gradient(107deg, #ffffff 0%, #cedaff 100%);
}
.ca-topblock__deco {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	--u: calc(100cqw / 1920);
}
/* Frame 234 を1枚に統合した書き出し（1920x1400）を原点に等倍で敷く */
.ca-topblock__hero {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(1920 * var(--u));
	height: calc(1400 * var(--u));
	max-width: none;
}
.ca-topblock__body { position: relative; }

/* =========================================================
   お知らせバー（FV内・A/B/C共通）  Figma: news 600x50
   ========================================================= */
.ca-news {
	display: flex;
	align-items: center;
	gap: calc(15 * var(--u));
	width: 100%;
	height: calc(50 * var(--u));
	padding-inline: calc(15 * var(--u));
	border-radius: calc(10 * var(--u));
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 0 calc(10 * var(--u)) rgba(0, 0, 0, .1);
	text-decoration: none;
	overflow: hidden;
}
.ca-news__date {
	flex: 0 0 auto;
	font: 600 calc(14 * var(--u))/1 var(--ca-font-en);
	letter-spacing: .05em;
	color: var(--ca-tx);
}
.ca-news__tag {
	display: grid;
	place-items: center;
	flex: 0 0 calc(100 * var(--u));
	height: calc(25 * var(--u));
	border-radius: calc(5 * var(--u));
	background: var(--ca-gray);
	font: 500 calc(14 * var(--u))/1 var(--ca-font);
	letter-spacing: .05em;
	color: #fff;
}
.ca-news__title {
	flex: 1 1 auto;
	min-width: 0;
	font: 400 calc(14 * var(--u))/1.2 var(--ca-font);
	letter-spacing: .03em;
	color: var(--ca-tx2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ca-news__arrow {
	flex: 0 0 calc(12 * var(--u));
	height: calc(9 * var(--u));
	background: currentColor;
	color: var(--ca-tx2);
	-webkit-mask: url("../img/common/arrow-lg-black.svg") no-repeat center / contain;
	        mask: url("../img/common/arrow-lg-black.svg") no-repeat center / contain;
}

/* =========================================================
   パターン A : 横型ヘッダー + 斜めライン + バス写真
   Figma: 286:4066  デザイン 1920 x 756
   ========================================================= */
/* 背景は .ca-topblock__hero が持つので、ここはお知らせバーの位置だけ */
.ca-fv--a .ca-stage { overflow: visible; }

.ca-fv-a__news {
	left: calc(1160 * var(--u));
	top: calc(647 * var(--u));
	width: calc(600 * var(--u));
}

/* =========================================================
   パターン B : バスのコラージュ + 斜めグリーンライン
   Figma: 286:3928  デザイン 1620 x 801
   ========================================================= */
.ca-fv--b { background: #fff; }

.ca-fv-b__stripe { max-width: none; }
.ca-fv-b__stripe--1 { left: calc(393 * var(--u));  top: calc(-24 * var(--u));      width: calc(1006.717 * var(--u)); height: calc(881.776 * var(--u)); }
.ca-fv-b__stripe--2 { left: calc(66 * var(--u));   top: calc(-15 * var(--u));      width: calc(990.734 * var(--u));  height: calc(892.197 * var(--u)); }
.ca-fv-b__stripe--3 { left: calc(-312 * var(--u)); top: calc(-35.0001 * var(--u)); width: calc(974.751 * var(--u));  height: calc(902.616 * var(--u)); }

/* Figma のドロップシャドウは画像のアルファに追従するので box-shadow ではなく drop-shadow */
.ca-fv-b__bus {
	overflow: hidden;
	filter: drop-shadow(calc(-60 * var(--u)) calc(45 * var(--u)) 0 rgba(0, 0, 0, .25));
	max-width: none;
}
.ca-fv-b__bus img { position: absolute; max-width: none; object-fit: cover; }

.ca-fv-b__bus--1 { left: calc(550 * var(--u));  top: calc(-86 * var(--u));      width: calc(519.2225 * var(--u)); height: calc(527.3922 * var(--u)); object-fit: cover; }
.ca-fv-b__bus--2 { left: calc(194 * var(--u));  top: calc(-86 * var(--u));      width: calc(519.2225 * var(--u)); height: calc(527.3922 * var(--u)); }
.ca-fv-b__bus--3 { left: calc(-192 * var(--u)); top: calc(-84.0001 * var(--u)); width: calc(532.9003 * var(--u)); height: calc(600.8488 * var(--u)); }

.ca-fv-b__bus--2 img { left: -4.14%; top: .01%; width: 100%; height: 111%; }
.ca-fv-b__bus--3 img { left: .1%;    top: .02%; width: 100%; height: 100%; }

.ca-fv-b__circle {
	left: calc(988 * var(--u));
	top: calc(-660 * var(--u));
	width: calc(1142 * var(--u));
	height: calc(1142 * var(--u));
	max-width: none;
}

.ca-fv-b__photo {
	overflow: hidden;
	border-radius: calc(40 * var(--u));
	box-shadow: 0 calc(10 * var(--u)) calc(20 * var(--u)) 0 rgba(183, 185, 192, .5);
}
.ca-fv-b__photo img { position: absolute; max-width: none; object-fit: cover; }

.ca-fv-b__photo--1 { left: calc(1337 * var(--u)); top: calc(-52 * var(--u));  width: calc(240 * var(--u)); height: calc(340 * var(--u)); }
.ca-fv-b__photo--2 { left: calc(1101 * var(--u)); top: calc(120 * var(--u));  width: calc(200 * var(--u)); height: calc(280 * var(--u)); }
.ca-fv-b__photo--3 { left: calc(950 * var(--u));  top: calc(463 * var(--u));  width: calc(340 * var(--u)); height: calc(240 * var(--u)); }
.ca-fv-b__photo--4 { left: calc(1337 * var(--u)); top: calc(351 * var(--u));  width: calc(240 * var(--u)); height: calc(420 * var(--u)); }

.ca-fv-b__photo--1 img { inset: 0; width: 100%;      height: 100%; }
.ca-fv-b__photo--2 img { left: -12.36%; top: -9.98%;  width: 116.86%; height: 111.74%; }
.ca-fv-b__photo--3 img { left: -10.11%; top: -42.08%; width: 159.58%; height: 151.02%; }
.ca-fv-b__photo--4 img { left: -19.73%; top: -7.29%;  width: 134.9%;  height: 103.25%; }

/* ---- キャッチコピー（青い平行四辺形） ------------------ */
.ca-fv-b__copy { position: static; }
.ca-fv-b__copyline {
	position: absolute;
	display: block;
	background: var(--ca-blue);
	transform: skewX(-15.63deg) scaleY(.96);
	white-space: nowrap;
}
.ca-fv-b__copyline--1 {
	left: calc(75.401 * var(--u));
	top: calc(521.096 * var(--u));
	width: calc(564.229 * var(--u));
	height: calc(70.529 * var(--u));
}
.ca-fv-b__copyline--2 {
	left: calc(51.911 * var(--u));
	top: calc(597.626 * var(--u));
	width: calc(346.03 * var(--u));
	height: calc(70.529 * var(--u));
}
.ca-fv-b__copytx {
	display: block;
	font: 700 calc(62.692 * var(--u))/calc(66.61 * var(--u)) var(--ca-font);
	color: #fff;
}
.ca-fv-b__copytx em { font-style: normal; color: var(--ca-green); }

.ca-fv-b__news {
	left: calc(43 * var(--u));
	top: calc(703 * var(--u));
	width: calc(600 * var(--u));
}

/* =========================================================
   パターン C : 大判写真 1枚 + 斜め装飾
   Figma: 286:4008  デザイン 1620 x 750
   ========================================================= */
.ca-fv--c { background: #fff; }

/* 写真・斜め装飾・コピーを含む統合画像（1620x750）をステージ全面に敷く */
.ca-fv-c__hero {
	left: 0;
	top: 0;
	width: calc(1620 * var(--u));
	height: calc(750 * var(--u));
	max-width: none;
}
.ca-fv-c__news {
	left: calc(900 * var(--u));
	top: calc(670 * var(--u));
	width: calc(600 * var(--u));
}

/* =========================================================
   狭い画面：ステージは縮尺されるため文字が小さくなりすぎる。
   1100px 以下では高さを緩めて中央トリミング表示にする。
   ========================================================= */
@media (max-width: 1100px) {
	.ca-stage { aspect-ratio: auto; height: 62vh; min-height: 420px; }
	.ca-stage__in { --u: calc(100cqw / calc(var(--dw) * .68)); }
	.ca-fv-a__news, .ca-fv-b__news, .ca-fv-c__news { display: none; }
}