@charset "UTF-8";

@font-face {
    font-family: 'KBFGDisplay';
    font-weight: 300;
    font-display: swap;
    src: url('./../fonts/KBFGDisplayL.woff') format('woff');
}

@font-face {
    font-family: 'KBFGDisplay';
    font-weight: 500;
    font-display: swap;
    src: url('./../fonts/KBFGDisplayM.woff') format('woff');
}

@font-face {
    font-family: 'KBFGDisplay';
    font-weight: 700;
    font-display: swap;
    src: url('./../fonts/KBFGDisplayB.woff') format('woff');
}

@font-face {
    font-family: 'KBFGText';
    font-weight: 300;
    font-display: swap;
    src: url('./../fonts/KBFGTextL.woff') format('woff');
}

@font-face {
    font-family: 'KBFGText';
    font-weight: 500;
    font-display: swap;
    src: url('./../fonts/KBFGTextM.woff') format('woff');
}

@font-face {
    font-family: 'KBFGText';
    font-weight: 700;
    font-display: swap;
    src: url('./../fonts/KBFGTextB.woff') format('woff');
}

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

* {
    margin: 0;
    padding: 0;
    border: 0;
    color: inherit;
    font: inherit;
    vertical-align: baseline;
    outline: 0;
}

html,
body {
    overscroll-behavior: none;
}

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    max-width: 640px;
    margin: 0 auto;
    color: #393735;
    font-weight: 500;
    font-family:
        KBFGText,
        -apple-system,
        BlinkMacSystemFont,
        system-ui,
        Roboto,
        'Helvetica Neue',
        'Segoe UI',
        'Apple SD Gothic Neo',
        'Noto Sans KR',
        'Malgun Gothic',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        sans-serif;
    line-height: 1;
    letter-spacing: -0.03em;
    word-break: break-word;
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
}

b,
strong {
    font-weight: bolder;
}

ol,
ul {
    list-style: none;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

input[type='number'] {
    -moz-appearance: textfield;
}

[type='button'],
[type='submit'],
[type='reset'],
button {
    background: transparent;
    cursor: pointer;
}

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

:disabled {
    cursor: not-allowed !important;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    font-weight: 500;
    vertical-align: middle;
    user-select: none;
}

.button .button-icon {
    margin-left: 8px;
}

.button.solid {
    background-color: #5f5042;
    color: #fff;
}

.button.ghost {
    border: 1px solid #5f5042;
    color: #5f5042;
}

.button.size-sm {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
}

.button.size-md {
    height: 44px;
    padding: 0 14px;
    font-size: 16px;
}

.button.size-lg {
    height: 56px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 18px;
}

.button.size-h48 {
    height: 48px;
    border-radius: 8px;
    font-size: 14px;
}

.button:disabled {
    border-color: #dfdfdf;
    background-color: #dfdfdf;
    color: #98999b;
}

.single-input-text {
    display: inline-block;
    height: 48px;
    padding: 0 16px;
    border-radius: 16px;
    background-color: #fbf9f7;
    font-size: 16px;
    line-height: 24px;
}

.input-checkbox,
.input-radio {
    display: inline-block;
    margin: 0;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: auto 100%;
    vertical-align: middle;
    cursor: pointer;
    appearance: none;
}

.input-checkbox:checked,
.input-radio:checked {
    background-position: -24px 0;
}

.input-checkbox.size-sm,
.input-radio.size-sm {
    width: 20px;
    height: 20px;
}

.input-checkbox.size-sm:checked,
.input-radio.size-sm:checked {
    background-position: -20px 0;
}

.input-checkbox {
    background-image: url(./../images/common/checkbox.svg);
}

.input-radio {
    background-image: url(./../images/common/radio.svg);
}

.input-label {
    display: inline-flex;
    align-items: flex-start;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

.input-label .input-checkbox,
.input-label .input-radio {
    flex: 0 0 auto;
}

.input-label .input-checkbox.size-sm,
.input-label .input-radio.size-sm {
    margin-top: 2px;
}

.input-label-text {
    padding-left: 4px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.input-label-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.input-label-group.gap-sm {
    gap: 12px;
}

.input-image-file {
    position: relative;
}

.input-image-file label {
    display: block;
    position: relative;
}

.input-image-file label:before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.input-image-file input {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
}

.input-image-file .input-image-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.input-image-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 8px;
    border: 1px dashed #5f5042;
    font-size: 16px;
    line-height: 24px;
}

.input-image-placeholder:before {
    content: '';
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
    background: url(./../images/common/ico_plus.svg) no-repeat 0 0/100% 100%;
}

.input-image-preview {
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.input-image-preview:before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.input-image-preview img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.input-image-remove {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    text-indent: 100%;
}

.input-image-remove:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background: url(./../images/common/ico_trashcan.svg) no-repeat 0 0/100% 100%;
    transform: translate(-50%, -50%);
}

.input-image-list {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

.ui-datepicker {
    width: 312px;
    margin-top: 8px;
    padding: 24px 16px 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.18);
}

.ui-datepicker .ui-datepicker-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.ui-datepicker .ui-datepicker-title {
    order: 2;
    width: 112px;
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
    position: static;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev {
    order: 1;
}

.ui-datepicker .ui-datepicker-next {
    order: 3;
}

.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled {
    opacity: 0.4;
}

.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
    position: static;
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-top: 0;
}

.ui-datepicker .ui-datepicker-prev span {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAVUExURQAAAB4gKxsgKh4gLB4gLCAgKiAgMLlUjQUAAAAHdFJOUwDvMH+AMBADz3ZUAAAAKElEQVQI12NgIA4kwFlMonCmogNcUIRYQQZFA4RRwgykCIticw4eAAB1WANbkUVrbQAAAABJRU5ErkJggg==)
        0 0/100% 100% no-repeat;
}

.ui-datepicker .ui-datepicker-next span {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAVUExURQAAAB4gKxsgKh4gLB4gLCAgKiAgMLlUjQUAAAAHdFJOUwDvMIB/MBBjUkRIAAAAJklEQVQI12NgIAKwIZiBCnAmixBC2JEUYWYE01CBWEEki9kYiAMAO9EC1KylMCwAAAAASUVORK5CYII=)
        0 0/100% 100% no-repeat;
}

.ui-datepicker table {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 20px;
}

.ui-datepicker td,
.ui-datepicker th {
    padding: 4px;
}

.ui-datepicker th {
    font-weight: 700;
}

.ui-datepicker td.ui-state-disabled {
    opacity: 0.4;
}

.ui-datepicker td > a,
.ui-datepicker td > span,
.ui-datepicker th > span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    text-align: center;
}

.ui-datepicker td:not(.ui-datepicker-current-day) > a:hover {
    background: #7c7266;
    color: #fff;
    font-weight: 700;
}

.ui-datepicker .ui-datepicker-today > a {
    background: #7c7266;
    color: #fff;
}

.ui-datepicker .ui-datepicker-current-day > a {
    background: #f8b500;
    color: #fff;
    font-weight: 700;
}

.ui-datepicker-multi {
    width: auto !important;
    padding: 24px 8px 8px;
}

.ui-datepicker-multi .ui-datepicker-group {
    padding: 0 8px 8px;
}

.pagination {
    display: flex;
    justify-content: center;
}

.pagination [class^='page-dir'] {
    overflow: hidden;
    width: 32px;
    height: 32px;
    background: url(./../images/common/pagination.png) no-repeat 0 0 / auto 64px;
    white-space: nowrap;
    text-indent: 100%;
}

.pagination .page-dir-first {
    background-position-x: 0;
}

.pagination .page-dir-prev {
    background-position-x: -32px;
}

.pagination .page-dir-next {
    background-position-x: -64px;
}

.pagination .page-dir-last {
    background-position-x: -96px;
}

.pagination span[class^='page-dir'] {
    background-position-y: -32px;
}

.pagination .page-num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin: 0 2px;
    border-radius: 50%;
    color: #6b7684;
    font-weight: 700;
    font-size: 16px;
}

.pagination .page-num.active {
    color: #fff;
    background-color: #f8b500;
}

.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1010;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition:
        visibility 0.4s,
        background-color 0.4s ease;
}

.modal.is-active {
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal.is-active .modal-dialog {
    opacity: 1;
    transform: translateY(0);
}

.modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 240px;
    padding: 32px 16px 24px;
    border-radius: 12px;
    background-color: #fff;
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
    opacity: 0;
    transform: translateY(48px);
}

.modal-dialog .picto {
    margin-bottom: 8px;
}

.modal-dialog .heading {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

.modal-dialog .message {
    margin-top: 4px;
    color: #98999b;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.modal-dialog .action {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 24px;
}

.popup {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1010;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.popup.is-active {
    visibility: visible;
}

.popup-header {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 24px;
}

.popup-heading {
    font-size: 16px;
    line-height: 24px;
}

.popup-body {
    padding: 24px 24px;
}

.popup-close {
    overflow: hidden;
    position: absolute;
    top: 6px;
    right: 12px;
    width: 48px;
    height: 48px;
    background: url(./../images/common/ico_close.svg) no-repeat 50% 50%/24px
        24px;
    white-space: nowrap;
    text-indent: 100%;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 6px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    vertical-align: middle;
}

.status-badge.status-1 {
    background-color: rgba(124, 115, 102, 0.08);
    color: #7c7366;
}

.status-badge.status-2 {
    background-color: rgba(248, 181, 0, 0.08);
    color: #f8b500;
}

.status-badge.status-3 {
    background-color: #f8b500;
    color: #fff;
}

.status-badge.status-danger {
    background-color: rgba(240, 80, 68, 0.08);
    color: #f05044;
}

.product-count-badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 6px;
    border-radius: 6px;
    background-color: #f8b500;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    vertical-align: middle;
}

.product-count-badge:before {
    content: '';
    width: 20px;
    height: 20px;
    margin-right: 4px;
    background: url(./../images/common/ico_shopping_bag.svg) no-repeat 0 0/100%
        100%;
}

#header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 60px;
    padding: 0 24px;
    background-color: #fff;
}

#header .heading {
    display: flex;
    align-items: center;
}

#header .heading > span {
    padding-left: 6px;
    color: #7c7266;
    font-family: 'KBFGDisplay', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
}

#header .logo {
    overflow: hidden;
    width: 121px;
    height: 20px;
    background: url(./../images/common/logo_kb.png) no-repeat 0 0/100% 100%;
    white-space: nowrap;
    text-indent: 100%;
}

#header .hamburger {
    overflow: hidden;
    width: 48px;
    height: 48px;
    margin: 0 -12px 0 auto;
    background: url(./../images/common/ico_hamburger.svg) no-repeat 50% 50%/24px
        24px;
    white-space: nowrap;
    text-indent: 100%;
}

#sidebar {
    visibility: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    background-color: rgba(0, 0, 0, 0);
    transition:
        visibility 0.4s,
        background-color 0.4s ease;
}

#sidebar .inner {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 240px;
    padding: 76px 24px 24px;
    background-color: #fff;
    transform: translateX(100%);
    transition: transform 0.4s ease;
}

#sidebar .greeting {
    position: absolute;
    top: 18px;
    left: 24px;
    font-size: 16px;
    line-height: 24px;
}

#sidebar #gnb {
    margin: 0 -24px;
}

#sidebar .bottom {
    margin-top: auto;
}

#sidebar .close {
    overflow: hidden;
    position: absolute;
    top: 6px;
    right: 12px;
    width: 48px;
    height: 48px;
    background: url(./../images/common/ico_close.svg) no-repeat 50% 50%/24px
        24px;
    white-space: nowrap;
    text-indent: 100%;
}

#sidebar.is-active {
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.5);
}

#sidebar.is-active .inner {
    transform: translateX(0);
}

#gnb a {
    display: block;
    padding: 16px 24px;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
}

#header ~ #container {
    padding-top: 60px;
}

#contents {
    padding: 20px 24px 120px;
    padding: 20px 24px calc(120px + env(safe-area-inset-bottom));
}

.user-card-area + #contents {
    padding-top: 32px;
}

.contents-heading {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}

.contents-heading.size-sm {
    font-size: 18px;
    line-height: 24px;
}

.hr {
    margin: 24px -24px;
    border-top: 3px solid #e9e8e6;
}

.bottom-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 980;
    height: 72px;
    height: calc(72px + env(safe-area-inset-bottom));
    padding: 8px 15px 8px 15px;
    padding: 8px 15px calc(8px + env(safe-area-inset-bottom)) 15px;
    background-color: #fff;
    box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.08);
}

.bottom-bar .button {
    flex: 1;
}

.bottom-bar .button.w-auto {
    flex: 0 0 auto;
}

.bottom-sheet {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 990;
    padding: 32px 24px 8px;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.bottom-sheet.is-active {
    transform: translateY(0);
}

.bottom-sheet .heading {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
}

.bottom-sheet .hr {
    margin: 16px 0;
    border-top: 1px solid #e9e8e6;
}

.bottom-sheet .help {
    position: relative;
    padding-left: 20px;
    color: #98999b;
    font-size: 14px;
    line-height: 20px;
}

.bottom-sheet .help:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 16px;
    height: 16px;
    background: url(./../images/common/hint_ico_gray.svg) no-repeat 0 0/100%
        100%;
}

.bottom-sheet .button-bar {
    display: flex;
    gap: 8px;
    margin: 32px -9px 0;
}

.bottom-sheet .button-bar .button {
    flex: 1;
}

.bottom-sheet .button-bar .button.w-auto {
    flex: 0 0 auto;
}

.input-label + .content-box {
    margin-top: 12px;
}

#footer .top {
    padding: 12px 24px;
    border-top: 1px solid #eee;
}

#footer .top .link {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

#footer .top .link:after {
    content: '';
    width: 20px;
    height: 20px;
    margin-left: 4px;
    background: url(./../images/common/link_ico.svg) no-repeat 0 0/100% 100%;
}

#footer .bottom {
    border-top: 1px solid #eee;
    padding: 32px 24px 152px;
}

#footer .contact p {
    color: #98999b;
    font-size: 14px;
    line-height: 20px;
}

#footer .contact p + p {
    margin-top: 8px;
}

#footer .copyright {
    margin-top: 24px;
    color: #98999b;
    font-size: 12px;
    line-height: 16px;
}

#footer .float-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: fixed;
    right: 8px;
    bottom: calc(80px + env(safe-area-inset-bottom));
}

#footer .float-button {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.16));
}

.form-field {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 10px 16px;
    border-radius: 10px;
    background-color: #fbf9f7;
}

.form-field .label {
    margin-bottom: 4px;
    color: #98999b;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
}

.form-field .value {
    font-size: 16px;
    line-height: 24px;
}

.form-field .input-text,
.form-field .input-textarea {
    display: block;
    background-color: transparent;
    font-size: 16px;
    line-height: 24px;
}

.form-field .input-text::placeholder,
.form-field .input-textarea::placeholder {
    color: #bbb;
}

.form-field .input-text {
    height: 24px;
}

.form-field .input-unit {
    padding-right: 28px;
}

.form-field .unit {
    position: absolute;
    right: 16px;
    bottom: 10px;
    font-size: 16px;
    line-height: 24px;
}

.form-field .input-textarea {
    resize: none;
}

.form-field .input-date {
    padding-right: 24px;
    background: url(./../images/common/ico_calendar.svg) no-repeat top 50% right
        2px/20px 20px;
}

.form-field .input-file {
    display: block;
    position: relative;
}

.form-field .input-file input {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
}

.form-field .input-file:after {
    content: '파일첨부';
    display: inline-flex;
    justify-content: center;
    position: absolute;
    top: -2px;
    right: 0;
    height: 28px;
    padding: 0 8px;
    align-items: center;
    border-radius: 4px;
    background-color: #f8b500;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}

.form-field .input-file.is-attached .input-file-name {
    color: #393735;
}

.form-field .input-file-name {
    display: block;
    overflow: hidden;
    height: 24px;
    padding-right: 78px;
    color: #bbb;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.form-field.disabled {
    background-color: #e9e8e6;
}

.form-fieldset .form-heading {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
}

.form-fieldset * ~ .form-heading {
    margin-top: 40px;
}

.form-fieldset .help {
    margin-bottom: 24px;
    color: #575551;
    font-size: 14px;
    line-height: 20px;
}

.form-fieldset .form-heading + .help {
    margin-top: -12px;
}

.form-fieldset .form-field + .form-field {
    margin-top: 12px;
}

.form-fieldset .field-group .form-field:first-child {
    margin-top: 24px;
}

.form-fieldset .input-image-list {
    margin-top: 16px;
}

.form-fieldset .option-explain {
    width: calc(100% - 24px);
    margin: 8px 0 0 24px;
}

.form-fieldset .hint {
    position: relative;
    margin-top: 16px;
    padding-left: 20px;
    color: #575551;
    font-size: 14px;
    line-height: 20px;
}

.form-fieldset .hint:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 16px;
    height: 16px;
    background: url(./../images/common/hint_ico.svg) no-repeat 0 0/100% 100%;
}

.form-fieldset .hint-box {
    position: relative;
    margin-top: 24px;
    padding: 8px 8px 8px 28px;
    border-radius: 6px;
    background-color: #eee;
    color: #575551;
    font-size: 12px;
    line-height: 18px;
}

.form-fieldset .hint-box:before {
    content: '';
    position: absolute;
    top: 9px;
    left: 8px;
    width: 16px;
    height: 16px;
    background: url(./../images/common/hint_ico.svg) no-repeat 0 0/100% 100%;
}

.terms .heading {
    margin: 16px 0 4px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.terms .sub-heading {
    margin-top: 4px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
}

.terms p {
    color: #575551;
    font-size: 14px;
    line-height: 20px;
}

.greeting-box {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-radius: 16px;
    background-color: #fff9dc;
}

.greeting-box p {
    color: #575551;
    font-size: 16px;
    line-height: 24px;
}

.greeting-box .link {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    height: 34px;
    padding: 0 10px;
    border-radius: 6px;
    background-color: #f8b500;
    color: #fff;
    font-size: 14px;
}

.greeting-box .link:after {
    content: '';
    width: 20px;
    height: 20px;
    background: url(./../images/common/link_chevron.svg) no-repeat 0 0/100% 100%;
}

.greeting-area {
    padding: 8px 20px 24px;
}

.content-box {
    padding: 20px 20px;
    border-radius: 12px;
    background-color: #fbf9f7;
}

.content-box .box-heading {
    margin-bottom: 16px;
    color: #575551;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.content-box .box-heading.bottom-line {
    padding-bottom: 12px;
    border-bottom: 1px solid #e9e8e6;
}

.content-box p {
    color: #575551;
    font-size: 14px;
    line-height: 20px;
}

.content-box p + p {
    margin-top: 12px;
}

.content-box dl {
    display: grid;
    grid-template-columns: 132px auto;
    gap: 8px 0;
    font-size: 14px;
    line-height: 20px;
}

.content-box dd {
    color: #575551;
    text-align: right;
}

.user-info-list dl {
    display: grid;
    grid-template-columns: 96px auto;
    gap: 8px 0;
    border-radius: 0 0 12px 12px;
    background-color: #fff;
    font-size: 14px;
    line-height: 20px;
}

.user-info-list dd {
    color: #575551;
}

.user-card {
    display: flex;
    flex-direction: column;
}

.user-card .heading {
    padding: 8px 20px;
    border-radius: 12px 12px 0 0;
    background-color: #7c7266;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.user-card .user-info-list {
    padding: 20px 20px;
    border-radius: 0 0 12px 12px;
    background-color: #fff;
}

.user-card-area {
    padding: 24px 24px;
    background: linear-gradient(
        180deg,
        rgb(255, 225, 85) 0%,
        rgb(255, 242, 194) 100%
    );
}

.order-info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.order-info .thumb {
    flex: 0 0 108px;
    position: relative;
}

.order-info .thumb:before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.order-info .thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.order-info .metadata {
    flex: 1;
}

.order-info [class*='badge'] {
    margin-bottom: 8px;
}

.order-info .name {
    color: #575551;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
}

.order-info .addition {
    margin-top: 4px;
    color: #575551;
    font-size: 14px;
    line-height: 20px;
}

.order-info-action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.order-info-action .w-full {
    grid-column: span 2;
}

.order-info-list > li + li {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e9e8e6;
}

.result-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0 40px;
    text-align: center;
}

.result-message h1 {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}

.result-message p {
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
}

.result-message .sub {
    margin-top: 8px;
    color: #98999b;
    font-size: 14px;
    line-height: 20px;
}

.result-message .picto {
    margin-top: 24px;
}

.bottom-line-list > li {
    padding-bottom: 24px;
    border-bottom: 1px solid #e9e8e6;
}

.bottom-line-list > li + li {
    margin-top: 24px;
}

.board-list .link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.board-list .link .subject {
    margin-top: 8px;
    color: #575551;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.board-heading {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 32px;
}

.board-detail .status-badge {
    margin-bottom: 8px;
}

.board-detail .input-image-list {
    margin-top: 24px;
}

.board-detail .answer-card {
    margin-top: 40px;
}

.board-content p {
    font-size: 16px;
    line-height: 24px;
}

.board-content img {
    width: 100%;
    height: auto;
    margin-top: 16px;
    border-radius: 8px;
}

.board-content p + img {
    margin-top: 24px;
}

.answer-card {
    display: flex;
    flex-direction: column;
}

.answer-card .heading {
    padding: 8px 20px;
    border-radius: 12px 12px 0 0;
    background-color: #f8b500;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.answer-card p {
    padding: 20px 16px;
    border-radius: 0 0 12px 12px;
    background-color: #fbf9f7;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.caution-box {
    position: relative;
    padding: 14px 24px 14px 56px;
    border-radius: 8px;
    background-color: rgba(239, 68, 82, 0.08);
}

.caution-box:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: url(./../images/common/picto_siren.png) no-repeat 0 0/100% 100%;
}

.caution-box p {
    color: #ef4452;
    font-size: 14px;
    line-height: 20px;
}

#main .section {
    position: relative;
    padding: 24px 24px 78px;
    background-color: #fffdf4;
}

#main .section:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 30px;
    background: url(./../images/main/top_fence.png) repeat-x 50% 0/60px 30px;
}

#main .section .label-heading {
    background-color: #fff;
    color: #ffbb00;
}

#main .section.yellow {
    background-color: #ffe155;
}

#main .section.yellow:before {
    background-image: url(./../images/main/top_fence_yellow.png);
}

#main .section.yellow .box-heading {
    background-color: #fff;
    color: #ffbb00;
}

#main .section:last-child {
    padding-bottom: 40px;
}

#main .label-heading {
    display: inline-flex;
    align-items: center;
    height: 32px;
    margin-bottom: 12px;
    padding: 0 8px;
    border-radius: 8px;
    background-color: #ffbb00;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

#main .disc li {
    position: relative;
    padding-left: 24px;
    color: #575551;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

#main .disc li + li {
    margin-top: 4px;
}

#main .disc li:before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

#main .disc.size-sm li {
    padding-left: 20px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

#main .disc.size-sm li:before {
    top: 7px;
    left: 7px;
    width: 6px;
    height: 6px;
}

#main .box {
    margin-top: 16px;
    padding: 20px 20px;
    border-radius: 16px;
    background-color: #fff9dc;
}

#main .box p {
    color: #575551;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

#main .box p + p,
#main .box p + .disc {
    margin-top: 4px;
}

#main .schedule-box {
    padding: 10px 10px;
    border-radius: 8px;
    background-color: #fff;
}

#main .schedule-box .bar {
    display: flex;
    align-items: center;
}

#main .schedule-box .bar .time {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f8b500;
    color: #fff;
    font-size: 14px;
}

#main .schedule-box .bar .name {
    margin-left: 12px;
    color: #575551;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

#main .schedule-box .bar .date {
    margin-left: 8px;
    color: #98999b;
    font-size: 14px;
    line-height: 20px;
}

#main .schedule-box .product {
    padding: 18px 0 10px;
}

#main .schedule-box .product .img {
    max-width: 204px;
    margin: 0 auto;
}

#main .schedule-box .product .img img {
    width: 100%;
    height: auto;
}

#main .schedule-box .product .items {
    margin-top: 12px;
    color: #f8b500;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

#main .schedule-box .product .info {
    color: #98999b;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

#main .schedule-box + .schedule-box {
    margin-top: 8px;
}

#main .overview {
    color: #7c7266;
    text-align: center;
}

#main .overview .heading {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
}

#main .overview p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
}

#main .overview p.last {
    margin-top: 24px;
    color: #575551;
    font-size: 18px;
    line-height: 24px;
}

#main .detail .dashed-hr {
    margin: 20px 0;
    border-top: 1px dashed #fff;
}

#main .review-box {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 102px;
    border-radius: 16px;
    background: url(./../images/common/picto_memo.png) no-repeat right 20px
        bottom 20px/96px 96px #fff;
    color: #575551;
}

#main .review-box .heading {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

#main .review-box p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
}

#main .review-box .caution {
    margin-top: 8px;
    color: #7c7266;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
}

@keyframes timer_flicker {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

#faq .section {
    margin-top: 40px;
}

#faq .section .heading {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
}

#faq .accordion {
    background-color: #fffdf4;
    border-radius: 8px;
    letter-spacing: -0.06em;
}

#faq .accordion dt {
    position: relative;
    padding: 12px 48px 12px 14px;
    color: #575551;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}

#faq .accordion dt:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: url(./../images/common/ico_chevron_down.svg) no-repeat 0 0/100%
        100%;
}

#faq .accordion dt.is-active:after {
    transform: rotate(180deg);
}

#faq .accordion dd {
    padding: 20px 14px;
    border-top: 1px solid #eee;
}

#faq .accordion ul > li {
    position: relative;
    padding-left: 10px;
    color: #7c7266;
    font-size: 14px;
    line-height: 20px;
}

#faq .accordion ul > li:before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
}

#faq .accordion ul > li + li {
    margin-top: 8px;
}

#faq .accordion ol > li {
    font-size: 14px;
    line-height: 20px;
}

#faq .accordion ol > li:nth-child(1):before {
    content: '① ';
}

#faq .accordion ol > li:nth-child(2):before {
    content: '② ';
}

#faq .accordion ol > li:nth-child(3):before {
    content: '③ ';
}

#faq .accordion + .accordion {
    margin-top: 16px;
}

.blind {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
}

.text-red {
    color: #ef4452 !important;
}

.text-gray {
    color: #7c7266 !important;
}