body {    
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%; 
}

.main{    
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background-color: rgba(254, 255, 233, 1);
}

.background{   
    /* width: 1920.00px;
    height: 304.00px; */
    position: absolute;
    width: 100%;
    height: 28.14%;   
    left: 0.00px;   
    top: 71.85%;
    background-image: url("../image/input_name-background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.word {
    position: absolute;
    box-sizing: content-box;
    /* width: 392.00px;
    height: 37.00px; */
    /* left: 764.00px;
    top: 319.50px; */

/*     
    width: min(21vw, 37vh);
    height: min(2vw, 3.5vh); */


    /* width: min(22vw, 39vh);
    height: min(2vw, 3.5vh); */

    width: fit-content;
    height: auto;


    left: 50%;
    top: 31.25%;
    transform:translate(-50%,-50%); 



    color: rgba(106, 85, 76, 1);
    /* font-size: 28.00px; */
    font-size: min(calc(min(57vw, 50vh) * 0.07),28px);
    font-weight: 700;
    font-style: normal;
    font-family: 'Noto Sans', Arial;
    text-decoration: none;
    text-align: center;
}
@media (max-width: 700px),(max-height: 500px)
{
    .word{
        width: 392.00px;
        height: 37.00px;
        top: 25%;
        font-size: 18.00px;       
    }
    
}

.input_group {
    position: absolute;    
    /* width: 533.00px;
    height: 80.00px; */
    /* left: 694.00px;
    top: 433.00px;*/

    display: flex;
    align-items: center;
    /* width: min(27.7vw, 49.3vh);
    height: min(4.15vw, 7.4vh); */

    left: 50%;
    top: 43.79%;
    transform:translate(-50%,-50%); 
}

@media (max-width: 700px),(max-height: 500px)
{
    .input_group{
        width: 200px;
        height: 40px;        
    }    
}



.next_btn {
    position: absolute;
   

    width: 164.00px;
    height: 80.00px;   


    width: min(8.54vw, 15.17vh);
    height: min(4.16vw, 7.4vh);

    left: calc(min(27.7vw, 49.3vh) - min(8.54vw, 15.17vh));
    /* left: 369px; */
    /* top: 0.00px; */

    background-color: rgba(0, 175, 169, 1);

    border-radius: 65.00px;
    
    color: rgba(255, 255, 255, 1);
    /* font-size: 27.00px; */

    font-size: calc(min(8.54vw, 15.17vh) * 0.20);
    font-weight: 700;
    font-style: normal;
    font-family: 'Noto Sans', Arial;
    /* text-align: center; */

    display: flex;
    justify-content: center;  
    align-items: center;

    cursor: pointer;
}

@media (max-width: 700px),(max-width: 540px)
{
    .next_btn{
        width: 60.00px;
        height: 30.00px;             
        font-size: 16.00px;
        left: 134px;
    }
}


input {    
    /* position: absolute;  */
    /* width: 430px;
    height: 80px;   */
    width: min(22.4vw, 39.8vh);
    height: min(4.16vw, 7.4vh);

    /* left: calc((min(27.7vw, 49.3vh) - min(22vw, 40vh))/2);
    top: calc((min(4.15vw, 7.4vh) - min(5vw, 7.4vh))/2); */
    /* transform:translate(50%,50%);  */

    /* left: 369px; */
    /* padding-left: 40px;     */
    padding-left: calc( min(22.4vw, 39.8vh) * 0.09);
    font-size: calc(min(22.4vw, 39.8vh) * 0.05);
    outline: none;
    border-style:none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='467' height='80' viewBox='0 0 467 80' fill='rgba(232,232,232,1)'%3E%3Cpath d='M 40 0 L 427 0 C 449.0914001464844 0 467 17.90860939025879 467 40 C 467 62.09139251708984 449.0914001464844 80 427 80 L 40 80 C 17.90860939025879 80 0 62.09139251708984 0 40 C 0 17.90860939025879 17.90860939025879 0 40 0 Z'%3E%3C/path%3E%3C/svg%3E") center /  contain no-repeat;
}
@media(max-width: 700px),(max-width: 500px)
{
    input{
        width:175.00px;
        height: 30.00px;                   
        font-size:16px;
        /* padding-left: 20px;     */
    }
}


input, select, textarea{
    outline: none;
    color: rgba(0, 175, 169, 1);
}