@charset "utf-8";

body{
    background: #f5f5f5;
}

.Company-part{
    position: relative;
    z-index: 1;
}
.Company-part::before{
    content: "";
    display: block;
    width: calc(50% + 105px);
    min-width: 730px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: inset 0 -10px #f5f5f5;
}
.Company-part__inner{
    padding-top: 80px;
    display: flex;
    align-items: center;
}
.Company-part-block{
    width: 560px;
    height: 475px;
    padding: 80px 85px 100px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    /* box-shadow: 50px 50px 50px rgba(0,0,0,.02),-50px -50px 50px rgba(0,0,0,.02),-50px 50px 50px rgba(0,0,0,.02),50px -50px 50px rgba(0,0,0,.02); */
    box-shadow: 0 0 50px rgba(0,0,0,.02);
}
.Company-part-block .part2024__title{
    width: 100%;
    margin-bottom: 10px;
    text-align: left;
}
.Company-part-block .part2024__text{
    margin-bottom: 58px;
}
.Company-part-block .part2024-Button{
    margin-left: 0;
}

@media screen and (max-width: 680px){

    .Company-part::before{
        width: calc(100% - calc(3.333333vw + 13.333333vw));
        min-width: auto;
        bottom: unset;
        box-shadow: inset 0 -5vw #f5f5f5;
    }
    .Company-part__inner{
        padding-top: calc(13.333333vw * 2);
    }
    .Company-part-block{
        width: 75vw;
        height: auto;
        padding: 10vw 7.5vw 7.5vw;
        box-shadow: 0 0 5vw rgba(0,0,0,.02);
    }
    .Company-part-block .part2024__title{
        margin-bottom: 2.5vw;
    }
    .Company-part-block .part2024__text{
        margin-bottom: 5vw;
    }

}



/*----- キービジュアル */
.Keyvisual2024{
    background-image: url(../image2024/t_company/bg_keyvisual.jpg);
    background-position: center bottom;
}
.Keyvisual2024__title{
    text-shadow: 5px 5px 5px rgba(178, 142, 106, .6),-5px 5px 5px rgba(178, 142, 106, .6),5px -5px 5px rgba(178, 142, 106, .6),-5px -5px 5px rgba(178, 142, 106, .6);
}

@media screen and (max-width: 680px){

}



/* ----- 会社概要・沿革 ----- */
.Profile{
    padding-top: 100px;
    padding-bottom: 110px;
    text-align: center;
    background: #fff;
}
.Profile .part2024__title{
    margin-bottom: 10px;
}
.Profile .part2024__text{
    max-width: 610px;
    margin: 0 auto 30px;
}

@media screen and (max-width: 680px){

    .Profile{
        padding-top: 13.333333vw;
        padding-bottom: 13.333333vw;
    }
    .Profile .part2024__title{
        margin-bottom: 5vw;
    }
    .Profile .part2024__text{
        max-width: 100%;
        margin: 0 auto 5vw;
    }

}



/* ----- 社長からのご挨拶 ----- */
.Message{
    margin-bottom: 170px;
    background: linear-gradient(180deg, rgba(16,45,59,1) 0%, rgba(24,70,92,1) 100%);
}
.Message__inner{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.Message-content{
    width: 50%;
    max-width: 512px;
    padding-top: 100px;
    padding-bottom: 112px;
    position: relative;
    z-index: 3;
}
.Message-content::before{
    content: "";
    display: block;
    width: 1105px;
    height: 486px;
    background-image: url(../image2024/t_company/obj_message.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: -1;
    transform: translate(-350px,-50%);
    mix-blend-mode: multiply;
}
.Message__message{
    width: 100%;
    font-size: 52px;
    padding: 35px 25px 35px 30px;
    margin-bottom: 80px;
    line-height: calc(70 / 52);
    font-weight: 700;
    position: relative;
    color: #51d4bb;
    font-family: YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.Message__message__frame{
    letter-spacing: .025em;
}
.Message__message__frame span{
    letter-spacing: -.025em;
}
.Message__message::before,
.Message__message::after,
.Message__message__frame::before,
.Message__message__frame::after{
    content: "";
    display: block;
    width: 70px;
    height: 28px;
    position: absolute;
}
.Message__message::before{
    border-top: 4px solid #227868;
    border-left: 4px solid #227868;
    top: 0;
    left: 0;
}
.Message__message::after{
    border-top: 4px solid #227868;
    border-right: 4px solid #227868;
    top: 0;
    right: 0;
}
.Message__message__frame::before{
    border-bottom: 4px solid #227868;
    border-left: 4px solid #227868;
    bottom: 0;
    left: 0;
}
.Message__message__frame::after{
    border-bottom: 4px solid #227868;
    border-right: 4px solid #227868;
    bottom: 0;
    right: 0;
}
.Message .part2024__title{
    margin-bottom: 10px;
    color: #fff;
}
.Message .part2024__text{
    margin-bottom: 30px;
    color: #fff;
}
.Message .part2024-Button a{
    border: 1px solid #fff;
}
.Message__image{
    width: 50%;
    position: relative;
    z-index: 2;
}
.Message__image img{
    width: calc(100% + 262px);
    height: 100%;
    max-width: none;
    object-fit: cover;
}

@media screen and (max-width: 680px){

    .Message{
        margin-bottom: 13.333333vw;
    }
    .Message__inner{
        flex-direction: column-reverse;
    }
    .Message-content{
        width: 100%;
        max-width: 100%;
        padding-top: 0;
        padding-bottom: 13.333333vw;
    }
    .Message-content::before{
        width: 100%;
        height: 100%;
        top: -25%;
        transform: translate(0,0);
    }
    .Message__message{
        font-size: 6.5vw;
        padding: 5vw;
        margin-bottom: 7.5vw;
        line-height: 1.3;
        text-align: center;
        margin-top: calc(((.8rem + 3.75vw + (1em * 1.3)) * -1));
        position: relative;
        z-index: 2;
    }
    .Message__message__frame{
        letter-spacing: .025em;
    }
    .Message__message__frame span{
        letter-spacing: -.025em;
    }
    .Message__message::before,
    .Message__message::after,
    .Message__message__frame::before,
    .Message__message__frame::after{
        width: 7.5vw;
        height: 3.75vw;
    }
    .Message__message::before{
        border-top: .8vw solid #227868;
        border-left: .8vw solid #227868;
    }
    .Message__message::after{
        border-top: .8vw solid #227868;
        border-right: .8vw solid #227868;
    }
    .Message__message__frame::before{
        border-bottom: .8vw solid #227868;
        border-left: .8vw solid #227868;
    }
    .Message__message__frame::after{
        border-bottom: .8vw solid #227868;
        border-right: .8vw solid #227868;
    }
    .Message .part2024__title{
        margin-bottom: 5vw;
    }
    .Message .part2024__text{
        margin-bottom: 5vw;
    }
    .Message__image{
        width: calc(100% + (3.333333vw * 2));
        transform: translateX(-3.333333vw);
    }
    .Message__image img{
        width: 100%;
        height: 55vw;
        object-position: top;
    }

}



/* ----- SDGsの取り組み ----- */
.Sdgs{
    padding-bottom: 110px;
}
.Sdgs::before{
    height: calc(100% - 110px);
    left: 0;
    background-image: url(../image2024/t_company/bg_sdgs.jpg);
}
.Sdgs__inner{
    justify-content: flex-end;
}

@media screen and (max-width: 680px){

    .Sdgs{
        padding-bottom: 0;
        margin-bottom: 13.333333vw;
    }
    .Sdgs::before{
        height: calc(100% - calc(13.333333vw * 1));
    }

}



/* ----- アフターケア ----- */
.Aftercare{
    padding-bottom: 110px;
}
.Aftercare::before{
    height: calc(100% - 110px);
    right: 0;
    background-image: url(../image2024/t_company/bg_aftercare.jpg);
}
.Aftercare__inner{
    justify-content: flex-start;
}

@media screen and (max-width: 680px){

    .Aftercare{
        padding-bottom: 0;
        margin-bottom: 13.333333vw;
    }
    .Aftercare::before{
        height: calc(100% - calc(13.333333vw * 1));
    }
    
}



/* ----- 法人のお客様へ ----- */
.Hosin{
    padding-bottom: 120px;
}
.Hosin::before{
    height: calc(100% - 120px);
    left: 0;
    background-image: url(../image2024/t_company/bg_hosin.jpg);
}
.Hosin__inner{
    justify-content: flex-end;
}

@media screen and (max-width: 680px){

    .Hosin{
        padding-bottom: 0;
        margin-bottom: 13.333333vw;
    }
    .Hosin::before{
        height: calc(100% - calc(13.333333vw * 1));
    }

}



/* ----- よくあるご質問 ----- */
.Faq__inner{
    padding: 95px 92px 95px 75px;
    background: #5096d2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.Faq__left{
    width: 370px;
}
.Faq__inner .part2024__title{
    margin-bottom: 20px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
    text-align: left;
}
.Faq__inner .part2024__text{
    padding-right: 1.5em;
    color: #fff;
    font-weight: 700;
}
.Faq__button-wrap{
    width: 626px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}
.Faq__button-wrap .part2024-Button{
    width: calc((100% - 10px) / 2);
    margin: unset;
}
.Faq__button-wrap .part2024-Button:not(:nth-last-of-type(-n+2)){
    margin-bottom: 20px;
}
.Faq__button-wrap .part2024-Button a:hover{
    background: none;
    border: 1px solid #fff;
}

@media screen and (max-width: 680px){

    .Faq__inner{
        padding: 13.333333vw 3.333333vw;
        flex-direction: column;
    }
    .Faq__left{
        width: 100%;
    }
    .Faq__inner .part2024__title{
        margin-bottom: 5vw;
    }
    .Faq__inner .part2024__text{
        margin-bottom: 5vw;
        padding-right: 0;
    }
    .Faq__button-wrap{
        width: 100%;
        flex-direction: column;
    }
    .Faq__button-wrap .part2024-Button{
        width: 100%;
        margin: unset;
    }
    .Faq__button-wrap .part2024-Button:not(:last-child){
        margin-bottom: 3.5vw;
    }

}



/* ----- アクセスマップ ----- */
.Access{
    padding-top: 125px;
    padding-bottom: 125px;
    overflow: hidden;
}
.Access__inner{
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.Access__image{
    width: calc(50% + 35px);
    z-index: 1;
    position: relative;
}
.Access__image__inner{
    width: calc(100% + 320px + (8px * 2));
    height: 100%;
    transform: translateX(calc(-320px - 8px));
    display: block;
    z-index: 1;
    position: relative;
}
.Access__image__inner::before,
.Access__image__inner::after{
    content: "";
    display: block;
    background: #f5f5f5;
    position: absolute;
    z-index: 2;
    width: 8px;
    height: 100%;
    top: 0;
    bottom: 0;
}
.Access__image__inner::before{
    left: 0;
}
.Access__image__inner::after{
    right: 0;
}
.Access__image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: unset;
}
.Access__frame{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}
.Access__frame::before,
.Access__frame::after{
    content: "";
    display: block;
    background: #f5f5f5;
    position: absolute;
    z-index: 2;
}
.Access__frame.-h::before,
.Access__frame.-h::after{
    width: 16px;
    height: 100%;
    top: 0;
    bottom: 0;
}
.Access__frame.-w::before,
.Access__frame.-w::after{
    width: calc((100% / 6) * 1);
    height: 35px;
}
.Access__frame.-frame1.-h::before{
    left: calc(((100% / 6) * 1) - 8px);
}
.Access__frame.-frame1.-h::after{
    left: calc(((100% / 6) * 2) - 8px);
}
.Access__frame.-frame2.-h::before{
    left: calc(((100% / 6) * 3) - 8px);
}
.Access__frame.-frame2.-h::after{
    left: calc(((100% / 6) * 4) - 8px);
}
.Access__frame.-frame3.-h::before{
    left: calc(((100% / 6) * 5) - 8px);
}
.Access__frame.-frame3.-h::after{
    display: none;
}
.Access__frame.-frame4.-w::before{
    bottom: 0;
    left: 0;
}
.Access__frame.-frame4.-w::after{
    top: 0;
    left: calc(((100% / 6) * 1));
}
.Access__frame.-frame5.-w::before{
    bottom: 0;
    left: calc(((100% / 6) * 2));
}
.Access__frame.-frame5.-w::after{
    top: 0;
    left: calc(((100% / 6) * 3));
}
.Access__frame.-frame6.-w::before{
    bottom: 0;
    left: calc(((100% / 6) * 4));
}
.Access__frame.-frame6.-w::after{
    top: 0;
    left: calc(((100% / 6) * 5));
}
.Access-content{
    width: 565px;
    padding: 165px 95px 118px;
}
.Access .part2024__title{
    margin-bottom: 10px;
    text-align: left;
}
.Access .part2024__text{
    margin-bottom: 25px;
    font-weight: 700;
}

@media screen and (max-width: 680px){

    .Access{
        padding-top: 13.333333vw;
        padding-bottom: 13.333333vw;
    }
    .Access__inner{
        flex-direction: column;
    }
    .Access__image{
        width: calc(100% + calc(3.333333vw * 2 + (1.25vw * 2)));
        transform: translateX(calc(-3.333333vw - 1.25vw));
        margin-bottom: 7.5vw;
    }
    .Access__image__inner{
        width: 100%;
        height: 50vw;
        transform: translateX(0);
    }
    .Access__image__inner::before,
    .Access__image__inner::after{
        width: 1.25vw;
    }
    .Access__frame.-h::before,
    .Access__frame.-h::after{
        width: 2.5vw;
    }
    .Access__frame.-w::before,
    .Access__frame.-w::after{
        width: calc((100% / 6) * 1);
        height: 5vw;
    }
    .Access__frame.-frame1.-h::before{
        left: calc(((100% / 6) * 1) - 1.25vw);
    }
    .Access__frame.-frame1.-h::after{
        left: calc(((100% / 6) * 2) - 1.25vw);
    }
    .Access__frame.-frame2.-h::before{
        left: calc(((100% / 6) * 3) - 1.25vw);
    }
    .Access__frame.-frame2.-h::after{
        left: calc(((100% / 6) * 4) - 1.25vw);
    }
    .Access__frame.-frame3.-h::before{
        left: calc(((100% / 6) * 5) - 1.25vw);
    }
    .Access-content{
        width: 100%;
        padding: 0;
    }
    .Access .part2024__title{
        margin-bottom: 5vw;
        line-height: 1;
    }
    .Access .part2024__text{
        margin-bottom: 5vw;
    }

}