@import url("../common/common.css"); /*共通CSS*/

/*####################################################################################################*/
/* ヘッダー */
/*####################################################################################################*/
#MainPageHeader {
    background: var(--DCL-COLOR) !important;
}

/*####################################################################################################*/
/* スクロールボタン */
/*####################################################################################################*/
#MainMoveToTop #btnMoveToTop {
    background: var(--DCL-COLOR) !important;
}

    #MainMoveToTop #btnMoveToTop:hover {
        color: var(--ITEM-HOVER-COLOR);
    }

.custom-tooltip {
    --bs-tooltip-bg: var(--DCL-COLOR);
    font-size: 12px !important;
}

    .custom-tooltip.show {
        opacity: 1;
    }

        .custom-tooltip.show ul {
            list-style: disc;
            padding: 0 0 0 20px;
        }

            .custom-tooltip.show ul li {
                margin: 0;
                padding: 0 10px 0 0;
                text-align: left;
            }

    .custom-tooltip .tooltip-inner {
        box-shadow: 3px 3px 5px #555555
    }

.custom-tooltip-cabinno {
    --bs-tooltip-bg: var(--DCL-COLOR);
    font-size: 16px !important;
    font-weight: bold;
}

    .custom-tooltip-cabinno.show {
        opacity: 1;
    }

    .custom-tooltip-cabinno .cabinDeckNo {
        font-size: 12px;
    }

.custom-tooltip-holiday-jp {
    --bs-tooltip-bg: #ff0000;
    font-size: 12px !important;
}

.custom-tooltip-holiday-us {
    --bs-tooltip-bg: #e600ff;
    font-size: 12px !important;
}

    .custom-tooltip-holiday-jp.show,
    .custom-tooltip-holiday-us.show {
        opacity: 1;
    }

    .custom-tooltip-holiday-jp .tooltip-inner,
    .custom-tooltip-holiday-us .tooltip-inner {
        box-shadow: 3px 3px 5px #555555
    }

/*####################################################################################################*/
/* クルーズ検索プログレスバー */
/*####################################################################################################*/
#CruiseSearchProgressWindow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000066;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

    #CruiseSearchProgressWindow #ProgressMSGBox {
        max-width: 600px;
        min-width: 320px;
        width: 100%;
        background: #ffffff;
        padding: 20px 30px 40px;
        border-radius: 20px;
    }

        #CruiseSearchProgressWindow #ProgressMSGBox .ProgressBarTitle {
            text-align: center;
            font-size: 18px;
            color: var(--DCL-COLOR);
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            line-height: 1.2;
        }

            #CruiseSearchProgressWindow #ProgressMSGBox .ProgressBarTitle .fa {
                font-size: 26px;
            }

        #CruiseSearchProgressWindow #ProgressMSGBox .progress {
            height: 20px;
            border-radius: 50px;
            margin: 10px 0 10px;
            font-size: 14px;
        }

    #CruiseSearchProgressWindow #ProgressStatus {
        text-align: center;
    }

    #CruiseSearchProgressWindow #ProgressMSG {
        position: relative;
    }

        #CruiseSearchProgressWindow #ProgressMSG .ProgressMSG_BG {
            position: absolute;
            top: 45%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-size: 120px;
            opacity: .4;
            color: var(--DCL-COLOR-LIGHT);
        }

        #CruiseSearchProgressWindow #ProgressMSG .ProgressMSG {
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 10px;
            opacity: 0;
            transform: translateY(20px); /* 少し下にずらす */
            transition: all 0.5s ease;
        }

            #CruiseSearchProgressWindow #ProgressMSG .ProgressMSG.fade-in {
                opacity: 1;
                transform: translateY(0);
            }

            #CruiseSearchProgressWindow #ProgressMSG .ProgressMSG .AgentImageBox {
                /*z-index: 1;*/
            }

                #CruiseSearchProgressWindow #ProgressMSG .ProgressMSG .AgentImageBox .AgentImage {
                    overflow: hidden;
                    width: 55px;
                    height: 55px;
                    position: relative;
                    display: inline-block;
                    border-radius: 100%;
                    border: solid 2px #cccccc;
                    margin-right: 3px;
                    z-index: 1;
                }

                    #CruiseSearchProgressWindow #ProgressMSG .ProgressMSG .AgentImageBox .AgentImage img {
                        position: absolute;
                        top: 65%;
                        left: 50%;
                        -webkit-transform: translate(-50%, -50%);
                        -ms-transform: translate(-50%, -50%);
                        transform: translate(-50%, -50%);
                        width: 100%;
                        height: auto;
                    }

            #CruiseSearchProgressWindow #ProgressMSG .ProgressMSG .AgentMSGBox {
                --b: 30px;
                --h: 20px;
                --p: 55%;
                --x: -30px;
                --r: 12px;
                --_e: max(var(--x),-1*var(--x));
                padding: 10px 15px;
                border-radius: var(--r)/min(var(--r),var(--p) - var(--b)/2) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2);
                /*background: 100% 50%/calc(100% + var(--h)) calc(100% + 2*var(--_e)) linear-gradient(-45deg,#eeeeee,#eeeeee);*/
                background: 100% 50%/calc(100% + var(--h)) calc(100% + 2*var(--_e)) linear-gradient(0deg,var(--DCL-COLOR-LIGHT),var(--DCL-COLOR-LIGHT));
                position: relative;
                z-index: 0;
                width: 100%;
            }

                #CruiseSearchProgressWindow #ProgressMSG .ProgressMSG .AgentMSGBox:before {
                    content: "";
                    position: absolute;
                    z-index: -1;
                    inset: calc(-1*var(--_e)) 0 calc(-1*var(--_e)) calc(-1*var(--h));
                    padding-block: var(--_e);
                    background-image: inherit;
                    clip-path: polygon(50% 50%, var(--h) clamp(var(--b),var(--p) + var(--b)/2,100%), 0 calc(var(--p) + var(--x)), var(--h) clamp(0%,var(--p) - var(--b)/2,100% - var(--b))) content-box;
                }

                #CruiseSearchProgressWindow #ProgressMSG .ProgressMSG .AgentMSGBox .Title {
                    font-weight: bold;
                    margin-bottom: 10px;
                    font-size: 16px;
                }

                #CruiseSearchProgressWindow #ProgressMSG .ProgressMSG .AgentMSGBox .Contents,
                #CruiseSearchProgressWindow #ProgressMSG .ProgressMSG .AgentMSGBox .Contents a {
                    font-size: 14px;
                }


/*####################################################################################################*/
/* モーダル */
/*####################################################################################################*/
/*共通：ヘッダー*/
.modal-header {
    background: var(--DCL-COLOR);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .modal-header hr {
        border-top: solid 1px #ffffff;
        width: 100%;
        margin: 10px 0;
    }

    .modal-header .fixMenuBox {
        display: flex;
        gap: 10px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

        .modal-header .fixMenuBox .menuItem {
            font-size: 14px;
            padding: 3px 15px;
            background: var(--DCL-COLOR-LIGHT);
            border-color: var(--DCL-COLOR);
            transition: all .2s;
        }

            .modal-header .fixMenuBox .menuItem:hover {
                background: var(--ITEM-HOVER-COLOR);
            }

            .modal-header .fixMenuBox .menuItem.active {
                background: #ffd800;
                transition: all .2s;
            }

/*共通：ボディー*/
.modal-body {
}

    .modal-body .SelectItemListBox {
    }

        .modal-body .SelectItemListBox .SelectAllBtn {
            margin-bottom: 10px;
        }

            .modal-body .SelectItemListBox .SelectAllBtn .btn-link {
                font-size: 14px;
                margin: 0 10px;
            }

        .modal-body .SelectItemListBox .SelectItemList {
        }

            .modal-body .SelectItemListBox .SelectItemList .modalItemInfoBox {
                background: #fff8d3;
                border: solid 2px #ffeb7c;
                border-radius: 6px;
                padding: 5px 5px;
                margin-bottom: 10px;
                font-size: 13px;
            }

/*共通：フッター*/
.modal-footer {
    flex-direction: column;
    justify-content: normal;
    align-items: normal;
}

    .modal-footer .btn-primary {
        width: 150px;
        padding: 10px 0;
        margin-left: auto;
    }

    .modal-footer #modal_SearchItemStatus {
        color: var(--SYSTEM-RED);
        font-weight: bold;
        padding: 0 10px
    }

/*個別：出港地*/
#modal_ItemList_DEPARTURE {
}

    #modal_ItemList_DEPARTURE .SelectItemList .modalItemInfoBox .tableNearestInfo {
    }

        #modal_ItemList_DEPARTURE .SelectItemList .modalItemInfoBox .tableNearestInfo td {
            padding: 1px 5px;
        }

            #modal_ItemList_DEPARTURE .SelectItemList .modalItemInfoBox .tableNearestInfo td.TD_LocationCode span {
                display: inline-block;
                background: #eeeeee;
                width: 40px;
                text-align: center;
                border-radius: 4px;
                color: #ffffff;
                font-size: 12px;
            }

                #modal_ItemList_DEPARTURE .SelectItemList .modalItemInfoBox .tableNearestInfo td.TD_LocationCode span.WDW {
                    background: var(--WDW-COLOR);
                }

                #modal_ItemList_DEPARTURE .SelectItemList .modalItemInfoBox .tableNearestInfo td.TD_LocationCode span.DLR {
                    background: var(--DLR-COLOR);
                }

                #modal_ItemList_DEPARTURE .SelectItemList .modalItemInfoBox .tableNearestInfo td.TD_LocationCode span.AUL {
                    background: var(--AUL-COLOR);
                }

            #modal_ItemList_DEPARTURE .SelectItemList .modalItemInfoBox .tableNearestInfo td.TD_ResortName span {
                display: none;
                background: #eeeeee;
                text-align: center;
                border-radius: 4px;
                color: #ffffff;
                font-size: 12px;
            }

                #modal_ItemList_DEPARTURE .SelectItemList .modalItemInfoBox .tableNearestInfo td.TD_ResortName span.WDW {
                    background: var(--WDW-COLOR);
                }

                #modal_ItemList_DEPARTURE .SelectItemList .modalItemInfoBox .tableNearestInfo td.TD_ResortName span.DLR {
                    background: var(--DLR-COLOR);
                }

                #modal_ItemList_DEPARTURE .SelectItemList .modalItemInfoBox .tableNearestInfo td.TD_ResortName span.AUL {
                    background: var(--AUL-COLOR);
                }

    #modal_ItemList_DEPARTURE .SelectItemList .colItem {
        padding: 0 5px;
    }

        #modal_ItemList_DEPARTURE .SelectItemList .colItem .CountryName {
            background: var(--DCL-COLOR-LIGHT);
            font-size: 16px;
            font-weight: bold;
            padding: 5px 10px;
            margin: 10px 0 5px;
            border-radius: 6px;
        }

        #modal_ItemList_DEPARTURE .SelectItemList .colItem label {
            display: block;
            padding: 5px 15px;
            border-radius: 6px;
        }

            #modal_ItemList_DEPARTURE .SelectItemList .colItem label:hover {
                background: var(--ITEM-HOVER-COLOR);
                cursor: pointer;
            }

            #modal_ItemList_DEPARTURE .SelectItemList .colItem label input {
                transform: scale(1.5);
                margin-right: 10px;
            }

                #modal_ItemList_DEPARTURE .SelectItemList .colItem label input:hover {
                    cursor: pointer;
                }

            #modal_ItemList_DEPARTURE .SelectItemList .colItem label a {
                float: right;
                color: #157347;
                transition: all .2s;
            }

                #modal_ItemList_DEPARTURE .SelectItemList .colItem label a:hover {
                    color: var(--SYSTEM-RED);
                    transform: scale(1.3);
                    transition: all .2s;
                }

            #modal_ItemList_DEPARTURE .SelectItemList .colItem label .castleIcon {
            }

                #modal_ItemList_DEPARTURE .SelectItemList .colItem label .castleIcon img {
                    width: 20px;
                    margin: 0 3px;
                    transform: translate(0, -3px);
                }

                #modal_ItemList_DEPARTURE .SelectItemList .colItem label .castleIcon .Location {
                    background: #eeeeee;
                    color: #ffffff;
                    font-size: 12px;
                    display: inline-block;
                    text-align: center;
                    border-radius: 4px;
                    margin-left: 3px;
                    width: 35px;
                }

                    #modal_ItemList_DEPARTURE .SelectItemList .colItem label .castleIcon .Location.WDW {
                        background: var(--WDW-COLOR);
                    }

                    #modal_ItemList_DEPARTURE .SelectItemList .colItem label .castleIcon .Location.DLR {
                        background: var(--DLR-COLOR);
                    }

                    #modal_ItemList_DEPARTURE .SelectItemList .colItem label .castleIcon .Location.AUL {
                        background: var(--AUL-COLOR);
                    }

/*個別：出港日*/
#modal_ItemList_DEPDATE .SelectItemList {
}

    #modal_ItemList_DEPDATE .SelectItemList .ReservationDateRange {
        text-align: right;
        margin-bottom: -20px;
        padding: 0 10px;
    }

    #modal_ItemList_DEPDATE .SelectItemList .MonthYear {
        background: var(--DCL-COLOR-LIGHT);
        font-size: 20px;
        font-weight: bold;
        padding: 5px 15px;
        margin: 20px 0 10px;
        border-radius: 6px;
    }

        #modal_ItemList_DEPDATE .SelectItemList .MonthYear .YearCaption {
            font-size: 14px;
            margin-left: 3px;
        }

        #modal_ItemList_DEPDATE .SelectItemList .MonthYear .YearSelectBtn {
            margin-left: 10px;
            font-size: 13px;
            vertical-align: middle;
        }

            #modal_ItemList_DEPDATE .SelectItemList .MonthYear .YearSelectBtn .btn {
                font-size: 13px;
                padding: 0 5px;
            }

    #modal_ItemList_DEPDATE .SelectItemList .colItem {
        white-space: nowrap;
        padding: 0;
    }

        #modal_ItemList_DEPDATE .SelectItemList .colItem label {
            display: block;
            padding: 5px 15px;
            border-radius: 6px;
            font-size: 16px;
        }

            #modal_ItemList_DEPDATE .SelectItemList .colItem label:not(.disabled):hover {
                background: var(--ITEM-HOVER-COLOR);
                cursor: pointer;
            }

            #modal_ItemList_DEPDATE .SelectItemList .colItem label.disabled {
                color: #aaaaaa;
            }

                #modal_ItemList_DEPDATE .SelectItemList .colItem label.disabled:hover {
                    cursor: no-drop;
                }

        #modal_ItemList_DEPDATE .SelectItemList .colItem input {
            transform: scale(1.5);
            margin-right: 10px;
        }

            #modal_ItemList_DEPDATE .SelectItemList .colItem input:hover {
                cursor: pointer;
            }

            #modal_ItemList_DEPDATE .SelectItemList .colItem input:disabled:hover {
                cursor: no-drop;
            }

/*個別：泊数*/
#modal_ItemList_NIGHTS {
}

    #modal_ItemList_NIGHTS .SelectItemList .NightsFilter {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
    }

        #modal_ItemList_NIGHTS .SelectItemList .NightsFilter .btn-light {
            padding: 3px 0;
            border-radius: 50px;
            font-size: 16px;
            min-width: 90px;
        }

            #modal_ItemList_NIGHTS .SelectItemList .NightsFilter .btn-light:hover {
                background: var(--ITEM-HOVER-COLOR);
            }

    #modal_ItemList_NIGHTS .SelectItemList .colItem {
        white-space: nowrap;
        padding: 5px 0;
    }

        #modal_ItemList_NIGHTS .SelectItemList .colItem label {
            display: block;
            padding: 5px 15px;
            border-radius: 6px;
            font-size: 16px;
        }

            #modal_ItemList_NIGHTS .SelectItemList .colItem label:hover {
                background: var(--ITEM-HOVER-COLOR);
                cursor: pointer;
            }

        #modal_ItemList_NIGHTS .SelectItemList .colItem input {
            transform: scale(1.5);
            margin-right: 10px;
        }

            #modal_ItemList_NIGHTS .SelectItemList .colItem input:hover {
                cursor: pointer;
            }

/*個別：航路*/
#modal_ItemList_DESTINATION {
}

    #modal_ItemList_DESTINATION .SelectItemList .colItem {
        white-space: nowrap;
        padding: 0;
    }

        #modal_ItemList_DESTINATION .SelectItemList .colItem label {
            display: block;
            padding: 5px 15px;
            border-radius: 6px;
            font-size: 16px;
        }

            #modal_ItemList_DESTINATION .SelectItemList .colItem label:not(.disabled):hover {
                background: var(--ITEM-HOVER-COLOR);
                cursor: pointer;
            }

        #modal_ItemList_DESTINATION .SelectItemList .colItem input {
            transform: scale(1.5);
            margin-right: 10px;
        }

            #modal_ItemList_DESTINATION .SelectItemList .colItem input:hover {
                cursor: pointer;
            }

        #modal_ItemList_DESTINATION .SelectItemList .colItem .fa-calendar-times-o {
            margin-left: -1px;
            margin-right: 6px;
        }

    #modal_ItemList_DESTINATION .SelectItemList .AreaNothingInfo {
        background: #eeeeee;
        padding: 5px 15px;
        margin: 20px 0 10px;
        border-radius: 6px;
    }

    #modal_ItemList_DESTINATION .SelectItemList .colItem label.disabled input:hover {
        cursor: no-drop;
    }

/*個別：船*/
#modal_ItemList_SHIP {
}

    #modal_ItemList_SHIP .SelectItemList .colItem {
        white-space: nowrap;
        padding: 0 0 10px;
    }

        #modal_ItemList_SHIP .SelectItemList .colItem label {
            display: block;
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 14px;
        }

            #modal_ItemList_SHIP .SelectItemList .colItem label:not(.disabled):hover {
                background: var(--ITEM-HOVER-COLOR);
                cursor: pointer;
            }

        #modal_ItemList_SHIP .SelectItemList .colItem input {
            transform: scale(1.5);
            margin-right: 10px;
        }

            #modal_ItemList_SHIP .SelectItemList .colItem input:hover {
                cursor: pointer;
            }

        #modal_ItemList_SHIP .SelectItemList .colItem .modal_ShipImageBox {
            margin-top: 5px;
            position: relative;
        }

            #modal_ItemList_SHIP .SelectItemList .colItem .modal_ShipImageBox img {
                border-radius: 6px;
                box-shadow: 0 1px 3px 0 #25201f4d;
            }

            #modal_ItemList_SHIP .SelectItemList .colItem .modal_ShipImageBox span {
                position: absolute;
                right: 3px;
                bottom: 0px;
                color: #ffffff;
                font-size: 10px;
            }

        #modal_ItemList_SHIP .SelectItemList .colItem .modal_ShipInfoBox {
            font-size: 11px;
            margin-top: 5px;
        }

            #modal_ItemList_SHIP .SelectItemList .colItem .modal_ShipInfoBox table {
                width: 100%;
            }

                #modal_ItemList_SHIP .SelectItemList .colItem .modal_ShipInfoBox table td {
                }

                    #modal_ItemList_SHIP .SelectItemList .colItem .modal_ShipInfoBox table td.TD_ItemName {
                        white-space: nowrap;
                    }

                        #modal_ItemList_SHIP .SelectItemList .colItem .modal_ShipInfoBox table td.TD_ItemName.shipname {
                            font-size: 12px;
                        }

                    #modal_ItemList_SHIP .SelectItemList .colItem .modal_ShipInfoBox table td.TD_Value {
                        text-align: right;
                    }

/*個別：その他*/
#modal_ItemList_OTHER {
}

    #modal_ItemList_OTHER .SelectItemList .colItem {
        white-space: nowrap;
        padding: 10px 10px 30px;
    }

        #modal_ItemList_OTHER .SelectItemList .colItem .OtherTitle {
            background: var(--DCL-COLOR-LIGHT);
            font-size: 16px;
            font-weight: bold;
            padding: 5px 10px 5px 55px;
            margin-bottom: 3px;
            border-radius: 6px;
            position: relative;
        }

            #modal_ItemList_OTHER .SelectItemList .colItem .OtherTitle .ThemeLogo {
                position: absolute;
                left: 7px;
                top: -10px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #aaaaaa;
                color: #ffffff;
                font-size: 24px;
                font-weight: normal;
            }

                #modal_ItemList_OTHER .SelectItemList .colItem .OtherTitle .ThemeLogo.CastawayCay {
                    background: #005e15;
                }

                #modal_ItemList_OTHER .SelectItemList .colItem .OtherTitle .ThemeLogo.LighthousePoint {
                    background: #d8bd26;
                }

                #modal_ItemList_OTHER .SelectItemList .colItem .OtherTitle .ThemeLogo.SeaDay {
                    background: #2d68b0;
                }

                #modal_ItemList_OTHER .SelectItemList .colItem .OtherTitle .ThemeLogo.StaffAboard {
                    background: #e4007f;
                }

                #modal_ItemList_OTHER .SelectItemList .colItem .OtherTitle .ThemeLogo.Theme {
                    background: #601986;
                }

                #modal_ItemList_OTHER .SelectItemList .colItem .OtherTitle .ThemeLogo.GuaranteeRoom {
                    background: #ff6c00;
                }

            #modal_ItemList_OTHER .SelectItemList .colItem .OtherTitle .ItemSelected {
                position: absolute;
                top: -10px;
                right: 5px;
                font-size: 11px;
                color: #ffffff;
                background: #ff0000;
                padding: 1px 7px 0;
                border-radius: 50px;
            }

        #modal_ItemList_OTHER .SelectItemList .colItem select {
            font-size: 16px;
        }

            #modal_ItemList_OTHER .SelectItemList .colItem select:focus {
                background: var(--ITEM-HOVER-COLOR);
            }

            #modal_ItemList_OTHER .SelectItemList .colItem select:hover {
                cursor: pointer;
            }

/*個別：人数*/
#modal_ItemList_PAX {
}

    #modal_ItemList_PAX .SelectItemList {
        position: relative;
    }

        #modal_ItemList_PAX .SelectItemList .TotalPaxBox {
            position: absolute;
            right: 10px;
            top: -40px;
        }

            #modal_ItemList_PAX .SelectItemList .TotalPaxBox #TotalPaxCount {
                font-size: 24px;
            }

            #modal_ItemList_PAX .SelectItemList .TotalPaxBox .paxUnit {
                margin: 0 5px;
            }

        #modal_ItemList_PAX .SelectItemList .modalItemInfoBox {
        }

            #modal_ItemList_PAX .SelectItemList .modalItemInfoBox ul {
                list-style: disc;
                padding-left: 20px;
            }

                #modal_ItemList_PAX .SelectItemList .modalItemInfoBox ul li {
                }

        #modal_ItemList_PAX .SelectItemList .colItem {
            white-space: nowrap;
            padding: 20px 10px 20px;
        }

            #modal_ItemList_PAX .SelectItemList .colItem .PaxTitle {
                background: var(--DCL-COLOR-LIGHT);
                font-size: 16px;
                font-weight: bold;
                padding: 5px 10px 5px 55px;
                margin-bottom: 3px;
                border-radius: 6px;
                position: relative;
            }

                #modal_ItemList_PAX .SelectItemList .colItem .PaxTitle .paxLogo {
                    position: absolute;
                    left: 7px;
                    top: -10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                    #modal_ItemList_PAX .SelectItemList .colItem .PaxTitle .paxLogo img {
                        width: 40px;
                        height: 40px;
                        border: solid 2px #555555;
                        border-radius: 100%;
                        background: #ffffff;
                    }

                #modal_ItemList_PAX .SelectItemList .colItem .PaxTitle.Nothing {
                    background: #cccccc;
                }

            #modal_ItemList_PAX .SelectItemList .colItem .selectPaxBox {
                margin: 5px 0;
                display: flex;
                justify-content: space-between;
            }

                #modal_ItemList_PAX .SelectItemList .colItem .selectPaxBox .paxCount {
                    font-size: 16px;
                    padding: 5px 15px;
                    border-radius: 4px;
                    border: solid 1px var(--DCL-COLOR-LIGHT);
                }

                    #modal_ItemList_PAX .SelectItemList .colItem .selectPaxBox .paxCount:hover {
                        cursor: pointer;
                        background: var(--ITEM-HOVER-COLOR);
                    }

                    #modal_ItemList_PAX .SelectItemList .colItem .selectPaxBox .paxCount .paxUnit {
                        font-size: 12px;
                        margin-left: 2px;
                    }

                    #modal_ItemList_PAX .SelectItemList .colItem .selectPaxBox .paxCount.active {
                        background: var(--DCL-COLOR);
                        border-color: var(--DCL-COLOR);
                        color: #ffffff;
                    }

            #modal_ItemList_PAX .SelectItemList .colItem #paxJR_0.active,
            #modal_ItemList_PAX .SelectItemList .colItem #paxCHD1_0.active,
            #modal_ItemList_PAX .SelectItemList .colItem #paxCHD2_0.active,
            #modal_ItemList_PAX .SelectItemList .colItem #paxINF_0.active {
                background: #cccccc;
                border-color: #cccccc;
                color: #555555;
            }

/*表示アイテム説明モーダル*/
#modal_CruiseItemDetail {
}

    #modal_CruiseItemDetail .modal-body {
        padding: 30px 30px;
    }

        #modal_CruiseItemDetail .modal-body .Title {
            font-size: 20px;
            font-weight: bold;
        }

        #modal_CruiseItemDetail .modal-body .Contents {
            padding: 10px 10px 15px;
        }

            #modal_CruiseItemDetail .modal-body .Contents .DetailsBtn {
                background: #157347;
                color: #ffffff;
                margin: 0 5px;
                padding: 2px 10px;
                border-radius: 4px;
            }

            #modal_CruiseItemDetail .modal-body .Contents .Remarks {
                font-size: 12px;
                margin-top: 10px;
            }

            #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo {
            }

                #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo tr {
                    border-bottom: dotted 1px #aaaaaa;
                }

                    #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo tr:last-child {
                        border: none;
                    }

                #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo th {
                    text-align: center;
                }

                #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo td {
                    vertical-align: middle;
                    padding: 8px 15px 5px 0px;
                    font-weight: bold;
                }

                    #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo td .caption {
                        font-size: 16px;
                        font-weight: bold;
                        border-left: solid 5px var(--DCL-COLOR);
                        padding: 5px 0 5px 5px;
                    }

                    #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo td .content {
                        font-size: 11px;
                        padding-left: 15px;
                        font-weight: normal;
                    }

                    #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo td.TD_ICON {
                        padding: 2px 10px;
                    }

                    #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo td .OtherIcon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        background: #eeeeee;
                        color: #aaaaaa;
                        font-size: 16px;
                        font-weight: normal;
                    }

                        #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo td .OtherIcon.CastawayCay {
                            background: #005e15;
                            color: #ffffff;
                        }

                        #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo td .OtherIcon.LookoutCay {
                            background: #d8bd26;
                            color: #ffffff;
                        }

                        #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo td .OtherIcon.SeaDay {
                            background: #2d68b0;
                            color: #ffffff;
                        }

                        #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo td .OtherIcon.Staff {
                            background: #e4007f;
                            color: #ffffff;
                        }

                        #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo td .OtherIcon.Theme {
                            background: #601986;
                            color: #ffffff;
                        }

                        #modal_CruiseItemDetail .modal-body .Contents .tableIconInfo td .OtherIcon.GTRoom {
                            background: #ff6c00;
                            color: #ffffff;
                        }

/*おすすめ検索一覧モーダル*/
#modal_SearchPresetList {
}

    #modal_SearchPresetList .modal-body {
        padding: 30px 30px;
    }

        #modal_SearchPresetList .modal-body .SearchPresetList {
        }

            #modal_SearchPresetList .modal-body .SearchPresetList .PresetItem {
                background: var(--DCL-COLOR-LIGHT);
                font-weight: bold;
                display: inline-block;
                margin: 0 3px 15px;
                padding: 5px 20px;
                border-radius: 50px;
            }

                #modal_SearchPresetList .modal-body .SearchPresetList .PresetItem:hover {
                    background: var(--ITEM-HOVER-COLOR);
                }

                #modal_SearchPresetList .modal-body .SearchPresetList .PresetItem.Active {
                    /*background: #0b5ed7;*/
                    /*border-color: #0b5ed7;*/
                    background: #157347;
                    border-color: #157347;
                    color: #ffffff;
                }

    #modal_SearchPresetList .modal-footer {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

        #modal_SearchPresetList .modal-footer .btn-primary {
            padding: 10px 40px;
            margin: 0;
            border-radius: 50px;
            white-space: nowrap;
            width: auto;
        }

            #modal_SearchPresetList .modal-footer .btn-primary.disabled {
                opacity: .3;
            }

        #modal_SearchPresetList .modal-footer .btn-secondary {
            width: 150px;
            padding: 10px 0;
            margin: 0;
        }

/*個別：クルーズカレンダーモーダル*/
#modal_CruiseCalendar {
}

    #modal_CruiseCalendar .modal-body {
    }

        #modal_CruiseCalendar .modal-body::-webkit-scrollbar {
            width: 8px; /* Chrome/Safari用 */
            background: none;
            border-radius: 50px;
        }

        #modal_CruiseCalendar .modal-body::-webkit-scrollbar-thumb {
            background: var(--DCL-COLOR-LIGHT);
            border-radius: 50px;
        }

            #modal_CruiseCalendar .modal-body::-webkit-scrollbar-thumb:hover {
                background: var(--DCL-COLOR);
                cursor: pointer;
            }

    #modal_CruiseCalendar #CruiseCalendarFilterBox {
        margin-bottom: 15px;
    }

    #modal_CruiseCalendar #CruiseCalendarBox {
    }

        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth {
        }

            #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .SubTitle {
                font-size: 22px;
                font-weight: bold;
                text-align: center;
                margin-bottom: 10px;
                position: sticky;
                top: 0;
            }

                #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .SubTitle .DispMonth {
                    padding: 10px 5px 10px 25px;
                    background: var(--DCL-COLOR);
                    color: #ffffff;
                    border-radius: 50px;
                }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .SubTitle .DispMonth .DispMonthUnit {
                        font-size: 18px;
                        margin: 0 15px 0 5px;
                    }

            #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar {
                width: 100%;
            }

                #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar th {
                    text-align: center;
                    background: var(--DCL-COLOR-LIGHT);
                    border: solid 1px #76cfff;
                    padding: 5px 2px;
                    font-size: 12px;
                }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar th.TH_Sun {
                        color: #ff0000;
                    }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar th.TH_Sat {
                        color: #0000ff;
                    }

                #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td {
                    width: 14.28571428571429%;
                    vertical-align: top;
                    height: 70px;
                }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td.day {
                        border: solid 1px var(--DCL-COLOR-LIGHT);
                        padding: 2px 5px;
                    }

                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td.day:hover {
                            /*background: var(--ITEM-HOVER-COLOR);*/
                        }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td.TD_0 {
                        background: #ff00000a;
                    }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td.TD_6 {
                        background: #0000ff0a;
                    }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td.Holiday_US {
                        background: #e600ff11;
                    }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td.Holiday_JP {
                        background: #ff00000a;
                    }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .DispDay {
                        font-size: 20px;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 3px;
                    }

                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .DispDay:hover {
                            cursor: default;
                        }

                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .DispDay .Holiday {
                            background: #ff0000;
                            color: #ffffff;
                            font-size: 10px;
                            line-height: 1;
                            text-align: center;
                            border-radius: 4px;
                            padding: 1px 2px;
                        }

                            #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .DispDay .Holiday.JP {
                                background: #ff0000;
                            }

                            #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .DispDay .Holiday.US {
                                background: #e600ff;
                            }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td.TD_0 .DispDay {
                        color: #ff0000;
                    }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td.TD_6 .DispDay {
                        color: #0000ff;
                    }

                    #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox {
                        font-size: 10px;
                        border: solid 2px var(--DCL-COLOR);
                        background: var(--DCL-COLOR-LIGHT);
                        padding: 0;
                        margin: 0 0 5px;
                        border-radius: 2px;
                        text-align: left;
                        line-height: 1.2;
                        transition: all .2s;
                    }

                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox .Course {
                            padding: 2px;
                        }

                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox .Theme {
                            background: #dddddd;
                            font-size: 9px;
                            padding: 2px;
                        }

                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox .LowestRate {
                            padding: 2px;
                            text-align: right;
                            background: var(--DCL-COLOR);
                            color: #ffffff;
                            font-family: var(--NUMERIC-FONT);
                        }

                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox:hover {
                            /*background: var(--DCL-COLOR);*/
                            /*color: #ffffff;*/
                            background: var(--ITEM-HOVER-COLOR);
                            transform: scale(1.2);
                            transition: all .2s;
                        }

                            #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox:hover .Theme {
                                /* background: #ffffff;
                                color: var(--DCL-COLOR);*/
                            }

        #modal_CruiseCalendar #CruiseCalendarBox hr {
            margin: 50px 0 30px;
            border-top: dotted 2px #555555;
        }

            #modal_CruiseCalendar #CruiseCalendarBox hr:last-child {
                display: none;
            }

/*####################################################################################################*/
/* お知らせエリア */
/*####################################################################################################*/
#ContentPlaceHolder1_CruiseNewsBox {
    max-width: 900px;
    width: 100%;
    margin: 0 auto 30px;
}

    #ContentPlaceHolder1_CruiseNewsBox .MsgBox {
        padding: 30px;
        background: #fff1fc;
        border: solid 3px #ffafaf;
        border-radius: 20px;
        /*box-shadow: var(--BOX-SHADOW-MAIN);*/
    }

        #ContentPlaceHolder1_CruiseNewsBox .MsgBox #ContentPlaceHolder1_Label_CruiseNews {
        }

/*####################################################################################################*/
/* 検索ボックスエリア */
/*####################################################################################################*/
#SearchBox {
    max-width: 900px;
    width: 100%;
    padding: 30px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: var(--BOX-SHADOW-MAIN);
    margin: auto;
}

    /*世界地図*/
    #SearchBox #WorldMapBox {
        position: relative;
    }

        #SearchBox #WorldMapBox #MapTitle {
            position: absolute;
            top: 2px;
            left: 2px;
            z-index: 2;
            font-size: 10px;
            font-weight: bold;
            padding: 1px 5px 1px 8px;
            border-radius: 12px;
            /*background: var(--DCL-COLOR-LIGHT);*/
        }

            #SearchBox #WorldMapBox #MapTitle:hover {
                cursor: default;
            }

        #SearchBox #WorldMapBox #btnResetWorldMap {
            position: absolute;
            top: 3px;
            right: 3px;
            z-index: 2;
            font-size: 12px;
            padding: 2px 10px;
            border-radius: 10px;
            opacity: .8;
        }

        #SearchBox #WorldMapBox #WorldMap {
            background: #5acfe4;
            height: 250px;
            border-radius: 12px;
            padding: 20px;
        }

            #SearchBox #WorldMapBox #WorldMap .gm-style-iw-chr button {
                width: 25px !important;
                height: 25px !important;
                outline: none !important;
            }

                #SearchBox #WorldMapBox #WorldMap .gm-style-iw-chr button span {
                    width: 20px !important;
                    height: 20px !important;
                    margin: 5px !important;
                }

    #SearchBox #WorldMap .infoWindowContent {
        font-weight: bold;
        text-align: center;
        background: var(--DCL-COLOR-LIGHT);
        padding: 7px 20px;
        border-radius: 6px;
        font-family: 'Kosugi Maru', -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif !important;
    }

        #SearchBox #WorldMap .infoWindowContent .PortName {
            font-size: 14px;
        }

        #SearchBox #WorldMap .infoWindowContent .CountryName {
            font-size: 10px;
            margin-top: 5px;
        }


    /*検索アイテムボタン*/
    #SearchBox #SearchForm {
        margin: 20px 0 0;
    }

        #SearchBox #SearchForm .btnBox {
            display: flex;
            gap: 10px;
            flex-direction: row;
        }

            #SearchBox #SearchForm .btnBox .rowBtn {
                display: flex;
                gap: 10px;
            }

                #SearchBox #SearchForm .btnBox .rowBtn .btnItem {
                    padding: 25px 20px;
                    position: relative;
                    transition: all .2s;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                    #SearchBox #SearchForm .btnBox .rowBtn .btnItem .btnTitle {
                        position: absolute;
                        top: 3px;
                        left: 5px;
                        font-size: 14px;
                        font-weight: bold;
                        white-space: nowrap;
                        text-align: left;
                    }

                        #SearchBox #SearchForm .btnBox .rowBtn .btnItem .btnTitle.Other {
                            font-size: 11px;
                            line-height: 1.2;
                            padding-top: 1px;
                        }

                    #SearchBox #SearchForm .btnBox .rowBtn .btnItem .btnBadge {
                        position: absolute;
                        bottom: 3px;
                        right: 3px;
                        font-size: 11px;
                        background: var(--DCL-COLOR);
                        color: #ffffff;
                        padding: 1px 10px 1px;
                        border-radius: 50px;
                        white-space: nowrap;
                    }

                        #SearchBox #SearchForm .btnBox .rowBtn .btnItem .btnBadge.selected {
                            background: #ff0000;
                        }

                    #SearchBox #SearchForm .btnBox .rowBtn .btnItem img {
                        width: 100%;
                    }

                    #SearchBox #SearchForm .btnBox .rowBtn .btnItem:hover {
                        transform: translate(0,-5px);
                        transition: all .2s;
                    }

                    #SearchBox #SearchForm .btnBox .rowBtn .btnItem.btnReset:hover {
                        background: var(--ITEM-HOVER-COLOR);
                    }

        #SearchBox #SearchForm #SearchPresetBtnBox {
            margin: 5px 10px;
        }

            #SearchBox #SearchForm #SearchPresetBtnBox .btn {
                font-size: 14px;
            }

                #SearchBox #SearchForm #SearchPresetBtnBox .btn .DownArrow .fa {
                    transition: all .5s;
                }

                #SearchBox #SearchForm #SearchPresetBtnBox .btn .DownArrow.OPEN .fa {
                    transform: rotate(180deg);
                    transition: all .5s;
                }

        #SearchBox #SearchForm #SearchFormSubmitBtnBox {
            text-align: center;
            margin-top: 30px;
        }

            #SearchBox #SearchForm #SearchFormSubmitBtnBox .btn {
                padding: 15px 50px;
                border-radius: 50px;
                font-size: 18px;
            }

        /*詳細表示履歴*/
        #SearchBox #SearchForm #CruiseViewDetailHistoryBox {
            margin-top: 40px;
        }

            #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryTitle {
                font-weight: bold;
                border-left: solid 10px var(--DCL-COLOR);
                padding-left: 5px;
            }

                #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryTitle .btn-link {
                    font-size: 12px;
                    vertical-align: top;
                }

            #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox {
                display: flex;
                align-items: stretch;
                gap: 10px;
                white-space: nowrap;
                overflow-x: auto;
                padding-top: 6px;
                padding-bottom: 10px;
            }

                #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox::-webkit-scrollbar {
                    height: 8px; /* Chrome/Safari用 */
                    background: none;
                    border-radius: 50px;
                }

                #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox::-webkit-scrollbar-thumb {
                    background: var(--DCL-COLOR-LIGHT);
                    border-radius: 50px;
                }

                    #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox::-webkit-scrollbar-thumb:hover {
                        background: var(--DCL-COLOR);
                        cursor: pointer;
                    }

                #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox .HistoryItemCard {
                    text-decoration: none;
                    font-size: 10px;
                    text-align: left;
                    padding: 0;
                    min-width: 180px;
                    max-width: 180px;
                    white-space: normal;
                    transition: all .2s;
                }

                    #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox .HistoryItemCard .PortIMSGBox {
                        height: 60px;
                        position: relative;
                    }

                        #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox .HistoryItemCard .PortIMSGBox img {
                            object-fit: cover;
                            width: 100%;
                            height: 100%;
                            border-radius: 6px 6px 0 0;
                        }

                        #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox .HistoryItemCard .PortIMSGBox .Copyright {
                            position: absolute;
                            bottom: 2px;
                            right: 5px;
                            color: #ffffff;
                            user-select: none; /* 標準対応 */
                            -webkit-user-select: none; /* Safari対応 */
                            -moz-user-select: none; /* Firefox対応 */
                            -ms-user-select: none; /* 古いIE対応 */
                            cursor: default;
                            font-family: var(--NUMERIC-FONT);
                            font-size: 10px;
                        }

                    #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox .HistoryItemCard .HIS_Body {
                        padding: 2px 5px;
                    }

                    #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox .HistoryItemCard:hover {
                        transform: translate(0,-5px);
                        transition: all .2s;
                    }

                    #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox .HistoryItemCard.disabled {
                        background: #cccccc;
                        opacity: .3;
                    }

                        #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox .HistoryItemCard.disabled .PortIMSGBox img {
                            opacity: .5;
                        }

/*####################################################################################################*/
/* 検索結果 */
/*####################################################################################################*/
#SearchResultBox {
    max-width: 900px;
    width: 100%;
    margin: 50px auto;
}

    /*サマリーエリア*/
    #SearchResultBox #SummaryBox {
        background: var(--DCL-COLOR-LIGHT);
        padding: 50px 50px;
        border-radius: 20px;
        margin-bottom: 40px;
        box-shadow: var(--BOX-SHADOW-MAIN);
    }

        #SearchResultBox #SummaryBox .NothingMSG {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #SearchResultBox #SummaryBox .SummaryTitle {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        #SearchResultBox #SummaryBox .resultCount {
            font-size: 30px;
            font-weight: bold;
            margin: 0 5px 0 10px;
        }

        #SearchResultBox #SummaryBox .CountUnit {
            margin-right: 30px;
        }

        #SearchResultBox #SummaryBox .SummarySubTitle {
            margin-top: 15px;
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: bold;
            border-left: solid 10px var(--DCL-COLOR);
            padding-left: 10px;
        }

            #SearchResultBox #SummaryBox .SummarySubTitle .Arrow {
                padding: 0;
                font-size: 16px;
                font-weight: bold;
            }

                #SearchResultBox #SummaryBox .SummarySubTitle .Arrow .fa {
                    transition: all .5s;
                }

                #SearchResultBox #SummaryBox .SummarySubTitle .Arrow.OPEN .fa {
                    transform: rotate(180deg);
                    transition: all .5s;
                }

        #SearchResultBox #SummaryBox .SummaryPortList {
            padding: 0 10px;
        }

            #SearchResultBox #SummaryBox .SummaryPortList .PortNameJP {
                background: #ffffff66;
                margin: 0 10px 10px 0;
                padding: 3px 10px 2px 15px;
                border-radius: 50px;
                display: inline-block;
            }

        #SearchResultBox #SummaryBox .SummaryCountList {
            padding: 0 10px;
        }

            #SearchResultBox #SummaryBox .SummaryCountList .CountItem {
                background: #ffffff66;
                margin: 0 10px 10px 0;
                padding: 3px 10px 2px 15px;
                border-radius: 50px;
                display: inline-block;
            }

        #SearchResultBox #SummaryBox .SummaryMinRate {
            padding: 0 10px;
        }

            #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate {
                width: 100%;
            }

                #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate th {
                    text-align: center;
                    white-space: nowrap;
                }

                    #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate th span {
                        font-size: 12px;
                        margin-left: 5px;
                    }

                    #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate th:first-child {
                        text-align: left;
                        padding-left: 20px;
                    }

                #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate tbody tr {
                    border-top: dotted 1px #aaaaaa;
                }

                #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate tbody td {
                    padding: 5px 10px;
                    vertical-align: middle;
                }

                    #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate tbody td.TD_RoomType {
                        width: 100%;
                        white-space: nowrap;
                        border-left: solid 5px var(--DCL-COLOR);
                    }

                    #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate tbody td.TD_Rate {
                        text-align: right;
                        white-space: nowrap;
                        font-family: var(--NUMERIC-FONT);
                    }

                        #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate tbody td.TD_Rate .USD {
                            font-size: 16px;
                            font-weight: bold;
                            line-height: 1;
                        }

                        #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate tbody td.TD_Rate .JPY {
                            font-size: 12px;
                        }

                        #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate tbody td.TD_Rate .RateUnit {
                            font-size: 12px;
                            margin-left: 2px;
                        }

                        #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate tbody td.TD_Rate .FULL {
                            color: var(--SYSTEM-RED);
                        }

                    #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate tbody td.TD_minRatePort {
                    }

                        #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate tbody td.TD_minRatePort .MinRatePortNameJP {
                            display: inline-block;
                            white-space: nowrap;
                        }

                    #SearchResultBox #SummaryBox .SummaryMinRate .tableMinRate tbody td.TD_Info {
                        text-align: right;
                        font-size: 12px;
                        line-height: 1.2;
                    }

        #SearchResultBox #SummaryBox .MinRatePortList {
            padding: 20px 10px;
            font-size: 12px;
        }

            #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Name {
                font-weight: bold;
                border-left: solid 5px var(--DCL-COLOR);
                padding-left: 10px;
                font-size: 16px;
                margin-bottom: 10px;
            }

                #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Name a {
                    font-size: 12px;
                    font-weight: normal;
                    margin-left: 10PX;
                }

            #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body {
                display: flex;
                align-items: flex-start;
                gap: 10px;
            }

                #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortImage {
                    width: 350px;
                }

                    #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortImage .ImageBox {
                        width: 100%;
                        height: 200px;
                        position: relative;
                    }

                        #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortImage .ImageBox img {
                            object-fit: cover;
                            width: 100%;
                            height: 100%;
                            border-radius: 6px;
                        }

                        #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortImage .ImageBox .Copyright {
                            position: absolute;
                            bottom: 5px;
                            right: 15px;
                            color: #ffffff;
                            user-select: none; /* 標準対応 */
                            -webkit-user-select: none; /* Safari対応 */
                            -moz-user-select: none; /* Firefox対応 */
                            -ms-user-select: none; /* 古いIE対応 */
                            cursor: default;
                            font-family: var(--NUMERIC-FONT);
                            font-size: 12px;
                        }

                #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                }

                    #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort {
                        margin-bottom: 10px;
                        width: 100%;
                    }

                        #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort th {
                            white-space: nowrap;
                        }

                            #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort th.TH_RoomType {
                                text-align: left;
                                padding-left: 20px;
                            }

                            #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort th.TH_Rate {
                                text-align: right;
                            }

                                #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort th.TH_Rate span {
                                    font-size: 10px;
                                    margin-left: 5px;
                                }

                        #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort tbody tr {
                            border-top: dotted 1px #aaaaaa;
                        }

                        #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort tbody td {
                            padding: 2px 5px 1px 10px;
                            vertical-align: middle;
                        }

                            #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort tbody td.TD_RoomType {
                                width: 100%;
                                border-left: solid 3px var(--DCL-COLOR);
                            }

                            #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort tbody td.TD_Rate {
                                text-align: right;
                                white-space: nowrap;
                                font-family: var(--NUMERIC-FONT);
                            }

                                #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort tbody td.TD_Rate .USD {
                                    font-weight: bold;
                                    font-size: 14px;
                                    line-height: 1;
                                }

                                #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort tbody td.TD_Rate .JPY {
                                }

                                #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort tbody td.TD_Rate .RateUnit {
                                    font-size: 12px;
                                    margin-left: 2px;
                                }

                                #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .tableMinRatePort tbody td.TD_Rate .FULL {
                                    color: var(--SYSTEM-RED);
                                }

                    #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .CourseCaption {
                        font-weight: bold;
                        padding: 0 5px;
                    }

                    #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo ul {
                        list-style: disc;
                        padding-left: 20px;
                    }

                        #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo ul li {
                        }

                    #SearchResultBox #SummaryBox .MinRatePortList .MinRatePort_Body .PortInfo .MinRatePort_CourseName {
                        padding: 0 5px;
                    }

            #SearchResultBox #SummaryBox .MinRatePortList #OpenMinRatePortListBtnBox {
                margin-top: 20px;
            }

            #SearchResultBox #SummaryBox .MinRatePortList hr {
                margin: 20px 0;
                border-top: dotted 5px var(--DCL-COLOR);
            }

            #SearchResultBox #SummaryBox .MinRatePortList .btn-link {
                padding: 0;
                font-size: 14px;
            }

    #SearchResultBox .LoginRequiredMSG {
        background: #ffd4b5;
        padding: 30px 5px;
        border-radius: 6px;
        margin-bottom: 40px;
        border: solid 3px #ffa666;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }






    /*フィルターエリア表示ボタン*/
    #SearchResultBox #btnFilterBoxOpen {
        position: fixed;
        left: 15px;
        bottom: 20px;
        padding: 10px 20px;
        border-radius: 50px;
        transition: all .5s;
        box-shadow: 1px 1px 5px #555555;
        z-index: 3;
    }

        #SearchResultBox #btnFilterBoxOpen.close {
            left: -150px;
            transition: all .5s;
        }

    #SearchResultBox #btnFilterBoxClose {
        position: fixed;
        right: -150px;
        bottom: 30px;
        padding: 10px 20px;
        border-radius: 50px;
        transition: all .5s;
        box-shadow: 1px 1px 5px #555555;
        z-index: 3;
    }

        #SearchResultBox #btnFilterBoxClose.open {
            right: 15px;
            transition: all .5s;
        }

    #SearchResultBox #FilterBoxOpenBackground {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #00000077;
        z-index: 2;
    }

    /*ソートエリア*/
    #SearchResultBox #ItemDescriptionContentBox {
        margin-bottom: 10px;
        background: #ffffff;
        padding: 10px 15px;
        border-radius: 6px;
    }

    #SearchResultBox #SortMenuBox {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 15px 20px;
        flex-wrap: wrap;
    }

        #SearchResultBox #SortMenuBox .CruiseCalendarBtn {
            width: 100%;
            text-align: right;
            padding-right: 5px;
        }

        #SearchResultBox #SortMenuBox .ItemDescriptionBtn {
            font-size: 16px;
            padding-left: 10px;
        }

        #SearchResultBox #SortMenuBox .SortMenu {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
        }

            #SearchResultBox #SortMenuBox .SortMenu .CourseSortSubTitle {
                font-size: 16px;
            }

                #SearchResultBox #SortMenuBox .SortMenu .CourseSortSubTitle .fa-spinner.hide {
                    visibility: hidden;
                }

            #SearchResultBox #SortMenuBox .SortMenu #selectCourseSort {
                width: 250px;
            }

                #SearchResultBox #SortMenuBox .SortMenu #selectCourseSort:enabled:hover {
                    cursor: pointer;
                    background: var(--ITEM-HOVER-COLOR);
                }

                #SearchResultBox #SortMenuBox .SortMenu #selectCourseSort:enabled:focus {
                    background: var(--ITEM-HOVER-COLOR);
                }

    /*詳細表示エリア*/
    #SearchResultBox #DetailBox {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

        /*フィルターエリア*/
        #SearchResultBox #DetailBox #FilterBox {
            width: 250px;
            white-space: nowrap;
            background: #ffffff;
            border-radius: 6px;
            box-shadow: var(--BOX-SHADOW-MAIN);
            white-space: normal;
            z-index: 2;
        }

            #SearchResultBox #DetailBox #FilterBox .Header {
                background: var(--DCL-COLOR);
                color: #ffffff;
                text-align: center;
                padding: 10px 0;
                border-radius: 6px 6px 0 0;
            }

            #SearchResultBox #DetailBox #FilterBox .ItemBody {
                padding: 5px 15px 20px;
            }

                #SearchResultBox #DetailBox #FilterBox .ItemBody hr {
                    margin: 10px 0;
                    border-top: dotted 1px #555555;
                }

                #SearchResultBox #DetailBox #FilterBox .ItemBody .FilterReset {
                    text-align: right;
                    margin-bottom: 10px;
                }

                    #SearchResultBox #DetailBox #FilterBox .ItemBody .FilterReset .btn {
                        font-size: 12px;
                        padding: 0;
                    }

                #SearchResultBox #DetailBox #FilterBox .ItemBody .subTitle {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    gap: 10px;
                    font-size: 16px;
                    margin-bottom: 10px;
                }

                    #SearchResultBox #DetailBox #FilterBox .ItemBody .subTitle img {
                        width: 24px;
                    }

                    #SearchResultBox #DetailBox #FilterBox .ItemBody .subTitle span {
                    }

                    #SearchResultBox #DetailBox #FilterBox .ItemBody .subTitle .btn-link {
                        padding: 0;
                        font-size: 12px;
                        margin-left: -5px;
                    }

                #SearchResultBox #DetailBox #FilterBox .ItemBody .filterItems {
                    padding-left: 10px;
                }

                    #SearchResultBox #DetailBox #FilterBox .ItemBody .filterItems label {
                        width: 100%;
                        margin: 2px 0;
                        border-radius: 2px;
                        display: flex;
                        align-items: baseline;
                    }

                        #SearchResultBox #DetailBox #FilterBox .ItemBody .filterItems label input {
                            transform: scale(1.5);
                            margin-right: 10px;
                        }

                        #SearchResultBox #DetailBox #FilterBox .ItemBody .filterItems label input,
                        #SearchResultBox #DetailBox #FilterBox .ItemBody .filterItems label:hover {
                            cursor: pointer;
                            background: var(--ITEM-HOVER-COLOR);
                        }

                        #SearchResultBox #DetailBox #FilterBox .ItemBody .filterItems label .monthUnit {
                            font-size: 10px;
                            margin-left: 2px;
                            margin-right: 5px;
                        }

                    #SearchResultBox #DetailBox #FilterBox .ItemBody .filterItems .FilterDepDayOfWeek_0 {
                        color: #ff0000;
                    }

                    #SearchResultBox #DetailBox #FilterBox .ItemBody .filterItems .FilterDepDayOfWeek_6 {
                        color: #0000ff;
                    }

                #SearchResultBox #DetailBox #FilterBox .ItemBody #minRateRangeMSG {
                    padding: 0 10px;
                    margin-bottom: 5px;
                }

                    #SearchResultBox #DetailBox #FilterBox .ItemBody #minRateRangeMSG .USDUnit {
                        font-size: 10px;
                        margin-left: 2px;
                    }

                    #SearchResultBox #DetailBox #FilterBox .ItemBody #minRateRangeMSG .rangeMark {
                        margin: 0 5px;
                    }

                #SearchResultBox #DetailBox #FilterBox .ItemBody #minRateRangeBox {
                    padding: 0 20px 0 10px;
                }

                    #SearchResultBox #DetailBox #FilterBox .ItemBody #minRateRangeBox #minRateRange {
                        border-color: var(--DCL-COLOR);
                    }

                        #SearchResultBox #DetailBox #FilterBox .ItemBody #minRateRangeBox #minRateRange .ui-slider-handle {
                            background: var(--DCL-COLOR);
                            border-color: var(--DCL-COLOR);
                        }

                            #SearchResultBox #DetailBox #FilterBox .ItemBody #minRateRangeBox #minRateRange .ui-slider-handle:last-child {
                                background: #007abb;
                                border-color: #007abb;
                            }

                        #SearchResultBox #DetailBox #FilterBox .ItemBody #minRateRangeBox #minRateRange .ui-slider-range {
                            background: var(--DCL-COLOR-LIGHT);
                        }

        /*コース一覧*/
        #SearchResultBox #DetailBox #CruiseCourseBox {
            flex: 1;
            position: relative;
        }

            #SearchResultBox #DetailBox #CruiseCourseBox .CruiseCourseProgress {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #00000055;
                border-radius: 6px;
                z-index: 1;
            }

            #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem {
                background: #ffffff;
                border-radius: 8px 6px 6px 8px;
                margin-bottom: 20px;
                box-shadow: var(--BOX-SHADOW-MAIN);
                display: flex;
                flex-direction: row;
                transition: all .2s;
            }

                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem:hover {
                    box-shadow: 0 5px 10px #aaaaaa;
                    cursor: default;
                    background: var(--ITEM-HOVER-COLOR);
                    transition: all .2s;
                }

                /*コース一覧：ヘッダー*/
                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader {
                    width: 80px;
                    text-align: center;
                    background: var(--DCL-COLOR);
                    color: #ffffff;
                    padding: 15px 0;
                    border-radius: 6px 0 0 6px;
                    position: relative;
                }

                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .CourseDate {
                        margin-top: 25px;
                        line-height: 1.1;
                    }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .CourseDate .StartYear {
                            font-size: 12px;
                        }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .CourseDate .StartDay {
                            font-size: 16px;
                        }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .CourseDate .Week {
                            font-size: 12px;
                        }

                            #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .CourseDate .Week.DayOfWeek_0 {
                                color: #ff0000;
                            }

                            #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .CourseDate .Week.DayOfWeek_6 {
                                color: #0000ff;
                            }

                            #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .CourseDate .Week.JPHoliday {
                                color: #ff0000;
                                font-size: 11px;
                                margin: 1px 0;
                            }

                            #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .CourseDate .Week.USHoliday {
                                color: #e600ff;
                                font-size: 11px;
                                margin: 1px 0;
                            }

                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .ThemeIcon {
                        position: absolute;
                        bottom: 10px;
                        left: 0;
                        right: 0;
                    }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .ThemeIcon img {
                            filter: drop-shadow(0px 0px 0px #000000);
                            width: 30px;
                        }

                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .ThemeMark {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        font-size: 10px;
                        border-radius: 0 0 0 6px;
                        padding: 1px 0 2px;
                        font-weight: bold;
                        font-family: var(--NUMERIC-FONT);
                    }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .ThemeMark.HALLOWEEN,
                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox .ThemeID_1 {
                            background: #ff7200;
                            color: #000000;
                        }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .ThemeMark.XMAS,
                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox .ThemeID_3 {
                            background: #009313;
                            color: #ffffff;
                        }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .ThemeMark.NEWYEARSEVE,
                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox .ThemeID_4 {
                            background: #f215a1;
                            color: #ffffff;
                        }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .ThemeMark.MARVEL,
                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox .ThemeID_5 {
                            background: #e61c23;
                            color: #ffffff;
                        }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .ThemeMark.STARWARS,
                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox .ThemeID_6 {
                            background: #000000;
                            color: #ffee00;
                        }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .ThemeMark.MAIDEN,
                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox .ThemeID_8 {
                            background: #0034ad;
                            color: #ffffff;
                        }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .ThemeMark.PIXAR,
                        #modal_CruiseCalendar #CruiseCalendarBox .CruiseCalendarMonth .tableTicketCalendar td .CourseCalItemBox .ThemeID_9 {
                            background: #00bb21;
                            color: #ffffff;
                        }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .ThemeMark.OTHER {
                            background: #6c757d;
                            color: #ffffff;
                        }

                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseHeader .Nights {
                        /*font-size: 16px;
                        margin-bottom: 15px;
                        background: #3dbcff;
                        border-radius: 50px;
                        display: inline-block;
                        padding: 2px 15px;*/
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        background: #3dbcff;
                        font-size: 16px;
                        padding: 3px 0 2px;
                        border-radius: 6px 0 0 0;
                    }

                /*コース一覧：ボディー*/
                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody {
                    flex: 1;
                    padding: 10px;
                    display: flex;
                    gap: 5px;
                }

                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail {
                        flex: 1;
                    }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail {
                            width: 100%;
                        }

                            #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td {
                                padding: 0;
                                line-height: 1.4;
                            }

                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Icon {
                                    width: 16px;
                                    white-space: nowrap;
                                }

                                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Icon img {
                                        vertical-align: middle;
                                    }

                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content {
                                    padding-left: 10px;
                                }

                                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .OnewayMark {
                                        background: #ff8f00;
                                        color: #ffffff;
                                        padding: 0 5px;
                                        font-size: 10px;
                                        border-radius: 2px;
                                        margin-left: 5px;
                                        display: inline-block;
                                        vertical-align: text-bottom;
                                    }

                                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .OtherList {
                                        display: flex;
                                        flex-direction: row;
                                        gap: 10px;
                                    }

                                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .OtherList:hover {
                                            background: var(--DCL-COLOR-LIGHT);
                                            border-radius: 4px;
                                            cursor: help;
                                        }

                                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .OtherList .OtherItem {
                                            display: flex;
                                            flex-direction: row;
                                            align-items: center;
                                            gap: 3px;
                                        }

                                            #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .OtherList .OtherItem .OtherIcon {
                                                display: flex;
                                                align-items: center;
                                                justify-content: center;
                                                width: 20px;
                                                height: 20px;
                                                border-radius: 50%;
                                                background: #eeeeee;
                                                color: #aaaaaa;
                                                font-size: 12px;
                                                font-weight: normal;
                                            }

                                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .OtherList .OtherItem .OtherIcon.CastawayCay {
                                                    background: #005e15;
                                                    color: #ffffff;
                                                }

                                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .OtherList .OtherItem .OtherIcon.LookoutCay {
                                                    background: #d8bd26;
                                                    color: #ffffff;
                                                }

                                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .OtherList .OtherItem .OtherIcon.SeaDay {
                                                    background: #2d68b0;
                                                    color: #ffffff;
                                                }

                                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .OtherList .OtherItem .OtherIcon.Staff {
                                                    background: #e4007f;
                                                    color: #ffffff;
                                                }

                                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .OtherList .OtherItem .OtherIcon.Theme {
                                                    background: #601986;
                                                    color: #ffffff;
                                                }

                                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .OtherList .OtherItem .OtherIcon.GTRoom {
                                                    background: #ff6c00;
                                                    color: #ffffff;
                                                }

                                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .ThemeTtle {
                                        /*background: linear-gradient(transparent 60%, #f6ff5f 60%);*/
                                    }

                                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .ThemeTtle .ThemeIcon {
                                        }

                                            #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .ThemeTtle .ThemeIcon img {
                                                width: 18px;
                                                margin: 0 0 3px 5px;
                                                /*filter: drop-shadow(1px 1px 2px #555555);*/
                                            }

                                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .ThemeMark {
                                        margin-left: 5px;
                                        background: #eeeeee;
                                        padding: 2px 5px;
                                        border-radius: 2px;
                                        font-size: 12px;
                                    }

                                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .ThemeMark.MARVEL {
                                            background: #e61c23;
                                            color: #ffffff;
                                        }

                                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .ThemeMark.STARWARS {
                                            background: #000000;
                                            color: #ffee00;
                                        }

                                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .ThemeMark.MAIDEN {
                                            background: #0034ad;
                                            color: #ffffff;
                                        }

                                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .ThemeMark.PIXAR {
                                            background: #e5f509;
                                            color: #df0909;
                                        }

                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_ThemeThumbnail {
                                }

                                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_ThemeThumbnail .ThumbnailBox {
                                        overflow: hidden;
                                        width: 250px;
                                        height: 100px;
                                        position: relative;
                                        display: inline-block;
                                        border-radius: 6px;
                                    }

                                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_ThemeThumbnail .ThumbnailBox img {
                                            position: absolute;
                                            top: 50%;
                                            left: 50%;
                                            -webkit-transform: translate(-50%, -50%);
                                            -ms-transform: translate(-50%, -50%);
                                            transform: translate(-50%, -50%);
                                            width: 100%;
                                            height: auto;
                                        }

                                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_ThemeThumbnail .ThumbnailBox .Copyright {
                                            position: absolute;
                                            bottom: 3px;
                                            right: 5px;
                                            color: #ffffff;
                                            user-select: none; /* 標準対応 */
                                            -webkit-user-select: none; /* Safari対応 */
                                            -moz-user-select: none; /* Firefox対応 */
                                            -ms-user-select: none; /* 古いIE対応 */
                                            cursor: default;
                                            font-family: var(--NUMERIC-FONT);
                                            font-size: 10px;
                                        }

                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .FullLevel {
                                    font-size: 12px;
                                }

                                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .FullLevel.WIDEOPEN {
                                        color: #009a15;
                                    }

                                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .FullLevel.NEARFULL {
                                        color: #ef7b00;
                                    }

                                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseDetail .tableCourseDetail td.TD_Content .FullLevel.VERYFULL {
                                        color: #ff0000;
                                        font-weight: bold;
                                    }

                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate {
                        width: 170px;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        justify-content: flex-end;
                    }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate .btn-link {
                            font-size: 12px;
                            margin-top: 5px;
                        }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate .RateAndBtnBox {
                            width: 100%;
                        }

                            #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate .RateAndBtnBox .CourseMinRate {
                                text-align: right;
                            }

                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate .RateAndBtnBox .CourseMinRate .LowestMinRateUSD {
                                    line-height: 1;
                                    font-size: 26px;
                                    font-weight: bold;
                                    font-family: var(--NUMERIC-FONT);
                                }

                                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate .RateAndBtnBox .CourseMinRate .LowestMinRateUSD .USDUnit {
                                        font-size: 12px;
                                        margin-left: 2px;
                                        font-weight: bold;
                                    }

                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate .RateAndBtnBox .CourseMinRate .LowestMinRateJPY {
                                    font-size: 12px;
                                    font-family: var(--NUMERIC-FONT);
                                }

                                    #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate .RateAndBtnBox .CourseMinRate .LowestMinRateJPY .JPYUnit {
                                        margin-left: 2px;
                                    }

                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate .RateAndBtnBox .CourseMinRate .SailID {
                                    font-size: 9px;
                                    line-height: 1;
                                    text-align: right;
                                    color: #cccccc;
                                }

                        #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate .DetailBTN {
                            margin-top: 5px;
                            width: 100%;
                        }

                            #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate .DetailBTN .btn {
                                width: 100%;
                            }

                                #SearchResultBox #DetailBox #CruiseCourseBox .CourseItem .CourseBody .CourseRate .DetailBTN .btn:hover {
                                    text-decoration: none;
                                }

/*####################################################################################################*/
/* 詳細料金ページ */
/*####################################################################################################*/
/*クルーズ詳細ページ*/
#CoursePage {
}

    #CoursePage .ProgressSpinnerCircleBox {
        padding: 50px 0 0;
    }

        #CoursePage .ProgressSpinnerCircleBox .Circle {
            width: 100px;
            height: 100px;
            margin: auto;
            background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%23009CEF" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z" transform="rotate(299.182 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform></path><path fill="%23009CEF" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7 c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z" transform="rotate(-238.363 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="-360 50 50" repeatCount="indefinite"></animateTransform></path><path fill="%23009CEF" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5 L82,35.7z" transform="rotate(299.182 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform></path></svg>');
            background-size: 80px 80px;
            background-repeat: no-repeat;
            background-position: center center;
        }

        #CoursePage .ProgressSpinnerCircleBox .MSG {
            text-align: center;
        }

    #CoursePage #FareCodeProgressBox {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: #00000099;
        z-index: 100;
    }

        #CoursePage #FareCodeProgressBox .ProgressMSG {
            position: absolute;
            top: 45%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%); /* Safari用 */
            transform: translate(-50%, -50%);
            background: #ffffff;
            padding: 25px 30px 20px;
            font-weight: bold;
            text-align: center;
            font-size: 16px;
            color: var(--DCL-COLOR);
            border-radius: 15px;
            white-space: nowrap;
        }

            #CoursePage #FareCodeProgressBox .ProgressMSG .fa {
                font-size: 30px;
                margin-bottom: 15px;
            }

    #CoursePage #CruiseCourseInfoBox {
    }

        #CoursePage #CruiseCourseInfoBox .CruiseCourseInfoErrMSG,
        #CoursePage #ContentPlaceHolder1_ErrMSG {
            margin-top: 50px;
            text-align: center;
            padding: 0 10px;
        }

        /*航路詳細*/
        #CoursePage #CruiseCourseInfoBox #CourseDetailsBox {
            max-width: 900px;
            width: 100%;
            padding: 30px;
            background: #ffffff;
            border-radius: 20px;
            box-shadow: var(--BOX-SHADOW-MAIN);
            margin: 0 auto 50px;
        }

            #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .DepPortImgBox {
                position: relative;
            }

                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .DepPortImgBox img {
                    border-radius: 12px;
                }

                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .DepPortImgBox .Copyright {
                    position: absolute;
                    bottom: 5px;
                    right: 15px;
                    color: #ffffff;
                    user-select: none; /* 標準対応 */
                    -webkit-user-select: none; /* Safari対応 */
                    -moz-user-select: none; /* Firefox対応 */
                    -ms-user-select: none; /* 古いIE対応 */
                    cursor: default;
                    font-family: var(--NUMERIC-FONT);
                    font-size: 12px;
                }

            #CoursePage #CruiseCourseInfoBox #CourseDetailsBox h2 {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 15px;
                margin: 30px 5px;
            }

                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox h2 .fa {
                    font-size: 40px;
                }

                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox h2 .TitleDate {
                    font-size: 16px;
                    font-weight: bold;
                }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox h2 .TitleDate .DepDate {
                    }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox h2 .TitleDate .DepPortName {
                        margin-left: 10px;
                    }

                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox h2 .TitleCourseName {
                    font-size: 30px;
                    font-weight: bold;
                }

            #CoursePage #CruiseCourseInfoBox #CourseDetailsBox #FloatingTitle {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 1;
                max-width: 900px;
                width: 100%;
                margin: 0 auto;
            }

                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox #FloatingTitle .TitleBox {
                    background: var(--DCL-COLOR);
                    color: #ffffff;
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    padding: 5px 10px;
                    box-shadow: 0 1px 5px #555555;
                }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox #FloatingTitle .TitleBox .Icon {
                        font-size: 22px;
                    }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox #FloatingTitle .TitleBox .Title {
                        line-height: 1.2;
                    }

                        #CoursePage #CruiseCourseInfoBox #CourseDetailsBox #FloatingTitle .TitleBox .Title .Date {
                            font-size: 14px;
                        }

                        #CoursePage #CruiseCourseInfoBox #CourseDetailsBox #FloatingTitle .TitleBox .Title .Course {
                            font-size: 20px;
                        }

            #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .subTitle {
                border-left: solid 15px var(--DCL-COLOR);
                padding: 10px 15px;
                font-size: 16px;
                margin-bottom: 20px;
                background: #eeeeee;
                font-weight: bold;
                border-radius: 6px;
            }

            #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox {
                display: flex;
                align-items: flex-start;
                gap: 20px;
                margin-bottom: 20px;
            }

                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .ShipImgBox {
                }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .ShipImgBox .ShipImage {
                        position: relative;
                    }

                        #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .ShipImgBox .ShipImage img {
                            width: 300px;
                            border-radius: 12px;
                        }

                        #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .ShipImgBox .ShipImage .Copyright {
                            position: absolute;
                            bottom: 5px;
                            right: 15px;
                            color: #ffffff;
                            user-select: none; /* 標準対応 */
                            -webkit-user-select: none; /* Safari対応 */
                            -moz-user-select: none; /* Firefox対応 */
                            -ms-user-select: none; /* 古いIE対応 */
                            cursor: default;
                            font-family: var(--NUMERIC-FONT);
                            font-size: 12px;
                        }

                        #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .ShipImgBox .ShipImage .ShipNameEN {
                            position: absolute;
                            bottom: 5px;
                            left: 15px;
                            color: #ffffff;
                            user-select: none; /* 標準対応 */
                            -webkit-user-select: none; /* Safari対応 */
                            -moz-user-select: none; /* Firefox対応 */
                            -ms-user-select: none; /* 古いIE対応 */
                            cursor: default;
                            font-family: var(--NUMERIC-FONT);
                            font-size: 12px;
                        }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .ShipImgBox .ThemeImage {
                        position: relative;
                        margin-top: 20px;
                    }

                        #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .ShipImgBox .ThemeImage .ThemeTitle {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            background: #00000055;
                            color: #ffffff;
                            font-size: 12px;
                            padding: 1px 10px;
                            border-radius: 12px 12px 0 0;
                            text-align: center;
                            user-select: none; /* 標準対応 */
                            -webkit-user-select: none; /* Safari対応 */
                            -moz-user-select: none; /* Firefox対応 */
                            -ms-user-select: none; /* 古いIE対応 */
                            cursor: default;
                        }

                        #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .ShipImgBox .ThemeImage img {
                            width: 300px;
                            border-radius: 12px;
                        }

                        #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .ShipImgBox .ThemeImage .Copyright {
                            position: absolute;
                            bottom: 5px;
                            right: 15px;
                            color: #ffffff;
                            user-select: none; /* 標準対応 */
                            -webkit-user-select: none; /* Safari対応 */
                            -moz-user-select: none; /* Firefox対応 */
                            -ms-user-select: none; /* 古いIE対応 */
                            cursor: default;
                            font-family: var(--NUMERIC-FONT);
                            font-size: 12px;
                        }

                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .CourseInfo {
                    flex: 1;
                }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .CourseInfo .Caption {
                        display: inline-block;
                        width: 80px;
                        font-weight: bold;
                        background: var(--DCL-COLOR-LIGHT);
                        margin: 1px 10px 1px 0;
                        padding: 0 2px;
                        border-radius: 4px;
                        text-align: center;
                        font-size: 13px;
                    }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .CourseInfo .OnewayMark {
                        background: #ff8f00;
                        color: #ffffff;
                        padding: 0 5px;
                        font-size: 10px;
                        border-radius: 2px;
                        margin-left: 5px;
                        display: inline-block;
                        vertical-align: text-bottom;
                    }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .CourseInfo hr {
                        margin: 10px 0;
                        border-top: dotted 2px #555555;
                    }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .CourseInfo .BenefitItem {
                        font-size: 12px;
                        display: inline-block;
                        margin: 0 15px 5px 0;
                    }

                        #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .CourseInfoBox .CourseInfo .BenefitItem .fa-check {
                            color: #0fb165;
                        }

            #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .PortofCallInfoBox {
                display: flex;
                align-items: flex-start;
                gap: 20px;
            }

                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .PortofCallInfoBox .CourseImgBox {
                }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .PortofCallInfoBox .CourseImgBox img {
                        width: 300px;
                        border-radius: 12px;
                    }

                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .PortofCallInfoBox .PortofCallInfo {
                    flex: 1;
                }

                    #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .PortofCallInfoBox .PortofCallInfo .tableSchedule {
                        width: 100%;
                    }

                        #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .PortofCallInfoBox .PortofCallInfo .tableSchedule td {
                            padding: 2px 5px 2px;
                            border-bottom: dotted 1px #cccccc;
                        }

                            #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .PortofCallInfoBox .PortofCallInfo .tableSchedule td.TD_Caption {
                                white-space: nowrap;
                            }

                            #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .PortofCallInfoBox .PortofCallInfo .tableSchedule td.TD_PortName {
                                width: 100%;
                            }

                                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .PortofCallInfoBox .PortofCallInfo .tableSchedule td.TD_PortName .PortName {
                                    color: var(--DCL-COLOR);
                                    font-weight: bold;
                                }

                                #CoursePage #CruiseCourseInfoBox #CourseDetailsBox .PortofCallInfoBox .PortofCallInfo .tableSchedule td.TD_PortName .ScheduleMemo {
                                    font-size: 12px;
                                }

        /*カテゴリー別料金情報*/
        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox {
            max-width: 900px;
            width: 100%;
            padding: 30px 30px 10px;
            background: #ffffff;
            border-radius: 20px;
            box-shadow: var(--BOX-SHADOW-MAIN);
            margin: auto;
        }

            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox .subTitle {
                border-left: solid 15px var(--DCL-COLOR);
                padding: 10px 15px;
                font-size: 16px;
                margin-bottom: 20px;
                background: #eeeeee;
                font-weight: bold;
                border-radius: 6px;
            }


            /*料金タイプ一覧*/
            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #FareTypeListBox {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                margin-bottom: 20px;
                white-space: nowrap;
                overflow-x: auto;
                /*scrollbar-width: none;*/
            }

                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #FareTypeListBox .btn-light {
                    display: inline-block;
                    min-width: 220px;
                    max-width: 220px;
                    height: 150px;
                    padding: 0;
                }

                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #FareTypeListBox .btn-light .FareTitle {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #aaaaaa;
                        color: #ffffff;
                        padding: 0 5px;
                        border-radius: 6px 6px 0 0;
                        font-size: 14px;
                        height: 50px;
                        line-height: 1.2;
                        white-space: normal;
                    }

                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #FareTypeListBox .btn-light .FareDescription {
                        display: block;
                        font-size: 10px;
                        white-space: normal;
                        text-align: left;
                        padding: 5px 10px;
                    }

                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #FareTypeListBox .btn-light.ErrMSG {
                        font-size: 12px;
                        text-align: left;
                        padding: 10px;
                    }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #FareTypeListBox .btn-light.ErrMSG .btn-link {
                            font-size: 12px;
                            margin-top: 10px;
                        }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #FareTypeListBox .btn-light.ErrMSG .btn-link:hover {
                                background: none;
                            }

                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #FareTypeListBox .btn-light.selected {
                        background: var(--DCL-COLOR-LIGHT);
                        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
                        height: 180px;
                    }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #FareTypeListBox .btn-light.selected .FareTitle {
                            background: var(--DCL-COLOR);
                        }

                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #FareTypeListBox .BESTPRICEOnlyMSG {
                    font-size: 12px;
                    padding: 20px 10px;
                    max-width: initial;
                    min-width: initial;
                    flex: 1;
                    text-align: left;
                    background: none;
                    border: none;
                }

                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #FareTypeListBox .FareTypeProgress {
                    font-size: 12px;
                    padding: 20px 10px;
                    max-width: initial;
                    min-width: initial;
                    flex: 1;
                    text-align: left;
                    background: none;
                    border: none;
                    color: #157347;
                    font-weight: bold;
                    opacity: 1;
                }

            /*人数情報*/
            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox .PaxChange {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox .PaxChange .PaxRemarks {
                    font-size: 12px;
                    margin-left: 10px;
                }

                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox .PaxChange #BtnSetPaxChangeForm {
                    font-size: 12px;
                }

            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #PaxInfoBox {
                display: flex;
                justify-content: space-evenly;
                margin-bottom: 20px;
            }

                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #PaxInfoBox .PaxItem {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                }

                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #PaxInfoBox .PaxItem .PaxTitle {
                        font-size: 16px;
                        font-weight: bold;
                    }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #PaxInfoBox .PaxItem .PaxTitle .paxLogo {
                            margin-right: 5px;
                        }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #PaxInfoBox .PaxItem .PaxTitle .paxLogo img {
                                width: 30px;
                                height: 30px;
                                border: solid 2px #555555;
                                border-radius: 100%;
                                background: #ffffff;
                            }

                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #PaxInfoBox .PaxItem .PaxAge {
                        font-size: 12px;
                    }

                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #PaxInfoBox .PaxItem .PaxCount {
                        font-size: 30px;
                        font-weight: bold;
                    }

                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #PaxInfoBox .PaxItem .PaxUnit {
                        font-size: 14px;
                        margin-left: 4px;
                    }

                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #PaxInfoBox .PaxItem.pax0 {
                        opacity: .2;
                    }

            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox .HR_Pax {
                margin: 20px 0 25px;
                border-top: dotted 2px #555555;
            }

            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox .DispRateType {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox .DispRateType .ExchangeRate {
                    font-size: 12px;
                    font-weight: normal;
                }

            /*カテゴリー一覧*/
            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox .DispCategory {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox .DispCategory .CategorySelectBtn {
                    font-size: 12px;
                }

                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox .DispCategory .CategorySelectBtn .btn-link {
                        font-size: 12px;
                    }

            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox {
                text-align: left;
            }

                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox {
                    margin-bottom: 20px;
                }

                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox {
                        display: flex;
                        align-items: stretch;
                        justify-content: flex-start;
                        flex-wrap: wrap;
                        gap: 10px;
                    }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType {
                            display: flex;
                            align-items: stretch;
                            border: solid 3px var(--DCL-COLOR);
                            border-radius: 6px;
                            background: var(--DCL-COLOR-LIGHT);
                        }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType label {
                                padding: 10px 15px;
                                border-radius: 2px;
                                width: 100%;
                                font-weight: bold;
                            }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType label input {
                                    transform: scale(1.5);
                                    margin: 0 10px 0 5px;
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType label .SummaryCatCodeListBox {
                                    margin-top: 5px;
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType label .SummaryCatCode {
                                    display: inline-block;
                                    margin: 2px;
                                    padding: 0 7px 1px;
                                    border-radius: 4px;
                                    font-weight: bold;
                                    font-family: var(--NUMERIC-FONT);
                                    font-size: 12px;
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType label .RoomNothing {
                                    display: inline-block;
                                    margin: 2px 0;
                                    padding: 1px 5px 0;
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType label:hover,
                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType label:hover input {
                                    background: var(--ITEM-HOVER-COLOR);
                                    cursor: pointer;
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType label input:disabled + label {
                                    opacity: .5;
                                }

                                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType label input:disabled:hover,
                                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType label input:disabled + label:hover {
                                        background: none;
                                        cursor: not-allowed;
                                    }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType.NotSelect {
                                opacity: .5;
                                background: #ffffff;
                                border-color: #aaaaaa;
                            }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType.disabled {
                                border-color: #eeeeee;
                            }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType.disabled label {
                                    background: #eeeeee;
                                    color: #aaaaaa;
                                }

                                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox #SummaryBox #RoomTypeFilterBox .RoomType.disabled label:hover {
                                        cursor: not-allowed;
                                    }

                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox {
                    border: solid 3px var(--DCL-COLOR);
                    margin-bottom: 30px;
                    border-radius: 6px;
                }

                    /*ヘッダー*/
                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryHeader {
                        background: var(--DCL-COLOR);
                        color: #ffffff;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 20px;
                        padding: 10px 15px 13px 15px;
                    }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryHeader .CategoryCodeBox {
                            background: #eeeeee;
                            border-radius: 7px;
                            width: 100px;
                            box-shadow: 2px 2px 3px #555555;
                        }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryHeader .CategoryCodeBox .Caption {
                                font-size: 10px;
                                text-align: center;
                                background: #eeeeee;
                                color: #555555;
                                font-weight: bold;
                                border-radius: 6px 6px 0 0;
                                padding: 1px 5px;
                                white-space: nowrap;
                            }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryHeader .CategoryCodeBox .CategoryCode {
                                font-size: 28px;
                                border-radius: 0 0 6px 6px;
                                height: 50px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-family: var(--NUMERIC-FONT);
                                font-weight: bold;
                            }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryHeader .CabinType {
                            font-size: 12px;
                        }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryHeader .CategoryTitle {
                            font-size: 22px;
                            line-height: 1.2;
                        }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryHeader .CategoryTitle .Note {
                                font-size: 12px;
                            }

                    /*GTYアナウンス*/
                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .RoomImportantInfoBox {
                        background: #ffeded;
                        padding: 10px 15px;
                        color: #ff0000;
                        font-size: 12px;
                    }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .RoomImportantInfoBox .InfoCaption {
                            font-weight: bold;
                            font-size: 14px;
                        }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .RoomImportantInfoBox .InfoCaption span {
                                background: #ff0000;
                                color: #ffff;
                                padding: 1px 10px 0;
                                border-radius: 50px;
                                margin-right: 10px;
                                display: inline-block;
                                font-weight: normal;
                            }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .RoomImportantInfoBox ul {
                            list-style: disc;
                            padding-left: 30px;
                            margin: 5px 0 0;
                        }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .RoomImportantInfoBox ul li {
                            }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .RoomImportantInfoBox.Concierge {
                            color: #157347;
                        }

                    /*カテゴリー詳細*/
                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody {
                        display: flex;
                        flex-direction: row;
                    }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryImages {
                            width: 250px;
                            padding: 10px;
                        }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryImages .Room {
                                position: relative;
                                cursor: pointer;
                            }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryImages .Room img {
                                    border-radius: 4px;
                                    border: solid 1px var(--DCL-COLOR);
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryImages .Room .Copyright {
                                    position: absolute;
                                    bottom: 3px;
                                    right: 5px;
                                    color: #ffffff;
                                    user-select: none;
                                    -webkit-user-select: none;
                                    -moz-user-select: none;
                                    -ms-user-select: none;
                                    cursor: default;
                                    font-family: var(--NUMERIC-FONT);
                                    font-size: 10px;
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryImages .Room .RoomImageIcon {
                                    position: absolute;
                                    top: 1px;
                                    left: 6px;
                                    font-size: 20px;
                                    color: var(--DCL-COLOR);
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryImages .Room .Copyright + .RoomImageIcon {
                                    color: #ffffff;
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryImages .Room:hover {
                                    opacity: .6;
                                }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryImages .ViewDeckPlanBox {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                margin-top: 5px;
                            }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryImages .ViewDeckPlanBox .btn-link {
                                    font-size: 12px;
                                }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryDescription {
                            flex: 1;
                            font-size: 12px;
                            padding: 10px 0;
                        }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryDescription .Description {
                            }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryDescription .Description .DescriptionDispBtn {
                                    display: none;
                                    margin-bottom: 5px;
                                }

                                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryDescription .Description .DescriptionDispBtn .btn-link {
                                        font-size: 14px;
                                    }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryDescription .Description .DescriptionMSG {
                                }

                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo {
                            width: 200px;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            justify-content: space-between;
                            padding: 10px;
                        }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox {
                                width: 100%;
                                text-align: right;
                            }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBtn {
                                    text-align: right;
                                    margin: -5px 0 5px;
                                }

                                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBtn .btn-link {
                                        font-size: 12px;
                                    }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox {
                                }

                                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates {
                                        /*width: 100%;*/
                                        font-size: 12px;
                                        font-weight: bold;
                                        margin-left: auto;
                                    }

                                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates td {
                                            padding: 0 0;
                                            vertical-align: middle;
                                        }

                                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates td.TD_Pax {
                                                /*width: 100%;*/
                                                white-space: nowrap;
                                                text-align: right;
                                            }

                                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates td.TD_Rate {
                                                white-space: nowrap;
                                                text-align: right;
                                                padding-left: 10px;
                                                font-family: var(--NUMERIC-FONT);
                                            }

                                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates td.TD_Info {
                                                font-size: 10px;
                                            }

                                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates td.TD_Info.Total {
                                                    color: #ff0000;
                                                }

                                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates td.TD_Info.Deposit {
                                                    color: #157347;
                                                }

                                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates td.TD_Rate.Total {
                                                color: #ff0000;
                                            }

                                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates td.TD_Rate.Deposit {
                                                color: #157347;
                                            }

                                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates td .paxUnit,
                                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates td .RateUnit {
                                                font-size: 10px;
                                                margin-left: 2px;
                                            }

                                        #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .tablePassengerRates .HR_line {
                                            margin: 2px 0;
                                            border-top: dotted 1px #555555;
                                        }

                                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox .PassengerRatesRemarks {
                                        font-size: 10px;
                                        font-weight: bold;
                                        text-align: right;
                                    }

                                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .PassengerRatesBox hr {
                                        margin: 10px 0;
                                        border-top: dotted 2px #555555;
                                    }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .CategoryTotalRateCaption {
                                    font-size: 10px;
                                    font-weight: bold;
                                    font-family: var(--NUMERIC-FONT);
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .CategoryTotalRate_USD {
                                    font-family: var(--NUMERIC-FONT);
                                    font-size: 26px;
                                    font-weight: bold;
                                    text-align: right;
                                    line-height: 1;
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .CategoryTotalRate_JPY {
                                    font-family: var(--NUMERIC-FONT);
                                    font-size: 12px;
                                    font-weight: bold;
                                    text-align: right;
                                    line-height: 1;
                                    margin-bottom: 3px;
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .RateUnit {
                                    font-size: 10px;
                                    margin-left: 2px;
                                }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CategoryRateBox .cancelInfoLink {
                                    font-size: 11px;
                                }

                            #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CruiseBookBtn {
                                margin-top: 10px;
                                width: 100%;
                            }

                                #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CruiseBookBtn .btn {
                                    width: 100%;
                                    font-size: 20px;
                                }

                                    #CoursePage #CruiseCourseInfoBox #CruiseCategoryRateListBox #CategoryRateListBox .CategoryItemBox .CategoryBody .CategoryRateInfo .CruiseBookBtn .btn .btnCategory {
                                        font-size: 12px;
                                    }

/*乗船人数変更モーダル*/
#modal_PaxChange {
}

    #modal_PaxChange .modal-body {
        padding: 15px 30px;
    }

        #modal_PaxChange .modal-body .CruiseTitle {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 15px;
        }

        #modal_PaxChange .modal-body hr {
            margin: 10px 0;
            border-top: dotted 2px #555555;
        }

        #modal_PaxChange .modal-body .CruiseTitle .fa {
            font-size: 40px;
        }

        #modal_PaxChange .modal-body .CruiseTitle .TitleDate {
            font-size: 14px;
            font-weight: bold;
        }

        #modal_PaxChange .modal-body .CruiseTitle .TitleCourseName {
            font-size: 26px;
            font-weight: bold;
        }

        #modal_PaxChange .modal-body .PaxFormBox {
            display: flex;
            align-items: center;
            padding: 10px 10px;
        }

            #modal_PaxChange .modal-body .PaxFormBox .PaxTitle {
                font-size: 16px;
                font-weight: bold;
                width: 400px;
            }

                #modal_PaxChange .modal-body .PaxFormBox .PaxTitle .paxLogo {
                    margin-right: 10px;
                }

                    #modal_PaxChange .modal-body .PaxFormBox .PaxTitle .paxLogo img {
                        width: 30px;
                        height: 30px;
                        border: solid 2px #555555;
                        border-radius: 100%;
                        background: #ffffff;
                    }

        #modal_PaxChange .modal-body #PaxStatus {
            text-align: right;
            font-size: 18px;
            font-weight: bold;
            padding-right: 20px;
        }

            #modal_PaxChange .modal-body #PaxStatus .ErrMSG {
                color: var(--SYSTEM-RED);
            }

            #modal_PaxChange .modal-body #PaxStatus .paxUnit {
                font-size: 14px;
                margin-left: 5px;
            }

        #modal_PaxChange .modal-body .PaxFormBtn {
            text-align: center;
            margin: 20px 0 10px;
        }

            #modal_PaxChange .modal-body .PaxFormBtn #btnChangePax {
                width: 300px;
                padding: 15px 0;
                border-radius: 50px;
            }

                #modal_PaxChange .modal-body .PaxFormBtn #btnChangePax.disabled {
                    opacity: .3;
                }

/*カテゴリー画像モーダル*/
#modal_RoomImage {
}

    #modal_RoomImage .modal-body {
        /*padding: 30px;*/
    }

    #modal_RoomImage .modal-header .modal_RoomImage_CategoryCode {
        background: var(--DCL-COLOR);
        color: #ffffff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        padding: 0 0 5px;
        border-radius: 12px;
    }

        #modal_RoomImage .modal-header .modal_RoomImage_CategoryCode .CategoryCodeBox {
            background: #eeeeee;
            border-radius: 7px;
            width: 100px;
            box-shadow: 2px 2px 3px #555555;
        }

            #modal_RoomImage .modal-header .modal_RoomImage_CategoryCode .CategoryCodeBox .Caption {
                font-size: 10px;
                text-align: center;
                background: #eeeeee;
                color: #555555;
                font-weight: bold;
                border-radius: 6px 6px 0 0;
                padding: 1px 5px;
                white-space: nowrap;
            }

            #modal_RoomImage .modal-header .modal_RoomImage_CategoryCode .CategoryCodeBox .CategoryCode {
                font-size: 28px;
                border-radius: 0 0 6px 6px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: var(--NUMERIC-FONT);
                font-weight: bold;
            }

        #modal_RoomImage .modal-header .modal_RoomImage_CategoryCode .CabinType {
            font-size: 12px;
        }

        #modal_RoomImage .modal-header .modal_RoomImage_CategoryCode .CategoryTitle {
            font-size: 22px;
            line-height: 1.2;
        }

            #modal_RoomImage .modal-header .modal_RoomImage_CategoryCode .CategoryTitle .Note {
                font-size: 12px;
            }

    #modal_RoomImage .CategoryInfoBox {
    }

        #modal_RoomImage .CategoryInfoBox .modal_RoomImage_Description {
            padding: 0 10px;
            margin-bottom: 20px;
            font-size: 12px;
        }

        #modal_RoomImage .CategoryInfoBox .modal_RoomImage_StateRoomImage {
        }

            #modal_RoomImage .CategoryInfoBox .modal_RoomImage_StateRoomImage .RoomPlanImage {
                margin: 10px 0 50px;
                text-align: center;
            }

                #modal_RoomImage .CategoryInfoBox .modal_RoomImage_StateRoomImage .RoomPlanImage img {
                    max-width: 500px;
                    width: 100%;
                }

            #modal_RoomImage .CategoryInfoBox .modal_RoomImage_StateRoomImage .RoomImageBox {
                display: flex;
                justify-content: center;
                margin-bottom: 15px;
            }

                #modal_RoomImage .CategoryInfoBox .modal_RoomImage_StateRoomImage .RoomImageBox .RoomImage {
                    position: relative;
                }

                    #modal_RoomImage .CategoryInfoBox .modal_RoomImage_StateRoomImage .RoomImageBox .RoomImage img {
                        border-radius: 12px;
                        max-width: 500px;
                        width: 100%;
                    }

                    #modal_RoomImage .CategoryInfoBox .modal_RoomImage_StateRoomImage .RoomImageBox .RoomImage .Copyright {
                        position: absolute;
                        bottom: 5px;
                        right: 10px;
                        color: #ffffff;
                        user-select: none; /* 標準対応 */
                        -webkit-user-select: none; /* Safari対応 */
                        -moz-user-select: none; /* Firefox対応 */
                        -ms-user-select: none; /* 古いIE対応 */
                        cursor: default;
                        font-family: var(--NUMERIC-FONT);
                        font-size: 12px;
                    }

            #modal_RoomImage .CategoryInfoBox .modal_RoomImage_StateRoomImage .footerInfo {
                max-width: 500px;
                width: 100%;
                margin: 0 auto 10px;
            }

                #modal_RoomImage .CategoryInfoBox .modal_RoomImage_StateRoomImage .footerInfo .MSG1 {
                    font-size: 10px;
                    text-align: right;
                }

                #modal_RoomImage .CategoryInfoBox .modal_RoomImage_StateRoomImage .footerInfo .MSG2 {
                    font-size: 12px;
                    margin-top: 20px;
                }


/*デッキプランモーダル*/
#modal_DeckPlan {
}

    #modal_DeckPlan .modal_Title {
    }

        #modal_DeckPlan .modal_Title .title_ShipName {
            font-size: 14px;
        }

    #modal_DeckPlan .modal-body {
    }

        #modal_DeckPlan .modal-body #DeckPlanBox .ModalProgressCircleBox {
            flex: 1;
            width: 100%;
            padding: 30px 0;
        }

            #modal_DeckPlan .modal-body #DeckPlanBox .ModalProgressCircleBox .Circle {
                width: 100px;
                height: 100px;
                margin: auto;
                background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%23009CEF" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z" transform="rotate(299.182 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform></path><path fill="%23009CEF" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7 c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z" transform="rotate(-238.363 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="-360 50 50" repeatCount="indefinite"></animateTransform></path><path fill="%23009CEF" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5 L82,35.7z" transform="rotate(299.182 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform></path></svg>');
                background-size: 80px 80px;
                background-repeat: no-repeat;
                background-position: center center;
            }

            #modal_DeckPlan .modal-body #DeckPlanBox .ModalProgressCircleBox .ProgressMSG {
                text-align: center;
            }

    #modal_DeckPlan #DeckPlanBox {
        display: flex;
        align-items: flex-start;
        gap: 5px;
    }

        #modal_DeckPlan #DeckPlanBox .DeckNoListBox {
            flex: 1;
            height: 600px;
            overflow-y: auto;
            padding-right: 5px;
        }

            #modal_DeckPlan #DeckPlanBox .DeckNoListBox::-webkit-scrollbar {
                width: 8px; /* Chrome/Safari用 */
                background: none;
                border-radius: 50px;
            }

            #modal_DeckPlan #DeckPlanBox .DeckNoListBox::-webkit-scrollbar-thumb {
                background: var(--DCL-COLOR-LIGHT);
                border-radius: 50px;
            }

                #modal_DeckPlan #DeckPlanBox .DeckNoListBox::-webkit-scrollbar-thumb:hover {
                    background: var(--DCL-COLOR);
                    cursor: pointer;
                }

            #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm {
                border: solid 1px var(--DCL-COLOR);
                padding: 5px 15px;
                border-radius: 6px;
                margin-bottom: 20px;
            }

                #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm .input-group {
                    margin: 10px 0;
                }

                    #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm .input-group .form-control:focus,
                    #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm .input-group .form-select:focus {
                        background: var(--ITEM-HOVER-COLOR);
                    }

                    #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm .input-group .form-select:hover {
                        cursor: pointer;
                    }

                #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status {
                    font-size: 13px;
                    padding-bottom: 10px;
                }

                    #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .SearchCategoryClearBtn {
                        margin-top: -5px;
                        text-align: right;
                    }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .SearchCategoryClearBtn .btn-link {
                            font-size: 13px;
                        }

                    #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .CategoryTitleJP {
                        border-left: solid 10px #aaaaaa;
                        padding-left: 5px;
                        margin-bottom: 10px;
                    }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .CategoryTitleJP .CategoryCode {
                            font-size: 14px;
                            font-weight: bold;
                        }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .CategoryTitleJP .CategoryTitle {
                            font-size: 10px;
                            line-height: 1.2;
                        }

                    #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .SearchCategoryCode_DeckNo {
                        font-size: 14px;
                        font-weight: bold;
                        margin: 10px 0 5px;
                    }

                    #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .btnCabin {
                        padding: 0 3px 1px;
                        font-size: 12px;
                        border-radius: 4px;
                        border: none;
                        margin: 0 1px 1px 0;
                        transition: all .2s;
                    }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .btnCabin:hover {
                            transform: scale(1.2);
                            transition: all .2s;
                            background: #ff0000 !important;
                            color: #ffffff !important;
                        }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .btnCabin.resultCabinNo {
                            font-size: 16px;
                            padding: 2px 15px 3px;
                        }

                    #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .SearchCabinNoBtn {
                        margin-top: 10px;
                    }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .SearchCabinNoBtn .btn-link {
                            font-size: 14px;
                        }

                    #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_SearchForm #DeckNoList_SearchForm_Status .btnClear {
                        font-size: 13px;
                    }

            #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList {
                display: flex;
                align-items: flex-start;
                gap: 10px;
            }

                #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_No {
                    position: sticky;
                    top: 0;
                }

                    #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_No .DeckNoBox {
                        border-left: solid 10px var(--DCL-COLOR);
                        padding: 1px 5px;
                        margin-bottom: 1px;
                        background: #eeeeee;
                        border-radius: 2px;
                        white-space: nowrap;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-weight: bold;
                        gap: 3px;
                        transition: all .2s;
                    }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_No .DeckNoBox:hover {
                            cursor: pointer;
                            background: var(--ITEM-HOVER-COLOR);
                            transform: translate(5px, 0);
                            transition: all .2s;
                        }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_No .DeckNoBox .CabinCount {
                            font-size: 12px;
                        }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_No .DeckNoBox .CabinNothing {
                            font-size: 12px;
                            font-weight: normal;
                            color: #aaaaaa;
                        }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_No .DeckNoBox.Active {
                            background: var(--DCL-COLOR);
                            color: #ffffff;
                            border-color: #ff0000;
                            transform: translate(5px, 0);
                            transition: all .2s;
                        }

                #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_CabinItems {
                }

                    #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_CabinItems .Deck_CabinList {
                        border: solid 1px var(--DCL-COLOR);
                        border-radius: 6px;
                        padding: 5px 5px;
                        font-size: 12px;
                    }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_CabinItems .Deck_CabinList .CabinNoListTitle {
                            border-left: solid 10px #aaaaaa;
                            padding-left: 5px;
                            margin: 5px 0;
                        }

                            #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_CabinItems .Deck_CabinList .CabinNoListTitle .CategoryCode {
                                font-size: 14px;
                                font-weight: bold;
                            }

                            #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_CabinItems .Deck_CabinList .CabinNoListTitle .CategoryTitle {
                                font-size: 10px;
                                line-height: 1.2;
                            }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_CabinItems .Deck_CabinList .CabinNoListBox {
                        }

                            #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_CabinItems .Deck_CabinList .CabinNoListBox .btnCabin {
                                padding: 0 3px 1px;
                                font-size: 12px;
                                border-radius: 4px;
                                border: none;
                                margin: 0 1px 1px 0;
                                transition: all .2s;
                            }

                                #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_CabinItems .Deck_CabinList .CabinNoListBox .btnCabin:hover {
                                    transform: scale(1.2);
                                    transition: all .2s;
                                    background: #ff0000 !important;
                                    color: #ffffff !important;
                                }

                        #modal_DeckPlan #DeckPlanBox .DeckNoListBox .DeckNoList_DeckList .DeckList_CabinItems .Deck_CabinList.Nothing {
                            padding: 0;
                            font-size: 12px;
                            border: none;
                        }

        #modal_DeckPlan #DeckPlanBox .DeckImageBox {
            position: relative;
            width: 370px;
            height: 600px;
            overflow-y: auto;
        }

            #modal_DeckPlan #DeckPlanBox .DeckImageBox::-webkit-scrollbar {
                width: 8px; /* Chrome/Safari用 */
                background: none;
                border-radius: 50px;
            }

            #modal_DeckPlan #DeckPlanBox .DeckImageBox::-webkit-scrollbar-thumb {
                background: var(--DCL-COLOR-LIGHT);
                border-radius: 50px;
            }

                #modal_DeckPlan #DeckPlanBox .DeckImageBox::-webkit-scrollbar-thumb:hover {
                    background: var(--DCL-COLOR);
                    cursor: pointer;
                }

            #modal_DeckPlan #DeckPlanBox .DeckImageBox #CabinPositionMark {
                position: absolute;
                top: 0;
                left: 0;
                transform: rotate(45deg);
                transition: all .5s;
                -webkit-animation: blink .5s ease-in-out infinite alternate;
                -moz-animation: blink .5s ease-in-out infinite alternate;
                animation: blink .5s ease-in-out infinite alternate;
            }

            #modal_DeckPlan #DeckPlanBox .DeckImageBox .DeckCaption {
                position: absolute;
                top: 0;
                left: 0;
                background: var(--DCL-COLOR);
                color: #ffffff;
                padding: 5px 15px 3px;
                border-radius: 50px;
                border: solid 3px #ffffff;
            }

    #modal_DeckPlan .modal-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

        #modal_DeckPlan .modal-footer #LinkDeckPlanURL {
            font-size: 14px;
        }

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*####################################################################################################*/
/*予約カートモーダル*/
/*####################################################################################################*/
/*予約カート：ヘッダー*/
#modal_Cart .modal-header {
    /*background: #198754;*/
}

    #modal_Cart .modal-header .modal_Title {
        line-height: 1.2;
    }

        #modal_Cart .modal-header .modal_Title .TitleDate {
            font-size: 14px;
        }

            #modal_Cart .modal-header .modal_Title .TitleDate .TitlePort {
                display: inline-block;
            }

        #modal_Cart .modal-header .modal_Title .TitleCourseName {
            font-size: 20px;
        }

        #modal_Cart .modal-header .modal_Title .TitleShipName {
            font-size: 12px;
        }

/*予約カート：プログレス表示*/
#modal_Cart .modal-body .ModalProgressCircleBox {
    flex: 1;
    width: 100%;
    padding: 0;
}

    #modal_Cart .modal-body .ModalProgressCircleBox .Circle {
        width: 80px;
        height: 80px;
        margin: auto;
        background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%23009CEF" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z" transform="rotate(299.182 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform></path><path fill="%23009CEF" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7 c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z" transform="rotate(-238.363 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="-360 50 50" repeatCount="indefinite"></animateTransform></path><path fill="%23009CEF" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5 L82,35.7z" transform="rotate(299.182 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform></path></svg>');
        background-size: 60px 60px;
        background-repeat: no-repeat;
        background-position: center center;
    }

    #modal_Cart .modal-body .ModalProgressCircleBox .CircleCart {
        width: 80px;
        height: 80px;
        margin: auto;
        background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%23198754" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z" transform="rotate(299.182 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform></path><path fill="%23198754" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7 c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z" transform="rotate(-238.363 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="-360 50 50" repeatCount="indefinite"></animateTransform></path><path fill="%23198754" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5 L82,35.7z" transform="rotate(299.182 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform></path></svg>');
        background-size: 60px 60px;
        background-repeat: no-repeat;
        background-position: center center;
    }

    #modal_Cart .modal-body .ModalProgressCircleBox .ProgressMSG {
        text-align: center;
    }

/*予約カート：共通*/
#modal_Cart .modal-body {
    padding-top: 0;
    padding-bottom: 300px;
}

    #modal_Cart .modal-body::-webkit-scrollbar {
        width: 5px; /* Chrome/Safari用 */
        background: none;
        border-radius: 50px;
    }

    #modal_Cart .modal-body::-webkit-scrollbar-thumb {
        background: var(--DCL-COLOR-LIGHT);
        border-radius: 50px;
    }

        #modal_Cart .modal-body::-webkit-scrollbar-thumb:hover {
            background: var(--DCL-COLOR);
            cursor: pointer;
        }

#modal_Cart .modal-footer {
}

    #modal_Cart .modal-footer .HoldCountdownBox {
        margin: 0;
    }

        #modal_Cart .modal-footer .HoldCountdownBox #HoldCountdown {
            font-size: 20px;
            font-weight: bold;
            font-family: var(--NUMERIC-FONT);
            /*line-height: 1;*/
            transition: all .2s;
        }

            #modal_Cart .modal-footer .HoldCountdownBox #HoldCountdown.Alert {
                color: var(--SYSTEM-RED);
                font-size: 30px;
                transition: all .2s;
            }

            #modal_Cart .modal-footer .HoldCountdownBox #HoldCountdown .HoldCountdownEndMSG {
                font-size: 14px;
                background: var(--SYSTEM-RED);
                color: #ffffff;
                padding: 10px;
                border-radius: 4px;
                margin-bottom: 5px;
            }

        #modal_Cart .modal-footer .HoldCountdownBox .progress {
            height: 10px;
        }

    #modal_Cart .modal-footer .CartFooterBtnBox {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        #modal_Cart .modal-footer .CartFooterBtnBox #btnCloseCartModal.disabled {
            opacity: .3;
        }

#modal_Cart #CruiseCartBox {
}

    #modal_Cart #CruiseCartBox .CruiseCartGUID {
        text-align: right;
        font-size: 10px;
        color: #aaaaaa;
        font-family: var(--NUMERIC-FONT);
    }

    #modal_Cart #CruiseCartBox .CartArrowDown {
        margin: 5px 0;
        color: #198754;
        padding-left: 10px;
    }

        #modal_Cart #CruiseCartBox .CartArrowDown .fa {
            transform: scale(1.5);
        }

    #modal_Cart #CruiseCartBox .CartItemBox {
        border-radius: 6px;
    }

        #modal_Cart #CruiseCartBox .CartItemBox .ItemBoxTitle {
            background: #19875422;
            border: solid 1px #198754;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all .2s;
        }

            #modal_Cart #CruiseCartBox .CartItemBox .ItemBoxTitle.open {
                border-radius: 6px 6px 0 0;
                transition: all .2s;
            }

            #modal_Cart #CruiseCartBox .CartItemBox .ItemBoxTitle .BoxNo {
                width: 40px;
                display: inline-block;
                background: #198754;
                color: #ffffff;
                text-align: center;
                padding: 10px 0;
            }

            #modal_Cart #CruiseCartBox .CartItemBox .ItemBoxTitle .fa {
                margin-left: 10px;
            }

            #modal_Cart #CruiseCartBox .CartItemBox .ItemBoxTitle .CheckMark {
                color: #f3702f;
                font-size: 24px;
                padding-right: 15px;
            }

        #modal_Cart #CruiseCartBox .CartItemBox .CartContent {
            border-left: solid 1px #198754;
            border-right: solid 1px #198754;
            border-bottom: solid 1px #198754;
            border-radius: 0 0 6px 6px;
            padding: 20px 10px;
            transition: all .2s;
        }

            #modal_Cart #CruiseCartBox .CartItemBox .CartContent.checked {
                background: #eeeeee;
                transition: all .2s;
            }

            #modal_Cart #CruiseCartBox .CartItemBox .CartContent .btnItemReload {
                font-size: 14px;
                border: none;
            }

    /*次へボタン*/
    #modal_Cart #CruiseCartBox .btnCheckoutBox {
        text-align: center;
        margin-top: 30px;
    }

        #modal_Cart #CruiseCartBox .btnCheckoutBox .btnCheckout {
            border-radius: 50px;
            padding: 5px 5px;
            width: 300px;
        }

        #modal_Cart #CruiseCartBox .btnCheckoutBox .btnCheckou.disabled {
            opacity: .3;
        }

    #modal_Cart #CruiseCartBox .CartNextBtnBox {
    }

        #modal_Cart #CruiseCartBox .CartNextBtnBox hr {
            margin: 50px 0 20px;
            border-top: dotted 1px #198754;
            opacity: .25;
        }

        #modal_Cart #CruiseCartBox .CartNextBtnBox .CartBtn {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
        }

            #modal_Cart #CruiseCartBox .CartNextBtnBox .CartBtn .btn {
                border-radius: 50px;
                padding: 10px 5px;
                width: 200px;
            }

                #modal_Cart #CruiseCartBox .CartNextBtnBox .CartBtn .btn.disabled {
                    opacity: .3;
                }

/*予約カート：選択アイテム*/
#modal_Cart #SelectedItemBox {
    margin-top: 10px;
}

    #modal_Cart #SelectedItemBox .SelectedCategoryErrMSG {
        text-align: center;
        margin-top: 30px;
        font-weight: bold;
        color: var(--SYSTEM-RED);
    }

    #modal_Cart #SelectedItemBox .SelectedCategory {
        background: #e4f6ff;
        border: solid 5px var(--DCL-COLOR);
        padding: 15px;
        border-radius: 16px;
    }

        #modal_Cart #SelectedItemBox .SelectedCategory .PaxRemarks {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
        }

            #modal_Cart #SelectedItemBox .SelectedCategory .PaxRemarks .btn-link {
                font-size: 12px;
                border: none;
            }

        #modal_Cart #SelectedItemBox .SelectedCategory .PaxInfoBox {
            display: flex;
            gap: 20px;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }

            #modal_Cart #SelectedItemBox .SelectedCategory .PaxInfoBox .PaxBox {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                text-align: center;
            }

                #modal_Cart #SelectedItemBox .SelectedCategory .PaxInfoBox .PaxBox .PaxName {
                    font-weight: bold;
                    line-height: 1.2;
                    font-size: 18px;
                }

                    #modal_Cart #SelectedItemBox .SelectedCategory .PaxInfoBox .PaxBox .PaxName .AgeRange {
                        font-size: 10px;
                        font-weight: normal;
                    }

                #modal_Cart #SelectedItemBox .SelectedCategory .PaxInfoBox .PaxBox .PaxCount {
                    font-size: 30px;
                    font-weight: bold;
                }

                    #modal_Cart #SelectedItemBox .SelectedCategory .PaxInfoBox .PaxBox .PaxCount .paxUnit {
                        font-size: 12px;
                        font-weight: normal;
                        margin-left: 5px;
                    }

    #modal_Cart #SelectedItemBox hr {
        margin: 15px 0;
        border-top: dotted 1px #555555;
    }

    #modal_Cart #SelectedItemBox .SelectedCategory .CategoryInfo {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
    }

        #modal_Cart #SelectedItemBox .SelectedCategory .CategoryInfo .CategoryImageBox {
            position: relative;
        }

            #modal_Cart #SelectedItemBox .SelectedCategory .CategoryInfo .CategoryImageBox img {
                max-width: 150px;
                border-radius: 6px;
                border: solid 1px #eeeeee;
            }

            #modal_Cart #SelectedItemBox .SelectedCategory .CategoryInfo .CategoryImageBox .Copyright {
                position: absolute;
                bottom: 3px;
                right: 5px;
                color: #ffffff;
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                cursor: default;
                font-family: var(--NUMERIC-FONT);
                font-size: 10px;
            }

        #modal_Cart #SelectedItemBox .SelectedCategory .CategoryInfo .CategoryCodeBox {
            background: #eeeeee;
            border-radius: 7px;
            box-shadow: 2px 2px 3px #555555;
        }

            #modal_Cart #SelectedItemBox .SelectedCategory .CategoryInfo .CategoryCodeBox .Caption {
                font-size: 10px;
                text-align: center;
                background: #eeeeee;
                color: #555555;
                font-weight: bold;
                border-radius: 6px 6px 0 0;
                padding: 1px 15px;
                white-space: nowrap;
            }

            #modal_Cart #SelectedItemBox .SelectedCategory .CategoryInfo .CategoryCodeBox .CategoryCode {
                font-size: 28px;
                border-radius: 0 0 6px 6px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: var(--NUMERIC-FONT);
                font-weight: bold;
            }

        #modal_Cart #SelectedItemBox .SelectedCategory .CategoryInfo .CategoryTitleJP {
            font-size: 20px;
            font-weight: bold;
            line-height: 1.2;
        }

            #modal_Cart #SelectedItemBox .SelectedCategory .CategoryInfo .CategoryTitleJP .CabinType {
                font-size: 14px;
            }

            #modal_Cart #SelectedItemBox .SelectedCategory .CategoryInfo .CategoryTitleJP .Note {
                font-size: 14px;
            }

    #modal_Cart #SelectedItemBox .SelectedCategory .RateInfo {
        text-align: right;
    }

        #modal_Cart #SelectedItemBox .SelectedCategory .RateInfo .USD {
            font-family: var(--NUMERIC-FONT);
            font-size: 26px;
            font-weight: bold;
            line-height: 1.2;
        }

            #modal_Cart #SelectedItemBox .SelectedCategory .RateInfo .USD .RateUSDInfo {
                font-size: 12px;
                margin-right: 10px;
            }

                #modal_Cart #SelectedItemBox .SelectedCategory .RateInfo .USD .RateUSDInfo .PaxCount {
                    font-size: 16px;
                    margin-right: 2px;
                }

            #modal_Cart #SelectedItemBox .SelectedCategory .RateInfo .USD .USDUnit {
                font-size: 12px;
                margin-left: 2px;
            }

        #modal_Cart #SelectedItemBox .SelectedCategory .RateInfo .JPY {
            font-family: var(--NUMERIC-FONT);
            font-size: 12px;
            font-weight: bold;
        }

            #modal_Cart #SelectedItemBox .SelectedCategory .RateInfo .JPY .RateUSDInfo {
                font-size: 11px;
                font-weight: normal;
            }

            #modal_Cart #SelectedItemBox .SelectedCategory .RateInfo .JPY .JPYUnit {
                font-size: 10px;
                margin-left: 2px;
            }

    /*アップグレード料金*/
    #modal_Cart #SelectedItemBox .UpGradeTitle {
        color: var(--DCL-COLOR);
        font-weight: bold;
        margin-top: 15px;
        font-size: 16px;
    }

        #modal_Cart #SelectedItemBox .UpGradeTitle .TitleMSG {
            background: var(--DCL-COLOR);
            color: #ffffff;
            display: inline-block;
            border-radius: 50px;
            padding: 3px 20px 5px;
        }

            #modal_Cart #SelectedItemBox .UpGradeTitle .TitleMSG .UpMinRate {
                color: #fff900;
                text-shadow: 1px 1px 1px #555555;
                margin-left: 10px;
                font-size: 20px;
                font-family: var(--NUMERIC-FONT);
            }

                #modal_Cart #SelectedItemBox .UpGradeTitle .TitleMSG .UpMinRate .USDUnit {
                    font-size: 10px;
                    margin-left: 2px;
                }

    #modal_Cart #SelectedItemBox .UpGradeInfo {
        white-space: nowrap;
        overflow-x: auto;
        padding: 20px 0 10px;
        display: flex;
        align-items: stretch;
        gap: 2px;
    }

        #modal_Cart #SelectedItemBox .UpGradeInfo::-webkit-scrollbar {
            height: 8px; /* Chrome/Safari用 */
            background: none;
            border-radius: 50px;
        }

        #modal_Cart #SelectedItemBox .UpGradeInfo::-webkit-scrollbar-thumb {
            background: var(--DCL-COLOR-LIGHT);
            border-radius: 50px;
        }

            #modal_Cart #SelectedItemBox .UpGradeInfo::-webkit-scrollbar-thumb:hover {
                background: var(--DCL-COLOR);
                cursor: pointer;
            }

        #modal_Cart #SelectedItemBox .UpGradeInfo .btn-light {
            padding: 3px 5px 5px;
            transition: all .2s;
            background: #FFF9D7;
            border: solid 3px #fff3af;
        }

            #modal_Cart #SelectedItemBox .UpGradeInfo .btn-light .UpCategoryCode {
                margin-top: -13px;
            }

                #modal_Cart #SelectedItemBox .UpGradeInfo .btn-light .UpCategoryCode span {
                    font-size: 16px;
                    padding: 0 15px 1px;
                    border-radius: 4px;
                    font-family: var(--NUMERIC-FONT);
                    font-weight: bold;
                }

            #modal_Cart #SelectedItemBox .UpGradeInfo .btn-light .UpCategoryAmount {
                font-family: var(--NUMERIC-FONT);
                font-weight: bold;
                color: var(--DCL-COLOR);
                font-size: 18px;
            }

                #modal_Cart #SelectedItemBox .UpGradeInfo .btn-light .UpCategoryAmount .USDUnit {
                    font-size: 10px;
                    margin-left: 2px;
                }

            #modal_Cart #SelectedItemBox .UpGradeInfo .btn-light .UpCategoryTitle {
                font-size: 9px;
                white-space: normal;
                text-align: left;
                width: 130px;
                line-height: 1.2;
                margin-top: 3px;
            }

            #modal_Cart #SelectedItemBox .UpGradeInfo .btn-light:hover {
                transform: translate(0,-5px);
                transition: all .2s;
                background: #e4f6ff;
                border: solid 3px var(--DCL-COLOR);
            }

    #modal_Cart #SelectedItemBox .CartInformationMSGBox {
        text-align: center;
    }

        #modal_Cart #SelectedItemBox .CartInformationMSGBox .subTitle {
            margin: 20px 0 15px;
        }

        #modal_Cart #SelectedItemBox .CartInformationMSGBox .msgBox {
            display: inline-block;
            border: double 5px #19875422;
            background: #19875411;
            border-radius: 16px;
            padding: 10px 20px;
        }

            #modal_Cart #SelectedItemBox .CartInformationMSGBox .msgBox .msg1 {
                /*font-size: 16px;*/
                font-weight: bold;
            }

                #modal_Cart #SelectedItemBox .CartInformationMSGBox .msgBox .msg1 .ImportantMark {
                    background: var(--SYSTEM-RED);
                    color: #ffffff;
                    font-size: 12px;
                    font-weight: normal;
                    padding: 2px 5px;
                    border-radius: 4px;
                    margin-right: 5px;
                }

            #modal_Cart #SelectedItemBox .CartInformationMSGBox .msgBox .tableCartInformationMSG {
                margin: auto;
            }

                #modal_Cart #SelectedItemBox .CartInformationMSGBox .msgBox .tableCartInformationMSG th {
                    padding-top: 10px;
                    font-size: 16px;
                }

                #modal_Cart #SelectedItemBox .CartInformationMSGBox .msgBox .tableCartInformationMSG td {
                    font-weight: bold;
                    color: #198754;
                    text-align: left;
                    padding: 3px 0px 3px 20px;
                }

/*予約カート：カート内容*/
#modal_Cart #CartContent {
    margin-top: 30px;
}

/*予約カート：お客様情報*/
#modal_Cart #CustInfoCheckBox {
}

    #modal_Cart #CustInfoCheckBox .AccountEditBtnBox {
        display: flex;
        justify-content: space-between;
        margin-top: -10px;
        margin-bottom: 10px;
    }

        #modal_Cart #CustInfoCheckBox .AccountEditBtnBox .btn-link {
            font-size: 14px;
        }

    #modal_Cart #CustInfoCheckBox .tableCustInfo {
    }

        #modal_Cart #CustInfoCheckBox .tableCustInfo th {
            white-space: nowrap;
            padding: 0 20px 0 20px;
            text-align: right;
        }

            #modal_Cart #CustInfoCheckBox .tableCustInfo th .btn-link {
                font-size: 14px;
                border: none;
            }

        #modal_Cart #CustInfoCheckBox .tableCustInfo td {
            width: 100%;
        }

/*予約カート：乗船メンバー設定*/
#modal_Cart #MemberSelectBox {
}

    #modal_Cart #MemberSelectBox .CruiseMemberInfo {
        border-radius: 6px;
        padding: 10px 10px;
        background: #e4f6ff;
        /*border: solid 1px var(--DCL-COLOR);*/
        margin-top: -5px;
        margin-bottom: 15px;
        font-size: 12px;
    }

        #modal_Cart #MemberSelectBox .CruiseMemberInfo ul {
            list-style: disc;
            padding-left: 20px;
        }

            #modal_Cart #MemberSelectBox .CruiseMemberInfo ul li {
            }

                #modal_Cart #MemberSelectBox .CruiseMemberInfo ul li .Pickup {
                    font-weight: bold;
                    color: var(--SYSTEM-RED);
                    margin: 0 5px;
                    font-size: 14px;
                }

    #modal_Cart #MemberSelectBox .SelectedMemberBox {
    }

        #modal_Cart #MemberSelectBox .SelectedMemberBox .subTitle {
            font-size: 16px;
            font-weight: bold;
        }

            #modal_Cart #MemberSelectBox .SelectedMemberBox .subTitle .btn-link {
                font-size: 14px;
            }

    #modal_Cart #MemberSelectBox hr {
        margin: 20px 0;
        border-top: dotted 5px #198754;
        opacity: 1;
    }

    #modal_Cart #MemberSelectBox .SelectMemberBox {
        margin-top: 30px;
        border: solid 5px #dddddd;
        border-radius: 6px;
        background: #eeeeee;
        position: relative;
    }

        #modal_Cart #MemberSelectBox .SelectMemberBox .SelectMemberBoxScreenBox {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #00000077;
            z-index: 3;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            #modal_Cart #MemberSelectBox .SelectMemberBox .SelectMemberBoxScreenBox span {
                font-size: 16px;
                color: #ffffff;
            }

            #modal_Cart #MemberSelectBox .SelectMemberBox .SelectMemberBoxScreenBox:hover {
                cursor: not-allowed;
            }

        #modal_Cart #MemberSelectBox .SelectMemberBox .SelectMemberBoxArrow {
            color: #dddddd;
            text-align: center;
            font-size: 28px;
            position: absolute;
            top: -35px;
            left: 0;
            right: 0;
        }

        #modal_Cart #MemberSelectBox .SelectMemberBox .SelectMemberHeader {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            font-size: 16px;
            font-weight: bold;
            padding: 5px 5px 10px;
            background: #dddddd;
        }

            #modal_Cart #MemberSelectBox .SelectMemberBox .SelectMemberHeader .btn {
                font-size: 14px;
            }

        #modal_Cart #MemberSelectBox .SelectMemberBox .MemberListNothingMSG {
            margin: 20px 0 10px;
            text-align: center;
        }

        #modal_Cart #MemberSelectBox .SelectMemberBox .MemberFilter {
            margin: 10px 0;
            padding: 0 10px;
        }

            #modal_Cart #MemberSelectBox .SelectMemberBox .MemberFilter input:focus {
                background: var(--ITEM-HOVER-COLOR);
            }

    #modal_Cart #MemberSelectBox #CruiseMemberSelectBox {
        max-height: 300px;
        overflow-y: auto;
        padding: 0 10px 10px;
    }

        #modal_Cart #MemberSelectBox #CruiseMemberSelectBox::-webkit-scrollbar {
            width: 5px; /* Chrome/Safari用 */
            background: none;
            border-radius: 50px;
        }

        #modal_Cart #MemberSelectBox #CruiseMemberSelectBox::-webkit-scrollbar-thumb {
            background: var(--DCL-COLOR-LIGHT);
            border-radius: 50px;
        }

            #modal_Cart #MemberSelectBox #CruiseMemberSelectBox::-webkit-scrollbar-thumb:hover {
                background: var(--DCL-COLOR);
                cursor: pointer;
            }

#modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem {
    border: solid 1px #dddddd;
    padding: 5px;
    border-radius: 6px;
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background: #ffffff;
}

    #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberInfoBox {
        flex: 1;
    }

        #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberInfoBox .PaxMark {
            font-size: 12px;
            background: #aaaaaa;
            color: #ffffff;
            display: inline-block;
            padding: 0 0 1px;
            width: 40px;
            text-align: center;
            border-radius: 4px;
        }

            #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberInfoBox .PaxMark.ADT {
                background: var(--DCL-COLOR);
            }

            #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberInfoBox .PaxMark.JR,
            #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberInfoBox .PaxMark.CHD1,
            #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberInfoBox .PaxMark.CHD2 {
                background: #52bb8b;
            }

            #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberInfoBox .PaxMark.INF {
                background: #ffb8b8;
            }

        #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberInfoBox .Caption {
            font-weight: bold;
            padding: 0 5px;
            font-size: 12px;
        }

            #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberInfoBox .Caption.CastawayClubID {
                color: #009CEF;
            }

    #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberBtnBox {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

        #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberBtnBox .btn-link {
            font-size: 12px;
        }

        #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberBtnBox .btn-warning,
        #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem .MemberBtnBox .btn-danger {
            font-size: 14px;
        }

    #modal_Cart #Cart_MemberSelect .CustomerMembersListBox .MemberItem.disabled {
        background: #eeeeee;
        color: #aaaaaa;
    }

#modal_Cart #Cart_MemberSelect #CruiseMemberBox .MemberItem {
    border: solid 1px #f0ad4e;
    background: #f0ad4e33;
}

    #modal_Cart #Cart_MemberSelect #CruiseMemberBox .MemberItem:first-child {
        position: relative;
        margin-top: 15px;
        padding-top: 10px;
        border: double 5px #f0ad4e;
    }

        #modal_Cart #Cart_MemberSelect #CruiseMemberBox .MemberItem:first-child:before {
            content: "部屋代表者";
            position: absolute;
            top: -12px;
            left: -10px;
            font-weight: bold;
            font-size: 12px;
            background: #f3702f;
            color: #ffffff;
            padding: 0px 15px 1px;
            border-radius: 50px;
        }

    #modal_Cart #Cart_MemberSelect #CruiseMemberBox .MemberItem .Caption.CastawayClubID {
        color: #009CEF;
    }

#modal_Cart #Cart_MemberSelect.checked #CruiseMemberBox .MemberItem {
    border: solid 1px #dddddd;
    background: #eeeeee;
    position: relative;
}

    #modal_Cart #Cart_MemberSelect.checked #CruiseMemberBox .MemberItem:first-child {
        border: double 5px #dddddd;
    }

#modal_Cart #CruiseMemberNothingMSG {
    padding: 30px 0px 30px;
    color: #198754;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    /*background: #eeeeee;*/
    border-radius: 6px;
    margin-top: 10px;
}

/*予約カート：キャスタウェイクラブID入力*/
#modal_Cart #CastawayClubIDInputBox {
}

    #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBoxInfo {
        border-radius: 6px;
        padding: 10px 10px;
        background: #e4f6ff;
        /*border: solid 1px var(--DCL-COLOR);*/
        margin-top: -5px;
        margin-bottom: 15px;
        font-size: 12px;
    }

        #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBoxInfo ul {
            list-style: disc;
            padding-left: 20px;
        }

            #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBoxInfo ul .Pickup {
                font-weight: bold;
                color: var(--SYSTEM-RED);
                margin: 0 5px;
                font-size: 14px;
            }

            #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBoxInfo ul a {
                font-size: 12px;
            }

            #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBoxInfo ul .ImportantMark {
                background: var(--SYSTEM-RED);
                color: #ffffff;
                font-size: 12px;
                font-weight: normal;
                padding: 2px 5px;
                border-radius: 4px;
                margin-right: 5px;
            }

    #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox {
    }

        #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem {
            display: flex;
            align-items: center;
            gap: 10px;
            justify-content: space-between;
            border: solid 1px #dddddd;
            border-radius: 6px;
            margin: 5px 0;
            padding: 10px;
            font-weight: bold;
        }

            #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem .MemberNameBox {
                display: flex;
                align-items: center;
                flex: 1;
                position: relative;
            }

                #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem .MemberNameBox .LeadGuestMark {
                    position: absolute;
                    top: -22px;
                    left: -15px;
                    font-weight: bold;
                    font-size: 12px;
                    background: #f3702f;
                    color: #ffffff;
                    padding: 0px 15px 1px;
                    border-radius: 50px;
                }

                #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem .MemberNameBox .MemberCount {
                    font-size: 20px;
                    margin-right: 10px;
                }

                #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem .MemberNameBox .MemberName {
                    display: flex;
                    flex-direction: column;
                    line-height: 1.2;
                }

            #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem .input-group {
                width: 350px;
            }

                #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem .input-group .input-group-text {
                    background: var(--DCL-COLOR-LIGHT);
                    border-color: var(--DCL-COLOR);
                    font-size: 14px;
                }

                    #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem .input-group .input-group-text .fa {
                        margin-right: 5px;
                    }

                #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem .input-group input {
                    border-color: var(--DCL-COLOR);
                }

                    #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem .input-group input::placeholder {
                        color: #dddddd;
                    }

                    #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem .input-group input:focus {
                        background: var(--ITEM-HOVER-COLOR);
                    }

                    #modal_Cart #CastawayClubIDInputBox #CastawayClubIDMemberBox .MemberItem .input-group input.Alert {
                        border: solid 2px #ff0000;
                    }

/*予約カート：ステートルーム選択*/
#modal_Cart #CabinSelectBox {
}

    #modal_Cart #CabinSelectBox .CabinSelectReloadBtnBox {
        margin-top: -15px;
    }

        #modal_Cart #CabinSelectBox .CabinSelectReloadBtnBox .btn {
            font-size: 14px;
        }

    #modal_Cart #CabinSelectBox #AvailableCabinBox {
        display: flex;
        gap: 10px;
    }

        #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableCabinList {
            flex: 1;
        }

            #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableCabinList .DeckNo {
                font-weight: bold;
                background: #009CEF;
                color: #ffffff;
                padding: 5px 10px 3px;
                border-radius: 4px;
                font-size: 16px;
            }

                #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableCabinList .DeckNo.GT {
                    background: #555555;
                    color: #ffffff;
                }

            #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableCabinList .Cabins {
                /*padding: 10px 0 20px;*/
            }

                #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableCabinList .Cabins label {
                    margin: 3px 0 10px;
                    padding: 3px 12px 5px;
                    white-space: nowrap;
                    border-radius: 50px;
                    font-size: 16px;
                    font-weight: bold;
                    font-family: var(--NUMERIC-FONT);
                }

                    #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableCabinList .Cabins label input {
                        transform: scale(1.5);
                        margin-right: 10px;
                    }

                    #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableCabinList .Cabins label:hover {
                        cursor: pointer;
                        background: var(--ITEM-HOVER-COLOR);
                    }

            #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableCabinList hr {
                margin: 20px 0 10px;
                border-top: dotted 2px #555555;
            }

            #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableCabinList .btnCabinTTCHoldSelectBox {
                text-align: center;
            }

                #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableCabinList .btnCabinTTCHoldSelectBox #SelectedHoldCabinNo {
                    font-size: 30px;
                    font-weight: bold;
                    font-family: var(--NUMERIC-FONT);
                }

                #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableCabinList .btnCabinTTCHoldSelectBox .btn-info {
                    border-radius: 50px;
                    padding: 6px 20px;
                    margin-top: 10px;
                }

        #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableDeckImageList {
            width: 370px;
            height: 500px;
            overflow-y: auto;
            position: relative;
        }

            #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableDeckImageList::-webkit-scrollbar {
                width: 5px; /* Chrome/Safari用 */
                background: none;
                border-radius: 50px;
            }

            #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableDeckImageList::-webkit-scrollbar-thumb {
                background: var(--DCL-COLOR-LIGHT);
                border-radius: 50px;
            }

                #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableDeckImageList::-webkit-scrollbar-thumb:hover {
                    background: var(--DCL-COLOR);
                    cursor: pointer;
                }

            #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableDeckImageList.GTY {
                height: auto;
            }

            #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableDeckImageList #SelectCabinPositionPin {
                position: absolute;
                color: #ff0000;
                font-size: 30px;
                text-shadow: 1px 1px 3px #000000;
                transition: all .5s;
                z-index: 2;
            }

                #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableDeckImageList #SelectCabinPositionPin:hover {
                    /*color: #edff00;*/
                    /*transition: all .2s;*/
                    /*transform: rotate(-40deg) translateY(-15px) translateX(12px) scale(1.2);*/
                }

                #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableDeckImageList #SelectCabinPositionPin img {
                    filter: drop-shadow(2px 2px 2px #ffffff);
                    width: 50px;
                }

            #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableDeckImageList .CabinPositionMark {
                position: absolute;
                color: #0ac300;
                font-size: 16px;
                text-shadow: 1px 1px 3px #000000;
                -webkit-animation: blink .5s ease-in-out infinite alternate;
                -moz-animation: blink .5s ease-in-out infinite alternate;
                animation: blink .5s ease-in-out infinite alternate;
                transition: all .2s;
            }

                #modal_Cart #CabinSelectBox #AvailableCabinBox .AvailableDeckImageList .CabinPositionMark:hover {
                    cursor: pointer;
                    color: #edff00;
                    transform: scale(1.5);
                    transition: all .2s;
                }

    /*ホールド確認画面*/
    #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldInfoTitle {
        margin-bottom: -10px;
        padding-left: 10px;
    }

        #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldInfoTitle span {
            background: var(--DCL-COLOR);
            color: #ffffff;
            display: inline-block;
            border-radius: 50px;
            padding: 3px 20px;
        }

    #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldInfoBox {
        border-radius: 6px;
        padding: 15px 10px 10px;
        background: #e4f6ff;
        /*border: solid 1px var(--DCL-COLOR);*/
        margin-top: -5px;
        margin-bottom: 15px;
        font-size: 12px;
    }

        #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldInfoBox ul {
            list-style: disc;
            padding-left: 20px;
        }

            #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldInfoBox ul li .Pickup {
                font-weight: bold;
                color: var(--SYSTEM-RED);
                margin: 0 5px;
                font-size: 14px;
            }

    #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox {
    }

        #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox .HoldCabin {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

            #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox .HoldCabin .tableHoldConfirmation {
            }

                #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox .HoldCabin .tableHoldConfirmation th {
                    vertical-align: bottom;
                    white-space: nowrap;
                    padding: 0px 15px;
                    text-align: right;
                }

                    #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox .HoldCabin .tableHoldConfirmation th .Caption {
                    }

                #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox .HoldCabin .tableHoldConfirmation td {
                    font-size: 24px;
                    padding: 0px 15px;
                    vertical-align: middle;
                    font-weight: bold;
                    white-space: nowrap;
                    font-family: var(--NUMERIC-FONT);
                }

                    #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox .HoldCabin .tableHoldConfirmation td .DeckNo {
                        font-size: 14px;
                    }

                        #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox .HoldCabin .tableHoldConfirmation td .DeckNo #btnBackCabinSelect {
                            font-size: 14px;
                        }

            #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox .HoldCabin .HoldBtnBox {
            }

                #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox .HoldCabin .HoldBtnBox .btn {
                    border-radius: 50px;
                    padding: 10px 5px;
                    width: 250px;
                }

                    #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox .HoldCabin .HoldBtnBox .btn.disabled {
                        opacity: .2;
                    }

        /*ホールド結果*/
        #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox #HoldCabinStatus {
            margin-top: 15px;
            text-align: center;
        }

            #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox #HoldCabinStatus .SuccessMSG .StatusMSG {
                color: #198754;
                font-size: 16px;
                font-weight: bold;
            }

            #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox #HoldCabinStatus .ErrMSG {
            }

                #modal_Cart #CabinSelectBox #AvailableCabinTTCHoldBox .HoldConfirmationBox #HoldCabinStatus .ErrMSG .StatusMSG {
                    color: var(--SYSTEM-RED);
                    font-weight: bold;
                }

/*予約カート：ダイニング時間選択*/
#modal_Cart #DiningSelectBox {
}

    #modal_Cart #DiningSelectBox #Cart_DiningSelect {
    }

        #modal_Cart #DiningSelectBox #Cart_DiningSelect .DiningSelectInfo1 {
            border-radius: 6px;
            padding: 10px 10px;
            background: #e4f6ff;
            /*border: solid 1px var(--DCL-COLOR);*/
            margin-top: -5px;
            margin-bottom: 15px;
            font-size: 12px;
        }

            #modal_Cart #DiningSelectBox #Cart_DiningSelect .DiningSelectInfo1 ul {
                list-style: disc;
                padding-left: 20px;
            }

        #modal_Cart #DiningSelectBox #Cart_DiningSelect .DiningSelectInfo2 {
            font-size: 16px;
            font-weight: bold;
            margin: 20px 0 10px;
        }

            #modal_Cart #DiningSelectBox #Cart_DiningSelect .DiningSelectInfo2 .Selectable {
                color: #198754;
            }

            #modal_Cart #DiningSelectBox #Cart_DiningSelect .DiningSelectInfo2 .NotSelectable {
                color: var(--SYSTEM-RED);
            }

        #modal_Cart #DiningSelectBox #Cart_DiningSelect .DiningSelectForm {
        }

            #modal_Cart #DiningSelectBox #Cart_DiningSelect .DiningSelectForm #selectDiningTime {
                padding: 1rem .75rem;
            }

                #modal_Cart #DiningSelectBox #Cart_DiningSelect .DiningSelectForm #selectDiningTime:hover {
                    cursor: pointer;
                    background: var(--ITEM-HOVER-COLOR);
                }

                #modal_Cart #DiningSelectBox #Cart_DiningSelect .DiningSelectForm #selectDiningTime:focus {
                    background: var(--ITEM-HOVER-COLOR);
                }

/*予約カート：住所入力*/
#modal_Cart #AddressInputBox {
}

    #modal_Cart #AddressInputBox #Cart_AddressInput {
    }

        #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputInfo1 {
            border-radius: 6px;
            padding: 10px 10px;
            background: #e4f6ff;
            /*border: solid 1px var(--DCL-COLOR);*/
            margin-top: -5px;
            margin-bottom: 15px;
            font-size: 12px;
        }

            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputInfo1 ul {
                list-style: disc;
                padding-left: 20px;
            }

                #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputInfo1 ul li .Pickup {
                    font-weight: bold;
                    color: var(--SYSTEM-RED);
                    margin: 0 5px;
                    font-size: 14px;
                }

        #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputInfo2 {
            background: #ffe3e3;
            padding: 20px;
            font-weight: bold;
            margin-bottom: 15px;
            border-radius: 6px;
        }

        #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox {
        }

            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .input-group-text {
                width: 75px;
                justify-content: flex-end;
            }

            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .form-control:focus,
            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .form-select:focus {
                background: var(--ITEM-HOVER-COLOR);
            }

                #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .form-control:focus + label::after,
                #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .form-select:focus + label::after {
                    background: none !important;
                }

            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .StateZipCountryBox {
                display: flex;
                gap: 10px;
            }

                #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .StateZipCountryBox .formZipCode {
                    flex: 1;
                }

                    #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .StateZipCountryBox .formZipCode input {
                        min-width: 100px;
                    }

            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox #txtAddress1.Alert,
            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox #txtAddress2.Alert,
            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox #txtCity.Alert {
                border: solid 2px #ff0000;
            }

            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .form-floating > .form-control-plaintext ~ label::after,
            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .form-floating > .form-control:focus ~ label::after,
            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .form-floating > .form-select ~ label::after {
                background: transparent;
            }

            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .AddressInputCompletedBox {
                color: #198754;
            }

                #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .AddressInputCompletedBox input {
                    transform: scale(2);
                    margin: 0 15px;
                }

                    #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .AddressInputCompletedBox input:hover {
                        cursor: pointer;
                    }

                #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .AddressInputCompletedBox label {
                    font-size: 16px;
                    font-weight: bold;
                }

            #modal_Cart #AddressInputBox #Cart_AddressInput .AddressInputFormBox .AddressInputStatus {
                color: var(--SYSTEM-RED);
                font-weight: bold;
                margin-top: 20px;
            }

/*予約カート：クルーズ保険確認*/
#modal_Cart #InsuranceSelectBox {
}

    #modal_Cart #InsuranceSelectBox #Cart_InsuranceSelect {
    }

        #modal_Cart #InsuranceSelectBox #Cart_InsuranceSelect .CruiseInsuranceInfoBox1 {
            border-radius: 6px;
            padding: 10px 10px;
            background: #e4f6ff;
            /*border: solid 1px var(--DCL-COLOR);*/
            margin-top: -5px;
            margin-bottom: 15px;
            font-size: 12px;
        }

            #modal_Cart #InsuranceSelectBox #Cart_InsuranceSelect .CruiseInsuranceInfoBox1 ul {
                list-style: disc;
                padding-left: 20px;
            }

                #modal_Cart #InsuranceSelectBox #Cart_InsuranceSelect .CruiseInsuranceInfoBox1 ul li .Pickup {
                    font-weight: bold;
                    color: var(--SYSTEM-RED);
                    margin: 0 5px;
                    font-size: 14px;
                }

        #modal_Cart #InsuranceSelectBox #Cart_InsuranceSelect .CruiseInsuranceInfoBox2 {
            font-size: 16px;
            font-weight: bold;
            margin: 20px 0 10px;
        }

            #modal_Cart #InsuranceSelectBox #Cart_InsuranceSelect .CruiseInsuranceInfoBox2 .Selectable {
                color: #198754;
            }

            #modal_Cart #InsuranceSelectBox #Cart_InsuranceSelect .CruiseInsuranceInfoBox2 .NotSelectable {
                color: var(--SYSTEM-RED);
            }

        #modal_Cart #InsuranceSelectBox #Cart_InsuranceSelect .CruiseInsuranceSelectForm #selectCruiseInsurance {
            padding: 1rem .75rem;
        }

            #modal_Cart #InsuranceSelectBox #Cart_InsuranceSelect .CruiseInsuranceSelectForm #selectCruiseInsurance:hover {
                cursor: pointer;
                background: var(--ITEM-HOVER-COLOR);
            }

            #modal_Cart #InsuranceSelectBox #Cart_InsuranceSelect .CruiseInsuranceSelectForm #selectCruiseInsurance:focus {
                background: var(--ITEM-HOVER-COLOR);
            }

/*予約カート：最終確認*/
#modal_Cart #ConfirmationBox {
}

    #modal_Cart #ConfirmationBox #Cart_Confirmation {
    }

        #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox {
        }

            #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationSubTitle {
                font-size: 16px;
                font-weight: bold;
                border-left: solid 10px var(--DCL-COLOR);
                padding: 10px 10px;
                margin-bottom: 10px;
                background: var(--DCL-COLOR-LIGHT);
                border-radius: 4px;
            }

                #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationSubTitle .ImportantMSG {
                    font-size: 12px;
                    color: var(--SYSTEM-RED);
                    margin-top: 5px;
                }

                    #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationSubTitle .ImportantMSG .ImportantMark {
                        background: var(--SYSTEM-RED);
                        color: #ffffff;
                        font-size: 12px;
                        font-weight: normal;
                        padding: 2px 5px;
                        border-radius: 4px;
                        margin-right: 5px;
                    }

                #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationSubTitle .MemoInfo {
                    font-size: 12px;
                }

            #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox hr {
                margin: 15px 5px;
                border-top: dotted 2px #aaaaaa;
            }

            #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo {
                padding: 0 20px;
                margin: 20px 0;
            }

                #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo table {
                }

                    #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo table th {
                        padding: 0 20px 0 0;
                        text-align: right;
                        white-space: nowrap;
                    }

                        #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo table th .Caption {
                            width: 120px;
                            display: block;
                        }

                    #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo table td {
                        padding: 0;
                    }

                        #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo table td .Caption {
                            font-weight: bold;
                            font-size: 12px;
                            margin-right: 5px;
                        }

                        #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo table td .GTRoomMark {
                            background: #ff0000;
                            color: #ffffff;
                            font-size: 12px;
                            margin-left: 10px;
                            padding: 0px 5px;
                            border-radius: 4px;
                            display: inline-block;
                        }

                        #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo table td .TelRemarks {
                            font-size: 12px;
                            margin-left: 10px;
                        }

                #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo .tableConfMember {
                    width: 100%;
                }

                    #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo .tableConfMember tr {
                        border-bottom: dotted 1px #cccccc;
                    }

                        #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo .tableConfMember tr:last-child {
                            border: none;
                        }

                    #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo .tableConfMember th {
                        padding: 5px 20px 5px 0;
                        vertical-align: middle;
                    }

                        #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo .tableConfMember th .Caption {
                            width: auto;
                        }

                        #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo .tableConfMember th.TH_Count {
                            position: relative;
                        }

                            #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo .tableConfMember th.TH_Count .LeadGuest {
                                position: absolute;
                                top: 8px;
                                left: 0;
                                right: 0;
                                text-align: center;
                                background: #f3702f;
                                color: #ffffff;
                                padding: 0 5px;
                                border-radius: 50px;
                                font-size: 11px;
                            }

                    #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo .tableConfMember td {
                        padding: 5px 5px;
                    }

                        #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo .tableConfMember td .TD_MemberInfo {
                            width: 100px;
                        }

                #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo #txtCustomerMemo {
                    font-size: 14px;
                }

                    #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo #txtCustomerMemo::placeholder {
                        color: #cccccc;
                    }

                    #modal_Cart #ConfirmationBox #Cart_Confirmation .CruiseCartConfirmationBox .ConfirmationInfo #txtCustomerMemo:focus {
                        background: var(--ITEM-HOVER-COLOR);
                    }

        /*GTルームアナウンス*/
        #modal_Cart #ConfirmationBox #Cart_Confirmation .GTRoomRemarksBox {
            background: #ffeded;
            border-radius: 6px;
            padding: 15px 15px;
            color: #ff0000;
            font-size: 12px;
            margin: 30px 30px 0 30px;
        }

            #modal_Cart #ConfirmationBox #Cart_Confirmation .GTRoomRemarksBox .subTitle {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 10px;
            }

                #modal_Cart #ConfirmationBox #Cart_Confirmation .GTRoomRemarksBox .subTitle span {
                }

            #modal_Cart #ConfirmationBox #Cart_Confirmation .GTRoomRemarksBox ul {
                list-style: disc;
                padding-left: 20px;
            }

            #modal_Cart #ConfirmationBox #Cart_Confirmation .GTRoomRemarksBox .GTRoomConsentBox {
                margin: 20px 0 10px;
                text-align: center;
            }

                #modal_Cart #ConfirmationBox #Cart_Confirmation .GTRoomRemarksBox .GTRoomConsentBox input {
                    transform: scale(2);
                    margin: 0 15px;
                }

                #modal_Cart #ConfirmationBox #Cart_Confirmation .GTRoomRemarksBox .GTRoomConsentBox label {
                    font-size: 16px;
                    font-weight: bold;
                }

                    #modal_Cart #ConfirmationBox #Cart_Confirmation .GTRoomRemarksBox .GTRoomConsentBox input:hover,
                    #modal_Cart #ConfirmationBox #Cart_Confirmation .GTRoomRemarksBox .GTRoomConsentBox label:hover {
                        cursor: pointer;
                    }

        #modal_Cart #ConfirmationBox #Cart_Confirmation .ConfirmationAgreeBox {
            margin: 40px auto 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            #modal_Cart #ConfirmationBox #Cart_Confirmation .ConfirmationAgreeBox div {
            }

                #modal_Cart #ConfirmationBox #Cart_Confirmation .ConfirmationAgreeBox div input {
                    transform: scale(2);
                    margin: 0 15px;
                }

                #modal_Cart #ConfirmationBox #Cart_Confirmation .ConfirmationAgreeBox div label {
                    font-size: 16px;
                    font-weight: bold;
                    color: var(--SYSTEM-RED);
                }

                    #modal_Cart #ConfirmationBox #Cart_Confirmation .ConfirmationAgreeBox div input:hover,
                    #modal_Cart #ConfirmationBox #Cart_Confirmation .ConfirmationAgreeBox div label:hover {
                        cursor: pointer;
                    }

                    #modal_Cart #ConfirmationBox #Cart_Confirmation .ConfirmationAgreeBox div label:hover {
                        background: var(--ITEM-HOVER-COLOR);
                    }

/*予約カート：お支払い*/
#modal_Cart #PaymentBox {
}

    #modal_Cart #PaymentBox #Cart_Payment {
    }

        #modal_Cart #PaymentBox #Cart_Payment .CancelInfoBox {
            text-align: right;
            padding: 0 10px;
            margin-top: -5px;
        }

        #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox {
            border-radius: 6px;
            padding: 20px 10px;
            background: #e4f6ff;
            /*border: double 5px var(--DCL-COLOR);*/
            margin: 10px 0 20px;
        }

            #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table {
                margin: 0 auto;
            }

                #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table tr {
                    border-bottom: dotted 1px #cccccc;
                }

                    #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table tr:last-child {
                        border: none;
                    }

                #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table th {
                    text-align: center;
                    padding: 2px 5px;
                    font-size: 12px;
                }

                #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table td {
                    padding: 2px 10px;
                    vertical-align: middle;
                }

                    #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table td.TD_Caption {
                        font-weight: bold;
                        padding-left: 30px;
                        text-align: right;
                    }

                        #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table td.TD_Caption.TotalRate {
                            font-size: 20px;
                            padding-left: 10px;
                        }

                    #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table td.TD_Rate {
                        text-align: right;
                        font-family: var(--NUMERIC-FONT);
                        font-size: 20px;
                        font-weight: bold;
                    }

                        #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table td.TD_Rate .USDUnit {
                            font-size: 10px;
                            margin-left: 2px;
                        }

                        #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table td.TD_Rate .JPY {
                            font-size: 12px;
                            margin-top: -5px;
                        }

                            #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table td.TD_Rate .JPY .JPYUnit {
                                font-size: 10px;
                                margin-left: 2px;
                            }

                        #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table td.TD_Rate .NoInsuranceMSG {
                            font-size: 14px;
                            color: #aaaaaa;
                        }

                    #modal_Cart #PaymentBox #Cart_Payment .CruiseRateInfoBox table td.TD_Date {
                    }

        #modal_Cart #PaymentBox #Cart_Payment .PaymentInfoBox {
            border-radius: 6px;
            padding: 10px 10px;
            background: #ffe3e3;
            margin-top: -5px;
            margin-bottom: 15px;
            font-size: 12px;
        }

            #modal_Cart #PaymentBox #Cart_Payment .PaymentInfoBox ul {
                list-style: disc;
                padding-left: 20px;
            }

                #modal_Cart #PaymentBox #Cart_Payment .PaymentInfoBox ul li .Pickup {
                    font-weight: bold;
                    color: var(--SYSTEM-RED);
                    margin: 0 5px;
                    font-size: 14px;
                }

                #modal_Cart #PaymentBox #Cart_Payment .PaymentInfoBox ul li .ImportantMark {
                    background: var(--SYSTEM-RED);
                    color: #ffffff;
                    font-size: 12px;
                    font-weight: normal;
                    padding: 2px 5px;
                    border-radius: 4px;
                    margin-right: 5px;
                }

        #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox {
        }

            #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .PaymentRateSelectBox {
                display: flex;
                align-items: center;
                gap: 40px;
                margin-bottom: 10px;
            }

                #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .PaymentRateSelectBox .subTitle {
                    font-size: 20px;
                    font-weight: bold;
                    padding-left: 10px;
                }

                #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .PaymentRateSelectBox .RadioBox {
                }

                    #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .PaymentRateSelectBox .RadioBox div {
                        display: flex;
                        align-items: center;
                        gap: 5px;
                    }

                        #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .PaymentRateSelectBox .RadioBox div input {
                            transform: scale(2);
                        }

                        #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .PaymentRateSelectBox .RadioBox div label {
                            font-size: 24px;
                            font-weight: bold;
                            font-family: var(--NUMERIC-FONT);
                            margin: 1px 0;
                            padding: 1px 15px;
                            border-radius: 6px;
                            flex: 1;
                        }

                            #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .PaymentRateSelectBox .RadioBox div label .Rate {
                            }

                            #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .PaymentRateSelectBox .RadioBox div label .USDUnit {
                                font-size: 10px;
                                margin-left: 2px;
                            }

                        #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .PaymentRateSelectBox .RadioBox div input:hover {
                            cursor: pointer;
                        }

                        #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .PaymentRateSelectBox .RadioBox div label:hover {
                            cursor: pointer;
                            background: var(--ITEM-HOVER-COLOR);
                        }

            #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .CardMonthYearCVV {
                display: flex;
                gap: 10px;
            }

                #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .CardMonthYearCVV #selectCardMonth,
                #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .CardMonthYearCVV #selectCardYear {
                    width: 200px;
                }

                #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .CardMonthYearCVV .CardCVV {
                    flex: 1;
                }

            #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .form-control:focus,
            #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .form-select:focus {
                background: var(--ITEM-HOVER-COLOR);
            }

                #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .form-control:focus + label::after,
                #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .form-select:focus + label::after {
                    background: none !important;
                }

                #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .form-control-plaintext ~ label::after,
                #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .form-control:focus ~ label::after,
                #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .form-control:not(:placeholder-shown) ~ label::after,
                #modal_Cart #PaymentBox #Cart_Payment .CreditCardInputFormBox .form-select ~ label::after {
                    background: transparent;
                }

        #modal_Cart #PaymentBox #Cart_Payment #ReservationPaymentStatus {
            color: var(--SYSTEM-RED);
            font-weight: bold;
            padding: 0 5px;
        }

            #modal_Cart #PaymentBox #Cart_Payment #ReservationPaymentStatus .ReservationInProgress {
                color: #198754;
                font-size: 16px;
            }

/*カート：完了画面*/
#modal_Cart #ReservationStatus {
    margin-top: 50px;
    padding: 0 10px;
}

    #modal_Cart #ReservationStatus .SuccessMSG {
        text-align: center;
        color: #198754;
        font-size: 20px;
        font-weight: bold;
    }

        #modal_Cart #ReservationStatus .SuccessMSG table {
            margin: 10px auto 30px;
            font-size: 18px;
        }

            #modal_Cart #ReservationStatus .SuccessMSG table td {
                text-align: left;
            }

                #modal_Cart #ReservationStatus .SuccessMSG table td.TD_Caption {
                    text-align: right;
                    white-space: nowrap;
                }

                #modal_Cart #ReservationStatus .SuccessMSG table td.TD_Data {
                }

                    #modal_Cart #ReservationStatus .SuccessMSG table td.TD_Data .PaymentError {
                        color: var(--SYSTEM-RED);
                    }

        #modal_Cart #ReservationStatus .SuccessMSG .PaymentPageLink {
            font-size: 16px;
            color: var(--SYSTEM-RED);
            margin: -20px 0 40px;
        }

            #modal_Cart #ReservationStatus .SuccessMSG .PaymentPageLink .ImportantMark {
                background: var(--SYSTEM-RED);
                color: #ffffff;
                font-size: 12px;
                font-weight: normal;
                padding: 2px 5px;
                border-radius: 4px;
                margin-right: 5px;
            }

            #modal_Cart #ReservationStatus .SuccessMSG .PaymentPageLink a {
                font-size: 18px;
                margin-top: 10px;
                display: inline-block;
            }

        #modal_Cart #ReservationStatus .SuccessMSG .btn-info {
            padding: 15px 50px;
            border-radius: 50px;
        }

/*####################################################################################################*/
/* お支払い専用ページ */
/*####################################################################################################*/
#PaymentPage {
}

    #PaymentPage .subTitle {
        font-size: 18px;
        font-weight: bold;
        padding: 5px 10px;
        margin-bottom: 10px;
        border-left: solid 15px var(--DCL-COLOR);
    }

        #PaymentPage .subTitle .PaymentDueDate {
            font-size: 12px;
            margin-left: 10px;
        }

    /*予約内容*/
    #PaymentPage #ContentPlaceHolder1_ReservationDetailsBox {
        max-width: 900px;
        width: 100%;
        padding: 30px 30px;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: var(--BOX-SHADOW-MAIN);
        margin: 0 auto 50px;
        position: relative;
    }

        #PaymentPage #ContentPlaceHolder1_ReservationDetailsBox .TourID {
            position: absolute;
            top: 2px;
            right: 15px;
            font-size: 10px;
            color: #aaaaaa;
        }

        #PaymentPage #ContentPlaceHolder1_ReservationDetailsBox .ProgressCircleBox {
            flex: 1;
            width: 100%;
            padding: 30px 0;
        }

            #PaymentPage #ContentPlaceHolder1_ReservationDetailsBox .ProgressCircleBox .Circle {
                width: 100px;
                height: 100px;
                margin: auto;
                background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%23009CEF" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z" transform="rotate(299.182 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform></path><path fill="%23009CEF" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7 c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z" transform="rotate(-238.363 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="-360 50 50" repeatCount="indefinite"></animateTransform></path><path fill="%23009CEF" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5 L82,35.7z" transform="rotate(299.182 50 50)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform></path></svg>');
                background-size: 80px 80px;
                background-repeat: no-repeat;
                background-position: center center;
            }

        #PaymentPage #ContentPlaceHolder1_ReservationDetailsBox .ProgressMSG {
            text-align: center;
        }

    #PaymentPage .tableCruiseReservation {
        margin: auto;
    }

        #PaymentPage .tableCruiseReservation th {
            white-space: nowrap;
            padding: 0 20px 0 35px;
            vertical-align: middle;
        }

            #PaymentPage .tableCruiseReservation th.TH_Section {
                padding: 10px 0 5px;
                font-size: 16px;
            }

        #PaymentPage .tableCruiseReservation td {
            vertical-align: middle;
            line-height: 1.3;
        }

    #PaymentPage hr {
        margin: 20px 0;
        border-top: dotted 1px #555555;
    }

    #PaymentPage #PaymentAmountSelectBox {
        max-width: 300px;
        margin: 0 auto;
    }

        #PaymentPage #PaymentAmountSelectBox div {
            display: flex;
            align-items: center;
            gap: 5px;
            margin: 5px 0;
        }

            #PaymentPage #PaymentAmountSelectBox div input {
                transform: scale(2);
            }

            #PaymentPage #PaymentAmountSelectBox div label {
                font-size: 24px;
                font-weight: bold;
                font-family: var(--NUMERIC-FONT);
                margin: 1px 0;
                padding: 1px 15px;
                border-radius: 6px;
                flex: 1;
            }

                #PaymentPage #PaymentAmountSelectBox div label:hover {
                    background: var(--ITEM-HOVER-COLOR);
                }

                #PaymentPage #PaymentAmountSelectBox div label .Rate {
                }

                #PaymentPage #PaymentAmountSelectBox div label .USDUnit {
                    font-size: 10px;
                    margin-left: 2px;
                }

    /*クレジットカードフォーム*/
    #PaymentPage #ContentPlaceHolder1_PaymentFormBox {
        max-width: 900px;
        width: 100%;
        padding: 15px 30px 30px;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: var(--BOX-SHADOW-MAIN);
        margin: 0 auto 50px;
    }

        #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CancelInfoBox {
            text-align: right;
        }

        #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm {
        }

            #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .CardMonthYearCVV {
                display: flex;
                gap: 10px;
            }

                #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .CardMonthYearCVV #selectCardMonth,
                #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .CardMonthYearCVV #ContentPlaceHolder1_selectCardYear {
                    width: 250px;
                }

                #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .CardMonthYearCVV .CardCVV {
                    flex: 1;
                }

            #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .form-control:focus,
            #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .form-select:focus {
                background: var(--ITEM-HOVER-COLOR);
            }

                #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .form-control:focus + label::after,
                #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .form-select:focus + label::after {
                    background: none !important;
                }

                #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .form-control-plaintext ~ label::after,
                #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .form-control:focus ~ label::after,
                #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .form-control:not(:placeholder-shown) ~ label::after,
                #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .form-select ~ label::after {
                    background: transparent;
                }

            #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .btnCCPaymentBox {
                text-align: center;
                margin-top: 30px;
            }

                #PaymentPage #ContentPlaceHolder1_PaymentFormBox .CCInputForm .btnCCPaymentBox #btnCCPayment {
                    border-radius: 50px;
                    padding: 15px 5px;
                    width: 300px;
                    font-size: 18px;
                }

    #PaymentPage #CCPaymentStatus {
        margin-top: 20px;
        color: var(--SYSTEM-RED);
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }

        #PaymentPage #CCPaymentStatus .SuccessMSG {
            color: #198754;
        }

        #PaymentPage #CCPaymentStatus .ErrMSG {
        }












/*####################################################################################################*/
/* Firefox にのみ適用 */
/*####################################################################################################*/
@supports (-moz-appearance: none) {
    #SearchBox #SearchForm #CruiseViewDetailHistoryBox .HistoryListBox {
        scrollbar-width: thin;
        scrollbar-color: var(--DCL-COLOR) var(--DCL-COLOR-LIGHT);
    }

    #modal_CruiseCalendar .modal-body {
        scrollbar-width: thin;
        scrollbar-color: var(--DCL-COLOR) var(--DCL-COLOR-LIGHT);
    }
}