@charset "UTF-8";
/* =========================================================
   CITY ACCESS SAGAMI - 共通スタイル
   Figma variables -> CSS custom properties
   ========================================================= */

:root {
	--ca-blue:      #2277e6; /* corporatecolor/light blue */
	--ca-navy:      #083886; /* corporatecolor/blue */
	--ca-blue2:     #3d91ff; /* light blue02 */
	--ca-red:       #df1e3e; /* accent/red */
	--ca-orange:    #f96c26; /* accent/orange */
	--ca-green:     #b9f657; /* accent/green */
	--ca-tx:        #333333; /* text/black */
	--ca-tx2:       #3e3e3e; /* BLACK/text,bottun */
	--ca-gray:      #9fa2a9; /* text/gray */
	--ca-bg-gray:   #eef4ff; /* back/grayblue */
	--ca-deep:      #0e1d43; /* back/deepblue */

	--ca-side-w:    300px;
	--ca-container: 1200px;

	--ca-font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
	--ca-font-en: "Figtree", "Inter", var(--ca-font);
}

/* ---- Arkhe のコンテナ幅をトップだけ解除 ---------------- */
body.home .l-content { padding: 0; }
body.home .l-content__body.l-container {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}
body.home { overflow-x: hidden; }

body { font-family: var(--ca-font); color: var(--ca-tx); }
.ca-front img { max-width: 100%; height: auto; }

.ca-container {
	width: 100%;
	max-width: calc(var(--ca-container) + 48px);
	margin-inline: auto;
	padding-inline: 24px;
}

/* =========================================================
   レイアウト : A = 横型ヘッダー / B・C = 左サイドメニュー
   ========================================================= */
body.is-layout-side #wrapper { padding-left: var(--ca-side-w); }

/* ---- A : フローティングヘッダー ------------------------ */
.ca-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 50;
	padding: 20px clamp(16px, 5.2vw, 100px) 0;
}
.ca-header__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 1600px;
	margin-inline: auto;
	min-height: 80px;
	padding: 15px 15px 15px 30px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .9);
	backdrop-filter: blur(4px);
}
.ca-header__logo { flex: 0 0 auto; line-height: 0; }
.ca-header__logo img { width: clamp(150px, 13vw, 235px); height: auto; }

.ca-gnav { flex: 1 1 auto; }
.ca-gnav__list {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: clamp(16px, 2.6vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ca-gnav__item { position: relative; }
.ca-gnav__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border: 0;
	background: none;
	font: 700 14px/16px var(--ca-font);
	letter-spacing: .05em;
	color: var(--ca-tx);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}
.ca-gnav__toggle { width: 12px; height: 12px; transition: transform .2s; }
.ca-gnav__item.is-open .ca-gnav__toggle { transform: rotate(45deg); }

.ca-gnav__sub {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	translate: -50% 0;
	width: 238px;
	padding: 20px;
	border-radius: 10px;
	background: var(--ca-bg-gray);
	box-shadow: 0 10px 24px rgba(8, 56, 134, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.ca-gnav__item.is-open .ca-gnav__sub { opacity: 1; visibility: visible; transform: none; }
.ca-gnav__sub ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 15px; }

/* ---- サブメニュー1行（A・B・C共通） -------------------- */
.ca-gnav__sub a,
.ca-sidenav__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	text-decoration: none;
	color: var(--ca-tx);
}
.ca-submenu__label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font: 500 14px/1.35 var(--ca-font);
	letter-spacing: .02em;
}
.ca-submenu__label img { width: 8px; height: 8px; flex: 0 0 8px; }
.ca-arrow-round {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	border: 1px solid var(--ca-blue);
	border-radius: 50%;
	transition: background .2s;
}
.ca-arrow-round img { width: 8px; height: 6px; }
.ca-gnav__sub a:hover .ca-arrow-round,
.ca-sidenav__list a:hover .ca-arrow-round { background: rgba(34, 119, 230, .12); }

/* ---- ボタン -------------------------------------------- */
.ca-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 160px;
	height: 50px;
	border-radius: 5px;
	font: 700 14px/1 var(--ca-font);
	letter-spacing: .05em;
	color: #fff;
	text-decoration: none;
	transition: filter .2s;
}
.ca-btn:hover { filter: brightness(1.08); }
.ca-btn--blue   { background: var(--ca-blue); }
.ca-btn--red    { background: var(--ca-red); }
.ca-btn--green  { background: var(--ca-green); color: var(--ca-blue); }
.ca-btn--orange { background: var(--ca-orange); color: #fff; }
.ca-btn--block { width: 100%; height: 70px; border-radius: 0; font-size: 16px; }
.ca-btn img { width: 1.15em; height: 1.15em; }
.ca-btn--red img, .ca-btn--blue img { filter: brightness(0) invert(1); }

.ca-header__cta { display: flex; gap: 10px; flex: 0 0 auto; }

/* ---- B / C : 左固定サイドメニュー ---------------------- */
.ca-side {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 60;
	width: var(--ca-side-w);
	background: #fff;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: 1px 0 0 rgba(8, 56, 134, .06);
}
.ca-side__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	padding: 40px 30px 100px;
}
.ca-side__logo { line-height: 0; padding-bottom: 10px; }
.ca-side__logo img { width: 100%; height: auto; }

.ca-sidenav {
	display: grid;
	gap: 25px;
	padding: 30px 20px;
	border-radius: 10px;
	background: var(--ca-bg-gray);
}
.ca-sidenav__group { display: grid; gap: 15px; }
.ca-sidenav__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 -4px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ca-blue2);
	font: 700 16px/1 var(--ca-font);
	letter-spacing: .05em;
	color: var(--ca-navy);
}
.ca-sidenav__mark { width: 35px; height: 25px; flex: 0 0 35px; background: var(--ca-blue2); }
.ca-sidenav__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.ca-side__cta { display: grid; gap: 10px; padding: 20px 0; }
.ca-side__insta { display: inline-block; padding: 10px 0; }

/* ---- Instagram グリフ ---------------------------------- */
.ca-insta-glyph {
	display: inline-block;
	width: 32px;
	height: 32px;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
	-webkit-mask: url("../img/common/instagram-mask.svg") no-repeat center / contain;
	        mask: url("../img/common/instagram-mask.svg") no-repeat center / contain;
	vertical-align: middle;
}

/* ---- 事故数カウンター ---------------------------------- */
.ca-counter {
	display: grid;
	gap: 6px;
	justify-items: center;
	padding: 20px;
	border: 1px solid var(--ca-blue2);
	border-radius: 10px;
	background: #fff;
	text-align: center;
}
.ca-counter__label { margin: 0; font: 700 16px/1 var(--ca-font); color: var(--ca-blue2); }
.ca-counter__num {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 10px;
	margin: 0;
	color: var(--ca-blue2);
}
.ca-counter__now { font: 600 14px/2.6 var(--ca-font); }
.ca-counter__num b { font: 700 70px/55px "Inter", var(--ca-font); }
.ca-counter__unit { font: 700 16px/2.2 var(--ca-font); }
.ca-counter__note { margin: 0; display: grid; }
.ca-counter__note span { font: 600 13px/1.3 var(--ca-font); color: var(--ca-blue); }
.ca-counter__note small { font-size: 11px; color: var(--ca-gray); }

/* ---- ハンバーガー（狭い画面用） ------------------------ */
.ca-burger { display: none; }

@media (max-width: 1100px) {
	body.is-layout-side #wrapper { padding-left: 0; }

	.ca-side {
		position: sticky;
		inset: 0 auto auto 0;
		width: 100%;
		height: auto;
		overflow: visible;
	}
	.ca-side__inner { flex-direction: row; align-items: center; padding: 16px 20px; }
	.ca-side .ca-sidenav,
	.ca-side .ca-side__cta,
	.ca-side .ca-counter--side,
	.ca-side__insta { display: none; }
	.ca-side__logo { padding-bottom: 0; }
	.ca-side__logo img { width: 190px; }

	.ca-header { position: sticky; padding: 10px 16px; }
	.ca-gnav, .ca-header__cta { display: none; }

	.ca-burger {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-left: auto;
		border: 0;
		border-radius: 6px;
		background: var(--ca-blue);
		cursor: pointer;
	}
	.ca-burger span { position: relative; }
	.ca-burger span,
	.ca-burger span::before,
	.ca-burger span::after {
		content: "";
		display: block;
		width: 20px;
		height: 2px;
		background: #fff;
	}
	.ca-burger span::before { position: absolute; top: -6px; }
	.ca-burger span::after  { position: absolute; top: 6px; }
}

/* =========================================================
   フッター
   ========================================================= */
.ca-footer { background: var(--ca-deep); color: #fff; padding: 60px 0 24px; }
.ca-footer__in {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 60px;
	justify-content: center;
}
.ca-footer__brand { flex: 0 0 auto; }
.ca-footer__brand img { width: 200px; filter: brightness(0) invert(1); }
.ca-footer__name { margin: 20px 0 10px; font: 700 14px/1.6 var(--ca-font); }
.ca-footer__addr { margin: 0; font: 400 12px/1.8 var(--ca-font); color: rgba(255, 255, 255, .8); }

.ca-footer__nav { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.ca-footer__col ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ca-footer__ttl { margin: 0; font: 700 13px/1 var(--ca-font); }
.ca-footer__col a { font: 400 12px/1.4 var(--ca-font); color: rgba(255, 255, 255, .8); text-decoration: none; }
.ca-footer__col a:hover { color: #fff; text-decoration: underline; }
.ca-footer__copy { margin: 48px 0 0; text-align: center; font: 400 11px/1 var(--ca-font); color: rgba(255, 255, 255, .7); }

/* =========================================================
   仮組み用 : パターン切り替えバー
   ========================================================= */
.ca-switch {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	display: grid;
	gap: 8px;
	justify-items: center;
	padding: 14px 16px 12px;
	border-radius: 12px;
	background: rgba(14, 29, 67, .92);
	color: #fff;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
	font-family: var(--ca-font);
	transition: transform .25s;
}
.ca-switch.is-hidden { transform: translateY(calc(100% + 24px)); }
.ca-switch__ttl { margin: 0; font: 700 11px/1 var(--ca-font); letter-spacing: .1em; opacity: .8; }
.ca-switch__btns { display: flex; gap: 6px; }
.ca-switch__btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font: 700 16px/1 var(--ca-font-en);
	text-decoration: none;
	transition: background .2s;
}
.ca-switch__btn:hover { background: rgba(255, 255, 255, .25); }
.ca-switch__btn.is-current { background: var(--ca-green); color: var(--ca-deep); }
.ca-switch__note { margin: 0; font: 400 11px/1.2 var(--ca-font); opacity: .75; text-align: center; }
.ca-switch__hide {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--ca-deep);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}