html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .menu-button-size {
        height: 10rem;
        width: 12rem;
    }
}

@media (min-width: 1000px) {
    .menu-button-size {
        height: 200px;
        width: 300px;
    }
}

form {
    background-color: white;
    padding: 1em;
}

div.row {
    padding-bottom: 0.5em;
}

.input-validation-error {
    background-color: #ffeeee;
}

label {
    white-space: nowrap;
}

pre {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: inherit;
}

.body-login {
    background-color: #FFDA03;
}

.hide {
    /*要素の非表示*/
    display: none;
}

/* -------------------------------
    下線
   ------------------------------- */
hr.underline {
    border: 1px solid black;
    opacity: 1;
    height: 5px;
}

hr.underline-short-center {
    margin: 0 auto auto auto;
    border: 1px solid black;
    opacity: 1;
    height: 5px;
    width: 70%;
    text-align: center;
}

/* -------------------------------
    ログイン表示部
   ------------------------------- */
.login-img {
    width: 40% !important;
}

/*ログイン注意書き*/
.login-explanation-box {
    height: auto;
    text-align: left;
    font-size: 1rem;
    background: #ffffff;
    border: 1px solid #cccccc;
    padding: 5px;
    margin-bottom: 2rem;
}

.login-explanation-p {
    margin: 0;
    text-align: center;
}

@media(min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}

/* -------------------------------
    一般ユーザー機能表示部
   ------------------------------- */
/* 画面横幅 */
.screen-width-user {
    margin: 0 auto;
    max-width: 900px !important;
}

=======
/*説明文ボックス*/
.explanation-box {
    height: 28rem;
    text-align: left;
    font-size: 20px;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #cccccc;
    padding: 5px;
    margin-bottom: 2rem;
}

.terms-title {
    /*利用規約 タイトル*/
    margin: 0;
    font-weight: bold;
}

.terms_explanation {
    /*利用規約 説明文*/
    margin: 0;
    font-size: 0.8rem;
}

/* メニュー */
.menu {
    margin-top: 100px;
}

/*システム利用規約*/
.system-use-terms {
    margin-top: 60px;
}
/* ページタイトル */
.page-title {
    font-size: 2.5rem;
    color: #696969;
    border-radius: 10px;
}

/* 問診注釈 */
.medicalQA_remarks {
    font-size: 1.7rem;
}

/* -------------------------------
    管理者機能表示部
   ------------------------------- */
/* 画面横幅 */
.screen-width-admin {
    max-width: 100%;
}

/* ヘッダー */
.admin-header {
    height: 107px;
    position: relative;
}

/* コンテンツ表示部 */
.admin-contents {
    height: calc(100% - 107px);
}

    /* サイドメニュー表示部 */
    .admin-contents .side {
        background-color: #203764;
        width: 200px;
        height: 100%;
    }

        .admin-contents .side a {
            padding-left: 0;
            color: white;
        }

    /* メインコンテンツ */
    .admin-contents main {
        width: calc(100% - 200px);
    }

        /* メインコンテンツ ページタイトル */
        .admin-contents main .page-title {
            z-index: 1;
            border: 1px solid black;
            font-size: 2rem;
            color: white;
            box-shadow: 0.25rem 0.25rem 0.25rem rgb(0 0 0 / 30%);
            border-radius: 1rem;
        }

        /* メインコンテンツ ページ内容表示部 */
        .admin-contents main .page-contents {
            margin-top: -30px;
            padding-top: 4rem;
            background-color: #f9f9f9;
            box-shadow: 0.25rem 0.25rem 0.25rem rgb(0 0 0 / 30%);
            border-radius: 1rem;
        }

        /* メインコンテンツ ページ内容表示部2 */
        .admin-contents main .page-contents2 {
            width: 100%;
            height: 78vh;
            overflow-y: auto;
            margin-left: 2rem !important;
        }

        /* メインコンテンツ ページ内容表示部2 */
        .admin-contents main .wrap-page-contents2 {
            width: 100%;
            max-width: 900px;
        }
/* -------------------------------
    ダイアログ
   ------------------------------- */
/* メッセージダイアログ コンテンツ部 */
.message-dialog-content {
    width: 90%;
    margin: 0 auto;
}

/* -------------------------------
    メールアドレス入力部
   ------------------------------- */
.mail-area {
    padding: 10px;
    background-color: #fcffd6;
}

/* -------------------------------
    ボーダー
   ------------------------------- */
/* 破線下のみ */
.border-dash-bottom {
    border-bottom: 1px dashed #dee2e6;
}

/* グレー */
.border-gray {
    border-color: #dee2e6;
}

/* -------------------------------
    ボタン
   ------------------------------- */
/* ログインボタン */
.btn-login {
    background-color: #60ED1E;
    color: white;
    font-size: 1.5rem;
}

/* 通常ボタン */
.btn-normal {
    background-color: #FFDA03;
    color: black;
    font-size: 1.5rem;
}

    .btn-normal:hover {
        background-color: #FFF3B3;
    }

/* 閉じるボタン(利用規約) */
.btn-close-terms {
    position: relative;
    background-color: #FF6B00;
    color: white;
    border-radius: .5rem;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* 非活性ボタン */
.btn-disabled {
    background-color: white;
    color: white;
    font-size: 1.5rem;
}

/* 通常ボタン（小） */
.btn-small {
    background-color: #FFDA03;
    color: black;
    font-size: 1rem;
}

    .btn-small:hover {
        color: white;
    }

/* 編集ボタン（予約者一覧） */
.btn-small-edit {
    background-color: #FF7F7F;
    color: black;
    font-size: 1rem;
}

    .btn-small-edit:hover {
        color: white;
    }

/* キャンセルボタン（受診メニュー個別削除） */
.btn-small-cancel {
    background-color: #FF7F7F;
    color: black;
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

    .btn-small-cancel:hover {
        color: white;
    }

/* 進むボタン */
.btn-next {
    position: relative;
    background-color: #FF6B00;
    color: white;
    border-radius: .5rem;
    font-size: 1.5rem;
}

    .btn-next::after {
        content: "\FF1E"; /* "＞" */
        font-size: 2rem;
        font-weight: bold;
        color: white;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        right: 5px;
        background-color: transparent;
    }

/* 戻るボタン */
.btn-back {
    position: relative;
    background-color: white;
    color: gray;
    border-color: gray;
    border-radius: .5rem;
    font-weight: bold;
    font-size: 1.5rem;
}

    .btn-back::before {
        content: "\FF1C"; /* "＜" */
        font-size: 2rem;
        font-weight: bold;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        left: 5px;
        background-color: transparent;
    }

/* グレーボタン */
.btn-gray {
    background-color: #F3F3F3;
    border-color: black;
}

/* 「はい」ボタン 強調（赤） */
.btn-yes-emphasis-red {
    color: white;
    background-color: #FF0000;
    border: none;
    box-shadow: 0.25rem 0.25rem 0.25rem rgb(0 0 0 / 30%);
}

/* 「いいえ」ボタン 強調 */
.btn-no-emphasis {
    color: #999999;
    background-color: white;
    border-width: 4px !important;
    border-color: #D5D5D5;
    padding: calc(0.375rem - 3px) calc(0.75rem - 3px);
}

/* 「はい」ボタン（オレンジ） */
.btn-yes-orange {
    color: white;
    background-color: #FF6B00;
    border: none;
}

/* 「はい」ボタン（オレンジ）影付き */
.btn-yes-orange-shadow {
    color: white;
    background-color: #FF6B00;
    border: none;
    box-shadow: 0.25rem 0.25rem 0.25rem rgb(0 0 0 / 30%);
}

/* -------------------------------
    検証エラーメッセージ
   ------------------------------- */
#validationSummary ul {
    list-style: none;
    padding-left: 0;
}

/* -------------------------------
    テーマカラー
   ------------------------------- */
.theme-color-bg {
    background-color: #FFDA03 !important;
}

.theme-color-font {
    color: #FFDA03 !important;
}

/* -------------------------------
    テーブル用
   ------------------------------- */
table.p0 th,
table.p0 td {
    padding: 0;
}

/* bootstrapのtable-striped上書き */
.table-striped > tbody > tr:nth-child(odd) > td {
    background-color: #FDF7E9;
}

/* -------------------------------
    支払い方法用
   ------------------------------- */
div.pay-way {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    div.pay-way .answer-choices-item {
        margin: 10px;
        background-color: #f0f8ff;
        padding: 10px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        min-width: 30%;
        white-space: nowrap;
    }

        div.pay-way .answer-choices-item label {
            white-space: pre-wrap;
        }

/* -------------------------------
    問診用
   ------------------------------- */
table.medical-interview {
    table-layout: fixed;
}

    table.medical-interview td.question-number {
        width: 15%;
        font-weight: bold;
        white-space: nowrap;
    }

    table.medical-interview .answer-choices {
        display: flex;
        flex-wrap: wrap;
    }

    table.medical-interview .answer-choices-item {
        margin: 10px;
        background-color: #f0f8ff;
        padding: 10px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        min-width: 30%;
        white-space: nowrap;
    }

        table.medical-interview .answer-choices-item label {
            white-space: pre-wrap;
        }

    table.medical-interview .inputted {
        background-color: #ffefd5 !important;
    }

/* -------------------------------
    アコーディオン用
   ------------------------------- */

/* アコーディオン開閉ボタン */
.accordion-button::after {
    /*background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-square' viewBox='0 0 16 16'> <path d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/> <path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/> </svg>");*/
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'> <path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/> </svg>");
}

.accordion-button:not(.collapsed)::after {
    /*background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-square' viewBox='0 0 16 16'> <path d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/> <path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/> </svg>");*/
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'> <path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/> </svg>");
}

/* -------------------------------
    bootstrap icon用
   ------------------------------- */
.bi-text-bold {
    -webkit-text-stroke: 2px;
}

/* -------------------------------
    ステップフロー用
   ------------------------------- */
.stepflow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 1em;
    padding: 0;
}

    .stepflow > li {
        position: relative;
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
        text-overflow: ellipsis;
        color: #b0bec5;
        -ms-flex: 1;
        -moz-flex: 1;
        -webkit-box-flex: 1;
        flex: 1;
    }

        .stepflow > li .bubble {
            display: block;
            width: 20px;
            height: 20px;
            margin: 0 auto 0.5em;
            border-radius: 1000px;
            background-color: #b0bec5;
        }

            .stepflow > li .bubble::after,
            .stepflow > li .bubble::before {
                position: absolute;
                top: 9px;
                display: block;
                width: 100%;
                height: 3px;
                content: '';
                background-color: #b0bec5;
            }

        .stepflow > li.completed,
        .stepflow > li.completed .bubble {
            color: #00acc1;
        }

            .stepflow > li.completed .bubble,
            .stepflow > li.completed .bubble::after,
            .stepflow > li.completed .bubble::before {
                background-color: #4dd0e1;
            }

        .stepflow > li:last-child .bubble::after,
        .stepflow > li:last-child .bubble::before {
            width: 0%;
            margin-right: 50%;
        }

        .stepflow > li.active,
        .stepflow > li.active .bubble {
            font-weight: bold;
            color: #f57c00;
        }

            .stepflow > li.active .bubble,
            .stepflow > li.active .bubble::after,
            .stepflow > li.active .bubble::before {
                background-color: #fb8c00;
            }

/* -------------------------------
    受診メニュー項目情報ダイアログ用
   ------------------------------- */
/* タイトル */
.menu-item-information-title {
    margin: 0 -32px 0 auto;
}

/* -------------------------------
    bootstrap-table
   ------------------------------- */
.bootstrap-table .fixed-table-container .table thead th .th-inner {
    padding: 0.5rem;
}

/* -------------------------------
    予約日時選択画面
   ------------------------------- */
/* カレンダー ボーダー */
.reservation-calendar-cell-border {
    border-color: #A6A6A6 !important;
}

/* -------------------------------
    営業日時変更画面
   ------------------------------- */
/* カレンダー ボーダー */
.business-date-cell-border {
    border-color: #808080 !important;
}

/* 日付背景色 グレー */
.business-date-bg-gray {
    background-color: #D9D9D9 !important;
}

/* -------------------------------
    予約制御画面
   ------------------------------- */
/* カレンダー 列幅 */
.reservation-control-calendar th.width-col {
    width: 12.5%;
}

/* 非営業時間背景色 グレー */
.non-business-hours-bg-gray {
    background-color: #D9D9D9 !important;
}

/* -------------------------------
    その他
   ------------------------------- */
/* 取消線 */
.line-through {
    text-decoration: line-through;
}

.admin-font-size {
    font-size: 0.8rem;
}

.col-custom {
    max-width: 50px;
}

.underline {
    width: 100%;
}

@media screen and (min-width: 80rem) {
    .main {
        margin: 1em 2em;
    }
}

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.w-30 {
    width: 25rem;
}

.w-45 {
    width: 45rem;
}

.offset-05 {
    margin-left: 3%;
}