@charset "utf-8";

/**************************** 
    utility
****************************/
.ls-normal{letter-spacing: normal;}

/**************************** 
    共通
****************************/
.title-decor{
    position: relative;
}
.title-decor::after{
    content: '';
    display: block;
    position: absolute;
    height: 5px;
    width: 72px;
    background-color: var(--ACC);
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1rem;
}

/**************************** 
    ナビゲーション
****************************/
@media print, screen and (min-width: 1280px){
    .lib-nav__panel:has(.lib-induce__outer){padding-right: 250px;}
    .is-scroll .lib-header__outer.lib-header-BS02 .lib-induce__btn .txt{font-size:.875rem}
}

/**************************** 
    ヘッダー
****************************/
@media print, screen and (min-width: 1050px){
    .lib-header__outer.lib-header-BS02{
        -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, .16);
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, .16);
    }
}

/**************************** 
    フッター
****************************/
.lib-footer__sns>li>a{
    background-color: var(--MAIN);
    border: var(--MAIN) 2px solid;
}

.lib-footer__copyright{
    background-color: var(--MAIN);
}

@media print, screen and (min-width: 992px) {
    .lib-footer__outer.lib-footer-BS01 .lib-footer__utility{
        background-color: var(--MAIN);
    }
    .lib-footer__outer.lib-footer-BS01 .lib-footer__copyright{
        background-color: var(--MAIN);
    }
}

/**************************** 
    メインビジュアル
****************************/
.top_mv__title{
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    color: var(--bs-black);
    line-height: 1.4;
}
.top_mv__cdinside{padding-bottom: 2rem !important;}
.top_mv__txt{margin-top: 0.625rem;}

.top_mv .lib-wide__outer{
    background: url('/dcms_media/image/top_mv-bg-SP.webp') no-repeat top center / cover;

    min-height: 600px;
    height: 700px;
    height: min(700px, 90svh);
}


@media print, screen and (min-width: 480px){
    .top_mv .lib-wide__outer{
        background: url('/dcms_media/image/top_mv-bg-PC.webp') no-repeat center / cover;
        height: 600px;
    }
    .top_mv__title{
        font-size: clamp(2.25rem, 3.09vw, 3.25rem);
    }
}

@media print, screen and (max-width: 980px){
    .top_mv .lib-wide__outer{
        background-position: center right 30%;
    }
    .top_mv__fvinside{
        background: #fff;
        padding: 1.5rem;
        box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.10);
        margin-right: 12.72vw;
    }
}
@media print, screen and (min-width: 981px){
    .top_mv__fvinside{
        background: none;
        box-shadow: none;
        padding: inherit;
        margin-right: 0;
    }
}


/**************************** 
    ソリューション
****************************/
.top_solution{
    background: url('/dcms_media/image/top_solution-bg.webp') no-repeat center / cover;
}

/**************************** 
    use case
****************************/
.break-sp{display: none;}
@media print, screen and (max-width: 480px){
    .break-sp{display: block;}
}

/**************************** 
    サポート
****************************/
.top_support .lib-wide__outer{
    background: url('/dcms_media/image/top_support-bg.webp') no-repeat center / cover;
}

/**************************** 
    お問い合わせ
****************************/
.cta_contact{
    background: url('/dcms_media/image/cta_contact-bg.webp') no-repeat center / cover;
}

/**************************** 
    下層ページ用
****************************/
.lib-hero__outer{
    background: url(/dcms_media/image/child_page-header-bg.webp) no-repeat top right / cover;
}
.lib-breadcrumb__outer{
    background: var(--LGRY);
    color: var(--DEF);
}
.lib-breadcrumb__list li a,
.lib-breadcrumb__list li a[aria-current=location]{
    color: var(--DEF);
}

@media print, screen and (max-width: 600px){
    .lib-hero__outer{
        background: url(/dcms_media/image/child_page-header-bg.webp) no-repeat top right 20% / cover;
    }
}

.bg-lgry .swiper-pagination-bullet, .bg-lother .swiper-pagination-bullet {
    background-color: var(--DGRY) !important;
    border:1px solid var(--DGRY);
}
.bg-lgry .swiper-pagination-bullet:hover, .bg-lother .swiper-pagination-bullet:hover {
    border:1px solid var(--MAIN) !important;
    opacity: 0.7 !important;
}
.bg-lgry .swiper-pagination-bullet-active, .bg-lother .swiper-pagination-bullet-active {
    background-color: var(--MAIN) !important;
    border:1px solid var(--MAIN);
}