/* 証明書画面 */
.certs {
    resize: none;
    min-height: 100px;
    width: 100%;
}

/* タイムレコーダー画面 */
/* スマホサイズ */
@media not all and (min-width: 601px){
    .grid-areas{
        grid-template-areas:'D'
                            'C'
                            'A'
                            'B';
    }
}
/* 通常 */
@media not all and (max-width: 600px){
    .grid-areas{
        grid-template-areas:'A A A'
                            'B C D';
    }
}

/* grid erea */
.A{
    grid-area:A;
}
.B{
    grid-area:B;
}
.C{
    grid-area:C;
}
.D{
    grid-area:D;
}

/* 撮影画面 */
/* 反転処理 */
#video,
#canvas1,
.faceRegistConfirm{
    transform: scaleX(-1);
}

/* ×ボタン */
.x-button {
    background-color: #ff5050;
}
.x-button:hover {
    background-color: #c00000;
}

/* 画像 */
#recertificationImage{
    transform: scale(-1, 1);
}

/* 打刻ボタン */
.btn-punch {
    color: white;
    text-align: center;
    font-weight: 700;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 認証モーダルボタン類基本設定 */
.btn-modal {
    color: white;
    text-align: center;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 認証モーダルボタン灰色 */
.btn-modal.gray {
    background-color: #74868C;
    border-color: #6B7280;
}
.btn-modal.gray:hover {
    background-color: #6B7280;
}

/* 認証モーダルボタン黄色 */
.btn-modal.yellow {
    background-color: #ffc000;
    border-color: #be8f00;
}
.btn-modal.yellow:hover {
    background-color: #be8f00;
}

/* 認証モーダルボタン青 */
.btn-modal.blue {
    background-color: #2692ff;
    border-color: #2f5597;
}
.btn-modal.blue:hover {
    background-color: #2f5597;
}

/* ヘルプ打刻検索フォーム項目 */
#searchHelpEmployeesForm input[type=text] {
    padding-top: 0.25rem!important;
    padding-bottom: 0.25rem!important;
    font-size: 0.8125rem!important;
    line-height: 1.125rem!important;
    border-radius: 0.25rem!important;
    border-color: #D1D5DB!important;
}

/* select2対応 */
.select2-container .select2-selection--single,
.border-gray-lf {
    border-color: #D1D5DB;
}
.border-red-500 + .select2-container .select2-selection--single {
    border-color: #ff5050;
}

.select2 .select2-selection {
    font-size: 13px;
}

.select2 .select2-selection__rendered {
    line-height: 29px!important;
    color: rgb(17 24 39 / var(--tw-text-opacity))!important;
}

/* ヘルプ打刻検索ボタン */
#searchHelpEmployeesForm input[type="submit"].btn-search {
    color: white;
    text-align: center;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem; line-height: 1.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    border-bottom: 0.25rem solid;
    border-radius: 0.375rem;
    background-color: #74868C;
    border-color: #6B7280;
}
#searchHelpEmployeesForm input[type="submit"].btn-search:hover {
    background-color: #6B7280;
}

/* ヘルプ打刻一覧表示 */
#helpEmployeesHead {
    border-radius: 0.5rem 0.5rem 0 0;
}
#helpEmployeesBody {
    border-radius: 0 0 0.5rem 0.5rem;
}
#helpEmployeesBody tr:hover {
    background-color: #e3f3ff;
}
#helpEmployeesBody tr.selected {
    background-color: #dae3f3;
}
#helpEmployeesBody tr.selected:hover {
    background-color: #dae3f3;
}

/* アンケートフォーム */
#surveyForm input::placeholder {
    color: #ffbb99;
}

#surveyForm input[type="text"],
#surveyForm input[type="number"] {
    padding-top: 0.5rem!important;
    padding-bottom: 0.5rem!important;
    font-size: 1.25rem!important;
    line-height: 1.75rem!important;
}
#surveyForm input[type="text"].border-red-500,
#surveyForm input[type="number"].border-red-500 {
    border-color: #ff5050;
}

#surveyForm select {
    padding-top: 0.5rem!important;
    padding-bottom: 0.5rem!important;
    font-size: 1.25rem!important;
    line-height: 1.75rem!important;
}

#surveyForm label.btn {
    padding: 0.75rem 1.25rem;
}

/* アンケート画面、メディアクエリ（タブレット用） */
@media screen and (min-width: 601px) and (max-width: 1050px) {
    #survey-answers-create div.identified {
        font-size: 1.5rem; line-height: 2rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #survey-answers-create img.onta {
        width: 12rem;
    }

    #survey-answers-create div.timestamp,
    #survey-answers-create form,
    #survey-answers-create form label {
        font-size: 1.875rem; line-height: 2.25rem;
    }
    #survey-answers-create div.timestamp div.line {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    #survey-answers-create h3 {
        font-size: 2.25rem; line-height: 2.5rem;
        width: 30rem;
        margin-bottom: 1rem;
    }
    
    #survey-answers-create div.description,
    #survey-answers-create div.required {
        font-size: 1.25rem; line-height: 1.75rem;
        width: 30rem;
        margin-bottom: 1rem;
    }

    #surveyForm {
        width: 30rem;
    }

    #surveyForm .line {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    #surveyForm input[type="text"],
    #surveyForm input[type="number"] {
        padding-top: 1rem!important;
        padding-bottom: 1rem!important;
        font-size: 1.875rem!important;
        line-height: 2.25rem!important;
    }

    #surveyForm select {
        padding-top: 1rem!important;
        padding-bottom: 1rem!important;
        font-size: 1.875rem!important;
        line-height: 2.25rem!important;
    }

    #surveyForm label.btn {
        padding: 1.25rem 2.25rem;
    }

    #surveyForm button {
        font-size: 2.25rem; line-height: 2.5rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    #surveyForm a.btn {
        font-size: 2.25rem; line-height: 2.5rem;
        margin-bottom: 1rem;
    }
}

/* 顔登録ボタン類基本設定 */
.btn.btn-faceregist {
    color: white;
    text-align: center;
    font-weight: 700;
    font-size: 1.5rem; line-height: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 顔登録ページボタン青 */
.btn.btn-faceregist.blue {
    background-color: #2692ff;
    border-color: #2f5597;
}
.btn.btn-faceregist.blue:hover {
    background-color: #2f5597;
}

/* 顔登録ページボタン灰色 */
.btn.btn-faceregist.gray {
    background-color: #74868C;
    border-color: #6B7280;
}
.btn.btn-faceregist.gray:hover {
    background-color: #6B7280;
}

/* 顔登録ページボタン緑 */
.btn.btn-faceregist.green {
    background-color: #1ad8a2;
    border-color: #15af83;
}
.btn.btn-faceregist.green:hover {
    background-color: #15af83;
}

/* 顔登録ページボタン赤 */
.btn.btn-faceregist.red {
    background-color: #ff5050;
    border-color: #c00000;
}
.btn.btn-faceregist.red:hover {
    background-color: #c00000;
}

/* 各打刻ボタン色 */
.btn-punch.clock-in,
#punchMode.clock-in .btn-modal.multi {
    background-color: #2692ff;
    border-color: #2f5597;
}
.btn-punch.clock-in:hover,
#punchMode.clock-in .btn-modal.multi:hover {
    background-color: #2f5597;
}

.btn-punch.clock-out,
#punchMode.clock-out .btn-modal.multi {
    background-color: #ff5050;
    border-color: #c00000;
}
.btn-punch.clock-out:hover,
#punchMode.clock-out .btn-modal.multi:hover {
    background-color: #c00000;
}

.btn-punch.start-break,
#punchMode.start-break .btn-modal.multi {
    background-color: #1ad8a2;
    border-color: #15af83;
}
.btn-punch.start-break:hover,
#punchMode.start-break .btn-modal.multi:hover {
    background-color: #15af83;
}

.btn-punch.end-break,
#punchMode.end-break .btn-modal.multi {
    background-color: #8585ff;
    border-color: #5d5dff;
}
.btn-punch.end-break:hover,
#punchMode.end-break .btn-modal.multi:hover {
    background-color: #5d5dff;
}

.btn-punch.off-site-start,
#punchMode.off-site-start .btn-modal.multi {
    background-color: #ffc000;
    border-color: #be8f00;
}
.btn-punch.off-site-start:hover,
#punchMode.off-site-start .btn-modal.multi:hover {
    background-color: #be8f00;
}

.btn-punch.off-site-end,
#punchMode.off-site-end .btn-modal.multi {
    background-color: #33cccc;
    border-color: #269d9a;
}
.btn-punch.off-site-end:hover,
#punchMode.off-site-end .btn-modal.multi:hover {
    background-color: #269d9a;
}
/* アンケート */
#punchMode.survey .btn-modal.multi {
    background-color: #74868C;
    border-color: #6B7280;
}

/* その他リンクボタン */
button.btn-link {
    background-color: #74868C;
    color: white;
    text-align: center;
    font-weight: 700;
}

button:hover.btn-link {
    background-color: #6B7280;
}

button.btn-link {
    border-color: #6B7280
}

/* 日付選択ボタン */
.btn-dayselect {
    color: white;
    text-align: center;
    font-weight: 700;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 日付選択ボタンネイビー */
.btn-dayselect.navy {
    background-color: #2f5597;
    border-color: #2a3744;
}
.btn-dayselect.navy:hover {
    background-color: #2a3744;
}

/* 日付選択ボタンダークグレー */
.btn-dayselect.darkgray {
    background-color: #74868c;
    border-color: #545964;
}
.btn-dayselect.darkgray:hover {
    background-color: #545964;
}

/* 日付選択ボタン鮮やかな赤 */
.btn-dayselect.vividred {
    background-color: #ff1d1d;
    border-color: #bf0000;
}
.btn-dayselect.vividred:hover {
    background-color: #bf0000;
}

/* ステータス表示 */
.border-status-success {
    border-color: #3d9efe;
}
.bg-status-success {
    background-color: #deebfc;
}

.border-status-failure {
    border-color: #ffc000;
}
.bg-status-failure {
    background-color: #fff2cc;
}

.text-green-lf {
    color: #00b050;
}

.text-blue-lf {
    color: #0099ff;
}

/* 顔登録ページ従業員コード入力 */
input[name="employee_code"] {
    font-size: 1.8rem!important;
}
input[name="employee_code"]::placeholder {
    font-size: 0.8125rem;
    transform:translateY(-0.3rem)
}

/* 顔登録ページ画像関連 */
.border-face-regist {
    border-color: #7f7f7f;
}
.bg-face-regist {
    background-color: #f2f2f2;
}

.gps-on {
    background-color: #2692ff;
}
.gps-off {
    background-color: #ff0000;
}

/* アンケート回答画面 */
.bg-blue-lf {
    background-color: #2692ff;
}

/* メディアクエリ（モーダル以外） */
/* ～600（スマホ） */
@media screen and (max-width: 600px) {
    #upperGrid {
        text-align: center;
        grid-template-rows: auto auto auto 5rem;
    }
    #today {
        font-size: 1.25rem;
        line-height: 1.75rem;
        height: 2rem;
    }
    #realtime {
        font-size: 3.75rem;
        line-height: 1;
        margin-left: 0;
    }
    #division {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    #largeLogo {
        width: 10rem;
        height: 3.5rem;
    }
    .btn-punch {
        font-size: 3rem;
        line-height: 1;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 0.75rem solid;
        border-radius: 1.5rem;
    }
    #linkGrid {
        grid-template-rows: repeat(2, minmax(0, 1fr));
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 1rem;
    }
    .btn-link {
        border-radius: 0.75rem;
        border-bottom: 0.25rem solid;
        font-size: 1.5rem;
        line-height: 2rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    #surveyButton {
        grid-column: span 2 / span 2;
    }
    #timecardButton {
        grid-column: span 2 / span 2;
    }
    #faceRegistButton {
        grid-column: span 2 / span 2;
    }
    #helpPunchButton {
        grid-column: span 2 / span 2;
    }
}

/* 600～720（タブレット） */
@media screen and (min-width: 601px) {
    #upperGrid {
        text-align: left;
        grid-template-rows: 2rem 4rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #today {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    #realtime {
        font-size: 3rem;
        line-height: 1;
        margin-left: 0;
    }
    #division {
        font-size: 1.5rem;
        line-height: 2rem;
        margin-left: 0;
    }
    #largeLogo {
        width: 12rem;
        height: 4rem;
    }
    .btn-punch {
        font-size: 1.875rem;
        line-height: 2.25rem;
        padding-top: 1.0rem;
        padding-bottom: 1.0rem;
        border-bottom: 0.5rem solid;
        border-radius: 1rem;
    }
    #linkGrid {
        grid-template-rows: repeat(1, minmax(0, 1fr));
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
    .btn-link {
        border-radius: 0.75rem;
        border-bottom: 0.375rem solid;
        font-size: 1.25rem;
        line-height: 1.75rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    #surveyButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #timecardButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
   #faceRegistButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #helpPunchButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* 720～1050（タブレット） */
@media screen and (min-width: 720px) {
    #upperGrid {
        text-align: left;
        grid-template-rows: 2.25rem 5rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #today {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    #realtime {
        font-size: 3.75rem;
        line-height: 1;
        margin-left: 0.5rem;
    }
    #division {
        font-size: 1.875rem;
        line-height: 2.25rem;
        margin-left: 2rem;
    }
    #largeLogo {
        width: 15rem;
        height: 5rem;
    }
    .btn-punch {
        font-size: 1.875rem;
        line-height: 2.25rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 0.5rem solid;
        border-radius: 1.5rem;
    }
    #linkGrid {
        grid-template-rows: repeat(1, minmax(0, 1fr));
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }
    .btn-link {
        border-radius: 1rem;
        border-bottom: 0.375rem solid;
        font-size: 1.25rem;
        line-height: 1.75rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    #surveyButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #timecardButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #faceRegistButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #helpPunchButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* 1050～1300（ノートPC） */
@media screen and (min-width: 1050px) {
    #upperGrid {
        text-align: left;
        grid-template-rows: 2.5rem 7rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #today {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    #realtime {
        font-size: 4.5rem;
        line-height: 1;
        margin-left: 3rem;
    }
    #division {
        font-size: 2.25rem;
        line-height: 2.5rem;
        margin-left: 2rem;
    }
    #largeLogo {
        width: 20rem;
        height: 7rem;
    }
    .btn-punch {
        font-size: 3rem;
        line-height: 1;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 0.75rem solid;
        border-radius: 1.5rem;
    }
    #linkGrid {
        grid-template-rows: repeat(1, minmax(0, 1fr));
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2rem;
    }
    .btn-link {
        border-radius: 1rem;
        border-bottom: 0.5rem solid;
        font-size: 1.875rem;
        line-height: 2.25rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    #surveyButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #timecardButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #faceRegistButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #helpPunchButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* 1300～（デスクトップモニタ） */
@media screen and (min-width: 1300px) {
    #upperGrid {
        text-align: left;
        grid-template-rows: 2.5rem 7rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #today {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    #realtime {
        font-size: 6rem;
        line-height: 1;
        margin-left: 3rem;
    }
    #division {
        font-size: 2.25rem;
        line-height: 2.5rem;
        margin-left: 2rem;
    }
    #largeLogo {
        width: 20rem;
        height: 7rem;
    }
    .btn-punch {
        font-size: 3.75rem;
        line-height: 1;
        padding-top: 2.0rem;
        padding-bottom: 2.0rem;
        border-bottom: 0.75rem solid;
        border-radius: 1.5rem;
    }
    #linkGrid {
        grid-template-rows: repeat(1, minmax(0, 1fr));
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2rem;
    }
    .btn-link {
        border-radius: 1.5rem;
        border-bottom: 0.5rem solid;
        font-size: 2.25rem;
        line-height: 2.5rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    #surveyButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #timecardButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #faceRegistButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #helpPunchButton {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* メディアクエリ（モーダル上下中央表示切替え） */
/* ～314（縮小モーダルサイズ未満） */
@media screen and (max-height: 314px) {
    #modalCenter {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .modal {
        max-height: inherit;
    }
}

/* 315～（縮小モーダルサイズ以上） */
@media screen and (min-height: 315px) {
    #modalCenter {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .modal {
        max-height: inherit;
    }
}

/* メディアクエリ（モーダルサイズ） */
/* デフォルト（小サイズモーダル） */
.modal {
    max-height: inherit;
    min-height: 18rem;
}
#faceRecognition,
#faceRecognitionResult,
#recertification,
#employeeClockIn,
#employeeClockInResult {
    padding: 0.75rem;
}
.modal-status-wrap {
    height: 1.5rem;
    margin-bottom: 0.5rem;
}
.modal-status-wrap .absolute {
    width: 1.5rem;
    height: 1.5rem;
}
.modal-status-wrap .absolute img {
    width: 2rem;
    height: 2rem;
}
.modal-status {
    height: 1.5rem;
    font-size: 0.875rem; line-height: 1.25rem;
    padding-left: 1.125rem;
    padding-right: 0.375rem;
}
.timerecorderCanvasSize,
.faceRegistCanvasSize {
    width: 150px;
    height: 150px;
}
.faceResultImageSize {
    width: 150px;
    height: 126px;
}
.faceResultImageSize img {
    max-height: 126px;
}
.faceResultPunch {
    min-height: 1.5rem;
    font-size: 0.75rem; line-height: 1rem;
}
.message {
    min-height: 2.5rem;
    font-size: 0.75rem; line-height: 1rem;
}
.icon {
    padding: 0.1875rem;
}
.icon img {
    width: 5rem;
    height: 5rem;
}
#helpEmployeesBody {
    height: 2rem;
}
#employee_code {
    height: 3rem;
    margin-bottom: 0.5rem;
}
#employeeClockInResult .faceResultImageSize img {
    margin-top: 3px;
    height: 80px;
    margin-bottom :43px;
}
#codePunchError .faceResultImageSize img {
    height: 126px;
}
#surveyQuestionnaire div.title {
    height: 2rem;
}
#surveyQuestionnaire div.questionnaire {
    height: 94px;
}
#selectSurvey div.buttons {
    height: 218px;
    overflow-y: auto;
}

/* width480以下は、高さ430で切替え（中サイズモーダル改行あり） */
@media screen and (max-width: 480px) and (min-height: 430px) {
    .modal {
        max-height: inherit;
        min-height: 24rem;
    }
    #faceRecognition,
    #faceRecognitionResult,
    #recertification,
    #employeeClockIn,
    #employeeClockInResult {
        padding: 1rem;
    }
    .modal-status-wrap {
        height: 2rem;
        margin-bottom: 1rem;
    }
    .modal-status-wrap .absolute {
        width: 2rem;
        height: 2rem;
    }
    .modal-status-wrap .absolute img {
        width: 2.5rem;
        height: 2.5rem;
    }
    .modal-status {
        height: 2rem;
        font-size: 1.125rem; line-height: 1.75rem;
        padding-left: 1.5rem;
        padding-right: 0.5rem;
    }
    .timerecorderCanvasSize,
    .faceRegistCanvasSize {
        width: 200px;
        height: 200px;
    }
    .faceResultImageSize {
        width: 200px;
        height: 164px;
    }
    .faceResultImageSize img {
        max-height: 164px;
    }
    .faceResultPunch {
        min-height: 2.25rem;
        font-size: 1.125rem; line-height: 1.75rem;
    }
    .message {
        min-height: 4rem;
        font-size: 1.125rem; line-height: 1.75rem;
    }
    .icon {
        padding: 0.125rem;
    }
    .icon img {
        width: 6rem;
        height: 6rem;
    }
    #helpEmployeesBody {
        height: 4rem;
    }
    #employee_code {
        height: 3rem;
        margin-bottom: 2.75rem;
    }
    #employeeClockInResult .faceResultImageSize img {
        margin-top: 2px;
        height: 96px;
        margin-bottom :66px;
    }
    #codePunchError .faceResultImageSize img {
        height: 164px;
    }
    #surveyQuestionnaire div.title {
        height: 2rem;
    }
    #surveyQuestionnaire div.questionnaire {
        height: 132px;
    }
    #selectSurvey div.buttons {
        height: 304px;
        overflow-y: auto;
    }
}

/* width480以上は、高さ400で切替え（中サイズモーダル改行無し） */
@media screen and (min-width: 480px) and (min-height: 400px) {
    .modal {
        max-height: inherit;
        min-height: 24rem;
    }
    #faceRecognition,
    #faceRecognitionResult,
    #recertification,
    #employeeClockIn,
    #employeeClockInResult {
        padding: 1rem;
    }
    .modal-status-wrap {
        height: 2rem;
        margin-bottom: 1rem;
    }
    .modal-status-wrap .absolute {
        width: 2rem;
        height: 2rem;
    }
    .modal-status-wrap .absolute img {
        width: 2.5rem;
        height: 2.5rem;
    }
    .modal-status {
        height: 2rem;
        font-size: 1.125rem; line-height: 1.75rem;
        padding-left: 1.5rem;
        padding-right: 0.5rem;
    }
    .timerecorderCanvasSize,
    .faceRegistCanvasSize {
        width: 200px;
        height: 200px;
    }
    .faceResultImageSize {
        width: 200px;
        height: 164px;
    }
    .faceResultImageSize img {
        max-height: 164px;
    }
    .faceResultPunch {
        min-height: 2.25rem;
        font-size: 1.125rem; line-height: 1.75rem;
    }
    .message {
        min-height: 4rem;
        font-size: 1.125rem; line-height: 1.75rem;
    }
    .icon {
        padding: 0.125rem;
    }
    .icon img {
        width: 6rem;
        height: 6rem;
    }
    #helpEmployeesBody {
        height: 4rem;
    }
    #employee_code {
        height: 3rem;
        margin-bottom: 2.75rem;
    }
    #employeeClockInResult .faceResultImageSize img {
        margin-top: 2px;
        height: 96px;
        margin-bottom :66px;
    }
    #codePunchError .faceResultImageSize img {
        height: 164px;
    }
    #surveyQuestionnaire div.title {
        height: 2rem;
    }
    #surveyQuestionnaire div.questionnaire {
        height: 132px;
    }
    #selectSurvey div.buttons {
        height: 304px;
        overflow-y: auto;
    }
}

/* width480以下は、高さ560で切替え（通常サイズモーダル改行あり） */
@media screen and (max-width: 480px) and (min-height: 560px) {
    .modal {
        max-height: inherit;
        min-height: 25rem;
    }
    #faceRecognition,
    #faceRecognitionResult,
    #recertification,
    #employeeClockIn,
    #employeeClockInResult {
        padding: 1rem;
    }
    .modal-status-wrap {
        height: 3rem;
        margin-bottom: 1rem;
    }
    .modal-status-wrap .absolute {
        width: 3rem;
        height: 3rem;
    }
    .modal-status-wrap .absolute img {
        width: 4rem;
        height: 4rem;
    }
    .modal-status {
        height: 3rem;
        font-size: 1.125rem; line-height: 1.75rem;
        padding-left: 2.25rem;
        padding-right: 0.75rem;
    }
    .timerecorderCanvasSize,
    .faceRegistCanvasSize{
        width: 300px;
        height: 300px;
    }
    .faceResultImageSize {
        width: 300px;
        height: 264px;
    }
    .faceResultImageSize img {
        max-height: 264px;
    }
    .faceResultPunch {
        min-height: 2.25rem;
        font-size: 1.125rem; line-height: 1.75rem;
    }
    .message {
        min-height: 4rem;
        font-size: 1.125rem; line-height: 1.75rem;
    }
    .icon {
        padding: 3.25rem;
    }
    .icon img {
        width: 6rem;
        height: 6rem;
    }
    #helpEmployeesBody {
        height: 8rem;
    }
    #employee_code {
        height: 3rem;
        margin-bottom: 2.75rem;
    }
    #employeeClockInResult .faceResultImageSize img {
        margin-top: 52px;
        height: 96px;
        margin-bottom :116px;
    }
    #codePunchError .faceResultImageSize img {
        height: 264px;
    }
    #surveyQuestionnaire div.title {
        height: 2rem;
    }
    #surveyQuestionnaire div.questionnaire {
        height: 232px;
    }
    #selectSurvey div.buttons {
        height: 404px;
        overflow-y: auto;
    }
}

/* width480以上は、高さ520で切替え（通常サイズモーダル改行無し） */
@media screen and (min-width: 480px) and (min-height: 520px) {
        .modal {
        max-height: inherit;
        min-height: 25rem;
    }
    #faceRecognition,
    #faceRecognitionResult,
    #recertification,
    #employeeClockIn,
    #employeeClockInResult {
        padding: 1rem;
    }
    .modal-status-wrap {
        height: 3rem;
        margin-bottom: 1rem;
    }
    .modal-status-wrap .absolute {
        width: 3rem;
        height: 3rem;
    }
    .modal-status-wrap .absolute img {
        width: 4rem;
        height: 4rem;
    }
    .modal-status {
        height: 3rem;
        font-size: 1.125rem; line-height: 1.75rem;
        padding-left: 2.25rem;
        padding-right: 0.75rem;
    }
    .timerecorderCanvasSize,
    .faceRegistCanvasSize{
        width: 300px;
        height: 300px;
    }
    .faceResultImageSize {
        width: 300px;
        height: 264px;
    }
    .faceResultImageSize img {
        max-height: 264px;
    }
    .faceResultPunch {
        min-height: 2.25rem;
        font-size: 1.125rem; line-height: 1.75rem;
    }
    .message {
        min-height: 4rem;
        font-size: 1.125rem; line-height: 1.75rem;
    }
    .icon {
        padding: 3.25rem;
    }
    .icon img {
        width: 6rem;
        height: 6rem;
    }
    #helpEmployeesBody {
        height: 8rem;
    }
    #employee_code {
        height: 3rem;
        margin-bottom: 2.75rem;
    }
    #employeeClockInResult .faceResultImageSize img {
        margin-top: 52px;
        height: 96px;
        margin-bottom :116px;
    }
    #codePunchError .faceResultImageSize img {
        height: 264px;
    }
    #surveyQuestionnaire div.title {
        height: 2rem;
    }
    #surveyQuestionnaire div.questionnaire {
        height: 232px;
    }
    #selectSurvey div.buttons {
        height: 404px;
        overflow-y: auto;
    }
}

/* メディアクエリ（モーダルボタンサイズ） */
/* デフォルト（小サイズボタン） */
.btn-modal {
    font-size: 1rem; line-height: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.25rem solid;
    border-radius: 0.375rem;
}
#faceRecognitionCode,
#recertificationCode {
    font-size: 1rem; line-height: 1.5rem;
}
.btn-dayselect {
    font-size: 1.5rem; line-height: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.25rem solid;
    border-radius: 1rem;
}

/* width480以下は、高さ430で切替え（通常サイズボタン改行あり） */
@media screen and (max-width: 480px) and (min-height: 430px) {
    .btn-modal {
        font-size: 1.875rem; line-height: 2.25rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 0.25rem solid;
        border-radius: 0.75rem;
    }
    #faceRecognitionCode,
    #recertificationCode {
        font-size: 1.5rem; line-height: 2rem;
    }
    .btn-dayselect {
        font-size: 2.25rem; line-height: 2.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-bottom: 0.5rem solid;
        border-radius: 1.5rem;
    }
}

/* width480以上は、高さ400で切替え（通常サイズボタン改行あり） */
@media screen and (min-width: 480px) and (min-height: 400px) {
    .btn-modal {
        font-size: 1.875rem; line-height: 2.25rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 0.25rem solid;
        border-radius: 0.75rem;
    }
    #faceRecognitionCode,
    #recertificationCode {
        font-size: 1.5rem; line-height: 2rem;
    }
    .btn-dayselect {
        font-size: 2.25rem; line-height: 2.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-bottom: 0.5rem solid;
        border-radius: 1.5rem;
    }
}

/* メディアクエリ（従業員コード打刻改行制御） */
/* デフォルト、（改行無し） */
.btn-modal br {
    display: none;
}

/* width480以下は、高さ430で切替え（改行あり） */
@media screen and (max-width: 480px) and (min-height: 430px) {
    .btn-modal br {
        display: inline;
    }
}

/* width480以上は、切替え無し（改行無し、max-widthだけだと動作が不安定になる） */
@media screen and (min-width: 480px) {
    .btn-modal br {
        display: none;
    }
}