/* 全ページで共有する固定クイックコンタクトです。 */
.bnk-shared-contact-scope,
.bnk-shared-contact-scope :where(a, aside, button, div, em, i, small, span, strong, svg),
.bnk-shared-contact-scope :where(a, aside, button, div, em, i, small, span, strong, svg)::before,
.bnk-shared-contact-scope :where(a, aside, button, div, em, i, small, span, strong, svg)::after {
	all: revert;
	box-sizing: border-box;
}

.bnk-shared-contact-scope {
	--bnk-contact-ease: cubic-bezier(.2, .75, .25, 1);
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	-webkit-font-smoothing: antialiased;
}

.bnk-shared-contact-scope a,
.bnk-shared-contact-scope a:link,
.bnk-shared-contact-scope a:visited {
	text-decoration: none;
}

.bnk-desktop-contact {
	position: fixed;
	z-index: 880;
	right: 24px;
	bottom: 24px;
	display: block;
}

.bnk-desktop-contact::before {
	position: absolute;
	right: 100%;
	bottom: 0;
	display: none;
	width: 14px;
	height: 100%;
	content: "";
}

.bnk-desktop-contact.is-open::before {
	display: block;
}

.bnk-desktop-contact__panel {
	position: absolute;
	right: calc(100% + 14px);
	bottom: 0;
	width: min(390px, calc(100vw - 138px));
	max-height: calc(100vh - 70px);
	padding: 0 6px 5px 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 0;
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: none;
	transform: translateX(16px) scale(.98);
	transform-origin: right bottom;
	transition: opacity .24s var(--bnk-contact-ease), transform .28s var(--bnk-contact-ease), visibility .24s;
	visibility: hidden;
	scrollbar-color: rgba(201, 104, 48, .38) transparent;
	scrollbar-width: thin;
}

.bnk-desktop-contact.is-open .bnk-desktop-contact__panel {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	visibility: visible;
}

.bnk-desktop-contact__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 5px 10px;
	padding: 0 4px;
	color: #6f3a1d;
	filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .95));
}

.bnk-desktop-contact__heading > span {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 9px;
	font-size: 14.08px;
	font-weight: 800;
	letter-spacing: .04em;
}

.bnk-desktop-contact__heading > span i {
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	background: #ec8a49;
	border: 2px solid #fff4ea;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(236, 138, 73, .18);
}

.bnk-desktop-contact__heading small {
	flex: 0 0 auto;
	color: #875337;
	font-size: 12px;
	font-weight: 700;
}

.bnk-desktop-contact__list {
	display: grid;
	gap: 10px;
}

.bnk-desktop-contact__item {
	display: grid;
	min-height: 94px;
	grid-template-columns: 48px minmax(0, 1fr) 24px;
	align-items: center;
	gap: 13px;
	padding: 12px 14px;
	background: rgba(255, 243, 233, .96);
	background: color-mix(in srgb, var(--bnk-contact-accent) 11%, rgba(255, 255, 255, .98));
	border: 1px solid color-mix(in srgb, var(--bnk-contact-accent) 34%, transparent);
	border-radius: 19px;
	color: #314448;
	box-shadow: 0 10px 26px color-mix(in srgb, var(--bnk-contact-accent) 16%, transparent);
	transition: background .22s, border-color .22s, transform .22s var(--bnk-contact-ease), box-shadow .22s;
}

.bnk-desktop-contact__item:hover,
.bnk-desktop-contact__item:focus-visible {
	background: color-mix(in srgb, var(--bnk-contact-accent) 18%, rgba(255, 255, 255, .98));
	border-color: color-mix(in srgb, var(--bnk-contact-accent) 68%, transparent);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--bnk-contact-accent) 22%, transparent);
	color: #273b3f;
	outline: none;
	transform: translateX(-4px);
}

.bnk-desktop-contact__item.is-cost {
	min-height: 76px;
	background: color-mix(in srgb, var(--bnk-contact-accent) 10%, rgba(255, 255, 255, .98));
	border-color: color-mix(in srgb, var(--bnk-contact-accent) 32%, transparent);
}

.bnk-desktop-contact__item.is-cost:hover,
.bnk-desktop-contact__item.is-cost:focus-visible {
	background: color-mix(in srgb, var(--bnk-contact-accent) 17%, rgba(255, 255, 255, .98));
	border-color: color-mix(in srgb, var(--bnk-contact-accent) 66%, transparent);
}

.bnk-desktop-contact__item-icon {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	background: color-mix(in srgb, var(--bnk-contact-accent) 18%, #fff);
	border: 1px solid color-mix(in srgb, var(--bnk-contact-accent) 28%, transparent);
	border-radius: 15px;
	color: var(--bnk-contact-accent);
}

.bnk-desktop-contact__item.is-cost .bnk-desktop-contact__item-icon {
	background: var(--bnk-contact-accent);
	border-color: var(--bnk-contact-accent);
	color: #fff;
}

.bnk-desktop-contact__item-icon svg,
.bnk-desktop-contact__trigger svg,
.bnk-mobile-contact__cost svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.bnk-desktop-contact__item-icon svg {
	width: 24px;
	height: 24px;
}

.bnk-desktop-contact__item-copy {
	display: grid;
	min-width: 0;
	gap: 4px;
}

.bnk-desktop-contact__item-copy strong {
	overflow: hidden;
	color: #314448;
	font-size: 14.08px;
	font-weight: 800;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bnk-desktop-contact__item-copy small {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px 10px;
	color: #53686c;
	font-size: 12.8px;
	font-weight: 700;
	line-height: 1.4;
}

.bnk-desktop-contact__item.is-phone .bnk-desktop-contact__item-copy small {
	color: color-mix(in srgb, var(--bnk-contact-accent) 72%, #24383c);
	font-size: 25.28px;
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: .025em;
	white-space: nowrap;
}

.bnk-desktop-contact__item-copy em {
	position: relative;
	padding-left: 10px;
	color: #6d8083;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0;
}

.bnk-desktop-contact__item-copy em::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 3px;
	height: 3px;
	background: currentColor;
	border-radius: 50%;
	content: "";
	transform: translateY(-50%);
}

.bnk-desktop-contact__arrow {
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	color: var(--bnk-contact-accent);
	font-size: 19.52px;
	font-style: normal;
	transition: transform .22s;
}

.bnk-desktop-contact__item:hover .bnk-desktop-contact__arrow,
.bnk-desktop-contact__item:focus-visible .bnk-desktop-contact__arrow {
	transform: translateX(3px);
}

.bnk-desktop-contact__dock {
	display: block;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.bnk-desktop-contact__trigger {
	position: relative;
	display: grid;
	width: 64px;
	min-height: 124px;
	grid-template-rows: 1fr auto 1fr;
	align-items: center;
	justify-items: center;
	padding: 7px 6px;
	background: linear-gradient(155deg, #ffe2c8 0%, #ffc594 100%);
	border: 1px solid rgba(218, 113, 49, .52);
	border-radius: 25px;
	color: #87401c;
	cursor: pointer;
	box-shadow: 0 14px 32px rgba(145, 76, 36, .2), inset 0 1px 0 rgba(255, 255, 255, .82);
	transition: background .22s, transform .22s var(--bnk-contact-ease), box-shadow .22s;
}

.bnk-desktop-contact__trigger.has-single-icon {
	min-height: 64px;
	grid-template-rows: 1fr;
}

.bnk-desktop-contact__trigger:hover,
.bnk-desktop-contact__trigger:focus-visible {
	background: linear-gradient(155deg, #ffdab9 0%, #f8b77f 100%);
	color: #743515;
	outline: 3px solid rgba(236, 136, 73, .34);
	outline-offset: 3px;
	box-shadow: 0 17px 36px rgba(145, 76, 36, .25), inset 0 1px 0 rgba(255, 255, 255, .86);
	transform: translateY(-3px);
}

.bnk-desktop-contact__trigger-icon {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
}

.bnk-desktop-contact__trigger-divider {
	display: block;
	width: 30px;
	height: 1px;
	background: rgba(135, 64, 28, .28);
}

.bnk-desktop-contact__trigger svg {
	width: 28px;
	height: 28px;
}

.bnk-mobile-contact {
	display: none;
}

/* 旧テーマの固定導線は共有コンポーネント表示中だけ退避します。 */
.bnk-shared-contact-active #footer-menu,
.bnk-shared-contact-active #footer-menu-left,
.bnk-shared-contact-active #footer-menusp,
.bnk-shared-contact-active .mobile-fixed-banner {
	display: none !important;
}

@media (min-width: 768px) and (max-width: 1240px) {
	.bnk-desktop-contact {
		right: 18px;
		bottom: 18px;
	}

	.bnk-desktop-contact__panel {
		width: 350px;
	}

	.bnk-desktop-contact__item.is-phone .bnk-desktop-contact__item-copy small {
		font-size: 23.2px;
	}
}

/* 767px 以下はモバイルバー、768px 以上は共通パネルを表示します。 */
@media (max-width: 767px) {
	.bnk-desktop-contact {
		display: none;
	}
}

@media (max-width: 767px) {
	.bnk-mobile-contact {
		position: fixed;
		z-index: 900;
		right: 0;
		bottom: 0;
		left: 0;
		display: grid;
		grid-template-columns: repeat(var(--bnk-mobile-phone-count), minmax(0, 1fr));
		background: rgba(255, 255, 255, .94);
		border-top: 1px solid rgba(18, 75, 90, .1);
		box-shadow: 0 -7px 24px rgba(18, 75, 90, .15);
		opacity: 1;
		transform: translateY(0);
		transition: opacity .2s ease, transform .28s var(--bnk-contact-ease);
		will-change: opacity, transform;
	}

	.bnk-mobile-contact.has-cost {
		grid-template-columns: clamp(52px, 15vw, 64px) repeat(var(--bnk-mobile-phone-count), minmax(0, 1fr));
	}

	.bnk-mobile-contact.is-scroll-hidden {
		opacity: 0;
		pointer-events: none;
		transform: translateY(calc(100% + env(safe-area-inset-bottom)));
	}

	.bnk-mobile-contact a,
	.bnk-mobile-contact a:link,
	.bnk-mobile-contact a:visited {
		display: flex;
		min-width: 0;
		min-height: 68px;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 3px;
		color: #fff;
		line-height: 1.04;
		text-align: center;
	}

	.bnk-mobile-contact a.bnk-mobile-contact__cost {
		display: grid;
		padding: 0;
		place-items: center;
		background: var(--bnk-contact-accent);
		border-right: 1px solid rgba(255, 255, 255, .35);
	}

	.bnk-mobile-contact a.bnk-mobile-contact__phone {
		background: var(--bnk-contact-accent);
	}

	.bnk-mobile-contact a:hover,
	.bnk-mobile-contact a:focus-visible {
		color: #fff;
		filter: brightness(.93);
		outline: 2px solid rgba(255, 255, 255, .82);
		outline-offset: -3px;
	}

	.bnk-mobile-contact__cost svg {
		width: 29px;
		height: 29px;
	}

	.bnk-mobile-contact__phone span {
		max-width: 100%;
		overflow: hidden;
		font-size: clamp(12.16px, 3.5vw, 14.4px);
		font-weight: 750;
		line-height: 1.1;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bnk-mobile-contact__phone strong {
		max-width: 100%;
		margin: 2px 0 1px;
		font-size: clamp(16px, 4.8vw, 21.12px);
		font-weight: 850;
		line-height: 1;
		letter-spacing: .01em;
		white-space: nowrap;
	}

	.bnk-mobile-contact__phone small {
		font-size: clamp(10.08px, 2.7vw, 12.16px);
		font-weight: 650;
		line-height: 1;
		white-space: nowrap;
	}
}

@media (max-width: 360px) {
	.bnk-mobile-contact__phone span {
		font-size: 12.48px;
	}

	.bnk-mobile-contact__phone strong {
		font-size: 17.28px;
	}

	.bnk-mobile-contact__phone small {
		font-size: 10.56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bnk-desktop-contact__panel,
	.bnk-desktop-contact__item,
	.bnk-desktop-contact__arrow,
	.bnk-desktop-contact__trigger,
	.bnk-mobile-contact {
		transition: none;
	}
}
