@charset "UTF-8";
/*******************************
company_guide Css
*******************************/
/*------------------------
common
------------------------*/
.pCompanyGuide {
    .hero {
        position: relative;
        margin-top: 40px;
        margin-bottom: 100px;
        height: 560px;
    }

    .hero .bg-img {
        width: 85%;
        height: 466px;
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }

    /*---page-ttl---*/

    .hero .intro {
        background-color: #eef5eb;
        width: 25%;
        aspect-ratio: 1 / 1;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .page-ttl {
        font-size: 24px;
        font-weight: 500;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 50%;
        left: 15%;
        transform: translateY(-50%);
    }

    .page-ttl .sub {
        display: block;
        font-size: 60%;
        font-weight: 600;
        color: var(--GL-green);
        margin-bottom: 20px;
    }

    .btn-arrow:after {
        content: url(../../img/common/ico_arrow.svg);
        display: inline-block;
        vertical-align: middle;
        margin-left: 1em;
        filter: invert(64%) sepia(12%) saturate(18%) hue-rotate(14deg) brightness(102%) contrast(90%);
    }

    /*==== mobile スマフォ縦用css ===*/
    @media screen and (max-width: 480px) {
        .hero {
            margin-top: 40px;
            margin-bottom: 40px;
            height: 210px;
        }

        .hero .bg-img {
            top: -20px;
        }

        .hero .intro {
            width: 80%;
            aspect-ratio: 3 / 1;
        }

        .page-ttl {
            font-size: 24px;
        }

        .page-ttl .sub {
            margin-bottom: 0;
        }
    }

    /*---btn-w100---*/

    .btn-w100 {
        display: block;
        position: relative;
        overflow: hidden;
        width: 100%;
        padding: 26px;
        text-align: center;
        text-decoration: none;
        background: #F5F5F5;
        color: var(--black_33);
        letter-spacing: .1em;
        line-height: 1;
    }

    .btn-w100 .txt {
        position: relative;
        font-size: 20px;
        color: var(--GL-green);
        font-weight: 600;
    }

    .btn-w100 .txt:before {
        content: url("../../img/common/ico_house.svg");
        display: inline-block;
        margin-right: 1em;
        vertical-align: middle;
    }

    /*==== PCのみ用css ===*/
    @media screen and (min-width: 896px) {
        .btn-w100:hover {
            box-shadow: 0px 0px 20px 0px #e0e0e0;
        }
    }


    /*---company_guide---*/

    .sec-company_guide {
        margin-bottom: 120px;
    }

    .sec-company_guide_box {
        padding: 0 10% 60px;
    }

    .line-style_bottom {
        padding: 20px 0;
        border-bottom: solid 1px #D9D9D9;
    }

    .line-style_bottom:last-child {
        border-bottom: none;
    }

    .line-style_bottom.flex .ttl {
        width: 20%;
        font-size: 16px;
        font-weight: 500;
        color: var(--GL-green);
    }

    .line-style_bottom.flex .detail {
        width: 80%;
        margin: 0;
    }

    /*==== PCのみ用css ===*/
    @media screen and (min-width: 896px) {
    }
    /*==== mobile スマフォ縦用css ===*/
    @media screen and (max-width: 480px) {
        .sec-company_guide_box {
            padding: 0 0 30px;
        }

        .line-style_bottom {
            margin: 0;
        }

        .line-style_bottom.flex .ttl, .line-style_bottom.flex .detail {
            width: 100%;
        }
    }

    /*---company_nav---*/

    .company_nav_list.flex {
        flex-wrap: wrap;
        column-gap: 60px;
        grid-row-gap: 30px;
    }

    .company_nav_list .company_nav_list_item {
        width: calc(100% / 3 - 40px);
    }

    .company_nav_list .company_nav_list_item .btn-arrow {
        width: 100%;
        position: relative;
        text-decoration: none;
        display: block;
        padding: 50px 60px 50px 30px;
        background-color: #F5F5F5;
        color: var(--black_33);
        font-size: 16px;
        font-weight: 500;
    }

    .company_nav_list .company_nav_list_item .btn-arrow:after {
        margin-left: 0;
        transform: rotate(45deg) translateY(-60%);
        position: absolute;
        top: 50%;
        right: 40px;
    }

    .company_nav_list .company_nav_list_item .btn-arrow.active {
        background-color: var(--beige);
    }

    .company_nav_list .company_nav_list_item .btn-arrow:before {
        content: "";
        width: 36px;
        height: 36px;
        background-color: var(--GL-green);
        border-radius: 50%;
        position: absolute;
        top: 37%;
        right: 19px;
        display: none;
        transition: all 300ms 0s ease;
    }

    .company_nav_list .company_nav_list_item .btn-arrow.active:before {
        display: block;
    }

    .company_nav_list .company_nav_list_item .btn-arrow.active:after {
        filter: none;
    }

    /*==== PCのみ用css ===*/
    @media screen and (min-width: 896px) {
        .company_nav_list .company_nav_list_item .btn-arrow:hover {
            background-color: var(--beige);
        }

        .company_nav_list .company_nav_list_item .btn-arrow:hover:before {
            display: block;
        }

        .company_nav_list .company_nav_list_item .btn-arrow:hover:after {
            filter: none;
        }
    }
    /*==== mobile スマフォ縦用css ===*/
    @media screen and (max-width: 480px) {
        .company_nav_list .company_nav_list_item {
            width: 100%;
        }

        .company_nav_list .company_nav_list_item .btn-arrow {
            padding: 20px 60px 20px 30px;
        }

        .company_nav_list .company_nav_list_item .btn-arrow:before {
            top: 25%;
            right: 19px;
        }
    }
}