@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:wght@400;500;700&display=swap";

@font-face {
    font-family: swiper-icons;
    src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA);
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1
}

.swiper-vertical > .swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

.swiper-android .swiper-slide, .swiper-wrapper {
    transform: translateZ(0)
}

.swiper-pointer-events {
    touch-action: pan-y
}

.swiper-pointer-events.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden
}

.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-centered > .swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical > .swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: 10px;
    right: auto
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 10px;
    left: auto
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-button-lock {
    display: none
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translateZ(0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: 50%;
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translate(-50%);
    white-space: nowrap
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-progressbar {
    background: rgba(0, 0, 0, .25);
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: 4px;
    left: 0;
    top: 0
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
    width: 4px;
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, .1)
}

.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}

.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode > .swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid > .swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column > .swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next + .swiper-slide, .swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top {
    z-index: 0;
    backface-visibility: hidden
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: "";
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}

.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top {
    z-index: 0;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}

.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    backface-visibility: hidden;
    overflow: hidden
}

.mf-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 250;
    direction: ltr;
    contain: layout style size;
    pointer-events: none;
    transition: opacity .3s, color .4s
}

.mf-cursor:before {
    content: "";
    position: absolute;
    top: -24px;
    left: -24px;
    display: block;
    width: 48px;
    height: 48px;
    transform: scale(.2);
    background: currentColor;
    border-radius: 50%;
    transition: transform .25s ease-in-out, opacity .1s
}

.mf-cursor.-inverse {
    color: #fff
}

@supports (mix-blend-mode: exclusion) {
    .mf-cursor.-exclusion {
        mix-blend-mode: exclusion
    }

    .mf-cursor.-exclusion:before {
        background: #fff
    }
}

.mf-cursor.-pointer:before {
    transform: scale(.15)
}

.mf-cursor.-text:before {
    opacity: .85;
    transform: scale(1.7)
}

.mf-cursor.-text.-active:before {
    transform: scale(1.6);
    transition-duration: .2s
}

.mf-cursor.-icon:before {
    transform: scale(1.5)
}

.mf-cursor.-icon.-active:before {
    transform: scale(1.4)
}

.mf-cursor.-hidden:before {
    transform: scale(0)
}

.mf-cursor-text {
    position: absolute;
    top: -18px;
    left: -18px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0) rotate(10deg);
    opacity: 0;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    transition: opacity .4s, transform .3s
}

.mf-cursor.-text .mf-cursor-text, .mf-cursor.-icon .mf-cursor-text {
    opacity: 1;
    transform: scale(1)
}

.mf-cursor-media {
    position: absolute;
    width: 400px;
    height: 400px;
    margin: -200px 0 0 -200px
}

.mf-cursor-media img, .mf-cursor-media video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%
}

@supports ((-o-object-fit: cover) or (object-fit: cover)) {
    .mf-cursor-media img, .mf-cursor-media video {
        position: static;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        transform: translateZ(0)
    }
}

.mf-cursor-media-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: scale(0) translateZ(0);
    padding: 1px;
    opacity: 0;
    border-radius: 50%;
    transition: transform .35s, opacity .2s .2s
}

.mf-cursor.-media .mf-cursor-media-box {
    opacity: 1;
    transform: scale(.696);
    transition-duration: .4s, .4s;
    transition-delay: 0s, 0s
}

:root {
    --letter-spacing: clamp(0px, .0625rem, 1px);
    --min-fs: 16;
    --max-fs: 22;
    --min-vw: 481;
    --max-vw: 1920;
    --fluid-fs: calc(var(--min-fs) * 1px + (var(--max-fs) - var(--min-fs)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw))));
    --font-system: -apple-system, BlinkMacSystemFont, "Roboto", Pingfang, "Pingfang", Pingfang TC, "Pingfang TC", Pingfang SC, "Pingfang SC", JhengHei, "JhengHei", STXihei, "STXihei", "Noto Sans TC", san-serif, "sans-serif";
    --font-mono: "Roboto Mono", monospace;
    --font-default: "Roboto", "Noto Sans TC", san-serif;
    --font-noto: "Noto Sans TC", san-serif;
    --size-0-16: clamp(0rem, -.4431rem + 1.8038vi, 1rem);
    --size-6-12: clamp(.375rem, .2089rem + .6764vi, .75rem);
    --size-8-12: clamp(.5rem, .3892rem + .451vi, .75rem);
    --size-8-16: clamp(.5rem, .2785rem + .9019vi, 1rem);
    --size-8-24: clamp(.5rem, .0569rem + 1.8038vi, 1.5rem);
    --size-8-120: clamp(.5rem, -2.6015rem + 12.6268vi, 7.5rem);
    --size-10-12: clamp(.625rem, .5696rem + .2255vi, .75rem);
    --size-12-16: clamp(.75rem, .6392rem + .451vi, 1rem);
    --size-12-14: clamp(.75rem, .6946rem + .2255vi, .875rem);
    --size-14-16: clamp(.875rem, .8196rem + .2255vi, 1rem);
    --size-15-20: clamp(.9375rem, .799rem + .5637vi, 1.25rem);
    --size-16-20: clamp(1rem, .8892rem + .451vi, 1.25rem);
    --size-16-24: clamp(1rem, .7785rem + .9019vi, 1.5rem);
    --size-16-32: clamp(1rem, .5569rem + 1.8038vi, 2rem);
    --size-16-40: clamp(1rem, .3354rem + 2.7057vi, 2.5rem);
    --size-16-48: clamp(1rem, .1139rem + 3.6077vi, 3rem);
    --size-16-72: clamp(1rem, -.5507rem + 6.3134vi, 4.5rem);
    --size-16-80: clamp(1rem, -.7723rem + 7.2153vi, 5rem);
    --size-20-24: clamp(1.25rem, 1.1392rem + .451vi, 1.5rem);
    --size-24-32: clamp(1.5rem, 1.2785rem + .9019vi, 2rem);
    --size-24-40: clamp(1.5rem, 1.0569rem + 1.8038vi, 2.5rem);
    --size-24-48: clamp(1.5rem, .8354rem + 2.7057vi, 3rem);
    --size-24-64: clamp(1.5rem, .3923rem + 4.5096vi, 4rem);
    --size-24-80: clamp(1.5rem, -.0507rem + 6.3134vi, 5rem);
    --size-32-40: clamp(2rem, 1.7785rem + .9019vi, 2.5rem);
    --size-32-48: clamp(2rem, 1.5569rem + 1.8038vi, 3rem);
    --size-32-64: clamp(2rem, 1.1139rem + 3.6077vi, 4rem);
    --size-32-80: clamp(2rem, .6708rem + 5.4115vi, 5rem);
    --size-40-64: clamp(2.5rem, 1.8354rem + 2.7057vi, 4rem);
    --size-40-72: clamp(2.5rem, 1.6139rem + 3.6077vi, 4.5rem);
    --size-40-80: clamp(2.5rem, 1.3923rem + 4.5096vi, 5rem);
    --size-40-88: clamp(2.5rem, 1.1708rem + 5.4115vi, 5.5rem);
    --size-40-120: clamp(2.5rem, .2847rem + 9.0192vi, 7.5rem);
    --size-48-64: clamp(3rem, 2.5569rem + 1.8038vi, 4rem);
    --size-48-80: clamp(3rem, 2.1139rem + 3.6077vi, 5rem);
    --size-48-88: clamp(3rem, 1.8923rem + 4.5096vi, 5.5rem);
    --size-48-160: clamp(3rem, -.1015rem + 12.6268vi, 10rem);
    --size-56-72: clamp(3.5rem, 3.0569rem + 1.8038vi, 4.5rem);
    --size-56-88: clamp(3.5rem, 2.6139rem + 3.6077vi, 5.5rem);
    --size-56-96: clamp(3.5rem, 2.3923rem + 4.5096vi, 6rem);
    --size-60-80: clamp(3.75rem, 3.1962rem + 2.2548vi, 5rem);
    --size-64-72: clamp(4rem, 3.7785rem + .9019vi, 4.5rem);
    --size-64-80: clamp(4rem, 3.5569rem + 1.8038vi, 5rem);
    --size-64-128: clamp(4rem, 2.2277rem + 7.2153vi, 8rem);
    --size-64-200: clamp(4rem, .2339rem + 15.3326vi, 12.5rem);
    --size-80-120: clamp(5rem, 3.8923rem + 4.5096vi, 7.5rem);
    --size-80-160: clamp(5rem, 2.7847rem + 9.0192vi, 10rem);
    --size-96-200: clamp(6rem, 3.1201rem + 11.7249vi, 12.5rem);
    --size-120-160: clamp(7.5rem, 6.3923rem + 4.5096vi, 10rem);
    --size-152-264: clamp(9.5rem, 6.3985rem + 12.6268vi, 16.5rem);
    --size-160-272: clamp(10rem, 6.8985rem + 12.6268vi, 17rem);
    --size-160-320: clamp(10rem, 5.5693rem + 18.0383vi, 20rem);
    --size-200-280: clamp(12.5rem, 10.2847rem + 9.0192vi, 17.5rem);
    --size-ex-88-192: clamp(5.5rem, 4.3212rem + 4.7993vi, 12rem);
    --size-ex-98-214: clamp(6.125rem, 4.8102rem + 5.353vi, 13.375rem);
    --size-ex-80-173: clamp(5rem, 3.9459rem + 4.2916vi, 10.8125rem);
    --size-ex-101-189: clamp(6.3125rem, 5.315rem + 4.0609vi, 11.8125rem);
    --size-xl-ex-192-318: clamp(12rem, 4.125rem + 9.8438vi, 19.875rem);
    --size-xl-ex-40-260: clamp(2.5rem, -11.25rem + 17.1875vi, 16.25rem);
    --size-xl-1920-16-32: clamp(1rem, -1rem + 2.5vi, 2rem);
    --size-xl-1920-32-40: clamp(2rem, 1rem + 1.25vi, 2.5rem);
    --size-xl-1920-32-56: clamp(2rem, -1rem + 3.75vi, 3.5rem);
    --size-xl-1920-40-56: clamp(2.5rem, .5rem + 2.5vi, 3.5rem);
    --header-height: var(--size-56-88);
    --primary-color: #111827;
    --primary-bg: #e5e7eb;
    --primary-border-color: var(--primary-color);
    --primary-text-color: var(--primary-color);
    --swiper-pagination-color: var(--primary-color);
    --swiper-navigation-color: var(--primary-color);
    --swiper-theme-color: var(--primary-color);
    --product-action-height: 0px
}

/*! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com*/
*, :before, :after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

:before, :after {
    --tw-content: ""
}

html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b, strong {
    font-weight: bolder
}

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button, select {
    text-transform: none
}

button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

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

header ul, nav ul, footer ul{
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::-moz-placeholder, textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
}

input::placeholder, textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

button, [role=button] {
    cursor: pointer
}

:disabled {
    cursor: default
}

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle
}

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

[hidden] {
    display: none
}

*:focus:not(.focus-visible) {
    outline: none
}

*, :before, :after {
    border-color: #111827
}

button, a, input, label {
    -webkit-tap-highlight-color: transparent
}

::-moz-selection {
    --tw-bg-opacity: 1;
    background-color: rgb(246 234 78 / var(--tw-bg-opacity))
}

::selection {
    --tw-bg-opacity: 1;
    background-color: rgb(246 234 78 / var(--tw-bg-opacity))
}

html {
    font-family: var(--font-system)
}

html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--primary-text-color)
}

*, :before, :after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

.\!container {
    width: 100% !important
}

.container {
    width: 100%
}

@media (min-width: 425px) {
    .\!container {
        max-width: 425px !important
    }

    .container {
        max-width: 425px
    }
}

@media (min-width: 640px) {
    .\!container {
        max-width: 640px !important
    }

    .container {
        max-width: 640px
    }
}

@media (min-width: 768px) {
    .\!container {
        max-width: 768px !important
    }

    .container {
        max-width: 768px
    }
}

@media (min-width: 1024px) {
    .\!container {
        max-width: 1024px !important
    }

    .container {
        max-width: 1024px
    }
}

@media (min-width: 1280px) {
    .\!container {
        max-width: 1280px !important
    }

    .container {
        max-width: 1280px
    }
}

@media (min-width: 1536px) {
    .\!container {
        max-width: 1536px !important
    }

    .container {
        max-width: 1536px
    }
}

.article-text-flow {
    font-size: 1rem;
    line-height: 2rem;
    letter-spacing: .02em
}

.article-text-flow :is(p,h1,h2,h3,h4,h5,h6,ul):not(:first-child) {
    margin-top: 1.5em
}

.text-vertical {
    writing-mode: vertical-lr;
    text-transform: uppercase
}

.display {
    font-weight: 700;
    font-size: var(--size-64-128);
    line-height: var(--size-64-128);
    letter-spacing: -.04em
}

.h1 {
    font-weight: 700;
    font-size: var(--size-40-64);
    line-height: var(--size-48-80);
    letter-spacing: 0em
}

.h2 {
    font-weight: 700;
    font-size: var(--size-24-32);
    line-height: var(--size-32-40);
    letter-spacing: .01em
}

.h3 {
    font-weight: 700;
    font-size: var(--size-20-24);
    line-height: 2rem;
    letter-spacing: .01em
}

.label {
    font-size: var(--size-12-16);
    line-height: 1rem;
    letter-spacing: .04em
}

.label-fixed {
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: .04em
}

.label-sm {
    font-size: .875rem;
    line-height: 1rem;
    letter-spacing: .02em
}

.label-xs {
    font-size: .75rem;
    line-height: 1rem
}

.body {
    font-size: 1rem;
    line-height: 2rem;
    letter-spacing: .02em
}

.body-sm {
    font-size: .875rem;
    line-height: 1.5rem;
    letter-spacing: .02em
}

.body-xs {
    font-size: .75rem;
    line-height: 1.5rem;
    letter-spacing: .02em
}

.fs-12-14 {
    font-size: var(--size-12-14);
    line-height: 1rem
}

.fs-14-16 {
    font-size: var(--size-14-16);
    line-height: 1rem
}

.fs-16-20 {
    font-size: var(--size-16-20);
    line-height: 1.5rem
}

.btn-main:has(.filter-select-input) {
    gap: var(--size-24-64);
    max-width: -moz-fit-content;
    max-width: fit-content
}

.btn-main {
    display: grid;
    height: var(--size-64-72);
    width: 100%;
    max-width: 24rem;
    place-items: center;
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
    font-weight: 700;
    letter-spacing: .025em;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.header {
    height: var(--header-height)
}

.header-icon-btn {
    width: var(--header-height)
}

@media (min-width: 1024px) {
    .header-icon-btn {
        --header-pt: 1rem;
        width: calc(var(--header-height) - var(--header-pt))
    }
}

.triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7px 9px 7px;
    border-color: transparent transparent var(--primary-border-color) transparent;
    transform: rotate(0);
    place-self: end center
}

.full-nav {
    visibility: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100dvh;
    max-height: var(--size-56-88);
    overflow: hidden;
    z-index: 2222;
    opacity: 0;
    transition: opacity .16s ease-out, visibility .16s ease-out, max-height .32s ease-out
}

.full-nav-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(232, 232, 237, .4);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    transition: opacity .16s
}

.full-nav[aria-hidden=false] {
    opacity: 1;
    visibility: visible;
    max-height: 100dvh
}

.full-nav[aria-hidden=false] .full-nav-bg {
    opacity: 1
}

.d-dropdown {
    position: relative;
    display: inline-block
}

@media (hover: hover) {
    .d-dropdown.d-dropdown-hover:hover .d-dropdown-content {
        visibility: visible;
        opacity: 1
    }
}

.d-dropdown.d-dropdown-open .d-dropdown-content, .d-dropdown:not(.d-dropdown-hover):focus .d-dropdown-content, .d-dropdown:focus-within .d-dropdown-content {
    visibility: visible;
    opacity: 1
}

.d-dropdown:is(:not(details)) .d-dropdown-content {
    visibility: hidden;
    opacity: 0
}

.d-dropdown-bottom .d-dropdown-content {
    bottom: auto;
    top: 100%
}

.d-dropdown-end .d-dropdown-content {
    inset-inline-end: 0px
}

.d-dropdown .d-dropdown-content {
    position: absolute
}

.sticky-toolbar.enabled {
    -webkit-backdrop-filter: saturate(180%) blur(40px);
    backdrop-filter: saturate(180%) blur(40px);
    background: rgba(251, 251, 253, .8)
}

.grid:has(.filter-select-input) {
    gap: var(--size-24-64);
    max-width: -moz-fit-content;
    max-width: fit-content
}

.filter-select-input {
    height: var(--size-56-72);
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1em auto;
    padding-inline-end: 1em
}

.filter-select-input::-ms-expand {
    display: none
}

.auto-grid {
    --_gap: var(--gap, 1rem);
    --_gap-y: var(--gap-y, 1rem);
    --_min-width: var(--min-width, 10rem);
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(var(--_min-width), 1fr));
    gap: var(--_gap);
    row-gap: var(--_gap-y);
    padding-inline: var(--_gap)
}

.auto-grid--scrollx {
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--_min-width), 1fr);
    overflow-x: scroll
}

.auto-grid--shop {
    --gap: var(--size-16-80);
    --gap-y: var(--size-24-80);
    --min-width: clamp(10rem, 8.4131rem + 6.4605vw, 18.75rem)
}

.auto-grid--single-row {
    --gap-y: 0;
    grid-template-rows:1fr;
    grid-auto-rows: 0;
    overflow: hidden
}

.product-item {
    font-size: var(--size-15-20)
}

.grid-product {
    --row-max-height: calc(100dvh - var(--product-action-height) - var(--header-height));
    --thumbnail-width: clamp(5.5rem, -4.6053rem + 21.0526vw, 17.5rem);
    --action-width: clamp(20rem, 7.3684rem + 26.3158vw, 35rem);
    display: grid;
    grid-template-areas:"thumbnail slide slide" "aside detail action" "aside2 return action";
    grid-template-columns:var(--thumbnail-width) 1fr var(--action-width);
    grid-template-rows:minmax(600px, var(--row-max-height)) auto auto
}

.grid-product > * {
    padding-inline: var(--grid-item-px, 2.5rem);
    padding-block: var(--grid-item-py, 2.5rem)
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid-product > * {
        --grid-item-px: clamp(1rem, -3.5176rem + 9.4118vw, 2.5rem);
        --grid-item-py: clamp(1rem, -3.5176rem + 9.4118vw, 2.5rem)
    }
}

@media (max-width: 767px) {
    .grid-product > * {
        --grid-item-px: var(--size-24-80)
    }
}

.grid-product .thumbnail {
    grid-area: thumbnail;
    --grid-item-px: clamp(.5rem, -1.0059rem + 3.1373vw, 1rem);
    --grid-item-py: clamp(2.5rem, -2.0176rem + 9.4118vw, 4rem);
    gap: var(--grid-item-px);

    img.active {
        --tw-border-opacity: 1;
        border-color: rgb(17 24 39 / var(--tw-border-opacity))
    }

    img.active {
        --tw-brightness: brightness(1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }
}

.grid-product .slide {
    grid-area: slide;
    --grid-item-py: clamp(2.5rem, -2.0176rem + 9.4118vw, 4rem)
}

.grid-product [data-control-area=container] {
    grid-area: slide;
    --grid-item-px: 0;
    --grid-item-py: 0
}

.grid-product [data-control-cursor=cursor] {
    --custom-cursor-size: clamp(7.5rem, 5.3182rem + 4.5455vw, 10rem);
    width: var(--custom-cursor-size);
    height: var(--custom-cursor-size)
}

.grid-product .aside {
    grid-area: aside;
    --grid-item-px: clamp(.5rem, -1.0059rem + 3.1373vw, 1rem);
    --grid-item-py: 2.75em
}

.grid-product .detail {
    grid-area: detail;
    --grid-item-px: clamp(2.5rem, -2.5rem + 6.25vw, 5rem)
}

.grid-product .action {
    grid-area: action
}

.grid-product .aside2 {
    grid-area: aside2;
    --grid-item-px: clamp(.5rem, -1.0059rem + 3.1373vw, 1rem);
    --grid-item-py: 2.75em
}

.grid-product .return {
    grid-area: return;
    --grid-item-px: clamp(2.5rem, -2.5rem + 6.25vw, 5rem)
}

@media (max-width: 767px) {
    .grid-product {
        grid-template-areas:"slide" "action" "detail" "return";
        grid-template-columns:1fr;
        grid-template-rows:auto
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid-product {
        grid-template-areas:"thumbnail slide slide" "detail detail action" "return return action"
    }
}

.hero-text-mask span {
    position: relative;
    top: var(--size-48-80);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.hero-text-mask span[data-show] {
    transform: translateY(-100%);
    transition: .5s transform ease-in-out
}

.hero-text-mask span[data-up] {
    transform: translateY(-200%);
    transition: .5s transform ease-in-out
}

[data-cursor=content] {
    position: fixed;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.grid-index {
    display: grid;
    grid-template-columns:6.25% minmax(max-content, 18.75%) auto 25% 43.75% 6.25%;
    grid-auto-flow: dense;
    grid-template-rows:repeat(5, auto)
}

@media (max-width: 1023px) {
    .grid-index {
        grid-template-columns:auto 1fr
    }
}

.text-crop:before, .text-crop:after {
    content: "";
    display: block;
    height: 0;
    width: 0
}

.text-crop:before {
    margin-bottom: calc(-.171875em + 0px)
}

.text-crop:after {
    margin-top: calc(-.125em + 0px)
}

.grid-character {
    display: grid;
    grid-template-columns:6.25% 1fr 1fr 6.25%;
    grid-template-rows:1fr 50vh 1fr
}

@media (max-width: 767px) {
    .grid-character {
        grid-template-columns:1fr 1fr;
        grid-template-rows:minmax(0, auto) 50vh auto 1fr
    }
}

.swiper-character-thumb {
    --thumb-size-min: 40;
    --thumb-size-max: 72;
    --thumb-size: clamp(2.5rem, 1.6139rem + 3.6077vw, 4.5rem);
    --thumb-gap-min: 16;
    --thumb-gap-max: 24;
    --fade-px: clamp(2.5rem, 1.6139rem + 3.6077vw, 4.5rem);
    --slide-width: clamp(3.5rem, 2.3923rem + 4.5096vw, 6rem);
    --swiper-width: clamp(10.5rem, 7.177rem + 13.5287vw, 18rem);
    --swiper-mx: clamp(-.75rem, -.3892rem + -.451vw, -.5rem);
    width: var(--swiper-width);
    margin-inline: var(--swiper-mx);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8% 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8% 92%, transparent 100%)
}

@media (max-width: 767px) {
    .swiper-character-thumb {
        --mr: clamp(1rem, .6677rem + 1.3529vw, 1.75rem);
        margin-right: var(--mr)
    }
}

.swiper-character-thumb .swiper-slide {
    width: var(--slide-width);
    height: var(--thumb-size-min)
}

@media (min-width: 768px) {
    .swiper-character-thumb .swiper-slide:not(.swiper-slide-active,.swiper-slide-prev,.swiper-slide-next) .img-block {
        opacity: 0 !important;
        transform: translateZ(0) scale(0) !important;
        transition-duration: .8s !important
    }
}

.swiper-character-thumb .img-block {
    width: var(--thumb-size);
    height: var(--thumb-size)
}

.grid-author {
    display: grid;
    grid-template-columns:6.25% minmax(max-content, 18.75%) auto 25% 43.75% 6.25%
}

@media (max-width: 639px) {
    .grid-author {
        grid-template-columns:auto 1fr auto
    }
}

.grid-more-product {
    display: grid;
    grid-template-columns:6.25% 1fr 1fr 25% 43.75% 6.25%;
    grid-auto-flow: dense
}

@media (max-width: 1023px) {
    .grid-more-product {
        grid-template-columns:1fr auto
    }
}

.grid-reviews {
    display: grid;
    grid-template-columns:6.25% 1fr 1fr 6.25%
}

@media (max-width: 1023px) {
    .grid-reviews {
        grid-template-columns:1fr auto
    }
}

@media (min-width: 1024px) {
    .grid-review-cards {
        display: grid;
        /* grid-template-columns:repeat(7, 1fr);
        grid-template-rows:repeat(4, auto);
        grid-template-areas:"k1 k1 k1 r1 r1 r2 r2" "k1 k1 k1 r3 r3 r4 r4" "r5 r5 r6 r6 k2 k2 k2" "r7 r7 r8 r8 k2 k2 k2" */
        grid-template-columns:repeat(12, 1fr);
        grid-template-rows:repeat(3, auto);
    }

    /* .swiper-reader .swiper-slide {
        grid-column: span 2;
        grid-row: span 1
    } */

    .swiper-reader .swiper-slide {
        grid-column: span 4;
        grid-row: span 1
    }

    .swiper-reader .swiper-slide:nth-child(n+7) {
        grid-column: span 3;
        grid-row: span 1
    }
}

@media (min-width: 1280px) {
    .grid-review-cards {
        /* grid-template-columns:repeat(4, 1fr);
        grid-template-rows:repeat(7, auto);
        gap: 0px 0px;
        grid-template-areas:"k1 k1 r1 r2" "k1 k1 r1 r2" "k1 k1 r3 r4" "r5 r6 r3 r4" "r5 r6 k2 k2" "r7 r8 k2 k2" "r7 r8 k2 k2" */
        grid-template-columns:repeat(12, 1fr);
        grid-template-rows:repeat(3, auto);
    }

    /* .swiper-reader .swiper-slide {
        grid-column: span 1;
        grid-row: span 2
    } */

    .swiper-reader .swiper-slide {
        grid-column: span 6;
        grid-row: span 1
    }

    .swiper-reader .swiper-slide:nth-child(n+3) {
        grid-column: span 3;
        grid-row: span 1
    }
}

/* .swiper-kol .swiper-slide:first-child {
    grid-area: k1
}

.swiper-kol .swiper-slide:last-child {
    grid-area: k2
} */

@media (max-width: 767px) {
    [data-accordion=content] {
        display: grid;
        grid-template-rows:0fr;
        transition: grid-template-rows .5s
    }

    [data-accordion=content][aria-hidden=false] {
        grid-template-rows:1fr
    }

    [data-accordion=content-wrap] {
        overflow: hidden
    }

    [data-accordion=trigger] {
        transition: transform .25s ease-out
    }

    [data-accordion=trigger][aria-expanded=true] > svg path:first-of-type {
        transform: scale(0)
    }
}

@media (max-width: 767px) {
    .footer-wrap {
        padding-bottom: 1rem;
        padding-inline: var(--size-16-40);
        padding-inline: var(--size-16-80)
    }

    .footer-wrap > * {
        padding-top: 1rem;
        padding-bottom: 1rem
    }

    .accordion-trigger {
        height: 3.5rem
    }

    .footer-sublist {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1.5rem
    }

    .contact-list {
        margin-bottom: 1rem;
        display: flex;
        flex-wrap: wrap;

        li {
            display: flex
        }

        li:not(:last-child)::after {
            content: "．";
        }
    }
}

@media (min-width: 768px) {
    .footer-wrap > * {
        display: flex
    }

    .footer-wrap > * {
        justify-content: space-between
    }

    .footer-wrap > * {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem
    }

    .footer-wrap > * {
        padding-inline: var(--size-16-40);
        padding-inline: var(--size-16-80)
    }

    .accordion-trigger {
        padding-top: .5rem;
        padding-bottom: .5rem
    }

    .footer-list {
        border-bottom-width: 1px;
        padding-bottom: 0
    }

    .footer-list > *:not(:first-child) {
        border-left-width: 1px
    }

    .footer-list > *:not(:first-child) {
        padding-top: 0
    }

    .footer-list > *:not(:first-child) {
        padding-inline-start: 1rem
    }

    .footer-list > *:not(:first-child) {
        padding-bottom: 1.5rem
    }

    .contact-list {
        order: 1;
        display: flex;
        gap: 2rem;

        span {
            display: block
        }
    }
}

@media (min-width: 1024px) {
    .footer-wrap {
        --lg-footer-ps: 2.5rem;
        --footer-img-width: clamp(10.5rem, -12.8846rem + 36.5385vw, 20rem)
    }

    .footer-wrap:has(.filter-select-input) {
        gap: var(--size-24-64);
        max-width: -moz-fit-content;
        max-width: fit-content
    }

    .footer-wrap {
        display: grid;
        grid-template-areas:"img list-1 list-2 list-3 list-4" "copyright copyright contact-1 contact-2 contact-3"
    }

    .footer-wrap > *, .footer-wrap .contact-list {
        display: contents
    }

    .footer-list > *, .contact-list > *, .copyright {
        padding: 1.5rem .5rem
    }

    .footer-list > *:not(:first-child) {
        border-bottom-width: 1px
    }

    .footer-list > *:not(:first-child) {
        border-left-width: 1px
    }

    .footer-list > *:not(:first-child) {
        padding-top: 0
    }

    .footer-list > *:not(:first-child) {
        padding-inline-start: 1rem
    }

    .footer-list > *:nth-child(1) {
        grid-area: img;
        padding-inline-start: var(--lg-footer-ps)
    }

    .footer-list > *:nth-child(1) {
        display: flex
    }

    .footer-list > *:nth-child(1) {
        border-bottom-width: 1px
    }

    .footer-list > *:nth-child(1) {
        padding-bottom: 0
    }

    .footer-list > *:nth-child(2) {
        grid-area: list-1
    }

    .footer-list > *:nth-child(3) {
        grid-area: list-2
    }

    .footer-list > *:nth-child(4) {
        grid-area: list-3
    }

    .footer-list > *:nth-child(5) {
        grid-area: list-4
    }

    .copyright {
        grid-area: copyright;
        padding-inline-start: var(--lg-footer-ps)
    }

    .contact-list > *:nth-child(1) {
        grid-area: contact-1
    }

    .contact-list > *:nth-child(2) {
        grid-area: contact-2
    }

    .contact-list > *:nth-child(3) {
        grid-area: contact-3
    }

    .footer-img-block {
        width: var(--footer-img-width);
        aspect-ratio: 368/283;
        position: relative;
        align-self: flex-end
    }

    .footer-img {
        max-width: var(--footer-img-width);
        position: absolute;
        bottom: -.375rem
    }
}

.pointer-events-none {
    pointer-events: none
}

.visible {
    visibility: visible
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.-bottom-16-24 {
    bottom: calc(var(--size-16-24) * -1)
}

.-bottom-2 {
    bottom: -.5rem
}

.bottom-0 {
    bottom: 0
}

.left-0 {
    left: 0
}

.right-0 {
    right: 0
}

.right-8-120 {
    right: var(--size-8-120)
}

.right-xl-ex-40-260 {
    right: var(--size-xl-ex-40-260)
}

.top-0 {
    top: 0
}

.top-10 {
    top: 2.5rem
}

.top-24-80 {
    top: var(--size-24-80)
}

.top-6 {
    top: 1.5rem
}

.-z-10 {
    z-index: -10
}

.z-1 {
    z-index: 1
}

.z-10 {
    z-index: 10
}

.z-50 {
    z-index: 50
}

.-order-1 {
    order: -1
}

.order-2 {
    order: 2
}

.col-span-2 {
    grid-column: span 2 / span 2
}

.col-span-full {
    grid-column: 1 / -1
}

.col-start-1 {
    grid-column-start: 1
}

.col-start-2 {
    grid-column-start: 2
}

.col-start-3 {
    grid-column-start: 3
}

.row-span-full {
    grid-row: 1 / -1
}

.row-start-1 {
    grid-row-start: 1
}

.row-start-2 {
    grid-row-start: 2
}

.row-start-3 {
    grid-row-start: 3
}

.row-start-4 {
    grid-row-start: 4
}

.m-0 {
    margin: 0
}

.m-auto {
    margin: auto
}

.mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.my-16-32 {
    margin-top: var(--size-16-32);
    margin-bottom: var(--size-16-32)
}

.my-2 {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.-mb-10 {
    margin-bottom: -2.5rem
}

.-mt-32-40 {
    margin-top: calc(var(--size-32-40) * -1)
}

.-mt-40-64 {
    margin-top: calc(var(--size-40-64) * -1)
}

.mb-12 {
    margin-bottom: 3rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-40-80 {
    margin-bottom: var(--size-40-80)
}

.mb-48-160 {
    margin-bottom: var(--size-48-160)
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-8-16 {
    margin-bottom: var(--size-8-16)
}

.mb-8-24 {
    margin-bottom: var(--size-8-24)
}

.mb-80-160 {
    margin-bottom: var(--size-80-160)
}

.mb-auto {
    margin-bottom: auto
}

.me-16-24 {
    margin-inline-end: var(--size-16-24)
}

.me-auto {
    margin-inline-end: auto
}

.ms-2 {
    margin-inline-start: .5rem
}

.ms-48-64 {
    margin-inline-start: var(--size-48-64)
}

.ms-auto {
    margin-inline-start: auto
}

.mt-1 {
    margin-top: .25rem
}

.mt-12 {
    margin-top: 3rem
}

.mt-16-24 {
    margin-top: var(--size-16-24)
}

.mt-2 {
    margin-top: .5rem
}

.mt-24-32 {
    margin-top: var(--size-24-32)
}

.mt-24-48 {
    margin-top: var(--size-24-48)
}

.mt-4 {
    margin-top: 1rem
}

.mt-40-120 {
    margin-top: var(--size-40-120)
}

.mt-40-64 {
    margin-top: var(--size-40-64)
}

.mt-8-16 {
    margin-top: var(--size-8-16)
}

.mt-8-24 {
    margin-top: var(--size-8-24)
}

.mt-80-160 {
    margin-top: var(--size-80-160)
}

.mt-auto {
    margin-top: auto
}

.block {
    display: block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.aspect-\[2\/1\] {
    aspect-ratio: 2/1
}

.aspect-square {
    aspect-ratio: 1 / 1
}

.\!h-full {
    height: 100% !important
}

.h-1 {
    height: .25rem
}

.h-160-320 {
    height: var(--size-160-320)
}

.h-40 {
    height: 10rem
}

.h-48-80 {
    height: var(--size-48-80)
}

.h-64-72 {
    height: var(--size-64-72)
}

.h-8 {
    height: 2rem
}

.h-\[480px\] {
    height: 480px
}

.h-auto {
    height: auto
}

.h-full {
    height: 100%
}

.max-h-200-280 {
    max-height: var(--size-200-280)
}

.max-h-\[200px\] {
    max-height: 200px
}

.max-h-\[90dvh\] {
    max-height: 90dvh
}

.max-h-dvh {
    max-height: 100dvh
}

.max-h-full {
    max-height: 100%
}

.min-h-0 {
    min-height: 0px
}

.min-h-dvh {
    min-height: 100dvh
}

.min-h-full {
    min-height: 100%
}

.w-1\/2 {
    width: 50%
}

.w-1\/3 {
    width: 33.333333%
}

.w-1\/6 {
    width: 16.666667%
}

.w-120-160 {
    width: var(--size-120-160)
}

.w-1em {
    width: 1em
}

.w-20 {
    width: 5rem
}

.w-20-24 {
    width: var(--size-20-24)
}

.w-40 {
    width: 10rem
}

.w-56-72 {
    width: var(--size-56-72)
}

.w-6 {
    width: 1.5rem
}

.w-full {
    width: 100%
}

.w-max {
    width: -moz-max-content;
    width: max-content
}

.min-w-52 {
    min-width: 13rem
}

.max-w-40 {
    max-width: 10rem
}

.max-w-96 {
    max-width: 24rem
}

.max-w-\[100vw\] {
    max-width: 100vw
}

.max-w-\[1485px\] {
    max-width: 1485px
}

.max-w-\[1920px\] {
    max-width: 1920px
}

.max-w-\[400px\] {
    max-width: 400px
}

.max-w-\[45ch\] {
    max-width: 45ch
}

.max-w-\[50ch\] {
    max-width: 50ch
}

.max-w-\[max\(1200px\,80vw\)\] {
    max-width: max(1200px, 80vw)
}

.max-w-ex-101-189 {
    max-width: var(--size-ex-101-189)
}

.max-w-ex-80-173 {
    max-width: var(--size-ex-80-173)
}

.max-w-none {
    max-width: none
}

.max-w-xl-ex-192-318 {
    max-width: var(--size-xl-ex-192-318)
}

.flex-1 {
    flex: 1 1 0%
}

.shrink-0 {
    flex-shrink: 0
}

.origin-bottom-right {
    transform-origin: bottom right
}

.-translate-y-full {
    --tw-translate-y: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-y-full {
    --tw-translate-y: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-\[20deg\] {
    --tw-rotate: 20deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.scale-\[0\.6\] {
    --tw-scale-x: .6;
    --tw-scale-y: .6;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes loop-scroll {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(-100%)
    }
}

.animate-loop-scroll {
    animation: loop-scroll 50s linear infinite
}

.cursor-none {
    cursor: none
}

.cursor-pointer {
    cursor: pointer
}

.\!snap-align-none {
    scroll-snap-align: none !important
}

.list-\[square\] {
    list-style-type: square
}

.list-disc {
    list-style-type: disc
}

.grid-cols-2 {
    grid-template-columns:repeat(2, minmax(0, 1fr))
}

.grid-rows-1 {
    grid-template-rows:repeat(1, minmax(0, 1fr))
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.place-content-center {
    place-content: center
}

.place-items-center {
    place-items: center
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.items-baseline {
    align-items: baseline
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-1 {
    gap: .25rem
}

.gap-12 {
    gap: 3rem
}

.gap-12-16 {
    gap: var(--size-12-16)
}

.gap-16-24 {
    gap: var(--size-16-24)
}

.gap-16-40 {
    gap: var(--size-16-40)
}

.gap-16-72 {
    gap: var(--size-16-72)
}

.gap-2 {
    gap: .5rem
}

.gap-24-48 {
    gap: var(--size-24-48)
}

.gap-32-48 {
    gap: var(--size-32-48)
}

.gap-32-80 {
    gap: var(--size-32-64)
}

.gap-4 {
    gap: 1rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-8 {
    gap: 2rem
}

.gap-8-12 {
    gap: var(--size-8-12)
}

.gap-8-16 {
    gap: var(--size-8-16)
}

.gap-8-24 {
    gap: var(--size-8-24)
}

.gap-\[4\.85vw\] {
    gap: 4.85vw
}

.gap-xl-1920-16-32 {
    gap: var(--size-xl-1920-16-32)
}

.gap-y-40-64 {
    row-gap: var(--size-40-64)
}

.gap-y-40-80 {
    row-gap: var(--size-40-80)
}

.gap-y-48-160 {
    row-gap: var(--size-48-160)
}

.place-self-center {
    place-self: center
}

.self-center {
    align-self: center
}

.self-stretch {
    align-self: stretch
}

.justify-self-end {
    justify-self: end
}

.overflow-hidden {
    overflow: hidden
}

.overflow-clip {
    overflow: clip
}

.overflow-y-scroll {
    overflow-y: scroll
}

.overscroll-contain {
    overscroll-behavior: contain
}

.overscroll-none {
    overscroll-behavior: none
}

.text-balance {
    text-wrap: balance
}

.text-pretty {
    text-wrap: pretty
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-\[1\.25em\] {
    border-radius: 1.25em
}

.rounded-full {
    border-radius: 9999px
}

.rounded-sm {
    border-radius: .125rem
}

.rounded-xl {
    border-radius: .75rem
}

.rounded-t-full {
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px
}

.border {
    border-width: 1px
}

.border-x {
    border-left-width: 1px;
    border-right-width: 1px
}

.border-b {
    border-bottom-width: 1px
}

.border-e {
    border-inline-end-width: 1px
}

.border-t {
    border-top-width: 1px
}

.border-main {
    --tw-border-opacity: 1;
    border-color: rgb(17 24 39 / var(--tw-border-opacity))
}

.border-main\/10 {
    border-color: #1118271a
}

.border-main\/5 {
    border-color: #1118270d
}

.border-primary-400 {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity))
}

.bg-emerald-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity))
}

.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}

.bg-indigo-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity))
}

.bg-main {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity))
}

.bg-main\/95 {
    background-color: #111827f2
}

.bg-pink-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(236 72 153 / var(--tw-bg-opacity))
}

.bg-primary-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity))
}

.bg-transparent {
    background-color: transparent
}

.bg-\[url\(\.\.\/assets\/media\/bg\/bg-gray\.avif\)\] {
    background-image: url(/assets/frontend/media/bg/bg-gray-d2db4927094bd2d92b7be9206d3d3c09b786d0e6ff1e703ecaf38af925a19faa.avif)
}

.bg-\[url\(\.\.\/assets\/media\/bg\/bg-indigo\.avif\)\] {
    background-image: url(/assets/frontend/media/bg/bg-indigo-cae7ce9da70b303cccf53f041d600cc88bd8aebeb8828610c77f271ac57031cf.avif)
}

.bg-\[url\(\.\.\/assets\/media\/bg\/bg-pink\.avif\)\] {
    background-image: url(/assets/frontend/media/bg/bg-pink-2e57e355b0b4e08f8eabfce32e98573ad00c7537a8fed904fffe05b8a1b39d29.avif)
}

.bg-\[url\(\.\.\/assets\/media\/bg\/bg-white\.avif\)\] {
    background-image: url(/assets/frontend/media/bg/bg-white-606549e09acdec552c271bcd5121780361e27278d27fc04e0478ddc4f461df2f.avif)
}

.bg-\[url\(\.\.\/assets\/media\/bg\/bg-yellow-light\.avif\)\] {
    background-image: url(/assets/frontend/media/bg/bg-yellow-light-1fc7b1acef5e114b694c5cbb930d342071a2a5c2ed9a42ef907b0063935ff77e.avif)
}

.bg-\[url\(\.\.\/assets\/media\/bg\/bg-yellow\.avif\)\] {
    background-image: url(/assets/frontend/media/bg/bg-yellow-d865beee7a6595f4eb98ceb686c2b4bcc2eb9f77601368b3ade5e3c331928e92.avif)
}

.bg-\[url\(\.\.\/assets\/media\/bg\/bg-\{\{bg\}\}\.avif\)\] {
    background-image: url(/frontend/media/bg/bg-{{bg}}.avif)
}

.bg-contain {
    background-size: contain
}

.bg-fixed {
    background-attachment: fixed
}

.bg-no-repeat {
    background-repeat: no-repeat
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.p-1 {
    padding: .25rem
}

.p-16-24 {
    padding: var(--size-16-24)
}

.p-2 {
    padding: .5rem
}

.p-32-40 {
    padding: var(--size-32-40)
}

.p-4 {
    padding: 1rem
}

.p-8-24 {
    padding: var(--size-8-24)
}

.px-12-16 {
    padding-left: var(--size-12-16);
    padding-right: var(--size-12-16)
}

.px-16 {
    padding-left: 4rem;
    padding-right: 4rem
}

.px-16-24 {
    padding-left: var(--size-16-24);
    padding-right: var(--size-16-24)
}

.px-16-40 {
    padding-left: var(--size-16-40);
    padding-right: var(--size-16-40)
}

.px-16-80 {
    padding-left: var(--size-16-80);
    padding-right: var(--size-16-80)
}

.px-24-64 {
    padding-left: var(--size-24-64);
    padding-right: var(--size-24-64)
}

.px-24-80 {
    padding-left: var(--size-24-80);
    padding-right: var(--size-24-80)
}

.px-32-64 {
    padding-left: var(--size-32-64);
    padding-right: var(--size-32-64)
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem
}

.px-8-12 {
    padding-left: var(--size-8-12);
    padding-right: var(--size-8-12)
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}

.py-16-24 {
    padding-top: var(--size-16-24);
    padding-bottom: var(--size-16-24)
}

.py-24-64 {
    padding-top: var(--size-24-64);
    padding-bottom: var(--size-24-64)
}

.py-32-40 {
    padding-top: var(--size-32-40);
    padding-bottom: var(--size-32-40)
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-40-64 {
    padding-top: var(--size-40-64);
    padding-bottom: var(--size-40-64)
}

.py-40-80 {
    padding-top: var(--size-40-80);
    padding-bottom: var(--size-40-80)
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.py-80-160 {
    padding-top: var(--size-80-160);
    padding-bottom: var(--size-80-160)
}

.pb-10 {
    padding-bottom: 2.5rem
}

.pb-4 {
    padding-bottom: 1rem
}

.pb-40-80 {
    padding-bottom: var(--size-40-80)
}

.pb-56-88 {
    padding-bottom: var(--size-56-88)
}

.pb-6 {
    padding-bottom: 1.5rem
}

.pb-8 {
    padding-bottom: 2rem
}

.pb-80-160 {
    padding-bottom: var(--size-80-160)
}

.pe-4 {
    padding-inline-end: 1rem
}

.pe-40-80 {
    padding-inline-end: var(--size-40-80)
}

.ps-\[1\.4em\] {
    padding-inline-start: 1.4em
}

.pt-24-64 {
    padding-top: var(--size-24-64)
}

.pt-40-64 {
    padding-top: var(--size-40-64)
}

.pt-40-80 {
    padding-top: var(--size-40-80)
}

.pt-6-12 {
    padding-top: var(--size-6-12)
}

.pt-80-160 {
    padding-top: var(--size-80-160)
}

.pt-96-200 {
    padding-top: var(--size-96-200)
}

.pt-\[var\(--header-height\)\] {
    padding-top: var(--header-height)
}

.text-center {
    text-align: center
}

.text-justify {
    text-align: justify
}

.text-start {
    text-align: start
}

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
}

.text-10-12 {
    font-size: var(--size-10-12)
}

.text-\[21cqi\] {
    font-size: 21cqi
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.font-black {
    font-weight: 900
}

.font-bold {
    font-weight: 700
}

.font-medium {
    font-weight: 500
}

.uppercase {
    text-transform: uppercase
}

.leading-8 {
    line-height: 2rem
}

.leading-\[88\%\] {
    line-height: 88%
}

.leading-loose {
    line-height: 2
}

.leading-none {
    line-height: 1
}

.tracking-\[-0\.04em\] {
    letter-spacing: -.04em
}

.tracking-wide {
    letter-spacing: .025em
}

.text-faded {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity))
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity))
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.text-white\/90 {
    color: #ffffffe6
}

.opacity-0 {
    opacity: 0
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.brightness-90 {
    --tw-brightness: brightness(.9);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.drop-shadow-2xl {
    --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / .15));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.drop-shadow-xl {
    --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / .03)) drop-shadow(0 8px 5px rgb(0 0 0 / .08));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.backdrop-blur-2xl {
    --tw-backdrop-blur: blur(40px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.duration-0 {
    transition-duration: 0s
}

.duration-250 {
    transition-duration: .25s
}

.duration-300 {
    transition-duration: .3s
}

.duration-400 {
    transition-duration: .4s
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

.rounded-16-32 {
    border-radius: var(--size-16-32)
}

.stretched-link {
    position: relative;
    cursor: pointer;

    a::after {
        position: absolute
    }

    a::after {
        inset: 0px
    }

    a::after {
        --tw-content: "";
        content: var(--tw-content)
    }
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center
}

.grid-stack {
    display: grid
}

.grid-stack > *, .grid-stack:before, .grid-stack:after {
    grid-area: 1 / 1
}

.paused {
    animation-play-state: paused
}

.visually-hidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(0 0 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0
}

.container-inline-size {
    container-type: inline-size
}

.font-noto {
    font-family: var(--font-noto)
}

.font-mono {
    font-family: var(--font-mono)
}

.bg-glass {
    -webkit-backdrop-filter: saturate(180%) blur(40px);
    backdrop-filter: saturate(180%) blur(40px);
    background: rgba(251, 251, 253, .8)
}

.bg-glass-before {
    position: relative
}

.bg-glass-before:before {
    position: absolute
}

.bg-glass-before:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.bg-glass-before:before {
    z-index: -10
}

.bg-glass-before:before {
    --tw-content: "";
    content: var(--tw-content)
}

.bg-glass-before:before {
    -webkit-backdrop-filter: saturate(180%) blur(40px);
    backdrop-filter: saturate(180%) blur(40px);
    background: rgba(251, 251, 253, .8)
}

.container-px {
    padding-inline: var(--size-16-40);
    padding-inline: var(--size-16-80)
}

.bg-512 {
    background-size: 512px
}

.shadow {
    box-shadow: 4px 4px #545aa666
}

.underline-hover-effect {
    position: relative
}

.underline-hover-effect:after {
    position: absolute
}

.underline-hover-effect:after {
    left: 0
}

.underline-hover-effect:after {
    bottom: -.25rem
}

.underline-hover-effect:after {
    height: 1.5px
}

.underline-hover-effect:after {
    width: 0px
}

.underline-hover-effect:after {
    background-color: currentColor
}

.underline-hover-effect:after {
    transition-property: width;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.underline-hover-effect:after {
    transition-duration: 400
}

.underline-hover-effect:after {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.underline-hover-effect:after {
    --tw-content: "";
    content: var(--tw-content)
}

@media (hover: hover) and (pointer: fine) {
    .underline-hover-effect:hover:after {
        width: 100%
    }
}

.mf-cursor {
    z-index: 5555
}

.mf-cursor:before {
    transform: scale(0);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    transition-property: transform, background-color;
    transition-duration: .25s, 1s;
    transition-timing-function: ease-in-out
}

.mf-cursor:after {
    content: "";
    position: absolute;
    top: -24px;
    left: -24px;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    border-width: 1px;
    border-color: transparent;
    transition-property: width, height, top, left, border-color;
    transition-duration: .25s;
    transition-timing-function: ease-in-out
}

.mf-cursor-text {
    top: -80px;
    left: -80px;
    width: 160px;
    height: 160px;
    font-size: .875rem;
    line-height: 1rem;
    letter-spacing: .02em;
    font-weight: 500;
    color: transparent
}

.mf-cursor.-menu:before {
    transform: scale(1)
}

@media (min-width: 640px) {
    .mf-cursor.-menu:before {
        transform: scale(1.1666666667)
    }
}

.mf-cursor.-exclusion:before {
    transition-duration: .25s, .1s
}

.mf-cursor.-text:before, .mf-cursor.-text.-active:before {
    opacity: 1
}

.mf-cursor.-text:before, .mf-cursor.-text.-active:before {
    transform: scale(1.8333333333);
    transition-duration: .25s, .1s
}

.mf-cursor.-text .mf-cursor-text {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.mf-cursor.-nav:before, .mf-cursor.-nav.-text.-active:before {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background: rgba(251, 251, 253, .8)
}

.mf-cursor.-nav:before, .mf-cursor.-nav.-text.-active:before {
    transform: scale(3.33333);
    transition-duration: .25s, .1s
}

.mf-cursor.-nav:after {
    top: -80px;
    left: -80px;
    width: 160px;
    height: 160px
}

.mf-cursor.-nav:after {
    --tw-border-opacity: 1;
    border-color: rgb(17 24 39 / var(--tw-border-opacity))
}

.mf-cursor.-nav:after {
    transition-timing-function: ease-out
}

.mf-cursor.-nav .mf-cursor-text {
    line-height: 2
}

.mf-cursor.-nav .mf-cursor-text {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity))
}

.mf-cursor.-media.-yutaka .mf-cursor-media {
    margin-top: calc(var(--size-60-80) * -1)
}

.mf-cursor.-media.-yutaka .mf-cursor-media {
    margin-left: calc(var(--size-60-80) * -1)
}

.mf-cursor.-media.-yutaka .mf-cursor-media {
    height: var(--size-120-160)
}

.mf-cursor.-media.-yutaka .mf-cursor-media {
    width: var(--size-120-160)
}

.mf-cursor.-media.-yutaka .mf-cursor-media-box {
    transform: scale(1)
}

.mf-cursor.-media.-yutaka .mf-cursor-media-box {
    border-width: 1px
}

.mf-cursor.-media.-yutaka .mf-cursor-media-box {
    padding: 0
}

.mf-cursor.-media.-yutaka .mf-cursor-media-box {
    @keyframes breath {
        to {
            transform: scale(1.01)
        }
    }

    img {
        animation: breath 1.8s ease-in-out alternate infinite
    }

    &::before {
        content: "";
        background: url(/assets/frontend/media/index/rainbow-bg-7eeca4e9500f431844c148063bc679c17e65f6ef2b197d5c33d68a3d67a64fe0.avif);
        background-repeat: no-repeat;
        background-size: contain;
    }

    &::before {
        position: absolute
    }

    &::before {
        inset: 0px
    }

    &::before {
        height: 100%
    }

    &::before {
        width: 100%
    }

    @keyframes spin {
        to {
            transform: rotate(360deg)
        }
    }

    &::before {
        animation: spin 1s linear infinite
    }

    &::after {
        content: "";
        background: url(/assets/frontend/media/index/yutaka-hand-5c9495d4fec3a2be6e34690ab895b75ff3f0b614860764364d7f89a1718fc0be.avif);
        background-repeat: no-repeat;
        background-size: contain;
        transform-origin: 34.375% 100%;
    }

    &::after {
        position: absolute
    }

    &::after {
        inset: 0px
    }

    &::after {
        height: 100%
    }

    &::after {
        width: 100%
    }

    @keyframes waveCycle {
        0%, 100% {
            animation-timing-function: step-end
        }
        0% {
            transform: rotate(0deg)
        }
        3.33% {
            transform: rotate(-3deg)
        }
        6.66% {
            transform: rotate(2deg)
        }
        9.99% {
            transform: rotate(-3deg)
        }
        13.32% {
            transform: rotate(2deg)
        }
        16.65% {
            transform: rotate(-3deg)
        }
        19.98% {
            transform: rotate(2deg)
        }
        23.31% {
            transform: rotate(-3deg)
        }
        26.64% {
            transform: rotate(2deg)
        }
        29.97% {
            transform: rotate(-3deg)
        }
        33.3% {
            transform: rotate(0deg)
        }
        100% {
            transform: rotate(0deg)
        }
    }

    &::after {
        animation: waveCycle 4.5s ease-in-out infinite
    }
}

.mf-cursor.-leave-yutaka .mf-cursor-media {
    margin-top: calc(var(--size-60-80) * -1)
}

.mf-cursor.-leave-yutaka .mf-cursor-media {
    margin-left: calc(var(--size-60-80) * -1)
}

.mf-cursor.-leave-yutaka .mf-cursor-media {
    height: var(--size-120-160)
}

.mf-cursor.-leave-yutaka .mf-cursor-media {
    width: var(--size-120-160)
}

.mf-cursor.-hidden .mf-cursor-media {
    margin-top: calc(var(--size-60-80) * -1)
}

.mf-cursor.-hidden .mf-cursor-media {
    margin-left: calc(var(--size-60-80) * -1)
}

.mf-cursor.-hidden .mf-cursor-media {
    height: var(--size-120-160)
}

.mf-cursor.-hidden .mf-cursor-media {
    width: var(--size-120-160)
}

.swiper-shop .swiper-slide:not(.swiper-slide-active) {
    filter: blur(2px);
    transition: filter .8s;

    a {
        pointer-events: none;
    }
}

.icon-liked {
    fill: currentColor
}

@media (min-width: 425px) {
    .xs\:h2 {
        font-weight: 700;
        font-size: var(--size-24-32);
        line-height: var(--size-32-40);
        letter-spacing: .01em
    }
}

@media (min-width: 1024px) {
    .lg\:text-vertical {
        writing-mode: vertical-lr;
        text-transform: uppercase
    }

    .lg\:label {
        font-size: var(--size-12-16);
        line-height: 1rem;
        letter-spacing: .04em
    }

    .lg\:btn-main:has(.filter-select-input) {
        gap: var(--size-24-64);
        max-width: -moz-fit-content;
        max-width: fit-content
    }

    .lg\:btn-main {
        display: grid;
        height: var(--size-64-72);
        width: 100%;
        max-width: 24rem;
        place-items: center;
        --tw-bg-opacity: 1;
        background-color: rgb(17 24 39 / var(--tw-bg-opacity));
        font-weight: 700;
        letter-spacing: .025em;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))
    }
}

.\*\:p-10 > * {
    padding: 2.5rem
}

.\*\:py-4 > * {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.before\:absolute:before {
    content: var(--tw-content);
    position: absolute
}

.before\:inset-0:before {
    content: var(--tw-content);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.before\:my-auto:before {
    content: var(--tw-content);
    margin-top: auto;
    margin-bottom: auto
}

.before\:-ms-1:before {
    content: var(--tw-content);
    margin-inline-start: -.25rem
}

.before\:h-\[99\.5\%\]:before {
    content: var(--tw-content);
    height: 99.5%
}

.before\:w-full:before {
    content: var(--tw-content);
    width: 100%
}

.before\:bg-white:before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.before\:-z-1:before {
    content: var(--tw-content);
    z-index: -1
}

.after\:absolute:after {
    content: var(--tw-content);
    position: absolute
}

.after\:relative:after {
    content: var(--tw-content);
    position: relative
}

.after\:inset-0:after {
    content: var(--tw-content);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.after\:my-auto:after {
    content: var(--tw-content);
    margin-top: auto;
    margin-bottom: auto
}

.after\:ms-1:after {
    content: var(--tw-content);
    margin-inline-start: .25rem
}

.after\:hidden:after {
    content: var(--tw-content);
    display: none
}

.after\:h-\[12\%\]:after {
    content: var(--tw-content);
    height: 12%
}

.after\:h-\[99\.5\%\]:after {
    content: var(--tw-content);
    height: 99.5%
}

.after\:w-1\/12:after {
    content: var(--tw-content);
    width: 8.333333%
}

.after\:w-full:after {
    content: var(--tw-content);
    width: 100%
}

.after\:bg-white:after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.after\:bg-gradient-to-r:after {
    content: var(--tw-content);
    background-image: linear-gradient(to right, var(--tw-gradient-stops))
}

.after\:from-main\/10:after {
    content: var(--tw-content);
    --tw-gradient-from: rgb(17 24 39 / .1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.after\:to-50\%:after {
    content: var(--tw-content);
    --tw-gradient-to-position: 50%
}

.after\:-z-1:after {
    content: var(--tw-content);
    z-index: -1
}

.after\:\[background-position-x\:1px\]:after {
    content: var(--tw-content);
    background-position-x: 1px
}

.first\:mt-\[var\(--grid-item-py\)\]:first-child {
    margin-top: var(--grid-item-py)
}

.last\:mb-\[var\(--grid-item-py\)\]:last-child {
    margin-bottom: var(--grid-item-py)
}

.first-of-type\:border-0:first-of-type {
    border-width: 0px
}

@media (hover: hover) and (pointer: fine) {
    .hover\:scale-110:hover {
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .hover\:scale-\[0\.98\]:hover {
        --tw-scale-x: .98;
        --tw-scale-y: .98;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .hover\:bg-main\/5:hover {
        background-color: #1118270d
    }

    .hover\:text-gray-400:hover {
        --tw-text-opacity: 1;
        color: rgb(156 163 175 / var(--tw-text-opacity))
    }

    .hover\:text-main:hover {
        --tw-text-opacity: 1;
        color: rgb(17 24 39 / var(--tw-text-opacity))
    }

    .hover\:underline:hover {
        text-decoration-line: underline
    }

    .hover\:brightness-100:hover {
        --tw-brightness: brightness(1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .group:hover .group-hover\:rotate-0 {
        --tw-rotate: 0deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .group:hover .group-hover\:opacity-0 {
        opacity: 0
    }

    .group:hover .group-hover\:paused {
        animation-play-state: paused
    }

    .peer:hover ~ .peer-hover\:translate-y-0 {
        --tw-translate-y: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .peer:hover ~ .peer-hover\:opacity-100 {
        opacity: 1 !important
    }
}

@media (min-width: 425px) {
    .xs\:after\:h-1\/5:after {
        content: var(--tw-content);
        height: 20%
    }
}

@media (min-width: 640px) {
    .sm\:col-span-3 {
        grid-column: span 3 / span 3
    }

    .sm\:-col-start-3 {
        grid-column-start: -3
    }

    .sm\:col-start-2 {
        grid-column-start: 2
    }

    .sm\:col-start-4 {
        grid-column-start: 4
    }

    .sm\:row-start-1 {
        grid-row-start: 1
    }

    .sm\:mx-24-64 {
        margin-left: var(--size-24-64);
        margin-right: var(--size-24-64)
    }

    .sm\:line-clamp-4 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4
    }

    .sm\:block {
        display: block
    }

    .sm\:max-w-\[40ch\] {
        max-width: 40ch
    }

    .sm\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem
    }

    .sm\:py-3 {
        padding-top: .75rem;
        padding-bottom: .75rem
    }
}

@media (min-width: 768px) {
    .md\:col-span-2 {
        grid-column: span 2 / span 2
    }

    .md\:col-start-2 {
        grid-column-start: 2
    }

    .md\:col-start-3 {
        grid-column-start: 3
    }

    .md\:row-start-1 {
        grid-row-start: 1
    }

    .md\:row-start-3 {
        grid-row-start: 3
    }

    .md\:my-3 {
        margin-top: .75rem;
        margin-bottom: .75rem
    }

    .md\:mt-16 {
        margin-top: 4rem
    }

    .md\:flex {
        display: flex
    }

    .md\:hidden {
        display: none
    }

    .md\:h-full {
        height: 100%
    }

    .md\:min-h-dvh {
        min-height: 100dvh
    }

    .md\:w-3\/4 {
        width: 75%
    }

    .md\:w-4\/5 {
        width: 80%
    }

    .md\:w-5 {
        width: 1.25rem
    }

    .md\:w-full {
        width: 100%
    }

    .md\:max-w-\[400px\] {
        max-width: 400px
    }

    .md\:max-w-\[45ch\] {
        max-width: 45ch
    }

    .md\:cursor-default {
        cursor: default
    }

    .md\:gap-2 {
        gap: .5rem
    }

    .md\:self-end {
        align-self: flex-end
    }

    .md\:justify-self-end {
        justify-self: end
    }

    .md\:border-s {
        border-inline-start-width: 1px
    }

    .md\:\!bg-none {
        background-image: none !important
    }

    .md\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem
    }

    .md\:pb-80-160 {
        padding-bottom: var(--size-80-160)
    }

    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .md\:font-medium {
        font-weight: 500
    }

    .md\:shadow-xl {
        --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
        --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

    .md\:drop-shadow-2xl {
        --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / .15));
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .md\:first\:pt-0:first-child {
        padding-top: 0
    }
}

@media (min-width: 1024px) {
    .lg\:right-14 {
        right: 3.5rem
    }

    .lg\:-order-1 {
        order: -1
    }

    .lg\:col-span-3 {
        grid-column: span 3 / span 3
    }

    .lg\:col-span-4 {
        grid-column: span 4 / span 4
    }

    .lg\:col-start-2 {
        grid-column-start: 2
    }

    .lg\:col-start-3 {
        grid-column-start: 3
    }

    .lg\:col-start-4 {
        grid-column-start: 4
    }

    .lg\:col-start-5 {
        grid-column-start: 5
    }

    .lg\:row-span-full {
        grid-row: 1 / -1
    }

    .lg\:me-\[calc\(9\.375\%-1rem\)\] {
        margin-inline-end: calc(9.375% - 1rem)
    }

    .lg\:mt-6 {
        margin-top: 1.5rem
    }

    .lg\:block {
        display: block
    }

    .lg\:flex {
        display: flex
    }

    .lg\:contents {
        display: contents
    }

    .lg\:hidden {
        display: none
    }

    .lg\:h-\[calc\(100dvh-theme\(spacing\.48-160\)\)\] {
        height: calc(100dvh - var(--size-48-160))
    }

    .lg\:w-3\/4 {
        width: 75%
    }

    .lg\:w-3\/5 {
        width: 60%
    }

    .lg\:w-\[50vw\] {
        width: 50vw
    }

    .lg\:max-w-\[55ch\] {
        max-width: 55ch
    }

    .lg\:justify-between {
        justify-content: space-between
    }

    .lg\:gap-2 {
        gap: .5rem
    }

    .lg\:gap-\[4\.85vw\] {
        gap: 4.85vw
    }

    .lg\:p-10 {
        padding: 2.5rem
    }

    .lg\:p-4 {
        padding: 1rem
    }

    .lg\:pb-0 {
        padding-bottom: 0
    }

    .lg\:pe-8 {
        padding-inline-end: 2rem
    }

    .lg\:pe-\[4\.85vw\] {
        padding-inline-end: 4.85vw
    }

    .lg\:ps-4 {
        padding-inline-start: 1rem
    }

    .lg\:pt-3 {
        padding-top: .75rem
    }

    .\*\:lg\:hidden > * {
        display: none
    }
}

@media (min-width: 1280px) {
    .xl\:line-clamp-6 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6
    }

    .xl\:block {
        display: block
    }

    .xl\:w-2\/3 {
        width: 66.666667%
    }

    .xl\:flex-col {
        flex-direction: column
    }

    .xl\:p-xl-1920-32-56 {
        padding: var(--size-xl-1920-32-56)
    }

    .xl\:p-xl-1920-40-56 {
        padding: var(--size-xl-1920-40-56)
    }
}

@media (min-width: 1536px) {
    .\32xl\:block {
        display: block
    }

    .\32xl\:w-2\/3 {
        width: 66.666667%
    }
}

@media (max-width: 639px) {
    .sm-down\:col-span-full {
        grid-column: 1 / -1
    }

    .sm-down\:col-start-2 {
        grid-column-start: 2
    }

    .sm-down\:row-start-1 {
        grid-row-start: 1
    }

    .sm-down\:-mx-24-40 {
        margin-left: calc(var(--size-24-40) * -1);
        margin-right: calc(var(--size-24-40) * -1)
    }

    .sm-down\:-mr-6 {
        margin-right: -1.5rem
    }

    .sm-down\:ml-6 {
        margin-left: 1.5rem
    }

    .sm-down\:w-full {
        width: 100%
    }

    .sm-down\:self-end {
        align-self: flex-end
    }

    .sm-down\:justify-self-end {
        justify-self: end
    }

    .sm-down\:px-24-40 {
        padding-left: var(--size-24-40);
        padding-right: var(--size-24-40)
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .sm-only\:col-span-2 {
        grid-column: span 2 / span 2
    }

    .sm-only\:-col-start-4 {
        grid-column-start: -4
    }
}

@media (max-width: 767px) {
    .md-down\:order-2 {
        order: 2
    }

    .md-down\:col-span-full {
        grid-column: 1 / -1
    }

    .md-down\:-mb-10 {
        margin-bottom: -2.5rem
    }

    .md-down\:mt-8 {
        margin-top: 2rem
    }

    .md-down\:hidden {
        display: none
    }

    .md-down\:aspect-square {
        aspect-ratio: 1 / 1
    }

    .md-down\:max-w-\[6em\] {
        max-width: 6em
    }

    .md-down\:gap-6 {
        gap: 1.5rem
    }

    .md-down\:border-b {
        border-bottom-width: 1px
    }

    .md-down\:px-0 {
        padding-left: 0;
        padding-right: 0
    }

    .md-down\:px-24-40 {
        padding-left: var(--size-24-40);
        padding-right: var(--size-24-40)
    }

    .md-down\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .md-down\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem
    }

    .md-down\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem
    }

    .md-down\:py-80-160 {
        padding-top: var(--size-80-160);
        padding-bottom: var(--size-80-160)
    }

    .md-down\:pb-6 {
        padding-bottom: 1.5rem
    }

    .md-down\:pt-4 {
        padding-top: 1rem
    }

    .md-down\:pt-80-120 {
        padding-top: var(--size-80-120)
    }

    .md-down\:\*\:p-6 > * {
        padding: 1.5rem
    }

    .md-down\:\*\:py-10 > * {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem
    }
}

@media (max-width: 1023px) {
    .lg-down\:order-2 {
        order: 2
    }

    .lg-down\:col-span-full {
        grid-column: 1 / -1
    }

    .lg-down\:col-start-2 {
        grid-column-start: 2
    }

    .lg-down\:row-span-2 {
        grid-row: span 2 / span 2
    }

    .lg-down\:row-start-1 {
        grid-row-start: 1
    }

    .lg-down\:row-start-2 {
        grid-row-start: 2
    }

    .lg-down\:mx-24-40 {
        margin-left: var(--size-24-40);
        margin-right: var(--size-24-40)
    }

    .lg-down\:my-8 {
        margin-top: 2rem;
        margin-bottom: 2rem
    }

    .lg-down\:hidden {
        display: none
    }

    .lg-down\:flex-col {
        flex-direction: column
    }

    .lg-down\:items-center {
        align-items: center
    }

    .lg-down\:gap-x-4 {
        -moz-column-gap: 1rem;
        column-gap: 1rem
    }

    .lg-down\:justify-self-end {
        justify-self: end
    }

    .lg-down\:px-24-40 {
        padding-left: var(--size-24-40);
        padding-right: var(--size-24-40)
    }

    .lg-down\:pe-24-40 {
        padding-inline-end: var(--size-24-40)
    }

    .lg-down\:ps-24-40 {
        padding-inline-start: var(--size-24-40)
    }

    .lg-down\:text-center {
        text-align: center
    }

    .lg-down\:subgrid:has(.filter-select-input) {
        gap: var(--size-24-64);
        max-width: -moz-fit-content;
        max-width: fit-content
    }

    .lg-down\:subgrid {
        display: grid;
        grid-template-columns:subgrid;
        grid-template-rows:subgrid
    }
}

@media (max-width: 1279px) {
    .xl-down\:hidden {
        display: none
    }
}

@media (hover: hover) {
    .has-hover\:hidden {
        display: none
    }
}

.\[\&\>main\]\:flex-1 > main {
    flex: 1 1 0%
}

@keyframes breath {
    to {
        transform: scale(1.01)
    }
}

.is-showing .\[\.is-showing_\&\]\:animate-breath {
    animation: breath 1.8s ease-in-out alternate infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.is-showing .\[\.is-showing_\&\]\:animate-spin {
    animation: spin 1s linear infinite
}

@keyframes waveCycle {
    0%, to {
        animation-timing-function: step-end
    }
    0% {
        transform: rotate(0)
    }
    3.33% {
        transform: rotate(-3deg)
    }
    6.66% {
        transform: rotate(2deg)
    }
    9.99% {
        transform: rotate(-3deg)
    }
    13.32% {
        transform: rotate(2deg)
    }
    16.65% {
        transform: rotate(-3deg)
    }
    19.98% {
        transform: rotate(2deg)
    }
    23.31% {
        transform: rotate(-3deg)
    }
    26.64% {
        transform: rotate(2deg)
    }
    29.97% {
        transform: rotate(-3deg)
    }
    33.30% {
        transform: rotate(0)
    }
    to {
        transform: rotate(0)
    }
}

.is-showing .\[\.is-showing_\&\]\:animate-waveCycle {
    animation: waveCycle 4.5s ease-in-out infinite
}

.swiper-slide-thumb-active .\[\.swiper-slide-thumb-active_\&\]\:border-main {
    --tw-border-opacity: 1;
    border-color: rgb(17 24 39 / var(--tw-border-opacity))
}

.swiper-slide-thumb-active .\[\.swiper-slide-thumb-active_\&\]\:brightness-100 {
    --tw-brightness: brightness(1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.gototop {
    width: 48px;
    height: 48px;
    position: fixed;
    right: 12px;
    bottom: 56px;
    z-index: 9999;
    background-color: rgba(209, 213, 219, 0.8);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 992px) {
    .gototop {
      right: 24px;
    }
}

@media (min-width: 768px) {
    .gototop {
      right: 28px;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * require_tree .


 */