/* --------------------
 Gallery
-------------------- */
.com-page-head__title__en img {
    height: 9.0666666667vw;
}

@media (min-width: 768px) {
    .com-page-head__title__en img {
        height: 68px;
    }
}

@media (min-width: 992px) {
    .com-page-head__title__en img {
        height: 84px;
    }
}

@media (max-width: 767px) {
    .com-page-head__title__ja {
        padding-bottom: 1.6vw;
    }
}

.filter {
    margin: 0 0 13.3333333333vw;
    padding: 5.3333333333vw 0 0;
}

@media (min-width: 768px) {
    .filter {
        border-bottom: 1px solid var(--color-hot-pink);
        margin: 0 0 60px;
        padding: 40px 0 70px;
    }
}

.filter-container {
    margin: 0 auto;
    max-width: calc(860px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.filter__item {
    margin: 0 0 6.4vw;
    padding: 0 5.3333333333vw;
}

@media (min-width: 768px) {
    .filter__item {
        margin: 0 0 24px;
        padding: 0;
    }
}

.filter__item:last-child {
    margin-bottom: 0;
}

.filter__item__title {
    color: var(--color-hot-pink);
    font-size: var(--fs13);
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 2.1333333333vw;
}

@media (min-width: 768px) {
    .filter__item__title {
        font-size: var(--fs20);
        margin: 0 0 8px;
    }
}

.filter__item__list {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 2.1333333333vw 2.1333333333vw;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .filter__item__list {
        gap: 6px 16px;
    }
}

.filter__item__list__item {
    flex: 0 1 auto;
    min-width: calc(33.33333% - 1.42222vw);
}

@media (min-width: 768px) {
    .filter__item__list__item {
        min-width: calc(25% - 12px);
    }
}

@media (min-width: 992px) {
    .filter__item__list__item {
        min-width: 130px;
    }
}

.filter__item__list__item a {
    align-items: center;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    background-color: var(--color-white);
    border: 0.2666666667vw solid var(--color-hot-pink);
    border-radius: 2.1333333333vw;
    color: var(--color-hot-pink);
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs13);
    font-weight: 700;
    justify-content: center;
    line-height: 1.4;
    margin: 0;
    padding: 1.0666666667vw 2.1333333333vw;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
    width: 100%;
}

@media (min-width: 768px) {
    .filter__item__list__item a {
        border-radius: 14px;
        border-width: 2px;
        font-size: var(--fs18);
        padding: 4px 12px;
    }
}

.filter__item__list__item a[aria-current] {
    background-color: var(--color-hot-pink);
    color: var(--color-white);
}

.filter__item__list__item a:focus {
    background-color: var(--color-hot-pink);
    color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .filter__item__list__item a:hover {
        background-color: var(--color-hot-pink);
        color: var(--color-white);
    }
}

.filter__item__list .splide {
    width: 100%;
}

@media (min-width: 768px) {
    .filter__item__list .splide.is-initialized:not(.is-active),
  .filter__item__list .splide.is-initialized:not(.is-active) .splide__track,
  .filter__item__list .splide.is-initialized:not(.is-active) .splide__list,
  .filter__item__list .splide.is-initialized:not(.is-active) .splide__slide {
        display: contents;
    }
}

@media (max-width: 767px) {
    .filter__item__list .splide.is-initialized.is-active .splide__slide {
        width: 25.5111111111vw;
    }
}

.filter__item__list .splide.is-initialized.is-active .splide__arrow {
    background: none;
    height: 8vw;
    opacity: 1;
    width: 8vw;
}

@media (min-width: 768px) {
    .filter__item__list .splide.is-initialized.is-active .splide__arrow {
        height: 30px;
        width: 30px;
    }
}

.filter__item__list .splide.is-initialized.is-active .splide__arrow > svg {
    display: none;
}

.filter__item__list .splide.is-initialized.is-active .splide__arrow:before {
    background-color: var(--color-coral-pink);
    bottom: 0;
    content: "";
    display: block;
    height: 4.2666666667vw;
    left: 0;
    margin: auto;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    right: 0;
    top: 0;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 3.4666666667vw;
}

.filter__item__list .splide.is-initialized.is-active .splide__arrow--prev {
    left: -8vw;
}

@media (min-width: 768px) {
    .filter__item__list .splide.is-initialized.is-active .splide__arrow--prev {
        left: -30px;
    }
}

.filter__item__list .splide.is-initialized.is-active .splide__arrow--prev:before {
    left: -0.8vw;
    -webkit-mask-image: url(../images/icons/icon-coral-pink-angle-left-large.svg);
    mask-image: url(../images/icons/icon-coral-pink-angle-left-large.svg);
}

@media (min-width: 768px) {
    .filter__item__list .splide.is-initialized.is-active .splide__arrow--prev:before {
        left: -3px;
    }
}

.filter__item__list .splide.is-initialized.is-active .splide__arrow--next {
    right: -8vw;
}

@media (min-width: 768px) {
    .filter__item__list .splide.is-initialized.is-active .splide__arrow--next {
        right: -30px;
    }
}

.filter__item__list .splide.is-initialized.is-active .splide__arrow--next:before {
    -webkit-mask-image: url(../images/icons/icon-coral-pink-angle-right-large.svg);
    mask-image: url(../images/icons/icon-coral-pink-angle-right-large.svg);
    right: -0.8vw;
}

@media (min-width: 768px) {
    .filter__item__list .splide.is-initialized.is-active .splide__arrow--next:before {
        right: -3px;
    }
}

.filter__item__list .splide.is-initialized.is-active .splide__arrow:disabled {
    opacity: 0.3;
}

.list {
    margin: 0 0 21.3333333333vw;
}

@media (min-width: 768px) {
    .list {
        margin: 0 0 120px;
    }
}

.list-container {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    gap: 6.4vw 4.2666666667vw;
    justify-content: flex-start;
    margin: 0 auto;
    max-width: calc(1242px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 768px) {
    .list-container {
        gap: 48px 30px;
    }
}

@media (min-width: 992px) {
    .list-container {
        gap: 68px 60px;
    }
}

.list__item {
    display: block;
    flex: 0 0 calc(50% - 2.13333vw);
    min-width: 0px;
    position: relative;
    text-decoration: none;
}

@media (min-width: 768px) {
    .list__item {
        flex: 0 0 calc(33.33333% - 20px);
    }
}

@media (min-width: 992px) {
    .list__item {
        flex: 0 0 calc(33.33333% - 40px);
    }
}

.list__item img {
    aspect-ratio: 374/254;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.list__item__title {
    align-items: center;
    background-color: rgb(var(--color-misty-rose-rgb), 0.8);
    bottom: 0;
    color: #4b4949;
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs12);
    font-weight: 700;
    justify-content: center;
    left: 0;
    letter-spacing: 0.075em;
    line-height: 1.4;
    margin: 0;
    opacity: 0;
    padding: 0 2.6666666667vw;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transition: opacity var(--duration) var(--cubic) 0s;
}

@media (min-width: 768px) {
    .list__item__title {
        font-size: var(--fs16);
        padding: 0 10px;
    }
}

@media (min-width: 992px) {
    .list__item__title {
        font-size: var(--fs17);
    }
}

.list__item:focus .list__item__title {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .list__item:hover .list__item__title {
        opacity: 1;
    }
}

.list__modal {
    max-width: 1240px;
    padding: 12.8vw 5.3333333333vw 4.2666666667vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .list__modal {
        padding: 100px 80px 60px;
    }
}

@media (min-width: 992px) {
    .list__modal {
        padding: 100px;
    }
}

.list__modal button.f-button.is-close-button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--color-coral-pink);
    display: block;
    font-size: 0.5rem;
    font-weight: 700;
    height: auto;
    letter-spacing: 0;
    line-height: 1.4;
    padding: 0;
    right: 2.1333333333vw;
    text-align: center;
    top: 2.1333333333vw;
    transition: opacity var(--duration) var(--cubic) 0s;
    width: -webkit-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .list__modal button.f-button.is-close-button {
        font-size: var(--fs16);
        right: 20px;
        top: 20px;
    }
}

@media (min-width: 992px) {
    .list__modal button.f-button.is-close-button {
        font-size: var(--fs19);
        right: 30px;
        top: 30px;
    }
}

.list__modal button.f-button.is-close-button:before {
    background-image: url(../images/icons/icon-coral-pink-cross.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 4.8vw;
    margin: 0 auto 0.5333333333vw;
    width: 4.8vw;
}

@media (min-width: 768px) {
    .list__modal button.f-button.is-close-button:before {
        height: 44px;
        margin: 0 auto 4px;
        width: 44px;
    }
}

@media (min-width: 992px) {
    .list__modal button.f-button.is-close-button:before {
        height: 48px;
        width: 48px;
    }
}

.list__modal button.f-button.is-close-button span {
    display: block;
    white-space: nowrap;
}

.list__modal button.f-button.is-close-button:focus {
    background: none;
    background-color: transparent;
    color: var(--color-coral-pink);
    opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
    .list__modal button.f-button.is-close-button:hover {
        background: none;
        background-color: transparent;
        color: var(--color-coral-pink);
        opacity: 0.65;
    }
}

.list__modal__arrows {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    gap: 10.6666666667vw;
    justify-content: center;
    padding: 3.7333333333vw 0 0;
}

@media (min-width: 768px) {
    .list__modal__arrows {
        padding: 0;
        position: static;
    }
}

.list__modal__arrows__arrow {
    align-items: center;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    background-color: var(--color-misty-rose);
    border: none;
    border-radius: 0;
    color: var(--color-coral-pink);
    cursor: pointer;
    display: flex;
    height: 9.6vw;
    justify-content: center;
    padding: 0;
    transition: opacity var(--duration) var(--cubic) 0s;
    width: 9.6vw;
}

@media (min-width: 768px) {
    .list__modal__arrows__arrow {
        background-color: transparent;
        height: 48px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        z-index: 1;
    }
}

.list__modal__arrows__arrow svg {
    display: block;
    height: 4.8vw;
    width: 4vw;
}

@media (min-width: 768px) {
    .list__modal__arrows__arrow svg {
        height: 36px;
        width: 30px;
    }
}

.list__modal__arrows__arrow svg path {
    fill: currentcolor;
}

.list__modal__arrows__arrow--prev[aria-disabled], .list__modal__arrows__arrow--next[aria-disabled] {
    opacity: 0.3;
    pointer-events: none;
}

.list__modal__arrows__arrow--prev {
    padding-right: 1.0666666667vw;
}

@media (min-width: 768px) {
    .list__modal__arrows__arrow--prev {
        left: 16px;
        padding-right: 6px;
    }
}

@media (min-width: 992px) {
    .list__modal__arrows__arrow--prev {
        left: 26px;
    }
}

.list__modal__arrows__arrow--next {
    padding-left: 1.0666666667vw;
}

@media (min-width: 768px) {
    .list__modal__arrows__arrow--next {
        padding-left: 6px;
        right: 16px;
    }
}

@media (min-width: 992px) {
    .list__modal__arrows__arrow--next {
        right: 26px;
    }
}

.list__modal__arrows__arrow:focus {
    opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
    .list__modal__arrows__arrow:hover {
        opacity: 0.65;
    }
}

.list__modal-inner {
    margin: 0 auto;
    max-width: 852px;
    text-align: center;
}

.list__modal-inner img {
    margin: 0 auto;
}

.fancybox__slide.has-html {
    padding: var(--c-pad);
}

.pager {
    margin: 0 0 21.3333333333vw;
}

@media (min-width: 768px) {
    .pager {
        margin: 0 0 160px;
    }
}

.pager-container {
    margin: 0 auto;
    max-width: calc(var(--container-width) + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 768px) {
    .pager-container {
        padding: 0 var(--c-pad);
    }
}