:root {
    /* 1920/2491 */
    --x10: 0.771rem;
    --x15: 1.15rem;
    --x16: 1.23rem;
    --x20: 1.54rem;
    --x24: 1.85rem;
    --x25: 1.93rem;
    --x28: 2.16rem;
    --x30: 2.31rem;
    --x35: 2.70rem;
    --x40: 3.08rem;
    --x43: 3.31rem;
    --x50: 3.85rem;
    --x100: 7.71rem;
    --x170: 13.1rem;
    --x380: 29.3rem;
}

/*
    ============================================================================
    標準スタイルの上書き
    ============================================================================
*/

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

body,
html {
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

ol,
ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

/*
    ============================================================================
    クラスによらないスタイル
    ============================================================================
*/

html {
    display: grid;
    font-size: 62.5%; /* #useRem */
}

body {
    display: grid;
    min-height: 100vh;
    overflow-y: auto;

    color: #1b1b1b;
    font-size: 1.6rem;
    font-family: "Meiryo", sans-serif;
}

body,
button,
input,
optgroup,
select,
textarea {
    line-height: 1.5; /* #defaultLineHeight */
}

button {
    font-weight: inherit;
    color: inherit;
}

/*
    ============================================================================
    コンポーネント的なスタイル
    ============================================================================
*/

/*
    ボタン

    g-button-box: 通常の立体的なボタン
    g-button-custom: 独自の外観を持つボタン
    g-button-fill: 平坦な四角形のボタン
    g-button-line: 平坦な輪郭線のボタン
    g-button-text: 輪郭や背景を持たないボタン
*/
.g-button-box,
.g-button-custom,
.g-button-fill,
.g-button-line,
.g-button-text {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    border-color: transparent;
    background-color: transparent;
    cursor: pointer;

    text-align: center;
    text-decoration: none;
    color: inherit;
}

.g-button-box {
    border-radius: 4rem;
    box-shadow: 0 3px 6px #00000029;
}

.g-button-custom,
.g-button-text {
    border: none;
    padding: 0;
}



.g-button-box.button-cancel {
    font-size: 2.5rem;
    font-weight: bold;
    border: 0.2rem solid #9d9d9d;
    background-color: #fafafa;
    color: #9d9d9d;
}

.g-button-box.button-accent {
    font-size: 2.5rem;
    font-weight: bold;
    background-color: #ffc834;
    color: #1b1b1b;
}

.g-button-box.button-accent,
.g-letter-spacing-20 {
    /* letter-spacingを使うと文字が中央より左にずれてしまうので、インデントを入れて調節する。 */
    letter-spacing: 2rem;
    text-indent: 2rem;
}

.g-button-box.button-create {
    font-size: 2.5rem;
    font-weight: bold;
    background-color: var(--primary-color-dark);
    color: white;
}

.g-button-box.button-primary {
    border: 0.3rem solid var(--primary-color-dark);
    background-color: #fafafa;
    color: var(--primary-color-dark);
    font-size: 2.5rem;
    font-weight: bold;
}

.g-button-text.button-delete {
    font-size: 2.5rem;
    font-weight: bold;
    color: #ee776d;
}

.g-button-box.button-delete {
    width: 25rem;
    height: 7rem;

    border: 0.2rem solid #ff2a46;
    background-color: white;

    font-size: 2.5rem;
    font-weight: bold;
    color: #ff2a46;

    letter-spacing: 2rem;
    text-indent: 2rem;
}

.g-button-fill.button-pdf,
.g-button-fill.button-search {
    background-color: #ffc834;

    font-size: 2.5rem;
    font-weight: bold;
    color: #1b1b1b;
}

.g-button-fill.button-pdf {
    margin-right: 1.6rem;

    width: 25rem;
    height: 5rem;
    border-radius: 3rem;
}

.g-button-fill.button-search {
    width: 35rem;
    height: 7rem;
    border-radius: 4rem;

    padding-top: 0.2rem; /* #meiryoDescender */

    letter-spacing: 2rem;
    text-indent: 2rem;
}

.g-button-box.button-cancel[aria-disabled="true"],
.g-button-box.button-accent[disabled],
.g-button-box.button-delete[disabled],
.g-button-fill.button-pdf[aria-disabled="true"] {
    /* #disabledStyle (gray color) */
    border-color: transparent;
    background-color: #d8d8d8;
    color: #9d9d9d;
}

.g-anchor-unset {
    text-decoration: none;
    color: inherit;
}



/*
    Comment
*/

.g-comment.g-bullet-panel {
    gap: 0.5rem;
}

.g-comment-textarea {
    width: 40rem;
    height: 10rem;

    font-size: 2.5rem;
}

/*
    [-| 00.0 |+] SpinButton
*/

.g-spin-button {
    display: grid;
    grid-template-columns: 8rem auto 8rem;

    border-radius: 1rem;
}

.g-spin-button > input,
.g-spin-button .minus-button,
.g-spin-button .plus-button {
    border: 0.2rem solid #9d9d9d;
}

.g-spin-button > input {
    appearance: textfield;
    text-align: right;
    width: 100%; /* HACK: (Chrome) これがないとinputのサイズが大きすぎてボタンが指定された幅から溢れてしまう。 */

    padding: 0 3rem;

    border-left: none;
    border-right: none;
    outline-offset: -2px;

    font-size: 6rem;
    font-weight: bold;
    color: #4d4d4d;
}

.g-spin-button .minus-button,
.g-spin-button .plus-button {
    color: white;
    background-color: #1eda9b;
    cursor: pointer;
}

.g-spin-button .minus-button:active,
.g-spin-button .plus-button:active {
    border-top-width: 0.3rem;
    border-bottom-width: 0.1rem;
}

.g-spin-button .minus-button {
    border-right: none;
    border-radius: 0.7rem 0 0 0.7rem;
}

.g-spin-button .plus-button {
    border-left: none;
    border-radius: 0 0.7rem 0.7rem 0;
}

.g-spin-button > input::-webkit-inner-spin-button,
.g-spin-button > input::-webkit-outer-spin-button {
    display: none;
}

/*
    Tag
*/

.g-tag {
    border: 0.3rem solid #9d9d9d;
    border-radius: 1rem;
    background-color: white;

    padding: 0.7rem 1.4rem;

    font-size: 2.3rem;
    font-weight: bold;
    color: #9d9d9d;
}

.g-tagged-row {
    gap: 2rem;
}

.g-tagged-row > .g-tag {
    align-self: flex-start;
}

/*
    [ 00.0 ] ↕ UpDownInput
*/

.g-up-down-input {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, auto);
    column-gap: 1.5rem;
}

.g-up-down-input > label {
    grid-column: 1 / 3;
    place-self: start;
}

.g-up-down-input > input {
    grid-row: 2 / 4;
    grid-column: 1;

    width: 10rem;
    height: 7rem;
    padding: 0.5rem 1rem;

    appearance: textfield;
    text-align: center;

    border: 0.2rem solid #9d9d9d;
    border-radius: 1rem;

    font-size: 3.5rem;
    font-weight: bold;
    color: #4d4d4d;
}

.g-up-down-input .up-button,
.g-up-down-input .down-button {
    width: 3.5rem;
    height: 2.1rem;

    padding: 0;
    border: none;

    transform: scale(1, 0.6);
}

.g-up-down-input .up-button:active,
.g-up-down-input .down-button:active {
    transform: scale(1, 0.6) translateY(0.1rem);
}

.g-up-down-input .up-button {
    grid-row: 2;
    grid-column: 2;
}

.g-up-down-input .down-button {
    grid-row: 3;
    grid-column: 2;
    align-self: end;
}

.g-up-down-input > input::-webkit-inner-spin-button,
.g-up-down-input > input::-webkit-outer-spin-button {
    display: none;
}

.g-up-down-input[aria-disabled="true"] {
    /* #disabledStyle (opacity) */
    opacity: 0.4;
}

/*
    その他
*/

.g-alert {
    margin-bottom: 2rem 0;
    padding: 2rem;
    border-radius: 1rem;
    background-color: #ff2a46;
    font-size: 2rem;
    color: white;
}

.g-required-tag {
    width: 10.5rem;
    height: 4rem;
    background-color: #ff2a46;
    border-radius: 3rem;
}



/* UIの読み取り専用状態の表現 (無効状態は除く) */
.g-number-input:read-only:not(:disabled),
.g-text-input:read-only:not(:disabled),
.g-comment-textarea:read-only:not(:disabled),
.g-textarea:read-only:not(:disabled) {
    /* #readOnlyStyle */
    border-color: #ededed;
}

/* UIの無効状態の表現 */
.g-disabled-visual:disabled,
.g-disabled-visual[data-disabled] {
    /* #disabledStyle (grayscale & opacity) */
    filter: grayscale(1) opacity(0.4);
    cursor: default;
    user-select: none;
}



/*
    ============================================================================
    部品スタイル
    ============================================================================
*/

.g-border-gray-rounded {
    border: 0.2rem solid #9d9d9d;
    border-radius: 1rem;
}

/* 要素を行方向に並べる (→, flexbox) */
.g-flex-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

/* 要素を列方向に並べる (↓, flexbox) */
.g-flex-column {
    display: flex;
    flex-flow: column nowrap;
}



/* TailwindCSS風のユーティリティクラス */

/* layout */
.flex, .flex-row, .flex-col { display: flex }
.flex-row { flex-direction: row }
.flex-col { flex-direction: column }
.grid { display: grid }
.absolute { position: absolute }
.relative { position: relative }

.flex-1 { flex: 1 }
.inset-0 { inset: 0px }

/* flex/grid alignment/justification */
.items-center { align-items: center }
.items-start { align-items: start }
.items-end { align-items: end }
.self-center { align-self: center }
.self-end { align-self: end }
.self-start { align-self: start }
.justify-center { justify-content: center }
.justify-end { justify-content: flex-end }
.justify-start { justify-content: flex-start }
.justify-self-center { justify-self: center }
.place-self-center { place-self: center }
.place-self-start { place-self: start }

.overflow-auto { overflow: auto }
.overflow-clip { overflow: clip }
.overflow-y-auto { overflow-y: auto }
.overflow-y-clip { overflow-y: clip }
.overflow-x-clip { overflow-x: clip }

/* size #sizeUtilityClasses */
.my-30 { margin-block: 3rem }

.mx-10 { margin-inline: 1rem }
.mx-20 { margin-inline: 2rem }
.mx-30 { margin-inline: 3rem }

.mt-10 { margin-block-start: 1rem }
.mt-20 { margin-block-start: 2rem }
.mt-30 { margin-block-start: 3rem }
.mt-40 { margin-block-start: 4rem }
.mt-50 { margin-block-start: 5rem }
.mt-60 { margin-block-start: 6rem }

.mb-20 { margin-block-end: 2rem }

.ml-10 { margin-inline-start: 1rem }
.ml-20 { margin-inline-start: 2rem }
.ml-30 { margin-inline-start: 3rem }
.ml-40 { margin-inline-start: 4rem }
.ml-50 { margin-inline-start: 5rem }
.ml-60 { margin-inline-start: 6rem }

.my-\[5px\] { margin-block: 0.5rem }
.mx-\[5px\] { margin-inline: 0.5rem }
.mx-auto { margin-inline: auto }
.mt-auto { margin-block-start: auto }
.mb-\[6px\] { margin-bottom: 0.6rem }
.ml-auto { margin-inline-start: auto }

.py-10 { padding-block: 1rem }
.py-20 { padding-block: 2rem }
.py-30 { padding-block: 3rem }
.py-40 { padding-block: 4rem }
.py-50 { padding-block: 5rem }
.py-60 { padding-block: 6rem }

.px-10 { padding-inline: 1rem }
.px-20 { padding-inline: 2rem }
.px-30 { padding-inline: 3rem }
.px-40 { padding-inline: 4rem }
.px-50 { padding-inline: 5rem }
.px-60 { padding-inline: 6rem }

.pb-30 { padding-bottom: 3rem }

.border-0 { border-width: 0 }
.border-\[2px\] { border-width: 0.2rem; border-style: solid }
.border-\[\#d8d8d8\] { border-color: #d8d8d8 }
.g-border-primary-dark { border-color: var(--primary-color-dark); border-style: solid }

.rounded-\[4px\] { border-radius: 0.5rem }
.rounded-\[5px\] { border-radius: 0.5rem }
.rounded-\[6px\] { border-radius: 0.6rem }
.rounded-10 { border-radius: 1rem }
.rounded-20 { border-radius: 2rem }
.rounded-30 { border-radius: 3rem }
.rounded-full { border-radius: 9999px }

.w-20 { width: 2rem }
.w-30 { width: 3rem }
.w-40 { width: 4rem }
.w-50 { width: 5rem }
.w-60 { width: 6rem }
.w-70 { width: 7rem }
.w-80 { width: 8rem }
.w-\[250px\] { width: 25rem }
.w-\[280px\] { width: 28rem }
.w-\[350px\] { width: 35rem }
.w-full { width: 100% }
.w-max { width: max-content }
.max-w-full { max-width: 100% }

.h-\[5px\] { height: 0.5rem }
.h-20 { height: 2rem }
.h-30 { height: 3rem }
.h-40 { height: 4rem }
.h-50 { height: 5rem }
.h-60 { height: 6rem }
.h-70 { height: 7rem }
.h-80 { height: 8rem }
.h-\[100px\] { height: 10rem }
.h-\[200px\] { height: 20rem }
.h-full { height: 100% }

/* text */
.break-all { word-break: break-all }
.break-keep { word-break: keep-all }
.leading-tight { line-height: 1.2 }
.leading-normal { line-height: 1.5 }
.text-center { text-align: center }
.text-end { text-align: end }
.text-start { text-align: start }
.text-overflow-ellipsis { text-overflow: ellipsis }
.text-overflow-unset { text-overflow: unset }
.whitespace-pre-line { white-space: pre-line }
.whitespace-pre-wrap { white-space: pre-wrap }

/* others */
.appearance-none { appearance: none }
.cursor-default { cursor: default }
.cursor-pointer { cursor: pointer }
.resize-vertical { resize: vertical }
.select-none { user-select: none }

/* (無効要素を半透明化するため) */
.disabled\:opacity-40:disabled { opacity: 0.4 }

/* (インタラクティブ要素を生成しつつ不可視化するため) */
.invisible { appearance: unset; position: absolute; width: 0; height: 0; visibility: hidden }

.contain-\[content\] { contain: content }
.contain-\[inline-size\] { contain: inline-size }
.contain-\[strict\] { contain: strict }

/* ギャップ */
.gap-\[4px\] { gap: 0.4rem }
.gap-\[5px\] { gap: 0.5rem }
.gap-10 { gap: 1rem }
.gap-20 { gap: 2rem }
.gap-30 { gap: 3rem }
.gap-40 { gap: 4rem }
.gap-50 { gap: 5rem }
.gap-60 { gap: 6rem }

/* 背景 (bg: background) */
.bg-white { background-color: white }
.bg-\[\#9d9d9d\] { background-color: #9d9d9d }
.bg-\[\#ededed\] { background-color: #ededed }
.bg-\[\#f3f3f3\] { background-color: #f3f3f3 }
.bg-\[\#f4f4f4\] { background-color: #f4f4f4 }
.bg-\[\#fafafa\] { background-color: #fafafa }
.bg-\[\#ff2a46\] { background-color: #ff2a46 }
.bg-\[\#ffc834\] { background-color: #ffc834 }
.bg-\[\#1eda9b\] { background-color: #1eda9b }

.g-bg-primary-dark { background-color: var(--primary-color-dark) }

/* 前景 (fg: foreground) */
.text-white { color: white }
.text-\[\#1b1b1b\] { color: #1b1b1b }
.text-\[\#4d4d4d\] { color: #4d4d4d }
.text-\[\#9d9d9d\] { color: #9d9d9d }
.text-\[\#d8d8d8\] { color: #d8d8d8 }
.text-\[\#ff2a46\] { color: #ff2a46 }
.text-\[\#1eda9b\] { color: #1eda9b }

.g-fg-primary-dark { color: var(--primary-color-dark) }
.g-fg-primary-light { color: var(--primary-color-light) }

/* フォント */
.text-15 { font-size: 1.5rem }
.text-16 { font-size: 1.6rem }
.text-17 { font-size: 1.7rem }
.text-18 { font-size: 1.8rem }
.text-19 { font-size: 1.9rem }
.text-20 { font-size: 2rem }
.text-21 { font-size: 2.1rem }
.text-22 { font-size: 2.2rem }
.text-23 { font-size: 2.3rem }
.text-25 { font-size: 2.5rem }
.text-28 { font-size: 2.8rem }
.text-30 { font-size: 3rem }
.text-35 { font-size: 3.5rem }
.text-40 { font-size: 4rem }

.font-normal { font-weight: 400 }
.font-bold { font-weight: 700 }

/* 中央寄せ (flexbox) */
.g-center {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

/*
    ============================================================================
    ページやコンポーネントのスタイル
    ============================================================================
*/

/*
    ----------------------------------------------
    ローディング
    ----------------------------------------------
*/

#app-container[data-loading]::before {
    content: "";
    z-index: 9;

    position: fixed;
    top: 0; left: -18rem; right: 0;
    border-bottom: 1.2rem dashed #ffc834;
    filter: drop-shadow(1px 2px 6px #00000033);
    animation: linear infinite loading-animation;
    animation-duration: 1s;
}

@keyframes loading-animation {
    0% { transform: translate(0%, 0px); }
    100% { transform: translate(18rem, 0px); }
}

/*
    ----------------------------------------------
    ● バレット
    ----------------------------------------------
*/

.g-bullet-panel {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}

.g-bullet-panel .g-bullet-heading {
    font-size: 2.5rem;
    font-weight: bold;
    color: #4d4d4d;
}

[data-theme="dark"] .g-bullet-panel .g-bullet-heading {
    color: inherit;
}

.g-bullet-panel .g-bullet-prefixed::before {
    content: "●";
}

.g-bullet-with-heading-items-end .g-bullet-heading {
    align-items: end;
}

/*
    ----------------------------------------------
    [ ] チェックボックス
    ----------------------------------------------
*/

.g-checkbox-container .check-icon {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    position: relative;

    border: 0.2rem solid #9d9d9d;
    border-radius: 0.5rem;

    user-select: none;
}

.g-checkbox-container [data-checkbox-input] {
    appearance: unset;
    width: 5rem;
    height: 5rem;
    position: absolute;
}

.g-checkbox-container .check-label {
    margin-left: 1.3rem;
}

.g-checkbox-container[aria-checked="true"] .check-icon {
    border-color: #1eda9b;
    background-color: #effffb;
}

.g-checkbox-container[aria-checked="true"] .check-label {
    color: #1eda9b;
}

.g-checkbox-container[aria-disabled="true"] .check-icon {
    /* #disabledStyle (grayscale & opacity) */
    filter: grayscale(1) opacity(0.4);
}

.g-checkbox-container[data-readonly] .check-icon {
    /* #readOnlyStyle */
    background-color: white;
    border-color: #ededed;
    border-width: 0.3rem;
}

.g-checkbox-container[data-size="70"] .check-icon,
.g-checkbox-container[data-size="70"] [data-checkbox-input] {
    width: 7rem;
    height: 7rem;
}

[data-theme="dark"] .g-checkbox-container:not([aria-checked="true"]) .check-label {
    color: white;
}

/*
    ----------------------------------------------
    FormDialog
    ----------------------------------------------
*/

.g-form-dialog {
    background-color: white;
    border-radius: 1rem;
}

.g-form-dialog .g-form-dialog-header {
    background-color: #03b988;
    border-radius: 1rem 1rem 0 0;

    display: flex;
    align-items: center;

    padding: 1rem 1rem 0 4rem;
}

.g-theme-2 .g-form-dialog-header {
    height: 6rem;
}

.g-form-dialog .g-form-dialog-title {
    font-size: 3.5rem;
    font-weight: bold;

    color: white;
}

.g-form-dialog .g-form-dialog-heading {
    font-size: 3rem;
}

.g-form-dialog .g-form-dialog-contents {
    margin: 3.5rem 3rem 0 3rem;
}

.g-submit-cancel-footer {
    gap: 5rem;
    padding: 5rem;
}

.g-submit-cancel-footer .cancel-button,
.g-submit-cancel-footer .submit-button {
    width: 35rem;
    height: 7rem;

    border-radius: 4rem;

    font-size: 2.5rem;
    font-weight: bold;
}

.g-submit-cancel-footer .submit-button {
    background-color: #ffc834;

    letter-spacing: 2rem;
    text-indent: 2rem;
}

.g-submit-cancel-footer .cancel-button[disabled],
.g-submit-cancel-footer .submit-button[disabled] {
    /* #disabledStyle (gray color) */
    background-color: #d8d8d8;
    color: #9d9d9d;
    border-color: transparent;
}

/*
    ----------------------------------------------
    〇 ラジオボタン
    ----------------------------------------------
*/

.g-radio .radio-icon {
    width: 7rem;
    height: 7rem;
    flex-shrink: 0;
    position: relative;

    border: 0.2rem solid #9d9d9d;
    border-radius: 7rem;
    background-color: white;

    user-select: none;
}

.g-radio [data-radio-input] {
    appearance: unset;
    width: 7rem;
    height: 7rem;
    position: absolute;
}

.g-radio .radio-label {
    font-size: 3.5rem;
    font-weight: bold;
    color: #4d4d4d;
}

.g-radio[aria-selected="true"] .radio-icon {
    border-color: #1eda9b;
    background-color: #effffb;
}

.g-radio[aria-selected="true"] .radio-circle {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;

    border-radius: 5rem;
    background-color: #1eda9b;
}

.g-radio[aria-selected="true"] .radio-label {
    color: #1eda9b;
}

.g-radio[data-readonly]:not([data-disabled]) .radio-icon {
    /* #readOnlyStyle */
    border-color: #ededed;
    background: white;
}

/*
    ----------------------------------------------
    セレクト  [   ▼]
    ----------------------------------------------
*/

.g-select {
    border: 0.2rem solid #9d9d9d;
    border-radius: 1rem;
    background-color: white; /* #unsetUaStyle (Firefox) */
}
.g-select.border-0 {
    border-width: 0;
}

.g-select,
.g-select > option {
    font-weight: bold;
    color: #4d4d4d;
}

.g-select.select-large {
    width: 50rem;
    height: 10rem;
    padding: 2rem 3rem;
}

.g-select.select-large,
.g-select.select-large > option {
    font-size: 3.5rem;
}

.g-select[data-readonly] {
    /* #readOnlyStyle */
    appearance: unset;
    border-color: #ededed;
    cursor: default;
}
.g-select[data-readonly]:disabled {
    opacity: unset; /* #unsetUaStyle */
}

/*
    ----------------------------------------------
    スイッチ  (〇  )
    ----------------------------------------------
*/

.g-switch {
    position: relative;
    gap: 0.2rem;
}

.g-switch .switch-label {
    font-size: 2.5rem;
    font-weight: bold;
    color: #4d4d4d;
}

.g-switch .switch-box {
    width: 14.2rem;
    height: 7.2rem;
    border-radius: 3.6rem;
    background-color: #d8d8d8;

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.g-switch .switch-thumb {
    margin: 1rem;
    position: relative;
    left: 0;

    width: 5.2rem;
    height: 5.2rem;
    border-radius: 5.2rem;
    background-color: white;

    transition: left 0.2s;
}

.g-switch .switch-input {
    appearance: unset;
    width: 14.2rem;
    height: 7.2rem;
    position: absolute;
}

.g-switch[aria-checked="true"] .switch-box {
    background-color: #1eda9b;
}

.g-switch[aria-checked="true"] .switch-thumb {
    /* 14.2rem - 5.2rem - 2 * 1rem */
    left: 7rem;
    transition: left 0.3s;
}

/*
    ----------------------------------------------
    音声入力
    ----------------------------------------------
*/

.g-listening-indicator {
    display: inline-block
}

.g-listening-indicator::after {
    content: "...";
    display: inline-block;
    width: 1.5em;
    text-align: start;
    animation: listening-indicator-animation running 3s infinite;
}

@keyframes listening-indicator-animation {
    0% { content: "..." }
    33% { content: "." }
    67% { content: ".." }
}

.g-listening-border[data-speech-input-listening] {
    border-color: var(--primary-color-dark, #03b988);
    outline-color: var(--primary-color-dark, #03b988);
}

.g-listening-outline[data-speech-input-listening] {
    outline: 2px solid var(--primary-color-dark, #03b988);
}

/*
    ----------------------------------------------
    ヘッダー
    ----------------------------------------------
*/

.g-header {
    padding-right: 3.2rem; /* #headerPaddingRight */
}

.g-header-bordered {
    border-bottom: 1rem solid var(--primary-color-dark);
}

.g-header-shadow {
    box-shadow: 0px 3px 6px #00000029;
}

.g-header-sticky {
    position: sticky;
    top: 0;
    z-index: 3;
}

.g-menu-grip,
.g-header-menu-grip {
    background-color: #03b988;
    border-radius: 0 0 3rem 0;
    box-shadow: 0px 5px 6px #00000040;
}
.g-header-menu-grip {
    margin-bottom: 2rem;
    align-self: start;
    flex-shrink: 0;
}

/* #search_grip */
.g-header .search-grip {
    margin-left: 5.5rem;
    margin-bottom: 2rem;

    width: 17rem;
    height: 7rem;

    background-color: #4d4d4d;
    border-radius: 0 0 3rem 3rem;
    box-shadow: 0px 5px 10px #00000040;

    font-size: 2.5rem;
    font-weight: bold;
    color: #fafafa;
}

.g-header .login-user-display .g-down-angle {
    width: 1.6rem;
    height: 1.2rem;
}

.g-header .login-user-display .g-down-angle path {
    stroke: var(--primary-color-dark);
}

/*
    Pager
*/

.g-pager {
    display: flex;
    align-items: center;
    gap: 2rem;
    user-select: none;
}

.g-pager a {
    text-decoration: none;
}

.g-pager a:not([href]),
.g-button-pager .neighbor-link[disabled],
.g-button-pager .page-link[disabled] {
    cursor: initial;
}

.g-pager .page-link {
    width: 5rem;
    height: 5rem;
    border-radius: 5rem;
    place-self: center;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0.1rem solid #4d4d4d;
    background-color: #4d4d4d;

    font-size: 2rem;
    color: white;
    text-align: center;
}

.g-pager .page-link[data-current="true"]:not([href]) {
    border-color: #4d4d4d;
    background-color: white;
    color: #4d4d4d;
}

.g-pager .neighbor-link .g-left-angle,
.g-pager .neighbor-link .g-right-angle {
    display: block;
    width: 2.4rem;
    height: 1.6rem;
}

.g-pager .neighbor-link .g-left-angle path,
.g-pager .neighbor-link .g-right-angle path {
    stroke: #4d4d4d;
    stroke-width: 0.2rem;
}

.g-pager .neighbor-link:not([href]) .g-left-angle path,
.g-pager .neighbor-link:not([href]) .g-right-angle path {
    stroke: #9d9d9d;
}

/* 画面下部に固定表示されるページャのパネル

   right, bottom をリストのpaddingに合わせて設定する */
.g-floating-pager {
    position: sticky;
    padding: 0 1.6rem;
    height: 7rem;
    background: white;
    border-radius: 1rem;
    box-shadow: -2px -2px 6px #00000029;
    z-index: 1;
}

/*
    ソート方向アイコン (↓↑)
*/

.g-sort-direction-icon {
    width: 1.2rem;
    height: 2rem;
}
.g-sort-direction-icon .sort-arrow {
    fill: var(--primary-color-light);
}
.g-sort-direction-icon:not([data-sort-direction="asc"]) .sort-arrow[data-arrow="down"],
.g-sort-direction-icon:not([data-sort-direction="desc"]) .sort-arrow[data-arrow="up"] {
    visibility: hidden;
}

/*
    ----------------------------------------------
    ログインページ
    ----------------------------------------------
*/

.g-password-input {
    padding: 0.2rem 0.4rem;
    border: 0.2rem solid #9d9d9d;
    border-radius: 1rem;

    font-size: 2.5rem;
    font-weight: bold;
    color: #4d4d4d;
}

/*
    ----------------------------------------------
    メニュー
    ----------------------------------------------
*/

#menu-drawer .menu-panel[data-panel="children"] {
    --primary-color-dark: #03b988;
}
#menu-drawer .menu-panel[data-panel="institution"] {
    --primary-color-dark: #5ac617;
}
#menu-drawer .menu-panel[data-panel="master"] {
    --primary-color-dark: #4da5d3;
}

#menu-drawer .menu-panel-header {
    border-bottom: 0.3rem solid #e3e3e3;
}

#menu-drawer .menu-panel-body {
    grid-template-columns: 35rem 7rem;
    align-content: start;
}

#menu-drawer .menu-index-button {
    padding-left: 5.5rem;
    justify-content: start;
}
#menu-drawer .menu-panel[data-panel="master"] .menu-index-button {
    padding-left: 5rem;
}

#menu-drawer .menu-create-button {
    place-content: center;
    gap: 0.3rem;
}

#menu-drawer [aria-disabled="true"]:is(.menu-index-button, .menu-create-button),
#menu-drawer .menu-create-button[disabled] {
    /* #disabledStyle (grayscale & opacity) */
    filter: grayscale(1) opacity(0.4);
    cursor: default;
}



#menu-drawer {
    animation: slide-in ease-out 0.07s;
}

@keyframes slide-in {
    0% { transform: translate(-30vw, 0) }
    100% { transform: translate(0, 0) }
}



/*
    ----------------------------------------------
    一覧ページのテンプレート
    ----------------------------------------------
*/

.g-list-page-template {
    margin: 0;
}

.g-list-page-template .g-header {
    position: sticky;
    top: 0;

    margin-bottom: 1rem;
}

.g-list-page-template .page-title {
    margin-left: 5rem;
}

.g-list-page-template .list {
    padding: 3rem;
}

.g-list-page-template .header-cell,
.g-list-page-template .row,
.g-list-page-template .data-cell:not(.flex-1) {
    /* フレックスボックスの大きさによらず拡縮しない。 */
    flex: 0 0 auto;
}

.g-list-page-template .g-pager {
    margin-bottom: 3rem;
    margin-right: 3rem;
}

.g-list-page-template .header-row,
.g-list-page-template .row {
    padding-left: 5.5rem;
    gap: 5rem;
}

.g-list-page-template .row {
    padding-right: 2.4rem;
}

.g-list-page-template .header-row {
    margin: 0 3rem;

    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color-light);
}

.g-list-page-template .header-cell {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.8rem;
}

.g-list-page-template .header-cell {
    justify-content: flex-start;
}

/* #list_data_row */
.g-list-page-template .row {
    height: 9rem;

    justify-content: flex-start;
    text-align: left;

    background-color: white;
    border-radius: 1rem;
    box-shadow: 0px 3px 6px #00000029;

    font-size: 3rem;
    font-weight: bold;
    color: #4d4d4d;
}

/*
    ========
*/

.g-list-of-children :is(.header-row, .row) :is(.name, [data-column="name"]),
.g-list-of-children :is(.header-row, .row) :is(.home, [data-column="home"]) {
    width: 24rem;
    line-height: 1.2;
}

.g-list-of-children :is(.header-row, .row) .updated-at {
    width: 15rem;
    line-height: 1.2;
}

/* #updated_at_cell */
.g-list-of-children .row .updated-at {
    text-align: center;
    white-space: pre-line;
    font-size: 2.5rem;
    font-weight: normal;
    color: #1b1b1b;
}

/*
    ----------------------------------------------
    カレンダー・日計表
    ----------------------------------------------
*/

/* 矢印の大きさと色 */
.g-daily-records-header .g-down-angle,
.g-daily-records-header .g-left-angle,
.g-daily-records-header .g-right-angle,
.g-date-select .g-down-angle,
.g-date-select .g-left-angle,
.g-date-select .g-right-angle {
    width: 1.5rem;
    height: 1.2rem;
}

.g-daily-records-header .g-down-angle path,
.g-daily-records-header .g-left-angle path,
.g-daily-records-header .g-right-angle,
.g-date-select .g-down-angle path,
.g-date-select .g-left-angle path,
.g-date-select .g-right-angle {
    stroke: #03b988;
}

/*
    ==============================================
    modal dialog
    ==============================================
*/

body[data-modal-is-open],
body[data-signage] {
    overflow: clip;
}

.ReactModalPortal {
    /* https://github.com/reactjs/react-modal/issues/782#issuecomment-1456196610 */
    position: absolute; width: 1px; height: 1px;
}

.g-modal-dialog-overlay,
.g-modal-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;

    background: #1b1b1b66;

    overscroll-behavior: contain;
}

.g-modal-dialog-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}



/* モーダルメニュー */
.g-modal-menu-overlay {
    top: var(--x100);
}

/*
    ----------------------------------------------
    react-datepicker
    ----------------------------------------------
*/

.react-datepicker {
    border: 0.1rem solid #9d9d9d !important;
    border-radius: 1rem !important;
    box-shadow: 2px 2px 3px #00000029;
}

.react-datepicker-popper .react-datepicker,
.g-date-picker-inline .react-datepicker,
.react-datepicker .react-datepicker-year-header {
    font-family: inherit;
    font-size: 2.5rem;
    font-weight: bold;
    color: inherit;
}

.react-datepicker .react-datepicker-year-header {
    border-radius: 1rem 1rem 0 0;
}

.react-datepicker .react-datepicker__month-wrapper {
    display: flex;
    gap: 1rem;
}

.react-datepicker .react-datepicker__month {
    margin: 1rem 2rem;
}

.react-datepicker .react-datepicker__month .react-datepicker__month-text,
.react-datepicker .react-datepicker__month .react-datepicker__quarter-text {
    margin: 0.4rem;
    padding: 0.5rem 1rem;
    width: 8rem;

    text-align: right;
    color: #1b1b1b;
}

.react-datepicker .react-datepicker__month .react-datepicker__month-text.react-datepicker__month--selected,
.react-datepicker .react-datepicker__month .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected {
    color: white;
}

/* ヘッダーの年月の横にある左右アイコンのコンテナ。
   ヘッダーの内部ではなくカレンダーの直下にabsoluteで配置されている */
.react-datepicker .react-datepicker__navigation {
    width: 8rem;
    height: 4rem;
    top: calc(var(--react-datepicker-navigation-t));
}
.react-datepicker .react-datepicker__navigation--previous {
    left: calc(var(--react-datepicker-navigation-x));
}
.react-datepicker .react-datepicker__navigation--next {
    right: calc(var(--react-datepicker-navigation-x));
}
.react-datepicker .react-datepicker__navigation-icon::before {
    width: 1.6rem;
    height: 1.6rem;
    border-color: #9d9d9d;
}
.react-datepicker {
    --react-datepicker-navigation-x: 2rem;
    --react-datepicker-navigation-t: 0.2rem;
}
.g-datetime-picker-calendar {
    --react-datepicker-navigation-x: 5rem;
}
.g-month-picker-calendar {
    --react-datepicker-navigation-x: 3rem;
    --react-datepicker-navigation-t: 0.5rem;
}

.react-datepicker .react-datepicker__year-read-view--down-arrow,
.react-datepicker .react-datepicker__month-read-view--down-arrow,
.react-datepicker .react-datepicker__month-year-read-view--down-arrow {
    border-color: #9d9d9d;
    height: 2rem;
    width: 2rem;
}

.react-datepicker .react-datepicker__header {
    border-radius: 1rem 1rem 0 0;
    border-bottom: 1px solid #9d9d9d;
    background-color: #ededed;
}

.g-month-picker-popper .react-datepicker__header {
    height: 5rem;
}

.react-datepicker .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
    border-top-right-radius: 1rem;
}

.react-datepicker__triangle {
    display: none;
}



.react-datepicker__input {
    border-radius: 1rem;
    color: #4d4d4d;
}
:where(.react-datepicker__input) {
    border: 0.2rem solid #9d9d9d;
}

.react-datepicker-wrapper .react-datepicker__close-icon::after {
    background: unset;
    color: #4d4d4d;
}

.react-datepicker-popper {
    color: #1b1b1b;
}

.react-datepicker .react-datepicker-time__input input[type="time"] {
    border: 0.2rem solid #9d9d9d;
    border-radius: 1rem;
    padding: 0.5rem 1rem;

    font-size: 2.5rem;
    font-weight: bold;
    color: inherit;
    text-align: center;
}

.react-datepicker,
.react-datepicker :is(.react-datepicker__month-container, .react-datepicker__children-container) {
    width: 100%;
}
.g-datetime-picker-calendar {
    width: 50rem;
}

.g-date-picker-inline .react-datepicker__header {
    height: 9rem;
}

.react-datepicker .react-datepicker__current-month {
    font-size: 2rem;
    color: #4d4d4d;
}

.react-datepicker .react-datepicker__day {
    font-weight: normal;
}

.react-datepicker .react-datepicker__day-name,
.react-datepicker .react-datepicker__day,
.react-datepicker .react-datepicker__time-name {
    width: 5rem;
    line-height: 1.4;
    color: #4d4d4d;
}

.react-datepicker .react-datepicker__day--outside-month {
    color: #9d9d9d;
}

.react-datepicker .react-datepicker__day--selected,
.react-datepicker .react-datepicker__day--keyboard-selected {
    font-weight: bold;
    color: white;
}

.react-datepicker__day--selected:focus-visible,
.react-datepicker__day--keyboard-selected:focus-visible {
    outline: 0.2rem dashed #9d9d9d;
}

.react-datepicker .react-datepicker__day--disabled,
.react-datepicker .react-datepicker__month-text--disabled,
.react-datepicker .react-datepicker__quarter-text--disabled,
.react-datepicker .react-datepicker__year-text--disabled {
    color: #ededed;
}

.react-datepicker .react-datepicker__day:hover,
.react-datepicker .react-datepicker__month-text:hover,
.react-datepicker .react-datepicker__quarter-text:hover,
.react-datepicker .react-datepicker__year-text:hover {
    color: white;
    background-color: #9d9d9d;
}

.react-datepicker .react-datepicker__input-time-container {
    margin: 0;
    padding: 1rem;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    color: #4d4d4d;
}

.react-datepicker__input:read-only:not(:disabled) + .react-datepicker__close-icon {
    /* 読み取り専用のとき × (値のクリア) ボタンが出ないようにする */
    display: none;
}



.g-date-picker-inline .react-datepicker__current-month {
    margin-bottom: 0.8rem;
}



/* 日付ピッカー類の入力欄の既定のサイズ */
.react-datepicker__input {
    padding: 1rem 2rem;
    width: 28rem;
    height: 7rem;
    font-size: 2.5rem;
    font-weight: bold;
}
.g-datetime-picker-input {
    width: 32rem;
}
.react-datepicker__input:read-only:not(:disabled) {
    /* #readOnlyStyle */
    border-color: #ededed;
    border-width: 0.3rem;
    cursor: default;
}



/*
    ----------------------------------------------
    search
    ----------------------------------------------
*/

.g-search-modal-overlay,
.g-pdf-batch-menu-overlay {
    top: 0;
}

.g-search-modal-contents,
.g-pdf-batch-menu-modal-content {
    background-color: #4d4d4d;
    color: white;

    position: fixed;
    left: 0;
    right: 0;
    z-index: 4;
}



#daily-records-index-page .pdf-button[aria-disabled="true"],
#personal-records-index-page .pdf-button[aria-disabled="true"],
#personal-records-index-page .sugata-button[aria-disabled="true"] {
    /* #disabledStyle (gray color) */
    background-color: #d8d8d8;
    color: #9d9d9d;
    border-color: transparent;
}

#daily-records-index-page .button-delete[aria-disabled="true"],
#personal-records-index-page .button-delete[aria-disabled="true"] {
    /* #disabledStyle (gray color) */
    color: #d8d8d8;
}

#daily-records-index-page .row[aria-selected="true"],
#personal-records-index-page .row[aria-selected="true"] {
    position: relative;
    background: #ffc83433;
}

#daily-records-index-page .row[aria-selected="true"]::after,
#personal-records-index-page .row[aria-selected="true"]::after {
    content: " ";
    background-image: url("/static/images/multiselect-icon-filled.svg");

    position: absolute;
    left: 2.1rem;

    width: 4.5rem;
    height: 4.5rem;
    background-size: 4.5rem 4.5rem;
}




.g-search-modal-contents .g-bullet-panel {
    gap: 0.3rem 0;
}

.g-search-modal-contents .g-bullet-heading {
    font-size: 2rem;
}

/* 検索パネル内の日付ピッカー類は小さめかつ枠なし (黒背景のため) にする */
.g-search-modal-contents .react-datepicker__input {
    padding: 0.5rem 1rem;
    border: none;
    width: 28rem;
    height: 4rem;
    font-size: 2rem;
    font-weight: normal;
}



/*
    ----------------------------------------------
    掲示板
    ----------------------------------------------
*/

.g-board-page,
#board-index-page,
#board-edit-modal,
#board-view-modal {
    --primary-color-dark: #5ac617;
    --primary-color-light: #bde2a6;
}

.g-text-nowrap {
    /* overflow-x-clipと併用すること。要素はdisplay: blockである必要がある */
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
}

.g-inline-slim {
    line-height: 1;
    white-space: nowrap;
    word-break: keep-all;
}

.g-inline-fat {
    line-height: 1.5;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    word-break: unset;
}

.g-text-center {
    /* #meiryoDescender */
    margin-block: 0.1em -0.1em;
}



/* 既定のスタイルや汎用スタイルのオーバーライド */

.g-theme-2,
.g-board-page,
#board-index-page,
#board-edit-modal,
#board-view-modal {
    /* #defaultLineHeight */
    line-height: 1;
}

/* 立体感があってボーダーを持つボタン */
.g-theme-2 .g-button-box.g-button-line,
.g-theme-2 .g-button-box.button-cancel {
    border-width: 0.3rem;
}

.g-theme-2 .g-bullet-panel,
.g-board-page .g-bullet-panel {
    font-size: 2.8rem;
    font-weight: bold;
}
.g-theme-2 .g-bullet-heading,
.g-board-page .g-bullet-heading {
    color: #9d9d9d;
    font-size: 2rem;
    font-weight: bold;
}
.g-theme-2 .g-bullet-panel .indent,
.g-board-page .g-bullet-panel .indent {
    padding-inline: 2rem;
}

.g-theme-2 .g-tag,
.g-board-page .g-tag {
    border-width: 0.2rem;
    font-weight: normal;
}

.g-theme-2 .g-checkbox-container .g-check-mark,
.g-board-page .g-checkbox-container .g-check-mark {
    width: 2.5rem !important;
    height: 2.5rem !important;
}
.g-theme-2 .g-checkbox-container .check-icon,
.g-board-page .g-checkbox-container .check-icon {
    width: 4.5rem;
    height: 4.5rem;
}
.g-theme-2 .g-checkbox-container [data-checkbox-input],
.g-board-page .g-checkbox-container [data-checkbox-input] {
    width: 3.9rem;
    height: 3.9rem;
}
.g-theme-2 .g-checkbox-container .check-label,
.g-board-page .g-checkbox-container .check-label {
    font-size: 3rem;
}

.g-theme-2 .g-radio .radio-icon {
    width: 4.8rem;
    height: 4.8rem;
}
.g-theme-2 .g-radio .radio-circle {
    width: 3rem;
    height: 3rem;
}
.g-theme-2 .g-radio [data-radio-input] {
    width: 0;
    height: 0;
}
.g-theme-2 .g-radio .radio-label {
    font-size: 3rem;
}

.g-theme-2 .g-select,
.g-theme-2 .g-select > option,
.g-board-page .g-select,
.g-board-page .g-select > option {
    font-weight: normal;
}



.g-theme-2 button:disabled,
.g-board-page button:disabled {
    cursor: default;
}



/* 一覧 */

/* #search_grip */
#board-index-page :is(.search-grip, .check-tab) {
    margin-left: 5.5rem;
    margin-bottom: 2rem;

    width: 17rem;
    height: 7rem;

    background-color: #4d4d4d;
    border-radius: 0 0 3rem 3rem;
    box-shadow: 0px 5px 10px #00000040;

    font-size: 2.5rem;
    font-weight: bold;
    color: #fafafa;
}
#board-index-page .check-tab[data-checked] {
    background-color: #1eda9b;
    color: #fafafa;
}

#board-index-page .g-header {
    padding-right: unset;
}
#board-index-page .g-header .page-title,
#board-index-page .g-header .header-top-row {
    padding-right: 3.2rem; /* #headerPaddingRight */
}

#board-list-header {
    position: relative;
    margin-left: calc(7rem + 47.5rem);
    margin-top: 1rem;
    margin-right: 5.2rem;
    padding-bottom: 0.5rem;
}
#board-list-header::after {
    /* ヘッダー行の下部に影をつけるため、同じ幅のafter要素に影を持たせる */
    content: "";
    position: absolute; /* relative to #board-list-header */
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: transparent;
    box-shadow: 0 3px 6px #00000029;
}

#board-index-page .category-button {
    width: 47.5rem;
    height: 9rem;
    padding-left: 5rem;
    padding-top: 0.5rem;
    justify-content: start;
    border: 0.5rem solid white;
    border-radius: 0.6rem;
    font-size: 2.8rem;
    font-weight: bold;
}
#board-index-page .category-button[data-selected] {
    background-color: var(--primary-color-dark);
    color: white;
}
#board-index-page .category-button:not([data-selected]) {
    background-color: #ededed;
    color: #4d4d4d;
}

#board-index-page .header-row {
    padding-left: 10rem;
}
#board-index-page .data-row {
    padding-left: 2rem;
}

#board-index-page .header-cell,
#board-index-page .data-cell {
    flex: 0 0 auto;
}

#board-index-page .header-cell {
    display: flex;
    justify-content: flex-start;
}

/* #list_data_row */
#board-index-page .data-row {
    padding-right: 2.4rem;

    min-width: 90rem;
    height: 9rem;

    justify-content: flex-start;
    text-align: left;

    background-color: white;
    border-radius: 1rem;
    box-shadow: 0px 3px 6px #00000029;

    font-size: 3rem;
}
#board-index-page .data-row:not([data-is-unread]) {
    color: #9d9d9d;
}
#board-index-page .data-row[data-is-unread] {
    font-weight: bold;
    color: #4d4d4d;
}

#board-index-page .data-cell[data-column="is-pinned"] {
    width: 3rem;
    margin-right: -4rem;
}
#board-index-page .header-cell[data-column="title"],
#board-index-page .data-cell[data-column="title"] {
    flex: 1;
    width: 0;
}
#board-index-page .header-cell[data-column="created-by"],
#board-index-page .data-cell[data-column="created-by"] {
    width: 15rem;
}
#board-index-page .header-cell[data-column="category"],
#board-index-page .data-cell[data-column="category"] {
    width: 15rem;
}
#board-index-page .header-cell[data-column="updated-at"],
#board-index-page .data-cell[data-column="updated-at"] {
    width: 13.5rem;
}

#board-index-page .text-cell {
    overflow: clip;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
}

#board-index-page .category-box {
    padding: 0.6rem 1rem 0.4rem 1rem;
    border: 0.2rem solid currentColor;
    border-radius: 1.5rem;
}

/* #updated_at_cell */
#board-index-page .data-cell[data-column="updated-at"] {
    text-align: center;
    white-space: pre-line;
    line-height: 1.2;
}

#posts-panel::after {
    /* ページャーの後方に白の背景がみえるのを避けるため、リスト下部に同じ背景色のボックスを配置している */
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 11rem;
    background-color: #dde2dd;
}

#search-modal-content .g-radio:not([aria-selected="true"]) .radio-label {
    color: white;
}



/* 編集・閲覧モーダル */

.g-board-post-modal {
    box-shadow: 0px 3px 6px #00000029;
}

.g-board-post-modal .board-post-modal-header {
    height: 6rem;
    padding-inline: 4rem;
    background-color: var(--primary-color-dark);
    border-radius: 1rem 1rem 0 0;
}

.g-board-post-modal .board-post-modal-body {
    width: 140rem;
    max-height: calc(min(90vh, 100rem));
    overflow-y: auto;

    border-radius: 0 0 1rem 1rem;
}



/* 閲覧 */

#board-view-modal .view-separator {
    margin-block: 2.3rem 3.7rem;
    border-top: 1px solid #d8d8d8;
    border-bottom: none;

    width: 100%;
    height: 0;
    border-inline: none;
}



/*
    ----------------------------------------------
    カレンダー
    ----------------------------------------------
*/

#calendar-month-view-page,
#calendar-week-view-page {
    min-width: 140rem;
}

.g-calendar-page,
.g-schedule-page,
.g-schedule-modal {
    --primary-color-dark: #5ac617;
    --primary-color-light: #bde2a6;
    --sunday-color: #ee776d;
    --saturday-color: #6283c1;
    line-height: 1;
}

.g-calendar-page .g-header .menu-grip {
    margin-bottom: unset;
    place-self: start;
}



/* カレンダー 月表示

    mv: month-view
    cmv: calendar-month-view */

.g-calendar-mv {
    contain: layout style;
}

.g-calendar-mv-header,
.g-calendar-mv .cmv-week-row,
.g-calendar-mv .cmv-day-cell {
    /* 要素の横幅を内容によらず計算する。セルに長いテキストが含まれている場合にグリッド全体の横幅が増大するのを防ぐため */
    contain: inline-size;
}

/* 罫線 */
.g-calendar-mv .cmv-weekday-cell:not(:first-child) {
    border-left: 2px solid #d8d8d8;
}
.g-calendar-mv-body {
    border-top: 2px solid #d8d8d8;
    border-left: 2px solid #d8d8d8;
}
.g-calendar-mv .cmv-day-cell {
    border-bottom: 2px solid #d8d8d8;
    border-right: 2px solid #d8d8d8;
}

.g-calendar-mv .cmv-day-cell {
    display: table-cell;
    min-height: 17.5rem;
}
.g-calendar-mv .cmv-day-cell .day-heading {
    font-size: 1.6rem;
    font-weight: bold;
}

/* 当日・週末・祝日 */
.g-calendar-mv .day-heading[data-status="sun-like"]:not([data-today]),
.g-calendar-mv .holiday-heading {
    color: var(--sunday-color);
}
.g-calendar-mv .day-heading[data-status="saturday"]:not([data-today]) {
    color: var(--saturday-color);
}
.g-calendar-mv .day-heading[data-today] {
    border-radius: 3rem;
    background-color: var(--primary-color-dark);
    color: white;
}
.g-calendar-mv .day-heading[data-status="sun-like"][data-today] {
    background-color: var(--sunday-color);
}
.g-calendar-mv .day-heading[data-status="saturday"][data-today] {
    background-color: var(--saturday-color);
}

.g-calendar-mv .cmv-schedule-cell {
    padding-block: calc((4rem - 1.5em) / 2);
}
.g-calendar-mv .cmv-schedule-cell > .border-left {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 0.5rem;
}

/* 月の範囲外 */
.g-calendar-mv .cmv-day-cell[data-out-of-month] {
    opacity: 0.4;
}
.g-calendar-mv .cmv-day-cell[data-out-of-month] .day-heading {
    font-weight: normal;
}

.g-calendar-mv .cmv-schedule-cell[data-is-recurring] {
    padding-right: 2rem;
}
.g-calendar-mv .cmv-schedule-cell[data-is-recurring]::after {
    content: " ";
    background: url("/static/images/recurring-icon.svg");
    background-repeat: no-repeat;
    position: absolute;
    top: calc((4rem - 1.6rem) / 2);
    right: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
}



/* カレンダー 週表示

   wv: week-view
   cwv: calendar-week-view */

.g-calendar-wv-header,
.g-calendar-wv-body {
    contain: layout style;
}

/* グリッドの罫線 */
.g-calendar-wv-header {
    border-top: 2px solid #d8d8d8;
}
.g-calendar-wv-header .cwv-cell.cwv-header1-cell {
    border-right-color: #bde2a6;
}
.g-calendar-wv-header,
.g-calendar-wv-body {
    border-left: 2px solid #d8d8d8;
}
.g-calendar-wv .cwv-cell {
    border-bottom: 2px solid #d8d8d8;
    border-right: 2px solid #d8d8d8;
}
.g-calendar-wv-body .cwv-row-header-cell:not([data-last]) {
    border-bottom: none;
}

/* ヘッダー */
/* 当日・週末・祝日 */
.g-calendar-wv-header .day-heading {
    width: 3rem;
    height: 3rem;
}
.g-calendar-wv-header .day-heading[data-status="sun-like"]:not([data-today]),
.g-calendar-wv-header .holiday-heading {
    color: var(--sunday-color);
}
.g-calendar-wv-header .day-heading[data-status="saturday"]:not([data-today]) {
    color: var(--saturday-color);
}
.g-calendar-wv-header .day-heading[data-today] {
    border-radius: 3rem;
    background-color: var(--primary-color-dark);
    color: white;
}
.g-calendar-wv-header .day-heading[data-status="sun-like"][data-today] {
    background-color: var(--sunday-color);
}
.g-calendar-wv-header .day-heading[data-status="saturday"][data-today] {
    background-color: var(--saturday-color);
}



.g-calendar-wv .cwv-row-header-cell {
    /* #cwv_row_header_width */
    width: 8rem;
    font-size: 1.6rem;
    font-weight: bold;
}

.g-calendar-wv-body,
.g-calendar-wv .cwv-row,
.g-calendar-wv .cwv-cell {
    /* 要素の横幅を内容によらず計算する。セルに長いテキストが含まれている場合にグリッド全体の横幅が増大するのを防ぐため */
    contain: inline-size;
}

/* 終日行 */
.g-calendar-wv .cwv-schedule {
    padding-inline: 1rem;
    padding-block: calc((4rem - 1.5em) / 2);
    height: 4rem;
    line-height: 1.5;
}
.g-calendar-wv .cwv-schedule > .border-left {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 0.5rem;
}

/* 本体 */
.g-calendar-wv .cwv-hour-row-cell {
    height: 6rem;
}
.g-calendar-wv .cwv-schedule-card {
    contain: inline-size;
    padding: 0.8rem 1rem 0.8rem 0.7rem;
    font-size: 1.6rem;
    line-height: 1.25;
    word-break: break-all;

    /* #cwv_body_pointer_events (親要素の pointer-events: none をキャンセルする) */
    pointer-events: all;
}
.g-calendar-wv .cwv-schedule-card > .border-left {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 0.5rem;
}

/* 繰り返し予定のアイコン */
.g-calendar-wv .cwv-schedule[data-is-recurring]::after,
.g-calendar-wv .cwv-schedule-card[data-is-recurring]::after {
    content: " ";
    background: url("/static/images/recurring-icon.svg");
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
}



/* 予定の編集・閲覧モーダル */

.g-schedule-modal {
    box-shadow: 0px 3px 6px #00000029;
}

.g-schedule-modal .schedule-modal-header {
    height: 6rem;
    padding-inline: 4rem;
    background-color: var(--primary-color-dark);
    border-radius: 1rem 1rem 0 0;
}

.g-schedule-modal .schedule-modal-body {
    width: 160rem;
    max-height: calc(min(90vh, 80rem));

    border-radius: 0 0 1rem 1rem;
}

.g-schedule-modal .view-separator {
    border-top: 1px solid #d8d8d8;
    border-bottom: none;

    width: 100%;
    height: 0;
    border-inline: none;
}
#schedule-view-modal .view-separator {
    margin-block: 2.3rem 3.7rem;
}

.g-schedule-modal .update-info-tag {
    padding: 0.7rem 1rem 0.3rem;
    border: 0.2rem solid #9d9d9d;
    border-radius: 0.5rem;
}



#schedule-edit-modal .g-button-list-item:not(:first-child) {
    border-top: 1px solid #bdbdbd;
}
#schedule-edit-modal .g-button-list-item:not(:disabled):hover {
    background: #d4e6f7;
}



/*
    ----------------------------------------------
    サイネージ
    ----------------------------------------------
*/

@keyframes signage-slide-in {
    0% { transform: translate(100%, 0); }
    100% { transform: translate(0, 0); }
}

.g-signage-scroll-area {
    --scrollbar-color-thumb: #415cb5;
    --scrollbar-color-track: #415cb533;
    --scrollbar-width: thin;
}

@supports (scrollbar-width: auto) {
    .g-signage-scroll-area {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}