@media (max-width: 768px) {
    main {
        .hero-title {
            font-size: 55px;
        }

        .hero-subtitle {
            font-size: 25px;
            width: 90%;
        }

        .hero-description {
            font-size: 13px;
            font-weight: bold;
        }

        .hero-bottom-text {
            font-size: 55px;
            margin-top: 4rem;
        }

        .service-title {
            width: 100%;
            margin: 0 auto;
        }

        .message-content-area {
            flex-direction: column;
        }

        .hero-section {
            max-height: 100vh;
        }

        .hero-content {
            text-align: center;
        }

        .hero-title {
            margin-bottom: 4rem;
        }

        .hero-description {
            width: 90%;
        }

        & .background-color-2 {
            & .message-content-area {
                text-align: center;

                .message-content {
                    margin: 0 auto;
                    text-align: center;
                    width: 100%;

                    .message-content-title {
                        h2 {
                            font-size: 45px;
                        }

                        .message-content-sub-title {
                            font-size: 20px;
                            margin-top: 25px;
                        }
                    }

                    .message-content-text-area {
                        text-align: center;

                        .message-content-text {
                            margin: 20px auto 0;
                            width: 100%;
                            font-size: 13px;
                        }
                    }

                }

                .message-content-img {
                    margin-top: 30px;

                    .top-img {
                        flex-direction: column;
                        gap: 0;

                        .sp {
                            display: none;
                        }

                        .img-1 {
                            img {
                                height: 300px;
                            }

                        }

                        .img-2 {
                            img {
                                height: 300px;
                                margin-top: 40px;
                            }
                        }
                    }

                    .img-3 {
                        img {
                            height: 300px;
                        }
                    }
                }
            }
        }

        & .background-color-white {
            & .service-area {
                & .service-content-area {
                    .service-title {
                        font-size: 45px;
                        font-weight: 900;
                        width: 90%;
                        text-align: center;

                        .service-content-sub-title {
                            font-size: 20px;
                        }
                    }

                    .service-content {
                        width: 90%;
                        margin: 100px auto 0;

                        ul {
                            li {
                                width: 100%;

                                .service-content-title {
                                    font-size: 20px;
                                }

                                .top-img-up {
                                    margin-top: 0;
                                }
                            }
                        }
                    }
                }
            }

            & .question-area {
                padding-top: 130px;

                & .question-content-area {
                    & .question-content-title {
                        h4 {
                            font-size: 20px;

                        }
                    }

                    .question-content-box-area {
                        margin-top: 75px;

                        ul {
                            li {
                                width: 100%;
                            }
                        }
                    }

                    .question-text-flex-area {
                        flex-direction: column;

                        .question-text-flex-img {
                            width: 100%;

                            img {
                                width: 100%;
                            }
                        }

                        .question-text-flex {
                            width: 100%;
                            margin-top: 30px;

                            .question-text-flex-title {
                                font-size: 1.1rem;
                            }

                        }
                    }
                }
            }
        }
    }



    .contact-area {
        & .contact-content-area {
            .contact-content-title {
                width: 95%;
                margin: 0 auto;
            }

            & .contact-content {
                .contact-content-img {
                    display: none;
                }
            }
        }
    }

    footer {
        & .footer-area {
            & .footer-content-area {
                & .footer-company {
                    .company-name {
                        font-size: 30px;
                        font-weight: 900;
                        padding-top: 30px;
                        text-align: center;
                    }

                    .company-address {
                        margin-top: 25px;
                        text-align: center;
                    }
                }

                .footer-nav {
                    margin-top: 30px;
                }
            }
        }
    }
}