:root {
    --color-theme: #FF8C87;
    --color-sub: #13A6B3;
    --color-sub-pale: #45D8E5;
    --color-sub-dark: #008590;
    --color-text: #333333;
    --color-text-pale: #888888;
    --color-border: #CCCCCC;
    --color-bg: #F7F7F7;
    --font-size-10: 0.625rem;
    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-32: 2rem;

}

/* reset */
p {
    margin-top: 0;
}

button {
    padding: 0;
    border: none;
    background-color: transparent;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

/* -------------------
base layout
------------------- */
html {
    font-size: 100%;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    font-size: 1rem;
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.75;
    color: var(--color-text);
}

body.is-fixed {
    overflow: hidden;
}

@media (max-width: 767px) {
    main {
        padding-top: 64px;
    }
}

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

.wrapper {
    width: 100%;
    max-width: 1680px;
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    margin: 2.5rem auto 7.5rem;
    padding: 0 2.5rem;
}

@media (max-width: 767px) {
    .wrapper {
        margin: 2.5rem auto 3rem;
        padding: 0 1rem;
    }
}

.side {
    width: 248px;
}

.content {
    flex: 1;
}

.align-center {
    text-align: center;
}

.note {
    margin-bottom: 0.5rem !important;
    margin-left: 0.75rem !important;
    text-indent: -0.75rem;
    font-size: var(--font-size-12);
    color: var(--color-text-pale);
    line-height: 1.25;
}

@media (max-width: 767px) {
    .note {
        margin-bottom: 0.25rem !important;
        font-size: var(--font-size-10);
    }
}

.note a {
    color: var(--color-sub);
}

.u-fs-14 {
    font-size: var(--font-size-14);
}

@media (max-width: 1023px) {
    .u-only-pc {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .u-only-tablet-up {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .u-only-tablet-down {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .u-only-sp {
        display: none !important;
    }
}

/* -------------------
button
------------------- */
.button--primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-sub);
    color: #FFF;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
}

.button--primary svg {
    margin-left: 8px;
    fill: #FFF;
}

.button--primary:hover {
    background-color: var(--color-sub-dark);
}

.button--secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-sub);
    color: var(--color-sub);
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
}

.button--secondary svg {
    margin-left: 8px;
    fill: var(--color-sub);
}

.button--secondary:hover {
    border: 1px solid var(--color-sub-dark);
    color: var(--color-sub-dark);
}

.button--secondary:hover svg {
    fill: var(--color-sub-dark);
}

.button--category {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    border: 1px solid var(--color-border);
    transition: all 0.3s;
    text-decoration: none;
    color: var(--color-text);
    cursor: pointer;
}

.button--category:hover {
    border-color: var(--color-sub-dark);
    color: var(--color-sub-dark);
}

.button-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 2.5rem 0 5rem;
}

@media (max-width: 1023px) {
    .button-group {
        flex-direction: column;
        gap: 2rem;
    }
}

/* button size */
.button--small {
    height: 40px;
    padding: 0 1.5rem;
    border-radius: 20px;
    text-align: center;
    font-size: var(--font-size-14);
    line-height: 1.25;
}

.button--medium {
    height: 64px;
    padding: 0 2rem;
    border-radius: 32px;
    text-align: center;
    font-size: var(--font-size-16);
    line-height: 1.25;
}

@media (max-width: 767px) {
    .button--medium {
        width: 100%;
        height: 56px;
        padding: 0 1.5rem;
        border-radius: 28px;
    }
}

.button--learge {
    height: 80px;
    padding: 0 2.8rem 0 2.5rem;
    border-radius: 40px;
    text-align: center;
    font-size: var(--font-size-24);
    font-weight: 600;
    line-height: 1.25;
}

@media (max-width: 767px) {
    .button--learge {
        height: 64px;
        padding: 0 2rem 0 1.8rem;
        border-radius: 32px;
        font-size: var(--font-size-20);
    }
}

.button--w100 {
    width: 100%;
}

/* float button (change color/filter) */
.float-button {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 0.5rem;
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 100;
}

@media (max-width: 767px) {
    .float-button {
        right: 0.75rem;
        bottom: 0.75rem;
    }
}

.button--change-color,
.button--filter {
    display: flex;
    align-items: center;
    background-color: var(--color-text);
    color: #FFF;
    cursor: pointer;
    transition: all 0.3s;
}

.button--change-color svg,
.button--filter svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    fill: #FFF;
}

.button--change-color:hover,
.button--filter:hover {
    background-color: #000;
}

.button--change-color .btn-label {
    display: flex;
    align-items: center;
}

.button--change-color .btn-label--close {
  display: none;
}

.button--change-color.is-open .btn-label--open {
  display: none;
}

.button--change-color.is-open .btn-label--close {
  display: inline-flex;
  align-items: center;
}

/* pager */
.pagination,
.pagination__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.pagination__prev,
.pagination__next,
.pagination__page,
.pagination__current {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    padding: 0 24px;
    border-radius: 24px;
    border: 1px solid var(--color-sub);
    text-align: center;
    font-size: var(--font-size-16);
    text-decoration: none;
    color: var(--color-sub);
}

.pagination__prev:hover,
.pagination__next:hover,
.pagination__page:hover {
    border-color: var(--color-sub-dark);
    color: var(--color-sub-dark);
}

.pagination__page.next,
.pagination__page.prev {
    width: auto;
}

.pagination__current {
    background-color: var(--color-sub);
    color: #FFF;
}

@media (max-width: 767px) {

    .pagination,
    .pagination__list {
        display: flex;
        gap: 0.75rem;
    }

    .pagination__prev,
    .pagination__next,
    .pagination__page,
    .pagination__current {
        height: 40px;
        padding: 0 12px;
        border-radius: 20px;
        font-size: var(--font-size-14);
    }

    .pagination__page {
        width: 40px;
    }

    .pagination__current {
        width: 40px;
    }
}

.set-purchase {
    margin: 2.5rem 0 5rem;
    text-align: center;
}

/* share */
.share,
.share__icons {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.share__label {
    font-size: var(--font-size-12);
}

.share__icon svg {
    display: block;
}

/* menu */
.menu-toggle {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    width: 48px;
    height: 48px;
    background-color: var(--color-sub);
    border-radius: 24px;
    cursor: pointer;
}

@media (max-width: 1023px) {
    .menu-toggle {
        display: flex;
    }
}

.menu-close,
.filter-close {
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-sub);
    border-radius: 24px;
    background-color: #FFF;
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    cursor: pointer;
}

@media (max-width: 767px) {

    .menu-close,
    .filter-close {
        top: 0.5rem;
        right: 1rem;
    }
}

.menu-toggle span,
.menu-close span,
.filter-close span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background-color: #FFF;
}

.menu-close span,
.filter-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--color-sub);
}

.menu-close span:first-child,
.filter-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu-close span:last-child,
.filter-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* toggle switch */
.toggle-switch__button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    cursor: pointer;
    font-size: var(--font-size-14);
}

@media (max-width: 767px) {
    .toggle-switch__button {
        font-size: var(--font-size-12);
    }
}

.toggle-switch__button::before {
    content: "";
    display: inline-block;
    box-sizing: content-box;
    width: 48px;
    height: 24px;
    border-radius: 12px;
    background-color: var(--color-border);
}

.toggle-switch__button.is-on::before {
    background-color: var(--color-sub);
}

.toggle-switch__button::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FFF;
    position: absolute;
    top: 2px;
    left: 2px;
}

.toggle-switch__button.is-on::after {
    left: 26px;
}

/* -------------------
header
------------------- */
.head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0 1.5rem;
    background-color: #fff;
}

@media (max-width: 767px) {
    .head {
        width: 100%;
        height: 64px;
        padding: 0 1rem;
        position: fixed;
        z-index: 200;
    }
}

.head__logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    line-height: 1;
    text-decoration: none;
}

@media (max-width: 767px) {
    .head__logo img {
        width: 76px;
    }
}

.head__logo-tagline {
    font-size: var(--font-size-12);
    color: var(--color-text);
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .head__logo-tagline {
        display: none;
    }
}

@media (max-width: 767px) {
    .head__logo-tagline {
        font-size: var(--font-size-10);
    }
}

.head__nav--pc {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.head__nav--pc ul {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-right: 0.5rem;
    font-size: var(--font-size-14);
}

.head__nav--pc ul a {
    color: var(--color-text);
    text-decoration: none;
}

.head__nav--pc ul a svg {
    margin-left: 4px;
    fill: var(--color-text);
}

.head__nav--pc ul a:hover {
    color: var(--color-sub);
    text-decoration: underline;
}

.head__nav--pc ul a:hover svg {
    fill: var(--color-sub);
}

/* sp menu */

.head__nav--sp {
    width: 100%;
    height: 100vh;
    background-color: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: scroll;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.head__nav--sp.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 300;
}


/* -------------------
footer
------------------- */
footer {
    background-color: #FFF;
}

.footer__wrapper {
    max-width: 1440px;
    margin: auto;
    padding: 3rem 2.5rem 6rem;
}

.fotter__title {
    margin-bottom: 0.5rem;
    font-size: var(--font-size-24);
    font-weight: 600;
}

@media (max-width: 767px) {
    .footer__wrapper {
        padding: 3rem 1rem 6rem;
    }

    .fotter__title {
        font-size: var(--font-size-18);
    }
}

.footer__category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.footer__tag {
    margin-bottom: 2.5rem;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

.tag-list__item {
    font-size: var(--font-size-14);
    color: var(--color-text);
    text-decoration: none;
}

.tag-list__item:hover {
    color: var(--color-sub-dark);
    text-decoration: underline;
}

.tag-list__item::before {
    content: "#";
    display: inline-block;
    margin-right: 4px;
}

.footer-cta {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 4%;
    margin-bottom: 2.5rem;
}

@media (max-width: 1023px) {
    .footer-cta {
        flex-direction: column;
        gap: 1.5rem;
    }
}

.footer-cta__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    height: auto;
    padding: 2rem;
    border-style: solid;
    border-width: 3px;
    border-radius: 8px;
    position: relative;
    transition: all 0.3s;
    text-decoration: none;
    color: var(--color-text);
    cursor: pointer;
}

@media (max-width: 1023px) {
    .footer-cta__item {
        width: 100%;
    }
}

.footer-cta__item-title {
    margin-bottom: 2.5rem;
    font-size: var(--font-size-24);
    font-weight: 600;
}

.footer-cta__item-title span {
    display: block;
    font-size: var(--font-size-14);
    font-weight: 600;
}

.footer-cta__item-title span::before {
    content: "●";
    display: inline-block;
    margin-right: 4px;
    font-size: var(--font-size-10);
}

.footer-cta__item-text {
    padding-right: 5rem;
    font-size: var(--font-size-14);
}

.footer-cta__item-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 32px;
    border-radius: 16px;
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    text-align: center;
}

@media (max-width: 767px) {
    .footer-cta__item {
        display: block;
        padding: 1rem;
    }

    .footer-cta__item-title {
        margin-bottom: 1.5rem;
        font-size: var(--font-size-18);
    }

    .footer-cta__item-title span {
        font-size: var(--font-size-12);
    }

    .footer-cta__item-text {
        padding-right: 0rem;
    }

    .footer-cta__item-icon {
        width: 40px;
        height: 24px;
        border-radius: 12px;
        right: 1rem;
        top: 2rem;
    }
}

.footer-cta__item-icon svg {
    fill: #FFF;
}

.footer-cta__item--order {
    border-color: var(--color-theme);
}

.footer-cta__item--order:hover {
    border-color: #EA7873;
    background-color: var(--color-bg);
}

.footer-cta__item--order .footer-cta__item-title span {
    color: var(--color-theme);
}

.footer-cta__item--order .footer-cta__item-icon {
    background-color: var(--color-theme);
}

.footer-cta__item--order:hover .footer-cta__item-icon {
    background-color: #EA7873;
}

.footer-cta__item--sale {
    border-color: var(--color-sub);
}

.footer-cta__item--sale:hover {
    border-color: var(--color-sub-dark);
    background-color: var(--color-bg);
}

.footer-cta__item--sale .footer-cta__item-title span {
    color: var(--color-sub);
}

.footer-cta__item--sale .footer-cta__item-icon {
    background-color: var(--color-sub);
}

.footer-cta__item--sale:hover .footer-cta__item-icon {
    background-color: var(--color-sub-dark);
}

.footer_bottom {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .footer_bottom {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
}

.footer__nav ul {
    display: flex;
    gap: 16px;
}

@media (max-width: 767px) {
    .footer__nav ul {
        flex-wrap: wrap;
    }
}

.footer__nav ul a {
    font-size: var(--font-size-14);
    color: var(--color-text);
    text-decoration: none;
}

.footer__nav ul a svg {
    margin-left: 4px;
    fill: var(--color-text);
}

.footer__nav ul a:hover {
    color: var(--color-sub-dark);
    text-decoration: underline;
}

.footer__nav ul a:hover svg {
    fill: var(--color-sub-dark);
}

.footer__copyright {
    margin: 0;
    font-size: var(--font-size-14);
}

/* bread clumb */
.bread-crumb {
    display: flex;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto 1.5rem;
    padding: 0 2.5rem 0;
    list-style: none;
    font-size: var(--font-size-14);
}

.bread-crumb li {
    white-space: nowrap;
}

.bread-crumb li:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.bread-crumb li a {
    color: var(--color-sub);
}

.bread-crumb li a::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 0.5rem;
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    transform: rotate(45deg);
}

@media (max-width: 767px) {
    .bread-crumb {
        padding: 0 1rem 0;
        font-size: var(--font-size-12);
    }

}


/* -------------------
mainvisual
------------------- */
.mainvisual {
    width: 100%;
    padding: 2.5rem 4rem 0;
}

.mainvisual__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 450px;
    max-width: 1440px;
    margin: auto;
    background-color: var(--color-sub-pale);
    border-radius: 16px;
}

.mainvisual__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    /*font-size: var(--font-size-24);*/
    font-size: clamp(0.875rem, 1.7vw, 1.5rem);
}

.mainvisual__logo img {
    width: clamp(184px, 22vw, 320px);
}

.mainvisual__text {
    font-size: clamp(0.75rem, 1.1vw, 1rem);
    text-align: center;
}

@media (max-width: 767px) {
    .mainvisual {
        padding: 2.5rem 1rem 0;
    }

    .mainvisual__wrapper {
        width: 100%;
    }

    .mainvisual__logo {
        font-size: var(--font-size-14);
    }

    .mainvisual__logo img {
        width: 184px;
    }

    .mainvisual__text {
        font-size: var(--font-size-12);
    }
}



/* -------------------
sidebar / sp menu
------------------- */
.side__title,
.menu__title {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.menu__wrap {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 3rem 7% 0;
}

@media (max-width: 767px) {
    .menu__wrap {
        gap: 1.5rem;
        padding: 3rem 1rem 0;
    }
}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 248px;
    margin-bottom: 1.5rem;
}

.category-list li {
    width: 120px;
    height: 104px;
}

.category-list a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-size: var(--font-size-14);
    color: var(--color-text);
    transition: all 0.3s;
}

.category-list a.is-active {
    background-color: var(--color-sub-pale);
}


.category-list a svg {
    width: 48px;
}

.category-list a svg .icon-color {
    fill: var(--color-theme);
}

.category-list a:hover {
    background-color: var(--color-sub-pale);
}

.category-list a:hover svg .icon-color {
    fill: var(--color-sub-dark);
}

.category-list--sp {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0;
}

.category-list--sp li {
    width: auto;
    height: auto;
    aspect-ratio: 1/1;
}

.category-list--sp a {
    background-color: var(--color-bg);
    font-size: clamp(var(--font-size-16), 1.85vw, var(--font-size-18));
}

.category-list--sp a svg {
    width: clamp(48px, 6.3vw, 64px);
}

@media (max-width: 767px) {
    .category-list--sp {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.375rem;
        margin-bottom: 0;
    }

    .category-list--sp li {
        aspect-ratio: 112/104;
    }

    .category-list--sp a {
        font-size: var(--font-size-12);
        font-size: clamp(var(--font-size-12), 2.8vw, var(--font-size-20));
    }

    .category-list--sp a svg {
        width: clamp(48px, 12.8vw, 80px);
    }
}

.menu-sp {
    /*margin-bottom: 1.5rem;*/
}

.menu-sp ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: 100%;
}

.menu-sp ul li {}

.menu-sp ul li a {
    display: block;
    padding: 1rem 0.5rem;
    border-radius: 4px;
    background-color: var(--color-bg);
    font-size: var(--font-size-14);
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
}

.menu-sp ul li a:hover {
    background-color: var(--color-sub-pale);
}

.menu-sp ul li svg {
    margin-left: 4px;
}

.menu-cta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 5rem;
}

.menu-cta .button--primary,
.menu-cta .button--secondary {
    width: 100%;
    height: 64px;
    padding: 0 2rem;
    border-radius: 32px;
    text-align: center;
    font-size: var(--font-size-16);
    line-height: 1.25;
}

.filter--sp {
    width: 100%;
    height: 100vh;
    background-color: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: scroll;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.filter--sp.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 300;
}

.filter__wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3rem 7% 8rem;
}

.filter__wrap form {
    width: 100%;
}

.filter__wrap .form-group {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 767px) {
    .filter__wrap {
        gap: 1rem;
        padding: 3rem 1rem 6rem;
    }

    .filter__wrap .form-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.filter__wrap .form-group>legend {
    grid-column: 1 / -1;
}

.filter__wrap .form-radio,
.filter__wrap .form-checkbox {
    width: auto;
    background-color: var(--color-bg);
}

.filter__wrap .button--primary {
    width: 90%;
    max-width: 320px;
    height: 64px;
    margin: auto;
    border-radius: 32px;
    font-size: var(--font-size-16);
    position: fixed;
    right: 0;
    left: 0;
    bottom: 2.5rem;
}

/* search */
.search {
    margin-bottom: 1.5rem;
    position: relative;
}

.search__input {
    width: 100%;
    height: 48px;
    padding: 0 2rem 0 1rem;
    border-radius: 24px;
    border: 1px solid var(--color-border);
    background-color: #FFF;
    outline-offset: 0;
}

.search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.search--sp {
    margin-bottom: 0;
}

.search--sp .search__input {
    height: 64px;
    padding: 0 2.5rem 0 1.5rem;
    border-radius: 32px;
}

.search__input::placeholder {
    color: var(--color-border);
}

.search__button {
    margin: auto;
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    fill: var(--color-sub);
    cursor: pointer;
}

/* sort */
.subtitle {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: var(--font-size-14);
    font-weight: 600;
    line-height: 1.0;
}

.subtitle::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 0.5rem;
    border-radius: 2px;
    background-color: var(--color-theme);
}

.form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* radio */
.form-radio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 120px;
    height: 40px;
    padding: 0.25rem 0;
    border-radius: 4px;
    background: #FFF;
    cursor: pointer;
    transition: all 0.3s;
}

.form-radio__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-radio__ui {
    position: relative;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #FFF;
    flex-shrink: 0;
}

.form-radio__ui::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #FFF;
    opacity: 0;
}

.form-radio__label {
    font-size: var(--font-size-14);
    color: var(--color-text);
}

.form-radio__input:checked+.form-radio__ui {
    border-color: var(--color-sub-dark);
}

.form-radio__input:checked+.form-radio__ui::after {
    background: var(--color-sub-dark);
    opacity: 1;
}

.form-radio:has(.form-radio__input:checked) {
    background: var(--color-sub-pale);
}

/* checkbox */
.form-checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    width: 120px;
    height: 40px;
    padding: 0.25rem 0;
    border-radius: 4px;
    background: #FFF;
    cursor: pointer;
    transition: all 0.3s;
}

.form-checkbox__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-checkbox__ui {
    position: relative;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: #FFF;
    flex-shrink: 0;
}

.form-checkbox__ui::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 5px;
    border-left: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    opacity: 0;
    transform: rotate(-45deg)translate(0, 3px);
}

.form-checkbox__label {
    font-size: var(--font-size-14);
    color: var(--color-text);
}

.form-checkbox__input:checked+.form-checkbox__ui {
    border: 1px solid var(--color-sub-dark);
}

.form-checkbox__input:checked+.form-checkbox__ui::after {
    border-color: var(--color-sub-dark);
    opacity: 1;
}

.form-checkbox:has(.form-checkbox__input:checked) {
    background: var(--color-sub-pale);
}



/* -------------------
archive
------------------- */

.content__archive {
    padding-bottom: 5rem;
}

.content__archive~.content__archive {
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-border);
}

.content__title {
    margin-bottom: 1.5rem;
}


.content__title h1,
.content__title h2 {
    font-size: var(--font-size-24);
}

.content__title h1,
.content__title h2,
.content__title p {
    margin: 0;
}

.home .content__title,
.archive .content__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 767px) {

    .content__title h1,
    .content__title h2 {
        font-size: var(--font-size-20);
    }

    .home .content__title,
    .archive .content__title {
        flex-direction: column;
        align-items: start;
        gap: 0.5rem;
    }

}

.archive .content__title p {
    font-size: var(--font-size-14);
}

.post-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/*
@media (min-width: 1600px) {
    body:not(.single) .post-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}*/

@media (max-width: 1280px) {
    .post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .post-grid {
        gap: 1rem;
    }
}

.post-item {}

.post-item a {
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.3s;
}

.post-item__image {
    background-color: #FFF;
    border-radius: 8px;
    aspect-ratio: 1/ 1;
}

.post-item__image svg {
    display: block;
}

.post-item__title,
.post-item__category {
    margin: 0;
}

.post-item__title {
    margin: 1.25rem 0 0.5rem;
    font-size: var(--font-size-16);
    font-weight: 400;
    line-height: 1.5;
}

.post-item__category {
    font-size: var(--font-size-12);
    color: var(--color-text-pale);
}

.post-item--ad .post-item__image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.post-item a:hover .post-item__image {
    opacity: 0.8;
}


.post-item a:hover .post-item__title {
    color: var(--color-sub);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .post-item__title {
        margin: 1rem 0 0.25rem;
        font-size: var(--font-size-12);
    }

    .post-item__category {
        font-size: var(--font-size-10);
    }

    .post-item--ad {
        grid-column: 1 / -1;
    }

    .post-item--ad .post-item__image {
        background-color: transparent;
        aspect-ratio: inherit;
    }

    .post-item--ad .post-item__title {
        display: none;
    }
}


/* -------------------
single
------------------- */

.content__single {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 5rem;
}

.single-illustration {
    display: flex;
    align-items: start;
    gap: 4%;
    margin-bottom: 3rem;
}

.single__illustration-media {
    flex: 53%;
    background-color: #FFF;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
}

.single__illustration-media svg {
    display: block;
}

.single__illustration-body {
    width: 43%;
}

.single__illustration-body .single__illustration-category {
    margin: 0;
    color: var(--color-text-pale);
}

.single__illustration-body .single__illustration-category a {
    color: var(--color-sub);
}


.single__illustration-title {
    margin: 0.5rem 0 1rem;
    font-size: var(--font-size-24);
    line-height: 1.5;
}

.single__illustration-description {
    margin-bottom: 1.5rem;
}

.single__illustration-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.single__illustration-actions a {
    width: 100%;
}

.single__illustration-actions a svg {
    margin-right: 8px;
}

.single-illustration .share {
    margin: 2rem 0 0;
}

.single-meta {
    border-top: 1px solid var(--color-border);
}

@media (max-width: 1023px) {
    .single-illustration {
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }

    .single__illustration-media {
        flex: none;
        width: 100%;
        max-width: 560px;
    }

    .single__illustration-body {
        flex: none;
        width: 100%;
    }

    .single__illustration-actions {
        gap: 1rem;
    }
}

.meta-list {
    margin: 0;
}

.meta-list__item {
    display: flex;
    align-items: center;
    gap: 4%;
    padding: 2rem 0;
    border-bottom: 1px solid var(--color-border);
}

.meta-list__label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-12);
    font-weight: 600;
    color: var(--color-text-pale);
}

.meta-list__label svg {
    fill: var(--color-text-pale);
}

.meta-list__element,
.meta-list__tag {
    flex: 9;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.meta-list__tag {
    gap: 1.5rem;
    color: var(--color-sub);
}

.meta-list__tag .tag-list__item {
    color: var(--color-sub);
    text-decoration: underline;
}

@media (max-width: 1023px) {
    .meta-list__item {
        flex-direction: column;
        align-items: start;
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .meta-list__label,
    .meta-list__element,
    .meta-list__tag {
        flex: none;
        margin-left: 0;
    }

    .meta-list__tag {
        gap: 0.75rem;
    }
}

/* paid version */
.paid-version {
    display: flex;
    gap: 2rem;
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 2.5rem;
    border: 3px solid var(--color-sub);
    border-radius: 8px;
    position: relative;
}

.paid-version__catch {
    display: inline-block;
    width: max-content;
    padding: 0 2rem;
    background-color: var(--color-bg);
    position: absolute;
    top: 0;
    left: 50%;
    font-weight: 600;
    color: var(--color-sub);
    text-align: center;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.paid-version__image {
    flex: 5;
}

.paid-version__image img {
    display: block;
}

.paid-version__text {
    flex: 5;
}

/*
.paid-version__hl {
    margin: 0 0 0.5rem;
    font-size: var(--font-size-20);
    font-weight: 600;
}*/

.paid-version__description {
    margin: 0;
    font-size: var(--font-size-14);
}

@media (max-width: 1023px) {
    .paid-version {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 560px;
        padding: 1.5rem;
    }

    .paid-version__catch {
        padding: 0 1rem;
        background-color: var(--color-bg);
        position: absolute;
        top: 0;
        left: 50%;
        font-size: var(--font-size-14);
        font-weight: 600;
        color: var(--color-sub);
        text-align: center;
        transform: translate(-50%, -50%);
    }

    .paid-version__image,
    .paid-version__text {
        flex: none;
    }
}

/* -------------------
page
------------------- */
.content__page {
    max-width: 1000px;
    margin: 0 auto;
    /*padding-bottom: 5rem;*/
}

.page-title {
    margin-bottom: 5rem;
}

.page-title h1 {
    font-size: var(--font-size-32);
}

.page-frame {
    display: flex;
    gap: 5%;
    margin-bottom: 2.5rem;
    padding: 2.5rem;
    background-color: #FFF;
    border-radius: 8px;
}

.page-frame__title {
    flex: 3;
    margin: 0;
}

.page-frame__body {
    flex: 7;
}

.page-frame__body h3 {
    display: flex;
    align-items: center;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.0;
}

.page-frame__body h3::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 0.75rem;
    border-radius: 2px;
    background-color: var(--color-theme);
}

.page-frame__body>h3:first-child {
    margin-top: 0;
}

@media (max-width: 1023px) {
    .page-title {
        margin-bottom: 2.5rem;
    }

    .page-title h1 {
        font-size: var(--font-size-24);
    }

    .page-frame {
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
        padding: 1.5rem;
    }

    .page-frame__title {
        font-size: var(--font-size-20);
    }

    .page-frame__body h3 {
        font-size: var(--font-size-16);
    }
}

/* guide */
.guide dt {
    font-weight: 600;
}

.guide dt::before {
    content: "・";
    display: inline-block;
}

.guide dd {
    margin-left: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/*　faq　*/
.faq {
    margin-top: 0;
}

.faq__item {}

.faq__item+.faq__item {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.faq__q {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.faq__q-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
    color: var(--color-theme);
}

.faq__a {
    display: flex;
    gap: 0.5rem;
    margin: 0;
}

.faq__a-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
    font-weight: 600;
    color: var(--color-text-pale);
}

.faq__text {
    flex: 1;
}

.faq__text a {
    color: var(--color-sub);
}

.faq__text ul {
    margin-top: 0.5rem;
    margin-left: 1.5rem;
    list-style: disc;
}

.faq__text ul li {
    margin-top: 0.5rem;
}

/* privacy */
.page-privacy {
    margin-bottom: 2.5rem;
    padding: 2.5rem;
    background-color: #FFF;
    border-radius: 8px;
}

.page-privacy__title {
    margin: 0;
    font-size: var(--font-size-18);
}

.page-privacy__title+p {
    margin-bottom: 2rem;
}

@media (max-width: 1023px) {
    .page-privacy {
        padding: 1.5rem;
    }
}


/* -------------------
PICKER
------------------- */
.picker-dialog {
    width: 272px;
    position: fixed;
    right: 1.5rem;
    bottom: 5rem;
    z-index: 150;
    display: none;
}

.picker-dialog.is-open {
    display: block;
}

.picker-tab {
    display: flex;
    gap: 0.5rem;
}

.picker-tab__item {
    width: 100%;
    height: 48px;
    border-radius: 8px 8px 0 0;
    background-color: var(--color-border);
    text-align: center;
    cursor: pointer;
}

.picker-tab__item.is-selected {
    background-color: var(--color-sub);
    color: #FFF;
}

.picker-tab-content {
    padding: 1.5rem 0.75rem 1rem 0.75rem;
    background-color: #FFF;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
}

.pickr .pcr-button {
    display: none;
}

.pickr .pcr-button::before {
    border-radius: 50%;
}

.pickr .pcr-button::after {
    border-radius: 50%;
}

.pcr-app {
    opacity: 1;
    visibility: visible;
    position: static;
    box-shadow: none;
    /*position: fixed;
    right: 2rem;
    bottom: 6rem;
    top: auto !important;
    left: auto !important;
    z-index: 150;*/
}

.pcr-app[data-theme=nano] {
    width: auto;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser {
    margin: 0.6rem 0 0.4rem;
}

.pcr-app[data-theme=nano] .pcr-color-palette {
    margin-bottom: 0.75rem;
}

.pcr-app[data-theme=nano] .pcr-selection {
    grid-template-columns: 0 1fr;
    grid-gap: 0;
}

.pcr-app[data-theme=nano] .pcr-swatches {
    justify-content: center;
}

.pcr-app[data-theme=nano] .pcr-interaction {
    padding: 0;
}

.pcr-app .pcr-interaction .pcr-result {
    text-align: center;
}

@media (max-width: 767px) {
    .picker-container {
        right: 1.25rem;
        bottom: 1.25rem;
    }

    .pcr-app {
        right: 1.25rem;
        bottom: 4rem;
    }
}

.color-default {
    margin-top: 1rem;
    text-align: center;
}

.color-default__btn {
    height: 32px;
    padding: 0 1rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    font-size: var(--font-size-14);
    cursor: pointer;
}

.color-default__btn:hover {
    border: 1px solid var(--color-sub-dark);
    color: var(--color-sub-dark);
}

/* -------------------
AD
------------------- */
.ad--sidebar {
    margin: 4.5rem auto 0;
    text-align: center;
}

.ad--content {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin: 0 auto 4.5rem;
}