@charset "UTF-8";

.header {
    .logo {
        visibility: hidden;
    }
}

#fv {
    @media screen and (max-width: 767px) {
        aspect-ratio: 1.5;
        overflow: hidden;
    }

    .fv-img {
        @media screen and (max-width: 767px) {
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    .page-title {
        visibility: hidden;
    }
}

.content {
    background-color: #cde858;
    padding: 2rem 0 16rem;
    position: relative;

    @media screen and (max-width: 767px) {
        padding: 1rem 0 8rem;
    }

    .copyright2 {
        position: absolute;
        top: -3.4rem;
        right: 16rem;
        font-family: 'Roboto';
        font-weight: 600;
        font-size: 1.2rem;

        @media screen and (max-width: 767px) {
            position: relative;
            top: initial;
            right: initial;
            font-size: 0.8rem;
            text-align: center;
        }
    }

    .notation {
        /* display: none; */
        font-size: 2.5rem;
        font-weight: 700;
        text-align: center;

        @media screen and (max-width: 767px) {
            margin-top: 1rem;
            font-size: 1.6rem;
        }
    }

    .board {
        margin-top: 4.1rem;
        background-color: #fff;
        border-radius: 12.5rem;
        padding: 7.7rem 10rem;
        position: relative;

        @media screen and (max-width: 767px) {
            margin-top: 2rem;
            border-radius: 4rem;
            padding: 3rem 2rem 4rem;

        }

        .caution {
            text-align: center;
        }

        .img-title {
            width: 88.4rem;
            margin: 1.8rem auto 0;

            @media screen and (max-width: 767px) {
                width: 90%;
                margin: 1rem auto 0;
            }
        }

        .appeal {
            margin-top: 4.6rem;
            padding-bottom: 3rem;
            font-size: 2.2rem;
            line-height: 1.95;
            text-align: center;

            @media screen and (max-width: 767px) {
                margin-top: 2.5rem;
                padding-bottom: 1rem;
                font-size: 1.3rem;
                white-space: nowrap;
            }
        }

        .flower1 {
            position: absolute;
            left: 15rem;
            bottom: 9rem;
            width: 12.2rem;

            @media screen and (max-width: 767px) {
                left: 1rem;
                bottom: 1rem;
                width: 5rem;
            }
        }

        .flower2 {
            position: absolute;
            right: 15rem;
            bottom: 9rem;
            width: 11.6rem;

            @media screen and (max-width: 767px) {
                right: 1rem;
                bottom: 1rem;
                width: 5rem;
            }
        }

        .title {
            font-weight: 700;
            font-size: 3.4rem;
            text-align: center;
            letter-spacing: 0.05em;

            @media screen and (max-width: 767px) {
                font-size: 2rem;
            }
        }

        .module {
            margin-top: 5.6rem;
            display: grid;
            grid-template-columns: 683fr 337fr;
            gap: 6.6rem;

            @media screen and (max-width: 767px) {
                margin-top: 3rem;
                grid-template-columns: 1fr;
                gap: 3rem;
            }

            .left-img {
                width: 100%;
                aspect-ratio: 683 / 342;
                position: relative;

                .area {
                    position: absolute;

                    .link {
                        width: 50%;
                        height: 50%;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        z-index: 1;
                    }

                    .link:hover+.map {
                        opacity: 0.7;
                    }

                    .map {
                        transition: opacity ease 0.3s;
                    }
                }

                .area5 {
                    width: 42.55%;
                    /* 29.062 / 68.3 ≈ 42.55% */
                    left: 0;
                    top: 0;
                }

                .area4 {
                    width: 37.37%;
                    /* 25.523 / 68.3 ≈ 37.37% */
                    left: 22.24%;
                    /* 15.186 / 68.3 ≈ 22.24% */
                    top: 45.19%;
                    /* 15.454 / 34.2 ≈ 45.19% */
                }

                .area3 {
                    width: 28.20%;
                    /* 19.262 / 68.3 ≈ 28.20% */
                    left: 38.40%;
                    /* 26.229 / 68.3 ≈ 38.40% */
                    top: 23.09%;
                    /* 7.896 / 34.2 ≈ 23.09% */
                }

                .area2 {
                    width: 25.11%;
                    /* 17.151 / 68.3 ≈ 25.11% */
                    left: 63.51%;
                    /* 43.375 / 68.3 ≈ 63.51% */
                    top: 24.62%;
                    /* 8.42 / 34.2 ≈ 24.62% */
                }

                .area1 {
                    width: 18.71%;
                    /* 12.782 / 68.3 ≈ 18.71% */
                    left: 81.19%;
                    /* 55.457 / 68.3 ≈ 81.19% */
                    top: 20.28%;
                    /* 6.937 / 34.2 ≈ 20.28% */
                }
            }

            .right-txt {
                width: 100%;

                .buttons {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 1.7rem;

                    @media screen and (max-width: 767px) {
                        gap: 1.2rem;
                        padding: 0 3rem;
                    }

                    .button {
                        .btn {}
                    }
                }

                .search-by {
                    margin-top: 4.6rem;
                    display: flex;
                    align-items: center;
                    gap: 0.9rem;

                    @media screen and (max-width: 767px) {
                        width: fit-content;
                        margin: 2rem auto 0;
                        gap: 0.5rem;
                    }

                    .text {
                        font-size: 1.8rem;
                        text-decoration: underline;

                        @media screen and (max-width: 767px) {
                            font-size: 1.4rem;
                        }
                    }

                    .icon {
                        width: 2.2rem;

                        @media screen and (max-width: 767px) {
                            width: 1.6rem;
                        }
                    }
                }
            }
        }

        .orange-btn {
            box-shadow: 0px 0.4rem 0.3rem rgba(0, 0, 0, 0.12);
            display: block;
            margin: 5rem auto 0;
            width: 34rem;
            height: 6.8rem;
            border-radius: 3.4rem;
            background-color: #f68224;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;

            @media screen and (max-width: 767px) {
                margin: 3rem auto 1rem;
                width: 20rem;
                height: 4rem;
                border-radius: 2rem;
                font-size: 1.5rem;
            }
        }

        .flows {
            margin-top: 8rem;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4rem;
            justify-items: center;

            @media screen and (max-width: 767px) {
                margin-top: 4rem;
                grid-template-columns: 1fr;
            }

            .flow {
                display: flex;
                flex-direction: column;
                align-items: center;

                .image-box {
                    position: relative;
                    width: 14.2rem;

                    @media screen and (max-width: 767px) {
                        width: 8rem;
                    }

                    .number {
                        position: absolute;
                        left: -2rem;
                        top: -1.5rem;
                        font-family: 'Poppins';
                        font-weight: 600;
                        font-size: 3.6rem;
                        letter-spacing: -0.01em;
                        color: #18B5D8;

                        @media screen and (max-width: 767px) {
                            left: -1rem;
                            top: -1rem;
                            font-size: 2.4rem;
                        }
                    }

                    .figure {}
                }

                .thick {
                    margin-top: 2.4rem;
                    font-weight: 700;
                    font-size: 2.2rem;
                    line-height: 1.36;
                    letter-spacing: 0.07em;
                    text-align: center;
                    height: 6rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    @media screen and (max-width: 767px) {
                        margin-top: 1rem;
                        font-size: 1.6rem;
                        height: auto;
                    }
                }

                .thin {
                    margin-top: 1.8rem;
                    font-size: 1.8rem;
                    line-height: 1.56;
                    text-align: center;

                    @media screen and (max-width: 767px) {
                        margin-top: 1rem;
                        font-size: 1.3rem;
                    }
                }
            }
        }
    }
}