@charset "utf-8";

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

/**************************** 
    カスタムスタイル
****************************/
.top_search .top_search__button:hover{
    border: 2px solid var(--WHT);
}

/**************************** 
    メインビジュアル
****************************/
/* hero */
.top_mv{
  position: relative;
  overflow: hidden;
  min-height: 650px;
  background: url('/dcms_media/image/top_mv-bg-sp.webp') center / cover no-repeat;
}

@media print, screen and (min-width: 1200px) {
    .top_mv {
        margin-top: 120px;
    }
}

/* overlay */
.top_mv::after{
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background-image: url('/dcms_media/image/top_mv-img-sp.webp');
    background-repeat: no-repeat;
    background-position: bottom 10px center;
    background-size: clamp(595px, 120vw, 650px) auto;
}

/* content layers */
.top_mv__fv-outer{
    position: relative;
    z-index: 2;
}
.top_mv__fv-txtarea{
    position: relative;
}
.top_mv__fv-inside{
  padding: 2.5em 7.63vw 0;
  text-align:center;
}

/* content */
.sp-none{display: none;}
.top_mv__card-title{
    font-size: clamp(2rem, 5.46vw, 2.625rem);
    letter-spacing: normal;
}
.top_mv__card-inside{padding-bottom: 40px;}
.top_mv__card-txt{margin-top: 20px;}
.top_mv__btns{
    max-width: 268px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto;
}

@media (min-width: 768px){
    .top_mv{
        min-height:600px;
        background: url('/dcms_media/image/top_mv-bg-pc.webp') center / cover no-repeat;
    }
    .top_mv::after{
        background-image: url('/dcms_media/image/top_mv-img-pc.webp');
        background-position: right -100% center;
        background-size: clamp(630px, 65vw, 1100px) auto;
    }
    .top_mv__fv-inside{
        padding-top: 87px;
        max-width: 350px;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
    }

    /* content */
    .top_mv__card-title{
        font-size: clamp(40px, 3.571vw, 60px);
    }
    .top_mv__btns{margin: 0;}
}

@media (min-width: 830px){
    .top_mv::after{
        background-position: right -30% center;
    }
}

@media (min-width: 992px){
    .top_mv__fv-inside{
        max-width: 516px;
    }
    .sp-none{display: block;}
}


/**************************** 
    製品紹介
****************************/
.top_products{
    background: url('/dcms_media/image/top_product-bg.webp') no-repeat center / cover;
}

/**************************** 
    形状から探す
****************************/
.top_search{
    background: url('/dcms_media/image/top_search-bg.webp') no-repeat center / cover;
}

/**************************** 
    施工事例
****************************/
.top_case{
    background: url('/dcms_media/image/top_case-bg.webp') no-repeat center / cover;
}

/**************************** 
    資料ダウンロード
****************************/
.top_download{
    background: url('/dcms_media/image/top_download-bg.webp') no-repeat center / cover;
}

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

/**************************** 
    ヘッダー
****************************/
.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);
}

@media print, screen and (min-width: 1360px){
    /*.lib-nav__panel:has(.lib-induce__outer){padding-right: 240px;}*/
    .is-scroll .lib-header__outer.lib-header-BS02 .lib-induce__btn .txt{font-size:.875rem}
}

/**************************** 
    フッター
****************************/
.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);
    }
}

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

@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;
    }
}

/**************************** 
    スパンドレルについて
****************************/
.about_sample{
    background: url('/dcms_media/image/about_sample-bg.webp') no-repeat center / cover;
}

/* pagination */
.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);
  }