@charset "utf-8";
/* CSS Document */

/* *************************************
	Default Style
************************************* */

/* body */
body {
    /* spacing */
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;

    /* font, text */
    font-size: var(--fs-default); /* 14px */
    line-height: 24px;
    letter-spacing: 1px;
    text-align: left;
    word-break: break-all;
}

@media (min-width: 768px) {
    .body {
        line-height: 28px;
    }
}

/* text */
span {
    vertical-align: middle;
}

/* heading */
h1 {
    font-size: var(--fs-xxl);
    font-weight: bold;
}
h2 {
    font-size: var(--fs-xl);
    font-weight: bold;
}
h3 {
    font-size: var(--fs-lg);
    font-weight: bold;
}
h4 {
    font-size: var(--fs-md);
    font-weight: bold;
}
h5 {
    font-size: var(--fs-sm);
    font-weight: bold;
}
h6 {
    font-size: var(--fs-xs);
    font-weight: bold;
}

/* link */
a {
    font-weight: bold;
}

/* list */
ul {
    padding: 0;
}

/* *************************************
	Font Size
************************************* */

.fs-xxs {
    font-size: var(--fs-xxs); /* 10px */
}
.fs-xs {
    font-size: var(--fs-xs); /* 12px */
}
.fs-sm {
    font-size: var(--fs-sm); /* 14px */
}
.fs-md {
    font-size: var(--fs-md); /* 16px */
}
.fs-lg {
    font-size: var(--fs-lg); /* 18px */
}
.fs-xl {
    font-size: var(--fs-xl); /* 20px */
}
.fs-xxl {
    font-size: var(--fs-xxl); /* 24px */
}

/* *************************************
	Heading (overriding Bootstrap class)
************************************* */

.h1 {
    font-size: var(--fs-xxl); /* 24px */
    font-weight: bold;
}
.h2 {
    font-size: var(--fs-xl); /* 20px */
    font-weight: bold;
}
.h3 {
    font-size: var(--fs-lg); /* 18px */
    font-weight: bold;
}
.h4 {
    font-size: var(--fs-md); /* 16px */
    font-weight: bold;
}
.h5 {
    font-size: var(--fs-sm); /* 14px */
    font-weight: bold;
}
.h6 {
    font-size: var(--fs-xs); /* 12px */
    font-weight: bold;
}

/* *************************************
	Form Control
************************************* */

/* input spacing */
.form-control {
    padding: 0px;
    box-shadow: inherit;
}
.form-select {
    padding-right: 30px !important;
}

/* input width */
.input-xs {
    width: 80px;
}
.input-ms {
    width: 120px;
}
.input-sm {
    width: 160px;
}

.input-md {
    width: 240px;
}
.input-lg {
    width: 400px;
}
.input-xl {
    width: 800px;
}
.input-auto{
    width: max-content;
}

/* *************************************
	Button
************************************* */

.btn {
    line-height: 1.42857143;
    white-space: nowrap;
    width: auto;
}

/* circle btn */
.btn.btn-circle {
    width: 35px;
    height: 35px;
    padding: 0;
    border-radius: 50%;
}

/* btn の　ルート2倍 */
.btn-lg {
    line-height: 2.02030509;
    white-space: nowrap;
    width: auto;
}

/* *************************************
	Table
************************************* */

/* common style */
.tbl {
    width: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    table-layout: fixed;
}
.tbl th,
.tbl td {
    word-break: break-word;
}

/* tbl-md */
.tbl.tbl-md {
    font-size: var(--fs-sm);
}
.tbl.tbl-md tr {
    line-height: 35px;
}
.tbl.tbl-md th,
.tbl.tbl-md td {
    padding: 0px 10px;
}

/* table col width */
.tbl .tbl-check {
    width: 40px;
}

/* *************************************
	Navigation Bar
************************************* */

/* nav-sm */
.nav-sm .nav-link {
    padding: 0 16px;
    font-weight: bold;
}
.nav-rounded .nav-item:first-child {
    border-radius: 4px 0 0 4px;
}
.nav-rounded .nav-item:last-child {
    border-radius: 0 4px 4px 0;
}

/* *************************************
	Text Icon
************************************* */

/* icon with text */
.text-icon {
    margin-left: 0.5rem;
    padding: 0 0.5rem;
    border-radius: var(--fs-xs);
    font-size: var(--fs-xs);
}

.check-state-mark {
    margin-left: 0rem !important;
    padding: 0 0.3rem !important;
}

/* *************************************
	Material Design Icons
************************************* */

/* mdi sizing */
.mdi.mdi-xs {
    font-size: 16px;
}
.mdi.mdi-sm {
    font-size: 20px;
}
.mdi.mdi-lg {
    font-size: 28px;
}
.mdi.mdi-xl {
    font-size: 32px;
}
.mdi.mdi-xxl {
    font-size: 48px;
}

/* *************************************
	Margin
************************************* */

/* margin */
.m-05 {
    margin: 5px;
}
.m-10 {
    margin: 10px;
}
.m-15 {
    margin: 15px;
}
.m-20 {
    margin: 20px;
}
.m-25 {
    margin: 25px;
}
.m-30 {
    margin: 30px;
}
.m-40 {
    margin: 40px;
}
.m-50 {
    margin: 50px;
}
.m-75 {
    margin: 75px;
}
.m-100 {
    margin: 100px;
}

/* margin-x */
.mx-05 {
    margin-left: 5px;
    margin-right: 5px;
}
.mx-10 {
    margin-left: 10px;
    margin-right: 10px;
}
.mx-15 {
    margin-left: 15px;
    margin-right: 15px;
}
.mx-20 {
    margin-left: 20px;
    margin-right: 20px;
}
.mx-25 {
    margin-left: 25px;
    margin-right: 25px;
}
.mx-30 {
    margin-left: 30px;
    margin-right: 30px;
}
.mx-40 {
    margin-left: 40px;
    margin-right: 40px;
}
.mx-50 {
    margin-left: 50px;
    margin-right: 50px;
}
.mx-75 {
    margin-left: 75px;
    margin-right: 75px;
}
.mx-100 {
    margin-left: 100px;
    margin-right: 100px;
}

/* margin-left (start) */
.ms-05 {
    margin-left: 5px;
}
.ms-10 {
    margin-left: 10px;
}
.ms-15 {
    margin-left: 15px;
}
.ms-20 {
    margin-left: 20px;
}
.ms-25 {
    margin-left: 25px;
}
.ms-30 {
    margin-left: 30px;
}
.ms-40 {
    margin-left: 40px;
}
.ms-50 {
    margin-left: 50px;
}
.ms-75 {
    margin-left: 75px;
}
.ms-100 {
    margin-left: 100px;
}

/* margin-right (end) */
.me-05 {
    margin-right: 5px;
}
.me-10 {
    margin-right: 10px;
}
.me-15 {
    margin-right: 15px;
}
.me-20 {
    margin-right: 20px;
}
.me-25 {
    margin-right: 25px;
}
.me-30 {
    margin-right: 30px;
}
.me-40 {
    margin-right: 40px;
}
.me-50 {
    margin-right: 50px;
}
.me-75 {
    margin-right: 75px;
}
.me-100 {
    margin-right: 100px;
}

/* margin-y */
.my-05 {
    margin-top: 5px;
    margin-bottom: 5px;
}
.my-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.my-15 {
    margin-top: 15px;
    margin-bottom: 15px;
}
.my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}
.my-25 {
    margin-top: 25px;
    margin-bottom: 25px;
}
.my-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}
.my-40 {
    margin-top: 40px;
    margin-bottom: 40px;
}
.my-50 {
    margin-top: 50px;
    margin-bottom: 50px;
}
.my-75 {
    margin-top: 75px;
    margin-bottom: 75px;
}
.my-100 {
    margin-top: 100px;
    margin-bottom: 100px;
}

/* margin-top */
.mt-05 {
    margin-top: 5px;
}
.mt-10 {
    margin-top: 10px;
}
.mt-15 {
    margin-top: 15px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-25 {
    margin-top: 25px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-75 {
    margin-top: 75px;
}
.mt-100 {
    margin-top: 100px;
}

/* margin-bottom */
.mb-05 {
    margin-bottom: 5px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-15 {
    margin-bottom: 15px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-25 {
    margin-bottom: 25px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-75 {
    margin-bottom: 75px;
}
.mb-100 {
    margin-bottom: 100px;
}

/* *************************************
	Padding
************************************* */

/* padding */
.p-05 {
    padding: 5px;
}
.p-10 {
    padding: 10px;
}
.p-15 {
    padding: 15px;
}
.p-20 {
    padding: 20px;
}
.p-25 {
    padding: 25px;
}
.p-30 {
    padding: 30px;
}
.p-40 {
    padding: 40px;
}
.p-50 {
    padding: 50px;
}
.p-75 {
    padding: 75px;
}
.p-100 {
    padding: 100px;
}

/* padding-x */
.px-05 {
    padding-left: 5px;
    padding-right: 5px;
}
.px-10 {
    padding-left: 10px;
    padding-right: 10px;
}
.px-15 {
    padding-left: 15px;
    padding-right: 15px;
}
.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}
.px-25 {
    padding-left: 25px;
    padding-right: 25px;
}
.px-30 {
    padding-left: 30px;
    padding-right: 30px;
}
.px-40 {
    padding-left: 40px;
    padding-right: 40px;
}
.px-50 {
    padding-left: 50px;
    padding-right: 50px;
}
.px-75 {
    padding-left: 75px;
    padding-right: 75px;
}
.px-100 {
    padding-left: 100px;
    padding-right: 100px;
}

/* padding-left (start) */
.ps-05 {
    padding-left: 5px;
}
.ps-10 {
    padding-left: 10px;
}
.ps-15 {
    padding-left: 15px;
}
.ps-20 {
    padding-left: 20px;
}
.ps-25 {
    padding-left: 25px;
}
.ps-30 {
    padding-left: 30px;
}
.ps-40 {
    padding-left: 40px;
}
.ps-50 {
    padding-left: 50px;
}
.ps-75 {
    padding-left: 75px;
}
.ps-100 {
    padding-left: 100px;
}

/* padding-right (end) */
.pe-05 {
    padding-right: 5px;
}
.pe-10 {
    padding-right: 10px;
}
.pe-15 {
    padding-right: 15px;
}
.pe-20 {
    padding-right: 20px;
}
.pe-25 {
    padding-right: 25px;
}
.pe-30 {
    padding-right: 30px;
}
.pe-40 {
    padding-right: 40px;
}
.pe-50 {
    padding-right: 50px;
}
.pe-75 {
    padding-right: 75px;
}
.pe-100 {
    padding-right: 100px;
}

/* padding-y */
.py-05 {
    padding-top: 5px;
    padding-bottom: 5px;
}
.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.py-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}
.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.py-25 {
    padding-top: 25px;
    padding-bottom: 25px;
}
.py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}
.py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}
.py-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}
.py-75 {
    padding-top: 75px;
    padding-bottom: 75px;
}
.py-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

/* padding-top */
.pt-05 {
    padding-top: 5px;
}
.pt-10 {
    padding-top: 10px;
}
.pt-15 {
    padding-top: 15px;
}
.pt-20 {
    padding-top: 20px;
}
.pt-25 {
    padding-top: 25px;
}
.pt-30 {
    padding-top: 30px;
}
.pt-40 {
    padding-top: 40px;
}
.pt-50 {
    padding-top: 50px;
}
.pt-75 {
    padding-top: 75px;
}
.pt-100 {
    padding-top: 100px;
}

/* padding-bottom */
.pb-05 {
    padding-bottom: 5px;
}
.pb-10 {
    padding-bottom: 10px;
}
.pb-15 {
    padding-bottom: 15px;
}
.pb-20 {
    padding-bottom: 20px;
}
.pb-25 {
    padding-bottom: 25px;
}
.pb-30 {
    padding-bottom: 30px;
}
.pb-40 {
    padding-bottom: 40px;
}
.pb-50 {
    padding-bottom: 50px;
}
.pb-75 {
    padding-bottom: 75px;
}
.pb-100 {
    padding-bottom: 100px;
}

/* *************************************
	Common Sections
************************************* */

/* contents */
.contents {
    height: calc(100vh - 97px);
    width: -webkit-fill-available;
    width: -moz-fill-available;
    width: -moz-available;
    width: stretch;
    padding: 0px;
    min-height: 300px;
    padding: 30px 40px 0px;
}

/* main area */
.main {
    max-width: 2000px;
    margin-bottom: 25px;
}

/* logo */
.kyuyo-logo {
    max-height: 60%;
    position: absolute;
    transform: translate(0, 20%);
    margin-left: 7px;
}

.move-to-chime {
    max-height: 60%;
    position: absolute;
    transform: translate(115px, 0);
}

/* *************************************
	Card
************************************* */
.card.wrap-content {
    min-width: unset;
}

/* *************************************
	border
************************************* */
.emphasis-border {
    border-width: 5px;
    border-color: #ff0000 !important;
}

.btn-primary.emphasis-border:focus {
    border: 5px solid #ff0000 !important;
}

.registed_border {
    border: 1px solid var(--main-color);
    padding: 20px;
}

.not_registed_border {
    border: 1px solid var(--danger-pastel);
    padding: 30px 20px 20px;
    position: relative;
}

.not_registed_border::after {
    content: "設定がありません。新規登録してください。";
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--danger);
    font-weight: bold;
    font-size: 18px;
}

input[type="checkbox"] {
    scale: 1.5;
}

/* *************************************
	notice mark
************************************* */
.notice-mark {
    display: inline-block;
    margin: 2.5px 0px 0px;
    padding: 0px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

/* *************************************
	required mark
************************************* */
.required-mark {
    display: inline-block;
    height: 20px;
    width: 40px;
    line-height: 20px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    color: #dc3545;
}

/* *************************************
	width scroll
************************************* */
.scroll-tbl-width-01 {
    width: calc(100vw - 245px);
}

/* *************************************
	year-month-selector
************************************* */
.payroll-month-status {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translate(-50%, 0%);
    text-wrap: nowrap;
}