/*
A Modern CSS Reset
Custom Property
Font & List Set
Device Set
*/

/* A Modern CSS Reset ==================== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul { margin: 0; padding: 0; font-weight: normal; }
ul[role=list], ol[role=list], li { list-style: none; }
html:focus-within { scroll-behavior: smooth; }
body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; }
a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; }
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }

@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Custom Property ==================== */
:root {
--color-primary: #fff;
--color-secondary: #ffe034;
--color-bg: #000;
--color-bg-goods: #182023;
--color-textlink: #f97932;
--color-att: #f00;
--gfont-jp: "Noto Sans JP";
--gfont-en: "Roboto";
--transition-opacity: opacity 0.2s ease-in-out;
--transition-all: all 0.2s ease-in-out;
--link-transform-scale: scale(1.1);
--fade-opacity: 0.7;
--border-white: 1px solid #fff;
--padding-rl-sp: 5%;
--width-pc: 1000px;
}


/* Font & List Set ==================== */
html { font-size: 10px; }
.fsSS { font-size: 75%; }
.fsS, .indentS { font-size: 87.5%; }
.fsL { font-size: 112.5%; }
.fsLL { font-size: 125%; }
.fwN { font-weight: normal; }
.fwB { font-weight: bold; }

.fc-att { color: var(--color-att); }
.fc-attB { color: var(--color-att); font-weight: bold;}

.taC { text-align: center; }
.taL { text-align: left; }
.taR { text-align: right;}

.indent, .indentS {
    padding-left: 1em;
    text-indent: -1em;
    padding-top: 2px;
    padding-bottom: 2px;
}

.indent-3em {
    padding-left: 2.6em;
    text-indent: -2.6em;
    padding-top: 2px;
    padding-bottom: 2px;
}

.li-disc li {
    list-style-type: disc;
    margin-left: 1.8em;
}

.li-circle li {
    list-style-type: circle;
    margin-left: 1.8em;
}

.li-square li {
    list-style-type: square;
    margin-left: 1.8em;
}

.li-decimal li, ol.li-decimal li {
    list-style-type: decimal;
    margin-left: 1.8em;
}

.li-decimalzero li {
    list-style-type: decimal-leading-zero;
    margin-left: 3em;
}

.li-lalpha li {
    list-style-type: lower-alpha;
    margin-left: 3em;
}

.indent li, .indentS li, .indentS-pc, .indent-3em li,
.li-disc li, .li-circle li, .li-square li, .li-decimal li, .li-decimalzero li, .li-lalpha li {
    padding-top: 2px;
    padding-bottom: 2px;
}

.li-pt10 li { padding-top: 10px; }
.li-pt20 li { padding-top: 20px; }
.li-pt10 li:first-child, .li-pt20 li:first-child { padding-top: 0; }


/* Device Set ==================== */
.sp { display: block !important;}
.sp-tab { display: block !important; }
.tab { display: none !important; }
.tab-pc { display: none !important;}
.pc { display: none !important;}

@media screen and (min-width: 640px) {
    .sp { display: none !important; }
    .tab { display: block !important; }
    .tab-pc { display: block !important; }
    .tab-pc-taC { text-align: center; }
}

@media screen and (min-width: 1100px) {
    .sp-tab { display: none !important; }
    .tab { display: none !important; }
    .pc { display: block !important; }
}