/* 202103 */

.book01-template-09 {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    background-position: center;
    background-size: cover;
}

.book01-template-09.-scroll-active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform .7s cubic-bezier(.215, .61, .355, 1) .7s;
    transition: -webkit-transform .7s cubic-bezier(.215, .61, .355, 1) .7s;
    transition: transform .7s cubic-bezier(.215, .61, .355, 1) .7s;
    transition: transform .7s cubic-bezier(.215, .61, .355, 1) .7s, -webkit-transform .7s cubic-bezier(.215, .61, .355, 1) .7s
}

.book01-template-09.-scroll-active:after {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .7s cubic-bezier(.215, .61, .355, 1);
    transition: -webkit-transform .7s cubic-bezier(.215, .61, .355, 1);
    transition: transform .7s cubic-bezier(.215, .61, .355, 1);
    transition: transform .7s cubic-bezier(.215, .61, .355, 1), -webkit-transform .7s cubic-bezier(.215, .61, .355, 1)
}

.book01-template-09:after {
    width: 100%;
    background: #f5f5f5;
    z-index: 10;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%
}


/* 202103 */

.book01-template-09:after,
.book01-template-09 .color {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 100%;
    -webkit-transition: -webkit-transform .7s cubic-bezier(.7, 0, .3, 1);
    transition: -webkit-transform .7s cubic-bezier(.7, 0, .3, 1);
    transition: transform .7s cubic-bezier(.7, 0, .3, 1);
    transition: transform .7s cubic-bezier(.7, 0, .3, 1), -webkit-transform .7s cubic-bezier(.7, 0, .3, 1);
    pointer-events: none
}


/* 202103 */

.book01-template-09 .color {
    width: 70.67708vw;
    height: 100%;
    background: #c5f368;
    z-index: 0;
    -webkit-transform: scaleX(0px);
    transform: scaleX(0px);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
}

@media (max-width:1199px) {
    /* 202103 */
    .book01-template-09 .color {
        width: 73.07292vw
    }
}

@media (max-width:767px) {
    /* 202103 */
    .book01-template-09 .color {
        width: 92.5%
    }
}

@media (max-width:767px) {
    .book01-template-09 .container {
        padding-right: 0;
        padding-left: 0
    }
}

.book01-template-09 .swiper-container,
.book01-template-09 .swiper-wrapper {
    z-index: auto;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease
}

.book01-template-09__swiper {
    overflow: visible
}

.book01-template-09__swiper-slide {
    padding: 45px 20px;
    width: 100%
}

@media (min-width:768px) {
    .book01-template-09__swiper-slide {
        padding: 5vw 2.99479vw;
        width: 50%
    }
}

@media (min-width:768px) {
    .book01-template-09__swiper-slide-deco,
    .book01-template-09__swiper-slide-index,
    .book01-template-09__swiper-slide-index:before,
    .book01-template-09__swiper-slide-title {
        opacity: 0;
        -webkit-transform: translateX(40px);
        transform: translateX(40px);
        -webkit-transition: opacity .6s ease, -webkit-transform 0s ease .6s;
        transition: opacity .6s ease, -webkit-transform 0s ease .6s;
        transition: opacity .6s ease, transform 0s ease .6s;
        transition: opacity .6s ease, transform 0s ease .6s, -webkit-transform 0s ease .6s
    }
    .swiper-slide-active .book01-template-09__swiper-slide-deco,
    .swiper-slide-active .book01-template-09__swiper-slide-index,
    .swiper-slide-active .book01-template-09__swiper-slide-index:before,
    .swiper-slide-active .book01-template-09__swiper-slide-title,
    .swiper-slide-duplicate-active .book01-template-09__swiper-slide-deco,
    .swiper-slide-duplicate-active .book01-template-09__swiper-slide-index,
    .swiper-slide-duplicate-active .book01-template-09__swiper-slide-index:before,
    .swiper-slide-duplicate-active .book01-template-09__swiper-slide-title {
        opacity: 1;
        -webkit-transition: opacity 1.2s ease .6s, -webkit-transform 1.2s ease .6s;
        transition: opacity 1.2s ease .6s, -webkit-transform 1.2s ease .6s;
        transition: opacity 1.2s ease .6s, transform 1.2s ease .6s;
        transition: opacity 1.2s ease .6s, transform 1.2s ease .6s, -webkit-transform 1.2s ease .6s;
        -webkit-transform: translateX(-2.99479vw);
        transform: translateX(-2.99479vw)
    }
}

.book01-template-09__swiper-slide-deco {
    position: absolute;
    top: 9.89583vw;
    left: 50%;
    width: 50%;
    height: auto
}

@media (max-width:1199px) {
    .book01-template-09__swiper-slide-deco {
        top: 7.8125vw
    }
}

@media (max-width:767px) {
    .book01-template-09__swiper-slide-deco {
        display: none
    }
}

.book01-template-09__swiper-slide-index {
    position: absolute;
    top: 27.13542vw;
    left: 11.40625vw;
    padding-bottom: 2.08333vw;
    width: 37.5vw;
    font-size: 2.5vw;
    font-weight: 400;
    text-align: right;
    color: #18161c;
    line-height: 1.11;
    letter-spacing: -.0625vw
}

@media (min-width:768px) {
    .swiper-slide-active .book01-template-09__swiper-slide-index,
    .swiper-slide-duplicate-active .book01-template-09__swiper-slide-index {
        -webkit-transition-delay: .7s;
        transition-delay: .7s
    }
}

@media (max-width:767px) {
    .book01-template-09__swiper-slide-index {
        position: relative;
        top: auto;
        left: auto;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 13px;
        width: 70%;
        font-size: 24px
    }
}

.book01-template-09__swiper-slide-index:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #fff
}

@media (min-width:768px) {
    .book01-template-09__swiper-slide-index:before {
        opacity: 1;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%
    }
    .swiper-slide-active .book01-template-09__swiper-slide-index:before,
    .swiper-slide-duplicate-active .book01-template-09__swiper-slide-index:before {
        -webkit-transition-delay: .8s;
        transition-delay: .8s;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@media (max-width:767px) {
    .book01-template-09__swiper-slide-index:before {
        height: 3px
    }
}

.book01-template-09__swiper-slide-title {
    position: absolute;
    top: 34.58333vw;
    left: 11.40625vw;
    width: 37.5vw;
    text-align: right;
}

@media (min-width:768px) {
    .swiper-slide-active .book01-template-09__swiper-slide-title,
    .swiper-slide-duplicate-active .book01-template-09__swiper-slide-title {
        -webkit-transition-delay: .8s;
        transition-delay: .8s
    }
}

@media (max-width:767px) {
    .book01-template-09__swiper-slide-title {
        position: static;
        margin: auto;
        padding-top: 15px;
        width: 70%;
        text-align: left
    }
}


/* 202103 */

.book01-template-09__swiper-slide-title-inner {
    font-size: 1.25vw;
    line-height: 2.03125vw;
    line-height: 1.625;
    font-weight: 700;
    letter-spacing: .0651vw;
    line-height: 2;
    display: inline-block;
    text-align: left;
    color: #161616;
    /* font-size: 1.25vw;
    line-height: 2.03125vw;
    line-height: 1.625;
    font-weight: 700;
    letter-spacing: .0651vw;
    line-height: 2;
    display: inline-block;
    text-align: left;
    color: #161616;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; */
}

.book01-template-09__swiper-slide-title-inner .text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

@media (max-width:767px) {
    .book01-template-09__swiper-slide-title-inner {
        font-size: 20px;
        letter-spacing: 1.25px
    }
}

.book01-template-09__swiper-slide-img {
    pointer-events: none
}

.swiper-slide-active .book01-template-09__swiper-slide-img,
.swiper-slide-duplicate-active .book01-template-09__swiper-slide-img {
    pointer-events: auto
}

.book01-template-09__swiper-slide-img-real {
    display: block;
    overflow: hidden;
    margin: auto;
    width: 100%
}

@media (min-width:768px) {
    .book01-template-09__swiper-slide-img-real {
        -webkit-transition: -webkit-transform .8s ease, -webkit-transform-origin .8s ease;
        transition: -webkit-transform .8s ease, -webkit-transform-origin .8s ease;
        transition: transform .8s ease, transform-origin .8s ease;
        transition: transform .8s ease, transform-origin .8s ease, -webkit-transform .8s ease, -webkit-transform-origin .8s ease;
        -webkit-transform: translateX(5.98958vw) scale(.66666);
        transform: translateX(5.98958vw) scale(.66666);
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%
    }
    .swiper-slide-active .book01-template-09__swiper-slide-img-real,
    .swiper-slide-duplicate-active .book01-template-09__swiper-slide-img-real {
        -webkit-transition: -webkit-transform 1.6s ease, -webkit-transform-origin 1.6s ease;
        transition: -webkit-transform 1.6s ease, -webkit-transform-origin 1.6s ease;
        transition: transform 1.6s ease, transform-origin 1.6s ease;
        transition: transform 1.6s ease, transform-origin 1.6s ease, -webkit-transform 1.6s ease, -webkit-transform-origin 1.6s ease;
        -webkit-transform: translateX(-2.99479vw);
        transform: translateX(-2.99479vw)
    }
    .swiper-slide-duplicate-prev .book01-template-09__swiper-slide-img-real,
    .swiper-slide-prev .book01-template-09__swiper-slide-img-real {
        -webkit-transform: translateX(-2.99479vw) scale(.66666);
        transform: translateX(-2.99479vw) scale(.66666);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%
    }
    .swiper-slide-duplicate-next .book01-template-09__swiper-slide-img-real,
    .swiper-slide-duplicate-prev .book01-template-09__swiper-slide-img-real,
    .swiper-slide-next .book01-template-09__swiper-slide-img-real,
    .swiper-slide-prev .book01-template-09__swiper-slide-img-real {
        -webkit-transition: -webkit-transform .8s ease, -webkit-transform-origin .8s ease;
        transition: -webkit-transform .8s ease, -webkit-transform-origin .8s ease;
        transition: transform .8s ease, transform-origin .8s ease;
        transition: transform .8s ease, transform-origin .8s ease, -webkit-transform .8s ease, -webkit-transform-origin .8s ease
    }
    .swiper-slide-duplicate-next .book01-template-09__swiper-slide-img-real,
    .swiper-slide-next .book01-template-09__swiper-slide-img-real {
        -webkit-transform: translateX(5.98958vw) scale(.66666);
        transform: translateX(5.98958vw) scale(.66666);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%
    }
}

@media (max-width:767px) {
    .book01-template-09__swiper-slide-img-real {
        width: 70%
    }
}

.book01-template-09__swiper-slide-img-real-img {
    width: 100%;
    height: auto
}