@charset "utf-8";

:root {
    --gray: #5a5758;
      --gray-light: #cccaca;
      --gray-superlight: #f0f0f0;
      --gray-ultralight: #f9f9f9;
      --gray-dark: #514e4f;
      --gray-verydark: #484546;
      --gray-superdark: #2d2b2c;
      --gray-ultradark: #121111;
    --blue: #c2c8cb;
      --blue-light: #d4d8da;
      --blue-verylight: #e0e3e5;
      --blue-superlight: #eceeef;
      --blue-dark: #aeb4b6;
      --blue-verydark: #878c8e;
      --blue-superdark: #616465;
    --pink: #e8a09d;
      --pink-light: #edc6c2;
      --pink-dark: #b9807d;
    --brown: #b98669;
      --brown-light: #caa177;
      --brown-dark: #a1805f;
    --orange: #db9e5f;
    --yellow: #e6d66d;
}

html {
    scroll-behavior: auto;
    overflow-y: scroll;
    height: 100%;
    font-size: 20px;
    @media (max-width: 1200px) {
        font-size: calc((100vw - 520px) / 170 + 16px);
    }
}

body {
    font-family: 'Rubik', 'Sawarabi Gothic', sans-serif;
    transition: .1s ease-in-out;
    animation: fadeIn 1s;
    letter-spacing: .06em;
    text-decoration: none;
    text-size-adjust: 100%;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-synthesis: weight style small-caps;
    font-feature-settings: 'palt';
}

img,
svg {
    max-width: 100%;
    height: auto;
}

.single button {
    background: none;
}

a,
img,
svg,
.single button {
    border: none;
}
.page table th,
.page table td,
.blog table th,
.blog table td  {
    border: 1px solid;
}
hr {
    border-top: 1px dotted;
}
strong,
em,
.shop a:not(figure a),
main.mokuji ul li:not(:last-child),
.text p a,
.text:not(main.mokuji) ul:not(.blog ul:last-child) li a,
.text ol li a {
    border-bottom: 1px dotted;
}
.text blockquote {
    border-left: 10px solid;
}
.comment .says:after {
    border: clamp(8px, 1.5vw, 16px) solid transparent;
    border-right: clamp(12px, 2vw, 24px) solid;
}
img,
.error button,
.comment .says,
.blog div,
.page #sales .sizes .columns-2 div {
    border-radius: 5px;
}
a.page-numbers,
span.page-numbers,
.comment .faceicon img {
    border-radius: 50%;
}

ul {
    list-style-type: disc;
}
.comment .says ol {
    list-style-type: lower-roman;
}
.blog ol {
    list-style-type: cjk-ideographic;
}
.viewon,
main.mokuji ul,
.blog ul:last-child {
    list-style-type: none;
}

.single button {
    cursor: pointer;
}
.single button.selected:hover {
    cursor: default;
}

.single button:hover,
.single button.selected {
    opacity: 1;
}
.splash img,
header img,
footer img,
footer svg,
.language svg {
    opacity: .9;
}
header .mokuji img,
footer .right img,
.single button {
    opacity: .75;
}
a:hover,
.language:hover,
footer .left:hover,
.error button:hover {
    opacity: .5;
}
.blog:not(.blog.single) article:not(:last-child)::after {
    opacity: .25;
}

.single button,
.blog:not(.blog.single) article:not(:last-child)::after {
    filter: grayscale(100%);
}
.single button:hover,
.single button.selected  {
    filter: grayscale(0%);
}

:hover {
    transition: .1s;
}

.splash img {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes zoomIn {
    from {
        transform: scale(.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
.zoomIn {
    animation: zoomIn .5s forwards;
}

/* ------------------------------------------------------------ colors */

a.page-numbers,
span.page-numbers {
    background: var(--gray-light);
}
body,
.splash {
    background: var(--gray-superlight);
}
.page-numbers.current,
.comment .faceicon img,
.comment .says,
.blog div,
.text table td {
    background: var(--gray-ultralight);
}
.text table th {
    background: var(--blue-verylight);
}
.text table td:first-child {
    background: var(--blue-superlight);
}
.error button {
    background: var(--pink);
}
.prev.page-numbers,
.next.page-numbers,
.page-numbers.dots,
.text table th:first-child {
    background: none;
}

.text table th,
.text table td {
    border-color: var(--blue-light);
}
.comment .says:after {
    border-right-color: var(--gray-ultralight);
}
strong,
em,
.shop a:not(figure a),
main.mokuji ul li:not(:last-child),
.blog ul:last-child li a,
.text p a,
.text ul li a,
.text ol li a {
    border-bottom-color: var(--blue);
}
.text blockquote {
    border-left-color: var(--blue-verylight);
}
.blog.text table th:first-child {
    border-top-color: var(--gray-ultralight);
    border-left-color: var(--gray-ultralight);
}
.text table th:first-child {
    border-top-color: var(--gray-superlight);
    border-left-color: var(--gray-superlight);
}
.prev.page-numbers,
.next.page-numbers,
.page-numbers.dots {
    border: none;
}

.archive h1 span,
.error h1 span {
    color: var(--gray);
}
.prev.page-numbers,
.next.page-numbers,
.page-numbers.dots,
.page-numbers.current {
    color: var(--gray-light);
}
.error button,
a.page-numbers,
span.page-numbers {
    color: var(--gray-ultralight);
}
body,
.splash,
.blog:not(.blog.single) a p {
    color: var(--gray-verydark);
}
footer .copyright p:nth-of-type(2),
.text table span span,
.page #kokeshi h2 span {
    color: var(--blue);
}
time,
footer .copyright p:nth-of-type(3),
.text .supplement,
.text .asterisk + span {
    color: var(--blue-light);
}
footer .copyright,
.text blockquote cite,
.text table th span span,
.text h1 + div > div:nth-of-type(1),
.text .footnote {
    color: var(--blue-dark);
}
footer .copyright p:nth-of-type(1),
.text blockquote {
    color: var(--blue-verydark);
}
main a,
.highlight {
    color: var(--pink);
}
.text .highlight {
    color: var(--brown-light);
}
.shop p a {
    color: var(--orange);
}

.archive h1 svg {
    fill: var(--gray);
}
.ja-button,
.en-button,
.dark-button,
header .mokuji a,
footer .right a,
.blog div div:nth-child(3) svg {
    fill: var(--blue);
}
time svg,
.error svg,
.blog ul:last-child li svg,
.text .asterisk {
    fill: var(--blue-light);
}
.shop svg,
.text .check {
    fill: var(--blue-dark);
}

/* ------------------------------ colors (darkmode) */

.darkmode {

    background: var(--gray-superdark);

    .splash {
        background: var(--gray-superdark);
    }
    a.page-numbers,
    span.page-numbers,
    .text table th {
        background: var(--gray-verydark);
    }
    .page-numbers.current,
    .comment .faceicon img,
    .comment .says,
    .blog div,
    .text table td {
        background: var(--gray-ultradark);
    }
    .text table td:first-child {
        background: var(--blue-superdark);
    }
    .error button {
        background: var(--pink-dark);
    }
    .prev.page-numbers,
    .next.page-numbers,
    .page-numbers.dots,
    .text table th:first-child {
        background: none;
    }
    .text table th,
    .text table td {
        border-color: var(--gray-verydark);
    }
    .comment .says:after {
        border-right-color: var(--gray-ultradark);
    }
    strong,
    em,
    .shop a:not(figure a),
    .blog ul:last-child li a,
    main.mokuji ul li:not(:last-child),
    .text p a,
    .text ul li a,
    .text ol li a {
        border-bottom-color: var(--gray);
    }
    .text blockquote {
        border-left-color: var(--gray-superdark);
    }
    .blog.text table th:first-child {
        border-top-color: var(--gray-ultradark);
        border-left-color: var(--gray-ultradark);
    }
    .text table th:first-child {
        border-top-color: var(--gray-superdark);
        border-left-color: var(--gray-superdark);
    }
    .prev.page-numbers,
    .next.page-numbers,
    .page-numbers.dots {
        border: none;
    }

    footer .copyright p:nth-of-type(1),
    .text blockquote cite,
    .text h1 + div > div:nth-of-type(1),
    .text .footnote {
        color: var(--gray);
    }

    color: var(--gray-light);

    .splash
    a.page-numbers,
    span.page-numbers,
    .shop p a,
    .blog:not(.blog.single) a p {
        color: var(--gray-light);
    }
    .prev.page-numbers,
    .next.page-numbers,
    .page-numbers.dots,
    .page-numbers.current {
        color: var(--gray-superlight);
    }
    footer .copyright p:nth-of-type(2),
    .text table span span,
    .text .supplement,
    .text .asterisk + span,
    .page #kokeshi h2 span {
        color: var(--gray-dark);
    }
    time,
    footer .copyright p:nth-of-type(3) {
        color: var(--gray-verydark);
    }
    .text table th span span {
        color: var(--gray-ultradark);
    }
    main a,
    .text a {
        color: var(--pink-dark);
    }
    .text .highlight {
        color: var(--brown-dark);
    }

    .ja-button,
    .en-button,
    .light-button,
    header .mokuji a,
    footer .right a,
    .blog div div:nth-child(3) svg {
        fill: var(--gray);
    }
    .shop svg {
        fill: var(--gray-light);
    }
    .text .check {
        fill: var(--gray-dark);
    }
    time svg,
    .error svg,
    .blog ul:last-child li svg,
    .text .asterisk {
        fill: var(--gray-verydark);
    }

}

/* ------------------------------------------------------------ fonts */

strong {
    font-weight: bold;
}

em,
cite {
    font-style: italic;
}

h1 {
    letter-spacing: .08em;
}
.text table span span {
    letter-spacing: .05em;
}

.text p {
    line-height: 1.4em;
}
.comment .says p {
    line-height: 1.3em;
}

.comment .says p,
.blog p {
    text-indent: 1em;
}

del,
s,
strike {
    text-decoration: line-through;
}

.text h1 + div > div:nth-of-type(1),
.page #sales h2,
.page #sales h3 {
    text-transform: uppercase;
}

h1 {
    font-size: 3rem;
}
.blog:not(.single) h2 {
    font-size: 2.5em;
}
h2,
.archive h1 {
    font-size: 2.25em;
}
.error h1,
main.mokuji ul li a {
    font-size: 2rem;
}
h3 {
    font-size: 1.75rem;
}
.page #kokeshi h2 span {
    font-size: 1.6rem;
}
big {
    font-size: 1.5rem;
}
.text p {
    font-size: 1.4rem;
}
a.page-numbers,
span.page-numbers,
.comment .says p big,
.blog div div:nth-child(3) ol,
.blog ul:last-child,
.text ul,
.text ol,
.text blockquote p {
    font-size: 1.3rem;
}
small,
.comment .says p,
.blog ul:last-child {
    font-size: 1.2rem;
}
.comment .says ul,
.comment .says ol,
.comment  blockquote p,
.shop p {
    font-size: 1.1rem;
}
.comment .says p small {
    font-size: 1rem;
}
time,
footer .copyright,
.thumb-large div .hex,
.error button,
.page h1 + div > div:nth-of-type(1),
.text table,
.text .footnote p,
.page #sales .type .columns-2 div figure + p,
.page #sales .type .columns-2 div figure + p + p {
    font-size: .9rem;
}
footer .copyright p:nth-of-type(3),
main.mokuji ul li time,
.text blockquote cite,
.text .asterisk + span,
.text .supplement p {
    font-size: .7rem;
}
rt,
footer .copyright p:nth-of-type(2),
.thumb-middle div .hex {
    font-size: .6rem;
}
.thumb-small div .hex,
.text table span span {
    font-size: .5rem;
}

/* ------------------------------------------------------------ images */

.splash img {
    width: clamp(200px, 20vw, 300px);
}
.shop div figure {
    width: clamp(180px, 26vw, 280px);
}
header h1 img,
header div img,
.error svg,
.page #sales div > svg {
    width: clamp(80px, 13vw, 140px);
}
.logo,
.single button {
    width: clamp(60px, 9vw, 100px);
}
footer .copyright svg,
.language svg {
    width: clamp(50px, 6vw, 70px);
}
.blog:not(.blog.single) article:not(:last-child)::after {
    width: clamp(50px, 6vw, 70px);
    height: clamp(40px, 5vw, 60px);
}
header .mokuji svg {
    width: clamp(45px, 4.5vw, 55px);
}
footer .left svg,
footer .right svg {
    width: clamp(35px, 3.5vw, 45px);
}
footer .right svg.icon-book,
.archive h1 svg,
.viewon img {
    width: clamp(30px, 3.25vw, 40px);
}
.shop svg,
.blog ul:last-child li svg,
.blog div div:nth-child(3) svg {
    width: clamp(16px, 2vw, 20px);
}
time svg {
    width: clamp(13px, 1.5vw, 18px);
}
.text .check {
    width: clamp(12px, 2vw, 18px); 
    height: clamp(12px, 2vw, 18px); 
}
main.mokuji ul li time svg,
.text .asterisk {
    width: clamp(9px, 1vw, 12px); 
    height: clamp(9px, 1vw, 12px);
}

/* ------------------------------------------------------------ layouts */

.splash,
header h1,
header div,
header .mokuji a,
footer .left,
footer .right a,
.language {
    position: fixed;
}
.splash img,
.thumbs div .hex,
.comment .says:after {
    position: absolute;
}
footer .copyright p:first-of-type span,
.thumbs div,
.comment .says {
    position: relative;
}

header h1,
header div,
header .mokuji a,
footer .left,
footer .right a,
.language {
    z-index: 1;
}
.splash {
    z-index: 2;
}

.thumbs,
.columns-2,
.columns-3,
.columns-4,
.columns-5 {
    display: grid;
    column-gap: clamp(10px, 1vw, 15px);
}
.blog {
    .columns-2,
    .columns-3 {
        column-gap: clamp(10px, 1.5vw, 20px);
    }
}
.thumbs {
    row-gap: clamp(10px, 1vw, 15px);
}
.columns-2,
.columns-3,
.columns-4,
.columns-5 {
    row-gap: 0;
}

.thumb-large {
    grid-template-columns: 1fr 1fr 1fr;
    @media (max-width: 1200px) {
        grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 960px) {
        grid-template-columns: 1fr;
    }
}
.thumb-middle {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    @media (max-width: 1200px) {
        grid-template-columns: 1fr 1fr 1fr;
    }
    @media (max-width: 960px) {
        grid-template-columns: 1fr 1fr;
    }
}
.thumb-small {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    @media (max-width: 1200px) {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    @media (max-width: 960px) {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}
.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}
.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}
.columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.ja,
.screen-reader-text,
#icons {
    display: none;
}
.logo,
footer .copyright div div,
.error svg,
.viewon::after,
.single time,
.blog time,
.text blockquote cite,
.text table span span,
.page #kokeshi h2 span {
    display: block;
}
@media (max-width: 520px) {
    .text {
        table,
        table thead,
        table tbody,
        table th,
        table td {
            display: block;
        }
    }
}
footer .copyright p:first-of-type,
footer .copyright svg,
.comment .says,
.comment .says:after,
.blog h1,
.blog h2,
.blog:not(.blog.single) article:not(:last-child)::after {
    display: inline-block;
}
@media (max-width: 520px) {
    .text table tbody tr { 
        display: inline-block; 
    }
}
.pagination,
a.page-numbers,
span.page-numbers,
.shop div,
.viewon,
.blog ul:last-child {
    display: flex;
}

.viewon,
.blog ul:last-child {
    flex-wrap: wrap;
}

.shop div {
    justify-content: space-around;
}
.viewon {
    justify-content: flex-start;
}
.blog ul:last-child {
    justify-content: end;
}
.pagination,
a.page-numbers,
span.page-numbers {
    justify-content: center;
    align-items: center;
}

.comment .says:after,
.viewon::after,
.blog:not(.blog.single) article:not(:last-child)::after {
    content: "";
}

.splash,
main,
nav,
footer,
.text table th,
.text table td {
    text-align: center;
}
.thumbs div .hex,
.text blockquote cite {
    text-align: right;
}
.comment .chatting,
.blog h1,
.blog h2,
.blog div div:nth-child(3),
main.mokuji ul,
.text p,
.text ul,
.text ol,
.text blockquote {
    text-align: left;
}

.text .asterisk,
.text .asterisk + span {
    vertical-align: super;
}
small {
    vertical-align: top;
}
.archive h1 svg,
main.mokuji ul li time,
main.mokuji ul li time svg,
.text table td,
.text .check {
    vertical-align: middle;
}
time {
    vertical-align: bottom;
}

hr,
.page #sales .shop,
.page #sales table {
    width: 90%;
}
.text table {
    width: 90%;
    @media (max-width: 520px) {
        width: 100%;
    }
}
.comment {
    width: 60%;
    @media (max-width: 960px) {
        width: 75%;
    }
    @media (max-width: 520px) {
        width: 90%;
    }
}
.viewon li,
.viewon::after {
    width: 13%;
    @media (max-width: 960px) {
        width: 25%;
    }
}
.shop {
    width: clamp(320px, 75%, 640px);
}

.splash {
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------ positions, margins */

#container {
    max-width: 1200px;
}
.blog {
    max-width: 960px;
}

header h1,
header div {
    inset: clamp(16px, 3vw, 40px) auto auto clamp(16px, 3vw, 40px);
}
header .mokuji a,
.language {
    inset: clamp(35px, 6vw, 75px) clamp(16px, 3vw, 40px) auto auto;
}
footer .right a {
    inset: auto clamp(16px, 3vw, 40px) clamp(16px, 3vw, 40px) auto;
}
footer .left {
    inset: auto auto clamp(16px, 3vw, 40px) clamp(16px, 3vw, 40px);
}
.thumbs div .hex {
    inset: auto clamp(4px, 1vw, 10px) clamp(4px, 1vw, 10px) clamp(4px, 1vw, 10px);
}

#container,
.error svg,
.comment,
.shop,
.page div,
.blog,
.blog div,
.blog div svg:not(.footnote svg, .asterisk, .supplement svg, .blog div div svg),
.text table {
    margin-right: auto;
    margin-left: auto;
}

hr {
    margin: clamp(30px, 4vw, 50px) auto;
}
.blog div div:nth-child(3) ol {
    margin: clamp(20px, 3vw, 40px) 0 0 clamp(60px, 7vw, 80px);
}
.page #sales table {
    margin: clamp(1px, 2vw, 20px) auto clamp(20px, 3vw, 40px) auto;
}
.single button,
.text blockquote {
    margin: auto clamp(20px, 3vw, 40px);
}
main.mokuji ul {
    margin: auto clamp(10px, 2vw, 20px);
}
time,
.blog ul:last-child li {
    margin: auto .8em;
}
strong,
em,
del,
s,
strike {
    margin: auto .15em;
}
.text .asterisk {
    margin: auto .05em auto .15em;
}
rt {
    margin: .3em auto .15em auto;
}
.blog h2 {
    margin-top: clamp(60px, 8vw, 100px);
}
footer .copyright,
.shop,
.blog h3 {
    margin-top: clamp(40px, 6vw, 80px);
}
footer .copyright p:nth-of-type(3) {
    margin-top: clamp(30px, 4vw, 50px);
}
.shop div {
    margin-top: clamp(20px, 3vw, 40px);
}
.text blockquote cite,
.page #kokeshi h2 span {
    margin-top: clamp(10px, 2vw, 20px);
}
.text table span span {
    margin-top: clamp(3px, 1vw, 7px);
}
.blog:not(.single) h2,
.blog p:first-child {
    margin-top: 0;
}
.blog ul:last-child {
    margin-top: clamp(-70px, -4vw, -30px);
}
.text .footnote {
    margin-right: clamp(20px, 5vw, 60px);
}
time svg,
.shop svg,
.text .check,
.text .asterisk + span {
    margin-right: .3em;
}
footer .copyright p span,
.archive svg {
    margin-right: .2em;
}
.blog ul:last-child li {
    margin-right: 0;
}
.blog time,
.blog:not(.blog.single) article:not(:last-child) {
    margin-bottom: clamp(60px, 8vw, 100px);
}
.archive h1,
.error svg,
.comment,
.viewon,
.single .photo div,
.single:not(.blog.single) .cover,
.single time,
.page > div,
.page h1 + div > div:nth-of-type(1),
.blog div,
.text h1,
.text h2,
.text h3,
.page #kokeshi h2 {
    margin-bottom: clamp(40px, 6vw, 80px);
}
.text ul:not(:last-child),
.text ol {
    margin-bottom: clamp(25px, 3.5vw, 45px);
}
footer .copyright svg,
.error button,
.shop p,
.single:not(.blog.single) h1,
.blog figure,
.blog div div,
.text p,
.text blockquote,
.text table,
.page #sales h3 {
    margin-bottom: clamp(20px, 3vw, 40px);
}
.blog:not(.blog.single) figure,
.page #sales .columns-2 div {
    margin-bottom: clamp(10px, 2vw, 20px);
}
footer .copyright p:nth-of-type(1),
.thumbs,
.page figure {
    margin-bottom: clamp(10px, 1vw, 15px);
}
.text .supplement p:not(:last-child),
.text .footnote p:not(:last-child) {
    margin-bottom: clamp(5px, .5vw, 10px);
}
.text ul li,
.text ol li {
    margin-bottom: .35em;
}
.comment .says ul li,
.comment .says ol li {
    margin-bottom: .25em;
}
time svg,
.archive h1 svg,
.shop svg,
.blog ul:last-child li svg,
.text .check {
    margin-bottom: .2em;
}
.comment .says p:last-child,
.blog .columns-2,
.blog .columns-3,
.blog:not(.blog.single) p,
.blog p:last-child {
    margin-bottom: 0;
}
.text ol {
    margin-left: clamp(60px, 7vw, 80px);
}
.comment .says ol,
.text ul {
    margin-left: clamp(40px, 5vw, 60px);
}
.text .footnote {
    margin-left: clamp(20px, 5vw, 60px);
}
.text blockquote p {
    margin-left: clamp(10px, 2vw, 20px);
}
main.mokuji ul li time {
    margin-left: 2em;
}
.blog ul:last-child li a {
    margin-left: .2em;
}
.prev.page-numbers,
.next.page-numbers,
.page-numbers.dots {
    margin: 0;
}

#container {
    padding: 0 clamp(10px, 2vw, 30px);
}
.viewon li {
    padding: clamp(20px, 2.5vw, 30px) 0;
}
.blog div,
.blog ul:last-child,
.text blockquote,
.text table th,
.text table td {
    padding: clamp(10px, 1.5vw, 20px);
}
.error button {
    padding: .5em .75em;
}
.blog div svg:not(.footnote svg, .asterisk, .supplement svg, .blog div div svg),
.page #sales h2,
.page #kokeshi h2 {
    padding-top: clamp(40px, 6vw, 80px);
}
header {
    padding-bottom: clamp(120px, 20vw, 220px);
}
footer .copyright p:nth-of-type(3) {
    padding-bottom: clamp(30px, 4vw, 50px);
}
.blog .columns-2,
.blog .columns-3 {
    padding: 0;
}

main.mokuji ul li {
    margin-top: .8em;
    padding-bottom: .8em;
}
.page h1 + div > div:nth-of-type(1) {
    margin-top: clamp(-70px, -5vw, -30px);
    padding-bottom: clamp(10px, 2vw, 20px); 
}

/* ------------------------------------------------------------ misc */

footer .copyright p:first-of-type {
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-indent: -2em;
    line-height: 1.5em;
    margin-top: 1em;
    margin-left: -.25em;
    @media (max-width: 520px) {
            letter-spacing: .5em;
    }
   span {
        float: none;
        left: .5em;
        top: -.5em;
        margin: 0;
    }
}

a.page-numbers,
span.page-numbers {
    width: clamp(50px, 6vw, 70px);
    height: clamp(50px, 6vw, 70px);
    margin: auto clamp(10px, 2vw, 20px);
}

.comment {
    .faceicon {
        float: left;
        width: clamp(90px, 11vw, 120px);
        margin-right: clamp(-130px, -12vw, -100px);
        @media (max-width: 520px) {
            width: clamp(70px, 8vw, 90px);
            margin-right: clamp(-110px, -9vw, -70px);
        }
    }
    .faceicon img {
        margin-bottom: 0;
    }
    .says {
        margin: 5px 0 0 clamp(120px, 14vw, 150px);
        padding: clamp(10px, 2vw, 20px) clamp(15px, 2vw, 25px);
        @media (max-width: 520px) {
            margin-left: clamp(90px, 10vw, 110px);
        }
    }
    .says:after {
        top: clamp(24px, 4vw, 40px); 
        left: clamp(-34px, -3vw, -20px);
    }
}

.text table {
    border-collapse: collapse;
    box-sizing: border-box;
    @media (max-width: 520px) {
        thead {
            float: left;
            overflow-x: scroll;
        }
         tbody,
         th { 
            width: auto;
        }
         tbody { 
            overflow-x: auto;
            white-space: nowrap;
        }
         tbody tr { 
            margin: 0 -3px;
        }
         th:not(:last-child),
         td:not(:last-child) { 
            border-bottom: none;
        }
    }
}

.blog:not(.blog.single) article:not(:last-child)::after {
    background-image: url('https://neko.toomanyunko.com/assets/logo-aniimo.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.page #sales .sizes .columns-2 div {
    &:nth-child(1),
    &:nth-child(2) {
        background-repeat: no-repeat, no-repeat;
        background-position: 50% 50%, 50% 50%;
        width: 100%;
        height: clamp(100px, 65vw, 850px);
    }
    &:nth-child(1) {
        background-image: url(https://neko.toomanyunko.com/assets/photos/DD048163P.webp), url(https://neko.toomanyunko.com/assets/sales-size-frame.webp);
        background-size: 83% 86%, 100% 100%;
    }
    &:nth-child(2) {
        background-image: url(https://neko.toomanyunko.com/assets/sales-size-2.webp), url(https://neko.toomanyunko.com/assets/sales-size-1.webp);
        background-size: 92% 95%, cover;
    }
}