@charset "UTF-8";

@import url(/style/common.css);

.mv {
    position: relative;
    text-align: right;
    margin-top: var(--margin-xlarge);
}

.mv .message {
    font-weight: bold;
    text-align: left;
    letter-spacing: .3rem;
    line-height: 1.3;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    text-shadow: 0 0 30px #FFf, 0 0 22px #fff, 0 0 4px #fff;
}

.mv .message .mv_text_large {
    font-size: var(--font-size-mv-large);
    letter-spacing: .3rem;
}

.mv .message .mv_text_middle {
    font-size: var(--font-size-mv);
    letter-spacing: .2rem;

}

.mv .message .mv_text_xlarge {
    font-size: var(--font-size-mv-xlarge);
    letter-spacing: .3rem;
}

.mv  picture img {
    width: 997px;
}

.about {
    padding-bottom: 0;
}

.about p {
    font-size: var(--font-size-default);
    text-align: center;
    margin-bottom: 160px;
}

.about ul {
    gap: 0 var(--margin-contents);
    align-items: flex-start;
    position: relative;
    top: -80px;
}

.about li img {
    width: 100%;
}

.about li {
    width: 25%;
    background: var(--white);
}

.about dl {
    padding: 30px 16px;
}
.about dt {
    margin: 0 0 30px 0;
}

.about li:nth-child(2) {
    margin-top: 24px;
}

.about li:nth-child(3) {
    margin-top: 48px;
}

.about li:nth-child(4) {
    margin-top: 72px;
}

/*voice*/

.voice {
    background: var(--bg-corporate-blue);
}

.voice ul {
    gap: 0 var(--margin-contents);
    justify-content: center;
}

.voice li {
    width: 40%;
    text-align: center;
    background: var(--white);
    padding: 30px 24px;
    border-radius: 4px;
}

.voice img {
    width: 120px;
}

.voice li p {
    text-align: left;
    margin-top: 30px;
}

/*faq */

.service {
    background: var(--bg-grey);
}

.service div {
    gap: 0 var(--margin-large);
}

.service dd {
    margin: var(--margin-small) 0;
}

.service img {
    width: 50%;
    object-fit: contain;
}
.margin_b_20 {
    margin-bottom: 20px;
}

.corporate>div {
    gap: 0 var(--margin-large);
    flex-wrap: wrap;
}

.corporate>div >div {
    flex-basis: 400px;
    flex-grow: 2;
}

.corporate .logo {
    width: 300px;
    margin-bottom: var(--margin-middle)
}

.corporate .table div {
    display: flex;
    align-items: center;
    gap: 0 var(--margin-contents);
    margin-bottom: var(--margin-contents);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--separator);
}

.corporate .table-without-border div {
    margin-bottom: var(--margin-xsmall);
}

.corporate dt {
    width: 100px;
}

.contact h2 {
    flex-grow: 1;
}

@media screen and (max-width: 769px) {
    .mv {
        text-align: center;
        padding-left: 16px;
    }

    .mv .message {
        position: relative;
        top: 0;
        transform: inherit;
        letter-spacing: 0.1rem;
        margin-top: var(--margin-large);
        margin-bottom: var(--margin-xlarge);
    }

    .mv picture  img {
        width: 100%;
    }

    .about {
        padding: 0 16px;
    }

    .about p {
        margin-bottom: var(--margin-large);
    }

    .about .flex {
        flex-direction: column;
        gap: var(--margin-contents) 0;
        position: relative;
        top: 0;
    }

    .about ul li {
        display: flex;
        width: 100%;
    }

    .about li:nth-child(2), .about li:nth-child(3), .about li:nth-child(4) {
        margin-top: 0;
    }

    .about ul li img {
        width: 40%;
        object-fit: contain;
    }

    .google_map {
        margin-top: var(--margin-large);
    }

    .voice ul {
        flex-direction: column;
        gap: var(--margin-contents) 0;
    }

    .voice ul li {
        width: 100%;
    }

    .faq dl {
        width: 100%;
    }

    .service .flex {
        align-items: center;
    }

    .service img {
        width: 100%;
        max-width: 600px;
        margin-bottom: var(--margin-middle);
    }
}