@charset "utf-8";
/* CSS Document */

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
フロントページ
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
.front-mainimg-wrap {
    position: relative;
    height: calc(100vh - 11.2rem);
    min-height: 680px;
    @media screen and (max-width: 768px) {
        height: auto;
        aspect-ratio: 1/1;
        min-height: 0;
    }
    .slider-main {
        height: calc(100vh - 11.2rem);
        min-height: 680px;
        @media screen and (max-width: 768px) {
            height: auto;
            aspect-ratio: 1/1;
            min-height: 0;
        }
        .slick-list {
            height: 100%;
            .slick-track {
                height: 100%;

                .slider-item {
                }
            }
        }
    }

    .maincopy-wrap {
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        @media screen and (max-width: 480px) {
            background: rgba(0, 0, 0, 0.8);
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
        }
        .inner {
            width: 90%;
            transform: translateY(10%);
            @media screen and (max-width: 480px) {
                transform: translateY(0);
            }
            h1 {
                min-width: 48.3rem;
                width: 40%;
                margin-bottom: 4rem;
                @media screen and (max-width: 480px) {
                    width: 100%;
                    min-width: 0;
                }
            }
            .copy-text {
                font-size: clamp(1.8rem, 1.5625vw, 2.4rem);
                font-weight: 400;
                letter-spacing: 0.1em;
                line-height: 2;
                color: #fff;
                margin-left: 2em;
                word-break: keep-all;
                text-align: left;
                @media screen and (max-width: 480px) {
                    font-size: var(--fsize_m);
                    margin-left: 0;
                    line-height: 1.75;
                }
            }
        }
    }
}

.contents {
    h2.title {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        box-sizing: border-box;
        width: 100%;
        gap: 3rem;
        background-color: #fff;
        padding: 6rem 0;
        @media screen and (max-width: 480px) {
            padding: 3rem 0;
            gap: 2rem;
        }
        .en {
            font-size: 6.4rem;
            letter-spacing: 0.05em;
            padding-left: 0.05em;
            position: relative;
            color: var(--color-deep-blue);
            &::after {
                content: "";
                display: block;
                position: absolute;
                width: 1.1em;
                height: 2px;
                background-color: var(--color-deep-blue);
                bottom: -1.5rem;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            @media screen and (max-width: 480px) {
                font-size: 3.2rem;
                &::after {
                    bottom: -1rem;
                }
            }
        }
        .ja {
            font-size: var(--fsize_xl);
            font-weight: 500;
            letter-spacing: 0.1em;
            padding-left: 0.1em;
            @media screen and (max-width: 480px) {
                font-size: var(--fsize_l);
            }
        }
    }
    .service-wrap {
        background-color: #e5f3ff;
        padding-bottom: 6rem;
        @media screen and (max-width: 480px) {
            padding-bottom: 3rem;
        }
        .inner {
            padding-top: 4.8rem;
            @media screen and (max-width: 480px) {
                padding-top: 3rem;
            }
            .leadcopy {
                font-size: var(--fsize_xl);
                line-height: 2;
                font-weight: 600;
                text-align: center;
                color: var(--color-deep-blue);
                letter-spacing: 0.1em;
                margin-bottom: 6rem;
                word-break: keep-all;
                @media screen and (max-width: 480px) {
                    font-size: var(--fsize_l);
                    margin-bottom: 3rem;
                }
            }
            ul.service-list {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                @media screen and (max-width: 480px) {
                }
                li {
                    background-color: #fff;
                    border-radius: 0.5rem;
                    overflow: hidden;
                    max-width: 360px;
                    width: 32%;
                    margin-bottom: 4rem;
                    @media screen and (max-width: 480px) {
                        width: 49%;
                        margin-bottom: 1.6rem;
                    }
                    .img-wrap {
                    }
                    .text-wrap {
                        font-size: var(--fsize_m);
                        padding: 1.5em;
                        @media screen and (max-width: 480px) {
                            font-size: var(--fsize_s);
                            padding: 1em;
                        }
                        h4 {
                            font-size: var(--fsize_l);
                            text-align: center;
                            color: var(--color-deep-blue);
                            margin-bottom: 1.5em;
                            position: relative;

                            &::after {
                                content: "";
                                display: block;
                                position: absolute;
                                width: 1.1em;
                                height: 2px;
                                background-color: var(--color-deep-blue);
                                bottom: -0.8em;
                                left: 50%;
                                transform: translate(-50%, -50%);
                            }
                            @media screen and (max-width: 480px) {
                                font-size: var(--fsize_m);
                            }
                            span {
                                letter-spacing: 0.1em;
                                padding-left: 0.1em;
                                display: inline-block;
                            }
                        }
                        p {
                            line-height: 1.5;
                        }
                    }
                }
            }
        }
    }
    section.bg-white {
        background-color: #fff;
        &.flow-wrap {
            ul.step-list {
                display: flex;
                justify-content: space-between;
                margin-bottom: 6rem;
                flex-wrap: wrap;
                @media screen and (max-width: 480px) {
                    width: 92%;
                    margin: 0 auto 2rem;
                }
                li {
                    width: 14%;
                    position: relative;

                    &::after {
                        content: "";
                        display: block;
                        background-color: #fc0;
                        clip-path: polygon(0 0, 100% 50%, 0 100%);
                        width: 9%;
                        aspect-ratio: 1/1.4;
                        position: absolute;
                        top: 37%;
                        right: -16%;
                    }
                    @media screen and (max-width: 480px) {
                        width: 28%;
                        margin-bottom: 2rem;
                        &::after {
                            width: 12%;
                            right: -20%;
                        }
                    }
                    &:last-child::after {
                        display: none;
                    }
                }
            }
            p.text-main {
                font-size: var(--fsize_l);
                line-height: 1.75;
                max-width: 980px;
                margin: auto;
                @media screen and (max-width: 480px) {
                    font-size: var(--fsize_m);
                }
            }

            .area-wrap {
                display: flex;
                margin-top: 8rem;
                justify-content: space-between;
                align-items: center;
                @media screen and (max-width: 480px) {
                    margin-top: 4rem;
                    flex-direction: column-reverse;
                    gap: 2rem;
                }
                .text-wrap {
                    width: 50%;
                    @media screen and (max-width: 480px) {
                        width: 100%;
                    }
                    h3 {
                        font-size: min(4vw, 4.8rem);
                        color: var(--color-deep-blue);
                        font-weight: 700;
                        line-height: 1.5;
                        margin-bottom: 0.75em;
                        text-align: left;
                        @media screen and (max-width: 480px) {
                            font-size: var(--fsize_xl);
                            text-align: center;
                            br {
                                display: none;
                            }
                        }
                    }
                    p {
                        font-size: var(--fsize_m);
                        line-height: 2;
                        color: #333;
                    }
                }
                .img-wrap {
                    width: 45%;
                    @media screen and (max-width: 480px) {
                        width: 90%;
                        margin: auto;
                    }
                }
            }
        }
    }

    section.maintenance-wrap {
        .anshin-wrap {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6rem;
            @media screen and (max-width: 480px) {
                flex-direction: column-reverse;
                gap: 3rem;
            }
            .img-wrap {
                width: 49%;
                @media screen and (max-width: 480px) {
                    width: 90%;
                    margin: auto;
                }
            }
            .text-wrap {
                width: 46%;
                @media screen and (max-width: 480px) {
                    width: 100%;
                }
                h3 {
                    font-size: min(2.75vw, var(--fsize_xxl));
                    color: var(--color-deep-blue);
                    margin-bottom: 1em;
                    border-left: 4px solid var(--color-deep-blue);
                    padding-left: 0.5em;
                    line-height: 1.5;
                    @media screen and (max-width: 480px) {
                        font-size: var(--fsize_xl);
                    }
                }
                p {
                    font-size: var(--fsize_m);
                    line-height: 1.75;
                }
            }
        }
        .banner-wrap {
            margin: 4rem auto 0;
            h4 {
                font-size: var(--fsize_xl);
                margin: 1em 0;
                color: var(--color-deep-blue);
                @media screen and (max-width: 480px) {
                    font-size: var(--fsize_l);
                    text-align: center;
                }
            }
            p {
                font-size: var(--fsize_m);
                line-height: 1.75;
            }
        }
    }

    section.license-wrap {
        .flex-wrap {
            position: relative;
            .text-wrap {
                width: 70%;
                @media screen and (max-width: 480px) {
                    width: 100%;
                }
                p {
                    font-size: var(--fsize_l);
                    line-height: 2;
                    margin-bottom: 1em;
                    color: var(--color-deep-blue);
                    font-weight: 700;
                    text-align: left;
                    @media screen and (max-width: 480px) {
                        word-break: keep-all;
                        width: 50%;
                    }
                }
                ul.list-bluehead {
                    font-size: 1.8rem;
                    gap: 0.5em 2%;
                    @media screen and (max-width: 480px) {
                        font-size: var(--fsize_s);
                    }
                }
            }
            .img-wrap {
                position: absolute;
                right: 0;
                top: 0;
                width: 25%;
                @media screen and (max-width: 480px) {
                    top: -2rem;
                    width: 30%;
                }
            }
        }
    }
}