* {
    box-sizing: border-box;
}


html {
    font-family: "Noto Sans JP", sans-serif;
}
html:lang(en) {
    font-family: "Noto Sans", sans-serif;
}
html:lang(ko) {
    font-family: "Noto Sans KR", sans-serif;
}
html:lang(zh-CN) {
    font-family: "Noto Sans SC", sans-serif;
}


/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/

a,
a:active,
a:hover {
    text-decoration: none;
}


/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/

body {
    margin: 0px;
}



/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
.container {
    width: 100%;
    min-width: 390px;
    max-width: 700px;
    margin: 0px auto;

    min-height: 100vh;

    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;

    container-type: inline-size;
}



/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/


    .head {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
        .head-logo {
            padding: 10px;
            flex: 1 0 auto;
        }
            .head-logo img {
                width: 96px;
            }
            @media (min-width: 690px) {
                .head-logo img {
                    width: 176px;
                }
            }
        .head-login {
            padding-right: 10px;

            text-align: right;
        }
            .head-login span {
                padding: 5px 20px;
                border-radius: 10px;

                background-color: #589113;
                color: #fff;
            }


    .barfind {
        position: relative;
        width: 100%;

        display: flex;
        flex-direction: row;
        justify-content: center;
    }
        .barfind img {
            width: 100%;
        }


        .link-wrapper {
            position: absolute;
            top: 73%;

            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

            .link-first-row {
                display: flex;
                flex-direction: row;

                justify-content: center;
                font-size: 0.75rem;
                font-weight: 600;
                gap: 20px;

                width: 100%;
                padding: 0px 40px;
            }

                .link-first-item-wrapper {
                    flex: 1 0 140px;
                }
                    .link-first-item-wrapper a {
                        display: block;
                        align-content: center;
                        height: 100%;
                        padding: 2px 20px;
                        
                        font-size: clamp(
                            0.75rem,
                            calc(12px + (100cqi - 390px) * (9 / 300)),
                            1.4375rem
                        );

                        border-radius: 999px;
                        border: 2px solid #000;
                        background: #FFF;
                        box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.25), 0 0 5.9px 2px #87F060 inset;

                        color: #579241;
                        text-align: center;
                        text-wrap: nowrap;
                    }

            .link-second-row {
                display: flex;
                flex-direction: row;
                width: 100%;
                justify-content: center;
            }   
                .link-second-row a {
                    font-size: clamp(
                        0.75rem,
                        calc(12px + (100cqi - 390px) * (9 / 300)),
                        1.4375rem
                    );
                    font-weight: 600;
                    padding: 5px 40px;
                    height: 100%;

                    display: block;

                    align-content: center;

                    border-radius: 999px;
                    border: 2px solid #000;
                    background: #F2E211;
                    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.25), 0 0 5.9px 3px #E49516 inset;

                    color: #432408;
                }


    .image-container {
        position: relative;
    }
        .image-container img {
            display: block;
            width: 100%;
        }



        .signup-button-wrapper {
            position: absolute;
            top: 42%;

            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;

            width: 100%;
        }
            .signup-button-row {
                width: 60%;
                text-align: center;
            }
                .signup-button-row a {
                    display: block;
                    width: 100%;

                    border-radius: 499.5px;
                    border: 1px solid #432408;
                    background: #F2E211;
                    box-shadow: 1.5px 1.5px 2.5px 0 rgba(0, 0, 0, 0.25), 0 0 2.95px 1.5px #E49516 inset;

                    color: #432408;
                    font-size: clamp(
                        0.75rem,
                        calc(12px + (100cqi - 390px) * (9 / 300)),
                        1.4375rem
                    );

                    font-weight: bold;
                    padding: 7px 32px;
                }


        .signup-button-wrapper-type-2 {
            position: absolute;
            top: 87%;

            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;

            width: 100%;
        }
            .signup-button-row-type-2 a {
                display: block;
                width: 100%;

                border-radius: 499.5px;
                border: 1px solid #432408;
                background: #F2E211;
                box-shadow: 1.5px 1.5px 2.5px 0 rgba(0, 0, 0, 0.25), 0 0 2.95px 1.5px #E49516 inset;

                color: #432408;
                font-size: clamp(
                    0.75rem,
                    calc(12px + (100cqi - 390px) * (9 / 300)),
                    1.4375rem
                );
                font-weight: bold;
                padding: 7px 32px;
            }


/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
    .footer {
        background-color: #589113;
        color: #fff;

        display: flex;
        flex-direction: column;
    }
        .foot-logo {
            margin: 0 auto;
            width: 19%;
        }
            .foot-logo img {
                width: 100%;
            }



        .foot-link-wrapper-1 {
            display: flex;
            flex-direction: row;
            justify-content: center;
            padding-top: 10px;
        }
            .foot-link-wrapper-1 a {
                color: #fff;
                font-size: 0.75rem;

                flex: 1 0 80px;
                max-width: 120px;
                text-align: center;
            }
        
        .foot-link-wrapper-2 {
            display: flex;
            flex-direction: row;
            justify-content: center;

            padding-top: 20px;
        }
            .foot-link-wrapper-2 a {
                color: #fff;
                font-size: 0.75rem;

                flex: 1 0 110px;
                max-width: 140px;
                text-align: center;
            }

        .foot-description {
            padding: 20px 20px 0px;

            color: #fff;
            font-size: 0.7rem;

            text-align: center;
        }

        .foot-copyright {
            padding: 20px 20px 0px;

            color: #fff;
            font-size: 0.5rem;

            text-align: center;
        }

        .foot-spacing {
            height: 40px;
        }