/* User-supplied main visual layout; scoped to the admin-managed banner. */
/* The homepage omits legacy default.css, including its login-message hiding rule. */
#hd_login_msg { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; }
#main_visual.managed_banner { position: relative; width: 100%; overflow: hidden; padding-top: 82px; }
#main_visual.managed_banner .bg_slides { position: relative; width: 100%; height: auto; aspect-ratio: 1920 / 480; }
#main_visual.managed_banner .bg_slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
#main_visual.managed_banner .bg_slide.active { opacity: 1; pointer-events: auto; z-index: 1; }
#main_visual.managed_banner .banner_link,
#main_visual.managed_banner picture { display: block; width: 100%; height: 100%; }
#main_visual.managed_banner .bg_slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

#main_visual.managed_banner .slide_arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.25); color: #16223f; display: flex; align-items: center; justify-content: center; z-index: 5; opacity: 1; visibility: visible; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
#main_visual.managed_banner .slide_arrow:hover { background: #16223f; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
#main_visual.managed_banner .slide_arrow.prev { left: 16px; }
#main_visual.managed_banner .slide_arrow.prev:hover { transform: translateY(-50%) translateX(-2px); }
#main_visual.managed_banner .slide_arrow.next { right: 16px; }
#main_visual.managed_banner .slide_arrow.next:hover { transform: translateY(-50%) translateX(2px); }
#main_visual.managed_banner .slide_arrow svg { width: 18px; height: 18px; }

#main_visual.managed_banner .slide_progress { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,0.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#main_visual.managed_banner .slide_progress .prog { width: 34px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.4); overflow: hidden; position: relative; }
#main_visual.managed_banner .slide_progress .prog_fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: #fff; border-radius: 2px; }
#main_visual.managed_banner .slide_progress .prog.active .prog_fill { animation: cbmcSlideFill 5s linear forwards; }
@keyframes cbmcSlideFill { from { width: 0%; } to { width: 100%; } }

@media (max-width: 1023px) {
    #main_visual.managed_banner { padding-top: 60px; }
    #main_visual.managed_banner .bg_slides { aspect-ratio: 1920 / 765; }
    #main_visual.managed_banner .slide_arrow { width: 32px; height: 32px; }
    #main_visual.managed_banner .slide_arrow.prev { left: 10px; }
    #main_visual.managed_banner .slide_arrow.next { right: 10px; }
    #main_visual.managed_banner .slide_progress { bottom: 10px; }
}
@media (max-width: 767px) {
    #main_visual.managed_banner .bg_slides { aspect-ratio: 1280 / 700; }
    #main_visual.managed_banner .slide_arrow { width: 27px; height: 27px; }
    #main_visual.managed_banner .slide_arrow svg { width: 15px; height: 15px; }
}