@charset "UTF-8";
/* CSS Document */
.modal__button,
.modal__button--close,
.modal__button--open {
    cursor: pointer;
}
.modal__item {
    display: none;
    position: fixed;
    top: 0;
    left:0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior-y: none;
    background-color: rgba(255,255,255,1.00);
    }
.modal__bg {
    display: none;
}
.modal__content {
    padding-top: 20px;

    overscroll-behavior-y: none; 
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1002;
}
.single-collection .swiperCollection.common-w {
    width: calc(100% - 25px);
    padding-bottom:25px;
}
.single-collection .caption .swiper-navi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .75em;
    padding-bottom: .75em;
}
.single-collection .caption .swiper-navi .index {
    width: calc(100% - 5em);
    text-align: center;
    padding-left: 5em;
    box-sizing: content-box;
}
.single-collection .caption .swiper-navi .index span {
    font-size: 13px;
}
.single-collection .caption .swiper-arrow {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 2em;
}
.single-collection .caption .swiper-arrow > div {
    width: 2em;
    height: 2em;
    box-sizing: border-box;
    border:#ccc solid 1px;
    background-color:rgba(51,51,51,0.00);
    border-radius:1em;
    margin-left: .5em;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.single-collection .caption .swiper-arrow > div span {
    display: block;
    width: .5em;
    height: .5em;
    border-top: 2px solid #666;
}
.single-collection .caption .swiper-arrow > div.swiper-prev span {
    border-left: 2px solid #666;
    transform:rotate(-45deg);
    margin-left: 0.3em;
}
.single-collection .caption .swiper-arrow > div.swiper-next span {
    border-right: 2px solid #666;
    transform:rotate(45deg);
    margin-right: 0.3em;
}
.single-collection .caption .swiper-arrow > div.swiper-button-disabled {
    opacity: 0.0;
    cursor: default;
}
.single-collection .caption .swiper-arrow > div:not(.swiper-button-disabled):hover {
    cursor: pointer;
}
.single-collection .modal-close-cross {
    top:.25em;
    right:.25em;
    width: 30px;
    height: 30px;
    position: absolute;
}
.single-collection .modal-close-cross span {
    width: 100%;
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    border-top: 2px solid #fff;
}
.single-collection .modal-close-cross span:first-child {
    transform: rotate(45deg);
    left:0;
}
.single-collection .modal-close-cross span:last-child {
    transform: rotate(-45deg);
    right:0;
}
.single-collection .caption .description {
    color: #000;
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 1em;
    padding-top: 1em;
    border-top: 1px solid #ccc;
}
.single-collection .caption .description_pc {
    display: none;
}
.single-collection .close_button {
   display: none;
}


@media (min-width: 768px) {
    .single-collection .modal-close-cross {
        display: none;
    }
    .single-collection .caption .swiper-navi .index {
        line-height: 3.5em
    }
    .single-collection .caption .swiper-navi .index span,
    .single-collection .caption .description {
        font-size: 14px;
    }
    .single-collection .caption .swiper-arrow > div {
        width: 3.5em;
        height: 3.5em;
        border-radius:50%;
    }
    .single-collection .caption .swiper-arrow > div span {
        width: 0.75em;
        height: 0.75em;
    }
    /*左上の×ボタン*/
    .single-collection .close_button {
        display: block;
        top:20px;
        right:20px;
        width: 40px;
        height: 40px;
        position: fixed;
    }
    .single-collection .close_button span {
        width: 100%;
        display: block;
        position: absolute;
        top: calc(50% - 1px);
        border-top: 2px solid #ccc;
    }
    .single-collection .close_button span:first-child {
        transform: rotate(45deg);
        left:0;
    }
    .single-collection .close_button span:last-child {
        transform: rotate(-45deg);
        right:0;
    }
    /*Swiper設定項目*/
    .single-collection .swiperCollection.common-w {
        max-width: 640px;
    }
}

 .swiper-autoheight .swiper-wrapper {
        min-height: 100vh
    }