html {
    font-size: 16px;
    height: -webkit-fill-available;
}

body {
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    display: grid;
    align-content: space-between;
    min-height: 100dvh;
}

header {
    color: #000;
    filter: invert();
    mix-blend-mode: exclusion;
}

a,
button,
select,
form textarea,
input[type="submit"],
#addItem,
dialog button.close,
#news button,
#codeAll button,
main details button,
#change {
    appearance: none;
    color: inherit;
    font-family: inherit;
    text-decoration: none;
}

select,
a.button,
button.button {
    border: 0.1rem solid;
    border-radius: 50%;
    box-shadow: 0.1rem 0.1rem 0px, 0.2rem 0.2rem 0;
    display: inline-block;
    outline: none;
    text-align: center;
}

button,
input[type="submit"],
#addItem {
    background: transparent;
}

input[type="submit"],
dialog button.close,
#login fieldset,
#login #reset,
#login hr,
#addItem,
#news button,
#codeAll button,
main details button,
#change,
hr {
    border: none;
    outline: none;
}

#news,
#codeAll,
main details ul {
    list-style: inside none;
}

.app-button,
button.button[hidden],
input[type="text"][hidden],
input[type="email"][hidden],
input[type="password"][hidden],
footer[hidden],
#news[hidden],
#news li[hidden],
h3#instagram[hidden],
#codeAll li[hidden],
main details li[hidden],
#change[hidden] {
    display: none;
}

dialog button.close,
footer h2::after,
details#readme section::before {
    display: block;
}

header,
footer,
#saleAd,
h3#instagram,
#news,
#news li,
#news button,
#codeAll li,
#codeAll button,
main details ul li,
main details button,
#change {
    display: flex;
}

header,
footer,
h3#instagram,
#saleAd {
    justify-content: space-between;
}

h3#instagram {
    gap: 1.5rem;
}

header,
footer,
main details button,
#news,
#news button,
#codeAll button,
#change {
    gap: 1rem;
}

#news li,
#codeAll li,
main details ul li {
    gap: 0.25rem 0.5rem;
}

h3#instagram,
#news {
    flex-flow: column;
}

footer,
#saleAd,
#news li,
#codeAll li,
main details ul li {
    flex-flow: wrap;
}

header,
h3#instagram {
    align-items: center;
}

#saleAd,
#news li,
#news button,
#codeAll li,
#codeAll button,
main details ul li,
main details button,
#change {
    align-items: baseline;
}

#change {
    place-self: start center;
}

footer {
    align-items: end;
    place-self: end center;
}

#news,
#news button,
#codeAll button,
main details button,
#change {
    justify-content: space-between;
}

body,
header h1,
dialog button.close,
#login fieldset,
#login fieldset legend,
#login #reset,
#news button,
h2#saleAd,
#codeAll button {
    padding: 0;
}

header,
footer h2,
footer nav,
summary,
footer,
#codeAll {
    padding: 0.5rem;
}

#codeAll button {
    padding: 0.5rem 0;
}

#news {
    padding: 1rem 0.5rem 2rem;
}

h3#instagram,
#readme section,
#moreinfo {
    padding: 1rem;
}

h3#saleAd {
    padding: 1.5rem 0.5rem 0;
}

main form#login {
    padding: 2rem 1rem;
}

#secret {
    padding: 3rem 1rem 2rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="submit"] {
    padding: 0.25rem;
}

#login #members {
    padding: 0.25rem 0.75rem;
}

select,
a.button,
button.button,
#items ruby button {
    padding: 0.25rem 1rem;
}

footer h2 small {
    display: inline-block;
    padding-top: 0.5rem;
}

body,
header h1,
footer h2,
footer #login h3,
header h1 input,
input[type="text"],
input[type="submit"],
dialog button.close,
h2#saleAd,
#login fieldset,
#login #reset,
#news,
#news button,
h3#instagram,
#codeAll,
#codeAll button,
main details ul,
main details button,
#change {
    margin: 0;
}

#login h2 small,
#login h3 small,
#codeAll li,
hr {
    margin: 1rem 0;
}

main details ul li {
    margin: 1rem;
}

h3#instagram a {
    margin: 0 auto 1rem;
}

#readme section {
    margin: 0.5rem;
}

footer h2::after,
footer h2 ruby rt {
    margin-top: 0.5rem;
}

main#items,
details#readme section::before {
    margin-bottom: 1rem;
}

h3#saleAd {
    margin: 2.5rem auto 5rem;
}

#items ruby button {
    margin: 1rem auto 2rem;
}

#login,
#secret {
    margin: auto;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="number"],
form input[type="password"],
#login label,
#login input[type="button"] {
    display: inline-block;
    margin: 0.25rem 0;
}

header,
footer,
main,
details,
h2#saleAd,
h3#saleAd strong,
#news button,
#codeAll button,
main details button,
#change,
hr {
    width: 100%;
}

h3#saleAd {
    width: 100%;
    max-width: 55rem;
}

#login fieldset input[type="text"],
#login fieldset input[type="email"],
#login fieldset input[type="password"],
#login fieldset input[type="button"],
#login fieldset input[type="submit"] {
    width: 100%;
    max-width: 100%;
}

header h1 img {
    margin-left: 0.2rem;
    width: 2.22rem;
}

main form#login {
    max-width: calc(750px - 2rem);
}

header h1,
header a,
header #back {
    min-width: 7.5rem;
}

#secret {
    max-width: max-content;
}

#secret label img {
    height: 2rem;
}

#info[open] #login {
    margin: 0 auto 1.5rem;
    max-width: 750px;
}

@media (display-mode: standalone) {
    .app-button {
        display: block;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: #fff;
        color: #000;
    }

    #items h2 strong,
    #all a code,
    #all rt b {
        -webkit-text-stroke: #000 0.075rem;
        color: #fff;
    }

    #special,
    #special form#login {
        filter: invert(1);
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #fff;
    }

    #items h2 strong,
    #all a code,
    #all rt b {
        -webkit-text-stroke: #fff 0.075rem;
        color: #000;
    }

    #items h2 img,
    #all a img,
    #secret label img {
        filter: brightness(1) invert(1);
    }
}

input[type="text"],
input[type="date"] {
    color: #000;
    background: #fff;
}

* {
    box-sizing: border-box;
}

@font-face {
    font-family: "San Francisco";
    src: url("font/Compact-Text-Regular.otf"),
        url("font/UI-Display-Regular.otf");
}

@font-face {
    font-family: "New York";
    src: url('font/NewYork.otf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Times New Roman";
    src: url('font/TimesNewRoman.ttf');
}

body {
    font-family: 'BlinkMacSystemFont', 'San Francisco', 'Hiragino Kaku Gothic ProN', 'メイリオ', Sans-Serif;
}

code,
footer h2 i,
footer h2 small,
#saleAd i {
    font-family: 'New York', Times, serif;
}

header select,
header a.button,
header button.button {
    font-family: 'Times New Roman', Times, serif;
}

header select,
header a.button,
header button.button,
footer h2 small {
    font-style: italic;
}

h3#saleAd {
    font-size: 7.5rem;
}

h2#saleAd {
    font-size: 200%;
}

footer h2,
dialog button.close,
#login strong,
#login #members,
h3#instagram b,
#saleAd i {
    font-size: 150%;
}

code,
footer h2 i,
main #login h2,
main #login h3,
#login fieldset legend,
#news a,
#news button,
#codeAll a,
#codeAll button,
main details button,
#change,
#saleAd strong {
    font-size: 123%;
}

header input,
footer #login h3,
#login #reset,
#login summary,
main #login h3 u,
main details ul li,
main details ul li b,
h3#instagram a,
#news li strong,
#saleAd b {
    font-size: 111%;
}

header h1,
select,
button.button,
footer #login #members {
    font-size: 100%;
}

footer h2 u,
#news button u {
    font-size: 90%;
}

#login h2 small,
#login h3 small,
footer h2 small {
    font-size: 75%;
}

footer h2::after,
#items ruby button {
    font-size: 55%;
}

#saleAd small {
    font-size: 25%;
}

input[type="number"],
input[type=password] {
    font-size: 22px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="submit"] {
    font-size: 16px;
}

#saleAd strong,
details#readme section::before {
    font-weight: 750;
}

footer h2::after {
    font-weight: 555;
}

header h1,
header b,
#login h2,
#login h3,
#login strong,
h3#instagram,
h3#instagram b,
footer h2,
footer h2 b,
footer h2 small,
button.button {
    font-weight: 500;
}

#saleAd {
    font-weight: 200;
}

button:not[disabled]:hover {
    cursor: pointer;
}

#items ruby button {
    border: solid 0.123rem;
    border-radius: 3rem;
    font-family: inherit;
}

#login #members {
    border: solid 0.123rem;
    border-radius: 2rem;
    font-family: inherit;
}

#readme section {
    border: solid 0.1rem;
    border-radius: 1rem;
    font-family: inherit;
}

#login #members[disabled] {
    color: #fff;
    background: #ccc;
}

#login #members:not([disabled]) {
    color: #111;
    background: #fff;
}

#login #members[disabled]:hover {
    cursor: not-allowed;
}

#login #members:not([disabled]):hover {
    cursor: pointer;
}

#login input:invalid {
    border: red solid 2px;
    color: red;
}

header input[type="submit"],
#login fieldset legend,
#login #reset,
#news a,
#codeAll a {
    border-bottom: 0.1rem solid;
}

dialog button.close {
    float: right;
}

header a,
header #back {
    text-align: right;
}

@media screen and (max-width: 750px) {
    #info[open] #login {
        padding: 0 0.5rem;
    }
}

@media screen and (max-width: 550px) {
    html {
        font-size: 3.5vw;
    }
}

@media screen and (width: 1080px) {
    html {
        font-size: 2vw;
    }

    h2#saleAd {
        gap: 0 5rem;
        font-size: 500%;
        line-height: 150%;
        padding: 1rem 1.5rem;
        position: sticky;
        top: 0;
        mix-blend-mode: exclusion;
    }

    h3#instagram {
        min-height: 15.5rem;
    }

    h3#instagram small {
        width: 100%;
    }

    h3#saleAd {
        align-content: end;
        height: calc(100svh - 11.5rem);
    }

    #saleInfo,
    h3#saleAd {
        padding: 1rem 1.5rem;
    }

    #codeAll {
        display: none;
    }

    main form#login {
        max-width: calc(100dvw - 5rem);
    }

    form#cart {
        min-height: calc(100dvh - 11rem);
    }
}

footer h2::after {
    content: "アビ ✨ ザ・ベスト・アイテムズ ✨ とてもおすすめの古着や雑貨";
}

details#readme section::before {
    content: "特定商取引法・古物営業法に基づく表示";
}

main details ul li strong,
main details summary b,
main details button b,
#news b,
#codeAll b,
#change b,
#moreinfo,
#readme section::before {
    transform: scale(1, 1.23);
}

main details ul li strong,
main details summary b,
main details button b,
#news b,
#codeAll b,
#change b {
    display: inline-block;
}

header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

h3#saleAd {
    background-image: url("./icon/red.png");
    background-size: 50%;
    background-position: top right;
    background-repeat: no-repeat;
}