@charset "UTF-8";

/* ===========================================
* 共通部分
* ======================================== */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

:root {
    --main-color: #00afcc;
    --background-color: #f5f5f5;
    --text-color: #404040;
    --link-color: #696969;
    --table-bg-color: #eee;
}

:root:has(.wrapper.admin) {
    --main-color: #00afcc;
}

html {
    font-size: 100%;
}

/* ダイアログ表示時背景スクロールしない */
html:has(dialog[open]) {
    overflow: hidden;
}

body {
    font-family: "Noto Sans JP",
        "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-color);
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--text-color);
}

img {
    max-width: 100%;
}

input {
    color: var(--text-color);
}

.wrapper {
    max-width: 100vw;
    position: relative;
}

.inner {
    max-width: 1300px;
    margin-inline: auto;
    padding: 100px 3%;
    position: relative;
}

.flex-wrap {
    display: flex;
    gap: 0 5%;
}

.material-symbols-outlined {
    vertical-align: -.17em;
}

/* mobile */
@media (width < 768px) {
    .inner {
        padding: 80px 32px;
    }
}

/* ===========================================
* ログイン
* ======================================== */

main.login {
    position: relative;
    min-height: 100svh;
    background: linear-gradient(rgba(0, 175, 204, .93), rgba(0, 175, 204, .93)), top center / cover url(../img/login-bg.jpg);

    & .title {
        padding-top: clamp(30px, 100 / 1920* 100vw, 100px);
        color: #fff;

        & .logo {
            position: relative;
            font-size: clamp(42px, 62 / 1920* 100vw, 62px);
            line-height: 1em;
            letter-spacing: .02em;
            text-align: center;

            &::before {
                content: "ビータイム";
                position: absolute;
                width: fit-content;
                bottom: -20px;
                inset-inline: 0;
                margin-inline: auto;
                line-height: 1em;
                letter-spacing: .5em;
                font-size: 16px;
            }
        }

        & .info {
            margin-block: 60px;
            text-align: center;
        }
    }

    & .login-wrap {
        width: min(100vw, 475px);
        margin-inline: auto;
        padding: 10px min(20px, 4%) min(20px, 4%) min(20px, 4%);
        background: #fff;
        border: #DADADA 1px solid;
        border-radius: 5px;
    }

    & h2 {
        font-size: 20px;
        margin-bottom: 5px;
    }

    & .login-inner {
        padding-block: 20px;
        border: #DADADA 1px solid;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        gap: 1rem 0;
    }

    & form {
        padding-inline: 4%;
        gap: 0;

        & .form-item {
            display: block;
            margin-bottom: 15px;
        }

        & label {
            margin-bottom: 2px;
        }

        & input[type="email"],
        & input[type="password"],
        & input[type="text"] {
            width: 100%;
            padding: 3px 10px;
            font-weight: 400;
            background: #fff;
            border: #DADADA 1px solid;
            border-radius: 4px;
        }

        & .checkbox {
            padding-bottom: 20px;
        }

        & .error_message {
            font-size: 15px;
            font-weight: 500;
            color: #d44950;
        }
    }

    & .login-btn {
        width: 100%;
        padding-block: 10px;
        margin-top: 20px;
        background: var(--main-color);
        font-weight: bold;
    }

    & .login-link {
        display: flex;
        justify-content: center;
        gap: 0 15%;
        margin-top: 20px;

        & a {
            font-size: 14px;
            color: var(--link-color);
            text-decoration: underline;

            & .material-symbols-outlined {
                font-size: 1.2em;
            }

            &:hover {
                text-decoration: none;
            }
        }
    }
}

.copyright {
    margin-top: 40px;
    padding-bottom: 20px;
    font-size: 13.5px;
    text-align: center;
    color: #fff;

    & span:not(:first-child)::before {
        content: "/";
        margin-inline: 7px;
    }

    & a {
        color: #fff;
    }

    & address {
        margin-top: 3px;
        font-style: normal;
    }
}

/* ===========================================
* ログアウト
* ======================================== */

main.logout {
    position: relative;
    min-height: 100svh;
    background: linear-gradient(rgba(246, 246, 246, .83), rgba(246, 246, 246, .83)), top center / cover url(../img/logout-bg.jpg);

    & .title {
        padding-top: clamp(30px, 100 / 1920* 100vw, 100px);

        & .logo {
            position: relative;
            font-size: clamp(42px, 62 / 1920* 100vw, 62px);
            line-height: 1em;
            letter-spacing: .02em;
            text-align: center;

            &::before {
                content: "ビータイム";
                position: absolute;
                width: fit-content;
                bottom: -20px;
                inset-inline: 0;
                margin-inline: auto;
                line-height: 1em;
                letter-spacing: .5em;
                font-size: 16px;
            }
        }

        & .info {
            margin-block: 60px;
            text-align: center;
        }
    }

    & a {
        display: block;
        margin-inline: auto;
        width: fit-content;
        padding: 15px 25px;
        color: #fff;
        background: var(--main-color);
        border-radius: 10px;
    }
}

/* ===========================================
* 社員トップボタン(header)
* ======================================== */

.home-button-wrap {
    position: fixed;
    top: -20px;
    display: flex;

    & .home-button,
    & .admin-home-button {
        width: 143px;
        padding-block: 20px 10px;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        color: #fff;
        background: var(--main-color);
        border: 3px solid #fff;
        border-radius: 0 0 10px 10px;
        z-index: 999;
        transition: .2s ease-in-out;
        cursor: pointer;

        & .material-symbols-outlined {
            vertical-align: -.3em;
        }

        &:hover {
            transform: translateY(17px);
        }
    }

    & .admin-home-button {
        display: none;
        background: #00afcc;
    }
}

.wrapper.admin {
    .home-button-wrap {
        & .home-button {
            display: none;
        }

        & .admin-home-button {
            display: block;
        }
    }
}

/* mobile */
@media (width < 768px) {
    .home-button-wrap {
        display: none;
    }
}

/* ===========================================
* サイドバー
* ======================================== */

/* 共通サイドバー */
aside {
    width: 24.72%;
    min-width: 270px;
    background: #fff;
    overflow-y: auto;

    & .aside-inner {
        display: flex;
        flex-direction: column;
        gap: 2em 0;
    }

    /* 表示部分共通 */
    & .side-block {
        background: var(--background-color);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .22);

        & .side-block-ttl {
            height: 36px;
            font-size: 1.2em;
            text-align: center;
            color: #fff;
            background: var(--main-color);

            & .material-symbols-outlined {
                font-size: .98em;
                margin-right: .2em;
            }
        }

        & .side-block-inner {
            padding: 17px 10px;
        }
    }

    & .txt {
        font-size: 13px;
        text-align: center;
    }

    /* お知らせ */
    & .side-info-item {
        &:not(:last-child) {
            margin-bottom: calc(16px * 1.2);
        }

        & h3 {
            font-size: 16px;
            font-weight: normal;
            display: flex;
            align-items: center;

            &::before {
                content: "";
                display: inline-block;
                width: .9em;
                aspect-ratio: 1;
                border-radius: 99px;
                background: currentColor;
                margin-right: 6px;
                vertical-align: -.05em;
            }
        }

        & ul li {
            & a {
                font-size: 14px;
                color: var(--link-color);

                &:hover {
                    color: var(--main-color);
                }
            }

            & p {
                font-size: 13px;
                text-align: center;
                margin-top: 4px;
            }
        }
    }

    /* カレンダー */
    .side-calendar {
        & .ym a {
            color: var(--link-color);

            & .material-symbols-outlined {
                vertical-align: -.23em;
            }
        }

        & .calendar-table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;

            & th {
                background: var(--background-color);
            }
        }
    }

    /* 下部メニュー */
    & .side-menu {
        margin-top: 60px;

        & ul li {
            margin-bottom: 4px;

            &:last-child {
                margin-top: calc(16px * 1.5);
            }

            & a {
                color: var(--link-color);

                &:hover {
                    color: var(--main-color);
                }
            }
        }
    }
}

/* ===========================================
* サイドバー開閉
* ======================================== */

.hamburger-openBtn {
    position: absolute;
    top: 1em;
    left: 1em;
    width: 42px;
    aspect-ratio: 1;
    display: none;

    & .material-symbols-outlined {
        font-size: 32px;
    }
}

.hamburger-closeBtn {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100svh;
    background: #000;
    opacity: .5;
    z-index: 998;
    display: none;
}

/* mobile */
@media (width < 768px) {
    aside {
        position: fixed;
        inset: 0;
        z-index: 999;
        width: min(70vw, 300px);
        padding: 32px 16px;
        display: none;

        &.open {
            display: block;
        }
    }

    .hamburger-openBtn {
        display: block;
    }

    .hamburger-closeBtn {
        &:has(+ aside.open) {
            display: block;
        }
    }
}

/* ===========================================
* メイン共通
* ======================================== */

main {
    flex: 1;
}

.warning {
    text-align: center;
    margin-bottom: 60px;
}

.caution {
    color: #d44950;
    font-weight: bold;
}


/* ページタイトル */
.pg-ttl.breadcrumb {
    position: relative;
    border-bottom: solid 3px #ccc;
    margin-bottom: 30px;

    /* 下線 */
    &::after {
        content: "";
        position: absolute;
        display: block;
        border-bottom: solid 3px var(--main-color);
        width: 20%;
    }

    & ol {
        display: flex;
        align-items: last baseline;
        font-size: 18px;
        font-weight: bold;
        color: var(--link-color);

        & a {
            color: var(--link-color);
        }

        & li:last-child {
            font-size: 24px;
            color: var(--text-color);
        }
    }

    & .material-symbols-outlined {
        font-size: 1.4em;
        vertical-align: -.23em;
        margin-right: 4px;
    }
}

.pg-subttl {
    margin-bottom: 60px;
}

/* 戻るリンク */
a.backBtn {
    display: block;
    margin-bottom: 1.6rem;
    color: var(--link-color);

    & .material-symbols-outlined {
        vertical-align: -.23em;
    }
}

/* ===========================================
* フォーム共通
* ======================================== */

.form-head {
    margin-bottom: 70px;

    & .day {
        margin-bottom: 16px;
        text-align: end;
    }
}

form,
/* .form-section*出退勤詳細編集画面 入力欄を増やすためのくくり */
form .form-section {
    display: flex;
    flex-direction: column;
    gap: 60px 0;

    & .form-item {
        display: flex;

        & .form-q {
            width: 10vw;
            min-width: 8em;
            margin-bottom: 8px;

            & .required::after {
                content: "*";
                margin-left: .4em;
                color: red;
            }
        }

        & .form-a {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px 0;
        }

        & input[type=date],
        & input[type=time],
        & input[type=number] {
            width: fit-content;
            height: 28px;
            padding-inline: 3px;
            border: 1px var(--link-color) solid;
            border-radius: 3px;

            &:disabled {
                background: #f5f5f5;
                cursor: default;
            }
        }

        & input[type=number] {
            width: 6rem;
        }

        & input[type=radio] {
            cursor: pointer;

            &+label {
                cursor: pointer;
            }
        }

        & .select-wrap {
            position: relative;
            width: fit-content;

            &::before {
                content: "\e313";
                font-size: 18px;
                font-family: "Material Symbols Outlined";
                position: absolute;
                right: 8px;
                pointer-events: none;
            }

            & select {
                font-size: .95em;
                padding-inline: 8px 38px;
                border: 1px var(--link-color) solid;
                border-radius: 3px;
                cursor: pointer;

                &:disabled {
                    background: #f5f5f5;
                    cursor: default;
                }
            }
        }

        & input[type=text],
        & textarea,
        & input[type=email],
        & input[type="password"] {
            width: 100%;
            padding-inline: 3px;
            border: 1px var(--link-color) solid;
            border-radius: 3px;

            &:disabled {
                background: #f5f5f5;
                cursor: default;
            }
        }

        & p {
            font-size: 13px;
        }
    }

    & .password-wrap {
        position: relative;
        width: 100%;
    }

    & .eyebtn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: #696969;
    }

    & .checkbox {
        & input[type="checkbox"] {
            cursor: pointer;
        }

        & label {
            cursor: pointer;
        }
    }
}

/* .form-section*出退勤詳細編集画面 増やした入力欄の区切り線 */
.form-section {
    padding-bottom: 45px;

    &:not(:first-child) {
        padding-top: 45px;
        border-top: #ccc 2px solid;
    }
}

/* mobile */
@media (width < 768px) {
    .form-item {
        flex-direction: column;
    }
}

/* formボタン */
.form-btn {
    display: block;
    padding: 15px 25px;
    font-size: 14px;
    color: #fff;
    background: var(--main-color);
    border-radius: 10px;
    min-width: 100px;
    margin-top: 40px;
    margin-inline: auto;

    &.delete {
        background: #d44950;
    }
}

/* 複数 */
.form-btn-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;

    & .form-btn {
        margin-inline: initial;
    }
}

/* ===========================================
* 小さいフォーム
* ======================================== */

form.min,
/* .form-section*入力欄を増やすためのくくり */
form.min .form-section {
    max-width: 550px;
    gap: 45px 0;

    & .form-item {
        display: flex;
        gap: 0 1rem;

        & .form-q {
            width: 8.5vw;
        }
    }
}

/* ===========================================
* table共通
* ======================================== */

table {
    width: 100%;
    border-collapse: collapse;
    word-break: break-word;
    margin-bottom: 60px;

    & caption {
        text-align: inherit;
        margin-bottom: 4px;

        &::before {
            content: "";
            display: inline-block;
            width: .9em;
            aspect-ratio: 1;
            border-radius: 99px;
            background: currentColor;
            margin-right: 6px;
            vertical-align: -.05em;
        }
    }

    & th,
    & td {
        border: 1px #c0c0c0 solid;
    }

    & th {
        background: var(--table-bg-color);
    }

    & td {
        padding-inline: min(8px, 1%);
    }
}

/* ===========================================
* カレンダーページ
* ======================================== */

/* カレンダーページではサイドバーのカレンダーを非表示 */
aside:has(+ main.calendar) {
    & .side-calendar {
        display: none;
    }
}

/* 全体 */
.calendar-wrap {
    width: min(670px, 100%);
    margin-inline: auto;

    /* 検索 */
    & .research {
        margin-bottom: 20px;

        & form {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            gap: 0 16px;
            font-size: .9rem;

            & input[type=month] {
                height: 28px;
                padding-inline: 3px;
                border: 1px var(--link-color) solid;
                border-radius: 3px;
            }

            & input[type=submit] {
                padding: 1px 6px;
                color: #fff;
                background: var(--main-color);
                border: 2px var(--main-color) solid;
                border-radius: 6px;
            }
        }
    }

    /* 表示中の年月 */
    & .angle {
        & .faangle {
            display: flex;
            justify-content: center;
            gap: 0 calc(16px * 1.5);
            margin-bottom: 10px;

            & .c-left a,
            & .c-right a {
                color: var(--main-color);
                font-weight: bold;

                & .material-symbols-outlined {
                    vertical-align: -.23em;
                }
            }
        }
    }

    /* カレンダー本体 */
    & .calendar-table {
        text-align: center;

        & th {
            background: var(--background-color);
        }

        & td {
            width: 60px;
            height: 65px;
            padding: .7%;
            vertical-align: top;
        }
    }
}

/* ===========================================
* メニューページ
* ======================================== */

@media (width >=1200px) {
    main.main-menu {
        padding-right: 10%;
    }
}

main.main-menu {

    /* ふきだし */
    & .balloon {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0 1rem;
        width: 100%;
        padding: 8px 16px;
        background: var(--main-color);
        filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, .22));
        cursor: pointer;
        margin-bottom: 32px;

        &::before {
            content: "";
            position: absolute;
            inset-block-start: 99%;
            left: 30px;
            width: 30px;
            height: calc(20px / 2 * tan(60deg));
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            background: inherit;
        }

        &:hover {
            opacity: .7;
        }

        /* qrマーク */
        & .circle {
            width: 40px;
            aspect-ratio: 1;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--main-color);
            background: #fff;

            & .material-symbols-outlined {
                font-size: 1.15rem;
                font-weight: 500;
            }
        }

        & p {
            width: 100%;
            text-align: center;
            color: #fff;
        }
    }

    /* qrコードのポップアップ表示 */
    & .qr-popup {
        inset: 0;
        margin: auto;
        border: none;

        & .qr-popup-wrap {
            padding: 24px 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px 0;

            & .qr-popup-inner {
                position: relative;
                display: grid;
                place-content: center;
                border: #000 1px solid;
                border-radius: 4px;
            }

            & .qr-iframe {
                width: 256px;
                height: 256px;
                border: 0;
            }

            & .qr-reload {
                background: transparent;
                position: absolute;
                inset: 0;
                cursor: pointer;
            }
        }

        /* 閉じる */
        & .qr-popup-close {
            padding-block: 16px;
            border-top: #000 solid 1px;
            width: 100%;
            cursor: pointer;
        }
    }
}

/* メニュー全体 */
.menu-container {

    /* common以外のメニューを初期状態で非表示 */
    &:not(.common) {
        display: none;
    }

    /* パンくずリスト */
    & .breadcrumb {
        position: relative;
        border-bottom: solid 3px #ccc;

        /* 下線 */
        &::after {
            content: "";
            position: absolute;
            display: block;
            border-bottom: solid 3px var(--main-color);
            width: 20%;
        }

        & ol {
            display: flex;
            align-items: last baseline;
            font-size: 18px;
            font-weight: bold;
            color: var(--link-color);

            & a {
                color: var(--link-color);
            }

            & li:last-child {
                font-size: 24px;
                color: var(--text-color);
            }
        }

        & .material-symbols-outlined {
            font-size: 1.4em;
            vertical-align: -.23em;
            margin-right: 4px;
        }
    }

    /* メニュー項目 */
    & .menu-list {
        & ul {
            display: grid;
            grid-template: auto / repeat(auto-fit, minmax(auto, 300px));
            gap: 12px 16px;
            margin: 16px 6px;

            & li {
                position: relative;
                min-width: 250px;
                height: 80px;
                display: grid;
                place-content: center;
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                background: var(--background-color);

                & a {
                    position: absolute;
                    inset: 0;
                    display: grid;
                    grid-template-columns: 17% auto 15%;
                    place-items: center;
                    padding-left: 12px;

                    & .material-symbols-outlined:last-child {
                        color: var(--main-color);
                        font-weight: bold;
                    }
                }

                /* 左線 */
                &::before {
                    content: "";
                    width: 7px;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    background: var(--main-color);
                }

                &:hover {
                    background: #e0e0e0;

                    &::before {
                        width: 12px;
                    }
                }
            }
        }
    }
}

/* ===========================================
* QRコード参照画面
* ======================================== */

.qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px 0;

    & .qr-inner {
        position: relative;
        display: grid;
        place-content: center;
        border: #000 1px solid;
        border-radius: 4px;
    }

    & .qr-iframe {
        width: 256px;
        height: 256px;
        border: 0;
    }

    & .qr-reload {
        background: transparent;
        position: absolute;
        inset: 0;
        cursor: pointer;
    }
}

/* ===========================================
* 出退勤詳細 検索画面
* ======================================== */

main.attendance-self-search,
main.admin-attendance-staff-search {

    & form {
        & .form-item {
            display: initial;

            /* ～ */
            &:nth-child(1) span:nth-of-type(2) {
                margin-inline: 6px;
            }
        }

        & span {
            margin-right: 6px;
        }

        & .select-wrap {
            display: inline-block;
            margin-bottom: 16px;
        }

        /* 社員名一覧表示部分 */
        & .staff-name-wrap {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(max(180px, 30%), 1fr));
            gap: 10px 22px;

            & .staff-name {
                width: 100%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            & input[type=radio] {
                /* ○を透明化（display:none;だとエラーメッセージが出ない） */
                position: absolute;
                opacity: 0;

                &:checked+label {
                    color: var(--main-color);
                    font-weight: bold;
                }
            }
        }

        & input[type=submit] {
            padding: 8px 25px;
        }
    }
}

/* ===========================================
* 出退勤詳細 参照画面
* ======================================== */
.attendance-disp-head {
    margin-bottom: 60px;

    & p {
        margin-bottom: .6rem;
    }
}

/* 合計テーブル */
.attendance-count-table {
    & table {
        & th {
            font-size: .9em;

            /* 最後から4列 */
            &:nth-last-child(-n+4) {
                width: 115px;
            }
        }

        & td {
            text-align: right;
            white-space: nowrap;
        }
    }
}

/* 詳細テーブル */
.attendance-date-table {
    & table {
        & th {
            font-size: .9em;
        }

        & td {
            text-align: center;
            padding: 8px 0;
            min-width: 54px;
            white-space: nowrap;

            /* 1列目 */
            &:first-child {
                min-width: 168.7px;

                /* 曜日 */
                & span {
                    margin-left: 2px;

                    &.sat {
                        color: #00afcc;
                    }

                    &.sun {
                        color: #d44950;
                    }
                }
            }

            /* 2列目～ */
            &:nth-child(n+2) {
                min-width: 106px;
                width: 106px;

                /* 番号 */
                & span {
                    margin-right: .7em;
                    vertical-align: .13em;
                    font-size: .75em;
                    color: var(--text-color);
                    position: relative;

                    &::before {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -44%);
                        width: 1.27em;
                        aspect-ratio: 1;
                        border: 1px var(--text-color) solid;
                        border-radius: 99px;
                    }

                    /* 1つの時は非表示 */
                    &:only-of-type {
                        display: none;
                    }
                }

                /* 区切り線 */
                & hr {
                    margin-block: 8px;
                    border-top: #c0c0c0 1px solid;
                }
            }

            /* 最終更新列 */
            &.last-update {
                font-size: .85em;
            }
        }
    }
}

/* ===========================================
* 管理者 出退勤詳細 参照画面
* ======================================== */

.wrapper.admin {
    & .attendance-date-table {
        & td {

            /* 日付部分リンク */
            &:first-child {
                & button {
                    width: 100%;
                    color: var(--text-color);
                    background: #f5f5f5;

                    &:hover,
                    &:hover span {
                        color: var(--main-color) !important;
                    }
                }
            }

            /* 削除ボタン */
            &:last-child {
                min-width: 60px;
                width: 60px;

                & button {
                    width: 28px;
                    aspect-ratio: 1;
                    color: #fff;
                    background: #d44950;
                    border-radius: 4px;
                }
            }
        }
    }
}





/* ===========================================
* 管理者ページ
* ======================================== */

.wrapper.admin {
    & main.main-menu {

        /* ふきだし */
        & .balloon {
            filter: none;
            cursor: default;

            &:hover {
                opacity: inherit;
            }
        }
    }
}

/* ===========================================
* 社員一覧
* ======================================== */

/* 社員一覧テーブル */
.user-list-table {
    & table {
        table-layout: fixed;
        width: 100%;

        & th {
            &:nth-child(1) {
                width: 240px;
            }

            &:nth-child(2) {
                width: 120px;
            }

            &:nth-child(3) {
                width: 384px;
            }

            /* 最終列 */
            &:nth-last-child(-n+1) {
                width: 60px;
            }
        }

        & td {
            padding-block: 4px;

            /* (1～3列目)文字を折り返さない */
            &:nth-child(-n+3) {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            /* 最終列 */
            &:nth-last-child(-n+1) {
                text-align: center;
            }

            /* 氏名 */
            & button[type="submit"] {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                display: block;
                width: 100%;
                text-align: left;
                color: var(--text-color);
                background: #f5f5f5;

                &:hover {
                    color: var(--main-color);
                }
            }
        }
    }
}

/* ===========================================
* 勤怠データの編集
* ======================================== */

#breakStartDate,
#breakEndDate {
    display: block;
}

.dataAdd-btn-wrap {
    & .txt {
        margin-right: 1em;
        color: var(--link-color);
    }

    & button {
        width: 35px;
        aspect-ratio: 1;
        font-size: 24px;
        color: #fff;
        background: var(--main-color);
        border-radius: 4px;
    }
}

/* ===========================================
* 404ページ
* ======================================== */

.e404 {

    & h2 {
        color: var(--main-color);
        margin-bottom: .5em;
    }

    & a {
        display: inline-block;
        margin-top: 2em;
        color: var(--main-color);
        text-decoration: underline;

        &:hover {
            text-decoration: none;
        }
    }
}