:root {
    /* basic */
    --basic-color: rgb(48, 150, 84);
    --basic-font-size: 14px;
    --basic-checkbox-size: 14px;
    --basic-radiobox-size: 14px;
    --basic-tab-height: 28px;
    --basic-tab-md: 3px;
    --basic-margin: 3px;
    --basic-padding: 3px;
    /* header */
    --header-color: #ddf7eb;
    --header-height: 50px;
    --header-icon-width: 50px;
    /* sidemenu */
    --sidemenu-top: calc(var(--header-height) + 1px);
    --sidemenu-right: 1px;
    --sidemenu-title-font-size: 14px;
    --sidemenu-basic-font-size: 12px;
    /* main */
    --main-mt: 50px;
    --input-field-input-font-size: 14px;
    /* contents */
    --contents-header-pt: 5px;
    --contents-header-pd: 5px;
    --contents-header-title-font-size: 20px;
    --contents-header-title-pt: 5px;
    --contents-header-title-pd: 5px;
    --contents-header-attention-height: 20px;
    --contents-header-attention-font-size: 0.8rem;
    --contents-header-attention-pt: 5px;
    --contents-header-attention-pd: 5px;
    --contents-bgcolor: rgb(242, 242, 242);
    --contents-header-height: 50px;
    --contents-body-pt: 20px;
    --contents-body-pd: 20px;
    --contents-body-mt: 20px;
    --contents-body-md: 20px;
    /* form */
    --form-field-pt: 10px;
    --form-field-pd: 10px;
    --form-field-mt: 20px;
    --form-field-md: 20px;
    /* icon */
    --icon-field: 50px;
    --icon-scale: 70%;
    --icon-color: #fff;
    --icon-bgcolor: var(--basic-color);
    --icon-hover-color: #4de7ff;
    --icon-font-size: 14px;
    --icon-title-space: 3px;
    /* button */
    --button-pt: 10px;
    --button-pd: 10px;
    --button-pl: 5px;
    --button-pr: 5px;
    --button-width: calc(var(--icon-field) * 3);
    --mini-button-width: var(--icon-field);
    --button-height: 30px;
    --button-bgcolor: var(--basic-color);
    /* card */
    --card-pt: 20px;
    --card-pd: 20px;
    --card-pl: 20px;
    --card-pr: 20px;
    --card-bgcolor: rgb(242, 242, 242);
    --card-header-height: 28px;
    --card-input-height: 40px;
    --card-textarea-height: 100px;
    --card-font-size: 12px;
    --card-hasimg-height: 100px;
    --card-hasimg-title-height: 30px;
    --card-hasimg-image-height: 70px;
    --card-hasimg-image-minwidth: 100px;
    /* search */
    --search-field-md: 10px;
    /* table */
    --table-cell-height: calc(var(--input-field-input-font-size) * 2);
    --table-header-bgcolor: rgb(35, 97, 149);
    --table-font-size: 12px;
    --table-body-bgcolor: #fff;
    --table-body-hover-bgcolor: rgb(255, 255, 204);
    --table-body-checked-bgcolor: rgb(255, 231, 255);
    /* input-field */
    --input-height: 25px;
    --input-field-hover-bgcolor: rgb(255, 255, 204);
    --input-field-checked-bgcolor: rgb(255, 231, 255);
    --input-field-mt: 10px;
    --input-field-md: 10px;
    --input-field-ml: 10px;
    --input-field-mr: 10px;
    --input-field-pt: 10px;
    --input-field-pd: 10px;
    --input-field-pl: 10px;
    --input-field-pr: 10px;
    --input-field-label-padding: 3px;
    --input-field-input-height: calc(var(--input-field-input-font-size) * 2);
    --input-padding: 3px;
    --input-font-size: 12px;
    --input-bgcolor: #fff;
    --input-focus-color: #d2ecf9;
    --input-field-list-padding: 3px;
    /* table-field */
    --table-field-height: 100px;
    --table-field-header-height: 45px;
    --table-field-body-height: 45px;
    /* parts */
    --alert-color: #aa1f24;
    --required-color: #aa1f24;
    --disabled-color: #165e83;
}

/* スマホ */
@media (max-width: 768px) {
    :root {
        /* icon */
        --icon-font-size: 10px;
        /* input-field */
        --input-font-size: 10px;
        /* contents */
        --contents-header-attention-font-size: 0.5rem;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    font-size: var(--basic-font-size);
    position: relative;
}

a.disabled-link {
    pointer-events: none;
    cursor: default; /* 必要に応じてカーソルをデフォルトに変更 */
}

a.transition-url {
    color: red;
}

a.hidden {
    display: none;
}

.hidden {
    display: none;
}

.header {
    width: 100%;
    height: var(--header-height);
    background-color: var(--header-color);
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
}

main {
    position: absolute;
    width: 100%;
    height: auto;
    top: var(--header-height);
    z-index: 10;
}

/* form */
form {
    width: 100%;
    padding-top: var(--form-field-pt);
    padding-bottom: var(--form-field-pd);
}

form .form-header {
    margin: 0 auto;
    width: 100%;
    height: calc(var(--button-height) + var(--button-pt) + var(--button-pd));
    position: relative;
}

form .form-footer {
    margin: 0 auto;
    margin-top: var(--form-field-mt);
    width: 100%;
    height: calc(var(--button-height) + var(--button-pt) + var(--button-pd));
    position: relative;
}

form .form-footer:has(.preview) {
    display: none;
}

form .button-field.submit,
form .button-field.update,
form .button-field.back,
form .button-field.add,
form .button-field.transition,
form .button-field.preview {
    margin-top: var(--button-pt);
    margin-bottom: var(--button-pd);
    width: var(--button-width);
    height: var(--button-height);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
}

form button.button-field.submit {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

form .button-field.back {
    position: absolute;
    top: 0;
    left: 0;
}

form .button-field.update {
    position: absolute;
    top: 0;
    right: 0;
}

form .button-field.preview {
    position: absolute;
    top: 0;
    right: 0;
}

form .button-field.add {
    position: absolute;
    top: 0;
    right: 0;
}

form .button-field.transition {
    position: absolute;
    top: 0;
    left: 0;
}

form .button-field.hidden {
    display: none;
}

/* container */
.container {
    margin: 0 auto;
    padding: 0 20px;
}

.header .container .title a {
    text-decoration-line: none;
    color: #fff;
    font-weight: bold;
}

.header .container {
    height: 100%;
    display: flex;
    align-items: center;
}

.header .container .title:has(.icon-field) {
    width: var(--header-height);
    height: 100%;
}

.header .container .title a:has(.icon-field) {
    width: 100%;
    height: 100%;
    text-decoration-line: none;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header .container .title a .icon-field {
    width: 80%;
    height: 80%;
    object-fit: cover;
/*    background-color: #fff;
    border: 1px solid #000;
    border-radius: 50px; */
}

/* main */
main .container {
    padding-top: var(--main-mt);
    padding-bottom: var(--main-mt);
    width: 1280px;
    height: auto;
    /* display: flex; */
    justify-content: center;
    font-size: var(--basic-font-size);
}

main .container .contents-field {
    width: 100%;
}

@media (max-width: 1400px) {
    main .container {
        width: 90%;
    }
}

/* contents-field-header */
main .container .contents-field .contents-field-header {
    margin-bottom: var(--basic-tab-md);
    width: 100%;
/*    height: var(--contents-header-height); */
    background-color: var(--contents-bgcolor);
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
main .container .contents-field .contents-field-header.profile {
    padding-left: 20px;
    display: flex;
    justify-content: flex-start;
}
main
    .container
    .contents-field
    .contents-field-header:has(.contents-field-tab) {
    padding: var(--basic-padding);
}

main .container .contents-field .contents-field-header .contents-field-tab {
    padding: var(--basic-padding);
    margin: var(--basic-margin);
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0.5;
}

main
    .container
    .contents-field
    .contents-field-header
    .contents-field-tab.active {
    opacity: 1;
}

main
    .container
    .contents-field
    .contents-field-header
    .contents-field-tab:hover {
    opacity: 1;
}

main .container .contents-field-header:has(.attention) {
    padding-top: var(--contents-header-pt);
    padding-bottom: var(--contents-header-pd);
    height: auto;
}

main .container .contents-field-header .mode.hidden {
    display: none;
}

main .container .contents-field-header .mode {
/*    width: 60%; */
    position: relative;
}

main .container .contents-field-header .attention {
    padding-top: var(--contents-header-attention-pt);
    padding-bottom: var(--contents-header-attention-pd);
    width: 100%;
/*    height: var(--contents-header-attention-height); */
    font-size: var(--contents-header-attention-font-size);
    display: flex;
    justify-content: left;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

main .container .contents-field-header .attention:nth-child(5) {
/*    min-height: 220px; */
}

main .container .contents-field-header .attention .icon-field {
    margin: 3px;
    min-width: 20px;
    min-height: 20px;
    width: 20px;
    height: 20px;
    cursor: default;
    border: 1px solid #ccc;
}

main .container .contents-field-header .attention .icon-field:first-of-type {
    margin-left: 0;
}

main .container .contents-field-header.profile .slash {
    padding-left: 2px;
    padding-right: 2px;
}

/* contents-field-space */
main .container .contents-field-space {
    margin-top: var(--contents-body-mt);
    margin-bottom: var(--contents-body-md);
}

/* contents-field-border */
main .container .contents-field-boder {
    margin-top: var(--contents-body-mt);
    margin-bottom: var(--contents-body-md);
    width: 100%;
    height: 1px;
    border: 1px solid #ccc;
}

/* contents-field-body */
main .container form:not(:has(.contents-field-body)) {
    margin: 0 auto;
    width: 90%;
}

main .container .contents-field {
    width: 100%;
    height: auto;
}

main .container .contents-field .contents-field-body {
    margin-bottom: var(--basic-tab-md);
    padding-top: var(--contents-body-pt);
    padding-bottom: var(--contents-body-pd);
    width: 100%;
    height: auto;
    background-color: var(--contents-bgcolor);
    border: 1px solid #ccc;
}

main .container .contents-field form .contents-field-body {
    padding: 0 5%;
    width: 100%;
}

main .container .contents-field .contents-field-body:last-of-type {
    margin-bottom: 0;
}

/* card */
.card {
    padding-top: var(--card-pt);
    /* padding-bottom: var(--card-pd); */
    height: auto;
    font-size: var(--card-font-size);
}

.card label,
.card a {
    margin-bottom: var(--basic-margin);
    font-size: var(--basic-font-size);
}

.card.border {
    padding: 0;
    margin-top: var(--contents-body-mt);
    margin-bottom: var(--contents-body-md);
    width: 100%;
    height: 1px;
    border: 1px solid #ccc;
}

main .container .contents-field .contents-field-body .card:last-of-type {
    padding-bottom: var(--card-pd);
}

.card .card-header,
.card .card-body {
    /* padding-left: 10%; */
    /* padding-right: 10%; */
    background-color: var(--card-bgcolor);
}

.card .card-header {
    height: var(--card-header-height);
    display: flex;
    justify-content: left;
    align-items: center;
}

.card .card-header:empty {
    height: 0;
    display: none;
}

.card .card-header label {
    width: auto;
    height: 100%;
    font-size: var(--basic-font-size);
}

.card .card-header span {
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .card-header:has(.image-field) {
    height: calc(var(--card-header-height) * 2);
    position: relative;
}

.card .card-header:has(.image-field) .text-field:not(.image-field) {
    padding: var(--basic-padding);
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .card-header .image-field {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card span.required {
    color: var(--required-color);
}

.card span.disabled {
    color: var(--disabled-color);
}

.card span.nounique {
    margin-left: 10px;
    color: var(--alert-color);
}

.card span.message {
    margin-left: 10px;
    color: var(--alert-color);
}

.card .link {
    cursor: pointer;
    color: blue;
}

.card span.hidden {
    display: none;
}

.card .card-body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .card-body .title {
    /* padding-top: calc(var(--card-pt)); */
    width: 20%;
    height: 100%;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.card .card-body .title .input-field {
    margin: 0 auto;
    width: 90%;
    height: var(--card-input-height);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.card .card-body:has(textarea) .title .input-field {
    height: calc(var(--card-input-height) / 4 * 3);
}

.card .card-body .title .input-field.nullable .text-field,
.card .card-body .title .input-field.required .text-field {
    padding-top: 0;
}

.card .card-body .title .input-field .text-field label {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .card-body .title .input-field.hidden {
    display: none;
}

.card .card-body .title:empty {
    display: none;
}

.card .card-body .title .input-field.required {
    color: var(--alert-color);
}

.card .card-body .title .input-field.nullable {
    color: blue;
}

.card .card-body .title .input-field .text-field {
    /* padding-top: var(--input-field-pt); */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.card .card-body .input-field .text-field input {
    padding-left: 2%;
    padding-right: 2%;
    width: 100%;
    min-height: var(--card-input-height);
    height: auto;
    border: 1px solid #ccc;
}

.card .card-body .input-field .text-field input::placeholder {
    padding-left: 2%;
    padding-right: 2%;
    color: var(--basic-color);
    font-size: var(--input-font-size);
}

.card .card-body .body {
    padding-top: calc(var(--card-pt));
}

.card .card-body .body .input-field {
    width: 100%;
    height: var(--card-input-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card .card-body .body .input-field .label {
    cursor: pointer;
}

.card .card-body .body .input-field .attention {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
}

.card .card-body .body .input-field .text-field {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.card .card-body .input-field .text-field input {
    width: 100%;
    min-height: var(--card-input-height);
    height: auto;
    border: 1px solid #ccc;
}

.card.none .card-body .body .input-field .text-field {
    padding-left: 5%;
    padding-right: 5%;
    justify-content: left;
}

.card .card-body .body:has(.input-field) {
    padding-top: var(--card-space-height);
    padding-bottom: var(--card-space-height);
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-left: 1px solid #ccc; */
}

.card .card-body:has(.title:empty) .body:has(.input-field) {
    width: 100%;
    height: 100%;
}

/* image-field */
.image-field {
    padding: var(--basic-padding);
    height: 100%;
}

.image-field img {
    height: 100%;
}

.image-field a {
    width: 100%;
    height: 100%;
    display: block;
}

/* search */
main .container .contents-field .contents-field-body:has(.search-field) {
    padding: 0;
}

.search-field {
    display: flex;
    flex-wrap: wrap;
}

.search-field select {
    padding-right: 5%;
    padding-left: 5%;
}

.search-field .card {
    width: 100%;
    max-width: 300px;
    padding-left: var(--card-pl);
    padding-right: var(--card-pr);
    justify-content: left;
    font-size: var(--basic-font-size);
}

.search-field .card .card-body {
    justify-content: left;
}

.search-field .card .card-body .title .text-field {
    padding: 0;
}

.search-field .card .card-body .title {
    max-width: 80px !important;
    min-width: 80px !important;
}

/* table-field */
.table-field .row-field {
    height: 70px;
    display: flex;
    justify-content: left;
    align-items: start;
    overflow-x: auto;
}

.table-field .row-field .cell-field {
    min-width: 50px;
    height: 60px;
    border: 1px solid #ccc;
    font-weight: bold;
}

.table-field .row-field .cell-field .cell-header {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ccc;
}

.table-field .row-field .cell-field .cell-body {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* attention */
.attention .alert,
.attention.alert {
    color: var(--alert-color);
}

.attention .disabled {
    color: var(--disabled-color);
}

.attention.success {
    color: #008000;
}

.attention .link {
    cursor: pointer;
    color: blue;
}

/* common */
/* input */
input {
    font-size: var(--input-font-size);
    padding: var(--input-padding);
    padding-left: 2%;
    padding-right: 2%;
    background-color: #fff;
}

input::placeholder,
input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
    font-size: var(--input-font-size);
}

input:focus {
    z-index: 10;
    background-color: var(--input-focus-color);
}

input[type="checkbox"] {
    height: var(--basic-checkbox-size);
}

input[type="radio"] {
    height: var(--basic-checkbox-size);
}

input[type="number"] {
    text-align: right;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.view-password {
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    background-color: #eee;
    cursor: pointer;
    user-select: none;
}

select {
    font-size: var(--input-font-size);
    padding: var(--input-padding);
    padding-left: 2%;
    padding-right: 2%;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

select[readonly] {
    user-select: none;
    pointer-events: none;
}

option {
    cursor: pointer;
}

.select-mark,
.suggest-mark {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 1rem;
    cursor: pointer;
    pointer-events: none;
}

.text-field:has(select[readonly]) .select-mark {
    display: none;
}

.suggest-mark {
    opacity: 0.5;
}

.input-field .filter-list ul {
    margin-top: 5px;
    height: auto;
}

.input-field .filter-list ul li {
    margin-top: 1px;
    padding: var(--input-field-list-padding);
    height: calc(var(--basic-font-size) * 1.6);
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
}

ul.relative {
    position: relative;
}

/* sidemenu */
.menu-toggle {
    width: var(--header-icon-width);
    height: var(--header-height);
    cursor: pointer;
    position: absolute;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-toggle img {
    width: var(--icon-scale);
    height: var(--icon-scale);
    fill: #fff;
}

.menu-toggle.active img {
    transform: rotateX(180deg);
}

.sidemenu {
    display: none;
    position: absolute;
    top: var(--sidemenu-top);
    right: var(--sidemenu-right);
    background: rgba(10, 10, 10, 1);
    padding: 5px;
    border: 1px solid #000;
    z-index: 9999;
}

.sidemenu.active {
    position: fixed;
    display: block;
}

.sidemenu:not(.active) {
    display: none;
}

.sidemenu .sidemenu-field {
    width: 20vw;
    height: auto;
}

.sidemenu .sidemenu-field .sidemenu-title {
    width: 100%;
    font-size: var(--sidemenu-title-font-size);
    font-weight: bold;
    text-align: center;
    color: #fff;
}

.sidemenu .sidemenu-field ul.sidemenu-list {
    list-style: none;
    width: 100%;
}

.sidemenu .sidemenu-field ul.sidemenu-list li.sidemenu-item {
    padding: 8px 10px 2px 10px;
    width: 100%;
}

.sidemenu .sidemenu-field ul.sidemenu-list li.sidemenu-item.content_type {
    width: 100%;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: var(--sidemenu-basic-font-size);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidemenu .sidemenu-field ul.sidemenu-list li.sidemenu-item a {
    padding-left: 5%;
    width: 100%;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: var(--sidemenu-basic-font-size);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidemenu .sidemenu-field ul.sidemenu-list li.sidemenu-item a::after {
    content: ">";
    margin-left: auto;
}

.sidemenu .sidemenu-field ul.sidemenu-list li.sidemenu-item a:hover {
    color: red;
}

.sidemenu form {
    padding: 0;
}

.full-width-separator {
    border: none; /* デフォルトの境界線を無効化 */
    border-top: 2px solid #fff; /* 線の色と太さを設定 */
    margin: 0; /* マージンをリセット */
    padding: 0; /* パディングをリセット */
    width: 100vw; /* ビューポート全体の幅に設定 */
    position: relative; /* 必要に応じて相対位置に設定 */
    left: 50%; /* 中央揃えのために左に50%移動 */
    transform: translateX(-50%); /* 左に50%移動させて中央に配置 */
}

/* icon */
.icon-field {
    margin: 0 auto;
    width: clamp(40%, 40%, var(--icon-field));
    height: clamp(var(--icon-field), 40%, 40%);
    cursor: pointer;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-field img {
    width: var(--icon-scale);
    height: var(--icon-scale);
}

.transition-icon-field {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
}

.transition-icon-field .click-field {
    width: 75%;
    height: 100%;
    border: 2px solid black;
    border-radius: 5px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: var(--icon-color);
}

.transition-icon-field .click-field:hover {
    background: var(--icon-color);
    border: 2px solid var(--icon-hover-color);
    cursor: pointer;
}

.transition-icon-field .transition-icon-image {
    width: var(--icon-field);
    height: var(--icon-field);
    display: flex;
    justify-content: center;
    align-items: center;
}

.transition-icon-field .transition-icon-image img {
    width: var(--icon-scale);
    height: var(--icon-scale);
    fill: var(--icon-color);
}

.transition-icon-field .transition-icon-title {
    margin-top: var(--icon-title-space);
    width: 100%;
    font-size: var(--icon-font-size);
    text-align: center;
}

img {
    pointer-events: none;
}

/* iconbadge */
/* ブロック要素にアイコンバッジを表示 */
[data-badge-top-left],
[data-badge-top-right],
[data-badge-bottom-left],
[data-badge-bottom-right] {
    color: #fff;
    display: block;
    position: relative;
    padding: 1em;
    border-radius: 6px;
}

/* 子要素の color を上書き */
[data-badge-top-left] > *,
[data-badge-top-right] > *,
[data-badge-bottom-left] > *,
[data-badge-bottom-right] > * {
    color: #000; /* または、希望する色に設定 */
}

/* アイコン部 */
[data-badge-top-left]:before,
[data-badge-top-right]:before,
[data-badge-bottom-left]:before,
[data-badge-bottom-right]:before {
    position: absolute;
    display: inline-block;
    font-weight: bold;
    background-color: #f00;
    border-radius: 50%;
    font-size: 1em;
    line-height: 1;
    min-width: 1em;
    padding: 5px;
    border: 2px solid #fff;
    box-shadow: 0px 0px 3px #999;
}

[data-badge-top-left]:before {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    content: attr(data-badge-top-left) "";
}

[data-badge-top-right]:before {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    content: attr(data-badge-top-right) "";
}

[data-badge-bottom-left]:before {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
    content: attr(data-badge-bottom-left) "";
}

[data-badge-bottom-right]:before {
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
    content: attr(data-badge-bottom-right) "";
}

/* button */
.button-field {
    background-color: var(--button-bgcolor);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    user-select: none;
    font-size: 14px;
}

button.button-field {
    background-color: var(--button-bgcolor);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    user-select: none;
}

.button-field .icon-field {
    margin: 0;
    padding-left: var(--button-pl);
    padding-right: var(--button-pr);
    width: var(--button-height);
    height: 100%;
    justify-content: left;
}

.button-field .icon-field img {
    width: var(--icon-scale);
    height: var(--icon-scale);
}

/* table */
table {
/*
    font-size: var(--table-font-size);
*/
}

table .icon-field {
    width: auto;
    height: 100%;
}

/* table .icon-field img {
    width: var(--icon-scale);
    height: var(--icon-scale);
} */

table thead tr th .cell {
    padding: var(--input-field-label-padding);
    white-space: nowrap;
}

table tbody tr td .cell {
    white-space: nowrap;
}

table tbody tr td .cell input[type="text"],
table tbody tr td .cell input[type="number"],
table tbody tr td .cell input[type="email"],
table tbody tr td .cell select {
    width: 100%;
    height: 100%;
}

/* card */
.card .card-body .body:has(input.changed) {
    background-color: var(--input-field-checked-bgcolor);
}

.radio-field {
    background-color: #fff;
}

main .container .validate-alert {
    color: #008000;
    display: flex;
    justify-content: center;
    align-items: center;
}

main .container .validate-alert.error {
    color: red;
}

main .container .validate-alert .text-field {
    margin: auto;
    width: 90%;
    height: var(--input-height);
    display: flex;
    justify-content: left;
    align-items: center;
}

main .container .contents-field-body table thead tr th.is_disable,
main .container .contents-field-body table thead tr th.is_delete {
    width: 45px;
}
.cancel-button {
    margin-top: var(--button-pt);
    margin-bottom: var(--button-pd);
    width: var(--button-width);
    height: var(--button-height);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.hidden_qr {
    visibility: hidden;
}
.qr-button {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 150px;
    height: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    background-color: var(--button-bgcolor);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    user-select: none;
}
header div div a div.icon-field img {
    width: 100px !important;
    height: 50px !important;
}