#reels,
#reel button {
    padding: 0;
}

#reel {
    padding: 0 1rem;
}

#reel section,
#reels li a,
aside {
    padding: 0.5rem;
}

#reel,
#reel section,
#reels li a {
    margin: auto;
}

#addItem {
    margin-top: 2rem;
}

#reel nav,
#reels li a strong {
    margin-top: auto;
}

#reels,
#reel button,
ol#reels p {
    margin: 0;
}

#reel[hidden],
#reels[hidden],
#reels li[hidden],
#items[hidden],
#img[hidden] {
    display: none;
}

#reels {
    list-style: none inside;
}

#reel,
#reel section,
#reel nav,
#reel nav b,
#reel nav s,
#reels,
#reels li,
#reels li a,
aside {
    display: flex;
}

#reel nav,
#reel nav b,
#reel nav s,
aside {
    gap: 0.5rem;
}

#reel,
#reel section,
#reel nav,
#reels li,
#reels li a {
    flex-flow: column;
}

#reel nav b,
#reel nav s {
    justify-content: space-between;
}

#reel nav b {
    align-items: end;
}

ul#reels {
    flex-wrap: wrap;
}

ol#reels p {
    padding: 1rem 0.5rem;
    font-size: 150%;
    text-align: justify;
    text-align-last: justify;
    writing-mode: vertical-rl;
}

ol#reels p code {
    text-combine-upright: all;
}

aside,
ol#reels,
#reel #title {
    width: 100%;
}

ol#reels {
    overflow: auto;
}

ol#reels::before,
ol#reels li {
    flex: 0 0 auto;
    min-height: 321px;
    max-height: 65vh;
}

ol#reels li {
    transition: 1s;
    width: 80vw;
    max-width: 50vh;
}

#reel,
#reels li {
    background-position: center;
    background-repeat: no-repeat;
}

body {
    background-size: auto 100%;
    background-position: center;
    background-attachment: fixed;
}

#reel #size,
#reel #addtocart rt {
    background: #fff;
}

#reel #size {
    display: inline;
}

#reel,
#reels li {
    aspect-ratio: 9 / 16.9;
}

#reel #title {
    position: sticky;
}

#reel #title {
    top: 5rem;
}

aside {
    position: relative;
    z-index: 5;
    overflow: auto;
}

ul#reels li {
    justify-content: center;
    width: calc(100% / 5);
}

ul#reels {
    font-size: 1vw;
}

#reel #addtocart rt {
    font-size: 55%;
}

aside img {
    width: calc(100% / 4 - 1rem);
    max-width: 125px;
    max-height: 125px;
}

#reel {
    font-size: 1.1rem;
    max-width: calc(100svw - 2rem);
    height: calc(100svh - 2rem);
}

@media screen and (max-width: 1500px) {
    ul#reels {
        font-size: 1.23vw;
    }

    ul#reels li {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 1080px) {
    ul#reels {
        font-size: 1.75vw;
    }

    ul#reels li {
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 555px) {
    ul#reels {
        font-size: 2.5vw;
    }

    ul#reels li {
        width: calc(100% / 2);
    }
}

#items s u,
#items b u {
    min-width: 5rem;
}

@media screen and (max-width: calc(100dvh * 0.75)) {
    #reel {
        font-size: 2.5vw;
        overflow: hidden;
    }

    #items s u,
    #items b u {
        min-width: 15vw;
    }
}

@media screen and (width: calc(1080px)) {
    #reel {
        height: 100svh;
    }
}

#reel section,
#reels li a {
    width: calc(100% - 1rem);
    max-height: 100%;
    aspect-ratio: 1 / 1.555;
}

#reel button {
    border: none;
    outline: none;
}

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

#reel #title,
#reels li a strong,
#price {
    font-family: 'New York', Times, serif;
}

#reel #title,
#reels li a strong {
    font-size: 200%;
}

dialog input[type="submit"],
#addItem {
    font-size: 150%
}

header button.button {
    font-size: 111%;
}

#size {
    font-size: 95%;
}

header a,
header b,
#reel button,
#reel #thebest,
#reel #items {
    text-shadow: 0.1rem 0.1rem 0 #fff;
}

header button.button {
    box-shadow: 0.1rem 0.1rem 0 #fff;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
}

#reel #title,
dialog p input {
    display: block;
}

dialog p input,
dialog input[type="submit"] {
    width: 25rem;
    max-width: 100%;
}

#reel #title {
    text-align: left;
}

#items s u,
#items b u {
    text-align: right;
    width: max-content;
}

html:has(dialog#start[open]) {
    overflow: hidden;
}