@charset "utf-8";

html {
    font-size: 62.5%;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #282828;
    /* background-color: #F4F6F5; */
    background-color: #FFFFFF;
    box-sizing: border-box; /* 横並びの要素が落ちるのを回避 */
    overflow-x: hidden; /* ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのか */
}

a {
    text-decoration: none;
    color: #FFF;
    cursor: pointer;
}

a:hover {
    opacity: 0.8;
}

li {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

.except {
  opacity: 0.5;
  pointer-events: none;
}

/* err msg
------------------------------------------------------------*/
.select-form .select-form-errmsg {
    color: red;
    padding-left: 1rem;
}

.login-box .select-form-errmsg {
    color: red;
    text-align: left;
    padding-bottom: 1rem;
}

/* common
------------------------------------------------------------*/

::placeholder {
    color: #D4D6D6;
}

/* 旧Edge対応 */
::-ms-input-placeholder {
    color: #D4D6D6;
}

/* IE対応 */
:-ms-input-placeholder {
    color: #D4D6D6;
}

form button:hover {
    opacity: .8; /* 透明度 */
}

.columns2 {
    width: 100vw;
    min-height: 100vh;
    display: flex;
}

select option {
    color: #282828;
}

.hidden {
    display: none;
}

.point-arrow::before {
    content: "";
    display: inline-block; /* 横並びだが高さと幅が自由に指定できる */
    border-style: solid;
    border-color: transparent;
    border-width: 0.375em 0.64952em;
    border-left-color: currentColor;
    position: absolute;
    left: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.main-edit {
    padding: .9rem 0rem 0rem 2rem;
    width: calc(100% - 40rem);
    margin: auto;
}

.main-list {
    padding: .9rem 2rem 2.5rem 2rem;
    width: 100%;
}

.search-wrap {
    position: relative;  /* https://qiita.com/ChiJ_SeaW/items/b18b2dc98443ab988ecb */
    display: inline-block;
}

.search-wrap::after {
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 5.5px solid #000;
    content: "";
    position: absolute;
    right: 17px;
    bottom: 11px;
    width: 0;
}

.header-menu {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.1rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.header-menu p {
    font-size: 1.4rem;
    color: #888888;
}

.header-menu select,
.header-menu input,
.header-menu textarea {
    padding-left: .8rem;
    width: 9rem;
    height: 3rem;
    border: solid 1px #000;
    border-radius: 3px;
    background-color: #fff;
    color: #D4D6D6;
    margin-right: 1rem;
}

    .header-menu input[name="id"] {
        width: 7rem;
    }
    .header-menu input[name="name"] {
        width: 10rem;
    }
    .header-menu select {
        color: #282828;
        width: 10.5rem;
    }
    .header-menu input[type="date"] {
        width: 11rem;
    }

.selectbox-long select {
    width: 27rem;
}

.header-line {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #ccc;
}

.header-menu input {
    width: 22.5rem;
}

.header-menu input,
.header-menu textarea {
    color: #282828;
}

.header-menu label {
    margin-top: .4rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #282828;
}

.header-top {
    display: flex;
    justify-content: flex-end;
    font-weight: 700;
    align-items: flex-end;
}

.header-top li {
    display: flex;
    align-items: center;
}

.header-top  img {
    width: 1.5rem;
    margin-left: 1rem;
}

.header-top  a {
    color: #282828;
}

input[type="checkbox"] {
    width: initial;
    vertical-align: top;
}

/* button
------------------------------------------------------------*/
.menu-button {
    color: #FFF;
    display: flex;
    gap: .7rem;
}

    .menu-button button,
                 a {
        height: 3rem;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.main-form button,
a {
    color: #FFF;
    height: 3rem;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.delete-button {
    width: 11rem;
    background-color: #003333;
}

.cancel-button {
    width: 11rem;
    background-color: rgba(94, 234, 217, .5);
}

.disable-button {
    width: 11rem;
    background-color: rgba(0, 51, 51, 0.5);
    cursor: default;
}

.disable-button:hover {
    opacity: 1;
}

.green-button {
    width: 11rem;
    background-color: #2ecc71;
}

.green-button-large {
    width: 17rem;
    background-color: #2ecc71;
}

.blue-button {
    width: 11rem;
    background-color: #039BE5;
}

.orange-button {
    width: 11rem;
    background-color: #E15A28;
}

.green-button-border {
    width: 11rem;
    border: 1px solid #2ecc71;
    color: #2ecc71;
}

.blue-button-border {
    width: 11rem;
    border: 1px solid #039BE5;
    color: #039BE5;
}

.orange-border {
    width: 11rem;
    border: 1px solid #E15A28;
    color: #E15A28;
}

.notice-url {
    width: 13rem;
    height: 3rem;
    border-radius: 2px;
    display: inline-block;
    background-color: #00BFFE;
    color: #FFF;
}

.link-button {
    background-color: transparent;
    color: #277FFF;
}


/* table 
------------------------------------------------------------*/
.list-name {
    width: 100%;
    font-weight: 700;
    font-size: 1.5rem;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
    font-weight: 700;
}

.list-table {
    width: 100%;
    border-collapse: collapse;
    font-weight: 700;
}

.header-table {
    width: 100%;
    border-collapse: collapse;
    font-weight: 700;
}

.color-table {
    width: 100%;
    font-weight: 700;
    font-size: 1.1rem;
    border-collapse: collapse;
}

th,
td {
    padding: .9rem 0;
    text-align: center;
}

td a {
    color: #277FFF;
}


.list-table th,
.header-table th,
.calendar-table th {
    color: #003333;
    border-top: 2px solid #003333;
    border-bottom: 2px solid #003333;
}

.list-table td {
    padding: .95rem 0;
    height: 3.8rem;
    border-bottom: 1px solid #282828;
}

.header-table td {
    padding: .95rem 0;
    height: 3.8rem;
    border-bottom: 1px solid #ccc;
}

.calendar-table td {
    padding: .7rem 0;
    height: 2.5rem;
    border-bottom: 2px solid #ffffff;
}

.color-table th {
    background-color: #06b6c9;
    border-bottom: 1px solid #282828;
    border-top: 1px solid #282828;
    padding: .5rem 0;
}

.side-border {
    border-left: 1px solid #282828;
    border-right: 1px solid #282828;
}

.color-table td {
    padding: .6rem 0;
    height: 3.8rem;
}

.color-table tr:nth-child(2n+1) {
    background-color: #E3EEF9;
}

.color-table tr:nth-child(2n) {
    background-color: #fff;
}

.color-table .red-column {
    color : red;
}

.weekday {
    background-color: #E3EEF9;
}

.saturday {
    background-color: #a9ceec;
}

.holiday {
    background-color: #ffced3;
}

.header-table td:nth-of-type(1),
.header-table td:nth-of-type(2),
.header-table td:nth-of-type(3),
.header-table td:nth-of-type(4),
.header-table td:nth-of-type(5){
    width: 20%;
}

/* login
------------------------------------------------------------*/
.login {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    padding: 3rem 2.6rem;
    width: 25rem;
    height: 33rem;
    background-color: #3EE0D0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    color: #FFF;
}

.login h1 img {
    width: 12rem;
}

.login form {
    padding-bottom: 2rem;
}

.login input {
    margin-bottom: 1rem;
    padding-left: 1rem;
    width: 100%;
    height: 3rem;
    background-color: #FCFCFC;
    border-radius: 3px;
}

.login form button {
    display: block;
    width: 100%;
    padding: .6rem;
    background-color: #05C7F2;
}

.login-box a {
    color: #3EE0D0;
    background-color: #FFF;
    width: 100%;
    height: 3.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* footer-nav 
------------------------------------------------------------*/
.nav-arrow {
    margin-top: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.3rem;
}

.arrow-bottom {
    display: flex;
    gap: .1rem;
}

    .arrow-bottom button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.7rem;
        height: 3.7rem;
        color: #00BFFE;
        border: 1px solid #00BFFE;
        border-radius: 3px;
        background-color: #FFF;
    }

.nav-arrow p {
    padding-right: 1.5rem;
    font-size: 1.4rem;
}

/* main-form
------------------------------------------------------------*/
.select-form {
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.select-wrap {
    display: inline-block;
    position: relative;
}

.select-wrap::after {
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 5.5px solid #000;
    content: "";
    position: absolute;
    right: 9px;
    bottom: 11px;
    width: 0;
}

.select-form label {
    margin-bottom: .2rem;
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: #009999;
}

.select-form select,
.select-form input,
.select-form textarea {
    padding-left: .8rem;
    width: 13rem;
    height: 3rem;
    border: solid 1px #ccc;
    border-radius: 3px;
    background-color: #fff;
    color: #D4D6D6;
}

.selectbox-long select {
    width: 27rem;
}

.select-form input {
    width: 22.5rem;
}

.select-form select,
.select-form input,
.select-form textarea {
    color: #282828;
}

.select-form input[type="checkbox"] {
    width: initial;
    margin: 0 .5rem 0 1rem;
    vertical-align: top;
}

.select-form textarea {
    width: 30.2rem;
    height: 10rem;
}

.select-form h3 {
    background: #E3EEF9;
    padding: 0.5em;
    margin-top: 2rem;
}

.main-form {
    margin-top: .9rem;
    margin-bottom: 5rem;
    width: 100%;
    font-size: 1.2rem;
}

.main-form ul {
    margin-top: 1.8rem;
}

.main-form li {
    width: 100%;
    margin-top: .8rem;
}



.main-form dt {
    padding-right: 1.5rem;
    display: inline-block;
    width: 30rem;
    text-align: right;
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
    color: #003333;
}

    .main-form label {
        padding-right: 1.5rem;
        display: inline-block;
        width: 20rem;
        text-align: right;
        font-size: 1.2rem;
        font-weight: 700;
        white-space: nowrap;
        color: #003333;
    }

.main-form dd {
    padding-left: 1rem;
    display: inline-block;
}

.main-form li dl label {
    width: initial;
    padding-right: .2rem;
}

.main-form input[name="name"] {
    width: 30.2rem;
}

    .main-form input[name="large-name"] {
        width: 90.2rem;
    }

.main-form input[name="post-code"] {
    width: 10.1rem;
    margin-right: .3rem;
}

.main-form input[name="address"],
.main-form input[name="email"],
.main-form input[name="confirmation"],
.main-form input[name="memo"] {
    width: 30.2rem;
}

    .main-form textarea[name="large-memo"] {
        width: 90.2rem;
        height: 40rem;
    }

    .main-form select,
    .main-form input[name="tel"],
    .main-form input[name="code"],
    .main-form input[name="manager-name"] {
        width: 13.3rem;
    }

    .main-form input[name="long-code"] {
        width: 30.2rem;
    }

.main-form input[name="manager-kana"] {
    width: 13rem;
}

.main-form input[name="year"] {
    margin-right: .5rem;
    width: 7rem;
}

.main-form select[name="month"],
.main-form select[name="day"] {
    width: 5.1rem;
    margin-left: .6rem;
    margin-right: .3rem;
}

    .main-form select[name="store"] {
        width: 30.2rem;
    }

    .memo-label {
        vertical-align: top;
    }

.form-wrap {
    position: relative;
}

.form-wrap::after {
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 5.5px solid #000;
    content: "";
    position: absolute;
    right: 6px;
    bottom: 11px;
    width: 0;
}


/* メニューボタン
------------------------------------------------------------*/
.select-menu {
    margin: 0 auto;
    margin-top: 11rem;
    text-align: center;
}

.select-menu ul {
    margin-top: 4rem;
}

.select-menu li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.select-menu a {
    display: inline-block;
    padding: 1.5rem;
    width: 30rem;
    background-color: #03A9F4;
    border-radius: 5px;
    color: #ffffff;
}

.select-menu_pc a {
    background-color: #2ecc71;
}

.select-menu-inline li {
    display: inline-block;
}

.select-menu-inline ul {
    margin-top: 0.05rem;
}

.select-menu-inline a {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

.select-menu-inline p {
    margin-bottom: 4rem;
}

/* ポップアップ
------------------------------------------------------------*/
.hidden {
    display: none;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.mask {
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

.list-window {
    width: 80rem;
    height: 430px;
    font-weight: 700;
    border-radius: 5px;
    background-color: #F4F6F5;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    z-index: 2;
}

.list-window .flex {
    align-items: center;
}

.list-window .confirmation {
    margin-left: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 1.6rem;
}

.list-window .bi-x {
    font-size: 2rem;
    cursor: pointer;
}

.list-window .list-data {
    height: 300px;
    overflow-y: auto;
    display: block;
}

.message-window,
.message-window2{
    width: 30rem;
    padding: .5rem 1.5rem 3rem;
    font-weight: 700;
    border-radius: 5px;
    background-color: #F4F6F5;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    z-index: 2;
}

.message-window .flex {
    align-items: center;
}

.message-window .confirmation {
    font-size: 1.4rem;
}

.message-window .bi-x {
    font-size: 2rem;
    cursor: pointer;
}

    .message-window2 .flex {
        align-items: center;
    }

    .message-window2 .confirmation {
        font-size: 1.4rem;
    }

    .message-window2 .bi-x {
        font-size: 2rem;
        cursor: pointer;
    }

.image-window {
    width: 60rem;
    padding: .5rem 1.5rem 3rem;
    font-weight: 700;
    border-radius: 5px;
    background-color: #F4F6F5;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    z-index: 2;
}

.warning {
    margin-top: 1.5rem;
    padding: 0 1rem;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.bi-exclamation-circle {
    font-size: 5rem;
    color: #078C8C;
}

.question {
    margin-top: 3rem;
    text-align: center;
}

.yesno-button {
    margin-top: 2rem;
    justify-content: center;
    gap: 1rem;
}

.yes-button {
    padding: .5rem 0;
    border-radius: 3px;
    color: #FFF;
    background-color: #008CFF;
    width: 10rem;
}

.no-button {
    padding: .5rem 0;
    border-radius: 3px;
    color: #FFF;
    background-color: #919191;
    width: 10rem;
}

.trans-button-border {
    padding: .5rem 0;
    border-radius: 3px;
    color: #008CFF;
    border: 1px solid #008CFF;
    width: 16rem;
}

.loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    z-index: 2;
}

/* AdminList
------------------------------------------------------------*/
.adminList table {
    margin-top: 2.4rem;
}

.adminList th:nth-of-type(1),
.adminList td:nth-of-type(1) {
    text-align: center;
}

.adminList th:nth-of-type(1) {
    width: 10%;
}

.adminList th:nth-of-type(2) {
    width: 20%;
}

.adminEdit .main-edit {
    padding: .9rem 0rem 0rem 2rem;
    width: calc(100% - 40rem);
    margin-top: 5rem;
}

/* UserDataList
------------------------------------------------------------*/
.userDataList td:nth-of-type(1) {
    width: 2%;
}

.userDataList td:nth-of-type(2) {
    width: 3%;
}

.userDataList td:nth-of-type(3) {
    width: 5%;
}

.userDataList td:nth-of-type(4) {
    width: 5%;
}

.userDataList td:nth-of-type(5) {
    width: 5%;
}

.userDataList td:nth-of-type(6) {
    width: 6%;
}

.userDataList td:nth-of-type(7) {
    width: 4%;
}

.userDataList td:nth-of-type(8) {
    width: 4%;
}

.userDataList td:nth-of-type(9) {
    width: 5%;
}

.userDataList td:nth-of-type(10) {
    width: 5%;
}

.userDataList td:nth-of-type(11) {
    width: 6%;
}

.userDataList td:nth-of-type(12) {
    width: 6%;
}

.userDataList td:nth-of-type(13) {
    width: 6%;
}

.userDataList td:nth-of-type(14) {
    width: 6%;
}

.userDataList td:nth-of-type(15) {
    width: 6%;
}

.userDataList td:nth-of-type(16) {
    width: 4%;
}

.userDataList td:nth-of-type(17) {
    width: 5%;
}

.userDataList td:nth-of-type(18) {
    width: 5%;
}

.userDataList td:nth-of-type(19) {
    width: 5%;
}

.userDataList td:nth-of-type(20) {
    width: 7%;
}

.userDataList td:nth-of-type(20) {
    text-align: left;
}