@font-face {
    font-family: Satoshi;
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/Satoshi-Black.woff2") format("woff2"), url("../fonts/Satoshi-Black.woff") format("woff");
    font-display: swap
}


@keyframes anime-ticker-to-left {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.c-order-1 {
    order: 1
}

.c-order-2 {
    order: 2
}

.c-order-3 {
    order: 3
}

.c-order-4 {
    order: 4
}

.c-order-5 {
    order: 5
}

.c-marker {
    color: var(--color-white);
    background-image: linear-gradient(transparent 15%, #ff305f 15%);
    background-repeat: no-repeat;
    background-size: 100% 90%
}

.c-list {
    list-style: none
}

.c-list>li {
    position: relative
}

.c-list>li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 1.8em;
    height: 1.8em
}

.c-list li {
    list-style-type: none
}

.c-list-disc>li {
    padding-left: 1em
}

.c-list-disc>li::before {
    left: .1em;
    content: "・"
}

.c-list-note>li {
    padding-left: 1.5em
}

.c-list-note>li::before {
    left: 0;
    content: "※"
}

.c-list-decimal {
    counter-reset: item
}

.c-list-decimal>li {
    padding-left: 2.3em
}

.c-list-decimal>li::before {
    justify-content: flex-end;
    white-space: nowrap;
    content: counters(item, "-") ". ";
    counter-increment: item
}

.c-page-header {
    position: relative;
    overflow: hidden;
    padding-right: var(--gap);
    padding-left: var(--gap)
}

.c-page-header-inner {
    border-top: var(--border-width) solid var(--color-border);
    border-bottom: var(--border-width) solid var(--color-border)
}

.c-page-header-description {
    font-weight: var(--font-weight-bold);
    text-align: justify
}

.c-page-section {
    padding-right: var(--gap);
    padding-left: var(--gap)
}

.c-page-section+.c-page-section .c-page-section-inner {
    border-top: var(--border-width) solid var(--color-border)
}

.c-page-section-title {
    font-weight: var(--font-weight-black);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-negative)
}

.c-gallery {
    overflow: hidden;
    line-height: 0;
    transform: translate3d(0, 0, 0)
}

.c-gallery.is-loaded .c-gallery-item-inner::after {
    visibility: hidden;
    opacity: 0;
    transition: opacity 240ms ease, visibility 0s 240ms
}

.c-gallery.is-loaded .c-gallery-item-inner img {
    visibility: visible
}

.c-gallery-container {
    display: inline-flex
}

.c-gallery-list {
    display: flex
}

.c-gallery-item {
    --progress: 0;
    box-sizing: content-box;
    flex: none;
    padding-right: calc(var(--gap)*.5);
    padding-left: calc(var(--gap)*.5)
}

.c-gallery-item-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.c-gallery-item-inner img {
    position: absolute;
    right: 0;
    height: 100%;
    visibility: hidden;
    object-fit: cover;
    will-change: transform
}

.c-gallery-item-inner::after {
    pointer-events: none;
    content: "";
    background-color: var(--color-snow);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.c-infinity {
    position: relative;
    width: 100%;
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-image: url("../images/common/materials/infinity_vector.svg");
    mask-image: url("../images/common/materials/infinity_vector.svg");
    transform: translate3d(0, 0, 0)
}

.c-infinity.is-active::after {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    transition: -webkit-mask-position 4600ms var(--ease-out-toriki);
    transition: mask-position 4600ms var(--ease-out-toriki);
    transition: mask-position 4600ms var(--ease-out-toriki), -webkit-mask-position 4600ms var(--ease-out-toriki)
}

.c-infinity::before {
    display: block;
    padding-top: 53.1666666667%;
    content: ""
}

.c-infinity::after {
    position: absolute;
    z-index: 1;
    content: "";
    background: var(--color-gray);
    will-change: transform;
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    -webkit-mask-image: linear-gradient(to right, transparent, transparent, var(--color-white), var(--color-white));
    mask-image: linear-gradient(to right, transparent, transparent, var(--color-white), var(--color-white));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.c-infinity img {
    object-fit: contain;
    animation: c-infinity-cross-fade 9s infinite linear forwards;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.c-infinity img:nth-child(2) {
    animation-delay: -3s
}

.c-infinity img:nth-child(3) {
    animation-delay: -6s
}

@keyframes c-infinity-cross-fade {

    0%,
    25%,
    100% {
        opacity: 0;
    }

    50%,
    75% {
        opacity: 1;
    }
}


.c-accordion-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer
}

.c-accordion-header-title {
    font-weight: var(--font-weight-black)
}

.c-accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-base);
    border: var(--border-width) solid var(--color-border);
    border-radius: 50%
}

.c-accordion-button::before,
.c-accordion-button::after {
    position: absolute;
    content: "";
    background-color: var(--color-white)
}

.c-accordion-button::after {
    transition: transform .4s var(--ease-out-toriki);
    transform: rotate(90deg)
}

.c-accordion-content {
    height: 0;
    padding: 0;
    overflow: hidden
}

.c-accordion-content-inner {
    position: relative
}

.c-accordion-content-inner::before {
    position: absolute;
    top: 0;
    content: "";
    background-color: var(--color-base);
    transition: transform .3s var(--ease-out-toriki);
    transform: scale(0, 1);
    transform-origin: right
}

.c-accordion.is-active .c-accordion-content-inner::before {
    transition: transform .4s var(--ease-out-toriki);
    transform: scale(1, 1);
    transform-origin: left
}

.c-accordion.is-active .c-accordion-button::after {
    transform: rotate(180deg)
}
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 100vh
}

.content {
    position: relative;
    z-index: 1
}


@media screen and (min-width: 768px) {
    :root {
        --gap: 1rem;
        --padding-content: 3rem;
        --side-column-width: 19rem;
    }

    .c-display-sp {
        display: none;
    }

    .c-order-1-pc {
        order: 1;
    }

    .c-order-2-pc {
        order: 2;
    }

    .c-order-3-pc {
        order: 3;
    }

    .c-order-4-pc {
        order: 4;
    }

    .c-order-5-pc {
        order: 5;
    }

    .c-marker {
        padding: 0 .2rem .2rem;
    }

    .c-page-header {
        padding-bottom: 10rem;
        margin-bottom: -10rem;
    }

    .c-page-header-inner {
        padding: 7.2rem var(--padding-content) 8rem;
    }

    .c-page-header-title-main {
        margin-top: 3.2rem;
        margin-left: -0.3rem;
    }

    .c-page-header-title-en {
        position: absolute;
        z-index: 1;
        pointer-events: none;
    }

    .c-page-header-title-en span {
        display: block;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
    }

    .c-page-header-description {
        margin-top: 3.5rem;
        font-size: 1.6rem;
    }

    .c-page-section-inner {
        display: flex;
        padding: 8rem var(--padding-content);
    }

    .c-page-section-title {
        display: flex;
        flex: none;
        align-items: flex-start;
        justify-content: center;
        width: var(--side-column-width);
        padding-right: 7.4rem;
        font-size: 2.4rem;
    }

    .c-page-section-title-inline {
        position: sticky;
        top: 8rem;
        font-feature-settings: normal;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }

    .c-page-section-content {
        flex-grow: 1;
        min-width: 0;
        max-width: 100%;
    }

    .c-gallery {
        border-radius: .8rem;
    }

    .c-gallery-item {
        width: 30rem;
        height: 30rem;
    }

    .c-loading-text {
        width: 50.8rem;
    }

    .c-loading-text.is-leave .c-loading-text-inner {
        transition: opacity 160ms 840ms ease, transform 1000ms var(--ease-in-toriki);
    }

    .c-loading-text-inner {
        padding: 2rem 0;
    }

    .c-loading-bg-texture {
        width: 24rem;
        height: 24rem;
    }

    .c-accordion-button {
        width: 4rem;
        height: 4rem;
        min-width: 4rem;
        min-height: 4rem;
    }

    .c-accordion-button::before,
    .c-accordion-button::after {
        width: 1.4rem;
        height: .1rem;
    }

    .c-accordion-content-inner::before {
        width: 101rem;
        height: .1rem;
    }

}

@media screen and (max-width: 767px) {
    :root {
        --gap: 2rem;
        --padding-content: 2rem;
        --side-column-width: 0;
    }

    html {
        font-size: calc(100vw / 75);
    }

    body {
        font-size: 2.8rem;
    }

    .c-display-pc {
        display: none;
    }

    .c-order-1-sp {
        order: 1;
    }

    .c-order-2-sp {
        order: 2;
    }

    .c-order-3-sp {
        order: 3;
    }

    .c-order-4-sp {
        order: 4;
    }

    .c-order-5-sp {
        order: 5;
    }

    .c-marker {
        padding: 0 .2rem .2rem;
    }

    .c-page-header-inner {
        padding: 8.2rem var(--padding-content) 9rem;
    }

    .c-page-header-title-main {
        margin-top: 3.6rem;
        margin-left: -0.3rem;
    }

    .c-page-header-title-en {
        display: none;
    }

    .c-page-header-description {
        margin-top: 3.2rem;
        font-size: 2.8rem;
    }

    .c-page-section-inner {
        padding: 6.4rem var(--padding-content) 9rem;
    }

    .c-page-section-title {
        font-size: 4rem;
    }

    .c-page-section-content {
        margin-top: 4.2rem;
    }

    .c-gallery {
        border-radius: 1.5rem;
    }

    .c-gallery-item {
        width: 30rem;
        height: 30rem;
    }

    .c-accordion-button {
        width: 8rem;
        height: 8rem;
        min-width: 8rem;
        min-height: 8rem;
    }

    .c-accordion-button::before,
    .c-accordion-button::after {
        width: 1.9rem;
        height: .2rem;
    }

    .c-accordion-content-inner::before {
        width: 59rem;
        height: .2rem;
    }
}

@media only screen and (min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

@media screen and (min-width: 768px)and (hover: hover) {
    .c-accordion-header:hover .c-accordion-button {
        background-color: var(--color-white);
    }

    .c-accordion-header:hover .c-accordion-button::before,
    .c-accordion-header:hover .c-accordion-button::after {
        background-color: var(--color-base);
    }

    .header-button:hover {
        color: var(--color-base);
        background-color: var(--color-white);
    }

    .nav-link:hover {
        color: var(--color-white);
        background-color: var(--color-base);
    }

    .footer-nav-link:hover {
        text-decoration: underline;
    }

    .footer-pagetop-link:hover {
        background-color: var(--color-white);
    }

    .footer-pagetop-link:hover::before {
        border-top-color: var(--color-base);
        border-left-color: var(--color-base);
    }
}

@media screen and (min-width: 768px)and (hover: none) {
    .c-accordion-header:active .c-accordion-button {
        background-color: var(--color-white);
    }

    .c-accordion-header:active .c-accordion-button::before,
    .c-accordion-header:active .c-accordion-button::after {
        background-color: var(--color-base);
    }
}

@media screen and (min-width: 768px)and (min-width: 768px)and (hover: hover) {
}

@media screen and (min-width: 768px)and (min-width: 768px)and (hover: none) {
}