#overlay .overlayTransparency{
    width: 100%;
    height: 100%;
}


#loading {
    width: 100%;
    height: 100%;
    z-index: 13333;
    position: relative;
}

#loading .loadingContent {
    width: 30vw;
    height: 30vh;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#loading .loadingContent > div {
    width: 100%;
    height: 50%;
    text-align: center;
}

#loading .loadingImg {
    width: 10vh;
    height: 10vh;
    /* iPadキャッシュ対策調査 Lingyunsi 崔 20190903 start
        background-image: url('/_img/app/loader_white.svg');*/
    background-size: 100% 100%;
    left: 0;
    right: 0;
    margin: auto;
    margin-bottom: 5vh;
}

#loading .loadingMsg {
    width: 100%;
    height: 50%;
    font-size: 4vw;
    color: #fff;
    text-align: center;
}

#notation {
    z-index: 9000;
    overflow-y: auto;
}

#notationContent {
    width: 80vw;
    height: fit-content;
    background: #fff;
    border-radius: 2vw;
    box-shadow: 0.5vw 0.5vw 0.5vw rgba(000, 000, 000, 0.3);
    border: solid 1px rgba(0, 0, 0, 0);
    margin: 4vw auto;
}

.notationContentClass {
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 4vw;
}

#notationContent > div {
    margin: 2vw 0;
    height: fit-content;
    border: 1px solid rgba(0, 0, 0, 0);
}

#notationMsg {
    width: auto;
    line-height: 1.5;
    margin-left: 4vw;
    margin-right: 4vw;
    margin-top: 1vw;
    margin-bottom: 1vw;
    font-size: 4vw;
    height: fit-content;
}

#notationMsg hr {
    height: 2px;
    border: none;
    border-top: 2px solid;
    border-color: #a11e2c;
    margin: 0;
    margin-bottom: 4vw;
}

#notation .notation-title {
    font-size: 3.5vw;
    font-weight: bold;
    text-align: center;
}

#notationCloseButtonImage {
    width: 6vw;
    height: 6vw;
}

#notationCloseButton {
    width: fit-content;
    left: 2vw;
    position: absolute;
}

#notationHeader {
    width: 100%;
    position: relative;
    height: 6vw;
}

.notation-msgTitle {
    font-weight: bold;
    border-radius: 2vw;
    background-color: #efefef;
    font-size: 3vw;
    padding: 1.5vw;
}

.notation-msg {
    font-size: 3vw;
    padding: 1vw 0vw 3vw 2vw;
}

@media screen and (orientation: landscape) {
    #notationContent {
        width: 60vw;
        border-radius: 1vw;
        height: fit-content;
        margin: 2vw auto;
    }

    #notationContent > div {
        margin: 2vw 0;
        background: #fff;
    }

    #notationMsg {
        margin-top: 0.5vw;
        margin-bottom: 0.5vw;
        font-size: 3vw;
    }

    #notationMsg hr {
        margin: 0 0 2vw 0;
    }

    #notationCloseButton {
        top: -1vw;
        left: 3vw;
    }

    #notationCloseButtonImage {
        width: 4vw;
        height: 4vw;
    }

    #notationHeader {
        margin-bottom: 1vw;
        height: 4vw;
    }

    #notation .notation-title {
        font-size: 3vw;
    }

    .notation-msgTitle {
        border-radius: 1vw;
        font-size: 2.5vw;
        padding: 1vw;
    }

    .notation-msg {
        font-size: 2.5vw;
        padding: 1vw 0vw 2vw 2vw;
    }
}

#notice {
    z-index: 9000;
    overflow-y: auto;
    /* padding: 2vh 0; */
}

#noticeContent {
    width: 80vw;
    height: fit-content;
    /* padding-top: 2vw;
    padding-bottom: 2vw; */
    position: unset;
    background: #fff;
    border-radius: 2vw;
    box-shadow: 0.5vw 0.5vw 0.5vw rgba(000, 000, 000, 0.3);
    border: solid 1px rgba(0, 0, 0, 0);
    margin: auto;
}

#noticeContent > div {
    margin: 4vw 0;
    height: fit-content;
    border: 1px solid rgba(0, 0, 0, 0);
}

#noticeMsg {
    width: auto;
    line-height: 1.5;
    margin-left: 4vw;
    margin-right: 4vw;
    margin-top: 1vw;
    margin-bottom: 1vw;
    font-size: 4vw;
    height: fit-content;
    /* min-height: 20vw; */
    /* position: relative; */
}

#noticeContent.showYes #noticeYes,
#noticeMsg.withoutButton {
    min-height: 0;
    font-size: 4.5vw;
    margin: 2vw auto 0 auto;
    text-align: center;
}

#noticeMsg.withoutButton.left {
    margin: 2vw 4vw;
    text-align: left;
}

/* #noticeMsg div {
    position: absolute;
    margin: auto 0;
    height: fit-content;
    top: 0;
    bottom: 0;
} */

#noticeClose,
#noticeYes,
#noticeNo {
    width: 47.5%;
    height: 12vw;
    font-size: 4vw;
    border-radius: 1vw;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
    margin: auto;
}

#noticeNo {
    background-color: #a11e2c;
    color: white;
}

#noticeYes {
    background-color: #5e5e5e;
    color: white;
}

#noticeYes:disabled {
    box-shadow: none;
    background-color: #cccccc !important;
}

#noticeButtonList {
    display: flex;
    justify-content: space-between;
    margin: 2vw 4vw 0vw 4vw;
    height: fit-content;
    border: 1px solid rgba(0, 0, 0, 0);
}

#noticeContent.alcohol button {
    width: 100% !important;
    background-color: #a11e2c;
    color: white;
}

#noticeContent.notice button {
    width: 100% !important;
    background-color: #a11e2c;
    color: white;
}

#notice p {
    margin: 1vw 0;
}

#notice .alcohol-title {
    text-align: center;
    font-size: 2.5vw;
    font-weight: bold;
}

#noticeMsg hr {
    height: 2px;
    border: none;
    border-top: 2px solid;
    border-color: #a11e2c;
    margin: 0 0 4vw 0;
}

#notice .alcohol-message1 {
    font-size: 4vw;
    font-weight: bold;
    padding: 0 2vw;
}

#notice .alcohol-message2 {
    font-size: 3vw;
    padding: 0 2vw;
}

#notice .alcohol-message1 ol {
    margin: 0;
    padding: 0;
}

#notice .alcohol-message1 ol li {
    list-style: none;
    padding-left: 1.3em;
    text-indent: -1.3em;
}

#noticeContent.confirm #noticeMsg {
    font-size: 4vw;
    padding: 0 2vw;
    margin-bottom: 4vw;
}

#noticeContent.confirm button {
    width: 100% !important;
    background-color: #a11e2c;
    color: white;
}

#noticeQuantityArea {
    display: flex;
    width: fit-content;
    margin: 4vw auto;
}

#noticeDecrementButton,
#noticeIncrementButton {
    width: 8vw;
    height: 8vw;
    font-size: 6vw;
    border: 1px solid gray;
    border-radius: 4px;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#noticeQuantity {
    font-size: 6vw;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 2vw;
    margin-right: 2vw;
}

#noticeTitle {
    font-size: 4vw;
    padding: 0 2vw 0 2vw;
}

#noticeContent.quantity #noticeYes {
    background-color: #a11e2c;
    color: white;
    width: 100% !important;
}

#noticeContent.quantity #noticeYes:disabled {
    background-color: lightgray;
}

#noticeInputTextBox {
    width: 100%;
    font-size: 4vw;
    padding: 2vw;
    margin: 2vw 0 4vw 0;
    background-color: rgb(232, 240, 254);
    border-radius: 1vw;
    border-color: gray;
    border-width: thin;
    border-style: solid;
}

#notice .title {
    text-align: center;
    font-size: 3.5vw;
    font-weight: bold;
}

#notice .message1 {
    font-size: 4vw;
    font-weight: bold;
    padding: 0 2vw;
}

#notice .message2 {
    font-size: 4vw;
    font-weight: bold;
    padding: 0 2vw;
}

/* 221201 gai TOP画面の後の注意喚起画面で「お知らせ」画面のメッセージ対応 */
#noticeMsg .notice-title {
    text-align: center;
    font-size: 2.5vw;
    font-weight: bold;
}

#noticeMsg .notice-message {
    text-align: left;
    font-size: 4vw;
    font-weight: bold;
}

#noticeMsg.fullscreen {
    width: 100%;
    height: 100%;
    border: unset;
    border-radius: unset;
    padding: 2vw;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    margin: 0;
    display: flex;
    flex-flow: column;
}

#noticeMsg.fullscreen .button {
    background-color: #a11e2c;
    width: 80vw;
    height: 30vw;
    margin: 4vw;
    border-radius: 2vw;
    font-size: 5vw;
    color: white;
}

#noticeMsg.fullscreen .title {
    text-align: left;
}

#noticeMsg.fullscreen .spacer {
    flex: 1;
}

@media screen and (orientation: landscape) {
    #noticeContent {
        width: 60vw;
        /* padding-top: 1vw;
        padding-bottom: 1vw; */
        border-radius: 1vw;
    }

    #noticeContent > div {
        margin: 2vw 0;
    }

    #noticeMsg {
        margin-top: 0.5vw;
        margin-bottom: 0.5vw;
        font-size: 3vw;
    }

    #noticeMsg.withoutButton {
        font-size: 3.5vw;
    }

    #noticeMsg hr {
        margin: 0 0 2vw 0;
    }

    #notice .alcohol-message1 {
        font-size: 2vw;
        font-weight: bold;
        padding: 0 1vw;
    }

    #notice .alcohol-message2 {
        font-size: 2vw;
    }

    #noticeClose,
    #noticeYes,
    #noticeNo {
        width: 25vw;
        height: 6vw;
        font-size: 3vw;
        border-radius: 0.5vw;
        box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
    }

    #noticeButtonList {
        margin: 1vw 4vw;
    }
}

#loading {
    width: 100%;
    height: 100%;
    z-index: 9999;
    position: relative;
}

#loading .loadingContent {
    width: 30vw;
    height: 30vh;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#loading .loadingContent > div {
    width: 100%;
    height: 50%;
    text-align: center;
}

#loading .loadingImg {
    width: 10vh;
    height: 10vh;
    /* iPadキャッシュ対策調査 Lingyunsi 崔 20190903 start
        background-image: url('/_img/app/loader_white.svg');*/
    background-size: 100% 100%;
    left: 0;
    right: 0;
    margin: auto;
    margin-bottom: 5vh;
}

#loading .loadingMsg {
    width: 100%;
    height: 50%;
    font-size: 4vw;
    color: #fff;
    text-align: center;
}

html {
    height: 100%;
    width: 100%;
    font-size: 1vw;

    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer */
    -webkit-user-select: none; /* Chrome, Safari, and Opera */
    -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

body {
    color: #5e5e5e;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

/* Chromeの上から下へのSwipeでのReload回避の為 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    html {
        overflow-y: hidden;
    }
}

body,
button {
    height: 100%;
    width: 100%;
    /* font-family: "AozoraMincho-bold", "DroidSans"; */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1;
    padding: 0;
    margin: 0;
    position: relative;
}

/* @font-face {
    font-family: "AozoraMincho-bold";
    src: url("/webapps/___comView/___css/_fonts/AozoraMincho-bold.ttf")
        format("truetype");
}

@font-face {
    font-family: "DroidSans";
    src: url("/webapps/___comView/___css/_fonts/DroidSans.ttf")
        format("truetype");
} */

table,
tbody,
tr,
th,
td {
    border: none;
}

button {
    outline: none;
    border: 0;
    background: none;
}

button:active,
*[data-button]:active,
.button:active {
    transform: scale(0.95);
}

.centerCenter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 4vw;
}

#overtime {
    width: fit-content;
    height: fit-content;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 5vw;
    max-width: 80%;
    border-radius: 2vw;
    padding: 4vw;
    line-height: 1.5;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
    background-color: white;
}

body {
    background-color: lightgray;
}

#landscape {
    position: absolute;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    display: none;
}

.taxMessage {
    font-size: 2vw;
    margin-left: 0.5vw;
}

@media screen and (orientation: landscape) {
    #overtime {
        font-size: 4vw;
        max-width: 60%;
        border-radius: 1vw;
    }

    /* #landscape {
        display: block;
    } */
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8);
}

.overlayTransparency {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 700;
}

.modal {
    width: 90vw;
    height: 40%;
    position: absolute;
    background: #fff;
    word-break: break-word;
    border-radius: 1vw;
}

/* top */

#top {
    z-index: 1000;
    width: 100%;
    height: 100%;
}

#topHeader {
    z-index: 9999;
    width: 100%;
    height: 12vw;
    display: flex;
    background-color: rgb(146, 28, 47);
    margin-top: 0px;
    position: fixed;
    box-shadow: rgba(25, 60, 77, 0.4) 0px 0.75vw 2vw -0.25vw;
}

#topBackButtonArea {
    left: 0;
    display: unset;
    width: 14vw;
    height: 10vw;
    margin-top: auto;
    margin-bottom: auto;
    bottom: 0;
    top: 0;
    margin-right: 1vw;
    margin-left: 1vw;
}

#topHeader .button.image {
    width: 14vw;
    height: 7vw;
    background-size: 7vw;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#topHeader img {
    margin: 0 3.5vw;
    height: 7vw;
    pointer-events: none;
}

#topHeader .button.title {
    font-size: 2.5vw;
    color: white;
    width: 14vw;
    height: 3vw;
    text-align: center;
    margin: 0.5vw 0 0 0;
    pointer-events: none;
}

#topContent {
    width: 100%;
    height: 100%;
    background-color: #f2f0eb;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#topLogoArea {
    text-align: center;
}

#topLogoImage {
    max-width: 80%;
    max-height: 100%;
}

#topLangButtonArea {
    width: fit-content;
    margin: 0 auto;
    display: flex;
}

#topLangButtonArea .topLangButton {
    width: 20vw;
    height: 20vw;
    filter: drop-shadow(1px 1px 2px gray);
    margin: 0 2vw;
}

#topLangButtonArea .topLangButton > svg {
    pointer-events: none;
}

#topLangButtonArea .topLangButton {
    fill: #a11e2c;
}

#topNext {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* margin: auto auto 20% auto; */
    font-size: 4vw;
    /* width: 24vw; */
    height: 12vw;
    /* border: thin solid black; */
    /* border-radius: 1vw; */
    /* background-color: white; */
}

#topButtonArea {
    width: 100%;
    text-align: center;
}

#topNext.parent_page_button {
    background-color: rgb(146, 28, 47);
    color: white;
    height: 12vw;
    font-size: 4vw;
    border-radius: 1vw;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200deg 50% 20% / 40%);
    margin: auto;
    width: 80vw;
    padding: 1vw;
}

#topMessage1,
#topMessage2 {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 4vw;
    width: fit-content;
    height: fit-content;
}

#topMessage3 {
    font-size: 3.2vw;
    text-align: center;
    height: 30px;
    line-height: 40px;
}

#topCopyright {
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 4vw;
    margin: 1vw;
}

@media screen and (orientation: landscape) {
    #topNext {
        /* width: 20vw; */
        font-size: 2.5vw;
        height: 6vw;
        /* margin-bottom: 5%; */
    }

    #topLogoArea {
        max-height: 60%;
        margin: 0 auto;
        width: fit-content;
    }

    #topLogoImage {
        /* width: auto;
        height: -webkit-fill-available; */
    }

    #topLangButtonArea {
        bottom: 0;
        right: 0;
        left: 0;
        margin-bottom: 1vw;
    }

    #topLangButtonArea .topLangButton {
        width: 20vh;
        height: 20vh;
    }

    #topCopyright {
        font-size: 2vw;
    }

    #topMessage3 {
        font-size: 2.1vw;
        text-align: center;
    }
}

/* imageSelect */

#imageSelect {
    z-index: 3000;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background-color: #f2f0eb;
}

/* addMenu */

#addMenu {
    z-index: 5000;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: scroll;
    padding: 2vw 0;
}

#addMenuBox {
    position: absolute;
    width: calc(100% - 4vw);
    height: fit-content;
    margin-top: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: solid 1px rgba(0, 0, 0, 0);
    border-radius: 2vw;
    background-color: white;
    /* padding: 4vw; */
    transform-origin: 100% 0;
}

#addMenuBox > div {
    margin: 4vw;
}

#addMenuHeader {
    width: 100%;
    margin-bottom: 2vw;
    position: relative;
    height: 4vw;
}

#addMenuHeader div {
    width: min-content;
    left: -2vw;
    top: -2vw;
    position: absolute;
}

#addMenuCloseButton {
    width: 6vw;
}

#addMenuCloseButtonImage {
    height: 6vw;
}

#addMenuContent {
    height: fit-content;
}

#addMenuContentTitle {
    font-size: 4vw;
    margin-bottom: 4vw;
    font-weight: bold;
}

#addMenuInfo {
    font-size: 3.5vw;
    line-height: 1.25;
    padding: 0 2vw;
}

#addMenuContentImage {
    width: 88vw;
    height: calc(88vw * 9 / 16);
    margin-bottom: 4vw;
    max-height: calc(100% - 4vw);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
}

#addMenuPrice {
    margin-bottom: 4vw;
    font-size: 3.5vw;
}

#addMenu hr {
    margin-bottom: 4vw;
    border: none;
    border-top: 1px solid #8c8b8b;
    height: 1px;
}

#addMenuChoiceArea {
    margin-bottom: 2vw;
}

#addMenuChoiceArea .addMenuChoiceName {
    height: fit-content;
    font-size: 4vw;
    background-color: lightgray;
    padding: 1vw 1vw;
    margin-bottom: 2vw;
    overflow-wrap: break-word;
}

#addMenuChoiceArea .addMenuChoiceItems {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

#addMenuChoiceArea .addMenuChoiceitem {
    display: flex;
    flex-flow: column;
    font-size: 3vw;
    line-height: 1.25;
    text-align: left;
    width: calc(50% - 2vw);
    margin: 1vw;
    padding: 2vw;
    border-radius: 1vw;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
}

#addMenuChoiceArea .addMenuChoiceitem.selected {
    background-color: #a11e2c;
    color: white;
    box-shadow: none;
}
#addMenuChoiceArea .addMenuChoiceMenuName {
    font-size: 4vw;
    flex: auto;
    pointer-events: none;
}

#addMenuChoiceArea .addMenuChoiceMenuBaika.none {
    display: none;
}

#addMenuChoiceArea li.addMenuChoiceitem.shinagire {
    background-color: #d3d3d3;
    color: white;
}

#addMenuChoiceArea .addMenuChoiceMenuBaikaArea {
    display: flex;
    pointer-events: none;
}

#addMenuChoiceArea .addMenuChoiceMenuBaika {
    flex: 1;
}

#addMenuChoiceArea li.addMenuChoiceitem.shinagire .addMenuChoiceMenuShinagire {
    display: block;
    color: #a11e2c;
}

#addMenuChoiceArea .addMenuChoiceMenuShinagire {
    display: none;
}

#addMenuQuantityArea {
    display: flex;
    margin-bottom: 4vw;
    left: 0;
    right: 0;
    margin-left: auto;
    width: fit-content;
    margin-right: auto;
}

#addMenuDecrementButton,
#addMenuIncrementButton {
    width: 8vw;
    height: 8vw;
    font-size: 6vw;
    border: 1px solid gray;
    border-radius: 4px;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#addMenuDecrementButton:disabled,
#addMenuIncrementButton:disabled {
    background-color: #d3d3d3;
    border-color: #d3d3d3;
}

#addMenuQuantityArea img {
    width: 8vw;
    height: 8vw;
}

/* #addMenuDecrementButton {
    background-image: url("/_img/btn/com/remove-outline.svg");
}
#addMenuIncrementButton {
    background-image: url("/_img/btn/com/add-outline.svg");
} */

#addMenuQuantity {
    font-size: 6vw;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 2vw;
    margin-right: 2vw;
}

#addMenuFooter {
    display: flex;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

#addMenuAddToCartButton,
#addMenuConfirmButton {
    width: 100%;
    height: 12vw;
    border-radius: 4px;
    background-color: #a11e2c;
    color: white;
    font-size: 4vw;
    font-weight: bold;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
    margin: auto;
}

#addMenuAddToCartButton:disabled,
#addMenuConfirmButton:disabled {
    /* background-color: lightgray; */
    /* 221201 gai ボタンスタイルの変更 */
    background: #d3d3d3;
    color: white;
    border: 2px solid #d3d3d3;
}

@media screen and (orientation: landscape) {
    #addMenuBox {
        width: calc(80% - 4vw);
        /* padding: 2vw 4vw; */
    }

    #addMenuBox > div {
        margin: 2vw 4vw;
    }

    #addMenuHeader {
        margin-bottom: 1vw;
        height: 4vw;
    }

    #addMenuHeader div {
        top: 0vw;
        left: -2vw;
    }

    #addMenuCloseButton {
        width: 4vw;
    }

    #addMenuCloseButtonImage {
        height: 4vw;
    }

    #addMenuContent {
        display: flex;
    }

    #addMenuContentTitle {
        font-size: 2.5vw;
        margin-bottom: 2vw;
    }

    #addMenuContentImage {
        width: 32vw;
        height: calc(32vw * 9 / 16);
        margin-bottom: 2vw;
        max-height: calc(100% - 2vw);
        margin-right: 2vw;
    }

    #addMenuMenuInfoArea {
        width: calc(100% - 34vw);
        height: fit-content;
        margin: auto;
    }

    #addMenuInfo {
        font-size: 2.5vw;
        padding: 0;
    }

    #addMenuPrice {
        font-size: 2vw;
        margin-bottom: 2vw;
    }

    #addMenuChoiceArea .addMenuChoiceName {
        font-size: 2.5vw;
        padding: 0.5vw 1vw;
    }

    #addMenuChoiceArea .addMenuChoiceMenuName {
        font-size: 2.5vw;
    }

    #addMenuChoiceArea .addMenuChoiceitem {
        font-size: 2vw;
        margin: 0.5vw 1vw;
        padding: 1vw 2vw;
    }

    #addMenu hr {
        margin-bottom: 2vw;
        height: 1px;
    }

    #addMenuQuantityArea {
        margin-bottom: 2vw;
    }

    #addMenuDecrementButton,
    #addMenuIncrementButton {
        width: 4vw;
        height: 4vw;
        font-size: 4vw;
    }

    #addMenuQuantity {
        font-size: 4vw;
    }

    #addMenuAddToCartButton,
    #addMenuConfirmButton {
        height: 6vw;
        font-size: 3vw;
    }
}

/* thumbnail */

#thumbnailMain ul li div.menuCyumonBaika {
    position: unset;
    right: unset;
    top: unset;
    height: unset;
    text-align: unset;
    font-size: unset;
    display: none;
}

#thumbnailMain .thumbnailBaika,
#thumbnailMain .thumbnailSuryo {
    position: unset;
    right: unset;
    top: unset;
    height: unset;
}

#thumbnail {
    width: 100%;
    /* height: 100%; */
    height: fit-content;
    margin-top: 12vw;
    overflow-x: hidden;
}

#thumbnailHead {
    z-index: 9999;
    width: 100%;
    height: 12vw;
    display: flex;
    background-color: #eef0ef;
    margin-top: 0;
    position: fixed;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
}

#thumbnail #thumbnailFirstDiv {
    width: 100%;
    height: unset;
    padding: 1vw 0;
}

#thumbnailListScroll {
    margin-left: unset;
    width: unset;
    height: unset;
    float: unset;
    overflow: unset;
    padding: 2vw 4vw 0 4vw;
}

#thumbnailListScroll > div {
    height: fit-content;
}

#thumbnailList {
    width: unset;
    height: unset;
}

#thumbnailList > .thumbnailListImgDiv {
    width: unset;
    height: unset;
    margin: unset;
    text-align: center;
    display: table;
    float: left;
    height: 4vw;
    padding: 1vw 3vw;
    width: fit-content;
    border: solid 1px #000000;
    border-radius: 3vw;
    margin: 0 1vw 2vw 0;
}

#thumbnailList > .thumbnailListImgDiv.thumbnailListMenuSelect {
    background-color: #eebe00;
    color: white;
    border-color: #eebe00;
}

#thumbnailList .thumbnailListImg {
    font-size: 4vw;
}

#thumbnailMain {
    margin: 0;
    width: 200vw;
    /* height: calc(100% - 12vw - 16vw); */
    text-align: left;
    position: relative;
    overflow: hidden;
    display: flex;
}

#thumbnailMain ul li {
    display: inline-grid;
    height: unset;
}

#thumbnailMain .menufood {
    position: relative;
    /* width: 96vw; */
    min-height: 18vw;
    height: fit-content;
    margin: 0 2vw 2vw 2vw;
    border: unset;
    overflow: hidden;
    border-radius: 1vw;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
    background-color: #fafafa;
}

#thumbnailMain .menufood > div {
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
    height: fit-content;
    display: flex;
}

#thumbnailMain .thumbnailMainLeft {
    display: flex;
    flex-flow: column;
    justify-content: center;
}

#thumbnailMain .thumbnailMainImgArea {
    width: 32vw;
    position: relative;
}

#thumbnailMain .thumbnailMainImg {
    /* width: 100%; */
    /* height: 21vw; */
    width: 32vw;
    height: calc(32vw * 9 / 16);
    float: unset;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
    vertical-align: top;
}

#thumbnailMain .thumbnailMainImg::before {
    height: calc(100% * 9 / 16);
}

#thumbnailMain .thumbnailShinagireImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

#thumbnailMain .thumbnailShinagireImg.shinagire {
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

#thumbnailMain .thumbnailShinagireImg > img {
    width: 75%;
    height: fit-content;
}

#thumbnailMain .thumbnailMenuInofo {
    width: -webkit-fill-available;
    height: fit-content;
    margin: auto 0;
    padding: 0 2vw;
}

#thumbnailMain ul li div.menuName {
    position: unset;
    width: unset;
    height: unset;
    height: fit-content;
    padding: 2vw;
    margin-top: auto;
    margin-bottom: auto;
    display: block;
    text-align: unset;
}

#thumbnailMain .menuName span {
    font-size: 4vw;
    font-weight: bold;
    line-height: 1.25;
}

#thumbnailMain .thumbnailBaika {
    font-size: 3.5vw;
    display: block;
    justify-content: unset;
    align-items: unset;
    height: fit-content;
    margin-top: 2vw;
}

/* #thumbnailMenuArea,
#thumbnailLangArea,
#thumbnailPayArea,
#thumbnailCallArea,
#thumbnailHistoryArea,
#thumbnailCartArea,
#thumbnailTableChangeArea,
#thumbnailQRPaymentArea */
#thumbnailHead .button.area {
    /* position: absolute; */
    /* width: 10vw; */
    height: 10vw;
    /* margin-top: auto;
    margin-bottom: auto; */
    bottom: 0;
    top: 0;
    /* margin-right: 1vw;
    margin-left: 1vw; */
}

#thumbnailMenuArea {
    left: 0;
    display: flex;
    width: calc(100% - 36vw);
}

#thumbnailTitle {
    color: #a11e2c;
    text-align: center;
    margin-top: 4vw;
    font-size: 4vw;
}

#thumbnailTitle span {
    border-bottom: solid 0.2vw;
    padding: 0 1vw;
}

#thumbnailCallArea,
#thumbnailLangArea {
    right: 24vw;
    display: none;
}

#thumbnailHistoryArea {
    right: 12vw;
}

#thumbnailCartArea {
    right: 0;
}

/* #thumbnailMenu,
#thumbnailCart {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 10vw;
    height: 100%;
    margin-left: 2vw;
    margin-right: 2vw;
} */

/* #thumbnailMenu {
    background-image: url("/_img/btn/com/menu-outline.svg");
}

#thumbnailBack {
    background-image: url("/_img/btn/com/white_back.svg");
}

#thumbnailLang {
    background-image: url("/_img/btn/com/language-outline.svg");
}

#thumbnailCall {
    background-image: url("/_img/btn/com/white_call.svg");
} */

/* #thumbnailHistory {
    background-image: url("/_img/btn/com/receipt-outline.svg");
} */

/* #thumbnailCart {
    background-image: url("/_img/icon/cart-outline.svg");
} */

/* #thumbnailCart:disabled {
    background-image: url("/_img/icon/cart-outline_disabled.svg");
} */

#thumbnailHead img {
    margin: 0 3.5vw;
    height: 7vw;
    pointer-events: none;
}

#thumbnailCart {
    margin: 0 3.5vw;
    height: 7vw;
}

#thumbnailBadge {
    position: absolute;
    width: 1.5vw;
    right: 0;
    top: 0;
    margin: 1.5vw 1.3vw 1.5vw 1.5vw;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 2vw;
}

#thumbnailHead .button.area {
    display: unset;
    width: 14vw;
    margin: auto 1vw;
}

#thumbnailHead .button.image {
    width: 14vw;
    height: 7vw;
    background-size: 7vw;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#thumbnailHead .button.title {
    font-size: 2.5vw;
    color: #312f30;
    width: 14vw;
    height: 3vw;
    text-align: center;
    margin: 0.5vw 0 0 0;
    pointer-events: none;
}

#thumbnail .spacer {
    flex: 1;
}

#thumbnailSyoukai {
    display: none;
}

#thumbnailRecommendScrollArea {
    width: fit-content;
    height: 100%;
    display: flex;
}

#thumbnail .thumbnailRecdmenuImageArea {
    width: 100%;
    height: 100%;
    position: relative;
}

#thumbnail .thumbnailRecdmenuImage {
    width: 96vw;
    height: 100%;
}

#thumbnail .thumbnailRecdmenuTitle {
    position: absolute;
    bottom: 0;
    height: 10%;
    font-size: 3vw;
    width: 100%;
    margin-bottom: 0;
    margin-top: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 2vw;
    display: flex;
    align-items: center;
}

#thumbnailCategoryList {
    display: flex;
    flex-flow: wrap;
    /* justify-content: space-around; */
    padding: 1vw 2vw;
}

#thumbnailCategoryList .thumbnailCategoryImage {
    width: 30vw;
    height: calc(30vw * 9 / 16);
    border-radius: 1vw 1vw 0 0;
    vertical-align: bottom;
}

#thumbnailCategoryList .thumbnailCategoryNameArea {
    font-size: 3vw;
    font-weight: bold;
    /* 201028 崔 MobileCourse カテゴリーの名称が長いとレイアウトで囲ってある部分から見切れてしまう height: 12vw; */
    padding: 2vw 1vw;
    text-align: center;
    overflow-wrap: break-word;
    line-height: 1.5;
    overflow: hidden;
    background-color: white;
}

#thumbnailMenuList {
    padding: 2vw 1vw 1vw 1vw;
}

#thumbnailCategoryListArea,
#thumbnailMenuListArea,
#thumbnailCategoryList,
#thumbnailMenuList {
    width: 100vw;
    height: fit-content;
}

#thumbnailMain .thumbnailCategoryItem {
    overflow: hidden;
    width: 30vw;
    margin: 1vw;
    border-radius: 1vw;
    box-shadow: 0 0.5vw 1vw -0.25vw hsl(200 50% 20% / 40%);
}

/* #thumbnailMain .thumbnailCategoryItem.selected {
    background-color: #a11e2c;
    color: white;
} */

/* #thumbnailBack {
    width: 10vw;
    height: 10vw;
} */

#thumbnailCategoryTitleArea,
#thumbnailMenuTitleArea {
    padding: 6vw 2vw 0vw 2vw;
}

#thumbnailCategoryTitleArea {
    overflow-x: scroll;
    border-bottom: solid 2px;
    border-color: #a11e2c;
    margin: 0 2vw;
    padding: 2vw 0 0 0;
}

#thumbnailCategoryTitleArea::-webkit-scrollbar {
    display: none;
}

#thumbnailCategoryTitle {
    font-weight: bold;
    padding: 0;
    display: flex;
    width: fit-content;
}

#thumbnailCategoryTitle.wrap {
    flex-flow: wrap;
    border: none;
    overflow-x: unset;
}

#thumbnailCategoryTitle::-webkit-scrollbar {
    display: none;
}

#thumbnail .category-title {
    box-sizing: border-box;
    border-style: solid;
    padding: 3.75vw 2vw;
    border-width: 0.25vw;
    margin-right: 1vw;
    min-width: 20vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    background-color: white;
    font-size: 3vw;
    border-radius: 1.5vw 1.5vw 0 0;
    border-bottom-width: 0.5vw;
    border-bottom-color: rgba(0, 0, 0, 0);
}

#thumbnail .category-title.wrap {
    border-radius: 1vw;
    margin-bottom: 1vw;
    border-width: 0.25vw;
    border-bottom-color: unset;
}

#thumbnail .category-title.selected {
    border-color: #a11e2c;
    color: #a11e2c;
    border-width: 0.25vw 0.25vw 2.25vw 0.25vw;
    padding: 1.875vw 2.5vw 0 2.5vw;
}

#thumbnailMenuTitle {
    font-size: 3.5vw;
    font-weight: bold;
    padding: 0 2vw;
}

#thumbnailCategoryTitleArea > hr,
#thumbnailMenuTitleArea > hr {
    height: 2px;
    border: none;
    border-top: 2px solid;
    border-color: #a11e2c;
}

#thumbnailCategoryTitleArea > hr {
    margin: 0;
    height: 0px;
    border: none;
}

#thumbnailRecommendArea {
    width: calc(100vw - 4vw);
    height: calc((100vw - 4vw) * 9 / 16);
    background-color: white;
    overflow: hidden;
    margin: 2vw;
}

#thumbnailHead .thumbnailSpacer {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 201018 盖 MobileCourse コース時間関連 start */
#thumbnailHead #thumbnailCourseTime {
    background-color: white;
    width: 36vw;
    height: 10vw;
    border-radius: 1.5vw;
    display: flex;
    color: #000000;
    margin: auto 0;
}

#thumbnailCourseTime #nokoriStrDiv {
    width: 12vw;
    height: 10vw;
    text-align: left;
    margin-left: 2vw;
}

#thumbnailCourseTime #nokoriStrSpan {
    font-size: 3.5vw;
    line-height: 10vw;
}

#thumbnailCourseTime #courseTimeDiv {
    width: 14vw;
    height: 10vw;
    text-align: center;
}

#thumbnailCourseTime #courseTimeSpan {
    font-size: 7vw;
    line-height: 10vw;
}

#thumbnailCourseTime #minuteStrDiv {
    width: 8vw;
    height: 10vw;
    text-align: left;
}

#thumbnailCourseTime #minuteStrSpan {
    font-size: 3.5vw;
    line-height: 10vw;
}

#thumbnailCourseTime #under1Minute {
    font-size: 2vw;
    position: absolute;
    bottom: 2vw;
    left: 45vw;
}

/* 201018 盖 MobileCourse コース時間関連 end */

/* 201019 崔 MobileCourse コース時間関連 start */
#thumbnailBuffetTimeoverDiv {
    display: table;
    width: 100%;
}

#thumbnailBuffetTimeoverSpan {
    font-size: 4vw;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

/* 201019 崔 MobileCourse コース時間関連 end */

#guidNumericMessage {
    font-size: 3.5vw;
    font-weight: bold;
    text-align: center;
    height: 4vw;
    margin: 2vw 0;
}

#guidNumericDisplayArea {
    width: calc(100% * 0.65 + 8vw);
    height: 12vw;
    font-size: 9vw;
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-color: black;
    border-width: 0.5vw;
    border-style: solid;
    border-radius: 2vw;
    margin: auto;
}

#guidNumericDisplayNo {
    font-weight: bold;
    font-size: 4.5vw;
    width: 10vw;
}

#guidNumericDisplay {
    flex: 1;
    margin-right: 10vw;
    height: 9vw;
}

#guidNumericBackGround {
    width: 100%;
    border-radius: 2vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 4vw 8vw;
    margin: auto;
    flex: 1;
}

#guidNumericKeyButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#NumericDisplay {
    /* height: calc(100vh - 22vw); */
    display: flex;
    flex-direction: column;
}

#NumericDisplay .guidNumericKey {
    font-size: 7vw;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12vw;
    background-color: #eef0ef;
    width: 24vw;
    height: 24vw;
    margin: 1vw;
}

#NumericDisplay .guidNumericKey[data-key="B"] {
    /* background-image: url(_img/icon/backspace-outline.svg); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
}

#guidNumericKeyEnter {
    width: calc(100% * 0.8);
    height: 12vw;
    border: solid 1px black;
    background-color: #a11e2c;
    color: white;
    font-size: 4vw;
    font-weight: bold;
    box-shadow: rgb(25 60 77 / 40%) 0px 0.75vw 2vw -0.25vw;
    border-radius: 4px;
    margin: auto;
    margin-bottom: 4vw;
}

#guidNumericTitleArea {
    font-size: 3.5vw;
    font-weight: bold;
    margin: 2vw 4vw 0 4vw;
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    border-color: #a11e2c;
    border-width: 2px;
    padding: 1vw;
    height: 6vw;
}

/* #guidNumericKey7 {
    left: calc(100% * 0.175);
    top: calc(100% * 0.35);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
}

#guidNumericKey8 {
    left: calc(100% * 0.4);
    top: calc(100% * 0.35);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
}

#guidNumericKey9 {
    left: calc(100% * 0.625);
    top: calc(100% * 0.35);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
}

#guidNumericKey4 {
    left: calc(100% * 0.175);
    top: calc(100% * 0.43);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
}

#guidNumericKey5 {
    left: calc(100% * 0.4);
    top: calc(100% * 0.43);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
}

#guidNumericKey6 {
    left: calc(100% * 0.625);
    top: calc(100% * 0.43);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
}

#guidNumericKey1 {
    left: calc(100% * 0.175);
    top: calc(100% * 0.51);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
}

#guidNumericKey2 {
    left: calc(100% * 0.4);
    top: calc(100% * 0.51);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
}

#guidNumericKey3 {
    left: calc(100% * 0.625);
    top: calc(100% * 0.51);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
}

#guidNumericKeyC {
    left: calc(100% * 0.175);
    top: calc(100% * 0.59);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
}

#guidNumericKey0 {
    left: calc(100% * 0.4);
    top: calc(100% * 0.59);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
}

#guidNumericKeyB {
    left: calc(100% * 0.625);
    top: calc(100% * 0.59);
    width: calc(100% * 0.2);
    height: calc(100% * 0.07);
} */

#guidNumericKeyBImg {
    height: 30%;
    pointer-events: none;
}

#qrcode-content {
    display: flex;
    flex-flow: column;
    justify-content: center;
}

#qrcode {
    margin: auto;
}

.seat-info {
    margin: 2vw;
    font-size: 4vw;
    width: calc(100% - 4vw);
    text-align: center;
    border: gray 2px solid;
    padding: 2vw;
}

#thumbnailHead svg {
    width: 7vw;
    height: 7vw;
    margin: 0 3.5vw;
}

#thumbnailModeChangeButton svg {
    width: 14vw;
    height: 12vw;
    margin: -2.5vw 0;
}

#thumbnailHead svg .st0 {
    fill: #383636;
    stroke: #383636;
}

#thumbnailCourseTimeArea {
    z-index: 9999;
    height: 24vw;
    width: 100%;
    background-color: #a11e2c;
    position: fixed;
    margin-top: 0;
    display: none;
    padding: 2vw;
}

#thumbnailCourseTimeArea > div {
    flex: 1;
    margin: 2vw;
    background-color: white;
    display: flex;
    flex-flow: column;
    padding: 2vw;
}

#thumbnailCourseTimeArea .timeArea {
    display: flex;
    flex: 1;
}

#thumbnailCourseTimeArea .title {
    text-align: center;
    font-size: 3vw;
}

#thumbnailCourseTimeArea .timeArea .after,
#thumbnailCourseTimeArea .timeArea .minutes {
    margin: auto 0 0 0;
}

#thumbnailCourseTimeArea .timeArea .after {
    font-size: 3vw;
}

#thumbnailCourseTimeArea .timeArea .minutes {
    font-size: 5vw;
}

#thumbnailCourseTimeArea .timeArea .time {
    font-size: 8vw;
    margin: auto 1vw 0 auto;
}

#thumbnailBackButton:disabled .st0 {
    fill: #5e5e5e;
    stroke: #5e5e5e;
}

#thumbnailModeChangeButton:disabled .st0 {
    fill: #5e5e5e;
    stroke: #5e5e5e;
}

@media screen and (orientation: landscape) {
    #thumbnail {
        margin-top: 6vw;
    }

    #thumbnailHead {
        height: 6vw;
    }

    #thumbnailHead .button.area {
        width: 10vw;
    }

    #thumbnailHead .button.image {
        height: 3vw;
        background-size: 3vw;
        width: 10vw;
    }

    #thumbnailHead img {
        margin: 0 0.5vw;
        height: 3vw;
    }

    #thumbnailHead .button.title {
        font-size: 1.5vw;
        height: 1.5vw;
    }

    #thumbnailRecommendArea {
        width: 64vw;
        height: calc(64vw * 9 / 16);
        margin: 2vw auto;
    }

    #thumbnail .thumbnailRecdmenuImageArea {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #thumbnail .thumbnailRecdmenuImage {
        width: 96vw;
        height: 100%;
    }

    #thumbnailList .thumbnailListImg {
        font-size: 2vw;
        line-height: 3vw;
    }

    #thumbnail #thumbnailFirstDiv {
        height: 8vw;
        padding: 0 1px;
    }

    #thumbnailList > .thumbnailListImgDiv {
        height: 3vw;
        padding: 0.5vw 3vw;
        border-radius: 2vw;
        margin: 0 1vw 1vw 0;
    }

    #thumbnailMain .thumbnailCategoryItem {
        width: calc(96vw / 6 - 2vw);
    }

    #thumbnailCategoryList .thumbnailCategoryImage {
        width: calc(96vw / 6 - 2vw);
        height: calc((96vw / 6 - 2vw) * 9 / 16);
    }

    #thumbnailMenuTitle {
        font-size: 3vw;
    }

    #thumbnailCategoryList .thumbnailCategoryNameArea {
        font-size: 2vw;
        height: 8vw;
        padding: 1vw 1vw;
    }

    #thumbnailMain {
        /* height: calc(100% - 6vw - 8vw); */
        height: 92vh;
    }

    #thumbnailMain ul li div.menufood {
        width: 80vw;
        min-height: 8vw;
        margin: 1vw 10vw;
    }

    #thumbnailMenuList {
        padding: 2vw 10vw 1vw 10vw;
    }

    #thumbnailMenuArea,
    #thumbnailLangArea,
    #thumbnailPayArea,
    #thumbnailCallArea,
    #thumbnailHistoryArea,
    #thumbnailCartArea {
        width: 5vw;
        height: 5vw;
        margin-right: 0vw;
        margin-left: 0vw;
    }

    #thumbnailCallArea,
    #thumbnailLangArea {
        right: 16vw;
    }

    #thumbnailHistoryArea {
        right: 8vw;
    }

    #thumbnailMenu,
    #thumbnailLang,
    #thumbnailHistory,
    #thumbnailCart {
        width: 5vw;
        height: 3vw;
        background-size: 3vw;
    }

    #thumbnailMain .menufood {
        min-height: unset;
    }

    #thumbnailMain .thumbnailMainImgArea {
        width: 24vw;
    }

    #thumbnailMain .thumbnailMainImg {
        /* height: unset; */
        width: 24vw;
        height: calc(24vw * 9 / 16);
    }

    #thumbnailMenuArea {
        display: flex;
        width: calc(100% - 30vw);
    }

    #thumbnailTitle {
        font-size: 3vw;
    }

    #thumbnailHead .button.title {
        width: 10vw;
    }

    #thumbnailCart {
        padding: 0;
        margin: 0px 2.5vw;
    }

    #thumbnailBadge {
        width: 1vw;
        margin: 0.8vw 0.8vw 0.8vw 0.8vw;
        font-size: 1vw;
    }

    #thumbnailMain ul li img.thumbnailMainImg {
        width: 20vw;
        height: 15vw;
    }

    #thumbnailMain .menuName span {
        font-size: 3.5vw;
    }

    #thumbnailMain .thumbnailBaika {
        font-size: 3vw;
    }

    #thumbnailCategoryTitle {
        border-width: 0.25vw 0;
    }

    #thumbnail .category-title {
        padding: 1vw 1vw;
        border-bottom-width: 0.25vw;
        font-size: 2vw;
    }
}

/* cyumon */

#cyumon {
    z-index: 6000;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#cyumonHeader {
    width: 100%;
    margin-bottom: 2vw;
    position: relative;
    height: 8vw;
}

#cyumonCloseButton {
    width: fit-content;
    left: -2vw;
    top: -2vw;
    position: absolute;
}

#cyumonCloseButtonImage {
    width: 8vw;
    height: 8vw;
}

#cyumonTitle {
    text-align: center;
    font-size: 4vw;
    font-weight: bold;
}

#cyumonContentArea {
    background-color: white;
    width: -webkit-fill-available;
    /* height: -webkit-fill-available; */
    height: fit-content;
    /* max-height: calc(100% - 22vw); */
    margin: 2vw;
    border-radius: 1vw;
    padding: 4vw;
    /* overflow: hidden; */
}

#cyumonMain {
    overflow-y: scroll;
    height: fit-content;
    /* max-height: calc(100% - 10vw); */
}

#cyumonMain::-webkit-scrollbar {
    display: none;
}

#cyumonItems {
    margin-bottom: 2vw;
}

/* #cyumon section.cyumonItem:nth-child(n + 2) {
    border-top: solid 1px black;
} */

#cyumon .cyumonOrderTime {
    height: fit-content;
    background-color: lightgray;
    font-size: 3vw;
    padding: 0.5vw 1vw;
}

#cyumon section.cyumonItem:not(:last-child) {
    /* box-shadow: 0 0.75vw 1.5vw -0.5vw hsl(200 50% 20% / 40%); */
    border-bottom: solid 1px #cccccc;
}

#cyumon .cyumonItem {
    padding: 4vw 1vw;
}

#cyumon .cyumonItem.other {
    background-color: lightyellow;
}

#cyumon .cyumonParent {
    display: flex;
}

#cyumon .cyumonChildItem {
    display: flex;
    font-size: 3vw;
    line-height: 1.25;
    margin-top: 2vw;
}

#cyumon .cyumonNameArea,
#cyumon .cyumonChildNameArea {
    width: calc(100% - 22vw);
    display: flex;
    margin: auto 0;
}

#cyumon .cyumonName {
    font-size: 4vw;
    /* margin-bottom: 2vw; */
    height: fit-content;
    flex: 1;
}

#cyumon .cyumonItem.strikethrough {
    color: red;
}

#cyumon .cyumonItem.strikethrough .cyumonName {
    text-decoration: line-through;
}

#cyumon .cyumonPrice {
    font-size: 4vw;
    margin-left: auto;
    height: fit-content;
    width: 20vw;
    text-align: right;
}

#cyumon .cyumonQuantityArea {
    display: flex;
    /* width: 22vw; */
    height: fit-content;
    margin-top: auto;
    margin-left: auto;
}

#cyumon .cyumonQuantity {
    font-size: 4vw;
    width: 6vw;
    margin: auto 0;
    text-align: center;
}

#cyumon .cyumonDecrementButton,
#cyumon .cyumonIncrementButton {
    margin: auto 0;
    width: 6vw;
    height: 6vw;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* #cyumon .cyumonIncrementButton object {
    width: inherit;
    pointer-events: none;
} */

.cyumonQuantityArea img {
    width: 6vw;
    height: 6vw;
}

/* #cyumon .cyumonDecrementButton {
    background-image: url("/_img/btn/com/remove-circle-outline.svg");
} */

/* #cyumon .cyumonIncrementButton {
    background-image: url("/_img/btn/com/add-circle-outline.svg");
}

#cyumon .cyumonIncrementButton:disabled {
    background-image: url("/_img/btn/com/add-circle-outline-disabled.svg");
} */

#cyumon .cyumonChildName {
    padding-left: 4vw;
}

#cyumon .cyumonChildPrice {
    margin-left: auto;
}

#cyumon .cyumonChildPrice.none {
    display: none;
}

#cyumon .cyumonChildQuantityArea {
    width: 18vw;
    margin-left: auto;
}

#cyumon .cyumonChildQuantity {
    width: 6vw;
    margin-left: auto;
    text-align: center;
    /* visibility: hidden; */
}

#cyumon .cyumonItem.shinagire,
#cyumon .cyumonChildItem.shinagire {
    color: red;
}

#cyumon .uriflg {
    width: fit-content;
    background-color: gray;
    color: white;
    padding: 1vw;
    font-size: 2vw;
    border-radius: 1vw;
}

#cyumonFooter {
    margin-top: 2vw;
    margin-bottom: 2vw;
    border-top: solid 1px #666666;
}

#cyumonSubTotalArea {
    display: flex;
    height: 10vw;
    width: 100%;
    background-color: white;
    margin-bottom: 2vw;
    /* border-top: solid 1px #666666; */
    font-size: 4vw;
    text-align: center;
}

#cyumonSubTotalArea div {
    margin: auto 0;
}

#cyumonSubTotalTitle {
    width: 30%;
}

#cyumonSubTotalItems {
    width: 30%;
    text-align-last: right;
}

#cyumonSubTotal {
    width: 40%;
    text-align-last: right;
}

#cyumonSubTotalAreaPaidTotalArea,
#cyumonSubTotalAreaUnpaidTotalArea {
    display: none;
}

#cyumonFooter .cyumonTotalArea {
    height: fit-content;
    padding: 1vw 0;
    font-size: 4vw;
    display: flex;
    margin-bottom: 1vw;
}

#cyumonFooter .cyumonServiceTotalArea {
    height: fit-content;
    padding: 1vw 0;
    font-size: 3vw;
    display: flex;
    margin-bottom: 1vw;
}

#cyumonFooter .cyumonServiceTotalArea .price {
    flex: 1;
    text-align-last: right;
}

#cyumonFooter .cyumonTotalArea .title {
    width: 30%;
    text-align-last: right;
}

#cyumonFooter .cyumonTotalArea div {
    margin: auto 0;
}

#cyumonSubTotalArea div {
    font-size: 3.5;
    font-weight: bold;
}

#cyumonFooter .cyumonTotalArea .items {
    width: 30%;
    text-align-last: right;
}

#cyumonFooter .cyumonTotalArea .price {
    flex: 1;
    text-align-last: right;
}

#cyumonFooter .msgCautionClass {
    color: red;
    padding: 0vw 2vw 2vw 2vw;
    font-size: 3.5vw;
}

#cyumonSeatInfo {
    margin: 2vw;
    font-size: 4vw;
    width: calc(100% - 4vw);
    text-align: center;
    border: gray 2px solid;
    padding: 2vw;
}

#cyumonConfirmButton {
    height: 12vw;
    width: 100%;
    margin: 0 auto;
    margin-top: 4vw;
    left: 0;
    right: 0;
    border-radius: 4px;
    background-color: #a11e2c;
    color: #ffffff;
    font-size: 4vw;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
}

#cyumonConfirmButton:disabled {
    /* box-shadow: none;
    background-color: #cccccc; */

    /* 221201 gai ボタンスタイルの変更 */
    background: #d3d3d3;
    color: white;
    border: 2px solid #d3d3d3;
}

#cyumonMessage {
    line-height: 4vw;
    font-size: 2vw;
    padding: 0 2vw;
}

#cyumonSelectUser {
    display: none;
    background-color: white;
    display: none;
    width: 100%;
    font-size: 4vw;
    padding: 2vw;
    font-weight: bold;
    margin-bottom: 4vw;
    box-shadow: rgb(25 60 77 / 40%) 0px 0.75vw 2vw -0.25vw;
    border-radius: 1vw;
    border-width: 0;
}

#cyumonSelectUser > option {
    font-size: 4vw;
    font-weight: bold;
}

#cyumonSubTotalInfo {
    font-size: 3.5vw;
    margin-bottom: 3vw;
    width: 100%;
    text-align: center;
    display: none;
}

/* サービス料表示 */
#cyumonServiceTotalTitle,
#cyumonNoServiceTotalTitle {
    width: 72%;
    text-align: right;
}

@media screen and (orientation: landscape) {
    #cyumonHeader {
        margin-bottom: 1vw;
        height: 4vw;
    }

    #cyumonCloseButton {
        top: -1vw;
        left: -3vw;
    }

    #cyumonCloseButtonImage {
        width: 4vw;
        height: 4vw;
    }

    #cyumonTitle {
        font-size: 3vw;
    }

    #cyumonContentArea {
        width: 80%;
        margin: 0 auto;
        padding: 2vw 4vw;
    }

    /* #cyumonMain {
        max-height: calc(100% - 5vw);
    } */

    #cyumonItems {
        margin-bottom: 1vw;
    }

    #cyumon section.cyumonItem:not(:last-child) {
        /* box-shadow: 0 0.5vw 0.75vw -0.5vw hsl(200 50% 20% / 40%); */
        border-bottom: solid 1px #cccccc;
    }

    #cyumon .cyumonItem {
        padding: 2vw 1vw;
    }

    #cyumon .cyumonNameArea,
    #cyumon .cyumonChildNameArea {
        display: flex;
        margin: auto 0;
        width: 100%;
    }

    #cyumon .cyumonName {
        font-size: 3vw;
        width: calc(100% - 16vw);
        height: fit-content;
        margin-bottom: 0;
    }

    #cyumon .cyumonPrice {
        font-size: 3vw;
        width: 14vw;
        height: fit-content;
        text-align: right;
        margin: auto 0 0 auto;
    }

    #cyumon .cyumonQuantityArea {
        margin: auto auto 0 4vw;
    }

    #cyumon .cyumonQuantity {
        font-size: 3vw;
    }

    #cyumon .cyumonDecrementButton {
        margin-left: auto;
    }

    #cyumon .cyumonDecrementButton,
    #cyumon .cyumonIncrementButton {
        width: 3vw;
        height: 3vw;
    }

    #cyumon .cyumonChildItem {
        font-size: 2.5vw;
        margin-top: 1vw;
    }

    #cyumon .cyumonChildNameArea {
        width: calc(100% - 12vw);
    }

    #cyumon .cyumonChildName {
        padding-left: 2vw;
    }

    #cyumon .cyumonChildQuantity {
        width: 12vw;
    }

    #cyumonFooter {
        margin-top: 1vw;
        margin-bottom: 1vw;
    }

    #cyumonSubTotalArea {
        height: 5vw;
        margin-bottom: 1vw;
        font-size: 3vw;
    }

    #cyumonSeatInfo {
        margin: 2vw;
        font-size: 4vw;
        width: calc(100% - 4vw);
        text-align: center;
        border: gray 2px solid;
        padding: 2vw;
    }

    #cyumonConfirmButton {
        height: 8vw;
        font-size: 3vw;
    }
}

/* paysel */

#paysel {
    z-index: 6100;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#payselHeader {
    width: 100%;
    margin-bottom: 2vw;
    position: relative;
    height: 8vw;
}

#payselTitle {
    text-align: center;
    font-size: 4vw;
    font-weight: bold;
}

#payselCloseButtonImage {
    width: 8vw;
    height: 8vw;
}

#payselCloseButton {
    width: fit-content;
    left: -2vw;
    top: -2vw;
    position: absolute;
}

#payselContentArea {
    background-color: white;
    width: -webkit-fill-available;
    height: fit-content;
    margin: 2vw;
    border-radius: 1vw;
    padding: 4vw;
}

#payselMain {
    overflow-y: scroll;
    height: fit-content;
}

#payselMain::-webkit-scrollbar {
    display: none;
}

#payselFooter {
    margin-top: 2vw;
    margin-bottom: 2vw;
}

#paysel hr {
    border-color: rgb(147 147 147);
    margin: 0px 0px 4vw;
    border-style: solid none none;
}

.btnClass {
    margin-top: 15vw;
}

.btnClass2 {
    margin-top: 5vw;
}

#payselConfirmButton {
    height: 12vw;
    width: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: 4px;
    background-color: #a11e2c;
    color: #ffffff;
    font-size: 4vw;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
}

#payselMode1 {
    margin-top: 10vw !important;
}

.payMode {
    height: 12vw;
    width: 100%;
    border-radius: 4px;
    margin-top: 5vw;
    font-size: 4vw;
    text-align: center;
    line-height: 12vw;
}

.msgClass {
    font-size: 8vw;
    padding-left: 10px;
    font-weight: bold;
    border-radius: 4vw;
    text-align: center;
}

#paysel .msgCautionClass {
    width: 100%;
    font-size: 3.5vw;
    line-break: anywhere;
    padding: 2vw 2vw;
    color: red;
}

#paysel .msgCaution2 {
    width: 100%;
    font-size: 3vw;
    line-break: anywhere;
    padding: 2vw 2vw;
    color: black;
    text-align: center;
    font-weight: bold;
    margin-top: 2vw;
}

#payselConfirmButton:disabled {
    box-shadow: none;
    background-color: #cccccc;
}

#payselReception {
    display: none;
}

#payselMessage {
    margin: 2vw 0 0 2.5%;
    font-size: 4vw;
    padding: 5px 0px;
    width: 85%;
    line-height: 1.1;
}

#payselWarningTitle {
    margin: 4vw auto 2vw;
    font-size: 4vw;
    width: 95%;
}

#payselWarning {
    margin: 1vw auto;
    font-size: 4vw;
    width: 95%;
    line-height: 1.1;
}

#payselWarning2 {
    margin: 4vw auto;
    font-size: 4vw;
    width: 95%;
    line-height: 1.1;
}

#payselWarning3 {
    font-size: 3.5vw;
    color: red;
    margin: 0 4vw;
}

#payselEnail {
    width: 100%;
    padding: 2vw;
    font-size: 4vw;
    margin-top: 3px;
}

@media screen and (orientation: landscape) {
    #payselHeader {
        margin-bottom: 1vw;
        height: 4vw;
    }

    #payselCloseButton {
        top: -1vw;
        left: -3vw;
    }

    #payselCloseButtonImage {
        width: 4vw;
        height: 4vw;
    }

    #payselTitle {
        font-size: 3vw;
    }

    #payselContentArea {
        width: 80%;
        margin: 0 auto;
        padding: 2vw 4vw;
    }

    #payselFooter {
        margin-top: 1vw;
        margin-bottom: 1vw;
    }

    #payselConfirmButton {
        height: 8vw;
        font-size: 3vw;
    }

    .payMode {
        height: 8vw;
        font-size: 3vw;
        line-height: 8vw;
        margin-top: 3vw;
    }

    .msgClass {
        font-size: 5vw;
    }

    .btnClass {
        margin-top: 10vw;
    }

    .btnClass2 {
        margin-top: 4vw;
    }

    #payselMessage {
        font-size: 3vw;
    }

    #payselWarningTitle {
        font-size: 3vw;
    }

    #payselWarning {
        font-size: 3vw;
    }
}

#payQRHead {
    width: 100%;
    height: 12vw;
    display: flex;
    background-color: #eef0ef;
    margin-top: 0;
    position: fixed;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
}

.payQRSpacer {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#payQRHead .button.area {
    height: 10vw;
    bottom: 0;
    top: 0;
    display: unset;
    width: 14vw;
    margin: auto 1vw;
}

#payQRHead .button.image {
    width: 14vw;
    height: 7vw;
    background-size: 7vw;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#payQRHead .button.title {
    font-size: 2.5vw;
    color: #312f30;
    width: 14vw;
    height: 3vw;
    text-align: center;
    margin: 0.5vw 0 0 0;
    pointer-events: none;
}

#payQRHead svg {
    width: 7vw;
    height: 7vw;
    margin: 0 3.5vw;
}

#payQRHead svg .st0 {
    fill: #383636;
    stroke: #383636;
}

#payQRMain {
    margin-top: 12vw;
    height: calc(100% - 12vw);
    background-color: #ffffff;
    overflow-y: auto;
}

#payQRMessage1 {
    margin: 8vh 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 7vw;
    font-weight: 700;
    color: #a11e2c;
}

#payQRCodeContainer {
    margin-bottom: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20%;
}

#payQRMessage2 {
    margin-bottom: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 7vw;
    line-height: 1.5;
    font-weight: 700;
    color: #a11e2c;
}

/* 受付番号 start */
#payQRCallnoContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000000;
    font-size: 8vw;
}

#payQRCallnoTitle {
    font-weight: 500;
    margin-bottom: 1.5vh;
}

#payQRCallno {
    font-weight: 700;
}

/* 受付番号 end */

/* アラカルトメニューを選択した場合のメッセージ */

@media screen and (orientation: landscape) {
    #payQRHead {
        height: 6vw;
    }

    #payQRHead .button.area {
        width: 10vw;
    }

    #payQRHead .button.image {
        height: 3vw;
        background-size: 3vw;
        width: 10vw;
    }

    #payQRHead img {
        margin: 0 0.5vw;
        height: 3vw;
    }

    #payQRHead svg {
        height: 3vw;
    }

    #payQRHead .button.title {
        font-size: 1.5vw;
        height: 1.5vw;
    }

    #payQRMain {
        margin-top: 6vw;
        height: calc(100% - 6vw);
        background-color: #ffffff;
    }

    #payQRTitle {
        font-size: 4vw;
    }

    #payQRNotice {
        font-size: 4vw;
    }

    #payQROdseqContainer {
        font-size: 4vw;
    }
}
#payOk {
    z-index: 9000;
    overflow-y: auto;
}

#payOkContent {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
    border-radius: 1vw;
    box-shadow: 0.5vw 0.5vw 0.5vw rgba(000, 000, 000, 0.3);
    border: solid 1px rgba(0, 0, 0, 0);
}

#payOkHeader {
    z-index: 9999;
    width: 100%;
    height: 12vw;
    display: flex;
    background-color: #eef0ef;
    margin-top: 0px;
    box-shadow: rgb(25 60 77 / 40%) 0px 0.75vw 2vw -0.25vw;
}

#payOkClose {
    width: fit-content;
    position: absolute;
    display: none;
}

#payOkCloseButtonImage {
    width: 8vw;
    height: 8vw;
}

#payOk #payOkOrderMsg {
    color: #a11e2c;
    font-weight: bold;
    margin: 4vw 0 2vw 4vw;
    background: url("/_img/icon/i_soushin.svg");
    background-repeat: no-repeat;
    padding-left: 10vw;
    background-size: 6vw;
    font-size: 4vw;
    line-height: 6vw;
    width: 85vw;
}

#payOk #payOkMail {
    border-radius: 2vw;
    background-color: #f3ebeb;
    width: 90vw;
    margin: 2vw 4vw 4vw 4vw;
}

#payOk #payOkUnKnow {
    border-radius: 2vw;
    background-color: #f3ebeb;
    width: 90vw;
    margin: 2vw 4vw 4vw 4vw;
}

#payOk #payOkUnKnow > div {
    text-align: left;
    padding: 4vw;
}

#payOk #payOkUnKnow > div > div {
    padding: 1vw;
}

#payOk #payOkUnKnow #payOkUnKnowTenNm,
#payOkUnKnowTelNo,
#payOkUnKnowNo {
    font-size: 3vw;
    color: black;
}
#payOk #payOkUnKnow #payOkUnKnowNoMsg,
#payOkUnKnowTenNmMsg,
#payOkUnKnowTelNoMsg {
    font-weight: bold;
}

#payOk #payOkUnKnow {
    display: none;
}

#payOk #payOkMailMsg {
    text-align: left;
    padding: 4vw 4vw 0vw 4vw;
}

#payOk #payOkMailImg {
    width: 80vw;
    height: 20vw;
    margin: 1vw 4vw;
}

#payOk #payOkPick {
    width: 72vw;
    margin-left: 9vw;
    border-radius: 1vw;
    border: 0.5vw solid gray;
}

#payOk #payOkPickNoMsg {
    text-align: center;
    font-weight: bold;
    padding-top: 4vw;
}

#payOk #payOkPickNo {
    text-align: center;
    font-weight: bold;
    padding: 4vw 0;
    font-size: 10vw;
    color: black;
}

#payOk #payOkPickTitleMsg {
    color: #a11e2c;
    width: 80vw;
    margin: 4vw 10vw;
    font-size: 4.5vw;
    font-weight: bold;
}

#payOk #payOkPickMsg {
    width: 60vw;
    margin: 2vw 20vw;
    font-size: 3vw;
}

#payOk #payOkPickInfo {
    border-bottom: 0.5vw solid lightgray !important;
    width: 90vw;
    margin-left: 4vw !important;
}

#payOk #payOkOrderInfo {
    font-size: 3vw;
    padding-left: 2vw 4vw;
}

#payOk #payOkOrderInfo > div {
    margin: 3vw 4vw;
}

#payOk #payOkOrderInfo > div > div {
    margin: 2vw;
}

#payOk #payOkPickTimeHHMM,
#payOkTenpoNmDetail {
    font-weight: bold;
    font-size: 6vw;
}

#payOkOk,
#payOkConfirm {
    display: none;
    height: 12vw;
    width: 80vw;
    left: 0px;
    right: 0px;
    background-color: #a11e2c;
    color: rgb(255, 255, 255);
    font-size: 4vw;
    box-shadow: rgba(25, 60, 77, 0.4) 0px 0.75vw 2vw -0.25vw;
    margin: 5vw 10vw;
    border-radius: 4px;
}

#payOkConfirm {
    display: none;
    margin-top: 10vw;
}

#noticeContent.payok #noticeYes {
    background-color: #a11e2c;
}

/* reservation */

#reservation {
    z-index: 6000;
    width: 100%;
    height: 100%;
}

#reservationContent {
    position: absolute;
    width: calc(100% - 6vw);
    height: fit-content;
    margin-top: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 2vw;
    background-color: white;
    transform-origin: 100% 0;
    padding: 4vw;
}

#reservation .dialog-header {
    width: 100%;
    margin-bottom: 2vw;
    position: relative;
    height: 4vw;
}

#reservation .dialog-header-title {
    position: relative;
    width: 100%;
    height: fit-content;
    text-align: center;
    left: 0;
    top: 0;
    font-size: 3.5vw;
    font-weight: bold;
}

#reservation .dialog-button-close {
    width: min-content;
    left: -2vw;
    top: -2vw;
    position: absolute;
    height: 6vw;
    overflow: visible;
}

#reservation .dialog-button-close-image {
    height: 6vw;
}

#reservation .dialog-body {
    margin: 4vw 0;
}

#reservationReception {
    margin-bottom: 3vw;
}

#reservationReceptionButtons {
    display: inline-block;
    margin-top: 10px;
    width: 100%;
}

#reservationDate {
    float: left;
    width: 50% !important;
}

#reservationTime {
    float: right;
    margin-right: 10px;
}

#reservationReception button {
    border-radius: 1vw;
    border: 1px solid #e32f2f;
    background-color: white;
    color: #000;
    font-size: 4vw;
    text-align: center;
    padding: 4vw;
    box-shadow: rgba(25, 60, 77, 0.4) 0px 0.75vw 2vw -0.25vw;
    margin: 1vw;
    height: auto;
}

#reservationMessage {
    margin: 2vw 0 0 2.5%;
    font-size: 4vw;
    padding: 5px 0px;
    line-height: 1.1;
}

#reservationEnail {
    width: calc(100% - 4vw);
    padding: 10px;
    margin: 2vw;
    font-size: 4vw;
}

#reservationSendButton {
    width: 100%;
    height: 12vw;
    background-color: #a11e2c;
    color: white;
    font-size: 4vw;
    font-weight: bold;
    box-shadow: rgba(25, 60, 77, 0.4) 0px 0.75vw 2vw -0.25vw;
    border-radius: 4px;
    margin: auto;
}

#reservationSendButton:disabled {
    background-color: lightgray;
}

#reservationWarningTitle {
    margin: 2vw auto;
    font-size: 4vw;
    width: 95%;
}

#reservationWarning {
    margin: 1vw auto;
    font-size: 4vw;
    width: 95%;
    line-height: 1.1;
}

#reservationWarning2 {
    margin: 3vw auto;
    font-size: 4vw;
    width: 95%;
    line-height: 1.1;
}

#reservationReceptionButtons select {
    width: 45%;
    height: 50px;
    border-radius: 8px;
    padding: 0 10px;
    background-color: white;
    font-size: 4vw;
}

@media screen and (orientation: landscape) {
    #reservationMessage {
        font-size: 3vw;
    }
    #reservationWarningTitle {
        font-size: 3vw;
    }
    #reservationWarning {
        font-size: 3vw;
    }
}

/* listDialog */

#listDialog {
    z-index: 6000;
    width: 100%;
    height: 100%;
}

#listDialog ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#listDialogContent {
    background-color: white;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#listDialogTitle {
    height: 12vw;
    background-color: lightgray;
    box-shadow: rgba(25, 60, 77, 0.4) 0px 0.75vw 2vw -0.25vw;
}

#listDialogList {
    flex: 1;
    overflow-y: scroll;
}

#listDialogContent li {
    height: 10vw;
    font-size: 4vw;
    border-bottom: 2px solid gray;
    vertical-align: middle;
    text-align: center;
    line-height: 10vw;
}

#listDialog .dialog-button-close {
    width: 6vw;
    margin: 0 2vw;
}

#listDialog .dialog-button-close-image {
    height: 6vw;
}

/* lang */

#lang {
    z-index: 9999;
    width: 100%;
    height: 100%;
}

#langHeader {
    width: 100%;
    margin-bottom: 2vw;
    position: relative;
    height: 8vw;
}

#langCloseButton {
    width: fit-content;
    /* left: -2vw;
    top: -2vw; */
    position: absolute;
}

#langCloseButtonImage {
    width: 8vw;
    height: 8vw;
}

#langTitle {
    text-align: center;
    font-size: 6vw;
}

#langContent {
    width: 90%;
    height: fit-content;
    background-color: white;
    padding: 2vw;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 1vw;
}

#langContent .langButtonArea {
    width: 80%;
    margin: 2vw auto;
}

#langContent .langButton {
    font-size: 6vw;
    height: 12vw;
    background-color: #fafafa;
    border-radius: 1vw;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
}

#langContent .langButton.selected {
    /* background: lightgreen; */
    background-color: orange;
    color: white;
    box-shadow: none;
}

@media screen and (orientation: landscape) {
    #langHeader {
        margin-bottom: 1vw;
        height: 4vw;
    }

    #langCloseButtonImage {
        height: 4vw;
    }

    #langTitle {
        font-size: 4vw;
    }

    #langContent {
        width: 60%;
        padding: 1vw 2vw;
    }

    #langContent .langButtonArea {
        margin: 1vw auto;
    }

    #langContent .langButton {
        font-size: 4vw;
        height: 6vw;
        box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
    }
}

/* callstaff */

#callstaff {
    z-index: 9999;
    width: 100%;
    height: 100%;
}

#callstaffContent {
    position: absolute;
    width: calc(100% - 10vw);
    height: fit-content;
    margin-top: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 2vw;
    background-color: white;
    /* padding: 4vw; */
    transform-origin: 100% 0;
}

#callstaffContent > div {
    margin: 4vw;
}

#callstaffCalling {
    display: none;
    margin-bottom: 8vw;
}

#callstaffCallingImage {
    width: auto;
    height: 40vw;
    /* background-image: url(/_img/btn/com/gray_call.svg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30vw;
}

#callstaffCallingTitle {
    text-align: center;
    font-size: 4vw;
    font-weight: bold;
    margin-bottom: 2vw;
}

#callstaffCallingSubtitle {
    text-align: center;
    font-size: 3.5vw;
}

#callstaffHeader {
    width: 100%;
    margin-bottom: 2vw;
    position: relative;
    height: 4vw;
}

#callstaffHeader .button-close {
    width: min-content;
    left: -2vw;
    top: -2vw;
    position: absolute;
    height: 6vw;
    overflow: visible;
}

#callstaffHeaderTitle {
    position: relative;
    width: 100%;
    height: fit-content;
    text-align: center;
    left: 0;
    top: 0;
    font-size: 3.5vw;
    font-weight: bold;
    border-bottom: 2px solid;
    border-color: #a11e2c;
    padding: 3px;
}

#callstaffCloseButton {
    width: 6vw;
}

#callstaffCloseButtonImage {
    height: 6vw;
}

#callstaffMsg {
    height: fit-content;
    font-size: 3.5vw;
    background-color: lightgray;
    padding: 1vw 1vw;
    margin-bottom: 2vw;
}

#callstaffMsg.callstaffonly {
    background-color: white;
    margin: 6vw auto 6vw;
    font-weight: bold;
    font-size: 4vw;
    text-align: center;
}

#callstaffButtonList {
    display: flex;
    justify-content: space-between;
}

#callstaff .callstaffButton {
    border: solid 1px;
    font-size: 3vw;
    line-height: 2;
    text-align: left;
    margin: 4vw 1vw;
    padding: 2vw;
    border-radius: 1vw;
    text-align: center;
}

#callstaff .callstaffButton.selected {
    background-color: #a11e2c;
    color: white;
}

#callstaff hr {
    margin-bottom: 4vw;
    border: none;
    border-top: 1px solid #8c8b8b;
    height: 1px;
}

#callstaffOKButton {
    width: 100%;
    height: 12vw;
    border-radius: 4px;
    background-color: #a11e2c;
    color: white;
    font-size: 4vw;
    font-weight: bold;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
    margin: auto;
}

#callstaffOKButton:disabled {
    background-color: lightgray;
}

@media screen and (orientation: landscape) {
    /* #callstaffContent {
        padding: 2vw 4vw;
    } */

    #callstaffContent > div {
        margin: 4vw;
    }

    /* #callstaffCalling {
        position: absolute;
        width: calc(100% - 8vw);
        height: calc(100% - 4vw);
    } */

    #callstaffCallingImage {
        height: 20vw;
        background-size: 15vw;
    }

    #callstaffCallingTitle {
        font-size: 3vw;
        margin-bottom: 1vw;
    }

    #callstaffCallingSubtitle {
        font-size: 2.5vw;
    }

    #callstaffHeader {
        margin-bottom: 1vw;
        height: 2vw;
    }

    #callstaffHeader .button-close {
        top: -1vw;
        height: 3vw;
    }

    #callstaffHeaderTitle {
        font-size: 2.5vw;
    }

    #callstaffCloseButtonImage {
        height: 3vw;
    }

    #callstaffMsg {
        font-size: 3vw;
        padding: 0.5vw 1vw;
        margin-bottom: 4vw;
    }

    #callstaff .callstaffButton {
        font-size: 2vw;
        line-height: 2;
        margin: 2vw 1vw;
        padding: 1vw 2vw;
    }

    #callstaffOKButton {
        height: 6vw;
        font-size: 3vw;
    }
}

#oauth {
    z-index: 6000;
    overflow-y: auto;
    padding: 2vh 0;
}

#oauthContent {
    width: 80vw;
    height: fit-content;
    position: unset;
    background: #fff;
    border-radius: 2vw;
    box-shadow: 0.5vw 0.5vw 0.5vw rgba(000, 000, 000, 0.3);
    border: solid 1px rgba(0, 0, 0, 0);
    padding: 4vw;
    margin: auto;
}

#oauthHeader {
    width: 100%;
    margin-bottom: 2vw;
    position: relative;
    height: 4vw;
}

/* #oauthMain {
    margin: 4vw;
} */

#oauthCloseButton {
    width: fit-content;
    left: -2vw;
    top: -2vw;
    position: absolute;
    height: fit-content;
}

#oauthCloseButtonImage {
    width: 8vw;
    height: 8vw;
}

#oauthTitle {
    text-align: center;
    font-size: 4vw;
    font-weight: bold;
}

#oauthMain {
    overflow-y: scroll;
    height: fit-content;
}

#oauthMain::-webkit-scrollbar {
    display: none;
}

#oauthLineLoginButton {
    width: 100%;
    height: fit-content;
    margin-bottom: 20px;
}

#oauthLineLoginImg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#oauthLogindButton,
#oauthWithoutUsingLineButton,
#oauthLineAddFriendButton {
    height: 12vw;
    background-color: rgb(146, 28, 47);
    color: white;
    font-size: 4vw;
    font-weight: bold;
    box-shadow: rgba(25, 60, 77, 0.4) 0px 0.75vw 2vw -0.25vw;
    border-radius: 2vw;
    width: 100%;
}

#oauthLoginTitle,
#oauthLogindTitle,
#oauthAddFriendTitle,
#oauthMessage2 {
    display: block;
    width: auto;
    line-height: 1.5;
    margin-top: 1vw;
    font-size: 3.5vw;
    padding: 0 2vw;
    height: fit-content;
    margin-bottom: 4vw;
}

#oauthMessage2 {
    margin-top: 4vw;
}

#oauthLogindImg {
    width: 20vw;
    height: 20vw;
    border-radius: 10vw;
    display: inline;
    border: 1px solid #afb8c0;
}

#oauthLogindTitle {
    display: inline;
}

#oauthLogindButton {
    margin-top: 4vw;
}

/* userSelect */

#userSelect {
    z-index: 5000;
    width: 100%;
    height: 100%;
}

#userSelectHeader {
    z-index: 5001;
    width: 100%;
    height: 12vw;
    display: flex;
    background-color: rgb(146, 28, 47);
    margin-top: 0px;
    position: fixed;
    box-shadow: rgba(25, 60, 77, 0.4) 0px 0.75vw 2vw -0.25vw;
}

#userSelectHeader .button.area {
    display: unset;
    width: 14vw;
    height: 10vw;
    margin-top: auto;
    margin-bottom: auto;
    bottom: 0;
    top: 0;
    margin-right: 1vw;
    margin-left: 1vw;
}

#userSelectHeader .button.image {
    width: 14vw;
    height: 7vw;
    background-size: 7vw;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#userSelectHeader img {
    margin: 0 3.5vw;
    height: 7vw;
}

#userSelectHeader .button.title {
    font-size: 2.5vw;
    color: white;
    width: 14vw;
    height: 3vw;
    text-align: center;
    margin: 0.5vw 0 0 0;
    pointer-events: none;
}

#userSelectHeader .userSelectSpacer {
    flex: 1;
}

#userSelectContent {
    z-index: 5000;
    margin-top: 12vw;
    padding: 4vw;
    background-color: white;
    width: 100%;
    height: calc(100% - 12vw);
    display: flex;
    flex-flow: column;
    overflow-y: auto;
    position: fixed;
}

#userSelectLabelArea {
    display: flex;
    align-items: center;
}

#noticeContent.userSelectEditName .label1,
#userSelectLabel {
    flex: 1;
    font-size: 3vw;
    font-weight: bold;
    color: black;
}

#noticeContent.userSelectEditName .label2,
#userSelectLabel2 {
    font-size: 3vw;
    margin: 4vw 0 0 0;
}

#noticeContent.userSelectEditName #noticeNo {
    background-color: white;
    color: black;
}

#noticeContent.userSelectEditName #noticeYes {
    background-color: rgb(146, 28, 47);
    color: white;
}

#userSelectSkipButton {
    width: 25vw;
    height: 8vw;
    font-size: 3vw;
    box-shadow: rgb(25 60 77 / 40%) 0px 0.75vw 2vw -0.25vw;
    border-radius: 1vw;
    font-weight: bold;
}

#userSelectSkipButton {
    background-color: #a11e2c;
    color: white;
}

#userSelectTextBox {
    width: 100%;
    font-size: 4vw;
    padding: 2vw;
    margin: 2vw 0 4vw 0;
    background-color: rgb(232, 240, 254);
    border-radius: 1vw;
    border-color: gray;
    border-width: thin;
    border-style: solid;
}

#userSelectSelectedArea {
    margin-top: 8vw;
}

#userSelectMessage1 {
    font-weight: bold;
}

#userSelectMessage1,
#userSelectMessage2 {
    font-size: 3vw;
    color: black;
    margin: 1vw 0;
}

#userSelect hr {
    margin: 2vw 0;
    border: solid;
    border-width: thin;
    border-color: lightgray;
}

#userSelectListArea {
    margin: 4vw 0;
}

#userSelect .userSelectUserItem {
    display: flex;
    align-items: center;
    margin: 2vw 0;
}

#userSelect .userSelectUserName {
    flex: 1;
    font-size: 4vw;
    font-weight: bold;
    color: black;
}

#userSelect .userSelectUserItem > button {
    width: 20vw;
    height: 8vw;
    font-size: 3vw;
    box-shadow: rgb(25 60 77 / 40%) 0px 0.75vw 2vw -0.25vw;
    border-radius: 1vw;
    font-weight: bold;
    margin: 0 0.5vw;
}

#userSelect .userSelectEditNameButton {
    background-color: #a11e2c;
    color: white;
}

#userSelect .userSelectSelectButton.selected {
    background-color: #a11e2c;
    color: white;
}

#userSelectListArea button:disabled {
    color: white;
    font-weight: bold;
    background-color: #cccccc;
    box-shadow: none;
}

#userSelectOkButton {
    padding: 4vw;
    width: 100%;
    height: 12vw;
    left: 0px;
    right: 0px;
    background-color: rgb(206, 88, 107);
    color: rgb(255, 255, 255);
    font-size: 4vw;
    box-shadow: rgba(25, 60, 77, 0.4) 0px 0.75vw 2vw -0.25vw;
    margin: 0px auto;
    border-radius: 4px;
}

#userSelectOkButton:disabled {
    box-shadow: none;
    background-color: #cccccc;
}

.userSelectConfirmation button#noticeYes {
    background-color: #a11e2c;
}

/* selectPersonPay */

#selectPersonPay {
    z-index: 6200;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#selectPersonPayContent {
    background-color: white;
    width: -webkit-fill-available;
    height: fit-content;
    margin: 2vw;
    border-radius: 1vw;
    padding: 4vw;
}

#selectPersonPayHeader {
    width: 100%;
    margin-bottom: 2vw;
    position: relative;
    height: 8vw;
}

#selectPersonPayCloseButton {
    width: fit-content;
    left: -2vw;
    top: -2vw;
    position: absolute;
}

#selectPersonPayCloseButtonImage {
    width: 8vw;
    height: 8vw;
    pointer-events: none;
}

#selectPersonPayTitle {
    font-size: 3.5vw;
    font-weight: bold;
}

#selectPersonPaySubTitle {
    font-size: 3vw;
    margin: 2vw 0;
}

#selectPersonPayTotalArea {
    display: flex;
    align-items: center;
    margin: 4vw 0;
}

#selectPersonPayTotalLabel {
    font-size: 3vw;
    font-weight: bold;
}

#selectPersonPayTotal {
    flex: 1;
    font-size: 5vw;
    font-weight: bold;
    text-align: right;
}

#selectPersonPayContent .area {
    display: flex;
    align-items: center;
    margin: 4vw 0;
}

#selectPersonPayContent .label {
    font-size: 3vw;
    font-weight: bold;
}

#selectPersonPayContent .price {
    flex: 1;
    font-size: 5vw;
    font-weight: bold;
    text-align: right;
}

#selectPersonPayContent .msgCaution2 {
    width: 100%;
    font-size: 3vw;
    line-break: anywhere;
    padding: 2vw 2vw;
    color: black;
    text-align: center;
    font-weight: bold;
    margin-top: 2vw;
}

#selectPersonPayListArea .selectPersonPayItem {
    display: flex;
    align-items: center;
    border-style: solid;
    border-width: thin;
    border-radius: 2vw;
    padding: 1vw;
    margin: 2vw 0;
}

#selectPersonPayListArea .selectPersonPayItem.oneself {
    margin-bottom: 8vw;
}

#selectPersonPayListArea .selectPersonPayItem .checkbox {
    width: 5vw;
    height: 5vw;
    border-style: solid;
    border-width: thin;
    border-color: black;
    margin: 0.5vw;
    color: white;
    background-size: contain;
    pointer-events: none;
}

#selectPersonPayListArea .selectPersonPayItem .checkbox img {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#selectPersonPayListArea .selectPersonPayItem.checked .checkbox {
    background-color: rgb(206, 88, 107);
}

#selectPersonPayListArea .selectPersonPayItem.checked.oneself .checkbox,
#selectPersonPayListArea .selectPersonPayItem.checked.disabled .checkbox {
    background-color: black;
}

#selectPersonPayListArea .selectPersonPayItem.disabled {
    opacity: 0.5;
}

#selectPersonPayListArea .selectPersonPayItem .name {
    flex: 1;
    font-size: 4vw;
    pointer-events: none;
}

#selectPersonPayListArea .selectPersonPayItem .price {
    width: 20vw;
    text-align: right;
    font-size: 4vw;
    pointer-events: none;
}

#selectPersonPayOkButton {
    height: 12vw;
    width: 100%;
    left: 0px;
    right: 0px;
    background-color: rgb(146, 28, 47);
    color: rgb(255, 255, 255);
    font-size: 4vw;
    box-shadow: rgba(25, 60, 77, 0.4) 0px 0.75vw 2vw -0.25vw;
    margin: 0px auto;
    border-radius: 4px;
    margin-top: 4vw;
}

#selectPersonPayOkButton:disabled {
    box-shadow: none;
    background-color: #cccccc;
}

/* CourseSelect */
/* 機能ボタンエリア start */
#courseSelectTop {
    z-index: 9999;
    width: 100%;
    height: 12vw;
    display: flex;
    background-color: #eef0ef;
    margin-top: 0px;
    position: fixed;
    box-shadow: rgba(25, 60, 77, 0.4) 0px 0.75vw 2vw -0.25vw;
    bottom: 0;
}

#courseSelectMenuArea {
    left: 0;
    width: 16vw;
}

#courseSelectMenuArea .button.area {
    display: unset;
    width: 14vw;
}

#courseSelectTop .button.image {
    width: 14vw;
    height: 70%;
    background-size: 7vw;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#courseSelectTop .button.title {
    font-size: 2.5vw;
    color: #312f30;
    width: 14vw;
    height: 30%;
    text-align: center;
    margin: 0.5vw 0 0 0;
}

#courseSelectTop img {
    margin: 0 3.5vw;
    height: 70%;
}

#courseSelectCallArea {
    margin-left: 73vw;
}

/* 機能ボタンエリア end */

/* 共通のスタイル start */
#courseSelect {
    z-index: 3000;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background-color: rgb(255, 255, 255);
}

#courseSelectSection {
    height: 93%;
    padding-left: 2vw;
    padding-right: 2vw;
}

#courseSelectHead {
    height: 8%;
    padding-top: 4%;
}

#courseSelectTitle {
    font-size: 4vw;
    font-weight: bold;
    padding: 0px 2vw;
    min-height: 3%;
}

#courseSelectTitleHr {
    height: 2px;
    border: none;
    border-top: 2px solid;
    border-color: #dddddd;
}

#courseSelectTop svg {
    width: 7vw;
    height: 7vw;
    margin: 0 3.5vw;
}

#courseSelectTop svg .st0 {
    fill: #383636;
    stroke: #383636;
}

#courseSelectBody {
    height: 80%;
}

#courseSelectFootMsg {
    height: 6%;
    align-items: end;
    justify-content: center;
    font-size: 3.5vw;
}

#courseSelectFoot {
    height: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#courseSelectNextBtn {
    /* border: 2px solid #a11e2c;
    border-radius: 12vw;
    background: linear-gradient(360deg, #f1d2d7, white 60%);
    font-size: 4vw;
    font-weight: bold;
    color: #a11e2c;
    box-shadow: rgba(25, 60, 77, 0.4) 0px 0.75vw 2vw -0.25vw; */
    background-color: #a11e2c;
    width: 77vw;
    height: 50%;
    margin: 4vw;
    border-radius: 2vw;
    font-size: 5vw;
    color: white;
}

#courseSelectNextBtn:disabled {
    background: #d3d3d3;
    color: white;
    border: 2px solid #d3d3d3;
}

/* 共通のスタイル end */

/* 年齢区分用 start */
#courseAgekbList {
    height: 100%;
    overflow: scroll;
}

.courseSelectAgekbArea {
    margin-bottom: 6%;
    margin-top: 6%;
}

#customerAgekbMessage1 {
    /* height: 4%; */
    font-size: 3vw;
}

.customerAgekbItem {
    display: flex;
    height: 14%;
    align-items: center;
}

.customerAgekbName {
    font-size: 3.8vw;
    font-weight: bold;
    padding: 0px 2vw;
    width: 76vw;
}

.customerAgeNumSpan {
    width: 7vw;
    text-align: center;
    font-size: 4vw;
    font-weight: bold;
}

#customerAgekbTotalArea {
    display: flex;
    align-items: center;
    height: 4%;
}

#customerAgekbMessage3 {
    height: 5%;
    margin-top: 1%;
}

#customerAgekbTotalMsg {
    height: 2%;
    width: 80vw;
    font-size: 3.8vw;
    font-weight: bold;
    padding: 0px 2vw;
}

#customerAgekbTotal {
    font-size: 3.8vw;
    font-weight: bold;
    padding: 0px 2vw;
}

.agekbNumBtn {
    width: 8vw;
    height: 7vw;
    font-size: 6vw;
    border: 1px solid gray;
    border-radius: 4px;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.agekbNumBtn:disabled {
    background-color: #d3d3d3;
    border-color: #d3d3d3;
}

.agekbDecrementBtn svg {
    /* background-image: url("/_img/btn/com/remove-outline.svg"); */
    width: 7vw;
    height: 7vw;
    pointer-events: none;
}

.agekbIncrementBtn svg {
    /* background-image: url("/_img/btn/com/add-outline.svg"); */
    width: 7vw;
    height: 7vw;
    pointer-events: none;
}

/* 年齢区分用 end */

/* コース選択画面共通 start */
.courseSelectList {
    height: 100%;
    overflow: scroll;
}

.courseSelectItem {
    display: flex;
    min-height: 12%;
    align-items: flex-start;
}

.drinkCourseItem {
    margin-left: 10vw;
}

.courseSelectRadioArea {
    width: 13vw;
    height: 10%;
}

.courseSelectImgArea {
    width: 24vw;
    text-align: center;
}

.courseSelectImg {
    width: 22vw;
    height: calc(22vw * 9 / 16);
    /* border-radius: 1vw 1vw 0 0; */
    vertical-align: bottom;
}

.courseSelectInfoArea {
    display: flex;
    flex-direction: column;
    width: 46vw;
    padding-left: 2vw;
    padding-right: 2vw;
}

.courseSelectDetailBtnArea {
    padding-top: 3%;
}

.courseSelectDetailBtn {
    width: 14vw;
    height: 14vw;
    border: 2px solid #a11e2c;
    border-radius: 2vw;
    background-color: #a11e2c;
    color: #ffffff;
    font-size: 4vw;
}

#courseSelect .courseSelectCourseNm {
    font-size: 4vw;
    font-weight: bold;
    padding-bottom: 12%;
}

#courseSelect .courseSelectItemHr {
    margin-bottom: 2%;
    margin-top: 2%;
}

.courseTankaDiv {
    display: flex;
}

.courseTankaAgekb {
    height: 2.5%;
    font-size: 3vw;
    padding-bottom: 3%;
    width: 16vw;
}

.courseTankaItem {
    height: 2.5%;
    font-size: 3vw;
    padding-bottom: 3%;
    text-align: right;
    width: 22vw;
}

#courseSelect input[type="radio"] {
    display: none;
}

#courseSelect input[type="radio"]+label {
    position: relative;
    color: #333;
    font-weight: normal;
    left: 2vw;
}

#courseSelect input[type="radio"]+label::before {
    content: "";
    width: 7vw;
    height: 7vw;
    border-radius: 10vw;
    border: 2px solid #a1a1a1;
    position: absolute;
    left: 0;
    background: linear-gradient(360deg, #ebebeb, white 100%);
}

#courseSelect input[type="radio"]:checked+label::before {
    border: 2px solid #a11e2c;
}

#courseSelect input[type="radio"]:checked+label::after {
    content: "";
    background-color: #a11e2c;
    width: 3.5vw;
    height: 3.5vw;
    border-radius: 12px;
    position: absolute;
    transform: translate(50%, 50%);
    left: 50%;
    top: 50%;
}

#courseSelect .courseRadioItem {
    display: flex;
    height: 10%;
    align-items: center;
}

/* コース選択画面共通 start */

/* 飲み放題 start */
#drinkCourseNoticeMsg {
    font-size: 3.5vw;
    color: red;
    margin-bottom: 5%;
}

.drinkcourseImgArea {
    width: 28vw;
}

.drinkCourseInfoArea {
    width: 55vw;
    padding-right: 2vw;
    padding-right: 2vw;
}

.drinkNumSpanArea {
    display: flex;
    align-items: center;
    /* margin-top: 1%; */
    margin-bottom: 3%;
}

.drinkCourseNumSpan {
    min-width: 5vw;
    text-align: center;
    font-size: 3.5vw;
}

.drinkNumBtn {
    width: 7vw;
    height: 7vw;
    font-size: 6vw;
    border: 1px solid gray;
    border-radius: 4px;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.drinkNumBtn:disabled {
    background-color: #d3d3d3;
    border-color: #d3d3d3;
}

.drinkDecrementBtn svg {
    /* background-image: url("/_img/btn/com/remove-outline.svg"); */
    width: 7vw;
    height: 7vw;
    pointer-events: none;
}

.drinkIncrementBtn svg {
    /* background-image: url("/_img/btn/com/add-outline.svg"); */
    width: 7vw;
    height: 7vw;
    pointer-events: none;
}

.drinkCourseRadioArea {
    width: 13vw;
    height: 50%;
}

.courseSelectAlcoholChkMsg {
    margin-left: 10vw;
    font-size: 3.5vw;
    color: red;
    margin-top: 2%;
}

#noDrinkCourseTanka {
    text-align: left;
}

/* 飲み放題 end */

/* その他放題　start */
.otherCourseRadioArea {
    width: 13vw;
    height: 50%;
}

.otherCourseItem {
    margin-left: 10vw;
}

/* その他放題　end */

/* スープ start */

#soupCourseList {
    overflow: scroll;
    max-height: 100%;
}

.courseSelectSoupList {
    display: flex;
    flex-flow: wrap;
}

.courseSelectSoupList .courseSelectSoupItem {
    overflow: hidden;
    width: 30vw;
    margin: 1vw;
    border-radius: 1vw;
    box-shadow: 0 0.5vw 1vw -0.25vw hsl(200 50% 20% / 40%);
    position: relative;
}

.courseSelectSoupList .courseSelectSoupBlank {
    overflow: hidden;
    width: 30vw;
    height: 25vw;
    margin: 1vw;
    border-radius: 1vw;
}

.courseSelectSoupList .courseSelectSoupImage {
    width: 30vw;
    height: calc(30vw * 9 / 16);
    border-radius: 1vw 1vw 0 0;
    vertical-align: bottom;
}

.courseSelectSoupList .courseSelectSoupNmArea {
    font-size: 3vw;
    font-weight: bold;
    padding: 2vw 1vw;
    text-align: center;
    overflow-wrap: break-word;
    line-height: 1.5;
    overflow: hidden;
    background-color: white;
}

.soupCategoryName {
    height: fit-content;
    font-size: 4vw;
    background-color: lightgray;
    padding: 1vw 1vw;
    margin-bottom: 2vw;
    overflow-wrap: break-word;
    width: 96vw;
}

.soupItemSelected {
    border: 3px solid #a11e2c;
    background-color: #a11e2c;
}

.soupItemSelected .courseSelectSoupNmArea {
    background-color: #a11e2c;
    color: white;
}

.courseSelectSoupShinagireImage {
    width: 30vw;
    height: calc(30vw * 9 / 16);
    border-radius: 1vw 1vw 0 0;
    vertical-align: bottom;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.soupItemShinagire .courseSelectSoupShinagireImage {
    display: block;
}

/* スープ end */

/* 230925 gai コース分類選択 start */
.courseBunruiSpanArea {
    display: flex;
    align-items: center;
    /* margin-top: 1%; */
    margin-bottom: 3%;
}

.courseBunruiDecrementBtn {
    background-image: url("../../_img/btn/com/remove-outline.svg")
}

.courseBunruiIncrementBtn {
    background-image: url("../../_img/btn/com/add-outline.svg")
}

.courseBunruiBtn {
    width: 7vw;
    height: 7vw;
    font-size: 6vw;
    border: 1px solid gray;
    border-radius: 4px;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.courseBunruiBtn:disabled {
    background-color: #d3d3d3;
    border-color: #d3d3d3;
}

.courseBunruiNumSpan {
    min-width: 5vw;
    text-align: center;
    font-size: 3.5vw;
}

/* 230925 gai コース分類選択 end */
/* courseDetailImg */

#courseDetailImg {
    z-index: 5000;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: scroll;
    padding: 2vw 0;
}

#courseDetailImgBox {
    position: absolute;
    width: calc(100% - 4vw);
    height: fit-content;
    /* margin-top: auto; */
    margin-left: auto;
    margin-bottom: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 3vh;
    bottom: 0;
    border: solid 1px rgba(0, 0, 0, 0);
    border-radius: 2vw;
    background-color: white;
    /* padding: 4vw; */
    transform-origin: 100% 0;
}

#addMenuBox>div {
    margin: 4vw;
}

#courseDetailImgHeader {
    width: 100%;
    margin-bottom: 2vw;
    position: relative;
    height: 4vh;
}

#courseDetailImgHeader div {
    width: min-content;
    position: absolute;
}

#courseDetailImgCloseButton {
    width: 6vw;
}

#courseDetailImgCloseButtonImage {
    height: 6vw;
}

#courseDetailImgContent {
    height: fit-content;
    max-height: 80vh;
}

#courseDetailImageDiv {
    width: 88vw;
    /* height: calc(88vw * 9 / 16); */
    margin-bottom: 4vw;
    max-height: 70vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
    overflow: scroll;
}

#courseDetailImgImage {
    /* height: fit-content; */
    width: 88vw;
}

#courseDetailImgFooter {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 8vh;
    text-align: center;
}

#courseDetailImgFootCloseBtn {
    background-color: #a11e2c;
    width: 77vw;
    border-radius: 2vw;
    height: 6vh;
    font-size: 4vw;
    font-weight: bold;
    color: #ffffff;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
}

@media screen and (orientation: landscape) {}
/* courseConfirm */
#courseConfirmBox {
    position: absolute;
    width: calc(100% - 4vw);
    height: fit-content;
    /* margin-top: auto; */
    margin-left: auto;
    margin-bottom: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 3vh;
    bottom: 0;
    border: solid 1px rgba(0, 0, 0, 0);
    border-radius: 2vw;
    /* background-color: white; */
    /* padding: 4vw; */
    transform-origin: 100% 0;
}

#courseConfirmHeader {
    width: 100%;
    position: relative;
    height: 7vh;
    background-color: #a11e2c;
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

#courseConfirmTitle {
    font-size: 4.5vw;
    color: white;
}

#courseConfirmContent {
    /* height: 75vh; */
    background: white;
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
}

#courseConfirmInfoArea {
    /* padding-top: 3vh; */
    height: 67vh;
    font-size: 3vw;
}

#courseConfirmDetailArea {
    max-height: 55vh;
    overflow: scroll;
}

/* 年龄区分用 */
#courseConfirmAgekbArea {
    display: flex;
}

#courseConfirmAgekbInfo {
    display: flex;
    flex-direction: column;
    font-size: 3.5vw;
    font-weight: bold;
}

/* course 共通 */
.courseConfirmAge {
    margin-top: 8px;
}

.courseConfirmTanka {
    margin-top: 8px;
}

.courseConfirmNum {
    margin-top: 8px;
}

/* course 共通 */

/* food用 */

.courseConfirmTitleArea {
    display: flex;
}

.courseConfirmNmTitle {
    font-size: 3.5vw;
    font-weight: bold;
    margin-left: 2vw;
    margin-right: 3vw;
}

#courseConfirmFoodNm {
    font-size: 3.5vw;
    font-weight: bold;
}

#confirmDrinkCourseNm {
    font-size: 3.5vw;
    font-weight: bold;
}

.courseConfirmInfoArea {
    display: flex;
}

.courseConfirmAgeArea {
    display: flex;
    flex-direction: column;
    width: 30vw;
    margin-left: 8vw;
    justify-content: space-around;
}

#courseConfirmDrinkCourseNm {
    font-size: 3.5vw;
    font-weight: bold;
}

.confirmCoursePriceArea {
    display: flex;
    flex-direction: column;
    width: 40vw;
    align-items: flex-end;
    justify-content: space-around;
}

.confirmCourseNumberArea {
    display: flex;
    width: 40vw;
    align-items: flex-end;
    flex-direction: column;
    margin-right: 4vw;
    font-size: 3vw;
    justify-content: space-around;
}

/* food用 */

.courseConfirmArea {
    margin-top: 3vh;
}

/* soup用 */

#courseConfirmSoupArea {
    display: flex;
}

#courseConfirmSoupInfo {
    display: flex;
    flex-direction: column;
    font-size: 3.5vw;
    font-weight: bold;
    width: 55%;
}

#courseConfirmSoupNumberInfo {
    display: flex;
    flex-direction: column;
    font-size: 3vw;
    width: 10%;
    align-items: flex-end;
    margin-left: auto;
    margin-right: 4vw;
}

/* soup用 */

/* drink用 */
.drinkCourseItemName {
    font-size: 3.5vw;
    font-weight: bold;
    margin-left: 4vw;
    margin-top: 4px;
}

.courseConfirmDrinkItemNm {
    font-size: 3.5vw;
    font-weight: bold;
}

/* drink用 */

/* その他 */
.ohterCourseItemName {
    font-size: 3.5vw;
    font-weight: bold;
    margin-left: 4vw;
}

/* その他 */

.courseConfirmTitleHr {
    margin-top: 0vw;
    border: 1px solid #a11e2c;
}

/* 合計 */

#courseTotleHr {
    margin-top: 2vh;
}

#courseTotleArea {
    display: flex;
    font-size: 3.5vw;
    font-weight: bold;
    height: 5vh;
    align-items: center;
}

#courseConfirm #courseTotleTitle {
    margin-left: 5vw;
    width: 40vw;
}

#courseConfirm #courseTotleNumber {
    width: 30vw;
}

#courseConfirm #courseTotleMoney {
    width: 30vw;
    text-align: center;
}

#courseConfirm #courseTotleArea {
    display: flex;
    font-size: 3.5vw;
    font-weight: bold;
    height: 5vh;
    align-items: center;
}

/* 合計  */

/* バタン */
#courseConfirmFooter {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 8vh;
    text-align: center;
    display: flex;
}

#courseCancelBtnArea {
    width: 50vw;
}

#courseConfirmBtnArea {
    width: 50vw;
}

#courseCancelBtn {
    border: 2px solid;
    border-color: #a11e2c;
    width: 40vw;
    color: #a11e2c;
    border-radius: 2vw;
    height: 6vh;
    font-size: 4vw;
    font-weight: bold;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
}

#courseConfirmBtn {
    border: 2px solid;
    border-color: #a11e2c;
    width: 40vw;
    border-radius: 2vw;
    height: 6vh;
    color: white;
    background-color: #a11e2c;
    font-size: 4vw;
    font-weight: bold;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
}

/* バタン */

/* メッセージ */
#courseConfirmSuccessMsgArea {
    padding-top: 6vh;
    margin-left: 4vw;
    height: 25vh;
}

#courseConfirmSuccessMsg {
    font-size: 4vw;
    /* font-weight: bold; */
    padding: 0 2vw;
    line-height: 4vh;
}

#courseConfirmSuccessBtnArea {
    text-align: center;
    width: 100%;
}

#courseConfirmSuccessBtn {
    background-color: #a11e2c;
    width: 80vw;
    border-radius: 2vw;
    height: 6vh;
    color: white;
    font-size: 4vw;
    font-weight: bold;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200deg 50% 20% / 40%);
}

#courseConfirmTotalMsg {
    margin-top: 0.5vh;
    font-size: 3.5vw;
    color: red;
    margin-left: 5vw;
}

/* メッセージ */

@media screen and (orientation: landscape) {
}

/* scanQrCode */

#scanQrCode {
    z-index: 5000;
    width: 100%;
    height: 100%;
    overflow: scroll;
    padding: 2vw 0;
}

#scanQrCodeBox {
    position: absolute;
    width: calc(100% - 4vw);
    height: fit-content;
    /* margin-top: auto; */
    margin-left: auto;
    margin-bottom: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 3vh;
    bottom: 0;
    border: solid 1px rgba(0, 0, 0, 0);
    border-radius: 2vw;
    background-color: white;
    /* padding: 4vw; */
    transform-origin: 100% 0;
}

#addMenuBox > div {
    margin: 4vw;
}

#scanQrCodeHeader {
    width: 100%;
    margin-bottom: 2vw;
    position: relative;
    height: 5vh;
}

#scanQrCodeCloseBtnArea {
    width: min-content;
    position: absolute;
}

#scanQrCodeCloseButton {
    width: 10vw;
}

#scanQrCodeTitleArea {
    font-size: 4vw;
    font-weight: bold;
    margin: 2vw 4vw 0 4vw;
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    border-color: rgb(146, 28, 47);
    border-width: 2px;
    padding: 2vw;
    text-align: center;
    height: 100%;
}

#scanQrCode .scanQrCodeNoticeMsg {
    font-size: 4vw;
    font-weight: bold;
    padding: 0 2vw;
    margin: 6vw 4vw 0 4vw;
}

#scanQrCodeCloseButtonImage {
    height: 7.5vw;
}

#scanQrCodeFootBtnArea {
    display: flex;
    justify-content: space-between;
    margin: 2vw 4vw 4vw 4vw;
    height: fit-content;
    border: 1px solid rgba(0, 0, 0, 0);
}

#scanQrCodeFootCloseBtn {
    background-color: rgb(146, 28, 47);
    color: white;
    width: 100% !important;
    height: 12vw;
    font-size: 4vw;
    border-radius: 1vw;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200deg 50% 20% / 40%);
    margin: auto;
}

/* ビデオ表示エリア */
#scanQrCodeVideoBox {
    display: flex;
    border: 12px solid black;
    width: 70%;
    margin-left: 15%;
    position: relative;
    margin-top: 10%;
    margin-bottom: 10%;
    padding: 2%;
}

#scanQrCodeBoxBlankTop {
    position: absolute;
    width: 80%;
    height: 14px;
    background-color: white;
    z-index: 100;
    left: 10%;
    top: -13px;
}

#scanQrCodeBoxBlankLeft {
    position: absolute;
    width: 14px;
    height: 80%;
    background-color: white;
    z-index: 100;
    left: -13px;
    top: 10%;
}

#scanQrCodeBoxBlankRight {
    position: absolute;
    width: 14px;
    height: 80%;
    background-color: white;
    z-index: 100;
    right: -13px;
    top: 10%;
}

#scanQrCodeBoxBlankBottom {
    position: absolute;
    width: 80%;
    height: 14px;
    background-color: white;
    z-index: 100;
    left: 10%;
    bottom: -13px;
}

#scanQrCodeVideoArea {
    width: 100%;
    overflow: hidden;
    /* border: 2px solid black; */
}

#scanQrCodeVideo {
    position: relative;
}

#scanQrCodeCanvas {
    position: relative;
}

@media screen and (orientation: landscape) {
}

/* changeTableno */

#changeTableno {
    z-index: 5000;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: scroll;
    padding: 2vw 0;
}

#changeTablenoBox {
    position: absolute;
    width: calc(100% - 4vw);
    height: fit-content;
    /* margin-top: auto; */
    margin-left: auto;
    margin-bottom: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 3vh;
    bottom: 0;
    border: solid 1px rgba(0, 0, 0, 0);
    border-radius: 2vw;
    background-color: white;
    /* padding: 4vw; */
    transform-origin: 100% 0;
}

#changeTablenoHeader {
    height: 6vh;
}

#changeTablenoBody {
    display: flex;
    flex-direction: column;
}

#changeTablenoArea {
    width: 86%;
    height: 40%;
    border: 1px solid black;
    margin: auto;
    border-radius: 4vw;
}

#changeTablenoTitle {
    font-size: 4vw;
    font-weight: bold;
    text-align: center;
    margin-top: 8%;
}

#changeTablenoContent {
    font-size: 26vw;
    font-weight: bold;
    text-align: center;
    color: black;
    margin-bottom: 8%;
    margin-top: 8%;
}

#changeTablenoMsg {
    width: 82%;
    margin: auto;
    margin-top: 10%;
    margin-bottom: 10%;
    font-size: 4vw;
    font-weight: bold;
}

#changeTablenoFootBtnArea {
    display: flex;
    justify-content: space-between;
    margin: 2vw 4vw 4vw 4vw;
    height: fit-content;
    border: 1px solid rgba(0, 0, 0, 0);
}

#changeTablenoCloseBtn {
    background-color: white;
    color: black;
    width: 48%;
    height: 12vw;
    font-size: 4vw;
    border-radius: 1vw;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200deg 50% 20% / 40%);
    margin: auto;
}

#changeTablenoChangeBtn {
    background-color: rgb(146, 28, 47);
    color: white;
    width: 48%;
    height: 12vw;
    font-size: 4vw;
    border-radius: 1vw;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200deg 50% 20% / 40%);
    margin: auto;
}

@media screen and (orientation: landscape) {
}

#soNotice {
    z-index: 9000;
    overflow-y: auto;
    /* padding: 2vh 0; */
}

#soNoticeContent {
    width: 80vw;
    height: fit-content;
    /* padding-top: 2vw;
    padding-bottom: 2vw; */
    position: unset;
    background: #fff;
    border-radius: 2vw;
    box-shadow: 0.5vw 0.5vw 0.5vw rgba(000, 000, 000, 0.3);
    border: solid 1px rgba(0, 0, 0, 0);
    margin: auto;
}

#soNoticeContent>div {
    margin: 4vw 0;
    height: fit-content;
    border: 1px solid rgba(0, 0, 0, 0);
}

#soNoticeHeaderCloseButtonImage {
    width: 6vw;
    height: 6vw;
}

#soNoticeHeaderCloseButton {
    width: fit-content;
    left: 2vw;
    position: absolute;
}

#soNoticeHeader {
    width: 100%;
    position: relative;
    height: 6vw;
}

#soNoticeMsg {
    width: auto;
    line-height: 1.5;
    margin-left: 4vw;
    margin-right: 4vw;
    margin-top: 1vw;
    margin-bottom: 1vw;
    font-size: 4vw;
    height: fit-content;
    /* min-height: 20vw; */
    /* position: relative; */
}

#soNoticeContent.showYes #soNoticeYes,
#soNoticeMsg.withoutButton {
    min-height: 0;
    font-size: 4.5vw;
    margin: 2vw auto 0 auto;
    text-align: center;
}

#soNoticeMsg.withoutButton.left {
    margin: 2vw 4vw;
    text-align: left;
}

#soNoticeClose,
#soNoticeYes,
#soNoticeNo {
    width: 47.5%;
    height: 12vw;
    font-size: 4vw;
    border-radius: 1vw;
    box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
    margin: auto;
}

#soNoticeNo {
    background-color: #a11e2c;
    color: white;
}

#soNoticeYes {
    background-color: #5e5e5e;
    color: white;
}

#soNoticeYes:disabled {
    box-shadow: none;
    background-color: #cccccc !important;
}

#soNoticeButtonList {
    display: flex;
    justify-content: space-between;
    margin: 2vw 4vw 0vw 4vw;
    height: fit-content;
    border: 1px solid rgba(0, 0, 0, 0);
}

#soNotice p {
    margin: 1vw 0;
}

#soNoticeMsg hr {
    height: 2px;
    border: none;
    border-top: 2px solid;
    border-color: #a11e2c;
    margin: 0 0 4vw 0;
}

#soNoticeContent.confirm #soNoticeMsg {
    font-size: 4vw;
    padding: 0 2vw;
    margin-bottom: 4vw;
}

/* アラカルトメニューを選択した場合のメッセージ */
.btnAlacarteNotice {
    width: 96vw !important;
}

.btnAlacarteNotice #soNoticeMsg {
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btnAlacarteNotice #soNoticeNo {
    background-color: #5e5e5e;
    color: white;
    width: 40%;
}

.btnAlacarteNotice #soNoticeYes {
    background-color: rgb(161, 30, 44);
    color: white;
    width: 40%;
}

/* アラカルトメニューを選択した場合のメッセージ */

@media screen and (orientation: landscape) {
    #soNoticeContent {
        width: 60vw;
        /* padding-top: 1vw;
        padding-bottom: 1vw; */
        border-radius: 1vw;
    }

    #soNoticeContent>div {
        margin: 2vw 0;
    }

    #soNoticeMsg {
        margin-top: 0.5vw;
        margin-bottom: 0.5vw;
        font-size: 3vw;
    }

    #soNoticeMsg.withoutButton {
        font-size: 3.5vw;
    }

    #soNoticeMsg hr {
        margin: 0 0 2vw 0;
    }

    #soNoticeClose,
    #soNoticeYes,
    #soNoticeNo {
        width: 25vw;
        height: 6vw;
        font-size: 3vw;
        border-radius: 0.5vw;
        box-shadow: 0 0.75vw 2vw -0.25vw hsl(200 50% 20% / 40%);
    }

    #soNoticeButtonList {
        margin: 1vw 4vw;
    }
}