@charset "utf-8";

/**************************** 
    ナビゲーション
****************************/
@media print, screen and (min-width: 1050px){
    .is-scroll .lib-header__outer.lib-header-BS02 .lib-induce__outer{
        width: 300px;
    }
    .is-scroll .lib-nav__panel:has(.lib-induce__outer){padding-right: 300px;}
}
@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);
    }
}

/**************************** 
    メインビジュアル
****************************/
.top_mv{
    background: url(/dcms_media/image/top_mv-sp.webp) no-repeat center / cover;
    height: 80vh;
    padding-top: 60px;
}
.top_mv__inside{
    padding-left: 30px;
    padding-right: 30px;
}
.top_mv__title{
    font-size: clamp(1.625rem, 4.693vw, 2.25rem); /* 26, 36 */
    line-height: 1.38;
}
.break-on-pc{display: none;}
.top_mv__lead{margin-top: 20px;}
.top_mv__content{padding-bottom:40px !important;}

@media print, screen and (min-width: 480px){}

@media print, screen and (min-width: 768px){
    .top_mv{
        background: url(/dcms_media/image/top_mv.webp) no-repeat bottom center / cover;
        height: 600px;
    }
    .top_mv__title{
        line-height: 1.4;
        font-size: clamp(2.25rem, 2.976vw, 3.125rem);
    }
    .top_mv__btns{
        max-width: 546px;
        column-gap: 10px;
    }
    .top_mv__btns .col{
        margin: 0;
        padding: 0;
        max-width: 268px;
        width: 100%;
    }
    .break-on-pc{display: block;}
}

/**************************** 
    菁映社について
****************************/
.top_about{
    margin-top: -96px !important;
}
.top_about__outer{
    background: url(/dcms_media/image/top_about-bg.webp) top left / cover;
}

/**************************** 
    サービス内容
****************************/
.top_service__subtitle{
    font-weight: normal;
    line-height: 1.75;
    padding: 14px 8px;
}

/**************************** 
    制作実績
****************************/
.top_case__outer{
    background: url(/dcms_media/image/top_case-bg.webp) no-repeat top left / cover;
}

/**************************** 
    ご依頼について
****************************/
.top_flow .top_flow__title{font-weight: bold;}
.top_flow__row{
    grid-template-columns: 1fr;
}

@media print, screen and (min-width: 991px){
.top_flow__row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .top_flow__col:nth-child(4),
  .top_flow__col:nth-child(5){
    grid-column: auto;
  }
}

@media print, screen and (min-width: 992px){
    .top_flow .lib-flow-005__row{
        grid-template-columns: repeat(12, 1fr);
    }
    .top_flow .lib-flow-005__col:nth-child(-n+3){
        grid-column: span 4;
    }
    .top_flow .lib-flow-005__col:nth-child(4){
        grid-column: 3 / 7;
    }
    .top_flow .lib-flow-005__col:nth-child(5){
        grid-column: 7 / 11;
    }
}

/**************************** 
    ページ下CTAブロック
****************************/
.cta_contact{
    background: url(/dcms_media/image/cta_contact-bg.webp) no-repeat top left / cover;
}

/**************************** 
    フッター
****************************/
.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(--MAIN);
    color: var(--bs-white);
}
.lib-breadcrumb__list li a,
.lib-breadcrumb__list li a[aria-current=location]{
    color: var(--bs-white);
}
@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;
    }
}