@charset "UTF-8";
.p_mv{
    background: url('../img/mv.jpg') no-repeat center/cover;
    color: var(--white-color);
    @media screen and (max-width: 1000px) {
        background: url('../img/sp-mv.jpg') no-repeat center/cover;
    }
}
.intro{
    p{
        padding:0 0 8.4rem;
        margin-top: 2rem;
    }
}
.swiper{
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    @media screen and (max-width: 1000px) {
        max-width: 69rem;
    }
}

.swiper-controller {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}
.swiper-pagination {
    position: relative;
}
.swiper-button-next, .swiper-button-prev{
    position: relative;
    color: var(--black-color);
    top: initial;
    left: initial;
    right: initial;
    bottom: initial;
    height: auto;
    width: auto;
    margin-top:0;
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-size: 1.6rem;
    color: var(--black-color);
}
.swiper-pagination{
    padding: 0 3rem;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
    width: auto;
    top: initial;
    left: initial;
    right: initial;
    bottom: initial;
}

.price{
    .w654{
        margin: 7rem auto 0;
    }
    h2,h3,h4{
        font-size: 2rem;
        margin-bottom: 2rem;
        font-weight: 600;
    }
    h3,h4{
        margin-top: 4rem;
    }
    table{
        width: 100%;
        
    }
    tr{
        border-bottom: 1px solid #ece7de;
    }
    .th1,.th3{
        width: 25%;
    }
    th{
        background: #e0dedd;
       
        text-align: initial;
    }
    th{
        padding: 1rem 0 1rem 3rem ;
    }
    td{
        padding: 1.6rem 0 1.6rem 3rem;
        span{
            font-size: 1.4rem;
        }
    }
    .th2{
        width: 50%;
    }
    .th3{
        background: #ece7de;
    }
    .color{
        color: var(--base-color);
        margin-left: 1em;
    }
    .large{
        font-size: 2.5rem;
    }
    .pricetext{
        letter-spacing: 0.05rem;
    }
    .petbnr{
        margin-top: 4rem;
    }
}
@media screen and (max-width: 1000px) {
    .price{
        .w654{
            margin: 9rem auto 0;
            max-width: 69rem;
        }
        h2,h3,h4{
            font-size: 3.4rem;
        }
        .th1,.th3{
            width: 25%;
        }
        table{
            font-size: 2.4rem;
        }
        .th1{
            width: 12.8rem;
        }
        td{
            span{
                font-size: 1.8rem;
            }
        }
        .th2{
            width: 36rem;
        }
        .th3{
            width: 18rem;
        }
        .large{
            font-size: 4rem;
        }
        .pricetext{
            font-size: 2.8rem;
        }
        .petbnr{
            margin-top: 8rem;
        }
    }
}
.rule{
    background: #fcfbfa;
    margin-top: 10rem;
    padding: 9rem 0 10rem;
    h2{
        font-weight: 600;
        font-size: 2rem;
    }
    ul{
        margin-top: 2rem;
        text-indent: -1em;
        margin-left: 1em;
        letter-spacing: -0.04rem;
    }
    .btn{
        text-align: center;
        a{
            width: 46.4rem;
            margin: 5rem auto 0;
            height: 8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: #ece7de;
            border: 1px solid #ece7de;
            &:after{
                content: '';
                position: absolute;
                top: 50%;
                right: 8rem;
                width: 4px;
                height: 4px;
                border-right: 1px solid #000;
                border-bottom: 1px solid #000;
                transform: translateY(calc(50% - 4px)) rotate(-45deg);
            }
        }
        a:hover{
            background-color: #fcfbfa;
        }
    }
    .rule_img{
        margin-top: 4.6rem;
        text-align: center;
    }
    .petbnr2{
        margin-top: 4rem;
        text-align: center;
    }
}
@media screen and (max-width: 1000px) {
    .rule{
        .w654{
            max-width: 69rem;
            margin-left: auto;
            margin-right: auto;
        }
        h2{
            font-size: 3.4rem;
        }
        .btn{
            text-align: center;
            a{
                width: 100%;
                margin: 10rem auto 0;
                height: 11rem;
                &:after{
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: 6rem;
                    width: 0.6rem;
                    height: 0.6rem;
                }
            }
        }
        .rule_img{
            margin-top: 4.6rem;
            text-align: center;
        }
        .petbnr2{
            margin-top: 10rem;
        }
    }
}