.main {
    padding-top: 42px;
    padding-bottom: 30px;
}

.take-action {
    margin-top: 18px;
}

.booking {
    margin: 20px auto 0 auto;
    width: 288px;
    height: 279px;
    position: relative;
    overflow: hidden;
    background-image: url("../base_1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media screen and (max-width: 770px) {
    .booking {
        width: 76.8vw;
        height: 74.4vw;
    }
}

.booking > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking .booking-text {
    position: absolute;
    top: 10px;
    right: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    gap: 20px;
    grid-gap: 20px;
    font-family: "Kaisei Opti", serif;
}

.booking .booking-text .booking-text-item {
    font-size: 24px;
    line-height: 26px;
    width: 24px;
    font-weight: 700;
}

@media screen and (max-width: 770px) {
    .booking .booking-text .booking-text-item {
        font-size: clamp(1.5rem, -0.3987rem + 8.1013vw, 3.5rem);
        line-height: 1.11;
        width: clamp(1.5rem, -0.3987rem + 8.1013vw, 3.5rem);
    }
}

.booking.booking-hidden {
    --expected-height: 400px;
    --ratio: 1.029;
    width: calc(var(--expected-height) * var(--ratio));
    height: var(--expected-height);
    position: absolute;
    z-index: -100;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-size: contain;
    margin: auto;
}

.booking.booking-hidden .booking-text {
    top: 18px;
    right: 26px;
}

.booking.booking-hidden .booking-text-item {
    font-size: 36px;
    width: 36px;
    line-height: 1.1;
}

.form {
    padding-left: 36px;
    padding-right: 36px;
    margin-bottom: 54px;
}

.remind {
    margin-top: 32px;
    margin-bottom: 32px;
}

.input-group {
    display: grid;
    flex-direction: column;
    gap: 18px;
    grid-gap: 18px;
    align-items: center;
    justify-content: center;
}

.input {
    width: 298px;
    height: 52px;
    font-size: 24px;
    padding: 4px 12px;
    border: none;
}

@media screen and (max-width: 770px) {
    .input {
        width: 79.5vw;
        height: 13.8666667vw;
        font-size: clamp(1.5rem, 0.432rem + 4.557vw, 2.625rem);
    }
}

.character-list {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    margin-bottom: 25px;
}

.character-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}

.character-item > input {
    appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 12px;
}

.character-item > input:checked::after {
    background-color: #000;
    box-shadow: inset 0 0 0 4px #fff;
}

.character-item > input::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    background-color: #fff;
}

@media screen and (max-width: 770px) {
    .character-item > input {
        width: clamp(1.125rem, 0.057rem + 4.557vw, 2.25rem);
        height: clamp(1.125rem, 0.057rem + 4.557vw, 2.25rem);
        margin-right: clamp(0.75rem, -0.6741rem + 6.0759vw, 2.25rem);
    }

    .character-item > input:checked::after {
        box-shadow: inset 0 0 0 clamp(0.25rem, 0.1313rem + 0.5063vw, 0.375rem)
            #fff;
    }
}

.character-item > label {
    cursor: pointer;
    max-width: 100px;
}

@media screen and (max-width: 770px) {
    .character-item > label {
        max-width: 26.66vw;
    }
}

.character-text {
    margin-top: 20px;
}
#btn-submit {
    background: transparent;
    border: none;
    outline: none;
    margin: auto;
    display: block;
}

.top-btn {
    margin-bottom: 34px;
}

.text-rotate {
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.safari .safari-text-rotate {
    transform: rotate(90deg);
}

.ios-14 .booking.booking-hidden .booking-text {
    top: -2px;
    right: 18px;
}

.ios-14 .booking-hidden .safari-text-rotate {
    transform: rotate(90deg) translate(32px, -16px);
}