/*
 * 店舗資材.com
 */

/*** parameters ***/

:root {
    --sidebarWidth: 15rem;

    --labelFontSize: 1.6em;
    --labelFontSizeSecondary: 1.3em;
    --labelFontSizeTertiary: 1em;

    --textColor: #333;
    --textColorSecondary: #6d6c6b;
    --textColorTertiary: #333;

    --linkColor: #04c;
    --linkColorSecondary: #5a7bdf;
    --linkColorTertiary: #04c;

    --fillColor: #fff;
    --fillColorSecondary: #f4f2ef;
    --fillColorTertiary: #fff;

    --accentColor: #d97706;
    --accentLabelColor: #fff;
    --accentColorSecondary: #004567;
    --accentLabelColorSecondary: #fff;

    --borderColor: #ddd;
    --borderColorSecondary: #bbb;

    --textColorBadge: #fff;
    --fillColorBadge: #d84343;

    --textColorCaution: #b03a2e;

    --gap: 2rem;
    --gapSecondary: 1rem;
    --gapTertiary: 0.5rem;
    --gapQuaternary: 0.25rem;

    --margin: var(--gap);
    --marginSecondary: var(--gapSecondary);

    --panelPadding: 0.25rem;

    --hoverRingStyle: dotted;
    --hoverRingWidth: 0.2em;
    --hoverRing: var(--hoverRingStyle) var(--hoverRingColor) var(--hoverRingWidth);

    --textColorClosed: #a00;
    --fillColorClosed: #f5eded;

    --colorDodge: #fff9;
    --colorBurn: #00000009;

    --controlColor: var(--accentColorSecondary);
    --controlLineHeight: 1.2;
    --controlMinHeight: max(44px, calc(2em * var(--controlLineHeight)));
    --controlCornerRadius: 16px;
    --menuIconSize: 2em;
    --menuLabelMaxLines: 2;
    --calendarLegendLabelMaxLines: 2;
}
@media screen and (width < 854px) {
    :root {
        --labelFontSize: 1.6em;
        --labelFontSizeSecondary: 1.2em;
        --labelFontSizeTertiary: 1em;

        --margin: var(--gapSecondary);
        --marginSecondary: var(--gapTertiary);
    }
}

/*** accessibility ***/

@media(prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

:root {
    @supports (-webkit-touch-callout: none) and (font: -apple-system-body) {
        font: -apple-system-body;
    }
}
body {
    font-size: 100%;
}

/*** reset ***/

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

html {
    scrollbar-gutter: stable;
}
body {
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", "Noto Sans JP", "Noto Emoji", sans-serif;
    font-feature-settings: "palt";
    color: var(--textColor);
    background: var(--fillColor);
    margin: 0;
    min-width: 320px;
    min-height: 100dvh;
    line-height: 1.6;
    line-break: strict;
    accent-color: var(--accentColor);
}

ul, ol {
    padding-inline-start: 1.5em;
    margin-block: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
    margin: 0;
}

p {
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-all;
    line-break: strict;
    hyphens: auto;
}

address {
    font-style: normal;
}

a:any-link:not([class]),
a:any-link[class="hoverOutline"] {
    color: var(--linkColor);
}

figure,
picture {
    margin: 0;
}
img {
    display: block;
    max-width: 100%;
}

/** summary element **/
summary {
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}
summary::-webkit-details-marker {
    display: none;
}
@media(prefers-reduced-motion: no-preference) {
    @supports (interpolate-size: allow-keywords) {
        :root {
            interpolate-size: allow-keywords;
        }
        ::details-content {
            height: 0;
            overflow: clip;
            transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
        }
        [open]::details-content {
            height: auto;
        }
    }
    @supports not (interpolate-size: allow-keywords) {
        details > .details-content {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.3s ease;
        }
        details > .details-content > * {
            overflow: hidden;
        }
        details[open] > .details-content {
            grid-template-rows: 1fr;
        }
    }
}

/** section **/
.section {
    display: flex;
    flex-direction: column;
    gap: var(--gapSecondary);
}
.section--secondary {
    gap: var(--gapTertiary);
}

/* wrapped */
.section--wrapped {
    background: var(--fillColorSecondary);
    border-radius: var(--controlCornerRadius);
    padding: var(--gapSecondary) var(--controlCornerRadius);
}

/* section title */
.section__title {
    line-height: 1.2;
    font-size: var(--labelFontSizeSecondary);
    margin-block: calc(0.5em - 0.5lh);
}
.section--secondary .section__title {
    font-size: var(--labelFontSizeTertiary);
}
.section--wrapped:has(.section__footer) .section__title {
    margin-block: calc(0.5em - 0.5lh + var(--gapSecondary));
}
.section--wrapped .button {
    border: none;
}

@media screen and (width < 854px) {
    .section--wrapped {
        padding-inline: var(--gapSecondary);
    }

    .section--itemList {
        gap: var(--gapTertiary);
    }

    .section--wrapped:has(.section__footer) .section__title {
        margin-block: calc(0.5em - 0.5lh);
    }
}

/* footer button container */
.section__footer--buttonContainer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-inline: auto;
}

.section__footerButton {
    max-width: 256px;
    color: var(--controlColor);
    background: var(--fillColorTertiary);
    font-weight: normal;
}

/** bread crumbs **/
.breadCrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.2;
    color: var(--textColor);
    gap: var(--gapQuaternary) var(--gapTertiary);
    margin-block: calc(0.5em - 0.5lh);
}
.breadCrumbs + .breadCrumbs {
        padding-block-start: var(--gapTertiary);
}
@media screen and (width < 640px) {
    .breadCrumbs {
        border-block-end: solid 1px var(--borderColor);
        padding-block-end: var(--gapTertiary);
        margin-block-end: 0;
    }
}
.breadCrumbs ol {
    display: contents;
    list-style: none;
}
.breadCrumbs li::before {
    content: '＞';
    margin-inline-end: var(--gapTertiary);
}
.breadCrumbs a {
    text-decoration: none;
}
.breadCrumbs a:any-link,
.breadCrumbs a:any-link[class="hoverOutline"] {
    color: var(--controlColor);
}

/** hover ring **/
@supports (color: accentColor) {
    :root {
        --hoverRingColor: accentColor;
    }
}
@supports not (color: accentColor) {
    :root {
        --hoverRingColor: LinkText;
    }
}
.freeText a,
.hoverOutline {
    border-radius: 0.125em;
    overflow: visible;
}
@media (hover: hover) and (pointer: fine) {
    .freeText a:any-link:hover,
    a.hoverOutline:any-link:hover,
    :not(a).hoverOutline:not(:disabled):hover {
        outline: var(--hoverRing);
        outline-offset: calc(var(--hoverRingWidth) - 1px);
    }
}

/** badge **/
.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: content-box;
    min-width: 1em;
    padding: 0.5em;
    color: var(--textColorBadge);
    background: var(--fillColorBadge);
    border-radius: calc(infinity * 1px);
}

/** proviso **/
ul.proviso {
    margin: 0;
    padding-inline-start: 1em;
    list-style: '※';
}

/** dl element tiny table **/
dl.table {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    margin-block-start: 0;
    margin-block-end: 0;
}
dl.table > div {
    display: contents;
}
dl.table > div > dt {
    grid-column: 1;
}
dl.table > div > dd {
    grid-column: 2;
    margin-inline-start: 0;
}

/* deco table */
dl.table--deco {
    border: solid 1px var(--borderColor);
    border-radius: var(--panelPadding);
    overflow: hidden;
    gap: 0;
    line-height: 1.2;
    background: var(--fillColorSecondary);
}
@supports (text-justify: inter-character) {
    dl.table--deco > div > dt {
        text-align: justify;
        text-align-last: justify;
        text-justify: inter-character;
    }
}
@supports not (text-justify: inter-character) {
    dl.table--deco > div > dt {
        text-align: center;
    }
}
dl.table--deco > div > dt {
    color: var(--textColorSecondary);
    font-weight: bold;
}
dl.table--deco > div > dd {
    background: var(--fillColor);
}
dl.table--deco > div > dt,
dl.table--deco > div > dd {
    padding: var(--gapQuaternary) var(--gapSecondary);
}
dl.table--deco > div > dd {
    word-break: keep-all;
    overflow-wrap: anywhere;
}
dl.table--deco > div:not(:first-child) > dt,
dl.table--deco > div:not(:first-child) > dd {
    border-block-start: solid 1px var(--borderColor);
}
dl.table--deco > div:not(:first-child) > dd:is(dd + dd) {
    border-block-start: dotted 1px var(--borderColor);
}

/* separated colon */
dl.table--colon > div > dt,
dl.table--colon > div > dd {
    word-break: keep-all;
    overflow-wrap: anywhere;
}
@supports (text-justify: inter-character) {
    dl.table--colon > div > dt {
        text-align: justify;
        text-align-last: justify;
        text-justify: inter-character;
    }
}
@supports not (text-justify: inter-character) {
    dl.table--colon > div > dt {
        text-align: left;
    }
}

dl.table--colon > div > dd::before {
    content: "：";
}

/** dl element stack **/
dl.stack {
    display: flex;
    flex-direction: column;
    gap: var(--gapQuaternary);
    margin-block: 0;
}
dl.stack > div {
    border-radius: var(--panelPadding);
    overflow: hidden;
    border: solid 1px var(--borderColor);
}
dl.stack > div > dt {
    background: var(--fillColorSecondary);
    color: var(--textColorSecondary);
    font-weight: bold;
}
dl.stack > div > dt,
dl.stack > div > dd {
    padding: var(--gapTertiary) var(--gapSecondary);
}
dl.stack > div > dt{
    text-align: start !important;
    text-align-last: start !important;
}
dl.stack > div > dd {
    margin-inline-start: 0;
}
dl.stack > div > dd > ul {
    padding-inline-start: 1em;
}
dl.stack > div > dd > dl > div > dt::before {
    display: inline-block;
    content: "●";
    width: 1em;
}
dl.stack > div > dd > dl > div > dd {
    margin-inline-start: 1em;
}
dl.stack > div > dd > dl > div + div {
    margin-block-start: var(--gapQuaternary);
}

/** button **/
button.button {
    appearance: none;
    font-size: 1rem;
    width: 100%;
}
a.button {
    text-decoration: none;
}
.button {
    text-align: center;
    line-height: var(--controlLineHeight);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: var(--minHeight, var(--controlMinHeight));
    border-radius: var(--controlCornerRadius);
    cursor: pointer;
    background: var(--fillColor);
    color: var(--controlColor);
    box-sizing: border-box;
    border: solid 1px var(--borderColor);
}
.button:has(> .button__textLabel) {
    padding-inline: 0.5em;
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    grid-template-areas: "before label after";
}
.button::before,
.button::after {
    mask-repeat: no-repeat;
    position: absolute;
}
.button::before {
    grid-area: before;
}
.button::after {
    grid-area: after;
}

.button--hasGlyph {
    grid-area: before;
    display: block;
    width: var(--glyphWidth, 1em);
    height: var(--glyphHeight, 1em);
    mask-image: var(--glyph);
    mask-size: var(--glyphSize, 1em 1em);
    mask-position: var(--glyphPosition, center center);
    mask-repeat: no-repeat;
    background: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    button:not(:disabled):hover,
    label.button:hover,
    a.button[href]:not([href=""]):hover {
        outline: var(--hoverRing);
        outline-offset: var(--hoverRingWidth);
    }
}

button.button[disabled],
a.button[href=""],
a.button:not([href]) {
    cursor: default;
}
button.button[disabled] > *,
button.button[disabled] > *::before,
button.button[disabled] > *::after,
a.button:not([href]) > *,
a.button:not([href]) > *::before,
a.button:not([href]) > *::after,
a.button[href=""] > *,
a.button[href=""] > *::before,
a.button[href=""] > *::after {
    opacity: 0.3;
}

.button--primary {
    color: var(--accentLabelColor);
    background: var(--accentColor);
    border: none;
}
.button--secondary {
    color: var(--accentLabelColorSecondary);
    background: var(--accentColorSecondary);
    border: none;
}

.button--noBorder {
    border: none;
}

/* button text label */
.button__textLabel {
    grid-area: label;
    --maxLines: var(--buttonLineClamp, 2);
    padding-block: calc(0.5lh - 0.5em);
    max-height: calc(1lh * var(--maxLines) + (1lh - 1em));
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--maxLines);
    line-clamp: var(--maxLines);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--fontSize, 1em);
    font-weight: var(--fontWeight, inherit);
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* button glyph leader */
.button__glyphLeader {
    grid-area: before;
    display: block;
    width: var(--glyphWidth, 1em);
    height: var(--glyphHeight, 1em);
    mask-image: var(--glyph);
    mask-size: var(--glyphSize, 1em 1em);
    mask-position: var(--glyphPosition, center center);
    mask-repeat: no-repeat;
    background: currentColor;
}

.button__glyphLeader--cart {
    --glyph: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMiwuY2xzLTN7ZmlsbDpub25lO30uY2xzLTJ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO30uY2xzLTIsLmNscy00LC5jbHMtM3tzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2Utd2lkdGg6NC41OHB4O308L3N0eWxlPjwvZGVmcz48ZyBpZD0iX+ODrOOCpOODpOODvF8xLTIiPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTQsNGg2LjNjMS43MiwwLDIuNTksMCwzLjIxLjQ4cy44MiwxLjMzLDEuMjQsMi45OGwuODIsMy4zMmMuNzEsMi44LDEuMDUsNC4xOSwxLjk5LDUuMTEuMjMuMjMuNDguNDEuNzYuNiwxLjEyLjY5LDIuNTcuNjksNS40My42OSIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTUwLjEsNDYuODJIMTUuNjljLTEuNzIsMC0yLjU5LDAtMy4xNi0uMzctLjQ4LS4zMi0uODItLjgtLjk5LTEuMzUtLjE2LS42Ni4xMS0xLjQ5LjY2LTMuMTIuNjItMS44My45Mi0yLjczLDEuNDktMy40MS40OC0uNTcsMS4xLTEuMDMsMS43OS0xLjMxLjgyLS4zMiwxLjc5LS4zMiwzLjcxLS4zMmgxNy43NiIvPjxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTQzLjk4LDM2Ljk1aC0yMi45NGMtMi4yMiwwLTQuMTUtMS42My00LjUxLTMuODNsLTEuOTktMTEuOTRjLS4zNC0yLjA5LDEuMjgtNC4wMSwzLjM5LTQuMDFoMzUuMDZjMS43MiwwLDIuODIsMS43OSwyLjA2LDMuMzJsLTYuOTcsMTMuOTFjLS43OCwxLjU2LTIuMzYsMi41NC00LjEsMi41NFoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjQ2LjgyIiBjeT0iNTYuNyIgcj0iMy4zIi8+PGNpcmNsZSBjbGFzcz0iY2xzLTQiIGN4PSIyMC40NyIgY3k9IjU2LjciIHI9IjMuMyIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ii8+PC9nPjwvc3ZnPg==");
}
.button__glyphLeader--fav {
    --glyph: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsOm5vbmU7fS5jbHMtMntzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6NS42NnB4O308L3N0eWxlPjwvZGVmcz48ZyBpZD0iX+ODrOOCpOODpOODvF8xLTIiPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTEwLjY0LDM2LjQzbDE5LjY2LDE4LjQ3Yy42OC42MiwxLjAyLjk2LDEuNDEsMS4wNS4yLjAzLjM3LjAzLjU3LDAsLjQtLjA4Ljc0LS40LDEuNDEtMS4wNWwxOS42Ni0xOC40N2M1LjU0LTUuMjEsNi4yLTEzLjc1LDEuNTYtMTkuNzVsLS44OC0xLjEzYy01LjU3LTcuMTktMTYuNzUtNS45Ny0yMC42NSwyLjIzLS41NywxLjE2LTIuMjEsMS4xNi0yLjc3LDAtMy45LTguMi0xNS4wOC05LjQyLTIwLjY1LTIuMjNsLS44OCwxLjEzYy00LjY0LDYtMy45OSwxNC41NCwxLjU2LDE5Ljc1WiIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ii8+PC9nPjwvc3ZnPg==");
}

.button__glyphLeader--favFill {
    --glyph: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTt9LmNscy0ye3N0cm9rZTojMDAwO3N0cm9rZS13aWR0aDo1LjY2cHg7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTEwLjY0LDM2LjQzbDE5LjY2LDE4LjQ3Yy42OC42MiwxLjAyLjk2LDEuNDEsMS4wNS4yLjAzLjM3LjAzLjU3LDAsLjQtLjA4Ljc0LS40LDEuNDEtMS4wNWwxOS42Ni0xOC40N2M1LjU0LTUuMjEsNi4yLTEzLjc1LDEuNTYtMTkuNzVsLS44OC0xLjEzYy01LjU3LTcuMTktMTYuNzUtNS45Ny0yMC42NSwyLjIzLS41NywxLjE2LTIuMjEsMS4xNi0yLjc3LDAtMy45LTguMi0xNS4wOC05LjQyLTIwLjY1LTIuMjNsLS44OCwxLjEzYy00LjY0LDYtMy45OSwxNC41NCwxLjU2LDE5Ljc1WiIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ii8+PC9zdmc+");
}

/* button glyph label */
.button__glyphLabel {
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--glyphWidth, 1em);
    height: var(--glyphHeight, 1em);
    position: relative;
}
.button__glyphLabel::before {
    position: absolute;
    content: "";
    display: block;
    inset: 0;
    mask-image: var(--glyph);
    mask-size: var(--glyphSize, 1em 1em);
    mask-position: var(--glyphPosition, center center);
    mask-repeat: no-repeat;
    background: currentColor;
}

.button__glyphLabel--menu {
    --glyph: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIyLjI1IDE2Ljc1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2Utd2lkdGg6M3B4O308L3N0eWxlPjwvZGVmcz48ZyBpZD0iX+ODrOOCpOODpOODvF8xLTIiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEuNSwxLjVoMTkuMjUiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xLjUsOC4zOGgxOS4yNSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEuNSwxNS4yNWgxOS4yNSIvPjwvZz48L3N2Zz4=");
    --glyphSize: 1.4375em 1.0625em;
}
.button__glyphLabel--close {
    --glyph: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2LjYxIDE2LjYxIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2Utd2lkdGg6M3B4O308L3N0eWxlPjwvZGVmcz48ZyBpZD0iX+ODrOOCpOODpOODvF8yLTIiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEuNSwxNS4xMUwxNS4xMSwxLjUiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xLjUsMS41bDEzLjYxLDEzLjYxIi8+PC9nPjwvc3ZnPg==");
    --glyphSize: 1.0625em 1.0625em;
}

.button__glyphLabel--first {
    --glyph: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBvbHlsaW5lIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIxMiAyIDYgOCAxMiAxNCIvPjxsaW5lIGNsYXNzPSJjbHMtMSIgeDE9IjQiIHkxPSIyIiB4Mj0iNCIgeTI9IjE0Ii8+PC9zdmc+");
}
.button__glyphLabel--last {
    --glyph: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBvbHlsaW5lIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSI0IDIgMTAgOCA0IDE0Ii8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMTIiIHkxPSIyIiB4Mj0iMTIiIHkyPSIxNCIvPjwvc3ZnPg==");
}
.button__glyphLabel--prev {
    --glyph: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBvbHlsaW5lIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIxMCAyIDQgOCAxMCAxNCIvPjwvc3ZnPg==");
}
.button__glyphLabel--next {
    --glyph: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBvbHlsaW5lIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSI2IDIgMTIgOCA2IDE0Ii8+PC9zdmc+");
}

/** accordion **/
.accordion {
    border-radius: var(--controlCornerRadius);
    color: var(--textColorTertiary);
    background: var(--fillColorTertiary);
}

.accordion__trigger {
    font-weight: bold;
    color: var(--controlColor);
    display: flex;
    align-items: center;
    min-height: var(--controlMinHeight);
    cursor: pointer;
    padding-inline: var(--gapSecondary);
    border-radius: var(--controlCornerRadius);
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.2;
}
.accordion__content {
    border-top: solid 1px var(--borderColor);
    padding-block-start: calc(var(--gapSecondary) + (0.5em - 0.5lh));
    margin-block-end: calc(var(--gapSecondary) + (0.5em - 0.5lh));
    margin-inline: var(--gapSecondary);
}

.accordion__trigger::after {
        transition: transform 0.3s;
}

.accordion[open] .accordion__trigger::after {
    transform: rotate(90deg);
}

/** chooser **/
.chooser {
    line-height: var(--controlLineHeight);
    border: solid 1px var(--borderColor);
    border-radius: var(--controlCornerRadius);
    display: flex;
    width: fit-content;
    background: var(--fillColor);
}
@media (hover: hover) and (pointer: fine) {
    .chooser:has(.chooser__item:hover) {
        outline: var(--hoverRing);
    }
}

.chooser__item {
    padding-inline: 0.5em;
    color: var(--controlColor);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--controlMinHeight);
    text-decoration: none;
    border-radius: calc(var(--controlCornerRadius) - 1px);
    outline-offset: calc(var(--hoverRingWidth) * -1);
    cursor: default;
}
.chooser__item:any-link {
    cursor: pointer;
}
.chooser__item--current {
    background: var(--fillColorSecondary);
    color: var(--textColor);
}
.chooser__item--current::before {
    content: "✔";
    color: var(--accentColor);
}

/** hairline **/
.hairlineAfter {
    display: flex;
    align-items: center;
    gap: var(--gapTertiary);
    margin-block: calc(0.5em - 0.5lh);
}
.hairlineAfter::after {
    content: "";
    flex-grow: 1;
    flex-shrink: 1;
    height: 1px;
    border-block-start: solid 1px currentColor;
}

/** chevron **/
.chevronAfter::after {
    flex-grow: 0;
    flex-shrink: 0;
    align-self: center;
    justify-self: center;
    content: '';
    width: 1em;
    height: 1em;
    margin-inline-start: auto;
    mask-size: 100%;
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsOm5vbmU7fS5jbHMtMntzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJf44Os44Kk44Ok44O8XzEtMiI+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiLz48cG9seWxpbmUgY2xhc3M9ImNscy0yIiBkYXRhLWFjY29yZGlvbi1pY29uLXNoYXBlPSIiIHBvaW50cz0iNC45MyAxNC40MSAxMS41MiA3LjkxIDQuOTMgMS40MSIvPjwvZz48L3N2Zz4=");
    background: currentColor;
    opacity: 0.7;
}
.chevronAfter--bold::after {
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsOm5vbmU7fS5jbHMtMntzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9Il/jg6zjgqTjg6Tjg7xfMS0yIj48cmVjdCBjbGFzcz0iY2xzLTEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTIiIGRhdGEtYWNjb3JkaW9uLWljb24tc2hhcGU9IiIgcG9pbnRzPSI0LjcxIDE0LjUgMTEuMjkgOCA0LjcxIDEuNSIvPjwvZz48L3N2Zz4=");
}

/** text block **/
.textBlock {
    min-height: calc(1lh * var(--minLines, 1));
    max-height: calc(1lh * var(--maxLines, 2));
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--maxLines, 2);
    line-clamp: var(--maxLines, 2);
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: inherit;
}

/** image with filler **/
.imageWithFiller {
    display: grid;
    width: 100%;
    height: 100%;
    background: #eee;
    overflow: hidden;
}
.imageWithFiller__image {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.imageWithFiller__backdrop {
    grid-column: 1;
    grid-row: 1;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(12px) saturate(180%) opacity(50%);
    transform: scale(1.2);
}

/** select **/
.select {
    display: grid;
    align-items: center;
    border-radius: var(--controlCornerRadius);
    color: var(--controlColor);
    border: solid 1px var(--borderColor);
    box-sizing: border-box;
    min-height: var(--controlMinHeight);
    position: relative;
    outline: none !important;
}
.select::after {
    content: '';
    display: block;
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    aspect-ratio: 1;
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDExLjkgMTUuMTciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO3N0cm9rZTojMDAwO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MS41cHg7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJf44Os44Kk44Ok44O8XzEtMiI+PHBvbHlsaW5lIGNsYXNzPSJjbHMtMSIgZGF0YS1hY2NvcmRpb24taWNvbi1zaGFwZT0iIiBwb2ludHM9IjExLjE1IDYuMDIgNS45NSAuNzUgLjc1IDYuMDIiLz48cG9seWxpbmUgY2xhc3M9ImNscy0xIiBkYXRhLWFjY29yZGlvbi1pY29uLXNoYXBlPSIiIHBvaW50cz0iLjc1IDkuMTUgNS45NSAxNC40MiAxMS4xNSA5LjE1Ii8+PC9nPjwvc3ZnPg==");
    mask-size: var(--glyphSize, 1em 1em);
    mask-position: center center;
    mask-repeat: no-repeat;
    background: currentColor;
    pointer-events: none;
}
.select__label {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    pointer-events: none;
    width: calc(50% - var(--gapSecondary) / 2);
    width: calc(50% - 1em / 2);
    text-align: right;
}
.select__value {
    grid-column: 1;
    grid-row: 1;
    z-index: 0;
    background: var(--fillColor);
    cursor: pointer;
    appearance: none;
    border: none;
    font-size: inherit;
    line-height: calc(var(--controlMinHeight) - 2px);
    border-radius: calc(var(--controlCornerRadius) - 1px);
    color: inherit;
    padding-block: 0;
    padding-inline-start: calc(50% + 1em / 2);
    padding-inline-end: calc(var(--controlMinHeight) - 2px);
    outline-offset: 1px;
}

.select:has(.select__value:disabled)::after,
.select:has(.select__value:disabled) .select__label,
.select:has(.select__value:disabled) .select__value {
    opacity: 0.3;
    cursor: default;
}

.select__value--alignRight {
    text-align-last: right;
}
.select:not(:has(.select__label)) .select__value {
    padding-inline-start: 1.5em;
}
@media (hover: hover) and (pointer: fine) {
    .select__value:not(:disabled):focus-visible:hover {
        outline-offset: calc(var(--hoverRingWidth) + 0px) !important;
    }
    .select__value:not(:disabled):hover {
        outline-offset: calc(var(--hoverRingWidth) + 1px) !important;
    }
}

/** media block **/
.media {
    display: block;
    width: 100cqi;
    object-fit: contain;
    border: solid 1px var(--borderColor);
    border-radius: var(--panelPadding);
    overflow: hidden;
}

/** free text **/
.freeText {
    display: flex;
    flex-direction: column;
    gap: inherit;
}
.freeText .section {
    display: flex;
    flex-direction: column;
    gap: calc(1lh - 1em);
}
.freeText * + .section {
    margin-block-start: var(--gapTertiary);
}

/* paragraph */
.freeText p {
    margin-block: calc(0.5em - 0.5lh);
}

/* proviso */
.freeText .proviso {
    border: solid 1px var(--borderColor);
    background: var(--fillColorSecondary);
    border-radius: var(--panelPadding);
    padding-block: calc(0.5lh - 0.5em);
    padding-inline: 1.5em;
}

/* figure */
.freeText figcaption {
    background: var(--fillColorSecondary);
    padding: calc(0.5em - 0.5lh + var(--panelPadding)) var(--panelPadding);
}
@media screen and (width < 854px){
    .freeText figcaption {
        font-size: 0.8em;
    }
}

/* table */
.freeText table {
    border-collapse: collapse;
    line-height: 1.2;
    table-layout: auto;
}
.freeText caption {
    background: var(--fillColorSecondary);
    padding: calc(0.5em - 0.5lh + var(--panelPadding)) var(--panelPadding);
    border-block-start: solid 1px var(--borderColor);
    border-inline-start: solid 1px var(--borderColor);
    border-inline-end: solid 1px var(--borderColor);
}
.freeText th {
    background: var(--fillColorSecondary);
    color: var(--textColorSecondary);
    font-weight: bold;
}
.freeText th,
.freeText td {
    padding: var(--gapQuaternary) var(--gapSecondary);
    border: solid 1px var(--borderColor);
}

/** pager **/
.pager {
    width: fit-content;
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    justify-items: center;
    gap: var(--gapTertiary);
}
.pager__number {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}
.pager__current {
    text-align: end;
}

/** item image **/
.itemImage {
    position: relative;
    border-radius: var(--controlCornerRadius);
    overflow: hidden;
}
.itemImage__image {
    aspect-ratio: 1;
}
.itemImage__status {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
    color: var(--accentLabelColorSecondary);
    background: var(--accentColorSecondary);
    line-height: 1;
    padding: var(--gapQuaternary) var(--controlCornerRadius);
    border-start-start-radius: var(--gapTertiary);
    font-size: 0.8em;
    z-index: 1;
}
.itemImage__status--upper {
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    inset-block-end: auto;
    border-start-start-radius: unset;
    border-end-end-radius: var(--gapTertiary);
}

/** item card **/
.itemCard {
    container-type: inline-size;
    container-name: itemCard;
    text-decoration: none;
    color: var(--textColor);
    outline-offset: calc(0px - var(--hoverRingWidth)) !important;
    overflow: hidden;
    padding: var(--hoverRingWidth);
    border-start-start-radius: calc(var(--controlCornerRadius) + var(--hoverRingWidth));
    border-start-end-radius: calc(var(--controlCornerRadius) + var(--hoverRingWidth));
    border-end-start-radius: var(--gapTertiary);
    border-end-end-radius: var(--gapTertiary);
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: var(--gapTertiary);
}

.itemCard__body {
    display: flex;
    flex-direction: column;
    gap: var(--gapQuaternary);
}
.itemCard__title {
    color: var(--controlColor);
    font-weight: bold;
    word-break: keep-all;
    overflow-wrap: anywhere;
    --minLines: 2;
    --maxLines: 2;
}
.itemCard__title,
.itemCard__price {
    margin-block: calc(0.5em - 0.5lh);
}
.itemCard__priceAmount {
    font-weight: bold;
}

@container itemCard (width < 10.75em) {
    .itemCard__head,
    .itemCard__body {
        font-size: 0.8em;
    }
}

/** news **/
.news {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32em, 1fr));
    container-type: inline-size;
    container-name: news;
}

/* headline */
.news__headline {
    text-decoration: none;
    display: grid;
    grid-template-areas:
        "timestamp chevron"
        "title     chevron";
    grid-template-columns: 1fr min-content;
    gap: 0 var(--gapSecondary);
    container-type: inline-size;
    container-name: news-item;
    line-height: 1.2;
}
.news__headline::after {
    grid-area: chevron;
    color: var(--controlColor);
}
.section--wrapped .news__headline {
    background: var(--fillColorTertiary);
    color: var(--textColorTertiary);
    padding: var(--gapSecondary);
    border-radius: calc(var(--controlCornerRadius) - 1px);
}
.news__headlineTimestamp {
    grid-area: timestamp;
    margin-block-start: calc(0.5em - 0.5lh);
    color: var(--textColorSecondary);
}
.news__headlineTitle {
    grid-area: title;
    color: var(--controlColor);
    font-weight: bold;
    --maxLines: 1;
    margin-block-end: calc(0.5em - 0.5lh);
}

@container contents (width <= 32em) {
    .news {
        display: flex;
        flex-direction: column;
    }
}

@container news-item (width < 46em) {
    .news__headlineTitle {
        --minLines: 1;
        --maxLines: 2;
    }
}

/*** utils ***/
.caution {
    color: var(--textColorCaution);
}

/*** splide ***/

.splide.is-focus-in .splide__slide:focus-visible {
    outline: auto;
}
.splide__slide:focus-visible {
    outline: auto;
}

/** splide arrows **/
.splide__arrow {
    width: 2.75rem;
    height: 2.75rem;
    border: solid 1px #fff6;
    background: #fff9;
    box-shadow: 0 0 0.075em 0.075em #0006, 0 0 0.075em 0.075em #fffc inset;
    opacity: 1;
    overflow: hidden;/*safari*/
}
.splide__arrow:focus-visible {
    outline: auto !important;
}
.splide__arrow:disabled {
    background: #fff3;
    box-shadow: 0 0 0.075em 0.075em #0002, 0 0 0.075em 0.075em #fff2 inset;
    opacity: 1;
    cursor: not-allowed;
}
.splide__arrow:disabled svg {
    opacity: 0.1;
}
.splide__arrow:hover:not(:disabled) {
    background: #fff;
    outline-offset: -0.5em !important;
    opacity: 1;
}
.splide__arrow svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--controlColor);
    filter: drop-shadow(-0.1em -0.1em 0.1em #fff6) drop-shadow(0.1em -0.1em 0.1em #fff6) drop-shadow(-0.1em 0.1em 0.1em #fff6) drop-shadow(0.1em 0.1em 0.1em #fff6);
}
.splide:not(.is-overflow) .splide__arrows {
    display: none;
}

/*** layout ***/

.body {
    display: grid;
    grid-template-columns: min-content 1fr clamp(0px, calc(100% - (var(--sidebarWidth) + var(--gap) + 800px)), calc(var(--sidebarWidth) + var(--gap)));
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas:
        "header header header"
        "aside  main   margin"
        "footer footer footer";
    gap: var(--margin);
    position: relative;
}

.globalHeader {
    grid-area: header;
}

main {
    grid-area: main;
}

.globalSidebar {
    grid-area: aside;
    margin-inline-start: var(--gap);
}

.globalFooter {
    grid-area: footer;
}

.body:has(.contents--fullWidth) {
    grid-template-columns: min-content 1fr;
    grid-template-areas:
        "header header"
        "aside  main"
        "footer footer";
}
main:has(.contents--fullWidth) {
    margin-inline-end: var(--margin);
}

@media screen and (width < 854px){
    .body {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "header"
            "main"
            "footer" !important;
    }
    main {
        margin-inline-end: 0 !important;
        padding-inline: var(--gapSecondary);
    }
    .globalSidebar {
        margin-inline-start: 0;
        grid-area: unset;
        display: none;
        position: fixed;
        z-index: 9999;
    }
}

/*** menu state ***/

#menuState {
    display: none;
}
@media screen and (width < 854px) {
    #menuState {
        position: fixed;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(0px 0px 99.9% 99.9%);
        overflow: hidden;
        height: 1px;
        width: 1px;
        padding: 0px;
        border: 0px;
    }

    body:has(#menuState:focus-visible) label[for="menuState"] {
        outline: auto;
    }
}

/*** global header ***/

.globalHeader {
    line-height: 1;
    display: flex;
    flex-direction: column;
}

.globalHeader__menuButton {
    display: none;
    position: fixed;
    inset-block-start: var(--gapTertiary);
    inset-inline-end: var(--gapSecondary);
    width: var(--controlMinHeight);
    height: var(--controlMinHeight);
    color: var(--accentColor);
    background: var(--fillColor);
    border-radius: 50%;
    border: solid 1px var(--borderColor);
    z-index: 9997;
}

@media screen and (width < 854px) {
    .globalHeader__menuButton {
        display: flex;
    }
}

.globalHeader__main {
    display: flex;
    gap: var(--gap);
    color: var(--controlColor);
}

/** brand **/
.globalHeader__brand {
    flex-grow: 0;
    flex-shrink: 0;
    margin: var(--gapSecondary) 0 var(--gapSecondary) var(--gap);
}
.globalHeader__brandLink {
    display: block;
    width: fit-content;
    outline-offset: -1px;
}
.globalHeader__brandLogo {
    display: block;
    aspect-ratio: 205 / 61;
    width: var(--sidebarWidth);
}

/** controls **/
.globalHeader__controls {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    gap: var(--gapSecondary);
    container-type: size;
}

/** search **/
.globalHeader__search {
    flex-grow: 1;
    flex-shrink: 1;
    height: 3em;
    margin-block: auto;
    container-type: size;
    display: flex;
    border-radius: calc(infinity * 1px);
    border: solid 2px currentColor;
    overflow: hidden;
}
.globalHeader__search * {
    appearance: none;
    border: none;
}

/* search input */
.globalHeader__searchKeyword {
    flex-grow: 1;
    flex-shrink: 1;
    padding-inline-start: 50cqh;
    padding-inline-end: 150cqh;
    margin-inline-end: -100cqh;
    border-radius: 50cqh;
    font-size: 1rem;
    min-width: 0;
}
.globalHeader__searchKeyword:focus-visible {
    outline: auto;
    outline-offset: calc(var(--hoverRingWidth) - 5px);
}

@media (hover: hover) and (pointer: fine) {
    .globalHeader__searchKeyword:hover {
        outline: var(--hoverRing);
        outline-offset: calc(var(--hoverRingWidth) - 5px);
    }
}

/* search button */
.globalHeader__searchButton {
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 50cqh;
    aspect-ratio: 1 / 1;
    display: block;
    height: 100%;
    position: relative;
    color: inherit;
}
.globalHeader__searchButton::after {
    position: absolute;
    inset: 0;
    content: '';
    display: block;
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMiwuY2xzLTN7ZmlsbDpub25lO30uY2xzLTJ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7fS5jbHMtMiwuY2xzLTN7c3Ryb2tlOiMwMDA7c3Ryb2tlLXdpZHRoOjYuMjNweDt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9Il/jg6zjgqTjg6Tjg7xfMS0yIj48Y2lyY2xlIGNsYXNzPSJjbHMtMyIgY3g9IjI5LjY0IiBjeT0iMjkuNjIiIHI9IjIzLjY0Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNjAsNjBsLTEwLjE0LTEwLjE0Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiLz48L2c+PC9zdmc+");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 50%;
    background: currentColor;
}
.globalHeader__searchButton:any-link:focus-visible {
    outline: auto;
    outline-offset: calc(var(--hoverRingWidth) - 5px);
}

@media (hover: hover) and (pointer: fine) {
    .globalHeader__searchButton:any-link:hover {
        outline: var(--hoverRing);
        outline-offset: calc(var(--hoverRingWidth) - 5px);
    }
}
.globalHeader__searchButtonLabel {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0px;
    border: 0px;
}

/** toolbar **/
.globalHeader__toolbar {
    display: grid;
    grid-auto-flow: column;
    gap: var(--gapSecondary);
}
.globalHeader__toolbarItem {
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-block: var(--gapSecondary);
    color: inherit;
    font-size: 0.8em;
    padding-block-end: 0.75em;
    position: relative;
    white-space: nowrap;
    border-radius: 0.125em;
    overflow: visible;
}
.globalHeader__toolbarItem::before {
    position: absolute;
    inset: 0;
    content: '';
    z-index: -1;
}
.globalHeader__toolbarItem::after {
    position: absolute;
    inset: 0;
    content: '';
    background: currentColor;
    mask-position: center var(--gapSecondary);
    mask-repeat: no-repeat;
    mask-size: 2em;
}
@media (hover: hover) and (pointer: fine) {
    .globalHeader__toolbarItem:hover {
        outline: var(--hoverRing);
        outline-offset: var(--hoverRingWidth);
    }
}
.globalHeader__toolbarItem--fav::after {
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsOm5vbmU7fS5jbHMtMntzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6NS42NnB4O308L3N0eWxlPjwvZGVmcz48ZyBpZD0iX+ODrOOCpOODpOODvF8xLTIiPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTEwLjY0LDM2LjQzbDE5LjY2LDE4LjQ3Yy42OC42MiwxLjAyLjk2LDEuNDEsMS4wNS4yLjAzLjM3LjAzLjU3LDAsLjQtLjA4Ljc0LS40LDEuNDEtMS4wNWwxOS42Ni0xOC40N2M1LjU0LTUuMjEsNi4yLTEzLjc1LDEuNTYtMTkuNzVsLS44OC0xLjEzYy01LjU3LTcuMTktMTYuNzUtNS45Ny0yMC42NSwyLjIzLS41NywxLjE2LTIuMjEsMS4xNi0yLjc3LDAtMy45LTguMi0xNS4wOC05LjQyLTIwLjY1LTIuMjNsLS44OCwxLjEzYy00LjY0LDYtMy45OSwxNC41NCwxLjU2LDE5Ljc1WiIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ii8+PC9nPjwvc3ZnPg==");
}
.globalHeader__toolbarItem--history::after {
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsOm5vbmU7fS5jbHMtMntzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2Utd2lkdGg6NS4wOXB4O308L3N0eWxlPjwvZGVmcz48ZyBpZD0iX+ODrOOCpOODpOODvF8xLTIiPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTI2LjczLDM5LjY0bDEwLjE4LDEwLjE4LTEwLjE4LDEwLjE4Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTYuMzksMjMuMDljLTEuNTgsMi43LTIuMzksNS43OC0yLjM5LDguOTFzLjgxLDYuMjEsMi4zOSw4LjkxYzEuNTUsMi43LDMuODIsNC45Niw2LjUyLDYuNTJzNS43OCwyLjM5LDguOTEsMi4zOSIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTM2LjkxLDI0LjM2bC0xMC4xOC0xMC4xOCwxMC4xOC0xMC4xOCIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTQ3LjI0LDQwLjkxYzEuNTgtMi43LDIuMzktNS43OCwyLjM5LTguOTFzLS44MS02LjIxLTIuMzktOC45MWMtMS41NS0yLjctMy44Mi00Ljk2LTYuNTItNi41Mi0yLjctMS41NS01Ljc4LTIuMzktOC45MS0yLjM5Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiLz48L2c+PC9zdmc+");
}
.globalHeader__toolbarItem--login::after {
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMiwuY2xzLTMsLmNscy00e2ZpbGw6bm9uZTt9LmNscy0ye3N0cm9rZS1saW5lam9pbjpyb3VuZDt9LmNscy0yLC5jbHMtM3tzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2Utd2lkdGg6NXB4O30uY2xzLTIsLmNscy0zLC5jbHMtNHtzdHJva2U6IzAwMDt9LmNscy0ze3N0cm9rZS1taXRlcmxpbWl0OjEwO30uY2xzLTR7c3Ryb2tlLXdpZHRoOjUuNDFweDt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9Il/jg6zjgqTjg6Tjg7xfMS0yIj48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik0xNC4xNCwxOC44NXYtMS40MWMwLTUuODEsMC04LjcxLDEuODctMTAuMzMsMS44Ny0xLjYyLDQuNzMtMS4yMiwxMC40OS0uMzhsMTEuNTcsMS42NWM2LjYzLjk1LDkuOTUsMS40MywxMS45NSwzLjcsMS45NywyLjMsMS45Nyw1LjY1LDEuOTcsMTIuMzZ2MTUuMTJjMCw2LjcxLDAsMTAuMDYtMS45NywxMi4zNi0yLDIuMy01LjMzLDIuNzYtMTEuOTUsMy43bC0xMS41NywxLjY1Yy01Ljc2LjgxLTguNjMsMS4yNC0xMC40OS0uMzgtMS44Ny0xLjYyLTEuODctNC41Mi0xLjg3LTEwLjMzdi0uODciLz48cmVjdCBjbGFzcz0iY2xzLTEiIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIvPjxsaW5lIGNsYXNzPSJjbHMtMyIgeDE9IjYiIHkxPSIzMiIgeDI9IjM4IiB5Mj0iMzIiLz48cG9seWxpbmUgY2xhc3M9ImNscy0yIiBwb2ludHM9IjI4IDE4IDM4IDMyIDI4IDQ2Ii8+PC9nPjwvc3ZnPg==");
}
.globalHeader__toolbarItem--mypage::after {
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZGVmcz48c3R5bGU+LmNscy0yLC5jbHMtM3tmaWxsOm5vbmU7fS5jbHMtMiwuY2xzLTN7c3Ryb2tlOiMwMDA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjZweDt9LmNscy0ze3N0cm9rZS1saW5lY2FwOnJvdW5kO308L3N0eWxlPjwvZGVmcz48Y2lyY2xlIGNsYXNzPSJjbHMtMiIgY3g9IjMyIiBjeT0iMjIiIHI9IjE2Ii8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNNiw1OHM1LjU3LTE4LDI2LTE4LDI2LDE4LDI2LDE4Ii8+PC9zdmc+");
}
.globalHeader__toolbarItem--cart::after {
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMiwuY2xzLTN7ZmlsbDpub25lO30uY2xzLTJ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO30uY2xzLTIsLmNscy00LC5jbHMtM3tzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2Utd2lkdGg6NC41OHB4O308L3N0eWxlPjwvZGVmcz48ZyBpZD0iX+ODrOOCpOODpOODvF8xLTIiPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTQsNGg2LjNjMS43MiwwLDIuNTksMCwzLjIxLjQ4cy44MiwxLjMzLDEuMjQsMi45OGwuODIsMy4zMmMuNzEsMi44LDEuMDUsNC4xOSwxLjk5LDUuMTEuMjMuMjMuNDguNDEuNzYuNiwxLjEyLjY5LDIuNTcuNjksNS40My42OSIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTUwLjEsNDYuODJIMTUuNjljLTEuNzIsMC0yLjU5LDAtMy4xNi0uMzctLjQ4LS4zMi0uODItLjgtLjk5LTEuMzUtLjE2LS42Ni4xMS0xLjQ5LjY2LTMuMTIuNjItMS44My45Mi0yLjczLDEuNDktMy40MS40OC0uNTcsMS4xLTEuMDMsMS43OS0xLjMxLjgyLS4zMiwxLjc5LS4zMiwzLjcxLS4zMmgxNy43NiIvPjxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTQzLjk4LDM2Ljk1aC0yMi45NGMtMi4yMiwwLTQuMTUtMS42My00LjUxLTMuODNsLTEuOTktMTEuOTRjLS4zNC0yLjA5LDEuMjgtNC4wMSwzLjM5LTQuMDFoMzUuMDZjMS43MiwwLDIuODIsMS43OSwyLjA2LDMuMzJsLTYuOTcsMTMuOTFjLS43OCwxLjU2LTIuMzYsMi41NC00LjEsMi41NFoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjQ2LjgyIiBjeT0iNTYuNyIgcj0iMy4zIi8+PGNpcmNsZSBjbGFzcz0iY2xzLTQiIGN4PSIyMC40NyIgY3k9IjU2LjciIHI9IjMuMyIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ii8+PC9nPjwvc3ZnPg==");
}

.globalHeader__toolbarCartBadge {
    font-size: 0.75em;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 2;
}

@media (width >= 854px) {
    .globalHeader__toolbarItem--cart {
        padding-block-end: calc(0.75em + var(--gapSecondary));
        margin-block: 0;;
        width: 100cqh;
        height: 100cqh;
        color: var(--accentLabelColorSecondary);
        outline-offset: calc(0px - var(--hoverRingWidth) - 5px);
    }
    @media (hover: hover) and (pointer: fine) {
        .globalHeader__toolbarItem--cart:any-link:hover {
            outline: var(--hoverRingStyle) var(--hoverRingWidth) currentColor;
            outline-offset: calc(0px - var(--hoverRingWidth) - 5px);
        }
    }
    /* cart */
    .globalHeader__toolbarItem--cart:focus-visible {
        outline: 3px solid var(--accentLabelColorSecondary);
    }
    .globalHeader__toolbarItem--cart::before {
        background: var(--accentColorSecondary);
    }
    .globalHeader__toolbarItem--cart::after {
        mask-position: center calc(var(--gapSecondary) + var(--gapSecondary));
    }
    /* badge */
    .globalHeader__toolbarCartBadge {
        font-size: 1em;
        inset-block-start: 1em;
        inset-inline-end: 1em;
    }
}

/** ribbon **/
.globalHeader__ribbon {
    background: var(--fillColorSecondary);
    padding: var(--gapTertiary) var(--gap);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gapSecondary);
    line-height: var(--controlLineHeight);
}
.globalHeader__ribbonText {
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.globalHeader__ribbonGroup {
    display: flex;
    gap: var(--gapSecondary);
}
.globalHeader__ribbonImage {
    display: block;
    height: 2em;
}
.globalHeader__ribbonSeparator {
    display: block;
    width: 2px;
    height: 1em;
    border-inline-start: solid 2px var(--borderColorSecondary);
}
.globalHeader__ribbonImage--npk {
    padding-block: 0.3em;
}

@media screen and (width < 854px) {
    .globalHeader__main {
        flex-direction: column;
        gap: var(--gapSecondary);
        margin-block-start: var(--gapSecondary);
    }

    .globalHeader__brand {
        margin: 0 var(--gapSecondary);
    }
    .globalHeader__brandLogo {
        aspect-ratio: 240 / 41;
        margin-block: -0.375em;
    }

    .globalHeader__controls {
        flex-direction: column;
        gap: var(--gapSecondary);
        container-type: inline-size;
    }

    .globalHeader__search {
        margin-inline: var(--gapSecondary);
    }

    .globalHeader__toolbar {
        justify-content: space-evenly;
        background: var(--fillColorSecondary);
    }

    .globalHeader__toolbarItem {
        min-height: 5em;
        min-width: 4em;
        width: fit-content;
        margin-block: 0;
    }
    .globalHeader__toolbarItem::after {
        mask-position: center 0.8rem;
    }

    .globalHeader__ribbon {
        display: none;
    }
}

/*** main contents ***/

.contents {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
    container-type: inline-size;
    container-name: contents;
    max-width: 800px;
    margin-inline: auto;
}
.contents--fullWidth {
    max-width: none;
    margin-inline: 0;
}
.contents__layout {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}
.contents__header {
    display: flex;
    flex-direction: column;
    gap: var(--gapTertiary);
}
.contents__eyebrow {
    margin-block: calc(0.5em - 0.5lh);
    line-height: 1.2;
    color: var(--textColorSecondary);
}
.contents__title {
    margin-block: calc(0.5em - 0.5lh);
    font-size: var(--labelFontSize);
    line-height: 1.2;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.contents__intro {
    margin-block: calc(0.5em - 0.5lh);
}
.contents__footer {
    border-top: solid 1px var(--borderColor);
    padding-block-start: var(--margin);
    text-align: center;
}
.contents__footer:has(.contents__footerNav) {
    text-align: center;
}
.contents__footerNav {
    display: inline-grid;
    grid-auto-columns: 1fr;
    gap: var(--gapSecondary);
}

/*** sku select ***/

.skuSelect {
    border: solid 1px transparent;
    border-radius: var(--panelPadding);
    display: grid;
    grid-template-columns: calc(2em + var(--gapSecondary)) auto 1fr;
    gap: 0 var(--gapSecondary);
}
.skuSelect:has(label.skuSelect__item) {
    border: solid 1px var(--borderColor);
    border-radius: var(--controlCornerRadius);
}

.skuSelect__item {
    display: grid;
    grid-column: 1/4;
    grid-template-areas:
        "marker label    price"
        "marker quantity price"
        "marker infoList infoList";
    grid-template-columns: subgrid;
    grid-template-rows: 0.8em 1.2em;
    padding-block: var(--gapSecondary);
    overflow: hidden;
}
label.skuSelect__item {
    color: var(--controlColor);
    cursor: pointer;
    outline-offset: calc(0px - var(--hoverRingWidth)) !important;
}
label.skuSelect__item + label.skuSelect__item {
    border-top: solid 1px var(--borderColor);
}

.skuSelect__item::before {
    grid-area: marker;
    align-self: center;
    justify-self: center;
    color: var(--accentColor);
    font-size: 2em;
    margin-block: calc(0.5em - 0.5lh);
    margin-inline-start: var(--gapSecondary);
}
.skuSelect__item:first-child {
    border-top: none;
    border-start-start-radius: var(--controlCornerRadius);
    border-start-end-radius: var(--controlCornerRadius);
}
.skuSelect__item:last-child {
    border-end-start-radius: var(--controlCornerRadius);
    border-end-end-radius: var(--controlCornerRadius);
}
.skuSelect__item:has(input[name="sku"]:checked) {
    background: var(--fillColorSecondary);
}
.skuSelect__item:has(input[name="sku"]:checked)::before {
    content: "✔";
}
.skuSelect__item:has(input[name="sku"]:focus-visible) {
    outline: auto;
}

.skuSelect__quantityLabel {
    grid-area: label;
    margin-block: calc(0.5em - 0.5lh);
    font-size: 0.8em;
}
.skuSelect__quantity {
    grid-area: quantity;
    margin-block: calc(0.5em - 0.5lh);
    font-size: 1em;
    --maxLines: 1;
}
.skuSelect__price {
    grid-area: price;
    margin-block: calc(0.5em - 0.5lh);
    font-size: 1.8em;
    text-align: right;
    color: var(--textColor);
    margin-inline-end: var(--gapSecondary);
    white-space: nowrap;
}
.skuSelect__priceUnit {
    font-size: 0.6em;
}

.skuSelect__infoList {
    margin-block: 0;
    grid-area: infoList;
    margin-inline-end: var(--gapSecondary);
    display: grid;
    grid-template-areas: "code status";
    gap: 0 var(--gapSecondary);
    font-size: 0.8em;
    line-height: 1.2;
}
.skuSelect__info {
    display: flex;
}
.skuSelect__info--code {
    grid-area: code;
    justify-content: start;
}
.skuSelect__info--status {
    grid-area: status;
    justify-content: end;
}
.skuSelect__info dd {
    margin-inline-start: 0;
}
.skuSelect__info dd::before {
    content: "：";
}

input[name="sku"] {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0px;
    border: 0px;
}

/*** global sidebar ***/

.globalSidebar {
    width: var(--sidebarWidth);
    display: flex;
    flex-direction: column;
    gap: var(--gapSecondary);
}

.globalSidebar__menuButton {
    display: none;
    align-self: flex-end;
    position: sticky;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: var(--controlMinHeight);
    height: var(--controlMinHeight);
    color: var(--accentColor);
    background: var(--fillColor);
    border-radius: 50%;
    border: solid 1px var(--borderColor);
    z-index: 9999;
    margin-block-end: calc((var(--controlMinHeight) + var(--gapSecondary)) * -1);
}

@media screen and (width < 854px) {
    .globalSidebar__menuButton {
        display: flex;
    }
}

/** sidebar header **/
@media (width >= 854px) {
    .globalSidebar__header {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(0px 0px 99.9% 99.9%);
        overflow: hidden;
        height: 1px;
        width: 1px;
    }
}
@media screen and (width < 854px) {
    .globalSidebar__header {
        margin-inline-end: calc(var(--controlMinHeight) + var(--gapSecondary));
    }
    .globalSidebar__title {
        line-height: var(--controlMinHeight);
        border-block-end: solid 1px currentColor;
    }
}

/** sidebar buttons **/
.globalSidebar__signinButton {
    font-weight: bold;
}

/** sidebar footer **/
.globalSidebar__footer {
    display: none;
}

@media screen and (width < 854px) {
    .globalSidebar {
        display: none;
        width: clamp(15em, 100% - var(--gapSecondary) * 2, 20em);
        background: var(--fillColorSecondary);
        border-radius: calc(var(--controlCornerRadius) + var(--gapSecondary));
        inset-block: var(--gapSecondary);
        inset-inline-start: 50%;
        transform: translateX(-50%);
        padding: var(--gapSecondary);
        overflow: auto;
        overscroll-behavior: contain;
        box-shadow: 0 0 0.25em 0.25em #0001, 0 0 0.125em 0.125em #0001, 0 0 0.125em 0.125em #fff inset;
    }

    .globalSidebar__footer {
        display: block;
        border-block-start: solid 1px currentColor;
        padding-block-start: var(--gapSecondary);
    }
    .globalSidebar__footerLink {
        display: block;
        width: fit-content;
        margin-inline: auto;
    }
    .globalSidebar__footerLogo {
        aspect-ratio: 240 / 41;
        margin-block: -0.375em;
        width: 15em;
    }

    body:has(#menuState:checked) {
        overflow: hidden;
    }
    body:has(#menuState:checked) .globalSidebar {
        display: flex;
    }

    #curtain {
        position: fixed;
        inset: 0;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        z-index: 9998;
    }
}

/** menu **/
.menu {
    display: flex;
    flex-direction: column;
    gap: var(--gapSecondary);
    line-height: var(--controlLineHeight);
    color: var(--controlColor);
}

/* menu list */
.menu__list {
    display: flex;
    flex-direction: column;
}
ul.menu__list {
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
}
.menu__trigger:has(.menu__icon) + .details-content > .menu__list {
    margin-inline-start: calc(var(--menuIconSize) + var(--gapTertiary));
}

/* menu border lines */
.menu > .menu__list {
    border: solid 1px var(--borderColor);
    border-radius: var(--controlCornerRadius);
    background: var(--fillColorTertiary);
}
.menu__listItem {
    border-block-start: dotted 1px var(--borderColor);
}
.menu > .menu__list > :first-child {
    border-block-start: none;
}

/* trigger item(summary element & link) */
.menu__trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    min-height: var(--controlMinHeight);
    padding-block: calc(1lh - 1em);
    padding-inline-start: var(--gapSecondary);
    padding-inline-end: var(--gapTertiary);
    gap: var(--gapTertiary);
    color: inherit;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    outline-offset: calc(0px - var(--hoverRingWidth) - 3px);
    border-radius: 1px; /* old safari */
    transition: border-end-start-radius 0.3s, border-end-end-radius 0.3s;
}
.menu__trigger::after {
    flex-grow: 0;
    flex-shrink: 0;
    content: '';
    width: 1em;
    height: 1em;
    margin-inline-start: auto;
    mask-size: 100%;
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsOm5vbmU7fS5jbHMtMntzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJf44Os44Kk44Ok44O8XzEtMiI+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiLz48cG9seWxpbmUgY2xhc3M9ImNscy0yIiBkYXRhLWFjY29yZGlvbi1pY29uLXNoYXBlPSIiIHBvaW50cz0iNC45MyAxNC40MSAxMS41MiA3LjkxIDQuOTMgMS40MSIvPjwvZz48L3N2Zz4=");
    background: currentColor;
    opacity: 0.7;
    transition: transform 0.3s;
}
summary.menu__trigger {
    font-weight: bold;
    overflow: hidden; /* safari */
}
summary.menu__trigger::after {
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsOm5vbmU7fS5jbHMtMntzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9Il/jg6zjgqTjg6Tjg7xfMS0yIj48cmVjdCBjbGFzcz0iY2xzLTEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTIiIGRhdGEtYWNjb3JkaW9uLWljb24tc2hhcGU9IiIgcG9pbnRzPSI0LjcxIDE0LjUgMTEuMjkgOCA0LjcxIDEuNSIvPjwvZz48L3N2Zz4=");
}
@media (hover: hover) and (pointer: fine) {
    summary.menu__trigger:hover,
    a:any-link.menu__trigger:hover {
        outline: var(--hoverRing);
        outline-offset: calc(0px - var(--hoverRingWidth));
    }
}
a.menu__trigger:not(:any-link) {
    opacity: 0.3;
    cursor: auto;
}
a.menu__trigger:not(:any-link)::after {
    display: none;
}
.menu__trigger--blankIcon {
    padding-inline-start: calc(var(--menuIconSize) + var(--gapTertiary) + var(--gapSecondary));
}
/* corner */
.menu > .menu__list > .menu__listItem:first-child > .menu__trigger {
    border-start-start-radius: var(--controlCornerRadius);
    border-start-end-radius: var(--controlCornerRadius);
}
.menu > .menu__list > .menu__listItem:last-child > .menu__trigger {
    border-end-start-radius: var(--controlCornerRadius);
    border-end-end-radius: var(--controlCornerRadius);
}
.menu > .menu__list > .menu__listItem:last-child .menu__list > .menu__listItem:last-child > .menu__trigger {
    border-end-end-radius: var(--controlCornerRadius);
}
[open] > .menu__trigger {
    border-end-start-radius: 0 !important;
    border-end-end-radius: 0 !important;
}
[open] > .menu__trigger::after {
    transform: rotate(90deg);
}

/* menu icon */
.menu__icon {
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--menuIconSize);
    height: var(--menuIconSize);
}

/* menu label */
.menu__label {
    flex-shrink: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--menuLabelMaxLines);
    line-clamp: var(--menuLabelMaxLines);
    max-height: calc(1lh * var(--menuLabelMaxLines));
    overflow: hidden;
    text-overflow: ellipsis;
}

/** calendar **/
.calendar {
    display: flex;
    flex-direction: column;
    gap: var(--gapSecondary);
}
.calendar__title {
    text-align: center;
    margin-block: calc(0.5em - 0.5lh);
}
.calendar__card {
    border: solid 1px var(--borderColor);
    border-radius: var(--panelPadding);
    padding: 0 var(--panelPadding) var(--panelPadding) var(--panelPadding);
    background: var(--fillColorTertiary);
}
.calendar__header {
    text-align: center;
    font-weight: normal;
    border-block-end: solid 1px var(--borderColor);
}

/** makeshop calendar reset **/
table[class^="makeshop-calendar"] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--panelPadding);
}
table[class^="makeshop-calendar"] thead,
table[class^="makeshop-calendar"] tbody,
table[class^="makeshop-calendar"] tr {
    display: contents;
}
table[class^="makeshop-calendar"] th,
table[class^="makeshop-calendar"] td {
    text-align: center;
}
table[class^="makeshop-calendar"] th {
    font-size: 0.6em;
    font-weight: normal;
    border-block-end: solid 1px var(--borderColor);
}
table[class^="makeshop-calendar"] td {
    border-radius: var(--panelPadding);
}

/* saturday & sunday */
table[class^="makeshop-calendar"] th.sunday,
table[class^="makeshop-calendar"] th.saturday,
table[class^="makeshop-calendar"] td.sunday,
table[class^="makeshop-calendar"] td.saturday {
    color: var(--textColorClosed);
}
table[class^="makeshop-calendar"] td.sunday,
table[class^="makeshop-calendar"] td.saturday {
    background: var(--fillColorClosed);
}

/* today */
table[class^="makeshop-calendar"] td.today {
    outline: dashed 2px var(--accentColor);
}

/** calendar legend **/
.calendar__legend {
    line-height: 1;
    display: flex;
    flex-direction: column;
    gap: var(--panelPadding);
    border: solid 1px var(--borderColor);
    border-radius: var(--panelPadding);
    padding: var(--panelPadding);
    background: var(--fillColorTertiary);
}
.calendar__legendTitle {
    font-weight: normal;
    text-align: center;
    padding-block-end: var(--panelPadding);
    border-block-end: solid 1px var(--borderColor);
}
.calendar__legendList {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    gap: var(--panelPadding) calc(var(--panelPadding) * 2);
    line-height: 2.4;
}
.calendar__legendListItem {
    display: grid;
    grid-template-columns: 2em auto;
    align-items: center;
    gap: var(--panelPadding);
}
.calendar__legendIcon {
    position: relative;
    aspect-ratio: 1;
}
.calendar__legendIcon::before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: '12';
    position: absolute;
    inset: 0;
    border-radius: var(--panelPadding);
    background: var(--legendIconColor, #fff);
}
.calendar__legendListItem--today .calendar__legendIcon::before {
    outline: dashed 2px var(--accentColor);
    outline-offset: -1px;
}
.calendar__legendListItem--closed .calendar__legendIcon::before {
    background: #f5eded;
    color: var(--textColorClosed);
}
.calendar__legendIconAppearance {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
}
.calendar__legendLabel {
    margin-inline-start: 0;
    font-size: 0.8em;
    line-height: var(--controlLineHeight);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--calendarLegendLabelMaxLines);
    line-clamp: var(--calendarLegendLabelMaxLines);
    max-height: calc(1lh * var(--calendarLegendLabelMaxLines));
    overflow: hidden;
    text-overflow: ellipsis;
}

/** calendar notes **/
.calendar__notes {
    display: flex;
    flex-direction: column;
    gap: var(--gapSecondary);
    font-size: 0.8em;
}
.calendar__notes p {
    margin-block: calc(0.5em - 0.5lh);
}

/*** global footer ***/

.globalFooter {
    background: var(--fillColorSecondary);
}
.globalFooter__inner {
    padding: var(--gap);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "paymentMethods shippingMethods"
        "navigation navigation";
    gap: var(--gap);
    margin-inline: auto;
    max-width: 80em;
}

/** footer guidance **/
.globalFooter__guidance--shipping {
    grid-area: shippingMethods;
}
.globalFooter__guidance--paymentMethods {
    grid-area: paymentMethods;
}
.globalFooter__guidanceTitle {
    color: var(--textColor);
    font-weight: bold;
    font-size: var(--labelFontSizeSecondary);
    pointer-events: none;
    touch-action: none;
    line-height: 1;
    margin: 0;
    padding: 0 var(--gapTertiary) var(--gapSecondary);
}
.globalFooter__guidanceContent {
    display: flex;
    flex-direction: column;
    gap: var(--gapSecondary);
    padding-block-start: var(--gapSecondary);
    border-block-start: solid 1px currentColor;
}
.globalFooter__guidanceContent a:any-link {
    color: var(--linkColorSecondary);
}
.globalFooter__guidanceGroup {
    display: flex;
    flex-direction: column;
    gap: var(--gapSecondary);
}
.globalFooter__guidanceGroupTitle {
    color: var(--textColor);
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-block: calc(0.5em - 0.5lh);
    margin-inline: calc(var(--gapTertiary) + 1px);
}
.globalFooter__guidanceGroupTitle::after {
    content: "";
    flex-grow: 1;
    flex-shrink: 1;
    height: 1px;
    border-block-start: dotted 1px currentColor;
}
.globalFooter__guidanceText {
    margin-block: calc(0.5em - 0.5lh);
    margin-inline: calc(var(--gapTertiary) + 1px);
}
.globalFooter__guidanceText p {
    text-align: justify;
}

/* payment brands */
.globalFooter__paymentMethodBrands {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: var(--gapTertiary);
    border-radius: var(--gapTertiary);
    background: var(--colorDodge);
    padding: var(--gapSecondary);
}
.globalFooter__paymentMethodBrandLogo {
    height: min(3em, 10dvw);
    max-width: 100%;;
}

/* guidance proviso */
.globalFooter__guidanceProviso.proviso {
    display: flex;
    flex-direction: column;
    gap: var(--gapQuaternary);
    padding: var(--gapTertiary) calc(var(--gapTertiary) + 1em);
    background: var(--colorDodge);
    border-radius: var(--gapTertiary);
    overflow: hidden;
    font-size: 0.8em;
}

/* guidance table */
.globalFooter__guidanceTable {
    border-radius: var(--gapTertiary);
    overflow: hidden;
}
.globalFooter__guidanceTable > div > dt {
    text-align-last: justify;
    background: var(--colorBurn);
}
.globalFooter__guidanceTable > div > dd {
    background: var(--colorDodge);
}
.globalFooter__guidanceTable > div > dt,
.globalFooter__guidanceTable > div > dd {
    padding: var(--gapQuaternary) var(--gapTertiary);
}
.globalFooter__guidanceTable > div:not(:first-child) > dt,
.globalFooter__guidanceTable > div:not(:first-child) > dd {
    border-block-start: dotted 1px var(--borderColor);
}

/** footer navigation **/
.globalFooter__navigation {
    grid-area: navigation;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    border-block-start: solid 1px var(--borderColorSecondary);
    padding-block-start: var(--gap);
}
.globalFooter__brandLink {
    display: block;
}
.globalFooter__brandLogo {
    display: block;
    aspect-ratio: 205 / 61;
    width: 12rem;
}
.globalFooter__navigationLinks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    color: var(--controlColor);
}
.globalFooter__navigationLinksItem {
    line-height: 2;
    margin-block: calc(0.5em - 0.5lh);
    color: currentColor;
    text-decoration: none;
}

/** copyright **/
.globalFooter__copyright {
    padding: var(--margin);
    text-align: center;
    line-height: 1.2;
    margin-block: calc(0.5em - 0.5lh);
    background: var(--fillColor);
}

@media screen and (width < 854px) {
    .globalFooter__inner {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "paymentMethods"
            "shippingMethods"
            "navigation";
        padding-inline: var(--gapSecondary);
    }
    .globalFooter__guidanceTitle {
        color: var(--controlColor);
        pointer-events: initial;
        touch-action: initial;
        cursor: pointer;
        font-size: var(--labelFontSizeTertiary);
        padding-block: var(--gapTertiary);
        margin-block: calc(var(--gapTertiary) * -1);
        display: flex;
        overflow: hidden;
        border-radius: 0.125em;
    }
    .globalFooter__guidanceTitle::after {
        margin-inline-start: auto;
        content: "";
        width: 1em;
        height: 1em;
        mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsOm5vbmU7fS5jbHMtMntzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9Il/jg6zjgqTjg6Tjg7xfMS0yIj48cmVjdCBjbGFzcz0iY2xzLTEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTIiIGRhdGEtYWNjb3JkaW9uLWljb24tc2hhcGU9IiIgcG9pbnRzPSI0LjcxIDE0LjUgMTEuMjkgOCA0LjcxIDEuNSIvPjwvZz48L3N2Zz4=");
        mask-size: 1em 1em;
        background: var(--controlColor);
        opacity: 0.7;
        transition: transform 0.3s;
    }
    [open] .globalFooter__guidanceTitle::after {
        transform: rotate(90deg);
    }
    @media (hover: hover) and (pointer: fine) {
        .globalFooter__guidanceTitle:hover {
            outline: var(--hoverRing);
        }
    }
    .globalFooter__guidanceContent {
        gap: var(--gapSecondary);
        padding-block-start: var(--gapSecondary);
        margin-block-start: var(--gapSecondary);
    }
    .globalFooter__brandLogo {
        aspect-ratio: 240 / 41;
        margin-block: -0.375em;
    }
}