@charset "utf-8";

/* ---------------------sub_mv-------------------- */
.sub_mv{
    background: url(/assets/img/company/sub_mv.jpg) no-repeat center center/cover;
}

/* ---------------------message-------------------- */
.message{
    padding: 244px 0 80px;
}

.message .wrap{
    display: flex;
    flex-direction: row-reverse;
    column-gap: 121px;
    justify-content: center;
}

.message .texts{
    width: 539px;
    padding: 49px 0 25px;
}

.message h2{
    margin-bottom: 55px;
}

.message .text{
    width: 507px;
    margin-bottom: 35px;
    color: var(--black);
}

.message .sign{
    width: 100%;
    text-align: end;
    color: var(--black);
}

.message .position{
    margin-right: 26px;
}

.message .name{
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-size: 36px;
}

.message .photo{
    width: 440px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
}

/* ---------------------outline-------------------- */
.outline{
    background-color: #FEFCE1;
    padding: 104px 0;
}

.outline .wrap{
    max-width: 1070px;
    padding: 80px;
    background-color: white;
}

.outline h2{
    padding-bottom: 80px;
    border-bottom: 1px solid #B0D378;
}

.outline dl>div{
    display: flex;
    padding: 32px 48px;
    column-gap: 48px;
    color: var(--black);
    border-bottom: 1px solid #B0D378;
    align-items: center;
}

.outline dt{
    width: 192px;
    font-weight: 500;
}

.outline dd{
    width: 622px;
}

/* ---------------------Access-------------------- */
.access{
    padding: 128px 0;
}

.access address{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    column-gap: 81px;
}

.access .texts{
    width: 319px;
}

.access h2{
    margin-bottom: 80px;
}

.access .noto{
    margin-bottom: 40px;
}

.access .map{
    display: block;
    width: fit-content;
    color: var(--main);
    padding:5px 60px 16px 0;
    position: relative;
}

.access .map::before{
    content: '';
    width: 100%;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, rgba(1, 64, 96, .8), rgba(19, 169, 233, .8)) 1;
    position: absolute;
    right: 0;
    bottom: 0;
}

.access .map:hover::before{
    width: 0;
    animation: border_anim .7s ease;
}

@keyframes border_anim {
    0%{
        width: 100%;
    }
    100%{
        width: 0%;
    }
}

.access .map::after{
    content: '';
    display: block;
    width: 40px;
    aspect-ratio: 1/1;
    background: url(/assets/img/link.svg) no-repeat center center/cover;
    position: absolute;
    top: 0;
    right: 0;
}


@media screen and (max-width:750px) {
    /* ---------------------sub_mv-------------------- */
    .sub_mv{
        background: url(/assets/img/company/sub_mv_sp.jpg) no-repeat center center/cover;
    }

    /* ---------------------message-------------------- */
    .message{
        padding: calc((100 / 390) * 153 * 1vw) 0 calc((100 / 390) * 56 * 1vw);
    }

    .message .wrap{
        display: block;
    }

    .message .texts{
        width: 100%;
        margin-bottom: calc((100 / 390) * 48 * 1vw);
        padding: 0;
    }

    .message h2{
        margin-bottom: calc((100 / 390) * 32 * 1vw);
    }

    .message .text{
        width: 100%;
        margin-bottom: calc((100 / 390) * 24 * 1vw);
    }

    .message .position{
        margin-right: calc((100 / 390) * 24 * 1vw);
    }

    .message .name{
        font-size: calc((100 / 390) * 24 * 1vw);
    }

    .message .photo{
        width: calc((100 / 390) * 280 * 1vw);
        margin: 0 auto;
        box-shadow: 0 calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 30 * 1vw) rgba(0,0,0,.1);
    }

    /* ---------------------outline-------------------- */
    .outline{
        padding: calc((100 / 390) * 40 * 1vw) 0;
    }

    .outline .wrap{
        max-width: calc((100 / 390) * 358 * 1vw);
        padding: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 16 * 1vw);
    }

    .outline h2{
        padding-bottom: calc((100 / 390) * 40 * 1vw);
        border-bottom: calc((100 / 390) * 1 * 1vw) solid #B0D378;
    }

    .outline dl>div{
        padding: calc((100 / 390) * 12 * 1vw) calc((100 / 390) * 6 * 1vw) calc((100 / 390) * 12 * 1vw) calc((100 / 390) * 16 * 1vw);
        column-gap: calc((100 / 390) * 16 * 1vw);
        border-bottom: calc((100 / 390) * 1 * 1vw) solid #B0D378;
    }

    .outline dt{
        width: calc((100 / 390) * 80 * 1vw);
    }

    .outline dd{
        width: calc((100 / 390) * 208 * 1vw);
    }


    /* ---------------------Access-------------------- */
    .access{
        padding: calc((100 / 390) * 64 * 1vw) 0;
    }

    .access address{
        display: block;
    }

    .access .texts{
        width: 100%;
    }

    .access h2{
        margin-bottom: calc((100 / 390) * 32 * 1vw);
    }

    .access .noto{
        margin-bottom: calc((100 / 390) * 32 * 1vw);
    }

    .access .map{
        margin-bottom: calc((100 / 390) * 40 * 1vw);
        padding:0 calc((100 / 390) * 50 * 1vw) calc((100 / 390) * 10 * 1vw) 0;
    }

    .access .map::before{
        border-bottom: calc((100 / 390) * 2 * 1vw) solid;
    }

    .access .map::after{
        width: calc((100 / 390) * 30 * 1vw);
    }

    .access iframe{
        width: 100%;
        height: calc((100 / 390) * 230 * 1vw);
    }
}