.title{
    display: block;
    width: calc(100vw*739/1920);
    margin: 0 auto;
}

.form-main{
    position: relative;
    width: calc(100vw*680/1920);
    margin: 0 auto;
}

form {
    padding: calc(100vw*20/1920) 0 calc(100vw*40/1920) 0;
}
.field {
    background: linear-gradient(
        to right, 
        #e2c79c 0%,   /* 左深色 */
        #e2c79c 33%,  /* 分割點 */
        #efdec2 33%,  /* 右淺色 */
        #efdec2 100%
    );
    color: #9e664b;
    padding: calc(100vw*20/1920);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(100vw * 20 / 1920);
    font-size: calc(100vw*32/1920);
    margin-top: calc(100vw*20/1920);
}
.field.sp select{
    width: calc(100vw*420/1920);
}

.field>label {
    min-width: calc(100vw*200/1920);
    font-weight: bold;
    letter-spacing: 1px;
    color: #340909;
    display: flex;
    align-items: center;
    justify-content: center;
}
.required {
    color: #b40101;
}
.field input[type="text"],
.field input[type="email"],
.field select,
.field>span{
    padding: 6px;
    border-radius: 5px;
    border: none;
    /* width: 180px; */
    width: calc(100vw*400/1920);
    font-weight: bold;
    font-size: 1em;
    outline: none;
    background: #efdec2;
    color: #340909;

    -webkit-appearance: none;
    appearance: none;
}
.field>span{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.field#otherChannelInput{
    margin-top: calc(100vw*20/1920);
}
.field input::placeholder{
    color: #885853;
}

.custom-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-right: 18px;
  font-weight: normal;
  user-select: none;
  justify-content: flex-start !important;
}
.custom-radio input[type="radio"] {
  display: none; /* 隱藏原生radio */
}
.custom-radio .box {
  width: calc(100vw*27/1920);
  aspect-ratio: 1;
  /* height: calc(100vw*27/1920); */
  border-radius: 5px;
  border: 1px solid #340909;
  margin-right: 7px;
  background: transparent;
  position: relative;
  transition: border-color .15s;
}
.custom-radio input[type="radio"]:checked + .box {
  border-color: #340909;
  /* width: calc(100vw*27/1920); */
  /* height: calc(100vw*27/1920); */
  background-image: url(../img/radio.png);
  background-size: cover;
}

.reminder {
    color: #fbe2c4;
    font-size: calc(100vw*20/1920);
    /* min-height: 24px; */
    padding-left: calc(100vw*50/1920);
    line-height: calc(100vw * 24 / 1920);
}

.reminder.r{
    display: block;
    color: #ff9695;
}

.checkbox-area {
    background: none;
    margin: 0;
    display: flex;
    align-items: center;
    font-size: calc(100vw * 20 / 1920);
    line-height: calc(100vw * 24 / 1920);
    color: #efdec2;
    margin: calc(100vw * 20 / 1920) 0;
}
.checkbox-area input[type="checkbox"] {
  display: none; /* 隱藏原生checkbox */
}

.checkbox-area .box {
  width: calc(100vw*27/1920);
  aspect-ratio: 1;
  /* height: calc(100vw*27/1920); */
  border-radius: 25%;
  /* border: calc(100vw*1/1920) solid #efdec2; */
  background-color: #efdec2;
  margin-right: calc(100vw*23/1920);
  position: relative;
}
.checkbox-area input[type="checkbox"]:checked + .box {
  background-image: url(../img/checked.png);
  background-size: cover;
}

.submit-btn {
    margin: calc(100vw*20/1920) auto 0;
    position: relative;
    display: flex;
    width: calc(100vw*560/1920);
    aspect-ratio: 560/109;
    border: none;
    background-color: transparent;
    background-image: url(../img/btn.png);
    background-size: cover;
    text-decoration: none;
    color: #623431;
    font-family: 'GenSenRounded2TW-M';
    font-size: calc(100vw*50/1920);
    font-weight: bold;
    align-items: center;
    justify-content: center;
    gap: calc(100vw*15/1920);
}
.submit-btn:hover{
    filter: brightness(1.1);
}

.submit-btn::after{
    content: "";
    background-image: url(../img/btn_arrow.png);
    background-size: 100%;
    width: calc(100vw*48/1920);
    aspect-ratio: 1;
    transition: all ease .3s;
}

.submit-btn:hover::after{
    transform: translateX(5px);
}

.footer{
    display: block;
    width: calc(100vw*360/1920);
    margin: calc(100vw*50/1920) auto;
}

#js-submit-loading{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    z-index: 1001;

    font-size: calc(100vw*60/1920); 
    color:white; 
    font-weight:bold;
}


#alert-popup{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    z-index: 1001;

    font-size: calc(100vw*32/1920); 
    color:#331a1a; 
    font-weight:bold;
}
.alert-main{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: calc(100vw * 600/1920);
    aspect-ratio: 600/288;
    background-color: #c9aca5;
    border-radius: 20px;
    padding: calc(100vw * 20/1920);
    box-sizing: border-box;
}

.alert-deco{
    position: absolute;
    width: calc(100vw * 629/1920);
    pointer-events: none;
}

.alert-close{
    position: absolute;
    top: calc(100vw * 30/1920);
    right: calc(100vw * 30/1920);
    display: block;
    width: calc(100vw * 25/1920);
}


/* mobile */
@media screen and (max-width: 767px) {
    .container{
        padding-top: calc(100vw*40/640);
    }
    .title{
        width: calc(100vw*638/640);
    }

    .form-main{
        width: calc(100vw*600/640);
    }

    form {
        padding: calc(100vw*20/640) 0 calc(100vw*40/640) 0;
    }
    .field {
        padding: calc(100vw*20/640);
        padding-left: 0;
        gap: calc(100vw * 20 / 640);
        font-size: calc(100vw*32/640);
        margin-top: calc(100vw*20/640);
    }
    .field.sp select{
        width: calc(100vw*420/640);
    }

    .field>label {
        min-width: calc(100vw*200/640);
    }
    .required {
        color: #b40101;
    }
    .field input[type="text"],
    .field input[type="email"],
    .field select,
    .field>span{
        width: calc(100vw*340/640);
        font-weight: bold;
        font-size: 1em;
        outline: none;
        background: #efdec2;
        color: #340909;

        -webkit-appearance: none;
        appearance: none;
    }
    .field>span{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .field#otherChannelInput{
        margin-top: calc(100vw*20/640);
    }
    .field input::placeholder{
        color: #885853;
    }

    .custom-radio {
        margin-right: calc(100vw*30/640);
    }
    .custom-radio input[type="radio"] {
        display: none; /* 隱藏原生radio */
    }
    .custom-radio .box {
        width: calc(100vw*25/640);
        /* height: calc(100vw*25/640); */
        border-radius: 5px;
        margin-right: 7px;
    }
    .custom-radio input[type="radio"]:checked + .box {
        width: calc(100vw*25/640);
        /* height: calc(100vw*25/640); */
        background-image: url(../img/radio.png);
    }

    .reminder {
        font-size: calc(100vw*20/640);
        padding-left: calc(100vw*50/640);
        line-height: calc(100vw * 24 / 640);
    }


    .checkbox-area {
        font-size: calc(100vw * 20 / 640);
        line-height: calc(100vw * 24 / 640);
        color: #efdec2;
        margin: calc(100vw * 20 / 640) 0;
    }


    .checkbox-area .box {
    width: calc(100vw*25/640);
    /* height: calc(100vw*25/640); */
    border-radius: 25%;
    margin-right: calc(100vw*25/640);
    }

    .submit-btn {
        margin: calc(100vw*20/640) auto 0;
        width: calc(100vw*524/640);
        aspect-ratio: 524/100;
        background-image: url(../img/m/btn.png);
        font-size: calc(100vw*50/640);
        gap: calc(100vw*15/640);
    }

    .submit-btn::after{
        background-image: url(../img/m/btn_arrow.png);
        width: calc(100vw*44/640);
    }

    .footer{
        width: calc(100vw*360/640);
        margin: calc(100vw*50/640) auto;
    }

    #js-submit-loading{
        font-size: calc(100vw*60/640); 
    }


    #alert-popup{
        font-size: calc(100vw*40/640); 
    }
    .alert-main{
        width: calc(100vw * 600/640);
        aspect-ratio: 600/360;
        border-radius: 20px;
        padding: calc(100vw * 20/640);
    }

    .alert-deco{
        width: calc(100vw * 629/640);
    }

    .alert-close{
        top: calc(100vw * 30/640);
        right: calc(100vw * 30/640);
        width: calc(100vw * 35/640);
    }
}