@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Petit+Formal+Script&display=swap');

/* reset */
html, body,
h1, h2, h3, h4, h5, h6,
a, p, span,
em, small, strong,
sub, sup,
mark, del, ins, strike,
abbr, dfn,
blockquote, q, cite,
code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
main, aside, nav,
header, hgroup, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,
tbody, tfoot, thead,
tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #333333;
    overflow-x: hidden;
}

* {
    font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    font-size: inherit;
    line-height: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* a:hover img {
    filter: alpha(opacity=80);
    opacity: 0.8;
    -moz-opacity: 0.8;
} */
article,
aside,
footer,
header,
nav,
section,
main {
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal !important;
}

small {
    font-size: .8em;
}

* {
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ol,
ul {
    list-style: none;
}

img,
video {
    max-width: 100%;
}

img {
    border-style: none;
}

[hidden] {
    display: none !important;
}

[disabled] {
    cursor: not-allowed;
}

:focus:not(:focus-visible) {
    outline: none;
}

*:focus {
    outline: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select::-ms-expand {
    display: none;
}

button,
input[type="submit"] {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

a[href^="tel:"] {
    pointer-events: none;
}

.container {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    width: 100%;
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
    z-index: 9999;
}

header small {
    font-size: .9em;
}

header a {
    color: #fff !important;
}

header ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 .5em 0;
    padding: .6em 1em;
    text-align: center;
    background: #555;
    box-shadow: 0 0 20px 0 #c0c0c0;
}

header ul li {
    margin: 0;
    padding: 0;
    text-align: center;
}

header p {
    margin: 0 1em 0 0;
    padding: 0;
    color: #222222;
    text-align: right;
}

header p a {
    color: #0652DD !important;
}

.nav00 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

.nav00 li {
    margin: 0;
    text-align: center;
}

.nav00 li p {
    margin: 0;
    padding: .8em 0;
    text-align: center;
}

.nav00 li p.bgGry {
    margin: 0;
    padding: .8em 1em;
    text-align: center;
    background: #eee;
    border-radius: 5px;
}

.nav00 li p span {
    margin: 0 .5em;
}

.nav00 li p span.name {
    margin: 0 2em;
    font-size: 1.2em;
}

.nav00 li p i {
    position: relative;
    top: 6px;
    line-height: 0;
}

.nav00 li a.btnGrn {
    display: inline-block;
    padding: .8em 0;
    width: 150px;
    color: #fff;
    background-color: #C4E538;
    border-radius: 5px;
}

.nav00 li a.btnGrn:hover {
    text-decoration: none;
    background-color: #A3CB38;
}

.nav00 li a.btnGry {
    display: inline-block;
    padding: .8em 0;
    width: 150px;
    color: #fff;
    background-color: #ccc;
    border-radius: 5px;
}

.nav00 li a.btnGry:hover {
    text-decoration: none;
    background-color: #555;
}

.modal {
    display: none;
    /* height: 100vh; */
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}

.modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal__content {
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    text-align: center;
}

@media screen and (max-width: 1024px) {
    .modal__content {
        width: 40%;
    }
}

.modal__content ul {
    margin: 0 0 0 0;
    padding: 0;
    width: 100%;
    text-align: left;
}

.modal__content ul li {
    margin: 0 0 1em 0;
    padding: 0;
}

.modal__content ul li ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin: 0;
    padding: 0;
}

.modal__content ul li ul li {
    margin: 0;
    padding: 0;
    width: 40%;
}

.modal__content ul li ul li:last-child {
    margin: 0;
    padding: 0;
    width: 50%;
}

.modal__content button {
    margin: 0.5em auto 0.5em auto;
    padding: .6em 0;
    width: 100%;
    color: #fff;
    text-align: center;
    background: #0652DD;
    border-radius: 5px;
}

.modal__content button:hover {
    background: #1B1464;
}

.main {
    margin: 50px auto 0 auto;
    padding: 0 5%;
    width: 100%;
}

@media screen and (min-width: 599px) and (max-width: 959px) {
    .main {
        margin: 65px auto 0 auto;
    }
}

h1 {
    position: relative;
    display: block;
    margin: 0 0 .5em 0;
    padding: 0 0 0 .5em;
    width: 100%;
    border-left: 10px solid #ccc;
    font-size: 2.5rem;
}

h1 small {
    font-size: .6em;
}

h2 {
    margin: 0 0 .5em 0;
    padding: .5em;
    color: #fff;
    background: #555;
}

h3 {
    position: relative;
    display: block;
    padding: 0 0 0 .5em;
    margin: 0 0 1.5em 0;
    width: 100%;
    border-left: 5px solid #333;
    font-size: 2rem;
}

/* ダッシュボード */
.dashboard ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 .5em 0;
    padding: 0;
    width: 100%;
}

.dashboard ul li {
    padding: 1em 0;
    text-align: center;
}

.dashboard ul li.uriage {
    padding: 0 .5em 0 0;
    width: 30%;
}

.dashboard ul li.repeatRate {
    padding: 0 .5em;
    width: 20%;
}

.dashboard ul li.period {
    padding: 0 0 0 .5em;
    width: 50%;
}

/* @media screen and (max-width: 1024px) {
    .dashboard ul {
        margin: 0;
    }
} */
@media screen and (max-width: 960px) {

    .dashboard ul li.uriage,
    .dashboard ul li.repeatRate {
        width: 50%;
    }

    .dashboard ul li.period {
        padding: 0;
        width: 100%;
    }
}

.dashboard ul li table {
    margin-bottom: 1em;
    width: 100%;
    text-align: left;
}

.dashboard ul li table tr th {
    padding: 10px 10px;
    color: #fff;
    font-size: 1em;
    font-weight: normal;
    background: #fdc23e;
    border-right: solid 1px #fff;
}

.dashboard ul li table tr:nth-child(2) td {
    padding: 10px 10px;
    color: #333;
    background: #dcdcdc;
    border-right: solid 1px #fff;
}

.dashboard ul li table tr:nth-child(3) td {
    padding: 10px 10px;
    color: #333;
    background: #f5f5f5;
    border-right: solid 1px #fff;
}

.dashboard ul li p.title {
    color: #fff;
    text-align: center;
    letter-spacing: .1em;
}

.dashboard ul li p.value {
    color: #fff;
    font-size: 1em;
    letter-spacing: .2em;
    text-align: center;
}

.dashboard ul li.female {
    background: #ED4C67;
}

.dashboard ul li.male {
    background: #0652DD;
}

.dashboard ul li.other {
    background: #D980FA;
}

.dashboard ul li.g10s {
    background: #FFC312;
}

.dashboard ul li.g20s {
    background: #EE5A24;
}

.dashboard ul li.g30s {
    background: #C4E538;
}

.dashboard ul li.g40s {
    background: #009432;
}

.dashboard ul li.g50s {
    background: #12CBC4;
}

.dashboard ul li.g60s {
    background: #0652DD;
}

.dashboard ul li.g70s {
    background: #5758BB;
}

/* 予約 管理 */
.yoyaku_knr .dateSelect {
    font-size: 14px;
    margin: 0 0 4em 0;

{
    *padding: 0 0 .5em 0
;
    *}

width:

100
%
;
overflow-x: scroll

;
-webkit-overflow-scrolling: touch

;
overflow-scrolling: touch

;
white-space: nowrap

;
}

.yoyaku_knr .dateSelect li {
    display: inline-block;
    margin: 0 .1em;
    padding: .5em;
    width: 8%;
    text-align: center;
    border: solid 1px #eee;
}

.yoyaku_knr .dateSelect li.active {
    background: #fdc23e;
}

.yoyaku_knr ul.time {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 0 0;
    padding: 0;
    width: 100%;
}

.yoyaku_knr ul.time li {
    margin: 0;
    padding: .2em 0;
    width: 10%;
    vertical-align: bottom;
    text-align: left;
    border-right: solid 1px #555;
}

.yoyaku_knr ul.staffTitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 0 0;
    padding: 0;
    width: 100%;
}

.yoyaku_knr ul.staffTitle li {
    margin: 0;
    padding: .5em 0;
    width: 2.5%;
    background: #eee;
    border-right: solid 1px #555;
    border-bottom: solid 1px #555;
}

.yoyaku_knr ul.staffTitle li:first-child {
    padding: .5em 1em;
    width: 10%;
}

.yoyaku_knr ul.staff {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 0 0;
    padding: 0;
    width: 100%;
}

.yoyaku_knr ul.staff li {
    display: block;
    margin: 0;
    padding: 1em 0;
    width: 2.5%;
    color: #fff;
    text-align: center;
    background: #f0f8ff;
    border-bottom: solid 1px #555;
}

.yoyaku_knr ul.staff li:first-child {
    padding: 1em;
    width: 10%;
    color: #333;
    text-align: left;
    background: #fff;
    border-left: solid 1px #555;
    border-right: solid 1px #555;
}

.yoyaku_knr ul.staff li.junbi {
    background: #555;
}

.yoyaku_knr ul.staff li:last-child {
    border-right: solid 1px #555;
    text-align: center;
}

.kensaku {
    margin: 0 0 0 0;
    padding: .5em;
    width: 100%;
    background: #f5f5f5;
}

.kensaku li {
    margin: 0;
    padding: 5px;
    width: 25%;
}

.kensaku li:last-child {
    width: 180px;
}

.kensaku button.kensaku {
    float: right;
}

.pagination {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
}

.pagination ul {
    position: absolute;
    top: -25px;
    right: 0;
    margin: .5em;
    padding: 0;
    font-size: .8em;
}

.pagination ul .material-icons {
    font-size: 1.3em;
}

.pagination ul li {
    margin: 0 1em 0 0;
    padding: 0;
    text-align: center;
    list-style-type: none;
}

.pagination ul li a {
    display: block;
    padding: .4em .6em .2em .6em;
    color: #fff;
    text-decoration: none;
    background-color: #FFC312;
    border: solid 1px #FFC312;
}

@media screen and (max-width: 1024px) {
    .pagination ul li a {
        padding: .2em .4em;
    }
}

.pagination ul li a:hover {
    background-color: #EE5A24;
    border: solid 1px #EE5A24;
}

/* シフトを作成する */
/* シフトを承認する */
.shift .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin: 0;
    padding: 0;
    width: 100%;
}

.shift .inner li.side {
    margin: 0;
    padding: 0;
    width: 25%;
}

.shift .inner li.side .shukkin {
    margin: 0 0 1em 0;
    padding: .5em;
    background: #eee;
}

.shift .inner li.side .shukkin li {
    margin: 0 0 .2em 0;
}

.shift .inner li.side .prevNext {
    margin: 0 0 1em 0;
}

.shift .inner li.side .prevNext li {
    margin: 0;
}

.shift .inner li.side .prevNext li i {
    position: relative;
    top: 5px;
}

.shift .inner li.side .choice {
    margin: 0 0 1em 0;
    padding: 1em;
    border: solid 1px #808080;
}

.shift .inner li.side .choice li {
    margin: 0 0 1.5em 0;
}

.shift .inner li.side .choice li p {
    margin: 0 0 .4em 0;
}

.shift .inner li.side .choice li.name {
    font-size: 2rem;
}

.shift .inner li.side .choice li input[type=text]::placeholder {
    color: #333;
}

.shift .inner li.side .choice li button {
    padding: 1em 0;
    width: 45%;
    color: #fff;
    text-align: center;
    background: #0652DD;
    border-radius: 5px;
}

.shift .inner li.side .choice li button:hover {
    background: #1B1464;
}

.shift .inner li.side .choice li button:hover {
    background: #1B1464;
}

.shift .inner li.main {
    margin: 0;
    padding: 0 0 0 2em;
    width: 75%;
    background: #fff;
}

.shift .inner li.main button {
    right: 0;
    padding: 1em 3em;
    color: #fff;
    text-align: center;
    background: #0652DD;
    border-radius: 5px;
}

.shift .inner li.main button:hover {
    background: #1B1464;
}

.shift .above {
    margin: 0 0 4em 0;
    padding: 0;
    width: 100%;
}

.shift section ul.time {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 0 0;
    padding: 0;
    width: 100%;
}

.shift section ul.time li {
    margin: 0;
    padding: .2em 0;
    width: 10%;
    vertical-align: bottom;
    text-align: left;
    border-right: solid 1px #555;
}

.shift section ul.staffTitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 0 0;
    padding: 0;
    width: 100%;
}

.shift section ul.staffTitle li {
    margin: 0;
    padding: .5em 0;
    width: 2.5%;
    background: #eee;
    border-right: solid 1px #555;
    border-bottom: solid 1px #555;
}

.shift section ul.staffTitle li:first-child {
    padding: .5em 1em;
    width: 10%;
}

.shift section ul.staff {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 0 0;
    padding: 0;
    width: 100%;
}

.shift section ul.staff li {
    margin: 0;
    padding: 1em 0;
    width: 2.5%;
    color: #fff;
    text-align: center;
    background: #fff;
    border-bottom: solid 1px #555;
}

.shift section ul.staff li:first-child {
    padding: 1em;
    width: 10%;
    color: #333;
    text-align: left;
    background: #fff;
    border-left: solid 1px #555;
    border-right: solid 1px #555;
}

.shift section ul.staff li.junbi {
    background: #555;
}

.shift section ul.staff li:last-child {
    border-right: solid 1px #555;
    text-align: center;
}

.shift_control section {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

.shift_control section .cndtn {
    margin: 0 0 2em 0;
    padding: 15px;
    width: 100%;
    background: #f5f5f5;
    border-radius: 5px;
}

.shift_control section .cndtn li {
    margin: 0;
    padding: 0 .25em 0 0;
    width: 12.5%;
    text-align: left;
}

.shift_control section .cndtn li p {
    display: inline-block;
    vertical-align: middle;
}

.shift_control section .day {
    margin: 0 0 0 0;
    padding: 0;
    width: 100%;
    overflow-x: scroll;
}

.shift_control button.gray {
    padding: .5em 0;
}

.shift_control section .day table {
    position: relative;
    margin: 0 0 10px 0;
    padding: 0;
    width: 150%;
    border-collapse: separate;
    border-spacing: 0;
    border-top: solid 1px #aaaaaa;
    border-left: 0;
    border-right: solid 1px #aaaaaa;
    border-bottom: 0;
}

.shift_control section .day table tr th {
    white-space: nowrap;
    margin: 0;
    padding: 10px 5px;
    text-align: center;
    border-top: 0;
    border-left: solid 1px #aaaaaa;
    border-right: 0;
    border-bottom: solid 1px #aaaaaa;
}

.shift_control section .day table tr th {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    width: 8%;
    text-align: center;
    background: #ffffff;
    z-index: 5;
    background: #dddddd;
}

.shift_control section .day table tr th p {
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}

.shift_control section .day table tr th p span {
    display: block;
    font-size: .9em;
    font-weight: normal;
    border-bottom: solid 2px #aaaaaa;
}

.shift_control section .day table tr td {
    white-space: nowrap;
    margin: 0;
    padding: 10px 5px;
    text-align: center;
    border-top: 0;
    border-left: solid 1px #aaaaaa;
    border-right: 0;
    border-bottom: solid 1px #aaaaaa;
}

@media screen and (max-width: 1400px) {
    .shift_control section .day table tr td {
        padding: 0 5px;
    }
}

.shift_control section .day table tr td p.chousei {
    display: block;
    background: #eb59a4;
}

.shift_control section .timeSpecification {
    margin: 0 0 50px 0;
    padding: 0;
    width: 100%;
    text-align: left;
}

.shift_control section .timeSpecification ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 30px 0;
    padding: 0;
    width: 100%;
    background: #eeeeee;
    border-radius: 10px;
}

.shift_control section .timeSpecification ul li {
    margin: 0;
    padding: 2%;
    width: 80%;
}

.shift_control section .timeSpecification ul li:first-child {
    margin: 0;
    padding: 3%;
    width: 20%;
    background: #f5f5f5;
    border-radius: 10px 0 0 10px;
}

.shift_control section .timeSpecification ul li .name {
    font-size: 1.2em;
}

.shift_control section .eachStaff {
    margin: 0 0 50px 0;
    padding: 0;
    width: 100%;
}

.shift_control section .eachStaff table {
    margin: 0 0 50px 0;
    padding: 0;
    width: 100%;
}

.shift_control section .eachStaff table tr {
    margin: 0;
    padding: 0;
}

.shift_control section .eachStaff table tr:first-child {
    margin: 0;
    padding: 0;
    background: #dddddd !important;
}

.shift_control section .eachStaff table tr:nth-child(odd) {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
}

.shift_control section .eachStaff table tr th {
    margin: 0;
    padding: 10px 5px;
    width: 10%;
    text-align: center;
    border: solid 1px #aaaaaa;
}

.shift_control section .eachStaff table tr th p {
    display: block;
}

.shift_control section .eachStaff table tr th p.kakunin {
    display: inline-block;
    padding: .2em 1em;
    background: #70d93d;
}

.shift_control section .eachStaff table tr td {
    margin: 0;
    padding: 10px 5px;
    width: 2.727272727272727%;
    text-align: center;
    border: solid 1px #aaaaaa;
}

.shift_control section .eachStaff table tr td small {
    display: block;
}

.shift_control section .eachStaff table tr td .chousei {
    display: block;
    font-size: .8em;
    background: #eb59a4;
}

.shift_control section .cal {
    margin: 0;
    padding: 0;
    width: 100%;
}

.shift_control section .cal table {
    margin: 0 0 10px 0;
    padding: 0;
    width: 100%;
}

.shift_control section .cal table tr {
    margin: 0;
    padding: 0;
}

.shift_control section .cal table tr td {
    margin: 0;
    padding: 0 5px;
    width: 14.285714285714286%;
    color: #aaaaaa;
    vertical-align: top;
    text-align: center;
    border: solid 1px #aaaaaa;
}

.shift_control section .cal table tr th {
    margin: 0;
    padding: 0;
    width: 14.285714285714286%;
    color: #aaaaaa;
    text-align: center;
    border: solid 1px #aaaaaa;
}

.shift_control section .cal table tr td p {
    margin: 0 0 .5em 0;
    padding: 0;
}

.shift_control section .cal table tr td .holiday {
    color: #ffffff;
    background: #ff0000;
}

.shift_control section .cal table tr td .nameM {
    color: #222222;
    background: #eeeeee;
}

.shift_control section .cal table tr td .nameW {
    color: #ff0000;
    background: #eeeeee;
}

.timecard .item {
    margin: 0 0 0 0;
    padding: 0;
    width: 100%;
}

.timecard .item li {
    margin: 1%;
    padding: 1%;
    width: 23%;
    text-align: center;
    background: #eee;
}

.timecard .item li p {
    margin: 0 0 .5em 0;
}

.timecard .item li p.tourokubi {
    margin: 0 0 1em 0;
    font-size: .8em;
    text-align: right;
}

.timecard .item li p.name {
    margin: 0 0 1em 0;
    font-size: 2rem;
}

.timecard .Individual li {
    margin: 0;
    padding: 1%;
    width: 23%;
    text-align: center;
    background: #eee;
}

.timecard .Individual li:last-child {
    margin: 1%;
    padding: 1%;
    width: 23%;
    text-align: center;
    background: #eee;
}

.timecard .time {
    display: block;
    margin: 0 0 1em 0;
    font-size: 5rem;
    letter-spacing: .2em;
}

.timecard .timeBtn {
    margin: 0 0 10% 0;
    width: 100%;
}

.timecard .timeBtn li {
    width: 25%;
    padding: 0 1% 0 0;
    text-align: center;
}

.timecard .timeBtn li button {
    padding: 2em 0;
    width: 100%;
    font-size: 2em;
}

.timecard .timeRireki {
    margin: 0 0 2em 0;
    width: 100%;
    font-size: .8em;
}

.timecard .timeRireki li {
    padding: 1% 0;
    border-bottom: solid 1px #ddd;
}

.timecard .timeRireki li:first-child {
    padding: 1% 0;
    background: #eee;
}

.timecard .timeRireki li dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.timecard .timeRireki li dl dt {
    margin: 0;
    padding: 0;
    width: 9%;
    text-align: center;
}

.breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 .75em 0;
    padding: 0;
    width: 100%;
}

.breadcrumb li {
    margin: 0;
    width: 50%;
    text-align: left;
}

.breadcrumb li:last-child {
    text-align: right;
}

.refine {
    margin: 0 0 .5em 0;
    padding: 0;
}

/* .refine dt */
.refine .btn-right {
    margin: 0;
    padding: 0;
    width: 40%;
}

.refine dt:last-child {
    text-align: right;
}

.twoClm {
    margin: 0;
    padding: 0;
}

.twoClm section {
    margin: 0;
    padding: 1.5em;
    width: 100%;
    background: #eee;
}

.twoClm section:last-child {
    margin: 10px 0 0 0;
    padding: 0;
    width: 100%;
    background: #fff;
}

/* 顧客管理 > 基本情報 */
/* スタッフ管理 > 基本情報 */
.personalInfoA,
.personalInfoB {
    margin: 0;
    padding: 0;
}

.personalInfoA p.name,
.personalInfoB p.name {
    font-size: 1.5em;
}

.personalInfoA p.title,
.personalInfoB p.title {
    margin: 0 0 .5em 0;
    color: #a9a9a9;
    font-size: .9em;
}

.personalInfoA label,
.personalInfoB label {
    margin-right: 1em;
    white-space: nowrap;
}

.personalInfoA li {
    margin: 0;
    padding: 0;
}

.gray-bg {
    display: none;
}

.personal-data-img {
    display: flex;
    /* justify-content: space-between; */
}

.personal-data-img img {
    max-width: 50%;
    max-height: 500px;
}

.personal-data {
    display: flex;
    justify-content: space-between;
}

.personal-data li {
    width: 33%;
    margin-top: 10px;
}

.visit {
    display: flex;
    justify-content: space-around;
    background: #fff;
    width: 33%;
    border-radius: 5px;
    padding: 10px;
    margin: 5px 0;
}

.payment {
    display: flex;
    flex-wrap: wrap;
}

.payment p {
    width: 33%;
}

.personalInfoB li {
    margin: 0;
    padding: 0;
}

.personalInfoB li.row7 {
    padding: 1%;
    width: 14.2857%;
}

.personalInfoB li.row6 {
    padding: 1%;
    width: 16.6666%;
}

.personalInfoB li.row5 {
    padding: 1%;
    width: 20%;
}

.personalInfoB li.row4 {
    padding: 1%;
    width: 25%;
}

.personalInfoB li.row3 {
    padding: 1%;
    width: 33.3333%;
}

.personalInfoB li.row2 {
    padding: 1%;
    width: 50%;
}

.personalInfoB li.row1 {
    padding: 0 1%;
    width: 100%;
}

.personalInfoB li.photo img {
    display: inline-block;
    width: 49%;
}

.personalInfoB .calendar-color {
    margin-bottom: 15px !important;
}

.personalInfoB textarea {
    height: 10em;
}

.personalInfoB .radio {
    margin-top: 1em;
}

.raitenrireki {
    margin: 0;
    padding: 0;
    font-size: .8em;
}

.raitenrireki li {
    margin: 0;
    padding: 2%;
}

.raitenrireki li:first-child {
    background: #eee;
}

.raitenrireki dl {
    margin: 0;
    padding: 0;
}

.raitenrireki dl dt {
    margin: 0;
    padding: 0;
    width: 8%;
    text-align: center;
}

.raitenrireki dl dt:nth-child(2) {
    width: 20%;
}

.humanFigure {
    width: 100%;
}

.humanFigure li {
    margin: 0;
    padding: 1%;
    width: 25%;
    background: #fff;
}

.humanFigure li:nth-child(2) {
    width: 50%;
}

.humanFigure li dl {
    margin: 0;
    padding: 0;
}

.humanFigure li dl dt {
    margin: 0 0 1em 0;
    padding: 0;
}

.humanFigure li dl dt textarea {
    margin: 0;
    padding: .3em;
    width: 100%;
    height: 3em;
    font-size: .9em;
    border: 1px solid #ddd;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background: #fff;
}

#karte_image {
    width: 50%;
}

.karute_flex {
    display: flex;
}

.karute_left,
.karute_right {
    width: 50%;
}

.karute_left {
    margin-right: 10px;
}

.karte .hyoukaQ {
    margin: 0 auto 50px auto;
    padding: 0;
    width: 80%;
}

.karte .hyoukaQ tr th {
    margin: 0;
    padding: 10px;
    text-align: center;
    border: solid 1px #aaaaaa;
    background: #eeeeee;
}

.karte .hyoukaQ tr th.vtcl {
    background: #f5f5f5;
}

.karte .hyoukaQ tr td {
    margin: 0;
    padding: 10px;
    text-align: center;
    border: solid 1px #aaaaaa;
}

.karte .hyoukaA {
    margin: 0 auto 50px auto;
    padding: 0;
    width: 80%;
}

.karte .hyoukaA tr:nth-last-child(2) {
    background: #f5f5f5;
}

.karte .hyoukaA tr th {
    margin: 0;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    border: solid 2px #191970;
    background: #000080;
}

.karte .hyoukaA tr th.vtcl {
    background: #0000cd;
}

.karte .hyoukaA tr td {
    margin: 0;
    padding: 10px;
    text-align: center;
    border: solid 2px #191970;
}

.list00 {
    margin: 0;
    padding: 0 0 1.5em 0;
    width: 100%;
}

.list00 li {
    margin: 0 0 0 0;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
    word-break: break-all;
    overflow: auto;
}

.list00 li.title {
    margin: 0 0 0 0;
    padding: 0;
    width: 100%;
    color: #fff;
    background: #12CBC4;
}

@media screen and (max-width: 1024px) {
    .list00 {
        font-size: .8em;
    }
}

.list00 li dl {
    margin: 0;
    padding: 0;
    width: 100%;
}

.list00 li dl dt {
    position: relative;
    margin: 0;
    padding: .5em;
    width: 10%;
}

.list00.customerlist li dl dt {
    padding: .5em 1em;
    white-space: nowrap;
}

.list00.staffList li dl dt:first-child {
    width: 5%;
}

.list00.staffList li dl dt:nth-child(2) {
    width: 8%;
}

.list00.staffList li dl dt:nth-child(3) {
    width: 12%;
}

.list00.staffList li dl dt:nth-child(4) {
    width: 13%;
}

.list00.staffList li dl dt:nth-child(5) {
    width: 12%;
}

.list00.staffList li dl dt:nth-child(6) {
    width: 8%;
}

.list00.staffList li dl dt:nth-child(7) {
    width: 5%;
}

.list00.staffList li dl dt:nth-child(8) {
    width: 20%;
}

.list00.staffList li dl dt:nth-child(9) {
    width: 10%;
}

.list00.staffList li dl dt:last-child {
    width: 7%;
}

.list00.customerlist li dl dt:first-child {
    width: 91px;
}

.list00.customerlist li dl dt:nth-child(2) {
    width: 135px;
}

.list00.customerlist li dl dt:nth-child(3) {
    width: 167px;
}

.list00.customerlist li dl dt:nth-child(4) {
    width: 120px;
}

.list00.customerlist li dl dt:nth-child(5) {
    width: 95px;
}

.list00.customerlist li dl dt:nth-child(6) {
    width: 128px;
}

.list00.customerlist li dl dt:nth-child(7) {
    width: 10%;
}

.list00.customerlist li dl dt:nth-child(8) {
    width: 7%;
}

.list00.customerlist li dl dt:nth-child(9) {
    width: 18%;
    text-align: right;
}

@media (max-width: 810px) {
    .list00.customerlist li dl dt:first-child {
        width: 73px;
    }

    .list00.customerlist li dl dt:nth-child(2) {
        width: 108px;
    }

    .list00.customerlist li dl dt:nth-child(3) {
        width: 134px;
    }

    .list00.customerlist li dl dt:nth-child(4) {
        width: 97px;
    }

    .list00.customerlist li dl dt:nth-child(5) {
        width: 75px;
    }

    .list00.customerlist li dl dt:nth-child(6) {
        width: 100px;
    }
}

.list00.menu li dl dt:first-child {
    width: 5%;
}

.list00.menu li dl dt:nth-child(2) {
    width: 25%;
}

.list00.teiban_shift {
    font-size: .8em;
}

.list00.teiban_shift li dl dt:first-child {
    width: 8%;
}

.list00.teiban_shift li dl dt:nth-child(4) {
    width: 10%;
}

.list00.teiban_shift li dl dt:nth-child(7),
.list00.teiban_shift li dl dt:nth-child(9),
.list00.teiban_shift li dl dt:nth-child(10) {
    width: 13%;
}

.list00.teiban_shift li dl dt:nth-child(8) {
    width: 10%;
}

/* .list00.teiban_shift li dl dt:nth-child(10) {
    width: 15%;
} */
.eachMonth {
    margin: 1em;
    font-size: 3rem;
}

footer {
    display: block;
    /* margin: 100px auto 0 auto; */
    margin: 1em auto 0 auto;
    padding: 30px 0;
    text-align: center;
    background: #eee;
}

button {
    right: 0;
    margin: 0 5px;
    padding: .5em 0;
    width: 180px;
    color: #fff;
    text-align: center;
    background: #0652DD;
    border-radius: 5px;
}

/* button:not(.modaal-gallery-control):hover {
    background: #1B1464;
} */
button.search {
    padding: .9em .5em;
    width: auto;
    background: #FFC312;
}

button.search:hover {
    background: #EE5A24;
}

button.cancel {
    background: #a9a9a9;
}

button.cancel:hover {
    background: #696969;
}

button.tsuika {
    background: #87cefa;
}

button.tsuika:hover {
    background: #00bfff;
}

button.henshu {
    background: #C4E538;
}

button.henshu:hover {
    background: #A3CB38;
}

button.hozon {
    background: #56256e;
}

button.hozon:hover {
    background: #47266e;
}

button.kensaku {
    background: #ffd700;
}

button.kensaku:hover {
    background: #e5c102;
}

button.gray {
    background: #cccccc;
}

button.gray:hover {
    background: #aaaaaa;
}

button.sakujo {
    background: #6e2525;
}

@media (max-width: 1024px) {
    button.sakujo {
        width: 100px;
    }
}

button.sakujo:hover {
    background: #c92424;
}

select:not(.editmodal select, .editmodal_new select) {
    margin: 0 0 0 0;
    padding: .8em 1em;
    width: 100%;
    border: 1px solid #ddd;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background: #fff;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"] {
    margin: 0;
    padding: .5em;
    width: 100%;
    border: 1px solid #ddd;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background: #fff;
}

input[type="search"] {
    margin: 0;
    padding: .5em;
    width: 100%;
    border: 1px solid #ddd;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background: #fff;
    -webkit-appearance: textfield;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + .check-icon:before {
    position: relative;
    top: 8px;
    content: "check_box_outline_blank";
    font-family: "Material Icons";
    color: #ccc;
    font-size: 28px;
    line-height: 0;
    transition: .8s;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

input[type="checkbox"]:checked + .check-icon:before {
    content: "check_box";
    font-family: "Material Icons";
    color: #ffdc00;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

input[type="radio"] {
    display: none;
}

input[type="radio"] + .radio-icon:before {
    position: relative;
    top: 8px;
    content: "radio_button_unchecked";
    font-family: "Material Icons";
    color: #ccc;
    font-size: 28px;
    line-height: 0;
    transition: .8s;
}

input[type="radio"]:checked + .radio-icon:before {
    content: "radio_button_checked";
    font-family: "Material Icons";
    color: #ffdc00;
}

textarea {
    margin: 0;
    padding: .8em 1em;
    width: 100%;
    height: 7em;
    border: 1px solid #ddd;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background: #fff;
}

.flx {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.fxCe {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.fxWp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.fxSbCe {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.fxCeWp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.material-icons {
    display: inline-flex !important;
    vertical-align: bottom !important;
    text-decoration: none !important;
}

.material-icons.details {
    transform: scale(1, -1);
}

.rqird {
    padding: 3px;
    color: #fff;
    font-size: .8em;
    background: #ff0000;
}

::placeholder {
    color: #c0c0c0;
}

.translucent {
    opacity: .3;
}

hr {
    margin: 2em 0;
    width: 100%;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #ddd;
}

.whi {
    color: #ffffff !important;
}

.blk {
    color: #222222 !important;
}

.red {
    color: #ff0000 !important;
}

.blu {
    color: #0000ff !important;
}

.sax {
    color: #00bfff !important;
}

.grn {
    color: #008000 !important;
}

.pnk {
    color: #ff1493 !important;
}

.org {
    color: #ff8c00 !important;
}

.gry {
    color: #aaaaaa !important;
}

.lgray {
    color: #f5f5f5 !important;
}

.bgLvd {
    background: #625bff !important;
}

.bgEgrn {
    background: #a5fef8 !important;
}

.bgRsRed {
    background: #ff607f !important;
}

.bgDegrn {
    background: #88ddda !important;
}

.bgYel {
    background: #fffc67 !important;
}

.bgBrw {
    background: #ce6a63 !important;
}

.bgBlk {
    background-color: #222222 !important;
}

.bgRed {
    background-color: #ff0000 !important;
}

.bgBlu {
    background-color: #0000ff !important;
}

.bgSax {
    background-color: #00bfff !important;
}

.bgGrn {
    background-color: #008000 !important;
}

.bgPnk {
    background-color: #ff1493 !important;
}

.bgOrg {
    background-color: #ff8c00 !important;
}

.bgGry {
    background-color: #aaaaaa !important;
}

.bgLgray {
    background-color: #f5f5f5 !important;
}

.mgn0 {
    margin: 0 !important;
}

.mgnTop01em {
    margin-top: 1em !important;
}

.mgnTop02em {
    margin-top: 2em !important;
}

.mgnTop03em {
    margin-top: 3em !important;
}

.mgnTop04em {
    margin-top: 4em !important;
}

.mgnTop05em {
    margin-top: 5em !important;
}

.mgnBtm01em {
    margin-bottom: 1em !important;
}

.mgnBtm02em {
    margin-bottom: 2em !important;
}

.mgnBtm03em {
    margin-bottom: 3em !important;
}

.mgnBtm04em {
    margin-bottom: 4em !important;
}

.mgnBtm05em {
    margin-bottom: 5em !important;
}

.w50per {
    width: 50% !important;
}

.w30per {
    width: 30% !important;
}

.w25per {
    width: 25% !important;
}

.w10per {
    width: 10% !important;
}

.bgColeee {
    padding: 2px 10px;
    background: #eee !important;
}

.fosz08 {
    font-size: .8em;
}

.fosz09 {
    font-size: .9em;
}

.fosz12 {
    font-size: 1.2em;
}

.fosz15 {
    font-size: 1.5em;
}

.fosz20 {
    font-size: 2em;
}

.fosz30 {
    font-size: 3em;
}

.fosz40 {
    font-size: 4em;
}

.fosz50 {
    font-size: 5em;
}

.txalCnt {
    text-align: center;
}

.txalLeft {
    text-align: left !important;
}

.txalRight {
    text-align: right !important;
}

.mgnCnt {
    margin: 0 auto !important;
}

@media screen and (max-width: 481px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 481px) {
    .sp {
        display: none !important;
    }
}

.out00 {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}

.out00 .modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.out00 .modal__content {
    background: #fff;
    left: 50%;
    padding: 30px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    text-align: center;
}

.out00 .modal__content p {
    text-align: right;
}

.out00 .modal__content h4 {
    margin: 1em 0;
    font-size: 1.5em;
}

.out00 .modal__content button.out {
    margin: 0 auto 1em auto;
    padding: .6em 0;
    width: 100%;
    color: #fff;
    text-align: center;
    background: #0652DD;
    border-radius: 5px;
}

.out00 .modal__content button.out:hover {
    background: #1B1464;
}

.out00 .modal__content button.cancel {
    margin: 0 auto 1em auto;
    padding: .6em 0;
    width: 80%;
    color: #fff;
    text-align: center;
    background: #aaaaaa;
    border-radius: 5px;
}

.out00 .modal__content button.cancel:hover {
    background: #555555;
}

/*****yamamoto_fumina*****/
@media screen and (max-width: 481px) {
    header {
        width: 80%;
    }

    .dashboard ul li.period {
        width: 100%;
    }

    .dashboard ul li.uriage {
        width: 100%;
    }

    .dashboard ul li.repeatRate {
        width: 100%;
    }

    .dashboard ul li table {
        text-align: center;
    }

    button.henshu {
        width: 300px;
    }

    .out00 .modal__content {
        width: 90%;
    }

    .modal__content {
        width: 90%;
    }
}

.flex_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center
}

/* .flex_item {
    width: 50%;
} */
.flex_container {
    display: flex;
    margin: 0 auto;
}

.modal__content button.karte_btn {
    width: 100%;
    padding: .6em 0;
}

.flex_box_sb {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
}

.yoyaku_knr .acd-content {
    margin-right: 20px;
}

.reservation_items {
    width: 33%;
}

.reservation_items textarea {
    height: 4em;
}

.memo_hozon {
    padding: 10px 30px;
    background-color: #56256e;
    color: white;
    border-radius: 5px;
    display: inline-block;
}

.modal_bottom {
    /* display: flex;
      margin: 0 auto;
      width: 90%; */
    display: flex;
    justify-content: space-between;
}

.modal_center {
    width: 90%;
    margin: 0 auto;
}

.modal_price {
    font-size: 2.8rem;
}

.modal__content .form_center {
    /* width: 80%;
      margin: 0 auto; */
}

.menu-edit-bt,
.store-edit-bt {
    margin-bottom: 0 !important;
}

.modal__contentbox {
    padding: 0 5%;
}

/* 20220916 takahashi*/
.karte {
    margin: 0;
    padding: 0;
}

.karte .top {
    margin: 0;
    padding: 1em;
    width: 100%;
    color: #ffffff;
    background: #1ca4fc;
    justify-content: space-between;
}

.karte .wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    border: solid 1px #808080;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
}

.wrapper .left, .wrapper .right {
    margin: 0;
    padding: 1em;
    width: 50%;
}

.fa-ellipsis {
    padding: 0.5em;
    position: relative;
    cursor: pointer;
}

.wrapper .left div {
    display: flex;
    justify-content: space-between;
}

.collagebutton {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 5px;
    background-color: #C4E538;
}

.fa-pen-to-square {
    cursor: pointer;
}

.wrapper .left {
    border-right: solid 1px #808080;
}

.fa-thumbtack {
    margin-right: 0.5em;
}

.wrapper .textalignRight {
    text-align: right;
    position: relative;
}

.wrapper .photo {
    display: flex;
    margin: 1em 0;
}

.wrapper .photo li {
    width: calc((100% - 3em) / 4);
    height: 0;
    padding-bottom: calc((100% - 3em) / 4);
    position: relative;
}

.wrapper .photo img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wrapper .photo li:not(:last-child) {
    margin-right: 1em;
}

.wrapper .left .title {
    background-color: pink;
    display: inline-block;
    padding: 1px 15px;
    font-size: 1.5rem;
    background: #eeeeee;
    border-radius: 30px;
}

.titleNext {
    margin-left: 1em;
    margin: 0.25em 0 0.5em 1em;
}

/* right */
.wrapper .right .newkarte {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 5px;
    background-color: #fdc23e;
    margin-bottom: 1em;
}

.wrapper .right .prevnext {
    position: relative;
    width: 100%;
    height: 1em;
    margin: 1em 0;
    font-size: 1.4rem;
}

.wrapper .right .prevnext a:first-child {
    position: absolute;
    top: 0;
    left: 0;
}

.wrapper .right .prevnext a:last-child {
    position: absolute;
    top: 0;
    right: 0;
}

.wrapper .right .box {
    padding: 1.5em;
    border-radius: 20px;
    background-color: #eeeeee;
}

.wrapper .right .box:not(:last-child) {
    margin-bottom: 1em;
}

.wrapper .right .border {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #cccccc;
    margin: 0.5em 0;
}

.wrapper .right .box p {
    font-size: 1.4rem;
}

.karte .right .edit {
    display: flex;
    justify-content: flex-end;
}

.karte .right .edit li:not(:last-child) {
    margin-right: 0.5em;
}

.karte .wrapper li .shokenRireki {
    display: block;
    margin: 0;
    padding: 0 1em 0 0;
    width: 100%;
    /* height: 500px; */
    height: auto;
    overflow-y: auto;
}

.karte .wrapper li p textarea {
    height: 5em;
}

.fixededitmodal,
.editmodal_new,
.editmodal,
.deletemodal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
}

.modalgb {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.fixededitmodalmain {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    width: 80%;
    max-height: 80%;
    padding: 0.5em 1.5em 1.5em 1.5em;
    border-radius: 10px;
    overflow-y: auto;
    overflow-y: scroll;
}

.editmodalmain, .editmodalmain_new {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    width: 80%;
    padding: 1em 1.5em 1.5em 1.5em;
    border-radius: 10px;
}

.editmodal .date,
.editmodal_new .date {
    display: inline-block;
    position: relative;
}

.editmodal .date:after,
.editmodal_new .date:after {
    position: absolute;
    font-family: "Font Awesome 6 Free";
    content: "\f107";
    font-weight: 900;
    top: 50%;
    right: 0.1em;
    transform: translateY(-50%);
    pointer-events: none;
}

.editmodal select,
.editmodal_new select {
    padding: 0 1em 0 0;
    width: 100%;
    background-color: transparent;
    border: 1px solid black;
    color: inherit;
}

.textalignright {
    text-align: right;
}

.fixededitmodalmain i,
.editmodalmain i,
.editmodalmain_new i,
.deletemodalmain i {
    padding: 0.5em 0.5em 0;
    font-size: 2rem;
}

.fixededitmodalmain .wrapper {
    margin-bottom: 1em;
}

.fixededitmodalmain textarea {
    margin-bottom: 1em;
    border: 1px solid black;
    -webkit-appearance: none;
    border-radius: 0;
    resize: none;
}

.editmodalmain textarea,
.editmodalmain_new textarea {
    margin: 1em 0;
    border: 1px solid black;
    -webkit-appearance: none;
    border-radius: 0;
    resize: none;
}

.fixededitmodalmain .wrapper,
.editmodalmain .wrapper,
.editmodalmain_new .wrapper {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1em;
}

.fixededitmodalmain .wrapper .box,
.editmodalmain .wrapper .box,
.editmodalmain_new .wrapper .box {
    width: calc((100% - 3em) / 4);
}

.fixededitmodalmain .wrapper input[type="file"],
.editmodalmain .wrapper .box input[type="file"],
.editmodalmain_new .wrapper .box input[type="file"] {
    width: 100%;
}

.fixededitmodalmain .wrapper .box:not(:last-child),
.editmodalmain .wrapper .box:not(:last-child),
.editmodalmain_new .wrapper .box:not(:last-child) {
    margin-right: 1em;
}

.fixededitmodalmain .wrapper .box span,
.editmodal .wrapper .box span,
.editmodal_new .wrapper .box span {
    display: block;
    margin-bottom: 0.5em;
}

.fixededitmodalmain .wrapper .check-icon,
.fixededitmodalmain .wrapper .file,
.editmodal .wrapper .check-icon,
.editmodal .wrapper .box input,
.editmodal_new .wrapper .check-icon,
.editmodal_new .wrapper .box input {
    font-size: 12px;
}

.fixededitmodalmain .save,
.editmodalmain .save,
.editmodalmain_new .save {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 5px;
    background-color: #0652DD;
    color: #fff;
}

.deletemodalmain {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    width: 50%;
    padding: 0.5em 1.5em 1.5em 1.5em;
    border-radius: 10px;
    text-align: center;
}

.deletemodalmain span {
    display: block;
}

.deletemodalmain a:not(.textalignright a) {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 5px;
    color: #ffffff;
}

.deletemodalmain *:not(:last-child) {
    margin-bottom: 1em;
}

.deletemodalmain .delete {
    background-color: #0652DD;
    margin: 1em 0 0.5em;
}

.deletemodalmain .cancel {
    background-color: #aaaaaa;
}

/* 左モーダル ラジオボタン変更 */
.fixededitmodal .mgnBtm01em label {
    display: inline-block;
    margin: 0 0.5em 0 0;
    padding: 0.2em 0.5em;
    border: 2px solid #ccc;
    border-radius: calc(32.79px / 2);
    cursor: pointer;
    /* background-color: #ffdc00; */
}

.fixededitmodal .mgnBtm01em input[type="checkbox"]:checked + label {
    background-color: #ffdc00;
    border: 2px solid #ffdc00;
}

/* 20221108 takahashi */
.customers .customerlist button.sakujo {
    width: auto;
    padding: 8px 1em;
    font-size: 1.4rem;
    white-space: nowrap;
}

/* ログイン画面 */
.form-group {
    margin: 0 0 0.5em 0;
}

.box-footer button {
    margin: 0.5em 0 0 0;
}

/* ログイン画面 */

@media screen and (max-width: 1024px) {
    .customers .customerlist button.sakujo {
        font-size: 0.8em;
    }

    header {
        font-size: 1.2rem;
    }
}

/* 20221108 takahashi */