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

/*####################################################################################################*/
/* 共通 */
/*####################################################################################################*/
@media screen and (max-width: 767px) {
    body .B2BPage {
        padding: 80px 10px 30px 10px !important;
    }

        body .B2BPage h1 {
            font-size: 24px;
            margin-bottom: 20px;
        }

        body .B2BPage h2 {
            font-size: 18px;
            margin-left: initial;
        }

    .modal .modal-body {
        padding: 15px 15px;
    }
}

/*ページ上部移動ボタン*/
@media screen and (min-width:0px) and (max-width:1600px) {
    #PageMoveIcon {
        right: 20px !important;
        transition: all .5s;
    }
}

@media screen and (min-width:1601px) {
    #PageMoveIcon {
        right: initial;
        left: 1280px !important;
        transition: all .5s;
    }
}

/*トップバーPC*/
@media screen and (max-width: 1200px) {
    #B2BPageTopbar {
        font-size: 11px;
        transition: all 400ms;
    }

        #B2BPageTopbar a {
            font-size: 11px;
            transition: all 400ms;
        }

        #B2BPageTopbar .btn-secondary {
            font-size: 10px;
            transition: all 400ms;
        }

        #B2BPageTopbar .XSHide {
            display: none;
            transition: all 400ms;
        }
}

@media screen and (max-width: 950px) {
    #B2BPageTopbar {
        top: -100px;
        transition: all 400ms;
    }
}

/*トップバーコーナー*/
@media screen and (max-width: 950px) {
    #B2BPageTopbarCorner {
        left: -300px;
        transition: all 400ms;
    }
}

/*トップバーXS*/
@media screen and (max-width: 767px) {
    #B2BPageTopbarXS {
        top: 0;
        transition: all 400ms;
    }

        #B2BPageTopbarXS .xs-btnMenu {
            top: 13px;
            transition: all 400ms;
        }

    #xs-Screen.open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000000cc;
        z-index: 99;
    }
}

/*####################################################################################################*/
/* サイドバー */
/*####################################################################################################*/
@media screen and (min-width: 951px) {
    #B2BPageSidebar #LogoutBox {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    #B2BPageSidebar #SidebarTitle_XS,
    #B2BPageSidebar #SidebarTitle_XS .xs-btnMenu {
        top: -100px;
        transition: all 400ms;
    }
}

@media screen and (max-width: 767px) {
    #B2BPageSidebar {
        left: -300px;
        padding-top: 50px;
    }

        #B2BPageSidebar.show {
            left: 0;
        }

        #B2BPageSidebar #mickeynetLogo {
            display: none;
        }

        #B2BPageSidebar #SidebarTitle {
            padding-top: 10px;
            justify-content: flex-end;
            padding-right: 20px;
            display: none;
        }

            #B2BPageSidebar #SidebarTitle img {
                width: 25px;
            }

            #B2BPageSidebar #SidebarTitle #SidebarTitlSysName {
                font-size: 12px;
            }

        #B2BPageSidebar .SidebarMenu.Main {
            margin-top: 10px;
        }

        #B2BPageSidebar .SidebarMenu.Location {
            padding: 0;
        }

        #B2BPageSidebar ul li a {
            padding: 2px 10px;
            font-size: 12px;
        }

        #B2BPageSidebar .SidebarMenu {
            margin-top: 5px;
        }

            #B2BPageSidebar .SidebarMenu .LocationName {
                display: none;
            }

            #B2BPageSidebar .SidebarMenu.Other {
                margin-top: 0;
            }

        #B2BPageSidebar #LogoutBox {
            /*margin-top: 0;*/
        }

            #B2BPageSidebar #LogoutBox hr {
                margin: 5px 0;
            }

            #B2BPageSidebar #LogoutBox #SidebarBtnLogOut {
                margin: 10px 0;
            }

                #B2BPageSidebar #LogoutBox #SidebarBtnLogOut .btn {
                    padding: 1px 5px 2px 10px;
                }
}

/*####################################################################################################*/
/* サイドカレンダー */
/*####################################################################################################*/
/*1600以下の時は非表示*/
@media screen and (max-width: 1600px) {
    #B2BPageSideCalendar #SideCalendarBtn {
        top: -100px;
        transition: all .5s;
    }

    #B2BPageSideCalendar {
        right: -400px;
        transition: all .5s;
    }
}

/*####################################################################################################*/
/* ページフッター */
/*####################################################################################################*/
@media screen and (max-width: 767px) {
    #B2BPageFooter {
        padding: 30px 10px 100px 10px !important;
    }

        #B2BPageFooter .mickeynetLogo img {
            max-width: 150px;
        }
}

/*####################################################################################################*/
/* DSメンテナンス情報 */
/*####################################################################################################*/
@media screen and (max-width: 767px) {
    #DSMaintenanceInfo {
        padding: 70px 10px 10px 10px;
    }

        #DSMaintenanceInfo #Label_DSMaintenanceInfo {
            display: block;
        }
}

/*####################################################################################################*/
/* ログインページ */
/*####################################################################################################*/

@media screen and (max-width: 767px) {
    #B2BLoginPage #LoginBox {
        margin-top: -50px;
        padding: 20px 40px 20px;
        max-width: 90%;
    }

        #B2BLoginPage #LoginBox #LoginTitle {
            font-size: 30px;
        }

        #B2BLoginPage #LoginBox #LoginSubTitle {
            font-size: 14px;
            padding-bottom: 20px;
        }

        #B2BLoginPage #LoginBox #InputForm .InputBox input {
            padding: 10px;
            margin-bottom: 30px;
        }

        #B2BLoginPage #LoginBox #InputForm .BtnBox {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
        }

            #B2BLoginPage #LoginBox #InputForm .BtnBox .btn-info {
                width: 100%;
            }

            #B2BLoginPage #LoginBox #InputForm .BtnBox .btn-link {
                margin-top: 20px;
            }
}

/*####################################################################################################*/
/* メッセージ ページ */
/*####################################################################################################*/
@media screen and (max-width: 767px) {
    #B2BMessagePage #MainContents #CommMessageSelectForm,
    #B2BMessagePage #MainContents #CommMessageSearchForm {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 30px;
    }

        #B2BMessagePage #MainContents #CommMessageSelectForm div:nth-child(1),
        #B2BMessagePage #MainContents #CommMessageSearchForm div:nth-child(1) {
            width: 100%;
        }

        #B2BMessagePage #MainContents #CommMessageSelectForm #ContentPlaceHolder1_ddlCommMessageAgentList,
        #B2BMessagePage #MainContents #CommMessageSearchForm #CommMessageInputBox #txtCommMessageSearch {
            min-width: inherit;
        }

    #B2BMessagePage #MainContents #CommMessageList .CommMessageItem .CommMessageBody {
        padding: 10px 10px 20px;
        font-size: 12px;
    }

        #B2BMessagePage #MainContents #CommMessageList .CommMessageItem .CommMessageBody .CommMessageHeader {
            flex-direction: column;
            padding: 5px 5px;
            font-size: 11px;
        }

            #B2BMessagePage #MainContents #CommMessageList .CommMessageItem .CommMessageBody .CommMessageHeader .HeaderInfo {
                gap: 5px;
            }

                #B2BMessagePage #MainContents #CommMessageList .CommMessageItem .CommMessageBody .CommMessageHeader .HeaderInfo .AgentImage {
                    width: 50px;
                    height: 50px;
                }

            #B2BMessagePage #MainContents #CommMessageList .CommMessageItem .CommMessageBody .CommMessageHeader .HeaderReplyBtn {
                text-align: right;
            }

                #B2BMessagePage #MainContents #CommMessageList .CommMessageItem .CommMessageBody .CommMessageHeader .HeaderReplyBtn .btn-link {
                    font-size: 12px;
                }
}

/*####################################################################################################*/
/* 予約一覧 ページ */
/*####################################################################################################*/
@media screen and (max-width: 767px) {
    #B2BReservationListPage #MainContents #ReservationListSelectForm {
        flex-direction: column;
    }

        #B2BReservationListPage #MainContents #ReservationListSelectForm .DateSelect {
            width: 100%;
        }

    #B2BReservationListPage #MainContents #ReservationListSearchForm #txtReservationSearch {
        min-width: initial;
    }

    #B2BReservationListPage #MainContents #ReservationListFilter {
        font-size: 12px;
    }

        #B2BReservationListPage #MainContents #ReservationListFilter .FilterCategory .SubTitle {
            display: block;
            margin: 15px 0 10px;
        }

        #B2BReservationListPage #MainContents #ReservationListFilter .FilterCategory .FilterItem {
            margin: 0;
        }

            #B2BReservationListPage #MainContents #ReservationListFilter .FilterCategory .FilterItem input {
                transform: scale(1.2, 1.2);
                margin-right: 3px;
            }

            #B2BReservationListPage #MainContents #ReservationListFilter .FilterCategory .FilterItem label {
                width: initial;
                margin-right: 10px;
            }

    #B2BReservationListPage #MainContents #ReservationListSearchForm div:first-child {
        width: 100%;
    }

    #B2BReservationListPage #MainContents #ReservationList .SegmentItem .segHeader .segContent .segTitle {
        font-size: 14px;
    }

    #B2BReservationListPage #MainContents #ReservationList .SegmentItem .segDetail .ReservationSegName .NameJP {
        font-size: 14px;
    }

    #B2BReservationListPage #MainContents #ReservationList .SegmentItem .segDetail .ReservationPayment .title {
        font-size: 14px;
    }

    #B2BReservationListPage #MainContents #ReservationList .SegmentItem .segDetail .ReservationDetails .resItem {
        flex-direction: column;
        gap: 0;
    }

        #B2BReservationListPage #MainContents #ReservationList .SegmentItem .segDetail .ReservationDetails .resItem .Caption {
            width: initial;
            text-align: left;
            margin-top: 3px;
        }
}

/*####################################################################################################*/
/* 日付確認システム ページ */
/*####################################################################################################*/
@media screen and (max-width: 767px) {
    #B2BDateCheckPage #MainContents .SummerTimeInfoBox {
        padding: 0 10px;
    }

        #B2BDateCheckPage #MainContents .SummerTimeInfoBox .SummerTimeItem {
            font-size: 14px;
        }

            #B2BDateCheckPage #MainContents .SummerTimeInfoBox .SummerTimeItem #ContentPlaceHolder1_Label_SummerTimeInfo div {
                padding: 0;
            }

                #B2BDateCheckPage #MainContents .SummerTimeInfoBox .SummerTimeItem #ContentPlaceHolder1_Label_SummerTimeInfo div span {
                    display: block;
                    text-align: center;
                    padding: 10px;
                }

    #B2BDateCheckPage #MainContents #DateCheckResult #DateCheckInfo {
        margin: 10px 0 30px;
        padding: 10px;
    }

        #B2BDateCheckPage #MainContents #DateCheckResult #DateCheckInfo .Caption {
            display: block;
            text-align: center;
            margin: 0;
        }

    #B2BDateCheckPage #MainContents #DateCheckResult #DateCheckBox .DateList {
        margin-bottom: 20px;
    }

    #B2BDateCheckPage #MainContents #DateCheckInfoBox .DateCheckInfo {
        flex-direction: column;
        gap: 0;
    }

        #B2BDateCheckPage #MainContents #DateCheckInfoBox .DateCheckInfo .Days {
            font-size: 20px;
            width: 100%;
            text-align: center;
            padding: 10px 0;
            margin-bottom: 10px;
        }

        #B2BDateCheckPage #MainContents #DateCheckInfoBox .DateCheckInfo .Description {
            font-size: 12px;
            width: 100%;
        }

            #B2BDateCheckPage #MainContents #DateCheckInfoBox .DateCheckInfo .Description .InfoItem {
            }

                #B2BDateCheckPage #MainContents #DateCheckInfoBox .DateCheckInfo .Description .InfoItem .LocationCode {
                    display: block;
                }

                #B2BDateCheckPage #MainContents #DateCheckInfoBox .DateCheckInfo .Description .InfoItem .Remarks {
                    margin: 0;
                }

    #B2BMCreditHistoryPage #MCreditHistory #MCreditFilter {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

        #B2BMCreditHistoryPage #MCreditHistory #MCreditFilter div {
            width: 100%;
            text-align: center;
        }
}

/*####################################################################################################*/
/* Ｍクレジット履歴 ページ */
/*####################################################################################################*/
@media screen and (max-width: 767px) {
    #B2BMCreditHistoryPage #MCreditHistory #MCreditSummary {
        flex-direction: column;
    }

        #B2BMCreditHistoryPage #MCreditHistory #MCreditSummary .Caption {
            display: inline-block;
            width: 100px;
            text-align: right;
            margin-right: 10px;
        }

    #B2BMCreditHistoryPage #MCreditHistory #HistoryData {
        overflow-x: auto;
        font-size: 12px;
    }

    #B2BMCreditHistoryPage #MCreditHistory #tableMCreditHistory th {
        font-size: 12px;
    }

        #B2BMCreditHistoryPage #MCreditHistory #tableMCreditHistory th:nth-child(1),
        #B2BMCreditHistoryPage #MCreditHistory #tableMCreditHistory th:nth-child(2) {
            display: none;
        }

    #B2BMCreditHistoryPage #MCreditHistory #tableMCreditHistory td {
        padding: 1px 5px;
    }

        #B2BMCreditHistoryPage #MCreditHistory #tableMCreditHistory td.TD_Count,
        #B2BMCreditHistoryPage #MCreditHistory #tableMCreditHistory td.TD_ID {
            display: none;
        }

        #B2BMCreditHistoryPage #MCreditHistory #tableMCreditHistory td.TD_Detail {
            min-width: 500px;
        }
}

/*####################################################################################################*/
/* リゾート検索ページ */
/*####################################################################################################*/
@media screen and (max-width: 767px) {
    #B2BsearchHOTELPage #TimeOutWindow #TimeOutWindowMSGBox {
        width: 95%;
        padding: 30px 20px 10px;
    }

        #B2BsearchHOTELPage #TimeOutWindow #TimeOutWindowMSGBox .TimeOutWindowMSG {
            font-size: 16px;
        }

    #B2BsearchHOTELPage #SearchFormBox {
        padding: 30px 0 10px;
    }

        #B2BsearchHOTELPage #SearchFormBox .colFormClear .btn-link {
            margin-top: 20px;
        }

        #B2BsearchHOTELPage #SearchFormBox #btnSearchResort {
            width: 100%;
        }

    #B2BsearchHOTELPage #ImageGalleryWindow #ImageGallery {
        padding: 40px 20px 20px;
        width: 95%;
    }

        #B2BsearchHOTELPage #ImageGalleryWindow #ImageGallery #ImageGallery_Title {
            font-size: 14px;
        }

            #B2BsearchHOTELPage #ImageGalleryWindow #ImageGallery #ImageGallery_Title .ImageGallery_RoomName {
                font-size: 14px;
            }

        #B2BsearchHOTELPage #ImageGalleryWindow #ImageGallery #ImageGallery_Image .ImageSlider .slick-next {
            right: -20px !important;
        }

        #B2BsearchHOTELPage #ImageGalleryWindow #ImageGallery #ImageGallery_Image .ImageSlider .slick-prev {
            left: -20px !important;
        }

    #B2BsearchHOTELPage #SearchResult #divSearchDetails {
        font-size: 12px;
        padding: 30px 10px 5px;
        top: 65px;
    }

        #B2BsearchHOTELPage #SearchResult #divSearchDetails .Content .Value .LocationCode {
            position: absolute;
            top: 5px;
            left: 10px;
            width: 80px;
        }

        #B2BsearchHOTELPage #SearchResult #divSearchDetails .Content .Caption {
            font-size: 10px;
        }

        #B2BsearchHOTELPage #SearchResult #divSearchDetails .Content .Value {
        }

    #B2BsearchHOTELPage #SearchResult #HotelMinRateList .HotelName {
        font-size: 12px;
        padding: 2px 5px;
    }

        #B2BsearchHOTELPage #SearchResult #HotelMinRateList .HotelName .tableHotelMinRate td {
            padding: 0;
            display: block;
        }

            #B2BsearchHOTELPage #SearchResult #HotelMinRateList .HotelName .tableHotelMinRate td.TD_Count .Count {
                display: none;
            }

            #B2BsearchHOTELPage #SearchResult #HotelMinRateList .HotelName .tableHotelMinRate td.TD_USD {
                text-align: right;
            }

            #B2BsearchHOTELPage #SearchResult #HotelMinRateList .HotelName .tableHotelMinRate td.TD_JPY {
                text-align: right;
            }

    #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .HotelInfo .HotelName .JP {
        font-size: 18px;
    }

    #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .HotelInfo .HotelName .EN {
        font-size: 12px;
    }

    #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .HotelInfo .HotelDetails .colDetails .tableHotelDetails .TD_Data {
        font-size: 12px;
    }

        #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .HotelInfo .HotelDetails .colDetails .tableHotelDetails .TD_Data .CategoryName {
            display: block;
            width: 100%;
        }

            #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .HotelInfo .HotelDetails .colDetails .tableHotelDetails .TD_Data .CategoryName:first-child {
                border-radius: 4px 4px 0 0;
            }

            #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .HotelInfo .HotelDetails .colDetails .tableHotelDetails .TD_Data .CategoryName:last-child {
                border-radius: 0 0 4px 4px;
            }

        #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .HotelInfo .HotelDetails .colDetails .tableHotelDetails .TD_Data .btnStaffComment {
            display: block;
            text-align: right;
        }

    #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .RoomList .RoomInfo .RoomDetails .Overview {
        flex-direction: column;
        gap: 5px;
    }

        #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .RoomList .RoomInfo .RoomDetails .Overview .RoomImage img {
            max-width: 100%;
        }

        #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .RoomList .RoomInfo .RoomDetails .Overview .RoomOverview .tableRoomOverview {
            font-size: 12px;
        }

            #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .RoomList .RoomInfo .RoomDetails .Overview .RoomOverview .tableRoomOverview td {
                display: block;
            }

            #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .RoomList .RoomInfo .RoomDetails .Overview .RoomOverview .tableRoomOverview .TD_Caption .Caption {
                font-size: 11px;
            }

    #B2BsearchHOTELPage #modal_Reservation .modal-body #modal_Reservation_MemberList table {
        width: 100%;
    }

        #B2BsearchHOTELPage #modal_Reservation .modal-body #modal_Reservation_MemberList table td {
            display: block;
        }

            #B2BsearchHOTELPage #modal_Reservation .modal-body #modal_Reservation_MemberList table td .LastName,
            #B2BsearchHOTELPage #modal_Reservation .modal-body #modal_Reservation_MemberList table td .FirstName {
                width: 100%;
            }
}

/*検索結果の各プロモ料金*/
@media screen and (max-width: 899px) {
    #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .RoomList .RoomInfo .RoomRateList .RoomRateItem {
        width: 50%;
    }
}

@media screen and (max-width: 767px) {
    #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .RoomList .RoomInfo .RoomRateList .RoomRateItem {
        width: 33.33%;
    }
}

@media screen and (max-width: 659px) {
    #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .RoomList .RoomInfo .RoomRateList .RoomRateItem {
        width: 50%;
    }
}

@media screen and (max-width: 599px) {
    #B2BsearchHOTELPage #SearchResult #HotelList .HotelData .RoomList .RoomInfo .RoomRateList .RoomRateItem {
        width: 100%;
    }
}

/*####################################################################################################*/
/* チケット検索ページ */
/*####################################################################################################*/

/*検索結果の各プロモ料金*/
@media screen and (max-width: 1299px) {
    #B2BsearchTICKETPage #SearchResult .ParkTicketList .TicketItem {
        width: 33.33%;
    }
}

@media screen and (max-width: 1039px) {
    #B2BsearchTICKETPage #SearchResult .ParkTicketList .TicketItem {
        width: 50%;
    }
}

@media screen and (max-width: 799px) {
    #B2BsearchTICKETPage #SearchResult .ParkTicketList .TicketItem {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    #B2BsearchTICKETPage #SearchResult .ParkTicketList .TicketItem {
        width: 50%;
    }
}