@charset "UTF-8";
/* ==========================================================================
   Object / Component / button
   ========================================================================== */
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-serif); /* 全ボタン明朝 */
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	border-radius: 999px;
	transition: background 0.3s var(--ease), color 0.3s var(--ease),
		border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.c-btn:hover {
	opacity: 1;
}

/* ---- 自動車事故に関する連絡先（2行・小さめ文字） ---- */
.c-btn--accident {
	padding: 8px 18px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-navy);
	background: #fff;
	border: 1.5px solid var(--color-navy);
}
.c-btn--accident__label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.c-btn--accident::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.9 6.2 17.1 5A2 2 0 0 0 15.4 4H8.6a2 2 0 0 0-1.7 1L5.1 6.2 3.6 11v7a1 1 0 0 0 1 1H6a1 1 0 0 0 1-1v-1h10v1a1 1 0 0 0 1 1h1.4a1 1 0 0 0 1-1v-7ZM7 15a1.3 1.3 0 1 1 0-2.6A1.3 1.3 0 0 1 7 15Zm10 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6ZM5.6 10l1.2-3.4a.6.6 0 0 1 .6-.4h9.2a.6.6 0 0 1 .6.4L18.4 10Z'/%3E%3C/svg%3E");
	        mask: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.9 6.2 17.1 5A2 2 0 0 0 15.4 4H8.6a2 2 0 0 0-1.7 1L5.1 6.2 3.6 11v7a1 1 0 0 0 1 1H6a1 1 0 0 0 1-1v-1h10v1a1 1 0 0 0 1 1h1.4a1 1 0 0 0 1-1v-7ZM7 15a1.3 1.3 0 1 1 0-2.6A1.3 1.3 0 0 1 7 15Zm10 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6ZM5.6 10l1.2-3.4a.6.6 0 0 1 .6-.4h9.2a.6.6 0 0 1 .6.4L18.4 10Z'/%3E%3C/svg%3E");
}
.c-btn--accident:hover {
	color: #fff;
	background: var(--color-navy);
}

/* ---- お問い合わせ（ヘッダー・ソリッド濃紺＋アイコン） ---- */
.c-btn--contact {
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--color-navy);
}
.c-btn--contact:hover {
	background: var(--color-navy-deep);
}
.c-btn--contact__icon {
	flex-shrink: 0;
}

/* ---- アウトライン（会社概要へ／事業内容へ／採用情報へ） ---- */
.c-btn--outline {
	padding: 15px 40px;
	min-width: 220px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-heading);
	background: #fff;
	border: 1px solid var(--color-line);
}
.c-btn--outline .c-btn__arrow {
	margin-left: 6px;
	color: var(--color-gold);
	transition: transform 0.3s var(--ease);
}
.c-btn--outline:hover {
	color: #fff;
	background: var(--color-navy);
	border-color: var(--color-navy);
}
.c-btn--outline:hover .c-btn__arrow {
	color: #fff;
	transform: translateX(4px);
}

/* ---- ソリッド（お問い合わせはこちら） ---- */
.c-btn--solid {
	padding: 17px 44px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: var(--color-navy);
}
.c-btn--solid:hover {
	background: var(--color-navy-deep);
}
.c-btn--solid .c-btn__arrow {
	margin-left: 6px;
	color: var(--color-gold);
	transition: transform 0.3s var(--ease);
}
.c-btn--solid:hover .c-btn__arrow {
	transform: translateX(4px);
}

/* ---- ドロワー内での見せ方 ---- */
.c-btn.is-drawer {
	width: 100%;
	max-width: 320px;
}
.c-btn--accident.is-drawer {
	justify-content: center;
	font-size: 14px;
	color: #fff;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
}
.c-btn--accident.is-drawer .c-btn--accident__label {
	align-items: center;
}
.c-btn--accident.is-drawer:hover {
	color: var(--color-navy);
	background: #fff;
}
.c-btn--contact.is-drawer {
	background: var(--color-gold);
	color: var(--color-navy-deep);
}
.c-btn--contact.is-drawer:hover {
	background: #d4b874;
}