/* ==========================================================================
   画面下のサービスカード（v0.9.18・inc/bottom-cards.php）
   Ref: emooove.co.jp の下部シート — white sheet, 1px top rule, 2×2 grid (gap 8 / padding 8 12),
   3:1 gradient cards with white text sized by container units, art on the right, dark round × at top-right.
   ========================================================================== */
.zbc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: #fff; border-top: 1px solid #d3e1ea; box-shadow: 0 -10px 30px -18px rgba(4, 52, 80, .45); transform: translateY(115%); visibility: hidden; transition: transform .5s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .5s; }
.zbc[hidden] { display: none; }
.zbc.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.zbc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); list-style: none; }
.zbc__grid li { margin: 0; min-width: 0; }
.zbc__c {
	position: relative; display: block; width: 100%; aspect-ratio: 3 / 1; overflow: hidden; container-type: inline-size; isolation: isolate;
	border-radius: 10px; color: #fff; text-decoration: none; font-feature-settings: "palt";
	background: linear-gradient(115deg, var(--a) 15%, var(--b) 100%); transition: transform .2s, filter .2s;
}
.zbc__c::before { content: ""; position: absolute; z-index: 0; right: -6%; top: -18%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.zbc__c:hover, .zbc__c:focus-visible { color: #fff; filter: brightness(1.06); transform: translateY(-2px); }
.zbc__c:focus-visible { outline: 3px solid #fdd804; outline-offset: 2px; }
.zbc__c--rental { --a: #0080b8; --b: #00aeef; }
.zbc__c--training { --a: #043450; --b: #0d5f93; }
.zbc__c--system { --a: #1d4fb8; --b: #3d7be0; }
.zbc__c--glabo { --a: #0a7f95; --b: #1fb3c9; }
.zbc__t { position: absolute; z-index: 2; inset: 0 34% 0 0; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; padding-left: 5cqw; }
.zbc__lead { display: block; font-size: max(9px, 5.4cqw); font-weight: 700; line-height: 1.2; white-space: nowrap; letter-spacing: -.01em; color: #fdd804; }
.zbc__name { display: block; font-size: 8.6cqw; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.zbc__c--system .zbc__name { font-size: 7.6cqw; }
.zbc__nw { display: inline-block; white-space: nowrap; }
.zbc__note { display: inline-block; margin-left: 2px; font-size: .62em; font-weight: 700; white-space: nowrap; opacity: .92; }
.zbc__art { position: absolute; z-index: 1; right: 2cqw; bottom: 0; width: auto !important; height: 94%; max-width: 36%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 2px 4px rgba(4, 52, 80, .25)); }
.zbc__x { position: absolute; top: -14px; right: 10px; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #043450; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(4, 52, 80, .3); }
.zbc__x:focus-visible { outline: 3px solid #00aeef; outline-offset: 2px; }

/* while the sheet is up: room for it under the footer, and no second bottom bar on phones */
body.has-zbc { padding-bottom: var(--zbc-h, 0px); }
@media (max-width: 767px) {
	body.has-zbc .c-float { display: none !important; }
}

/* PC: one compact row at the bottom centre (the TOP button stays free at the right) */
@media (min-width: 768px) {
	.zbc { left: 50%; right: auto; bottom: 16px; width: min(920px, calc(100% - 200px)); border: 0; border-radius: 14px; box-shadow: 0 14px 40px -12px rgba(4, 52, 80, .45); transform: translate(-50%, calc(100% + 40px)); }
	.zbc.is-visible { transform: translate(-50%, 0); }
	.zbc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px; }
	.zbc__x { top: -12px; right: -12px; border: 2px solid #fff; }
	body.has-zbc { padding-bottom: calc(var(--zbc-h, 0px) + 24px); }
}

@media (prefers-reduced-motion: reduce) {
	.zbc, .zbc__c { transition: none !important; }
}

/* ==========================================================================
   v0.9.48 (owner: もっと見やすく、アイソメのイラストを): light cards, isometric vignette left, navy text on a
   pale service tint (high contrast), small coloured catch + bold name, arrow chip on the right. Compact:
   phone 2×2 (cards 60px tall), PC one row. Overrides the v0.9.18 gradient cards above.
   ========================================================================== */
.zbc__c {
	display: flex; align-items: center; gap: 8px; aspect-ratio: auto; min-height: 60px; padding: 6px 8px 6px 4px; overflow: hidden;
	border: 1px solid var(--line, #cfe7f4); border-radius: 12px; background: var(--tint, #f2fafe); color: #043450;
	box-shadow: 0 1px 0 rgba(4, 52, 80, .04); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.zbc__c::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--a); right: auto; aspect-ratio: auto; }
.zbc__c:hover, .zbc__c:focus-visible { color: #043450; filter: none; transform: translateY(-2px); border-color: var(--a); box-shadow: 0 8px 18px -10px rgba(4, 52, 80, .45); }
.zbc__c--rental { --a: #0078a8; --tint: #eef9fe; --line: #c8e9f7; }
.zbc__c--training { --a: #043450; --tint: #f0f4f8; --line: #d3dde7; }
.zbc__c--system { --a: #1d4fb8; --tint: #f0f4fd; --line: #d2ddf5; }
.zbc__c--glabo { --a: #0a7f95; --tint: #edf9f8; --line: #c6ebe8; }
.zbc__pic { position: relative; z-index: 1; flex: 0 0 auto; width: 52px; height: 52px; }
.zbc__art { position: static; display: block; width: 100% !important; height: 100%; max-width: none; object-fit: contain; filter: none; }
.zbc__t { position: relative; z-index: 1; inset: auto; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0; }
.zbc__lead { font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--a); white-space: normal; }
.zbc__name { font-size: 13px; font-weight: 800; line-height: 1.3; letter-spacing: .01em; color: #043450; }
.zbc__c--system .zbc__name { font-size: 12.5px; }
.zbc__note { color: #1f3a4d; opacity: 1; }
.zbc__go { position: relative; z-index: 1; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--a); }
.zbc__go::after { content: ""; position: absolute; left: 6px; top: 7px; width: 5px; height: 5px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
.zbc__c:hover .zbc__go { transform: translateX(2px); transition: transform .2s; }
@media (max-width: 767px) {
	.zbc__grid { gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
	.zbc__c { gap: 6px; min-height: 56px; padding: 4px 6px 4px 2px; }
	.zbc__pic { width: 46px; height: 46px; }
	.zbc__go { display: none; }
	.zbc__name { font-size: 12px; }
	.zbc__c--system .zbc__name { font-size: 11.5px; }
}
@media (min-width: 768px) {
	.zbc { width: min(1040px, calc(100% - 180px)); }
	.zbc__c { min-height: 72px; padding: 8px 10px 8px 6px; }
	.zbc__pic { width: 64px; height: 64px; }
	.zbc__lead { font-size: 11px; }
	.zbc__name { font-size: 14px; }
	.zbc__c--system .zbc__name { font-size: 13px; }
}