/* How to */
.howto {
    padding: 120px 0 115px;
}

.howto .title {
    margin: 0 20px;
}

.topbar {
    background-color: #4b3c2d;
    height: 1px;
    margin: 0 auto;
    opacity: .1;
    width: 89.84375%;
}

.howto-text {
    margin: 0 20px;
}

.howto .wrap {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.howto-content__item {
    padding: 20px 0 0 20px;
}

.howto .left {
    background-color: #e2e2e2;
    margin-top: -40px;
    z-index: 200;
}

.howto .right {
    width: 60%;
}

.howto .right .slider1 .swiper-slide {
    background-color: #ffffff;
    height: 532px;
    margin-right: 0;
    padding-top: 70px;
    position: relative;
    width: 500px;
}

.howto .right .slider1 .swiper-slide.blabk {
    background-color: transparent;
    height: 10px;
    margin-right: 20px;
    padding-top: 70px;
    position: relative;
    width: 8%;
}

.howto .right .slider1 .swiper-slide .number {
    background-color: #1a0b08;
    color: #ffffff;
    font-size: 139%;
    line-height: 2.16;
    padding: 0 60px;
    position: absolute;
    right: 32%;
    top: 58%;
}
@media (max-width: 1023px) {
    .howto .right .slider1 .swiper-slide .number {
        color: #ffffff;
        font-size: 139%;
        left: 0;
        line-height: 2.16;
        padding: 0 60px;
        position: absolute;
        right: 0;
        top: 48%;
    }
}
.howto .right .slider1 .swiper-slide {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-right: 20px;
}

.howto .right .slider1 .swiper-slide.image01 {
    background-image: url(/assets/img/components/bridal/flow_01.jpg);
}

.howto .right .slider1 .swiper-slide.image02 {
    background-image: url(/assets/img/top/how02.jpg);
}

.howto .right .slider1 .swiper-slide.image03 {
    background-image: url(/assets/img/top/how03.jpg);
}

.howto .right .slider1 .swiper-slide.image04 {
    background-image: url(/assets/img/top/how04.jpg);
}

.howto .right .slider1 .swiper-slide.image05 {
    background-image: url(/assets/img/top/how05.jpg);
}

.howto .right .slider1 .swiper-slide.image06 {
    background-image: url(/assets/img/top/how06.jpg);
}


.howto .right .slider1 .swiper-slide .image {
    align-items: center;
    display: flex;
    height: 300px;
    margin: 0 auto 10px;
}

.howto .right .slider1 .swiper-slide .txt {
    font-size: 93%;
    font-weight: 500;
    line-height: 1.8;
    padding: 10px 30px;
    text-align: justify;
}


.howto .swiper-wrapper {
    height: 510px !important;
}

/* 前ページ、次ページボタン共通のスタイル */
.howto .swiper-button-prevo,
.howto .swiper-button-nexto {
    /* ボタンの高さ */
    background-size: 48px 48px;
    cursor: pointer;
    /* ボタンの幅 */
    height: 48px;
    /* 背景画像としてのサイズ（＝表示したい画像サイズ） */
    margin-top: -24px;
    transition: all .5s;
    width: 48px;
    /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
}

/* 次ページボタンのスタイル */
.howto .swiper-button-nexto {
    background-image: url(/assets/img/top/arrow_right.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 23px;
    border: 1px solid #1a0b08;
    border-radius: 60px;
    height: 120px;
    position: absolute;
    right: 400px;
    width: 120px;
    z-index: 100;
}

/* 前ページボタンのスタイル */
.howto .swiper-button-prevo {
    background-image: url(/assets/img/top/arrow_right.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    border: 1px solid #1a0b08;
    border-radius: 30px;
    height: 60px;
    position: absolute;
    right: 530px;
    transform: scale(-1, 1);
    width: 60px;
    z-index: 100;
    /* 左右反転 */
}

.howto .swiper-button-nexto:hover {
    background-position: center right 40px;
}

.howto .swiper-button-prevo:hover {
    background-position: center left 26px;
}

.swiper-pagination-fraction {
    font-family: "Noto Serif JP", serif;
    font-size: 177% !important;
    left: 845px !important;
    letter-spacing: -2px;
    position: absolute !important;
    top: 4360px !important;
    width: 50px !important;
}

.howto .swiper-button-disabled {
    opacity: .4;
}

@media screen and (max-width: 980px) {
    .howto {
        padding: 56px 0 60px;
    }

    .howto .wrap {
        display: block;
    }

    .howto .right {
        font-size: 93%;
        font-weight: 800;
        margin-bottom: 20px;
        margin-top: 50px;
        position: relative;
    }

    .howto .right .store {
        align-items: center;
        display: flex;
        justify-content: space-between;
        width: 92%;
    }

    .howto .right {
        margin: 0 auto 0 8%;
        width: 92%;
    }

    .howto .swiper-wrapper {
        height: auto !important;
        padding-bottom: 30px;
    }

    .howto .right .slider1 .swiper-slide {
        background-position: top center;
        height: auto;
        margin-right: 5px;
        padding-bottom: 15px;
        padding-top: 15px;
        width: 90%;
    }

    .howto .right .slider1 .swiper-slide .image {
        height: 60vw;
        margin: 0 auto -10px;
    }

    .howto .right .slider1 .swiper-slide .txt {
        font-size: 75%;
        line-height: 1.6;
        padding: 10px 20px;
    }

    .howto .right .slider1 .swiper-slide.image07 {
        margin-right: 8.8vw;
    }

    .swiper-horizontal>.swiper-scrollbar {
        width: 88% !important;
    }

    .swiper-horizontal>.swiper-scrollbar {
        height: 2px !important;
    }

    .swiper-scrollbar {
        background: #e3dfd9 !important;
        border-radius: 0 !important;
    }

    .swiper-scrollbar-drag {
        background: #a89967 !important;
        border-radius: 0 !important;
    }
}