/* 最小化できませんでした。最小化されていないコンテンツを返します。
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1830,40): run-time error CSS1046: Expect comma, found '0'
(1830,44): run-time error CSS1046: Expect comma, found '/'
(1940,44): run-time error CSS1046: Expect comma, found '0'
(1940,48): run-time error CSS1046: Expect comma, found '/'
(1958,45): run-time error CSS1046: Expect comma, found '0'
(1958,49): run-time error CSS1046: Expect comma, found '/'
 */
/***********************************************************
 * WEB予約ページ用CSS定義
 **********************************************************/
/* [参考]                                                 */
/* 画面サイズが     ～320px (SE)                          */
/* 画面サイズが321px～479px (スマフォ縦)                  */
/* 画面サイズが480px～599px (スマフォ横)                  */
/* 画面サイズが600px～959px (タブレット縦)                */
/* 画面サイズが960px～1279px(タブレット横、PC小)          */
/* 画面サイズが1280px～     (PC大)                        */
/**********************************************************/

/***********************************************************
 * 色定義
 **********************************************************/
:root {
    --color-blue: #113363;      /*藍色*/
    --color-white: #FFFFFF;     /*白色*/
    --color-black: #000000;     /*黒色*/
    --color-brown: #8E8276;     /*茶色*/
    --color-beige: #F5F5DC;     /*ベージュ色*/
    --color-red: #FF0000;       /*赤色*/
    --color-darkred: #AA5359;   /*濃い赤色*/
    --color-grey: #797979;      /*濃い灰色*/
    --color-silver: #C0C0C0;    /*シルバー色*/
    --color-pink: #F29E9E;      /*濃いピンク色*/
    --color-lightgrey: #F4F4F4; /*灰色*/
    --color-lightpink: #FADBE0; /*ピンク色*/
    --color-lightblue: #D0EDF3; /*水色*/
}

/***********************************************************
 * 基本設定
 **********************************************************/
/*202303改修前のフォント*/
/*font-family: "TsukuARdGothic-Regular","Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック", Osaka, sans-serif;*/
/*基本フォント設定*/
body {
    background-color: #FFFFFF;
    color: #333333;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "BIZ UDPGothic", Meiryo, sans-serif;
    word-break: break-all;
    letter-spacing: 1px;
}

b, strong, .bold {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI semibold", "Segoe UI", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "BIZ UDPGothic", Meiryo, sans-serif;
}

label {
    font-weight: normal;
    margin: 0px;
}

a {
    color: #1872EB;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
/*外枠設定*/
@media screen and (max-width:320px) {
    .container {
        max-width: 320px;
    }
}
@media screen and (min-width:321px) and (max-width:479px ) {
    .container {
        min-width: 321px;
        max-width: 479px;
    }
}
@media screen and (min-width:480px) and (max-width:599px ) {
    .container {
        min-width: 480px;
        max-width: 600px;
    }
}
@media screen and (min-width:600px) {
    .container {
        min-width: 600px;
        max-width: 960px;
    }
}

.mediabr{
    display: none;
}

@media screen and (max-width:599px){
     .mediabr{
         display: block;
     }
     /*bootstrapは748pxまでしかないので*/
    .hidden-xxs {
        display: none;
    }
}
/*レイアウト崩れ対策　floatプロパティのある要素の親要素に持たせる*/
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
/*小見出し1*/
.subheading1 {
    text-align: center;
    padding: 10px 0px;
}
/*小見出し2*/
.subheading2 {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 30px;
    margin-bottom: 20px;
}
/*バックリンク*/
.backlink {
    text-align: center;
    margin: 10px 0px;
    font-size: clamp(13px,1vw,15px);
}
    .backlink a {
        color: #333333;
    }
/***********************************************************
 * ヘッダー設定
 **********************************************************/
#webreserve-header {
    padding: 0px;
    margin: 0px;
}
/*各要素の基本設定*/
#webreserve-header div {
    height: 100%;
    padding: 0px;
    margin: 0px;
    position: relative;
}
/*戻るリンク設定*/
#webreserve-back {
    position: absolute;
    top: 56%;
    left: 10%;
    transform: translateY(-50%);
    max-height: 80%;
    max-width: 46%;
}
/*ブランドロゴ設定*/
#webreserve-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-55%);
    max-height: 96%;
    max-width: 100%;
}
/*WEB予約タイトル設定*/
#webreserve-title {
    position: absolute;
    top: 55%;
    right: 10%;
    transform: translateY(-50%);
    max-height: 80%;
    max-width: 60%;
}
/*ヘッダーの高さ設定*/
@media screen and (max-width:320px) {
    #webreserve-header {
        height: 50px;
    }
}
@media screen and (min-width:321px) and (max-width:599px) {
    #webreserve-header {
        height: 60px;
    }
}
@media screen and (min-width:600px) {
    #webreserve-header {
        height: 80px;
    }
}

/*WEB予約画面機能・選択店舗名*/
#webreserve-infocomment {
    background-color: #113363;
    color: #FFFFFF;
    font-size: clamp(15px,2vw,25px);
}
#webreserve-infocomment div {
    height: 100%;
    padding: 0px;
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    text-align: center;
    position: relative;
}



/***********************************************************
 * フッター設定
 **********************************************************/
#webreserve-footer {
    padding-top: 50px;
    color: #9F9F9F;
}


/***********************************************************
 * ステップ設定
 **********************************************************/
#webreserve-step {
    margin-top: 0px;
    background-color: #F2F4F5;
}
/*bootstrap拡張設定*/
/*※既存bootstrapで5分割ができなかったので自作*/
.col-xs-1-5, .col-xs-2-5, .col-xs-3-5, .col-xs-4-5 {
    position: relative;
    float: left;
    min-height: 1px;
}
.col-xs-1-5 {
    width: 20%;
    margin-top: 15px;
    margin-bottom: 15px;
}
.col-xs-2-5 {
    width: 40%;
}
.col-xs-3-5 {
    width: 60%;
}
.col-xs-4-5 {
    width: 80%;
}
/*画像サイズ設定*/
@media screen and (max-width:599px) {
    #webreserve-step img {
        width: 100%;
        height: auto;
    }
}
@media screen and (min-width:600px) {
    #webreserve-step img {
        width: 70%;
        height: auto;
    }
}



/***********************************************************
 * 画面概要文設定
 **********************************************************/
#webreserve-summary {
    font-size: 17px;
    margin-top: 15px;
    margin-bottom: 15px;
    letter-spacing: 2px;
}
#webreserve-summary-sub, #webreserve-summary-option {
    color: #8E8276;
    font-size: 15px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    letter-spacing: 4px;
}
/*備考*/
.schedule-remark {
    font-size: 12px;
    font-weight: normal;
}

.color-red {
    color: #AA5359;
}
/*注意書き*/
.note {
    margin: 0px auto;
    list-style-type: none;
    width: 100%;
}

    /*注意書きの●*/
    .note li:before {
        position: relative;
        left: -4px;
        display: inline-block;
        width: 8px;
        height: 8px;
        content: '';
        border-radius: 50%;
        background-color: #AA5359;
    }
    /*●が無い行*/
    .note li.dot-none:before {
        content: none;
    }

    .note li.dot-none {
        position: relative;
        left: 8px;
    }
@media screen and (max-width:599px) {
    #webreserve-summary{
        font-size: 14px;
    }
    .schedule-remark {
        font-size: 10px;
    }
}

/***********************************************************
 * 画面上部の予約情報テーブル設定
 **********************************************************/
.booking-data > tbody > tr > td {
    color: #000000;
    border-top: 1px solid #C0C0C0;
    border-bottom: 1px solid #C0C0C0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.booking-data > tbody > tr > td:nth-child(1) {
    background-color: #F5F5DC;
    color: #8E8276;
    text-align: center;
}
/*ヘッダー設定(予約確認画面／確定予約確認画面で表示)*/
.booking-data > thead > tr > th {
    background-color: #8E8276;
    color: #FFFFFF;
    padding: 10px 15px;
    letter-spacing: 4px;
}


/***********************************************************
 * ボタン設定
 **********************************************************/
/* ボタンの上下余白設定 */
.btn-padding {
    padding-top: 25px;
    padding-bottom: 25px;
}
/*青ボタン設定*/
.btn-blue {
    background-color: #113363;
    color: #FFFFFF;
    letter-spacing: 2px;
}
/*赤ボタン設定*/
.btn-red {
    background-color: #AA5359;
    color: #FFFFFF;
    letter-spacing: 2px;
}
/*茶色ボタン設定*/
.btn-brown {
    background-color: #8E8276;
    color: #FFFFFF;
    letter-spacing: 2px;
}
/*黄ボタン設定*/
.btn-yellow {
    background-color: #FEE36B;
    color: #113363;
    letter-spacing: 2px;
}
/*白ボタン設定*/
.btn-white {
    background-color: #FFFFFF;
    color: #797979;
    border: 1px solid #797979;
    letter-spacing: 2px;
}
/*マウスホバー時設定*/
.btn.btn-yellow:hover {
    color: #FFFFFF;
}
.btn.btn-red:hover,
.btn.btn-brown:hover,
.btn.btn-blue:hover,
.btn.btn-blue:focus,
.btn.btn-white:hover {
    color: #797979;
}
/*ボタンがdisabledの場合の設定*/
.btn.btn-blue[disabled],
.btn.btn-red[disabled],
.btn.btn-brown[disabled] {
    color: #FFFFFF;
}
.btn.btn-yellow[disabled] {
    color: #333333;
}
.btn-white[disabled] {
    color: #797979;
}
/*くの字の表示*/
@media screen and (max-width:599px) {
    .arrow_right, .arrow_down {
        position: relative;
        width: 85vw;
        height: 51px;
        margin: 15px 0px;
    }
}
@media screen and (min-width:600px) {
    .arrow_right, .arrow_down {
        position: relative;
        width: clamp(280px,40vw,528px);
        height: 55px;
        margin: 15px 0px;
    }
}

.arrow_right::after { /* くの字の表示設定 */
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    width: 10px; /* くの字を山なりに見た時、左側の長さ */
    height: 10px; /* くの字を山なりに見た時、右側の長さ */
    border-top: 3px solid; /* くの字を山なりに見た時、左側の太さと色 */
    border-right: 3px solid; /* くの字を山なりに見た時、右側の太さと色 */
    transform: rotate(45deg); /* くの字の向き */
}

.arrow_down::after { /* V字の表示設定 */
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    width: 10px; /* くの字を山なりに見た時、左側の長さ */
    height: 10px; /* くの字を山なりに見た時、右側の長さ */
    border-top: 3px solid; /* くの字を山なりに見た時、左側の太さと色 */
    border-right: 3px solid; /* くの字を山なりに見た時、右側の太さと色 */
    transform: rotate(135deg); /* くの字の向き */
}

/***********************************************************
 * エラー情報設定
 **********************************************************/
.panel {
    background-color: #FFFFFF;
    margin-bottom: 15px;
}
.panel-danger {
    border: 1px solid #FF0000;
    border-radius: unset;
}
.panel-body {
    padding: 10px;
}
    .panel-body ul, .panel-body ol {
        padding-left: 20px;
        margin: 0px;
    }
.validation-summary li {
    color: #FF0000;
}
    .validation-summary li a {
        color: #FF0000;
        text-decoration: none;
        cursor: pointer;
    }
.alert-color-red {
    color: #FF0000;
}

/************************************************************
* 店舗検索画面
************************************************************/
/*エリアから　PC*/
.search-region-pc {
    padding: 30px 1em 4em 1em;
}

.region-area-pc {
    display: grid;
    grid-template-columns: 2fr 10fr;
    grid-template-rows: auto;
    border-top: 1px solid #E3E3E3;
}

    .region-area-pc:last-child {
        border-bottom: 1px solid #E3E3E3;
    }
    /*地方　PC*/
    .region-area-pc .region2-pc {
        grid-column: 1;
        grid-row: 1;
        place-self: center start;
    }
    /*都道府県　PC*/
    .region-area-pc .region-pc {
        background-color: #F2F4F5;
        grid-column: 2;
        grid-row: 1;
        padding-top: 5px;
        padding-bottom: 5px;
    }
        /*都道府県ボタン*/
        .region-area-pc .region-pc button {
            color: #333333; /*.btn .btn-linkの不要な部分を上書き*/
            text-decoration: underline; /*.btn .btn-linkの不要な部分を上書き*/
        }

            .region-area-pc .region-pc button:hover {
                text-decoration: none; /*.btn .btn-linkの不要な部分を上書き*/
            }

            .region-area-pc .region-pc button:focus {
                outline: none; /*.btn .btn-linkの不要な部分を上書き*/
            }

/*都道府県　SP*/
.region-accordion-area-sp {
    text-align: center;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-top: 14px;
}

    .region-accordion-area-sp a {
        border-bottom: 1px solid #E3E3E3;
    }

    .region-accordion-area-sp p {
        text-align: left;
    }

    .region-accordion-area-sp svg {
        text-align: right;
    }

.accordion-region2 {
    display: grid;
    grid-template-columns: 11fr 1fr;
    grid-template-rows: auto;
}

.region-accordion-area-sp a {
    color: inherit;
    text-decoration: none;
}

    .region-accordion-area-sp a:hover {
        text-decoration: none;
    }

    .region-accordion-area-sp a:focus {
        text-decoration: none;
    }

.region-area-sp {
    display: grid;
    grid-template-columns: 3fr 3fr 3fr;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #E3E3E3;
    background-color: #F2F4F5;
}

.region-btn-sp {
    display: inline-block;
    text-decoration: none;
    border: solid 2px;
    border-color: #D6D6D6;
    background-color: #ffffff;
    color: #000000;
    border-radius: 5px;
    padding: 10px 12px;
}

/*エリアから　スマホ*/
.search-region-sp {
    padding: 0em 1em 2em 1em;
}
/*住所・駅・店名から*/
.search-freeword-container {
    text-align: center;
    padding: 15px 4vw;
    margin: 0em 1em 1em 1em;
}

    .search-freeword-container > #FreeWord, #search-freeword {
        height: 45px;
    }

/*ブランドから*/
.search-brand-container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 4px;
    justify-content: center;
}

.search-brand {
    display: table;
    padding-left: 10px;
    width: 170px;
    height: 50px;
    border-bottom: 1px solid #E3E3E3;
}

    .search-brand .search-brand-cell {
        display: table-cell;
        vertical-align: middle;
    }

/*注意書き*/
.caution {
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
}
/*アコーディオンの矢印*/
.accordion-caution-iconarrow-sp {
    float: right;
}

.coution-space-change {
    display: none;
}

@media screen and (max-width:599px) {
    .search-region-pc {
        display: none;
    }

    .caution-pc {
        display: none;
    }

    #webreserve-summary.shop {
        display: none;
    }
    /*TOPの子見出し*/
    .subheading-top {
        margin-top: 0;
    }
}

@media screen and (min-width:600px) {
    .search-region-sp {
        display: none;
    }

    .caution-sp {
        display: none;
    }

    .search-freeword-container {
        background-color: #F2F4F5;
        margin: 2em 1em 4em 1em;
    }
}

/************************************************************
* 市区町村選択画面
************************************************************/
/*23区*/
.ward-container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 1px;
    justify-content: center;
    margin-top: 20px;
}

.ward {
    display: table;
    padding-left: 10px;
    background-color: #FFFFFF;
    width: 170px;
    height: 50px;
}

    .ward .ward-cell {
        display: table-cell;
        vertical-align: middle;
    }
/***********************************************************
 * 店舗選択画面
 **********************************************************/
/***********************************************************
 * 店舗選択画面 > 条件を追加部分
 **********************************************************/

/*検索条件の設定*/
.filtering-text {
    display: block;
    margin: auto;
    color: #333333;
}

#reload-target {
    display: inline-block;
    padding-bottom: 7px;
}

/*アコーディオンの設定*/
.accordion {
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 25px;
}
.accordion-header {
    border-bottom: 1.5px solid #FFFFFF;
    padding: 10px;
    margin: 0 auto;
    background-color: #F2F4F5;
    color: #113363;
}

.accordion-body{
    display: none;
}

.accordion-header:hover {
    cursor: pointer;
}

.serch-free-word > #freeWords {
    height: 45px !important;
    border: 1px solid #A2A2A2 !important;
}

.serch-label > .form-control-static {
    padding-top: 11px !important;
    padding-bottom: 3px !important;
    text-align: center;
}

/*スマホ画面の設定*/
@media screen and (max-width:599px) {
    /*検索条件*/
    .filtering-text {
        width: 95%;
        font-size: 13px;
    }

    #reload-target {
        padding-left: 16px;
    }

    /*アコーディオン*/
    .accordion {
        width: 95%;
        background-color: #FFFFFF;
    }

    .accordion-header {
        font-size: 12px;
    }

    .serch-label {
        position: relative;
        display: inline-flex;
        width: 100%;
        margin: 0 auto;
        font-size: 13px;
    }

    .select-area {
        position: relative;
        display: inline-flex;
        width: 100%;
        margin: 0px 0px 20px 0px;
        font-size: 13px;
    }

    #select-region {
        position: relative;
        display: inline-flex;
        margin-right: 2%;
        font-size: 13px;
    }

    #select-tokyo-23ward {
        position: relative;
        display: inline-flex;
        margin-left: 2%;
        font-size: 13px;
    }

    .serch-free-word {
        position: relative;
        display: inline-flex;
        width: 100%;
        margin: 0px 0px 20px 0px;
        font-size: 13px;
    }

    .checkbox-brand {
        position: relative;
        display: inline-flex;
        width: 46%;
        margin: 0px 2% 7px 1%;
        font-size: 12px;
    }

    #ShopSearch-Form {
        position: relative;
        width: 65vw;
        height: 40px;
        margin: 15px 0px;
    }

}

/*PC画面の設定*/
@media screen and (min-width:600px) {
    /*検索条件*/
    .filtering-text {
        width: 80%;
        font-size: 16px;
    }

    #reload-target {
        display: inline-block;
        padding-left: 20px;
    }

    /*アコーディオン*/
    .accordion {
        width: 80%;
        background-color: #F2F4F5;
    }

    .accordion-header {
        font-size: 15px;
    }

    .accordion-body {
        padding: 1%;
    }

    .search-condition {
        position: relative;
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .search-condition-area {
        width: 48%;
        margin-right: 2%;
    }

    .serch-label {
        position: relative;
        display: inline-flex;
        width: 100%;
        margin: 0 auto;
        font-size: 13px;
    }

    .select-area {
        position: relative;
        display: inline-flex;
        width: 100%;
        margin-bottom: 20px;
        font-size: 13px;
    }

    #select-region {
        position: relative;
        display: inline-flex;
        margin-right: 1%;
        font-size: 13px;
    }

    #select-tokyo-23ward {
        position: relative;
        display: inline-flex;
        margin-left: 1%;
        font-size: 13px;
    }

    .search-condition-free-word {
        width: 48%;
        margin-left: 2%;
    }

    .serch-free-word {
        position: relative;
        display: inline-flex;
        width: 100%;
        margin-bottom: 20px;
        font-size: 13px;
    }

    .checkbox-brand {
        position: relative;
        display: inline-flex;
        width: 21%;
        margin: 0px 2% 7px 1%;
        font-size: 13px;
    }

    #ShopSearch-Form {
        position: relative;
        width: clamp(280px,20vw,528px);
        height: 40px;
        margin: 15px 0px;
    }
}

/***********************************************************
 * 店舗選択画面 > セレクトボックス設定
 **********************************************************/
select {
    background-color: #FFFFFF;
    border: 1px solid #A2A2A2;
    border-radius: 5px;
    width: 100%;
    height: 45px;
    padding-left: 15px;
    -webkit-appearance: none; /*セレクトボックス矢印を消す*/
    -moz-appearance: none; /*セレクトボックス矢印を消す*/
}

    select::-ms-expand {
        display: none; /*セレクトボックス矢印を消す*/
    }

select:hover{
    cursor: pointer;
}

/*セレクトのボタン(下矢印)設定 */
.select-arrow {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .select-arrow::after {
        content: '';
        margin: auto;
        position: absolute;
        color: #FFFFFF;
        top: 0;
        bottom: 0;
        right: 10px;
        width: 10px; /* くの字を山なりに見た時、左側の長さ */
        height: 10px; /* くの字を山なりに見た時、右側の長さ */
        border-top: 3px solid; /* くの字を山なりに見た時、左側の太さと色 */
        border-right: 3px solid; /* くの字を山なりに見た時、右側の太さと色 */
        transform: rotate(135deg); /* くの字の向き */
    }

    /*矢印の背景の設定*/
    .select-arrow::before {
        content: '';
        width: 33px;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        background: #113363;
        border-radius: 0px 5px 5px 0px;
        pointer-events: none;
    }

/*非活性時の設定*/
select:disabled {
    background-color: #E0E0E0;
    border: 1px solid #E0E0E0;
    color: #FFFFFF;
    cursor: not-allowed;
}

.disabledColor::before {
    content: none;
}

/***********************************************************
 * 店舗選択画面 > 検索結果部分
 **********************************************************/
/*検索結果件数の設定*/
.shop-count-text {
    display: block;
    margin: auto;
    color: #333333;
}

.shop-count-text > span{
    font-size: 24px;
}

/*背景色の設定*/
.background-color-yellow {
    background-color: #FFF9DF;
}

/*店舗情報*/
.shop-data-container {
    position: relative;
    display: none; /*スクリプトによりblockに更新*/
    flex-direction: column;
    align-items: stretch;
    margin: auto;
}

/*店舗名部分*/
.shop-data-title {
    border: 1.5px solid #D6D6D6;
    border-radius: 5px 5px 0px 0px;
    padding: 10px;
    margin-top: 10px;
    background-color: #FFFFFF;
    color: #113363;
}

/*店舗名部分矢印の色*/
.shop-data-title a {
    color: #113363;
}

/*店舗情報部分*/
.shop-data-detail {
    border: 1.5px solid #D6D6D6;
    border-top: none;
    border-radius: 0px 0px 5px 5px;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
}

/*店舗情報追加ボタン設定*/
#shop-data-add > button {
    cursor: pointer;
}

/*住所、営業時間、アクセスのマーク*/
.shop-data-subcontainer .fas {
    color: #113363;
}

/*住所、営業時間、アクセスの文字*/
.shop-data-detail hr {
    margin-bottom: 10px;
}

/*店舗コメント*/
.shop-onlile-comment {
    margin-bottom: 10px;
}

/*スマホ画面の設定*/
@media screen and (max-width:599px) {
    /*検索結果件数*/
    .shop-count-text {
        width: 95%;
        font-size: 13px;
    }

    /*店舗情報*/
    .shop-data-container {
        width: 95%;
    }

    /*店舗名*/
    .shop-data-title {
        font-size: 16px;
    }

    /*住所、営業時間、アクセスの部分*/
    .shop-data-subcontainer {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: stretch;
        width: 100%;
        gap: 1vh;
        font-size: 12px;
    }
        .shop-data-subcontainer div:nth-of-type(1) {
            flex-basis: 100%;
        }
        .shop-data-subcontainer div:nth-of-type(2) {
            flex-basis: 100%;
        }
        .shop-data-subcontainer div:nth-of-type(3) {
            flex-basis: 100%;
        }

    .shop-data-subcontainer-title {
        font-size: 14px;
    }

    .shop-onlile-comment {
        font-size: 12px;
    }

}

/*PC画面の設定*/
@media screen and (min-width:600px) {
    /*検索結果件数*/
    .shop-count-text {
        width: 80%;
        font-size: 15px;
    }

    /*店舗情報*/
    .shop-data-container {
        width: 80%;
    }

    /*店舗名*/
    .shop-data-title {
        font-size: 20px;
    }

    /*住所、営業時間、アクセスの部分*/
    .shop-data-subcontainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 3vh;
    }
        .shop-data-subcontainer div:nth-of-type(1) {
            grid-column: 1;
            grid-row: 1;
        }
        .shop-data-subcontainer div:nth-of-type(2) {
            grid-column: 1;
            grid-row: 2;
        }
        .shop-data-subcontainer div:nth-of-type(3) {
            grid-column: 2;
            grid-row: 1;
        }

    .shop-data-subcontainer-title {
        font-size: 16px;
    }
}

/***********************************************************
 * 店舗選択画面 > 注意事項設定
 * (※予約内容確認画面、予約完了画面でも表示)
 **********************************************************/
#webreserve-notice {
    line-height: 23px;
    margin: 25px 20px 20px 20px;
}
    #webreserve-notice ul {
        margin-top: 10px;
        margin-bottom: 15px;
        padding-left: 22px;
    }
/*メッセージ設定*/
.notice-title {
    font-size: 15px;
}
@media screen and (max-width:599px){
    #webreserve-notice,
    #webreserve-notice ul{
        font-size:13px;
    }
    .notice-title{
        font-size: 14px;
    }
} 

/***********************************************************
 * コース選択画面
 **********************************************************/
/*タイトル*/
.category-title-normal {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #113363;
}

/*コースの枠*/
.frame-course {
    position: relative;
    margin: 25px auto;
    padding: 1em 0px 0px 0px;
    color: #686868;
    background-color: #fff;
    border: 1.5px solid;
    border-radius: 6px;
    border-color: #D6D6D6;
}
    /*タイトル　限定コース・おすすめコース*/
    .frame-course .category-title-campaign {
        position: absolute;
        right: 28%; /* タイトルの右からの位置        */
        left: 28%; /* タイトルの左からの位置        */
        width: 44%; /* タイトルの横幅        */
        display: block;
        text-align: center; /* 文字は中央寄せ        */
        top: -15px; /* タイトルの上位置        */
        font-weight: bold; /* タイトルは太字          */
        padding: 5px 5px; /* タイトル内の余白        */
        border-radius: 16px; /* タイトルの角丸          */
        font-size: 16px; /* タイトルの文字サイズ    */
        color: #fff; /* 文字色          */
    }

/*レスポンシブ*/
@media screen and (min-width:600px) {
    /*テーブル全体*/
    .frame-course {
        width: 80%;
    }
}
@media screen and (max-width:599px) {
    /*テーブル全体*/
    .frame-course {
        width: 95%;
    }
}

/*カテゴリ*/
.category {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto auto;
    place-content: center;
    place-items: center;
    padding: 1vh;
    row-gap: 1vh;
    column-gap: 2vh;
    border-bottom: 0.5px solid #E3E3E3; /*下線*/
}

/*カテゴリ　レスポンシブ*/
@media screen and (min-width:600px) {
    /*カテゴリ名*/
    .category .category-name {
        grid-column: 2;
        grid-row: 1;
        font-weight: bold;
        place-self: center start;
        font-size: 16px; /*文字サイズ*/
    }
    /*カテゴリ　画像*/
    .category .category-image {
        grid-column: 1;
        grid-row: 1/3;
    }
    /*カテゴリ　説明文*/
    .category .category-desc {
        grid-column: 2;
        grid-row: 2;
        place-self: center start;
        margin-right: 2%;
    }
}
@media screen and (max-width:599px) {
    /*カテゴリ名*/
    .category .category-name {
        grid-column: 1/3;
        grid-row: 1;
        font-weight: bold;
        font-size: 16px; /*文字サイズ*/
    }
    /*カテゴリ　画像*/
    .category .category-image {
        grid-column: 1;
        grid-row: 2;
    }
    /*カテゴリ　説明文*/
    .category .category-desc {
        grid-column: 2;
        grid-row: 2;
        place-self: center start;
        font-size: 13px; /*文字サイズ*/
        margin-right: 3%;
    }
    /*カテゴリの画像*/
    .category .category-image img {
        width: 105%;
        height: auto;
    }
}

/*コース*/
.course {
    display: grid;
    grid-template-columns: 1fr 8fr 3fr;
    grid-template-rows: auto auto;
    place-content: center;
    place-items: center;
    padding: 1vh;
    column-gap: 1vh;
    border-bottom: 0.5px solid #E3E3E3; /*下線*/
}
.course:last-child{
    border-bottom: none; /*最後の要素は下線を出さない*/
}
    /*コース　チェックボックス*/
    .course .course-check {
        grid-column: 1;
        grid-row: 1/3;
    }
    /*コース　コース名*/
    .course .course-name {
        grid-column: 2;
        grid-row: 1/2;
        place-self: center start;
    }
    /*コース　コース説明文*/
    .course .course-desc {
        grid-column: 2;
        grid-row: 2/3;
        place-self: start start;
    }
    /*コース　金額*/
    .course .course-price {
        grid-column: 3;
        grid-row: 1/3;
        place-self: center end;
        margin-right: 9%;
        text-align: right;
        color: #CC5353;
        font-weight: bold;
    }

    .course .course-name label,
    .course .course-desc label {
        cursor: pointer; /*カーソル設定*/
    }
/*コース　レスポンシブ*/
@media screen and (min-width:600px) {
    /*コース名*/
    .course .course-name {
        font-size: 15px;
    }
    /*説明文*/
    .course .course-desc {
        font-size: 12px;
    }
}
@media screen and (max-width:599px) {
    /*金額*/
    .course .course-price {
        font-size: 13px;
        margin-right: 13%;
    }
    /*説明文*/
    .course .course-desc {
        font-size: 10px;
    }
}

/*組み合わせコース*/
.course-combi {
    display: grid;
    place-content: center;
    place-items: center;
    padding: 1vh;
    gap: 1vh;
    border-bottom: 0.5px solid #E3E3E3; /*下線*/
}
.course-combi:last-child {
    border-bottom: none; /*最後の要素は下線を出さない*/
}
    /*組み合わせコース　コース名*/
    .course-combi .course-combi-name{
        place-self: center start;
    }
    /*組み合わせコース　コース説明文*/
    .course-combi .course-combi-desc{
        place-self: start start;
    }
    /*組み合わせコース　金額*/
    .course-combi .course-combi-price {
        place-self: center end;
        margin-right: 13%;
        text-align: right;
        color: #CC5353;
        font-weight: bold;
    }
    /*組み合わせコース　ボタン*/
    .course-combi .course-combi-btn{

    }
/*組み合わせコース　レスポンシブ*/
@media screen and (min-width:600px) {
    /*組み合わせコース*/
    .course-combi {
        grid-template-columns: 7fr 3fr 2fr;
        grid-template-rows: auto auto;
    }
        /*組み合わせコース　コース名*/
        .course-combi .course-combi-name {
            grid-column: 1;
            grid-row: 1;
            font-size: 15px; /*文字サイズ*/
        }
        /*組み合わせコース　コース説明文*/
        .course-combi .course-combi-desc {
            grid-column: 1;
            grid-row: 2;
            font-size: 12px; /*文字サイズ*/
        }
        /*組み合わせコース　金額*/
        .course-combi .course-combi-price {
            grid-column: 2;
            grid-row: 1/3;
        }
        /*組み合わせコース　ボタン*/
        .course-combi .course-combi-btn {
            grid-column: 3;
            grid-row: 1/3;
        }
}
@media screen and (max-width:599px) {
    /*組み合わせコース*/
    .course-combi {
        grid-template-columns: 9fr 3fr;
        grid-template-rows: auto auto;
    }
        /*組み合わせコース　コース名*/
        .course-combi .course-combi-name {
            grid-column: 1;
            grid-row: 1;
        }
        /*組み合わせコース　コース説明文*/
        .course-combi .course-combi-desc {
            grid-column: 1;
            grid-row: 2;
            font-size: 10px; /*文字サイズ*/
        }
        /*組み合わせコース　金額*/
        .course-combi .course-combi-price {
            grid-column: 2;
            grid-row: 1;
            margin-right: 13%;
            font-size: 13px; /*文字サイズ*/
        }
        /*組み合わせコース　ボタン*/
        .course-combi .course-combi-btn {
            grid-column: 2;
            grid-row: 2;
        }
}

/*タグ（人気）*/
.tag-popular::after {
    content: "人気"; /* 表示文言        */
    display: inline-grid; /* 改行制御        */
    border: 2px solid #38B8EF;
    width: 40px; /* 枠の横幅        */
    height: 16px;
    color: #FFFFFF; /* 文字色        */
    background-color: #38B8EF; /* 枠内背景色        */
    border-radius: 5px;
    font-size: 9px;
    text-align: center;
    font-weight: bold;
    align-content: center;
    position: relative;
    top: -2px;
}
/*タグ（おすすめ）*/
.tag-recommend::after {
    content: "おすすめ"; /* 表示文言        */
    display: inline-grid; /* 改行制御        */
    border: 2px solid #E39854;
    width: 60px; /* 枠の横幅        */
    height: 16px;
    color: #FFFFFF; /* 文字色        */
    background-color: #E39854; /* 枠内背景色        */
    border-radius: 5px;
    font-size: 9px;
    text-align: center;
    font-weight: bold;
    align-content: center;
    position: relative;
    top: -2px;
}

/*日時選択へボタン浮遊*/
.courseFloat {
    position: fixed; /*固定*/
    bottom: 30px; /*下からの位置*/
    right: 0;
    left: 0;
    margin: auto; /*rightとleftが0で左右中央寄せ*/
    display: block; /*タグをblock要素に変更*/
    z-index: 1000;
    animation: float1 3s ease infinite;
    display: none;
}

/*店舗情報アコーディオン*/
.accordion-shop-data-detail {
    border: 3px solid #F2F4F5;
    border-top: none;
    padding: 15px;
    background-color: #FFFFFF;
}
    .accordion-shop-data-detail hr {
        margin-bottom: 10px;
    }

/***********************************************************
 * コース選択画面 > チェックボックス設定
 * (※予約内容確認画面でも表示)
 **********************************************************/
    input[type=checkbox] {
        display: none;
    }
        /*チェックボックス描画設定*/
        input[type=checkbox] + input + label {
            padding-left: 30px;
            position: relative;
            margin: 0;
            cursor: pointer;
        }
        /*コース選択画面のコースのチェックボックス調整*/
        .course .course-check > input[type=checkbox] + input + label{
            display: inline; /*inline-blockでは位置がずれるのでinlineに変更*/
        }

            input[type=checkbox] + input + label::before {
                background-color: #FFFFFF;
                border: 1px solid #8E8276;
                border-radius: 4px;
                content: '';
                display: block;
                position: absolute;
                top: 1px;
                left: 1px;
                width: 17px;
                height: 17px;
            }
        /*チェック後のチェックボックス描画設定*/
        input[type=checkbox]:checked + input + label::before {
            background-color: #113363;
        }

        input[type=checkbox]:checked + input + label::after {
            content: "";
            display: block;
            position: absolute;
            top: 5px;
            left: 4px;
            width: 10px;
            height: 7px;
            /*チェックマーク描画*/
            border: 3px solid #FFFFFF;
            -webkit-transform: rotate(-45deg) scale(1, 1);
            transform: rotate(-45deg) scale(1, 1);
            border-top-style: none;
            border-right-style: none;
        }

        /*非活性のチェックボックス描画設定*/
        input[type=checkbox]:disabled + input + label::before {
            background-color: #D6D6D6;
            cursor: not-allowed;
        }
/***********************************************************
 * コース選択（ペア予約）画面
 * セラピスト選択（ペア予約）画面
 **********************************************************/
#course-pair-instruction {
    color: #113363;
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 15px;
}
#staff-pair-instruction {
    color: #113363;
    font-size: 24px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 15px;
}
    #staff-pair-instruction-caution {
        font-size: 17px;
    }
    @media screen and (max-width:599px) {
        #course-pair-instruction {
        font-size: 17px;
    }
    #staff-pair-instruction {
        font-size: 13px;
    }
        #staff-pair-instruction-caution {
            font-size: 11px;
        }
}

/***********************************************************
 * コース確認（ペア予約）画面
 **********************************************************/
.checkCoursePair-container {
    display: flex;
    flex-direction: column;
    row-gap: 10px; /*代表者様予約内容とお連れ様予約内容間のスペース*/
}

.checkCoursePair-box {
    display: flex;
    flex-direction: column;
    border: 1.5px solid #113363;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px 20px; /*内側の余白*/
    row-gap: 5px; /*行間の余白*/
}

.checkCoursePair-item {
    display: flex;
    justify-content: space-between; /*名前は左寄せ、金額は右寄せ*/
}

.checkCoursePair-item-price {
    color: #CC5353;
    font-weight: bold;
    text-align: right;
}

.checkCoursePair-button {
    display: flex;
    justify-content: center; /*ボタンは中央寄せ*/
}

.checkCoursePair-button-blue {
    width: clamp(280px, 40vw, 528px);
    height: 55px;
}

@media screen and (max-width:599px) {
    .checkCoursePair-button-blue {
        width: 85vw;
        height: 51px;
    }
}

/***********************************************************
 * 日時選択画面
 **********************************************************/
/* 選択したコース */
.frame-selectedCourse-table {
    position: relative;
    margin: 0.5em auto;
    background-color: #fff;
    border: 1.5px solid;
    border-color: #E3E3E3;
}
    /* ボディ部分の設定 */
    .frame-selectedCourse-table > tbody > tr > td {
        padding: 0.5% 4% 0.5% 2%;
    }

        .frame-selectedCourse-table > tbody > tr > td:nth-child(1) {
            width: 66.7%;
        }
        .frame-selectedCourse-table > tbody > tr > td:nth-child(2) {
            width: 33.3%;
            color: #CC5353;
            text-align: right;
        }
        /*最初と最後の行は余白を持たせる*/
        .frame-selectedCourse-table > tbody > tr:nth-child(1) > td {
            padding-top: clamp(10px, 1%, 15px);
        }
        .frame-selectedCourse-table > tbody > tr:nth-last-child(1) > td {
            padding-bottom: clamp(10px, 1%, 15px);
        }

    /* フッター部分の設定 */
    .frame-selectedCourse-table > tfoot {
        background-color: #F2F4F5;
    }

        .frame-selectedCourse-table > tfoot > tr > td {
            padding: 1% 2% 1% 2%;
        }

            .frame-selectedCourse-table > tfoot > tr > td:nth-child(1) {
                width: 66.7%;
                font-size: 15px;
                font-weight: bold;
            }

            .frame-selectedCourse-table > tfoot > tr > td:nth-child(2) {
                width: 33.3%;
                color: #CC5353;
                text-align: right;
            }

    /* セラピスト指名 */
    .designation > label {
        position: relative;
        display: inline-block; /* 縦並びに */
        margin: 0.5em 0; /* 前後のスペース */
        padding: 10px 0px 10px 28px;
        width: 12em;
        height: 3em;
        background-color: #ffffff;
        border: 1.5px solid #A2A2A2;
        border-radius: 5px;
        cursor: pointer;
        user-select: none;
    }
        /* 標準のinputは非表示にする */
        .designation > label > input {
            display: none;
        }
    /* オリジナルのinputの描画 */
    /* 常に表示する枠線の円 */
    .designation-radio {
        position: absolute;
        top: 8px; /* 上からの位置 */
        left: 3px;
        height: 22px; /* 大きさ */
        width: 22px; /* 大きさ */
        border: solid 1.5px #A2A2A2; /* 線 */
        border-radius: 50%;
        box-sizing: border-box;
    }
        /* 選択時に重ねる円 */
        .designation-radio:after {
            content: "";
            position: absolute;
            background: #113363; /* 色 */
            border-radius: 50%;
            top: 2px; /* 位置 */
            bottom: 2px;
            left: 2px;
            right: 2px;
            opacity: 0; /* 透明にしておく */
        }
    /* 選択時に重ねた円の透明を解除 */
    .designation > input[name="designation"]:checked + label > .designation-radio:after {
        opacity: 1;
    }
    /* 選択時に枠の色を変更 */
    .designation > input[name="designation"]:checked + label {
        border: 1.5px solid #113363;
    }

    #designation-staffArea{
        margin: 10px;
        background-color: #FFFFFF;
    }
    @media screen and (min-width:600px){
        .designation-container {
            background-color: #F2F4F5;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }

    /* 指名可能セラピスト一覧 */
    #designation-staff {
        display: flex; /* フレックスボックス */
        align-items: stretch; /* 高さをそろえる */
        flex-direction: row; /* 横並び */
        flex-wrap: nowrap; /* 一覧としては横にはみ出すように */
        overflow-x: scroll; /* 横スクロール */
        overflow-y: hidden; /* 縦スクロールなし */
        -ms-overflow-style: none; /* IE,Microsoft Edge用 */
        white-space: nowrap;
        background-color: #ffffff;
        margin: 10px 15px;
    }
        /* スクロールバーは非表示 */
        #designation-staff::-webkit-scrollbar {
            display: none;
        }
        /* 指名可能セラピスト */
        #designation-staff > label {
            display: inline-block;
            width: 150px;
            border: solid 1.5px #A2A2A2; /* 線 */
            border-radius: 5px;
            padding: 5px;
            margin: 0px 5px 10px 5px;
            cursor: pointer;
            white-space: normal; /* 各要素としてははみ出さないように */
        }
    /* 共通の設定 */
    .designation-staff-image, .designation-staff-name, .designation-staff-comment {
        display: block;
        text-align: center;
        padding: 2px;
    }
    /* 画像 */
    .designation-staff-image img {
        object-fit: contain;
        width: 130px; /* 各画像の大きさをそろえる */
        height: 110px; /* 各画像の大きさをそろえる */
    }
    /* 名前 */
    .designation-staff-name {
        text-align: center;
        padding: 2px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    /* コメント */
    .designation-staff-comment {
        text-align: left;
        padding: 2px;
        font-size: 12px;
    }
    /* 選択時に枠の色を変更 */
#designation-staff > input[name="designation-staff"]:checked + label {
    border: 2.5px solid #164280;
    color: #164280;
    box-shadow: 2px 4px 8px -4px rgb(0 0 0 / 50%);
}

    /* 指名可能セラピストの左右ボタン */
    .designation-staff-btn-right, .designation-staff-btn-left {
        display: table; /* 子要素でvertical-alignを使うために必要 */
        cursor: pointer;
        font-size: 20px;
    }

        .designation-staff-btn-right > i, .designation-staff-btn-left > i {
            display: table-cell; /* vertical-alignを使うために必要 */
            vertical-align: middle; /* 上下中央よせ */
        }


    /*ご来店日時選択*/
    .select-date {
        font-size: 17px;
        margin-top: 20px;
        margin-bottom: 10px;
        letter-spacing: 2px;
        text-align: center;
    }

    /*スケジュール表の設定*/
    .schedule-table {
        border: 1px solid #8E8276;
        color: #8E8276;
        font-size: 15px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
        /*スケジュール表のヘッダー設定*/
        .schedule-table > tbody > tr > th {
            padding-top: 9px;
            padding-bottom: 9px;
            font-size: 15px;
            border: 1px solid #8E8276;
        }
        /*スケジュール表の表設定*/
        .schedule-table > tbody > tr > td {
            font-size: 20px;
            border: 1px solid #8E8276;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        /*スケジュール表内のリンク設定*/
        .schedule-table a {
            color: #113363;
            text-decoration: none;
            cursor: pointer;
            display: block;
        }
        /*スケジュール表内のアイコン設定*/
        .schedule-table span {
            color: #113363;
            display: block;
        }
    /*スケジュール表内のアイコン説明設定*/
    .schedule-type {
        font-size: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    @media screen and (min-width:600px) {
        .schedule-type {
            border: 1px solid #D6D6D6;
        }
    }

    /* 曜日縦列の幅設定 */
    .week-header {
        width: 6%;
    }

    .week-header-phone {
        width: 12%;
    }
    /*祝日休日色設定(赤)*/
    .BGRed {
        background-color: #FADBE0;
    }
    /*祝日休日色設定(青)*/
    .BGBlue {
        background-color: #D0EDF3;
    }
    /*祝日休日色設定(灰)*/
    .BGGray {
        background-color: #F4F4F4;
    }
    /*文字色(青)*/
    .TXTBlue {
        color: #113363;
    }
    /*電話アイコン高さ設定*/
    .phone-margin {
        margin: 6px 0;
    }
    /*メッセージ設定*/
    .font-size-20 {
        font-size: 20px !important;
    }
    /*前へボタン共通*/
    .PrevWeek {
        border-radius: 5px;
        background-color: white;
        padding-left: 8px;
        padding-right: 22px;
        box-shadow: 2px 4px 4px -4px rgb(0 0 0 / 50%);
    }
    /*前へボタン浮遊*/
    .PrevWeekfloat {
        position: fixed; /*固定*/
        bottom: 30px; /*場所を左下に移動*/
        left: 20px; /*場所を左下に移動*/
        display: block; /*タグをblock要素に変更*/
        z-index: 1000;
        animation: float1 3s ease infinite;
        display: none;
    }
    /*次へボタン共通*/
    .NextWeek {
        border-radius: 5px;
        background-color: white;
        padding-right: 8px;
        padding-left: 22px;
        box-shadow: -2px 4px 4px -4px rgb(0 0 0 / 50%);
    }
    /*次へボタン浮遊*/
    .NextWeekfloat {
        position: fixed; /*固定*/
        bottom: 30px; /*場所を右下に移動*/
        right: 20px; /*場所を右下に移動*/
        display: block; /*タグをblock要素に変更*/
        z-index: 1000;
        animation: float1 3s ease infinite;
        display: none;
    }

    .arrow-size {
        font-size: 1.33333em;
        vertical-align: -0.1em;
        margin: 0px 8px;
    }
    /*浮遊動作*/
    @keyframes float1 {
        0% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-6px)
        }
    }
    /*上部日付*/
    #floatDate {
        position: fixed; /*固定*/
        top: 0px; /*場所を上に移動*/
        left: 0px; /*場所を上に移動*/
        display: block; /*タグをblock要素に変更*/
        z-index: 1000;
        display: none;
        background-color: white;
        width: 100%;
        margin-top: 0px;
    }

/***********************************************************
 * 日時選択（ペア予約）画面
 **********************************************************/
/*所要時間（代表者様・お連れ様）*/
.totalTimePair-box {
    display: flex;
    flex-direction: column;
    border: 1.5px solid #E3E3E3;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px 20px; /*内側の余白*/
    row-gap: 5px; /*行間の余白*/
}

.totalTimePair-item {
    display: flex;
    justify-content: space-between; /*名前は左寄せ、時間は右寄せ*/
}

/***********************************************************
 * セラピスト指名画面
 **********************************************************/
/*セラピスト一覧設定*/
.therapist-data {
    color: #8E8276;
}
    .therapist-data > tbody > tr > td {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 15px;
        padding-left: 15px;
    }
        .therapist-data > tbody > tr > td:nth-child(2) {
            padding-left: 0px;
        }
    /*セラピスト名の設定*/
    .therapist-data h4 {
        font-size: 15px;
        font-weight: bold;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    /*紹介文の設定*/
    .therapist-data .comment {
        font-size: 13px;
        margin-bottom: 5px;
    }
    /*セラピスト画像設定*/
    .therapist-data img {
        max-width: 120px;
        max-height: 120px;
    }

/***********************************************************
 * お客様情報画面
 **********************************************************/
/*選択した日時*/
.frame-selectedDate-table {
    position: relative;
    margin: 0.5em auto 2em auto;
    background-color: #fff;
    border: 1.5px solid;
    border-color: #E3E3E3;
}

    .frame-selectedDate-table > tbody > tr {
        border-bottom: 1.5px solid #E3E3E3; /*行の線*/
    }
    .frame-selectedDate-table > tbody > tr:last-child {
        font-size: 12px; /*指名セラピストの行は文字サイズを小さくする*/
    }

        .frame-selectedDate-table > tbody > tr > td {
            padding: 15px 4% 10px 4%; /*周りの間隔*/
        }

/*必須項目(表示内容を変更するにはcontentを修正する)*/
.required::after {
    content: "必須";
    display: inline-block; /* 改行制御        */
    border: 2px solid #CC5353;
    width: 35px; /* 枠の横幅        */
    height: 16px;
    color: #FFFFFF; /* 文字色        */
    background-color: #CC5353; /* 枠内背景色        */
    border-radius: 5px;
    font-size: 9px;
    text-align: center;
    margin-left: 5px;
}

/*アクティブなタブ*/
.user-tab-active {
    position: relative; /* z-indexを使うため指定 */
    z-index: 1; /* tab-borderより前面に */
    margin: 0px 0px -3px 0px; /* ネガティブマージン */
    background-color: #FFFFFF; /* 背景色 */
    border-radius: 5px 5px 0px 0px; /* 角の丸み */
    border-top: 2px solid #113363;
    border-left: 2px solid #113363;
    border-right: 2px solid #113363;
    border-bottom: 1px solid #E3E3E3; /* 下線 */
    padding: 10px 10%;
}
/*非アクティブなタブ*/
.user-tab-nonactive {
    position: relative; /* z-indexを使うため指定 */
    z-index: 0;
    margin: 0px 0px -3px 0px; /* ネガティブマージン */
    color: #FFFFFF; /* 文字色 */
    background-color: #113363; /* 背景色 */
    border-radius: 5px 5px 0px 0px; /* 角の丸み */
    border-top: 2px solid #113363;
    border-left: 2px solid #113363;
    border-right: 2px solid #113363;
    border-bottom: 1px solid #E3E3E3; /* 下線 */
    padding: 10px 10%;
    text-decoration: none; /* アンカーとしての下線は出さない */
}
    /*タブ線*/
    .tab-border {
        position: relative; /* z-indexを使うため指定 */
        z-index: 0;
        border: 1.5px solid #113363; /* 線 */
    }

/*お客様情報入力・確認*/
/*水平線*/
.user-table .user-table-hr {
    border-bottom: 2px solid #E3E3E3;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

@media screen and (max-width: 599px) {
    /*入力フォームの設定*/
    .user-table {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr 4fr;
        place-content: center start; /*上下中央・左揃え*/
        place-items: center start; /*上下中央・左揃え*/
        gap: 5px; /*gridの要素間の余白*/
        padding: 10px 2% 10px 2%; /*周りの余白*/
        font-size: 13px; /*文字サイズ*/
    }
        /*タイトル*/
        .user-table .user-table-title {
            grid-column: 1/5;
            padding-top: 15px; /*タイトル上の余白*/
        }
        /*入力フォーム*/
        .user-table .user-table-form {
            grid-column: 1/5;
        }
        /*タイトル(姓・セイ)*/
        .user-table .user-table-nametitle1 {
            grid-column: 1;
        }
        /*入力フォーム(姓・セイ)*/
        .user-table .user-table-nameform1 {
            grid-column: 2;
        }
        /*タイトル(名・メイ)*/
        .user-table .user-table-nametitle2 {
            grid-column: 3;
        }
        /*入力フォーム(名・メイ)*/
        .user-table .user-table-nameform2 {
            grid-column: 4;
        }
        /*入力フォーム(認証コード)*/
        .user-table .user-table-verificationcode {
            grid-column: 1/5;
        }
        /*水平線を非表示*/
        .user-table .user-table-hr {
            display: none;
        }
}
@media screen and (min-width: 600px) {
    /*入力フォームの設定*/
    .user-table {
        display: grid;
        grid-template-columns: 4fr 1fr 3fr 1fr 3fr;
        place-content: center start; /*上下中央・左揃え*/
        place-items: center start; /*上下中央・左揃え*/
        gap: 5px; /*gridの要素間の余白*/
        padding: 10px 2% 10px 2%; /*周りの余白*/
        font-size: 14px; /*文字サイズ*/
    }
        /*タイトル*/
        .user-table .user-table-title {
            grid-column: 1;
            padding-top: 15px; /*タイトル上の余白*/
            padding-bottom: 15px; /*タイトル下の余白*/
        }
        /*入力フォーム*/
        .user-table .user-table-form {
            grid-column: 2/6;
        }
        /*タイトル(姓・セイ)*/
        .user-table .user-table-nametitle1 {
            grid-column: 2;
        }
        /*入力フォーム(姓・セイ)*/
        .user-table .user-table-nameform1 {
            grid-column: 3;
        }
        /*タイトル(名・メイ)*/
        .user-table .user-table-nametitle2 {
            grid-column: 4;
        }
        /*入力フォーム(名・メイ)*/
        .user-table .user-table-nameform2 {
            grid-column: 5;
        }
        /*入力フォーム(認証コード)*/
        .user-table .user-table-verificationcode {
            grid-column: 2/4;
        }
        /*水平線*/
        .user-table .user-table-hr {
            grid-column: 1/6;
        }
}
/*ご要望欄設定*/
.web-comment {
    height: 150px;
    width: 100%;
    border: 1px solid #C0C0C0;
    padding: 0px 5px 0px 10px;
    border-radius: 5px;
    resize: none;
}
    /*スクロールバーの設定*/
    /*スクロールバーの幅*/
    .web-comment::-webkit-scrollbar {
        width: 10px;
    }
    /*スクロールバーの背景*/
    .web-comment::-webkit-scrollbar-track {
        background: #F1F1F1;
        border-radius: 5px;
    }
    /*スクロールバー*/
    .web-comment::-webkit-scrollbar-thumb {
        background: #C1C1C1;
        border-radius: 5px;
    }

/*メッセージ設定*/
.user-message {
    font-size: 12px;
}

/***********************************************************
 * お客様情報登録（ペア予約）画面
 **********************************************************/
/*選択した日時*/
.selectedDatePair-box {
    display: flex;
    flex-direction: column;
    border: 1.5px solid #E3E3E3;
    margin: 10px 10px 0px 10px;
    padding: 10px 0px; /*内側の余白*/
    row-gap: 5px; /*行間の余白*/
}

.selectedDatePair-item {
    display: flex;
    justify-content: left;
    padding: 0px 20px;
}

.selectedDatePair-item-divider {
    height: 0px;
    border-bottom: 1.5px solid #E3E3E3;
    margin: 8px 0;
    width: 100%;
}

/***********************************************************
 * ユーザ情報画面
 **********************************************************/
.input-table {
    color: #8E8276;
}

/*メッセージ設定*/
.font-size-10 {
    font-size: 10px !important;
}

/***********************************************************
 * ユーザ情報画面 > ラジオボタン設定
 **********************************************************/
input[type=radio] {
    display: none;
}

    /* 性別 */
    .sex > label {
        position: relative;
        display: inline-block; /* 縦並びに */
        margin: 0.5em; /* スペース */
        padding: 10px 20px 10px 28px;
        width: 8em;
        height: 3em;
        background-color: #ffffff;
        border: 1px solid #C0C0C0;
        border-radius: 5px;
        cursor: pointer;
        user-select: none;
    }
        /* 標準のinputは非表示にする */
        .sex > label > input {
            display: none;
        }
    /* オリジナルのinputの描画 */
    /* 常に表示する枠線の円 */
    .sex-radio {
        position: absolute;
        top: 8px; /* 上からの位置 */
        left: 3px;
        height: 22px; /* 大きさ */
        width: 22px; /* 大きさ */
        border: solid 1.5px #A2A2A2; /* 線 */
        border-radius: 50%;
        box-sizing: border-box;
    }
        /* 選択時に重ねる円 */
        .sex-radio:after {
            content: "";
            position: absolute;
            background: #113363; /* 色 */
            border-radius: 50%;
            top: 2px; /* 位置 */
            bottom: 2px;
            left: 2px;
            right: 2px;
            opacity: 0; /* 透明にしておく */
        }
    /* 選択時に重ねた円の透明を解除 */
    .sex > input:checked + label > .sex-radio:after {
        opacity: 1;
    }
    /* 選択時に枠の色を変更 */
    .sex > input:checked + label {
        border: 1.5px solid #113363;
    }

/***********************************************************
 * 予約確認画面
 **********************************************************/
/*予約内容・顧客情報*/
.confirm-table {
    margin-top: 20px;
    margin-bottom: 40px;
}

    .confirm-table tr {
        border-bottom: 2px solid #eee;
    }

    .confirm-table td {
        padding: 10px;
    }
    .confirm-table td:nth-child(1) {
        font-size: 13px; /*1つめ(項目名部分)だけ文字サイズを少し小さく*/
    }
    .confirm-table td:nth-child(2) {
        font-size: 14px;
    }

@media screen and (max-width: 599px) {
    .confirm-table td {
        display: block !important;
        width: 100%;
        padding: 5px 10px;
    }
}

/*チェック後のチェックボックス描画(この画面用上書き)*/
input[type=checkbox]:checked + input + label[for=consent]::before {
    background-color: #113363;
}

input[type=checkbox]:checked + input + label[for=consent]::after {
    border: 3px solid #FFFFFF;
    border-top-style: none;
    border-right-style: none;
}
/*同意項目設定*/
label[for=consent] {
    color: #AA5359;
    font-size: 15px;
    font-weight: bold;
}
/*注意事項見出し*/
.notice-title2 {
    color: #8E8276;
    font-weight: bold;
    font-size: 15px;
    margin-top: 25px;
    margin-bottom: 10px;
    letter-spacing: 4px;
}
/*注意事項補足説明*/
.notice-discript {
    color: #8E8276;
    font-size: 13px;
    padding: 0px 15px 0px 20px;
}
/*スクロール表示*/
.notice-scroll {
    height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 1px solid #C0C0C0;
    margin: 10px 0px;
    padding: 0px 5px 0px 10px;
    border-radius: 5px;
}
    /*スクロールバーの設定*/
    /*スクロールバーの幅*/
    .notice-scroll::-webkit-scrollbar {
        width: 10px;
    }
    /*スクロールバーの背景*/
    .notice-scroll::-webkit-scrollbar-track {
        background: #F1F1F1;
        border-radius: 5px;
    }
    /*スクロールバー*/
    .notice-scroll::-webkit-scrollbar-thumb {
        background: #C1C1C1;
        border-radius: 5px;
    }
    /*スクロール有りの注意事項欄の設定*/
    .notice-scroll #webreserve-notice {
        margin-top: 10px;
        margin-bottom: 5px;
    }

.caution-frame {
    border: 1px solid #CC5353;
    color: #CC5353;
    background-color: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 2px 10px 0px 10px;
}
@media screen and (max-width:599px) {
    .caution-frame {
        margin-top: 0px;
        margin-bottom: 10px;
    }
}

/***********************************************************
 * 予約完了画面
 **********************************************************/
/*完了メッセージ設定*/
.complete {
    background-color: #F5F5DC;
    font-size: 14px;
    line-height: 20px;
    padding-top: 25px;
    padding-bottom: 20px;
}

        .complete .title {
            color: #AA5359;
            font-weight: bold;
            padding-top: 5px;
            padding-bottom: 5px;
            border-top: 2px solid #AA5359;
            border-bottom: 2px solid #AA5359;
        }

        .complete ul {
            list-style: none;
            margin: 0px;
            padding-top: 15px;
            padding-left: 15px;
        }

            .complete ul li {
                margin-top: 15px;
            }

                .complete ul li:before {
                    content: '※'; /*ここにリストマーカーにしたい文字列を設定*/
                    margin-left: -15px; /*1文字分左に寄せる*/
                }

/***********************************************************
 * 確定予約確認画面
 **********************************************************/
.cancel-unavailable {
    color: #FF0000;
    padding-top: 30px;
}

/***********************************************************
 * 確定予約確認画面 > 確認ダイアログ設定
 **********************************************************/
/*ヘッダー設定*/
.ui-widget-header {
    background: #113363;
    color: #FFFFFF;
    border: none;
}
/*コンテンツ設定*/
.ui-dialog .ui-dialog-content {
    background: #FFFFFF;
}

    .ui-dialog .ui-dialog-content p {
        color: #797979;
        margin: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
/*ボタン基本設定*/
.ui-dialog .ui-dialog-buttonpane {
    background: #F4F4F4;
    border: none;
    margin: 0px;
    padding: 0px;
}
/*ボタン設定(はい)*/
.btn-yes {
    background-color: #113363;
    color: #FFFFFF;
}

.btn.btn-yes:hover {
    color: #FFFFFF;
}
/*ボタン設定(いいえ)*/
.btn-no {
    background-color: #FFFFFF;
    color: #797979;
    border: 1px solid #797979;
    letter-spacing: 2px;
}

.btn.btn-no:hover {
    color: #797979;
}

/***********************************************************
 * 店頭予約トップ画面（店舗iPadのchrome用に調整）
 **********************************************************/
/*ジェスチャーナビゲーション禁止*/
.doNotSwipe{
    overscroll-behavior: none !important;
}
/*背景（画像はView側で指定）*/
.shopfront-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}
/*メインレイアウト*/
.shopfront {
    display: grid;
    grid-template: repeat(24, 1fr) / repeat(12, 1fr);
    grid-template-areas:
        ". . . . . . . . . . . ."
        ". . . . . . . . . . . ."
        ". . . . . . . . . . . ."
        ". . . . . . . . . . . ."
        /*a: タイトル*/
        ". . . a a a a a a . . ."
        ". . . a a a a a a . . ."
        /*b: コース名*/
        ". . b b b b b b b b . ."
        ". . b b b b b b b b . ."
        ". . b b b b b b b b . ."
        /*c: 予約可能時刻*/
        ". . b b b b b b b b . ."
        ". . c c c c c c c c . ."
        ". . c c c c c c c c . ."
        ". . c c c c c c c c . ."
        ". . c c c c c c c c . ."
        ". . . . . . . . . . . ."
        /*d: ボタン*/
        ". d d d d d d d d d d ."
        ". d d d d d d d d d d ."
        ". d d d d d d d d d d ."
        ". d d d d d d d d d d ."
        ". d d d d d d d d d d ."
        ". d d d d d d d d d d ."
        /*e: 注意書き*/
        ". e e e e e e e e e e ."
        ". e e e e e e e e e e ."
        ". . . . . . . . . . . .";
    justify-items: center;
    align-items: center;
    font-family: "TsukuARdGothic-Regular","Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック", Osaka, sans-serif;
    color: #113363;
    font-weight: bold;
}
    /*タイトル*/
    .shopfront .shopfront-title {
        grid-area: a;
        background-color: #FFFFFF;
        border: 1.5px solid #FFFFFF;
        border-radius: 100vh;
        font-size: clamp(16px, 4.5vw, 50px);
        padding: 0px 0.8em 0px 0.8em;
        white-space: nowrap;
    }
    /*コース名*/
    .shopfront .shopfront-course {
        grid-area: b;
        font-size: clamp(13px, 3.5vw, 40px);
        text-align: center;
    }
    /*予約可能時刻*/
    .shopfront .shopfront-time {
        grid-area: c;
        font-size: clamp(64px, 17.2vw, 190px);
        white-space: nowrap;
        justify-self: end;/*「:mm~」の位置を固定*/
    }
        /*予約可能時刻の記号*/
        .shopfront .shopfront-time .shopfront-time-symbol {
            position: relative;
            bottom: 2vh;/*位置を少し上げる*/
        }
    /*ボタン*/
    .shopfront .shopfront-btn {
        grid-area: d;
        width: 100%;
        height: 100%;
        margin-top: 3vh;
    }
        /*ボタン（押下前）*/
        .shopfront .shopfront-btn #shopfront-btn-off {
            width: 100%;
            height: 90%;
            object-fit: scale-down;
        }
        /*ボタン（押下後）*/
        .shopfront .shopfront-btn #shopfront-btn-on {
            display: none; /*押下前は非表示*/
            width: 100%;
            height: 90%;
            object-fit: scale-down;
        }
    /*注意書き*/
    .shopfront .shopfront-notice {
        grid-area: e;
        font-size: clamp(6px, 2.5vw, 25px);
    }
/*メインレイアウト（空きなし）*/
.shopfront-closed {
    grid-template-areas:
        ".  .  .  .  .  .  .  .  .  .  .  ."
        ".  .  .  .  .  .  .  .  .  .  .  ."
        ".  .  .  .  .  .  .  .  .  .  .  ."
        ".  .  .  .  .  .  .  .  .  .  .  ."
        /*f1: 「本日のご予約は」*/
        ".  .  f1 f1 f1 f1 f1 f1 f1 f1 .  ."
        ".  .  f1 f1 f1 f1 f1 f1 f1 f1 .  ."
        ".  .  f1 f1 f1 f1 f1 f1 f1 f1 .  ."
        /*f2: 「終了しました」*/
        ".  .  f2 f2 f2 f2 f2 f2 f2 f2 .  ."
        ".  .  f2 f2 f2 f2 f2 f2 f2 f2 .  ."
        ".  .  f2 f2 f2 f2 f2 f2 f2 f2 .  ."
        ".  .  .  .  .  .  .  .  .  .  .  ."
        ".  .  .  .  .  .  .  .  .  .  .  ."
        ".  .  .  .  .  .  .  .  .  .  .  ."
        /*f3: 「明日以降のご予約は下記よりご予約ください」*/
        ".  .  f3 f3 f3 f3 f3 f3 f3 f3 .  ."
        ".  .  f3 f3 f3 f3 f3 f3 f3 f3 .  ."
        ".  .  f3 f3 f3 f3 f3 f3 f3 f3 .  ."
        /*d: ボタン*/
        ".  d  d  d  d  d  d  d  d  d  d  ."
        ".  d  d  d  d  d  d  d  d  d  d  ."
        ".  d  d  d  d  d  d  d  d  d  d  ."
        ".  d  d  d  d  d  d  d  d  d  d  ."
        ".  d  d  d  d  d  d  d  d  d  d  ."
        ".  d  d  d  d  d  d  d  d  d  d  ."
        ".  .  .  .  .  .  .  .  .  .  .  ."
        ".  .  .  .  .  .  .  .  .  .  .  .";
}
    /*「本日のご予約は」*/
    .shopfront-closed .shopfront-closed1 {
        grid-area: f1;
        font-size: clamp(24px, 7.4vw, 80px);
        white-space: nowrap;
    }
    /*「終了しました」*/
    .shopfront-closed .shopfront-closed2 {
        grid-area: f2;
        font-size: clamp(24px, 7.4vw, 80px);
        white-space: nowrap;
    }
    /*「明日以降のご予約は下記よりご予約ください」*/
    .shopfront-closed .shopfront-closed3 {
        grid-area: f3;
        font-size: clamp(4px, 4vw, 80px);
        white-space: nowrap;
        border: 1.5px solid #FFFFFF;
        background-color: #FFFFFF;
    }

/***********************************************************
 * 予約内容確認（クレジット情報入力）画面
 **********************************************************/
/* クレジットカード3Dセキュアロゴ */
.credit-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E3E3E3; /* 外枠 */
    max-width: 400px;
    width: 100%;
    margin: 5px auto; /* 中央揃え */
}
    /* クレジットカード3Dセキュアロゴ画像共通設定 */
    .credit-container img {
        height: 40px;
        object-fit: contain;
    }
/* VISA */
.visa {
    width: 11%;
    margin: 5px 3% 5px 4%;
}
/* MASTER */
.mastercard {
    width: 14%;
    margin: 5px 2% 5px 3%;
}
/* JCB */
.jcb {
    width: 11%;
    margin: 5px 6% 5px 3%;
}
/* AMEX */
.amex {
    width: 20%;
    margin: 5px 2% 5px 0;
}
/* DINERS */
.diners {
    width: 14%;
    margin: 5px 4% 5px 3%;
}

/***********************************************************
 * ローディング表示設定
 **********************************************************/
.divLoading {
    display: block;
    position: fixed;
    z-index: 1000;
    background-color: #3E3E3E;
    opacity: 0.4;
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
}

    .divLoading img {
        left: 50%;
        top: 50%;
        position: fixed;
    }