@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

main {
    display: block;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

img {
    border-style: none;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto;
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

address,
details,
picture {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

/* --------------------
 Styles
-------------------- */
:root {
    --fs10: 0.625rem;
    --fs11: 0.6875rem;
    --fs12: 0.75rem;
    --fs13: 0.8125rem;
    --fs14: 0.875rem;
    --fs15: 0.9375rem;
    --fs16: 1rem;
    --fs17: 1.0625rem;
    --fs18: 1.125rem;
    --fs19: 1.1875rem;
    --fs20: 1.25rem;
    --fs21: 1.3125rem;
    --fs22: 1.375rem;
    --fs23: 1.4375rem;
    --fs24: 1.5rem;
    --fs25: 1.5625rem;
    --fs26: 1.625rem;
    --fs27: 1.6875rem;
    --fs28: 1.75rem;
    --fs29: 1.8125rem;
    --fs30: 1.875rem;
    --fs31: 1.9375rem;
    --fs32: 2rem;
    --fs33: 2.0625rem;
    --fs34: 2.125rem;
    --fs35: 2.1875rem;
    --fs36: 2.25rem;
    --fs37: 2.3125rem;
    --fs38: 2.375rem;
    --fs39: 2.4375rem;
    --fs40: 2.5rem;
    --container-width: 1400px;
    --c-pad: 1.25rem;
    --duration: 0.35s;
    --cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --header-height: 70px;
    --color-black: #000000;
    --color-black-rgb: 0, 0, 0;
    --color-blue: #145ab1;
    --color-blue-rgb: 20, 90, 177;
    --color-navy: #161d5c;
    --color-navy-rgb: 22, 29, 92;
    --color-sky-blue: #6bc7e0;
    --color-sky-rgb-blue: 107, 199, 224;
    --color-gray: #9e9e9e;
    --color-gray-rgb: 158, 158, 158;
    --color-light-gray: #b2b2b2;
    --color-light-rgb-gray: 178, 178, 178;
    --color-silver: #cccccc;
    --color-silver-rgb: 204, 204, 204;
    --color-red: #ff0000;
    --color-red-rgb: 255, 0, 0;
    --color-off-white: #ebebeb;
    --color-off-rgb-white: 235, 235, 235;
    --color-white: #ffffff;
    --color-white-rgb: 255, 255, 255;
}

@media (min-width: 768px) {
    :root {
        --c-pad: 30px;
    }
}

@media (min-width: 992px) {
    :root {
        --header-height: 150px;
    }
}

html {
    overflow-y: scroll;
}

@media (max-width: 767px) {
    html {
        font-size: 4.2666666667vw;
    }
}

@media (max-width: 991px) {
    html.-scroll-locked {
        overflow: hidden;
    }
}

body {
    color: var(--color-black);
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", YuGothic, "游ゴシック体", "Yu Gothic", "游ゴシック", Meiryo, sans-serif;
    font-size: 0.875rem;
    line-break: normal;
    line-height: 1.6;
    margin: 0;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (min-width: 768px) {
    body {
        font-size: var(--fs16);
    }
}

body.-scroll-locked {
    bottom: auto;
    left: 0;
    position: fixed;
    right: 0;
    top: auto;
}

* {
    box-sizing: border-box;
}

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

img {
    height: auto;
    max-width: 100%;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
}

p {
    overflow-wrap: break-word;
}

header,
footer,
main,
nav,
section {
    display: block;
}

button {
    color: inherit;
    cursor: pointer;
}

picture,
figure,
figcaption {
    display: block;
    margin: 0;
}

address {
    font-style: normal;
}

[tabindex="-1"]:focus {
    outline: 0;
}

/* --------------------
 Utils
-------------------- */
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1239px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1240px) {
    .hidden-lg {
        display: none !important;
    }
}
/* --------------------
 Layout
-------------------- */
.layout {
    overflow-x: clip;
    padding: var(--header-height) 0 0;
}

.layout-container {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap-reverse;
    gap: 60px 0;
    margin: 0 auto 100px;
    max-width: calc(var(--container-width) + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 992px) {
    .layout-container {
        flex-wrap: nowrap;
    }
}

.layout-side {
    width: 100%;
}

@media (min-width: 992px) {
    .layout-side {
        width: 220px;
    }
}

@media (min-width: 1240px) {
    .layout-side {
        width: 250px;
    }
}

.layout-main {
    width: 100%;
}

@media (min-width: 992px) {
    .layout-main {
        padding: 0 0 0 65px;
        width: calc(100% - 220px);
    }
}

@media (min-width: 1240px) {
    .layout-main {
        width: calc(100% - 250px);
    }
}

.layout--mypage .layout-container {
    display: block;
    margin: 0 auto 3.75rem;
    max-width: calc(1080px + var(--c-pad)*2);
}

@media (min-width: 768px) {
    .layout--mypage .layout-container {
        margin: 0 auto 60px;
    }
}

.layout--mypage .layout-main {
    padding-left: 0;
    width: 100%;
}

.layout--mypage .com-page-head:before {
    left: 0;
    right: 0;
}

.layout--mypage .com-search {
    display: none;
}

.layout--guest {
    padding: 60px 0;
}

.layout--guest .layout-container {
    display: block;
    margin: 0 auto;
}

.layout--guest .layout-main {
    padding-left: 0;
    width: 100%;
}

/* --------------------
 Commons
-------------------- */
.com-search {
    display: block;
    margin: 0;
    position: relative;
}

@media (min-width: 992px) {
    .com-search {
        display: none;
    }
}

.com-search:has(.search) {
    background-color: var(--color-navy);
    padding: 0.625rem var(--c-pad);
}

@media (min-width: 768px) {
    .com-search:has(.search) {
        padding: 10px var(--c-pad);
    }
}

.com-search .search {
    display: block;
    margin: 0;
    position: relative;
}

.com-search .search form {
    display: block;
    margin: 0;
    position: relative;
}

.com-search .search input {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    background-color: var(--color-off-white);
    border: var(--color-off-white);
    border-radius: 0.5rem;
    display: block;
    font-size: var(--fs16);
    font-weight: 400;
    height: 2.5rem;
    letter-spacing: 0.075em;
    line-height: 1.4;
    padding: 0 2.75rem 0 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .com-search .search input {
        border-radius: 8px;
        font-size: var(--fs14);
        height: 40px;
        padding: 0 44px 0 16px;
    }
}

.com-search .search input::placeholder {
    color: var(--color-gray);
}

.com-search .search input::-webkit-input-placeholder {
    color: var(--color-gray);
}

.com-search .search input::-moz-placeholder {
    color: var(--color-gray);
}

.com-search .search input:-ms-input-placeholder {
    color: var(--color-gray);
}

.com-search .search input:-moz-placeholder {
    color: var(--color-gray);
}

.com-search .search input:focus {
    background-color: var(--color-white);
    color: var(--color-black);
}

.com-search .search button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    bottom: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 2.5rem;
}

@media (min-width: 768px) {
    .com-search .search button {
        width: 40px;
    }
}

.com-search .search button:before {
    background-color: var(--color-gray);
    bottom: 0.125rem;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: auto;
    top: 0.125rem;
    width: 0.0625rem;
}

@media (min-width: 768px) {
    .com-search .search button:before {
        bottom: 2px;
        top: 2px;
        width: 1px;
    }
}

.com-search .search button img {
    width: 1.5rem;
}

@media (min-width: 768px) {
    .com-search .search button img {
        width: 24px;
    }
}

.com-button {
    align-items: center;
    background-color: var(--color-blue);
    border: 0.0625rem solid var(--color-blue);
    border-radius: 0.9375rem;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs14);
    font-weight: 500;
    height: 1.875rem;
    justify-content: center;
    letter-spacing: 0.075em;
    line-height: 1.2;
    max-width: 15.625rem;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
    width: 100%;
}

@media (min-width: 768px) {
    .com-button {
        border-radius: 15px;
        border-width: 1px;
        height: 30px;
        max-width: 250px;
    }
}

.com-button:after {
    background-color: var(--color-white);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
    display: inline-block;
    height: 0.5rem;
    margin: 0 0 0 0.25em;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 0.4375rem;
}

@media (min-width: 768px) {
    .com-button:after {
        height: 8px;
        width: 7px;
    }
}

.com-button:focus {
    background-color: var(--color-white);
    color: var(--color-blue);
}

.com-button:focus:before, .com-button:focus:after {
    background-color: var(--color-blue);
}

@media (hover: hover) and (pointer: fine) {
    .com-button:hover {
        background-color: var(--color-white);
        color: var(--color-blue);
    }

    .com-button:hover:before, .com-button:hover:after {
        background-color: var(--color-blue);
    }
}

.com-button--navy {
    background-color: var(--color-navy);
}

.com-button--navy:focus {
    background-color: var(--color-white);
    color: var(--color-navy);
}

.com-button--navy:focus:before, .com-button--navy:focus:after {
    background-color: var(--color-navy);
}

@media (hover: hover) and (pointer: fine) {
    .com-button--navy:hover {
        background-color: var(--color-white);
        color: var(--color-navy);
    }

    .com-button--navy:hover:before, .com-button--navy:hover:after {
        background-color: var(--color-navy);
    }
}

.com-button--center {
    margin-left: auto;
    margin-right: auto;
}

.com-button--back:before {
    background-color: var(--color-white);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    content: "";
    display: inline-block;
    height: 0.5rem;
    margin: 0 0.25em 0 0;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 0.4375rem;
}

@media (min-width: 768px) {
    .com-button--back:before {
        height: 8px;
        width: 7px;
    }
}

.com-button--back:after {
    display: none;
}

.com-button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.com-button:disabled:before, .com-button:disabled:after {
    display: none;
}

.com-history {
    background-color: rgba(var(--color-black-rgb), 0.05);
    padding: 1.625rem 0;
}

@media (min-width: 768px) {
    .com-history {
        padding: 26px 0;
    }
}

.com-history-container {
    margin: 0 auto;
    max-width: calc(1080px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.com-history__title {
    font-size: var(--fs20);
    font-weight: 900;
    letter-spacing: 0.3em;
    line-height: 1.4;
    margin: 0 0 1.5rem;
    padding: 0 0 0.125rem 0.125rem;
    position: relative;
}

@media (min-width: 768px) {
    .com-history__title {
        margin: 0 0 32px;
        padding: 0 0 2px 2px;
    }
}

.com-history__title:before {
    background: linear-gradient(to right, var(--color-blue) 9.375rem, var(--color-silver) 9.375rem);
    bottom: -0.1875rem;
    content: "";
    display: block;
    height: 0.1875rem;
    left: 0;
    position: absolute;
    right: 0;
    width: auto;
}

@media (min-width: 768px) {
    .com-history__title:before {
        background: linear-gradient(to right, var(--color-blue) 150px, var(--color-silver) 150px);
        bottom: -3px;
        height: 3px;
    }
}

.com-history__slider__item {
    height: 100%;
}

.com-history__slider__item__link {
    background-color: var(--color-white);
    border: 0.0625rem solid var(--color-blue);
    border-radius: 0.625rem;
    color: inherit;
    display: block;
    height: 100%;
    padding: 0.875rem 0.75rem 1.25rem;
    text-decoration: none;
    transition: opacity var(--duration) var(--cubic) 0s;
}

@media (min-width: 768px) {
    .com-history__slider__item__link {
        border: 1px solid var(--color-blue);
        border-radius: 10px;
        padding: 14px 12px 20px;
    }
}

.com-history__slider__item__link__fig {
    margin: 0 0 0.875rem;
}

@media (min-width: 768px) {
    .com-history__slider__item__link__fig {
        margin: 0 0 14px;
    }
}

.com-history__slider__item__link__fig img {
    aspect-ratio: 1/1;
    height: auto;
    object-fit: contain;
    object-position: center;
    width: 100%;
}

.com-history__slider__item__link__name {
    font-size: var(--fs18);
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    word-break: break-all;
}

@media (min-width: 768px) {
    .com-history__slider__item__link__name {
        font-size: var(--fs20);
        margin: 0 0 8px;
    }
}

.com-history__slider__item__link__price {
    font-size: var(--fs14);
    font-weight: 500;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .com-history__slider__item__link__price {
        font-size: var(--fs16);
    }
}

.com-history__slider__item__link__price .--small {
    font-size: var(--fs10);
    margin: 0 0 0 0.125em;
}

.com-history__slider__item__link:focus {
    opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
    .com-history__slider__item__link:hover {
        opacity: 0.65;
    }
}

.com-history .splide__list {
    align-items: stretch;
    height: auto;
}

.com-history .splide__slide {
    padding: 0 0.0625rem;
}

@media (min-width: 768px) {
    .com-history .splide__slide {
        padding: 0 1px;
    }
}

.com-history .splide__arrow {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    height: 1.5rem;
    opacity: 1;
    transition: opacity var(--duration) var(--cubic) 0s;
    width: 1.5rem;
}

@media (min-width: 768px) {
    .com-history .splide__arrow {
        height: 30px;
        width: 30px;
    }
}

.com-history .splide__arrow > svg {
    display: none;
}

.com-history .splide__arrow:before {
    background-color: var(--color-blue);
    bottom: 0;
    content: "";
    display: block;
    height: 1rem;
    left: auto;
    margin: auto 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 0.8rem;
}

@media (min-width: 768px) {
    .com-history .splide__arrow:before {
        height: 20px;
        width: 16px;
    }
}

.com-history .splide__arrow:focus {
    opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
    .com-history .splide__arrow:hover {
        opacity: 0.65;
    }
}

.com-history .splide__arrow--prev {
    left: -0.75rem;
}

@media (min-width: 768px) {
    .com-history .splide__arrow--prev {
        left: -30px;
    }
}

@media (min-width: 1240px) {
    .com-history .splide__arrow--prev {
        left: -45px;
    }
}

.com-history .splide__arrow--prev:before {
    -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    left: 0.35rem;
}

@media (min-width: 768px) {
    .com-history .splide__arrow--prev:before {
        left: 7px;
    }
}

.com-history .splide__arrow--next {
    right: -0.75rem;
}

@media (min-width: 768px) {
    .com-history .splide__arrow--next {
        right: -30px;
    }
}

@media (min-width: 1240px) {
    .com-history .splide__arrow--next {
        right: -45px;
    }
}

.com-history .splide__arrow--next:before {
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    right: 0.35rem;
}

@media (min-width: 768px) {
    .com-history .splide__arrow--next:before {
        right: 7px;
    }
}

.com-calendar {
    background-color: rgba(var(--color-black-rgb), 0.05);
    padding: 1.625rem 0;
}

@media (min-width: 768px) {
    .com-calendar {
        padding: 26px 0;
    }
}

.com-calendar-container {
    margin: 0 auto;
    max-width: calc(1080px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.com-calendar__title {
    font-size: var(--fs20);
    font-weight: 900;
    letter-spacing: 0.3em;
    line-height: 1.4;
    margin: 0 0 1.5rem;
    padding: 0 0 0.125rem 0.125rem;
    position: relative;
}

@media (min-width: 768px) {
    .com-calendar__title {
        margin: 0 0 32px;
        padding: 0 0 2px 2px;
    }
}

.com-calendar__title:before {
    background: linear-gradient(to right, var(--color-blue) 9.375rem, var(--color-silver) 9.375rem);
    bottom: -0.1875rem;
    content: "";
    display: block;
    height: 0.1875rem;
    left: 0;
    position: absolute;
    right: 0;
    width: auto;
}

@media (min-width: 768px) {
    .com-calendar__title:before {
        background: linear-gradient(to right, var(--color-blue) 150px, var(--color-silver) 150px);
        bottom: -3px;
        height: 3px;
    }
}

.com-calendar__list {
    align-items: stretch;
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
    margin: 0 auto 1rem;
    max-width: 28.125rem;
    width: 100%;
}

@media (min-width: 768px) {
    .com-calendar__list {
        gap: 16px;
        margin: 0 auto 16px;
        max-width: 450px;
    }
}

.com-calendar__list__item {
    flex: 0 0 calc(50% - 0.5rem);
}

@media (min-width: 768px) {
    .com-calendar__list__item {
        flex: 0 0 calc(50% - 8px);
    }
}

.com-calendar__list__item__title {
    font-size: var(--fs14);
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 0.25rem;
    text-align: center;
}

@media (min-width: 768px) {
    .com-calendar__list__item__title {
        margin: 0 0 4px;
    }
}

.com-calendar__list__item__table {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    table-layout: fixed;
    width: 100%;
}

.com-calendar__list__item__table > thead > tr > th, .com-calendar__list__item__table > thead > tr > td {
    background-color: var(--color-white);
    border-left: 0.0625rem solid var(--color-black);
    border-top: 0.0625rem solid var(--color-black);
    font-size: var(--fs12);
    font-weight: 500;
    height: 1.3125rem;
    line-height: 1.05;
    padding: 0.125rem;
    text-align: center;
    width: auto;
}

@media (min-width: 768px) {
    .com-calendar__list__item__table > thead > tr > th, .com-calendar__list__item__table > thead > tr > td {
        border-left-width: 1px;
        border-top-width: 1px;
        height: 21px;
        padding: 2px;
    }
}

.com-calendar__list__item__table > thead > tr > th:last-child, .com-calendar__list__item__table > thead > tr > td:last-child {
    border-right: 0.0625rem solid var(--color-black);
}

@media (min-width: 768px) {
    .com-calendar__list__item__table > thead > tr > th:last-child, .com-calendar__list__item__table > thead > tr > td:last-child {
        border-right-width: 1px;
    }
}

.com-calendar__list__item__table > thead > tr > th.--sun, .com-calendar__list__item__table > thead > tr > td.--sun {
    color: #ff8000;
}

.com-calendar__list__item__table > thead > tr > th.--sat, .com-calendar__list__item__table > thead > tr > td.--sat {
    color: var(--color-blue);
}

.com-calendar__list__item__table > tbody > tr > th, .com-calendar__list__item__table > tbody > tr > td {
    background-color: var(--color-white);
    border-bottom: 0.0625rem solid var(--color-black);
    border-left: 0.0625rem solid var(--color-black);
    font-size: var(--fs12);
    font-weight: 500;
    height: 1.3125rem;
    line-height: 1.05;
    padding: 0.125rem;
    text-align: center;
    width: auto;
}

@media (min-width: 768px) {
    .com-calendar__list__item__table > tbody > tr > th, .com-calendar__list__item__table > tbody > tr > td {
        border-bottom-width: 1px;
        border-left-width: 1px;
        height: 21px;
        padding: 2px;
    }
}

.com-calendar__list__item__table > tbody > tr > th:last-child, .com-calendar__list__item__table > tbody > tr > td:last-child {
    border-right: 0.0625rem solid var(--color-black);
}

@media (min-width: 768px) {
    .com-calendar__list__item__table > tbody > tr > th:last-child, .com-calendar__list__item__table > tbody > tr > td:last-child {
        border-right-width: 1px;
    }
}

.com-calendar__list__item__table > tbody > tr > th.--sun, .com-calendar__list__item__table > tbody > tr > td.--sun {
    color: #ff8000;
}

.com-calendar__list__item__table > tbody > tr > th.--sat, .com-calendar__list__item__table > tbody > tr > td.--sat {
    color: var(--color-blue);
}

.com-calendar__list__item__table > tbody > tr > th.--today, .com-calendar__list__item__table > tbody > tr > td.--today {
    background-color: var(--color-sky-blue);
}

.com-calendar__list__item__table > tbody > tr > th.--holiday, .com-calendar__list__item__table > tbody > tr > td.--holiday {
    background-color: var(--color-light-gray);
    color: #636363;
}

.com-calendar__list__item__table > tbody > tr:first-child > th, .com-calendar__list__item__table > tbody > tr:first-child > td {
    border-top: 0.0625rem solid var(--color-black);
}

@media (min-width: 768px) {
    .com-calendar__list__item__table > tbody > tr:first-child > th, .com-calendar__list__item__table > tbody > tr:first-child > td {
        border-top-width: 1px;
    }
}

.com-calendar__legend {
    align-items: stretch;
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
    justify-content: center;
    width: 100%;
}

@media (min-width: 768px) {
    .com-calendar__legend {
        gap: 16px;
    }
}

.com-calendar__legend__item {
    flex: 0 0 auto;
    font-size: var(--fs14);
    font-weight: 500;
    line-height: 1.2;
    padding: 0 0 0 2rem;
    position: relative;
    text-align: center;
}

@media (min-width: 768px) {
    .com-calendar__legend__item {
        padding: 0 0 0 32px;
    }
}

.com-calendar__legend__item:before {
    bottom: 0;
    content: "";
    display: block;
    height: 0.75rem;
    left: 0;
    margin: auto 0;
    position: absolute;
    top: 0;
    width: 1.75rem;
}

@media (min-width: 768px) {
    .com-calendar__legend__item:before {
        height: 12px;
        width: 28px;
    }
}

.com-calendar__legend__item--today:before {
    background-color: var(--color-sky-blue);
}

.com-calendar__legend__item--holiday:before {
    background-color: var(--color-light-gray);
}

.com-pager {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    gap: 0.75rem 0.5rem;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .com-pager {
        gap: 12px 8px;
    }
}

.com-pager__item a, .com-pager__item__dots {
    align-items: center;
    background: none;
    background-color: var(--color-white);
    border: 0.0625rem solid var(--color-navy);
    border-radius: 0.375rem;
    color: inherit;
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs14);
    font-weight: 400;
    height: 1.875rem;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1.05;
    min-width: 1.875rem;
    padding: 0 0 0.025em;
    position: relative;
    text-box: trim-both cap alphabetic;
    text-decoration: none;
}

@media (min-width: 768px) {
    .com-pager__item a, .com-pager__item__dots {
        border-radius: 6px;
        border-width: 1px;
        height: 30px;
        min-width: 30px;
    }
}

.com-pager__item a img, .com-pager__item a span, .com-pager__item__dots img, .com-pager__item__dots span {
    vertical-align: middle;
}

.com-pager__item a {
    transition: background-color var(--duration) var(--cubic) 0s, border-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
}

.com-pager__item a:focus {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .com-pager__item a:hover {
        background-color: var(--color-blue);
        border-color: var(--color-blue);
        color: var(--color-white);
    }
}

.com-pager__item__dots {
    background: none;
    border: none;
    min-width: 0.875rem;
    position: relative;
    width: 0.875rem;
}

@media (min-width: 768px) {
    .com-pager__item__dots {
        min-width: 14px;
        width: 14px;
    }
}

.com-pager__item__dots:before {
    background-color: var(--color-navy);
    bottom: 0;
    content: "";
    display: block;
    height: 0.125rem;
    left: 0;
    margin: auto;
    -webkit-mask-image: url(../images/commons/com-pager-dots.svg);
    mask-image: url(../images/commons/com-pager-dots.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    right: 0;
    top: 0;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 0.875rem;
}

@media (min-width: 768px) {
    .com-pager__item__dots:before {
        height: 2px;
        width: 14px;
    }
}

.com-pager__item__dots span {
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    display: block;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    visibility: hidden;
    width: 1px;
}

.com-pager__item--active a, .com-pager__item--active .com-pager__item__dots {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
    pointer-events: none;
}

.com-pager__item--first a, .com-pager__item--prev a, .com-pager__item--next a, .com-pager__item--last a {
    background-color: var(--color-navy);
}

.com-pager__item--first a:before, .com-pager__item--prev a:before, .com-pager__item--next a:before, .com-pager__item--last a:before {
    background-color: var(--color-white);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    margin: auto;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    right: 0;
    top: 0;
    transition: background-color var(--duration) var(--cubic) 0s;
}

.com-pager__item--first a span, .com-pager__item--prev a span, .com-pager__item--next a span, .com-pager__item--last a span {
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    display: block;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    visibility: hidden;
    width: 1px;
}

.com-pager__item--first a:focus, .com-pager__item--prev a:focus, .com-pager__item--next a:focus, .com-pager__item--last a:focus {
    background-color: var(--color-blue);
}

@media (hover: hover) and (pointer: fine) {
    .com-pager__item--first a:hover, .com-pager__item--prev a:hover, .com-pager__item--next a:hover, .com-pager__item--last a:hover {
        background-color: var(--color-blue);
    }
}

.com-pager__item--first a:before, .com-pager__item--last a:before {
    height: 0.75rem;
    width: 0.75rem;
}

@media (min-width: 768px) {
    .com-pager__item--first a:before, .com-pager__item--last a:before {
        height: 12px;
        width: 12px;
    }
}

.com-pager__item--first a:before {
    -webkit-mask-image: url(../images/commons/com-pager-first.svg);
    mask-image: url(../images/commons/com-pager-first.svg);
}

.com-pager__item--last a:before {
    -webkit-mask-image: url(../images/commons/com-pager-last.svg);
    mask-image: url(../images/commons/com-pager-last.svg);
}

.com-pager__item--prev a:before, .com-pager__item--next a:before {
    height: 0.75rem;
    width: 0.5rem;
}

@media (min-width: 768px) {
    .com-pager__item--prev a:before, .com-pager__item--next a:before {
        height: 12px;
        width: 8px;
    }
}

.com-pager__item--prev a:before {
    -webkit-mask-image: url(../images/commons/com-pager-prev.svg);
    mask-image: url(../images/commons/com-pager-prev.svg);
}

.com-pager__item--next a:before {
    -webkit-mask-image: url(../images/commons/com-pager-next.svg);
    mask-image: url(../images/commons/com-pager-next.svg);
}

.com-page-head {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: stretch;
    margin: 0 0 3.75rem;
    padding: 1.875rem 0;
    position: relative;
}

@media (min-width: 768px) {
    .com-page-head {
        margin: 0 0 75px;
        min-height: 150px;
        padding: 40px 0;
    }
}

.com-page-head:before {
    background-image: url(../images/commons/com-page-head-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    display: block;
    left: calc(var(--c-pad)*-1);
    position: absolute;
    right: min(var(--c-pad) * -1, 1400px * 0.5 - 50vw);
    top: 0;
    width: auto;
    z-index: 0;
}

.com-page-head-container {
    padding: 0 var(--c-pad);
    position: relative;
    width: 100%;
    z-index: 1;
}

.com-page-head__title {
    border-bottom: 0.125rem solid var(--color-white);
    color: var(--color-white);
    font-size: var(--fs20);
    font-weight: 900;
    letter-spacing: 0.2em;
    line-height: 1.4;
    margin: 0 0 3.2vw;
    padding: 0 0 0.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .com-page-head__title {
        border-bottom-width: 3px;
        font-size: var(--fs26);
        letter-spacing: 0.3em;
        margin: 0 0 12px;
        padding: 0 0 8px;
    }
}

@media (min-width: 768px) {
    .com-page-head:has(.com-page-head__content) {
        min-height: 250px;
    }
}

.com-page-head:has(.com-page-head__content) .com-page-head__title {
    margin: 0 0 1.5rem;
}

@media (min-width: 768px) {
    .com-page-head:has(.com-page-head__content) .com-page-head__title {
        margin: 0 0 30px;
    }
}

.com-page-head__content {
    background-color: var(--color-white);
    border-radius: 0.75rem;
    padding: 1.25rem 1.25rem;
}

@media (min-width: 768px) {
    .com-page-head__content {
        border-radius: 18px;
        padding: 30px 20px;
    }
}

.com-page-head__content p {
    font-size: var(--fs14);
    letter-spacing: 0.075em;
    line-height: 1.87;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .com-page-head__content p {
        font-size: var(--fs16);
    }
}

.com-page-head:has(+ .com-breadcrumb) {
    margin-bottom: 0;
}

.com-breadcrumb {
    margin: 1.25rem 0 2.5rem;
    padding: 0;
}

@media (min-width: 768px) {
    .com-breadcrumb {
        margin: 24px 0 40px;
    }
}

.com-breadcrumb > li {
    display: inline;
    font-size: var(--fs12);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    padding: 0 1.125rem 0 0;
    position: relative;
}

@media (min-width: 768px) {
    .com-breadcrumb > li {
        font-size: var(--fs14);
        padding: 0 20px 0 0;
    }
}

.com-breadcrumb > li:after {
    background-color: var(--color-blue);
    bottom: auto;
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
    display: block;
    height: 0.4375rem;
    margin: auto 0;
    position: absolute;
    right: 0.3125rem;
    top: 0.375rem;
    width: 0.375rem;
}

@media (min-width: 768px) {
    .com-breadcrumb > li:after {
        height: 8px;
        right: 6px;
        top: 6px;
        width: 7px;
    }
}

.com-breadcrumb > li:last-child {
    padding-right: 0;
}

.com-breadcrumb > li:last-child:after {
    display: none;
}

.com-breadcrumb > li a, .com-breadcrumb > li span {
    color: inherit;
    font-weight: 400;
    letter-spacing: 0.075em;
    line-height: 1.2;
}

.com-breadcrumb > li a {
    text-decoration: underline;
    transition: color var(--duration) var(--cubic) 0s, -webkit-text-decoration var(--duration) var(--cubic) 0s;
    transition: color var(--duration) var(--cubic) 0s, text-decoration var(--duration) var(--cubic) 0s;
    transition: color var(--duration) var(--cubic) 0s, text-decoration var(--duration) var(--cubic) 0s, -webkit-text-decoration var(--duration) var(--cubic) 0s;
}

.com-breadcrumb > li a:focus {
    color: var(--color-blue);
    -webkit-text-decoration-color: transparent;
    text-decoration-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .com-breadcrumb > li a:hover {
        color: var(--color-blue);
        -webkit-text-decoration-color: transparent;
        text-decoration-color: transparent;
    }
}

.com-form-table {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}

@media (max-width: 767px) {
    .com-form-table {
        display: block;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .com-form-table > tbody {
        display: block;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .com-form-table > tbody > tr {
        border-bottom: 1px solid var(--color-silver);
        display: block;
        padding: 12px 0;
        width: 100%;
    }

    .com-form-table > tbody > tr:first-child {
        border-top: 1px solid var(--color-silver);
    }
}

.com-form-table > tbody > tr > th, .com-form-table > tbody > tr > td {
    font-size: var(--fs14);
    padding: 4px 0;
    text-align: left;
    vertical-align: top;
    width: auto;
}

@media (max-width: 767px) {
    .com-form-table > tbody > tr > th, .com-form-table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .com-form-table > tbody > tr > th:last-child, .com-form-table > tbody > tr > td:last-child {
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    .com-form-table > tbody > tr > th, .com-form-table > tbody > tr > td {
        border-bottom: 1px solid var(--color-silver);
        font-size: var(--fs16);
        padding: 20px 0;
    }
}

.com-form-table > tbody > tr > th {
    font-weight: 400;
}

@media (min-width: 768px) {
    .com-form-table > tbody > tr > th {
        min-width: 30%;
        padding-right: 16px;
        width: 30%;
    }
}

.com-form-table > tbody > tr > th .ec-label {
    margin: 0;
}

@media (min-width: 768px) {
    .com-form-table > tbody > tr:first-child > th, .com-form-table > tbody > tr:first-child > td {
        border-top: 1px solid var(--color-silver);
    }
}

@media (min-width: 768px) {
    .com-form-table > tbody > tr:has(> th + td > .ec-input, > th + td > .ec-halfInput, > th + td > .ec-zipInput, > th + td > .ec-select, > th + td > .ec-telInput) > th {
        padding: 26px 0;
    }
}

@media (max-width: 767px) {
    .com-form-table--confirm > tbody > tr {
        padding: 16px 0;
    }
}

/* --------------------
 Mypage
-------------------- */
.mypage-menu {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 0 0 3.125rem;
}

@media (min-width: 768px) {
    .mypage-menu {
        border: 1px solid #969797;
    }
}

@media (min-width: 992px) {
    .mypage-menu {
        flex-wrap: nowrap;
        margin: 0 0 50px;
    }
}

.mypage-menu__item {
    flex: 0 0 50%;
}

@media (max-width: 767px) {
    .mypage-menu__item {
        border-bottom: 0.0625rem solid #969797;
        border-right: 0.0625rem solid #969797;
    }

    .mypage-menu__item:nth-child(1), .mypage-menu__item:nth-child(2) {
        border-top: 0.0625rem solid #969797;
    }

    .mypage-menu__item:nth-child(odd) {
        border-left: 0.0625rem solid #969797;
    }
}

@media (min-width: 768px) {
    .mypage-menu__item {
        border-bottom: 1px solid #969797;
        border-right: 1px solid #969797;
        flex: 0 0 25%;
    }

    .mypage-menu__item:nth-child(n+5) {
        border-bottom: none;
    }

    .mypage-menu__item:nth-child(4), .mypage-menu__item:last-child {
        border-right: none;
    }
}

@media (min-width: 992px) {
    .mypage-menu__item {
        border-bottom: none;
        border-right: 1px solid #969797 !important;
        flex: 1;
    }
}

.mypage-menu__item a {
    align-items: center;
    color: inherit;
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs14);
    font-weight: 500;
    height: 2.8125rem;
    justify-content: center;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
}

@media (min-width: 768px) {
    .mypage-menu__item a {
        height: 45px;
    }
}

@media (min-width: 992px) {
    .mypage-menu__item a {
        font-size: var(--fs16);
    }
}

.mypage-menu__item a:focus {
    background-color: var(--color-navy);
    color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .mypage-menu__item a:hover {
        background-color: var(--color-navy);
        color: var(--color-white);
    }
}

.mypage-menu__item.--active a {
    background-color: var(--color-navy);
    color: var(--color-white);
}

.mypage-msg {
    margin: 0 0 3.125rem;
}

@media (min-width: 768px) {
    .mypage-msg {
        margin: 0 0 50px;
    }
}

.mypage-msg p {
    font-size: var(--fs14);
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin: 0 0 1.5em;
    text-align: center;
}

@media (min-width: 768px) {
    .mypage-msg p {
        font-size: var(--fs16);
    }
}

.mypage-msg p:last-child {
    margin-bottom: 0;
}

.mypage-order {
    margin: 0 0 5rem;
    padding: 1.875rem 0 0;
}

@media (min-width: 768px) {
    .mypage-order {
        margin: 0 0 100px;
        padding: 40px 0 0;
    }
}

.mypage-order__note {
    margin: 0 0 3.75rem;
}

@media (min-width: 768px) {
    .mypage-order__note {
        margin: 0 0 80px;
    }
}

.mypage-order__note p {
    font-size: var(--fs14);
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin: 0 0 1.5em;
    text-align: center;
}

@media (min-width: 768px) {
    .mypage-order__note p {
        font-size: var(--fs16);
    }
}

.mypage-order__note p:last-child {
    margin-bottom: 0;
}

.mypage-order__item-wrapper {
    margin: 0 0 3.75rem;
}

@media (min-width: 768px) {
    .mypage-order__item-wrapper {
        margin: 0 0 60px;
    }
}

.mypage-order__item {
    align-items: center;
    border-bottom: 0.0625rem solid #969797;
    display: flex;
    flex-flow: row wrap;
    gap: 1.25rem;
    justify-content: space-between;
    padding: 1.25rem 0;
}

@media (min-width: 768px) {
    .mypage-order__item {
        border-bottom-width: 1px;
        flex-wrap: nowrap;
        gap: 30px;
        padding: 45px 20px;
    }
}

.mypage-order__item:first-child {
    border-top: 0.0625rem solid #969797;
}

@media (min-width: 768px) {
    .mypage-order__item:first-child {
        border-top-width: 1px;
    }
}

.mypage-order__item__head {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .mypage-order__item__head {
        flex: 1 1 auto;
    }
}

.mypage-order__item__head__title {
    font-size: var(--fs20);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 768px) {
    .mypage-order__item__head__title {
        font-size: var(--fs24);
    }
}

.mypage-order__item__head__date {
    display: block;
    font-size: var(--fs14);
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 768px) {
    .mypage-order__item__head__date {
        font-size: var(--fs16);
    }
}

.mypage-order__item__actions {
    align-items: center;
    display: flex;
    flex: 0 0 100%;
    flex-flow: row wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

@media (min-width: 768px) {
    .mypage-order__item__actions {
        flex: 0 0 230px;
        gap: 12px 20px;
    }
}

@media (min-width: 992px) {
    .mypage-order__item__actions {
        flex: 0 0 480px;
        flex-wrap: nowrap;
    }
}

.mypage-order__item__actions__item {
    flex: 0 0 calc(50% - 0.375rem);
}

@media (min-width: 768px) {
    .mypage-order__item__actions__item {
        flex: 0 0 100%;
    }
}

@media (min-width: 992px) {
    .mypage-order__item__actions__item {
        flex: 0 0 calc(50% - 10px);
    }
}

.mypage-order__item__actions__item a {
    align-items: center;
    background-color: var(--color-blue);
    border: 0.0625rem solid var(--color-blue);
    border-radius: 1.25rem;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs14);
    font-weight: 500;
    height: 2.5rem;
    justify-content: center;
    letter-spacing: 0.075em;
    line-height: 1.2;
    max-width: 14.375rem;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-order__item__actions__item a {
        border-radius: 20px;
        border-width: 1px;
        font-size: var(--fs16);
        height: 40px;
        max-width: 230px;
    }
}

.mypage-order__item__actions__item a:after {
    background-color: var(--color-white);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
    display: inline-block;
    height: 0.5rem;
    margin: 0 0 0 0.25em;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 0.4375rem;
}

@media (min-width: 768px) {
    .mypage-order__item__actions__item a:after {
        height: 8px;
        width: 7px;
    }
}

.mypage-order__item__actions__item a:focus {
    background-color: var(--color-white);
    color: var(--color-blue);
}

.mypage-order__item__actions__item a:focus:before, .mypage-order__item__actions__item a:focus:after {
    background-color: var(--color-blue);
}

@media (hover: hover) and (pointer: fine) {
    .mypage-order__item__actions__item a:hover {
        background-color: var(--color-white);
        color: var(--color-blue);
    }

    .mypage-order__item__actions__item a:hover:before, .mypage-order__item__actions__item a:hover:after {
        background-color: var(--color-blue);
    }
}

.mypage-order__item__actions__item a.--inverse {
    background-color: var(--color-white);
    color: var(--color-blue);
}

.mypage-order__item__actions__item a.--inverse:after {
    background-color: var(--color-blue);
}

.mypage-order__item__actions__item a.--inverse:focus {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.mypage-order__item__actions__item a.--inverse:focus:after {
    background-color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .mypage-order__item__actions__item a.--inverse:hover {
        background-color: var(--color-blue);
        color: var(--color-white);
    }

    .mypage-order__item__actions__item a.--inverse:hover:after {
        background-color: var(--color-white);
    }
}

.mypage-history {
    margin: 0 0 5rem;
}

@media (min-width: 768px) {
    .mypage-history {
        margin: 0 0 100px;
        padding: 20px 0 0;
    }
}

.mypage-history__result {
    border-bottom: 0.0625rem solid #969797;
    padding: 0 0 0.75rem;
}

@media (min-width: 768px) {
    .mypage-history__result {
        border-bottom-width: 1px;
        padding: 0 0 18px;
    }
}

.mypage-history__result p {
    font-size: var(--fs14);
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin: 0;
}

@media (min-width: 768px) {
    .mypage-history__result p {
        font-size: var(--fs16);
    }
}

.mypage-history__item-wrapper {
    margin: 0 0 3.75rem;
}

@media (min-width: 768px) {
    .mypage-history__item-wrapper {
        margin: 0 0 60px;
    }
}

.mypage-history__item {
    align-items: stretch;
    border-bottom: 0.0625rem solid #969797;
    display: flex;
    flex-flow: row wrap;
    gap: 1.875rem;
    padding: 1.25rem 0;
}

@media (min-width: 768px) {
    .mypage-history__item {
        border-bottom-width: 1px;
        flex-wrap: nowrap;
        gap: 0 40px;
        padding: 30px 0px;
    }
}

@media (min-width: 992px) {
    .mypage-history__item {
        gap: 0 60px;
    }
}

.mypage-history__item__head {
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-history__item__head {
        flex: 0 0 200px;
    }
}

@media (min-width: 992px) {
    .mypage-history__item__head {
        flex: 0 0 230px;
    }
}

.mypage-history__item__head__date {
    font-size: var(--fs14);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 0 0 0.25rem;
}

@media (min-width: 768px) {
    .mypage-history__item__head__date {
        font-size: var(--fs16);
        margin: 0 0 4px;
    }
}

.mypage-history__item__head__info {
    align-items: flex-start;
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs14);
    gap: 0.75rem;
    justify-content: flex-start;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 0 0 0.25rem;
}

@media (min-width: 768px) {
    .mypage-history__item__head__info {
        font-size: var(--fs16);
        gap: 12px;
        margin: 0 0 4px;
    }
}

.mypage-history__item__head__info:last-child {
    margin-bottom: 0;
}

.mypage-history__item__head__info__title {
    flex: 0 0 auto;
    white-space: nowrap;
}

.mypage-history__item__head__info__content {
    flex: 1 1 auto;
    font-weight: 700;
}

.mypage-history__item__head__actions {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 0.75rem;
    margin: 1.875rem 0 0;
}

@media (min-width: 768px) {
    .mypage-history__item__head__actions {
        gap: 12px;
        margin: 30px 0 0;
    }
}

.mypage-history__item__head__actions__item {
    flex: 0 0 calc(50% - 0.375rem);
}

@media (max-width: 767px) {
    .mypage-history__item__head__actions__item:nth-child(1) {
        flex: 0 0 100%;
    }
}

@media (min-width: 768px) {
    .mypage-history__item__head__actions__item {
        flex: 0 0 100%;
    }
}

.mypage-history__item__head__actions__item a {
    align-items: center;
    background-color: var(--color-blue);
    border: 0.0625rem solid var(--color-blue);
    border-radius: 1.25rem;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs14);
    font-weight: 500;
    height: 2.5rem;
    justify-content: center;
    letter-spacing: 0.075em;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-history__item__head__actions__item a {
        border-radius: 20px;
        border-width: 1px;
        font-size: var(--fs16);
        height: 40px;
        max-width: 230px;
    }
}

.mypage-history__item__head__actions__item a:after {
    background-color: var(--color-white);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
    display: inline-block;
    height: 0.5rem;
    margin: 0 0 0 0.25em;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 0.4375rem;
}

@media (min-width: 768px) {
    .mypage-history__item__head__actions__item a:after {
        height: 8px;
        width: 7px;
    }
}

.mypage-history__item__head__actions__item a:focus {
    background-color: var(--color-white);
    color: var(--color-blue);
}

.mypage-history__item__head__actions__item a:focus:after {
    background-color: var(--color-blue);
}

@media (hover: hover) and (pointer: fine) {
    .mypage-history__item__head__actions__item a:hover {
        background-color: var(--color-white);
        color: var(--color-blue);
    }

    .mypage-history__item__head__actions__item a:hover:after {
        background-color: var(--color-blue);
    }
}

.mypage-history__item__head__actions__item a.--dl {
    background-color: var(--color-white);
    color: var(--color-blue);
}

.mypage-history__item__head__actions__item a.--dl:before {
    background-color: var(--color-blue);
    content: "";
    display: inline-block;
    height: 1.25rem;
    margin: 0 0.5em 0 0;
    -webkit-mask-image: url(../images/icons/icon-blue-circle-download.svg);
    mask-image: url(../images/icons/icon-blue-circle-download.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 1.25rem;
}

@media (min-width: 768px) {
    .mypage-history__item__head__actions__item a.--dl:before {
        height: 20px;
        width: 20px;
    }
}

.mypage-history__item__head__actions__item a.--dl:after {
    display: none;
}

.mypage-history__item__head__actions__item a.--dl:focus {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.mypage-history__item__head__actions__item a.--dl:focus:before {
    background-color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .mypage-history__item__head__actions__item a.--dl:hover {
        background-color: var(--color-blue);
        color: var(--color-white);
    }

    .mypage-history__item__head__actions__item a.--dl:hover:before {
        background-color: var(--color-white);
    }
}

.mypage-history__item__list {
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-history__item__list {
        flex: 1 1 auto;
    }
}

.mypage-history__item__list__item {
    align-items: center;
    border-bottom: 0.0625rem solid #969797;
    display: flex;
    flex-flow: row nowrap;
    margin: 0 0 1.25rem;
    padding: 0 0 1.25rem;
}

@media (min-width: 768px) {
    .mypage-history__item__list__item {
        border-bottom-width: 1px;
        margin: 0 0 30px;
        padding: 0 0 30px;
    }
}

.mypage-history__item__list__item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mypage-history__item__list__item__fig {
    border: 0.0625rem solid #969797;
    flex: 0 0 6.25rem;
    padding: 0;
}

@media (min-width: 768px) {
    .mypage-history__item__list__item__fig {
        border-width: 1px;
        flex: 0 0 180px;
    }
}

@media (min-width: 992px) {
    .mypage-history__item__list__item__fig {
        flex: 0 0 250px;
    }
}

.mypage-history__item__list__item__fig img {
    aspect-ratio: 1/1;
    height: 100%;
    object-fit: contain;
    object-position: center;
    width: 100%;
}

.mypage-history__item__list__item__main {
    flex: 0 0 calc(100% - 6.25rem);
    padding: 0 0 0 1.25rem;
}

@media (min-width: 768px) {
    .mypage-history__item__list__item__main {
        flex: 0 0 calc(100% - 180px);
        padding: 0 0 0 30px;
    }
}

@media (min-width: 992px) {
    .mypage-history__item__list__item__main {
        flex: 0 0 calc(100% - 250px);
        padding: 0 0 0 40px;
    }
}

.mypage-history__item__list__item__main__title {
    font-size: var(--fs18);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 768px) {
    .mypage-history__item__list__item__main__title {
        font-size: var(--fs24);
    }
}

@media (min-width: 992px) {
    .mypage-history__item__list__item__main__title {
        font-size: var(--fs30);
    }
}

.mypage-history__item__list__item__main__category {
    font-size: var(--fs12);
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 0 0 0.5rem;
    word-break: break-all;
}

@media (min-width: 768px) {
    .mypage-history__item__list__item__main__category {
        font-size: var(--fs16);
        margin: 0 0 8px;
    }
}

@media (min-width: 992px) {
    .mypage-history__item__list__item__main__category {
        font-size: var(--fs20);
    }
}

.mypage-history__item__list__item__main__price {
    font-size: var(--fs14);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 1.25rem 0 0;
}

@media (min-width: 768px) {
    .mypage-history__item__list__item__main__price {
        font-size: var(--fs20);
        margin: 30px 0 0;
    }
}

@media (min-width: 992px) {
    .mypage-history__item__list__item__main__price {
        font-size: var(--fs24);
    }
}

.mypage-history__item__list__item__main ._tax {
    font-size: 60%;
    margin: 0 0.25em 0 0.25em;
}

.mypage-history__item__list__item__main ._cross {
    font-size: var(--fs14);
    margin: 0 0.25em;
}

@media (min-width: 992px) {
    .mypage-history__item__list__item__main ._cross {
        font-size: var(--fs16);
    }
}

.mypage-order-edit {
    margin: 0 0 5rem;
    padding: 0;
}

@media (min-width: 768px) {
    .mypage-order-edit {
        margin: 0 0 100px;
        padding: 40px 0 0;
    }
}

.mypage-order-edit__note {
    margin: 0 0 3.75rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__note {
        margin: 0 0 80px;
    }
}

.mypage-order-edit__note p {
    font-size: var(--fs14);
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin: 0 0 1.5em;
    text-align: center;
}

@media (min-width: 768px) {
    .mypage-order-edit__note p {
        font-size: var(--fs16);
    }
}

.mypage-order-edit__note p:last-child {
    margin-bottom: 0;
}

.mypage-order-edit__main {
    margin: 0 0 3.75rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main {
        margin: 0 0 60px;
    }
}

.mypage-order-edit__main__noresult {
    margin: 1.875rem 0 0;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__noresult {
        margin: 30px 0 0;
    }
}

.mypage-order-edit__main__noresult p {
    font-size: var(--fs16);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__noresult p {
        font-size: var(--fs18);
    }
}

.mypage-order-edit__main__head {
    align-items: stretch;
    border-bottom: 0.0625rem solid #d8d8d8;
    border-top: 0.0625rem solid #d8d8d8;
    display: flex;
    flex-flow: row wrap;
    padding: 0.1875rem 0;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__head {
        border-bottom-width: 1px;
        border-top-width: 1px;
        flex-wrap: nowrap;
        min-height: 60px;
        padding: 4px 0;
    }
}

.mypage-order-edit__main__head__label {
    align-items: center;
    background-color: rgba(var(--color-black-rgb), 0.1);
    display: flex;
    flex: 0 0 100%;
    flex-flow: row nowrap;
    font-size: var(--fs16);
    font-weight: 700;
    justify-content: flex-start;
    letter-spacing: 0.08em;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__head__label {
        flex: 0 0 250px;
        font-size: var(--fs20);
        padding: 8px 20px;
    }
}

.mypage-order-edit__main__head__label label {
    display: block;
    font-weight: inherit;
    margin: 0;
}

.mypage-order-edit__main__head__title {
    align-items: stretch;
    display: flex;
    flex: 0 0 100%;
    flex-flow: column nowrap;
    gap: 0;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    text-align: left;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__head__title {
        flex: 1 1 auto;
        padding: 4px 20px;
    }
}

.mypage-order-edit__main__head__title__field {
    width: 100%;
}

.mypage-order-edit__main__head__title__field input {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    background-color: var(--color-white);
    border: 0.0625rem solid #d8d8d8;
    border-radius: 0;
    display: block;
    font-size: var(--fs16);
    font-weight: 400;
    height: 2.5rem;
    letter-spacing: 0.08em;
    line-height: 1.2;
    padding: 0 0.75rem;
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__head__title__field input {
        border-width: 1px;
        font-size: var(--fs20);
        height: 40px;
        padding: 0 20px;
    }
}

.mypage-order-edit__main__head__title__value {
    font-size: var(--fs18);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__head__title__value {
        font-size: var(--fs20);
    }
}

@media (max-width: 767px) {
    .mypage-order-edit__main__table-wrapper {
        margin: 0 calc(var(--c-pad)*-1) 0 0;
    }
}

@media (max-width: 767px) {
    .mypage-order-edit__main__table-wrapper-scroller {
        overflow-x: auto;
        padding: 0 0 12px;
    }
}

@media (max-width: 767px) {
    .mypage-order-edit__main__table-wrapper-scroller-inner {
        min-width: 38.125rem;
        padding: 0 var(--c-pad) 0 0;
        width: 38.125rem;
    }
}

.mypage-order-edit__main__table {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    max-width: 100%;
    width: 99.999%;
}

.mypage-order-edit__main__table > thead > tr > th, .mypage-order-edit__main__table > thead > tr > td {
    background-color: rgba(var(--color-black-rgb), 0.1);
    border-bottom: 0.0625rem solid #d8d8d8;
    border-right: 0.0625rem solid #d8d8d8;
    color: #6d6664;
    font-size: var(--fs16);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.2;
    padding: 0.5rem 0.25rem;
    text-align: center;
    vertical-align: middle;
    width: auto;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table > thead > tr > th, .mypage-order-edit__main__table > thead > tr > td {
        border-bottom-width: 1px;
        border-right-wiborder-bottom-width: 1px;
        font-size: var(--fs20);
        padding: 16px 4px;
    }
}

.mypage-order-edit__main__table > thead > tr > th:last-child, .mypage-order-edit__main__table > thead > tr > td:last-child {
    border-right: none;
}

.mypage-order-edit__main__table > thead > tr > th:nth-child(2), .mypage-order-edit__main__table > thead > tr > td:nth-child(2) {
    width: 7.5rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table > thead > tr > th:nth-child(2), .mypage-order-edit__main__table > thead > tr > td:nth-child(2) {
        width: 160px;
    }
}

@media (min-width: 992px) {
    .mypage-order-edit__main__table > thead > tr > th:nth-child(2), .mypage-order-edit__main__table > thead > tr > td:nth-child(2) {
        width: 200px;
    }
}

.mypage-order-edit__main__table > thead > tr > th:nth-child(3), .mypage-order-edit__main__table > thead > tr > td:nth-child(3) {
    width: 10rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table > thead > tr > th:nth-child(3), .mypage-order-edit__main__table > thead > tr > td:nth-child(3) {
        width: 160px;
    }
}

@media (min-width: 992px) {
    .mypage-order-edit__main__table > thead > tr > th:nth-child(3), .mypage-order-edit__main__table > thead > tr > td:nth-child(3) {
        width: 200px;
    }
}

.mypage-order-edit__main__table > tbody > tr > td {
    border-bottom: 0.125rem solid #d8d8d8;
    border-right: 0.0625rem solid #d8d8d8;
    font-size: var(--fs16);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
    padding: 0.75rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    width: auto;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table > tbody > tr > td {
        border-bottom-width: 3px;
        border-right-width: 1px;
        font-size: var(--fs20);
        padding: 24px 20px;
    }
}

.mypage-order-edit__main__table > tbody > tr > td:nth-child(2) {
    width: 7.5rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table > tbody > tr > td:nth-child(2) {
        width: 160px;
    }
}

@media (min-width: 992px) {
    .mypage-order-edit__main__table > tbody > tr > td:nth-child(2) {
        width: 200px;
    }
}

.mypage-order-edit__main__table > tbody > tr > td:nth-child(3) {
    width: 10rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table > tbody > tr > td:nth-child(3) {
        width: 160px;
    }
}

@media (min-width: 992px) {
    .mypage-order-edit__main__table > tbody > tr > td:nth-child(3) {
        width: 200px;
    }
}

.mypage-order-edit__main__table > tbody > tr > td:last-child {
    border-right: none;
}

.mypage-order-edit__main__table > tbody > tr:nth-child(even) > td, .mypage-order-edit__main__table > tbody > tr:nth-child(even) > th {
    background-color: rgba(var(--color-blue-rgb), 0.05);
}

.mypage-order-edit__main__table__name a {
    color: inherit;
    text-decoration: underline;
    -webkit-text-decoration-color: transparent;
    text-decoration-color: transparent;
    transition: color var(--duration) var(--cubic) 0s, -webkit-text-decoration var(--duration) var(--cubic) 0s;
    transition: color var(--duration) var(--cubic) 0s, text-decoration var(--duration) var(--cubic) 0s;
    transition: color var(--duration) var(--cubic) 0s, text-decoration var(--duration) var(--cubic) 0s, -webkit-text-decoration var(--duration) var(--cubic) 0s;
}

.mypage-order-edit__main__table__name a:focus {
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .mypage-order-edit__main__table__name a:hover {
        -webkit-text-decoration-color: currentColor;
        text-decoration-color: currentColor;
    }
}

.mypage-order-edit__main__table__price {
    letter-spacing: 0;
    text-align: center;
}

.mypage-order-edit__main__table__option {
    margin: 1.25rem 0 0;
    padding: 1.25rem 0 0;
    position: relative;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option {
        margin: 28px 0 0;
        padding: 28px 0 0;
    }
}

.mypage-order-edit__main__table__option:before {
    background-color: #d8d8d8;
    content: "";
    display: block;
    height: 1px;
    left: -20px;
    position: absolute;
    right: -20px;
    top: 0;
}

.mypage-order-edit__main__table__option__title {
    color: var(--color-navy);
    font-size: var(--fs16);
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1.4;
    margin: 0 0 0.875rem;
    padding: 0 0 0 1rem;
    position: relative;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__title {
        font-size: var(--fs20);
        margin: 0 0 12px;
        padding: 0 0 0 16px;
    }
}

.mypage-order-edit__main__table__option__title:before {
    background-color: var(--color-navy);
    content: "";
    display: block;
    height: 0.625rem;
    left: 0;
    position: absolute;
    top: 0.5em;
    width: 0.625rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__title:before {
        height: 10px;
        width: 10px;
    }
}

.mypage-order-edit__main__table__option__item {
    margin: 0 0 1.25rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item {
        margin: 0 0 24px;
    }
}

.mypage-order-edit__main__table__option__item:last-child {
    margin-bottom: 0;
}

.mypage-order-edit__main__table__option__item__title {
    font-size: var(--fs14);
    letter-spacing: 0.075em;
    line-height: 1.6;
    margin: 0 0 1rem;
    position: relative;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__title {
        font-size: var(--fs16);
        margin: 0 0 16px;
    }
}

.mypage-order-edit__main__table__option__item__title .__required {
    background-color: var(--color-blue);
    color: var(--color-white);
    display: block;
    font-size: var(--fs14);
    left: 0;
    letter-spacing: 0.075em;
    line-height: 1.05;
    padding: 0.125rem 0.125rem 0.1875rem;
    position: absolute;
    top: 0;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__title .__required {
        font-size: var(--fs16);
        padding: 4px 4px 5px;
    }
}

.mypage-order-edit__main__table__option__item__title:has(.__required) {
    padding-left: 2.875rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__title:has(.__required) {
        padding-left: 50px;
    }
}

.mypage-order-edit__main__table__option__item__title label {
    display: inline;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0.075em;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

.mypage-order-edit__main__table__option__item__title .__more {
    border: 0.0625rem solid #969797;
    border-radius: 1.25rem;
    color: #969797;
    display: inline-flex;
    font-size: var(--fs10);
    font-weight: 500;
    letter-spacing: 0.075em;
    line-height: 1.05;
    padding: 0.125rem 0.25rem 0.125rem 0.875rem;
    position: relative;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__title .__more {
        border-radius: 20px;
        border-width: 1px;
        padding: 2px 4px 2px 14px;
    }
}

.mypage-order-edit__main__table__option__item__title .__more:before {
    background-image: url(../images/icons/icon-gray-circle-question.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    display: block;
    height: 0.625rem;
    left: 0.125rem;
    margin: auto;
    position: absolute;
    top: 0;
    width: 0.625rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__title .__more:before {
        height: 10px;
        left: 2px;
        width: 10px;
    }
}

.mypage-order-edit__main__table__option__item__title .__more span {
    display: block;
}

.mypage-order-edit__main__table__option__item__title .__more:focus {
    background-color: #969797;
    color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .mypage-order-edit__main__table__option__item__title .__more:hover {
        background-color: #969797;
        color: var(--color-white);
    }
}

.mypage-order-edit__main__table__option__item__field__select {
    position: relative;
}

.mypage-order-edit__main__table__option__item__field__select:after {
    background-color: var(--color-black);
    bottom: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
    display: block;
    height: 0.4375rem;
    left: auto;
    margin: auto;
    pointer-events: none;
    position: absolute;
    right: 0.75rem;
    top: 0;
    width: 0.5rem;
    z-index: 1;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__select:after {
        height: 7px;
        right: 12px;
        width: 8px;
    }
}

.mypage-order-edit__main__table__option__item__field__select select {
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-white);
    border: 0.0625rem solid #969797;
    border-radius: 0;
    box-shadow: none;
    color: var(--color-black);
    cursor: pointer;
    font-size: var(--fs16);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.2;
    padding: 0.625rem 1.5rem 0.625rem 0.625rem;
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__select select {
        border-width: 1px;
        padding: 10px 24px 10px 10px;
    }
}

.mypage-order-edit__main__table__option__item__field__select select::-ms-expand {
    display: none;
}

.mypage-order-edit__main__table__option__item__field__radio {
    position: relative;
}

.mypage-order-edit__main__table__option__item__field__radio .form-check {
    margin: 0 0 0.5rem;
    min-height: auto;
    padding: 0;
    position: relative;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__radio .form-check {
        margin: 0 0 8px;
    }
}

.mypage-order-edit__main__table__option__item__field__radio .form-check:last-child {
    margin-bottom: 0;
}

.mypage-order-edit__main__table__option__item__field__radio .form-check input {
    cursor: pointer;
    left: 0;
    opacity: 0 !important;
    padding: 0;
    position: absolute;
    top: 0;
}

.mypage-order-edit__main__table__option__item__field__radio .form-check label {
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    display: block;
    font-size: var(--fs14);
    margin: 0;
    padding: 0 0 0 1.5rem;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__radio .form-check label {
        font-size: var(--fs16);
        padding: 0 0 0 24px;
    }
}

.mypage-order-edit__main__table__option__item__field__radio .form-check label:before {
    background-color: var(--color-white);
    border: 0.0625rem solid var(--color-black);
    border-radius: 0.625rem;
    bottom: auto;
    content: "";
    height: 1.25rem;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0.125rem;
    width: 1.25rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__radio .form-check label:before {
        border-radius: 10px;
        border-width: 1px;
        height: 20px;
        top: 2px;
        width: 20px;
    }
}

.mypage-order-edit__main__table__option__item__field__radio .form-check label:after {
    background-color: var(--color-blue);
    border: 0.0625rem solid var(--color-blue);
    border-radius: 0.5rem;
    bottom: auto;
    content: "";
    display: block;
    height: 0.75rem;
    left: 0.25rem;
    margin: auto;
    opacity: 0;
    position: absolute;
    top: 0.375rem;
    width: 0.75rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__radio .form-check label:after {
        border-radius: 8px;
        border-width: 1px;
        height: 12px;
        left: 4px;
        top: 6px;
        width: 12px;
    }
}

.mypage-order-edit__main__table__option__item__field__radio .form-check:has(input:checked) label:after {
    opacity: 1;
}

.mypage-order-edit__main__table__option__item__field__checkbox {
    position: relative;
}

.mypage-order-edit__main__table__option__item__field__checkbox .form-check {
    margin: 0 0 0.5rem;
    min-height: auto;
    padding: 0;
    position: relative;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__checkbox .form-check {
        margin: 0 0 8px;
    }
}

.mypage-order-edit__main__table__option__item__field__checkbox .form-check:last-child {
    margin-bottom: 0;
}

.mypage-order-edit__main__table__option__item__field__checkbox .form-check input {
    cursor: pointer;
    left: 0;
    opacity: 0 !important;
    padding: 0;
    position: absolute;
    top: 0;
}

.mypage-order-edit__main__table__option__item__field__checkbox .form-check label {
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    display: block;
    font-size: var(--fs14);
    font-weight: 400;
    letter-spacing: 0.05em;
    margin: 0;
    padding: 0 0 0 1.75rem;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__checkbox .form-check label {
        font-size: var(--fs16);
        padding: 0 0 0 28px;
    }
}

.mypage-order-edit__main__table__option__item__field__checkbox .form-check label:before {
    background-color: var(--color-white);
    border: 0.0625rem solid var(--color-black);
    border-radius: 0;
    bottom: 0;
    content: "";
    height: 1rem;
    left: 0.4375rem;
    margin: auto;
    position: absolute;
    top: 0;
    width: 1rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__checkbox .form-check label:before {
        border-width: 1px;
        height: 16px;
        left: 7px;
        width: 16px;
    }
}

.mypage-order-edit__main__table__option__item__field__checkbox .form-check label:after {
    background-image: url(../images/icons/icon-blue-checkmark.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    display: block;
    height: 0.625rem;
    left: 0.5625rem;
    margin: auto;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 0.6875rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__checkbox .form-check label:after {
        height: 10px;
        left: 9px;
        width: 11px;
    }
}

.mypage-order-edit__main__table__option__item__field__checkbox .form-check:has(input:checked) label:after {
    opacity: 1;
}

.mypage-order-edit__main__table__option__item__field__text {
    position: relative;
}

.mypage-order-edit__main__table__option__item__field__text input[type=text] {
    background-color: var(--color-white);
    display: block;
    font-size: var(--fs16);
    height: auto;
    margin: 0;
    padding: 0.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__text input[type=text] {
        padding: 8px 12px;
    }
}

.mypage-order-edit__main__table__option__item__field__textarea {
    position: relative;
}

.mypage-order-edit__main__table__option__item__field__textarea textarea {
    background-color: var(--color-white);
    display: block;
    font-size: var(--fs16);
    height: auto;
    margin: 0;
    padding: 0.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__textarea textarea {
        padding: 8px 12px;
    }
}

.mypage-order-edit__main__table__option__item__field__date {
    position: relative;
}

.mypage-order-edit__main__table__option__item__field__date input {
    background-color: var(--color-white);
    display: block;
    font-size: var(--fs16);
    height: auto;
    margin: 0;
    padding: 0.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__date input {
        padding: 8px 12px;
    }
}

.mypage-order-edit__main__table__option__item__field__number {
    position: relative;
}

.mypage-order-edit__main__table__option__item__field__number input {
    background-color: var(--color-white);
    display: block;
    font-size: var(--fs16);
    height: auto;
    margin: 0;
    padding: 0.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__number input {
        padding: 8px 12px;
    }
}

.mypage-order-edit__main__table__option__item__field__error:not(:empty) {
    padding: 0.25rem 0 0;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__option__item__field__error:not(:empty) {
        padding: 4px 0 0;
    }
}

.mypage-order-edit__main__table__action {
    margin: 0 auto;
    width: 7.1875rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__action {
        width: 115px;
    }
}

.mypage-order-edit__main__table__action__quantity {
    margin: 0 0 1.5rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__action__quantity {
        margin: 0 0 24px;
    }
}

.mypage-order-edit__main__table__action__quantity__field input {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    background-color: var(--color-white);
    border: 0.0625rem solid #969797;
    border-radius: 0;
    display: block;
    font-size: var(--fs16);
    font-weight: 400;
    height: 2.5rem;
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin: 0;
    padding: 0 1.25rem;
    text-align: right;
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__action__quantity__field input {
        border-width: 1px;
        height: 40px;
        padding: 0 20px;
    }
}

.mypage-order-edit__main__table__action__quantity__empty p, .mypage-order-edit__main__table__action__quantity__empty .invalid-feedback {
    font-size: var(--fs12);
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

.mypage-order-edit__main__table__action__quantity__error p, .mypage-order-edit__main__table__action__quantity__error .invalid-feedback {
    font-size: var(--fs12);
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

.mypage-order-edit__main__table__action__delete__field .form-check {
    margin: 0;
    min-height: auto;
    padding: 0;
    position: relative;
}

.mypage-order-edit__main__table__action__delete__field .form-check input {
    cursor: pointer;
    left: 0;
    opacity: 0 !important;
    padding: 0;
    position: absolute;
    top: 0;
}

.mypage-order-edit__main__table__action__delete__field .form-check label {
    background: none;
    background-color: #f9f9f9;
    border: 0.0625rem solid #969797;
    border-radius: 0.3125rem;
    box-shadow: none;
    cursor: pointer;
    display: block;
    font-size: var(--fs14);
    font-weight: 400;
    margin: 0;
    padding: 0.375rem 0 0.375rem 1.75rem;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__action__delete__field .form-check label {
        border: 1px solid #969797;
        border-radius: 5px;
        padding: 6px 0 6px 28px;
    }
}

.mypage-order-edit__main__table__action__delete__field .form-check label:before {
    background-color: var(--color-white);
    border: 0.0625rem solid var(--color-black);
    border-radius: 0.1875rem;
    bottom: 0;
    content: "";
    height: 1rem;
    left: 0.4375rem;
    margin: auto;
    position: absolute;
    top: 0;
    width: 1rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__action__delete__field .form-check label:before {
        border-radius: 3px;
        border-width: 1px;
        height: 16px;
        left: 7px;
        width: 16px;
    }
}

.mypage-order-edit__main__table__action__delete__field .form-check label:after {
    background-image: url(../images/icons/icon-black-checkmark.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    display: block;
    height: 0.625rem;
    left: 0.5625rem;
    margin: auto;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 0.6875rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__main__table__action__delete__field .form-check label:after {
        height: 10px;
        left: 9px;
        width: 11px;
    }
}

.mypage-order-edit__main__table__action__delete__field .form-check:has(input:checked) label {
    background-color: rgba(var(--color-red-rgb), 0.25);
}

.mypage-order-edit__main__table__action__delete__field .form-check:has(input:checked) label:after {
    opacity: 1;
}

.mypage-order-edit__main__table__action__delete__error p, .mypage-order-edit__main__table__action__delete__error .invalid-feedback {
    font-size: var(--fs12);
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

.mypage-order-edit__actions__item {
    margin: 0 0 1.875rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__actions__item {
        margin: 0 0 30px;
    }
}

.mypage-order-edit__actions__item:last-child {
    margin-bottom: 0;
}

.mypage-order-edit__save {
    margin: 0 0 1.875rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__save {
        margin: 0 0 30px;
    }
}

.mypage-order-edit__save button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    background-color: var(--color-navy);
    border: 0.0625rem solid var(--color-navy);
    border-radius: 0;
    box-shadow: none;
    color: var(--color-white);
    cursor: pointer;
    display: block;
    font-size: var(--fs16);
    font-weight: 500;
    height: 3.125rem;
    letter-spacing: 0.075em;
    line-height: 1.2;
    margin: 0 auto;
    max-width: 18.75rem;
    padding: 0;
    text-align: center;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-order-edit__save button {
        border-width: 1px;
        font-size: var(--fs18);
        height: 55px;
        max-width: 300px;
    }
}

.mypage-order-edit__save button:focus {
    background-color: var(--color-white);
    color: var(--color-navy);
}

@media (hover: hover) and (pointer: fine) {
    .mypage-order-edit__save button:hover {
        background-color: var(--color-white);
        color: var(--color-navy);
    }
}

.mypage-order-edit__delete {
    margin: 0 0 3.75rem;
}

@media (min-width: 768px) {
    .mypage-order-edit__delete {
        margin: 0 0 100px;
    }
}

.mypage-order-edit__delete a {
    align-items: center;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    background-color: #f9f9f9;
    border: 0.0625rem solid #969797;
    border-radius: 0.3125rem;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs14);
    font-weight: 400;
    height: 2.125rem;
    justify-content: center;
    margin: 0 auto;
    max-width: 9.375rem;
    padding: 0;
    position: relative;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, opacity var(--duration) var(--cubic) 0s;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
}

@media (min-width: 768px) {
    .mypage-order-edit__delete a {
        border: 1px solid #969797;
        border-radius: 5px;
        height: 34px;
        max-width: 150px;
    }
}

.mypage-order-edit__delete a:focus {
    opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
    .mypage-order-edit__delete a:hover {
        opacity: 0.65;
    }
}

/* --------------------
 Header nomember
-------------------- */
.header__nomember {
    margin: 0 0 60px;
    text-align: center;
}

/* --------------------
 Header
-------------------- */
.header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-navy);
    border-top: 3px solid var(--color-navy);
    height: var(--header-height);
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

@media (min-width: 992px) {
    .header {
        border-bottom: 2px solid var(--color-navy);
        border-top-width: 6px;
    }
}

.header__main {
    height: 100%;
    margin: 0 auto;
    max-width: calc(var(--container-width) + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 992px) {
    .header__main {
        height: auto;
        margin: 0 auto 20px;
        padding: 18px var(--c-pad) 0;
    }
}

.header__main-container {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    justify-content: space-between;
    margin: 0;
    max-width: 1370px;
    width: 100%;
}

@media (min-width: 992px) {
    .header__main-container {
        align-items: flex-start;
        height: auto;
    }
}

.header__main__logo {
    flex: 0 0 158px;
    font-size: 10px;
    margin: 0;
    padding: 4px 0 0;
}

.header__main__logo a {
    display: block;
    text-decoration: none;
    transition: opacity var(--duration) var(--cubic) 0s;
}

.header__main__logo a img {
    width: 112px;
}

@media (min-width: 992px) {
    .header__main__logo a img {
        width: 158px;
    }
}

.header__main__logo a:focus {
    opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
    .header__main__logo a:hover {
        opacity: 0.65;
    }
}

.header__main__nav {
    flex: 0 0 auto;
}

@media (min-width: 992px) {
    .header__main__nav {
        flex: 1 1 auto;
    }
}

.header__main__nav__menu {
    align-items: flex-start;
    display: none;
    flex-flow: row nowrap;
    gap: 34px;
    justify-content: flex-end;
}

@media (min-width: 992px) {
    .header__main__nav__menu {
        display: flex;
    }
}

.header__main__nav__menu__item a {
    color: var(--color-navy);
    display: block;
    font-size: var(--fs12);
    font-weight: 500;
    line-height: 1.05;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: color var(--duration) var(--cubic) 0s, opacity var(--duration) var(--cubic) 0s;
}

.header__main__nav__menu__item a .__badge {
    align-items: center;
    background-color: var(--color-red);
    border-radius: 50%;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs16);
    font-weight: 500;
    height: 26px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1.05;
    min-width: 26px;
    position: absolute;
    right: -10px;
    text-align: center;
    top: -10px;
    white-space: nowrap;
    z-index: 1;
}

.header__main__nav__menu__item a .__icon {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    height: 35px;
    justify-content: center;
    margin: 0 0 8px;
    opacity: 0.4;
}

.header__main__nav__menu__item a img.--cart {
    width: 34px;
}

.header__main__nav__menu__item a img.--list {
    width: 34px;
}

.header__main__nav__menu__item a img.--favorite {
    width: 32px;
}

.header__main__nav__menu__item a img.--user {
    width: 26px;
}

.header__main__nav__menu__item a .__title {
    display: block;
}

.header__main__nav__menu__item a:focus {
    color: var(--color-blue);
    opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
    .header__main__nav__menu__item a:hover {
        color: var(--color-blue);
        opacity: 0.65;
    }
}

.header__main__nav__menu__item .ec-headerRole__cart .__icon:before {
    background-image: url(../images/icons/icon-blue-cart.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 35px;
    width: 34px;
}

.header__main__nav__menu__item .ec-headerRole__cart .__icon img {
    display: none;
}

.header__main__nav__burger {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    display: block;
    height: 48px;
    margin: 0;
    padding: 0;
    position: relative;
    right: -11px;
    -webkit-tap-highlight-color: transparent;
    width: 48px;
    z-index: 100;
}

@media (min-width: 992px) {
    .header__main__nav__burger {
        display: none;
    }
}

.header__main__nav__burger:before {
    bottom: 0;
    content: "";
    display: block;
    height: auto;
    left: 50%;
    position: absolute;
    right: auto;
    top: 0;
    transform: translateX(-50%);
    width: 48px;
}

.header__main__nav__burger__box {
    display: block;
    height: 17px;
    margin: 4px auto 4px;
    position: relative;
    width: 26px;
}

.header__main__nav__burger__box__line {
    display: block;
    margin: 0px 0 0;
    top: 0.5px;
    transition: transform 0.15s ease 0s, background-color 0.15s ease 0s;
}

.header__main__nav__burger__box__line, .header__main__nav__burger__box__line:before, .header__main__nav__burger__box__line:after {
    background-color: var(--color-navy);
    height: 1px;
    position: absolute;
    width: 26px;
}

.header__main__nav__burger__box__line:before, .header__main__nav__burger__box__line:after {
    content: "";
    display: block;
}

.header__main__nav__burger__box__line:before {
    top: 8px;
    transition: transform 0.15s ease 0s, background-color 0.15s ease 0s, opacity 0.15s ease 0s;
}

.header__main__nav__burger__box__line:after {
    top: 16px;
    transition: transform 0.15s ease 0s, background-color 0.15s ease 0s;
}

.header__main__nav__burger__label {
    color: var(--color-navy);
    display: block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    transform: scale(0.7);
    white-space: nowrap;
}

.header__main__nav__burger.-active .header__main__nav__burger__box__line {
    background-color: var(--color-navy);
    transform: translate3d(0, 8px, 0) rotate(45deg);
}

.header__main__nav__burger.-active .header__main__nav__burger__box__line:before {
    background-color: var(--color-navy);
    opacity: 0;
    transform: rotate(-45deg) translate3d(-3.7142857143px, -7px, 0);
}

.header__main__nav__burger.-active .header__main__nav__burger__box__line:after {
    background-color: var(--color-navy);
    transform: translate3d(0, -16px, 0) rotate(-90deg);
}

.header__nav {
    display: none;
    margin: 0 auto;
    max-width: calc(var(--container-width) + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 992px) {
    .header__nav {
        display: block;
    }
}

.header__nav-container {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    gap: 30px;
    justify-content: flex-end;
    margin: 0;
    max-width: 1370px;
    width: 100%;
}

.header__nav__menu {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}

.header__nav__menu__item {
    padding: 0 12px;
    position: relative;
}

@media (min-width: 1240px) {
    .header__nav__menu__item {
        padding: 0 17px;
    }
}

.header__nav__menu__item:after {
    background-color: var(--color-black);
    bottom: 0;
    content: "";
    height: 18px;
    margin: auto 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
}

.header__nav__menu__item a {
    align-items: center;
    border-radius: 18px;
    color: inherit;
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs16);
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0.2em;
    line-height: 1.05;
    padding: 6px 10px;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
}

@media (min-width: 1240px) {
    .header__nav__menu__item a {
        padding: 6px 12px;
    }
}

.header__nav__menu__item a:focus {
    background-color: var(--color-blue);
    color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .header__nav__menu__item a:hover {
        background-color: var(--color-blue);
        color: var(--color-white);
    }
}

.header__nav__pickup {
    position: relative;
}

.header__nav__pickup > a {
    align-items: center;
    background-color: var(--color-blue);
    border-radius: 18px;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs16);
    font-weight: 500;
    height: 35px;
    justify-content: center;
    letter-spacing: 0.2em;
    line-height: 1.05;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
    width: 150px;
}

@media (min-width: 1240px) {
    .header__nav__pickup > a {
        width: 160px;
    }
}

.header__nav__pickup > a:after {
    background-color: var(--color-white);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
    display: inline-block;
    height: 8px;
    margin: 0 0 0 0.25em;
    transition: transform var(--duration) var(--cubic) 0s;
    width: 7px;
}

.header__nav__pickup > a:focus:after {
    transform: rotate(90deg);
}

@media (hover: hover) and (pointer: fine) {
    .header__nav__pickup > a:hover:after {
        transform: rotate(90deg);
    }
}

.header__nav__pickup > a.-active:after {
    transform: rotate(90deg);
}

.header__nav__pickup__sub {
    display: none;
    left: -8px;
    min-width: calc(100% + 16px);
    padding: 4px 8px 16px;
    position: absolute;
    right: auto;
    top: 100%;
}

.header__nav__pickup__sub-inner {
    background-color: var(--color-white);
    border: 1px solid var(--color-blue);
    border-radius: 12px;
    overflow: hidden;
    white-space: nowrap;
}

.header__nav__pickup__sub__item {
    border-bottom: 1px solid var(--color-blue);
}

.header__nav__pickup__sub__item:last-child {
    border-bottom: none;
}

.header__nav__pickup__sub__item a {
    color: inherit;
    display: block;
    font-size: var(--fs16s);
    font-weight: 500;
    letter-spacing: 0.075em;
    line-height: 1.05;
    padding: 15px 16px;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
}

@media (min-width: 1240px) {
    .header__nav__pickup__sub__item a {
        padding: 15px 20px;
    }
}

.header__nav__pickup__sub__item a:focus {
    background-color: var(--color-blue);
    color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .header__nav__pickup__sub__item a:hover {
        background-color: var(--color-blue);
        color: var(--color-white);
    }
}

.mbnav {
    background-color: var(--color-white);
    bottom: 0;
    display: none;
    font-size: 14px;
    position: fixed;
    right: 0;
    top: var(--header-height);
    transform: translateX(100%);
    transition: transform var(--duration) var(--cubic) 0s;
    width: 300px;
    z-index: 100;
}

.mbnav.-initialized {
    display: block;
}

.mbnav.-active {
    transform: translateX(0);
}

.mbnav-container {
    height: 100%;
}

.mbnav.-scrollable .mbnav-container {
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

.mbnav__user {
    border-bottom: 2px solid var(--color-navy);
}

.mbnav__user__name {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    padding: 16px 0 16px 54px;
    position: relative;
}

.mbnav__user__name:before {
    background-color: var(--color-navy);
    bottom: 0;
    content: "";
    display: block;
    height: 24px;
    left: 24px;
    margin: auto 0;
    -webkit-mask-image: url(../images/icons/icon-blue-user.svg);
    mask-image: url(../images/icons/icon-blue-user.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 0;
    width: 21px;
}

.mbnav__product__title {
    background-color: var(--color-blue);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    padding: 12px 0 12px 24px;
}

.mbnav__product__list__item {
    border-bottom: 1px solid rgba(var(--color-blue-rgb), 0.3);
}

.mbnav__product__list__item a {
    color: inherit;
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    padding: 12px 50px 12px 24px;
    position: relative;
    text-decoration: none;
}

.mbnav__product__list__item:has(a + ul) > a:before, .mbnav__product__list__item:has(a + ul) > a:after {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: auto;
    content: "";
    display: block;
    height: 22px;
    margin: auto;
    position: absolute;
    right: 20px;
    top: 12px;
    transition: transform var(--duration) var(--cubic) 0s, opacity var(--duration) var(--cubic) 0s;
    width: 22px;
}

.mbnav__product__list__item:has(a + ul) > a:before {
    background-image: url(../images/commons/com-mbnav-icon-plus.svg);
}

.mbnav__product__list__item:has(a + ul) > a:after {
    background-image: url(../images/commons/com-mbnav-icon-minus.svg);
    opacity: 0;
}

.mbnav__product__list__item:has(a + ul) > a.-active:before, .mbnav__product__list__item:has(a + ul) > a.-active:after {
    transform: rotate(180deg);
}

.mbnav__product__list__item:has(a + ul) > a.-active:before {
    opacity: 0;
}

.mbnav__product__list__item:has(a + ul) > a.-active:after {
    opacity: 1;
}

.mbnav__product__list__item ul {
    border-top: 1px solid rgba(var(--color-blue-rgb), 0.3);
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    padding: 0 0 0 40px;
}

.mbnav__product__list__item ul > li {
    border-bottom: 1px solid rgba(var(--color-blue-rgb), 0.3);
    margin: 0;
    padding: 0;
}

.mbnav__product__list__item ul > li:last-child {
    border-bottom: none;
}

.mbnav__product__list__item ul > li:has(a + ul) > a:before, .mbnav__product__list__item ul > li:has(a + ul) > a:after {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: auto;
    content: "";
    display: block;
    height: 22px;
    margin: auto;
    position: absolute;
    right: 20px;
    top: 12px;
    transition: transform var(--duration) var(--cubic) 0s, opacity var(--duration) var(--cubic) 0s;
    width: 22px;
}

.mbnav__product__list__item ul > li:has(a + ul) > a:before {
    background-image: url(../images/commons/com-mbnav-icon-plus.svg);
}

.mbnav__product__list__item ul > li:has(a + ul) > a:after {
    background-image: url(../images/commons/com-mbnav-icon-minus.svg);
    opacity: 0;
}

.mbnav__product__list__item ul > li:has(a + ul) > a.-active:before, .mbnav__product__list__item ul > li:has(a + ul) > a.-active:after {
    transform: rotate(180deg);
}

.mbnav__product__list__item ul > li:has(a + ul) > a.-active:before {
    opacity: 0;
}

.mbnav__product__list__item ul > li:has(a + ul) > a.-active:after {
    opacity: 1;
}

.mbnav__mypage {
    border-bottom: 2px solid var(--color-navy);
}

.mbnav__mypage__title {
    background-color: var(--color-blue);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    padding: 12px 0 12px 24px;
}

.mbnav__mypage__list__item {
    border-bottom: 1px solid rgba(var(--color-blue-rgb), 0.3);
}

.mbnav__mypage__list__item:last-child {
    border-bottom: none;
}

.mbnav__mypage__list__item a {
    color: inherit;
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    padding: 12px 0 12px 54px;
    position: relative;
    text-decoration: none;
}

.mbnav__mypage__list__item a:before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    display: block;
    left: 30px;
    margin: auto 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
}

.mbnav__mypage__list__item a.--history:before {
    background-image: url(../images/icons/icon-gray-list.svg);
    background-size: 14px 16px;
    width: 16px;
}

.mbnav__mypage__list__item a.--estimate:before {
    background-image: url(../images/icons/icon-gray-calculator.svg);
    background-size: 16px 12px;
    width: 16px;
}

.mbnav__mypage__list__item a.--favorite:before {
    background-image: url(../images/icons/icon-gray-favorite.svg);
    background-size: 14px 15px;
    width: 16px;
}

.mbnav__mypage__list__item a.--order:before {
    background-image: url(../images/icons/icon-gray-document.svg);
    background-size: 16px 12px;
    width: 16px;
}

.mbnav__mypage__list__item a.--member:before {
    background-image: url(../images/icons/icon-gray-pen.svg);
    background-size: 16px 16px;
    width: 16px;
}

.mbnav__mypage__list__item a.--delivery:before {
    background-image: url(../images/icons/icon-gray-luggage.svg);
    background-size: 16px 16px;
    width: 16px;
}

.mbnav__mypage__list__item a.--limitedproduct:before {
    background-image: url(../images/icons/icon-gray-limited_product.svg);
    background-size: 16px 16px;
    width: 16px;
}

.mbnav__mypage__list__item a.--limitednews:before {
    background-image: url(../images/icons/icon-gray-limited_news.svg);
    background-size: 16px 16px;
    width: 16px;
}

.mbnav__menu {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    gap: 16px;
    justify-content: flex-start;
    margin: 0 0 30px;
    padding: 24px 24px 0;
}

.mbnav__menu__item {
    flex: 0 0 calc(50% - 8px);
}

.mbnav__menu__item a {
    color: inherit;
    font-size: 14px;
    line-height: 1.4;
    padding: 0 0 0 12px;
    position: relative;
    text-decoration: none;
}

.mbnav__menu__item a:before {
    background-color: var(--color-black);
    content: "";
    display: block;
    height: 7px;
    left: 0;
    position: absolute;
    top: 8px;
    width: 7px;
}

.mbnav__logout {
    padding: 0 0 20px;
}

.mbnav__logout a {
    align-items: center;
    border: 1px solid #cecece;
    border-radius: 10px;
    color: var(--color-black);
    display: flex;
    flex-flow: row nowrap;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    justify-content: center;
    line-height: 1.2;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    width: 250px;
}

.overlay {
    background-color: rgba(var(--color-black-rgb), 0.6);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99;
}

/* --------------------
 Sidebar
-------------------- */
.layout-side {
    padding: 1.875rem 0 0;
}

@media (min-width: 768px) {
    .layout-side {
        padding: 30px 0 0;
    }
}

.layout-side .search {
    display: block;
    margin: 0 0 1.5rem;
    position: relative;
}

@media (min-width: 768px) {
    .layout-side .search {
        margin: 0 0 24px;
    }
}

.layout-side .search form {
    display: block;
    margin: 0;
    position: relative;
}

.layout-side .search input {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    background-color: var(--color-off-white);
    border: var(--color-off-white);
    border-radius: 0.5rem;
    display: block;
    font-size: var(--fs16);
    font-weight: 400;
    height: 2.5rem;
    letter-spacing: 0.075em;
    line-height: 1.4;
    padding: 0 2.75rem 0 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .layout-side .search input {
        border-radius: 8px;
        font-size: var(--fs14);
        height: 40px;
        padding: 0 44px 0 16px;
    }
}

.layout-side .search input::placeholder {
    color: var(--color-gray);
}

.layout-side .search input::-webkit-input-placeholder {
    color: var(--color-gray);
}

.layout-side .search input::-moz-placeholder {
    color: var(--color-gray);
}

.layout-side .search input:-ms-input-placeholder {
    color: var(--color-gray);
}

.layout-side .search input:-moz-placeholder {
    color: var(--color-gray);
}

.layout-side .search input:focus {
    background-color: var(--color-white);
    color: var(--color-black);
}

.layout-side .search button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    bottom: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 2.5rem;
}

@media (min-width: 768px) {
    .layout-side .search button {
        width: 40px;
    }
}

.layout-side .search button:before {
    background-color: var(--color-gray);
    bottom: 0.125rem;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: auto;
    top: 0.125rem;
    width: 0.0625rem;
}

@media (min-width: 768px) {
    .layout-side .search button:before {
        bottom: 2px;
        top: 2px;
        width: 1px;
    }
}

.layout-side .search button img {
    width: 1.5rem;
}

@media (min-width: 768px) {
    .layout-side .search button img {
        width: 24px;
    }
}

.side-category {
    margin: 0 0 3rem;
}

@media (min-width: 768px) {
    .side-category {
        margin: 0 0 48px;
    }
}

.side-category:last-child {
    margin-bottom: 0;
}

.side-category__title {
    color: var(--color-blue);
    font-size: var(--fs18);
    font-weight: 900;
    letter-spacing: 0.3em;
    line-height: 1.4;
    margin: 0 0 1.375rem;
    padding: 0 0 0 0.75rem;
}

@media (min-width: 768px) {
    .side-category__title {
        margin: 0 0 22px;
        padding: 0 0 0 12px;
    }
}

@media (min-width: 1240px) {
    .side-category__title {
        font-size: var(--fs20);
        padding: 0 0 0 20px;
    }
}

.side-category__list {
    margin: 0 0 2.5rem;
}

@media (min-width: 768px) {
    .side-category__list {
        margin: 0 0 40px;
    }
}

@media (min-width: 1240px) {
    .side-category__list {
        margin: 0 0 48px;
    }
}

.side-category__list:last-child {
    margin-bottom: 0;
}

.side-category__list__title {
    background-color: var(--color-blue);
    border-radius: 1.25rem;
    color: var(--color-white);
    font-size: var(--fs18);
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1.4;
    margin: 0 0 0.0625rem;
    padding: 0.25rem 0.75rem;
}

@media (min-width: 768px) {
    .side-category__list__title {
        border-radius: 20px;
        margin: 0 0 1px;
        padding: 4px 12px;
    }
}

@media (min-width: 1240px) {
    .side-category__list__title {
        font-size: var(--fs20);
        padding: 4px 20px;
    }
}

.side-category__list__item {
    border-bottom: 0.0625rem solid rgba(var(--color-blue-rgb), 0.3);
}

@media (min-width: 768px) {
    .side-category__list__item {
        border-bottom-width: 1px;
    }
}

.side-category__list__item a {
    color: inherit;
    display: block;
    line-height: 1.4;
    padding: 0.5rem 0.5rem;
    position: relative;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
    width: 100%;
}

@media (min-width: 768px) {
    .side-category__list__item a {
        padding: 8px 8px;
    }
}

@media (min-width: 1240px) {
    .side-category__list__item a {
        padding: 8px 20px;
    }
}

.side-category__list__item a:focus {
    background-color: rgba(var(--color-blue-rgb), 0.3);
}

@media (hover: hover) and (pointer: fine) {
    .side-category__list__item a:hover {
        background-color: rgba(var(--color-blue-rgb), 0.3);
    }
}

.side-category__list__item:has(a + ul) > a {
    padding-right: 3.625rem;
}

@media (min-width: 768px) {
    .side-category__list__item:has(a + ul) > a {
        padding-right: 58px;
    }
}

.side-category__list__item:has(a + ul) > a > button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    bottom: 0;
    height: auto;
    left: auto;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 3.125rem;
    z-index: 1;
}

@media (min-width: 768px) {
    .side-category__list__item:has(a + ul) > a > button {
        width: 50px;
    }
}

.side-category__list__item:has(a + ul) > a > button:after {
    background-color: var(--color-blue);
    bottom: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
    display: block;
    height: 0.5rem;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transition: background-color var(--duration) var(--cubic) 0s, transform var(--duration) var(--cubic) 0s;
    width: 0.5625rem;
}

@media (min-width: 768px) {
    .side-category__list__item:has(a + ul) > a > button:after {
        height: 8px;
        width: 9px;
    }
}

.side-category__list__item:has(a + ul) > a.-active > button:after {
    transform: rotate(180deg);
}

.side-category__list__item ul {
    border-top: 0.0625rem solid rgba(var(--color-blue-rgb), 0.3);
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.25rem;
}

@media (min-width: 768px) {
    .side-category__list__item ul {
        border-top-width: 1px;
        padding: 0 0 0 20px;
    }
}

@media (min-width: 1240px) {
    .side-category__list__item ul {
        padding: 0 0 0 30px;
    }
}

.side-category__list__item ul > li {
    border-bottom: 0.0625rem solid rgba(var(--color-blue-rgb), 0.3);
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .side-category__list__item ul > li {
        border-bottom-width: 1px;
    }
}

.side-category__list__item ul > li:last-child {
    border-bottom: none;
}

.side-category__list__item ul > li:has(a + ul) > a {
    padding-right: 3.625rem;
}

@media (min-width: 768px) {
    .side-category__list__item ul > li:has(a + ul) > a {
        padding-right: 58px;
    }
}

.side-category__list__item ul > li:has(a + ul) > a > button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    bottom: 0;
    height: auto;
    left: auto;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 3.125rem;
    z-index: 1;
}

@media (min-width: 768px) {
    .side-category__list__item ul > li:has(a + ul) > a > button {
        width: 50px;
    }
}

.side-category__list__item ul > li:has(a + ul) > a > button:after {
    background-color: var(--color-blue);
    bottom: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
    display: block;
    height: 0.5rem;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transition: background-color var(--duration) var(--cubic) 0s, transform var(--duration) var(--cubic) 0s;
    width: 0.5625rem;
}

@media (min-width: 768px) {
    .side-category__list__item ul > li:has(a + ul) > a > button:after {
        height: 8px;
        width: 9px;
    }
}

.side-category__list__item ul > li:has(a + ul) > a.-active > button:after {
    transform: rotate(180deg);
}

.gaction {
    align-items: stretch;
    background-color: rgba(var(--color-navy-rgb), 0.9);
    bottom: 0;
    display: none;
    flex-flow: row nowrap;
    gap: 0;
    height: 70px;
    justify-content: flex-start;
    left: 0;
    padding: 3px 0;
    position: fixed;
    right: 0;
    z-index: 98;
}

@media (min-width: 992px) {
    .gaction {
        display: none !important;
    }
}

.gaction.-initialized {
    display: flex;
}

.gaction__item {
    border-right: 1px solid var(--color-white);
    flex: 0 0 25%;
}

.gaction__item:last-child {
    border-right: none;
}

.gaction__item a {
    align-items: center;
    color: var(--color-white);
    display: flex;
    flex-flow: column nowrap;
    font-size: 12px;
    font-weight: 500;
    gap: 4px;
    height: 100%;
    justify-content: center;
    line-height: 1.05;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: color var(--duration) var(--cubic) 0s, opacity var(--duration) var(--cubic) 0s;
}

.gaction__item a .__badge {
    align-items: center;
    background-color: var(--color-red);
    border-radius: 50%;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: 16px;
    font-weight: 500;
    height: 26px;
    justify-content: center;
    left: 50%;
    letter-spacing: 0;
    line-height: 1.05;
    min-width: 26px;
    position: absolute;
    right: auto;
    text-align: center;
    top: -10px;
    white-space: nowrap;
    z-index: 1;
}

.gaction__item a .__icon {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    height: 29px;
    justify-content: center;
    margin: 0 0 4px;
    opacity: 0.4;
}

.gaction__item a img.--cart {
    width: 29px;
}

.gaction__item a img.--list {
    width: 29px;
}

.gaction__item a img.--favorite {
    width: 28px;
}

.gaction__item a img.--user {
    width: 23px;
}

.gaction__item a .__title {
    display: block;
}

.gaction__item .ec-headerRole__cart {
    height: 100%;
}

.gaction__item .ec-headerRole__cart .__icon {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    height: 29px;
    justify-content: center;
    margin: 0 0 4px;
    opacity: 0.4;
}

.gaction__item .ec-headerRole__cart .__icon:before {
    background-image: url(../images/icons/icon-white-cart.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 30px;
    width: 29px;
}

.gaction__item .ec-headerRole__cart .__icon img {
    display: none;
}

/* --------------------
 Footer
-------------------- */
.footer {
    background-color: var(--color-black);
    padding: 3.125rem 0 calc(var(--header-height) + 30px);
}

@media (min-width: 768px) {
    .footer {
        padding: 50px 0 calc(var(--header-height) + 30px);
    }
}

@media (min-width: 992px) {
    .footer {
        padding: 50px 0 30px;
    }
}

.footer-container {
    margin: 0 auto;
    max-width: calc(var(--container-width) + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.footer__menu {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 0 1.25rem;
}

@media (min-width: 768px) {
    .footer__menu {
        margin: 0 0 20px;
    }
}

.footer__menu__item {
    font-size: var(--fs10);
    padding: 0 0.375rem;
    position: relative;
}

@media (min-width: 768px) {
    .footer__menu__item {
        padding: 0 6px;
    }
}

.footer__menu__item:after {
    background-color: var(--color-white);
    bottom: 0;
    content: "";
    height: 0.75rem;
    margin: auto 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0.0625rem;
}

@media (min-width: 768px) {
    .footer__menu__item:after {
        height: 12px;
        width: 1px;
    }
}

.footer__menu__item:last-child:after {
    display: none;
}

.footer__menu__item a {
    color: var(--color-white);
    font-size: var(--fs14);
    letter-spacing: 0;
    line-height: 1.4;
    text-align: center;
    text-decoration: underline;
    -webkit-text-decoration-color: transparent;
    text-decoration-color: transparent;
    transition: -webkit-text-decoration-color var(--duration) var(--cubic) 0s;
    transition: text-decoration-color var(--duration) var(--cubic) 0s;
    transition: text-decoration-color var(--duration) var(--cubic) 0s, -webkit-text-decoration-color var(--duration) var(--cubic) 0s;
}

.footer__menu__item a:focus {
    -webkit-text-decoration-color: var(--color-white);
    text-decoration-color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .footer__menu__item a:hover {
        -webkit-text-decoration-color: var(--color-white);
        text-decoration-color: var(--color-white);
    }
}

.footer__copyright {
    color: var(--color-white);
    display: block;
    font-size: var(--fs12);
    font-style: normal;
    font-weight: 300;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}