@charset "utf-8";

/* CSS Document */
body{
    background: #000;
}
.fv_wrap{
    margin: 73px auto;
}
main{
    color: #e1e1e1;
}
.mv_wrap{
    max-width: 600px;
    margin: 0 auto;
}
.fv_content{
    max-width: 600px;
    margin:  0 auto;
}
.fv_content > p:nth-of-type(1){
    font-size: 35px;
    font-weight: 500;
    padding: 0 15px;
}
.fv_content > p:nth-of-type(2){
    font-size: 20px;
    padding: 0 15px;
}
.anim_border{
    padding: 5px;
    width: 100%;
    margin: 30px 0;
}
.anim_border > p{
    color: transparent;
    position: relative;
    padding: 65px;
    font-size: 20px;
    overflow: hidden;
    max-width: 550px;
    margin: 0 0 0 auto;
}
.anim_border > p::before{
    content: "";
    display: block;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,  rgb(0,0,0) 21%,rgb(145,145,145) 39%,rgb(145,145,145) 54%,rgb(145,145,145) 54%,rgb(0,0,0) 79%);
    position: absolute;
    top: -50%;
    left: -50%;
    transition: 1s all;
}
.anim_border > p:hover::before{
    transform: rotate(180deg);
    transition: 1s all;
}
.anim_border a{
    content:"初めて をり をご利用のお客様へ";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    background: #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    color: #e1e1e1;
    padding: 0 20px;
    box-sizing: border-box;
}
.anim_border a::after{
    content:"";
    width: 13px;
    height: 13px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.news_main{
    color: #CC9E7D;
    font-size: 50px;
    text-align: left;
    font-weight: normal;
    padding: 0 15px;
}
main > section{
    margin: 100px auto;
    max-width: 1620px;
}
.swiper{
    padding: 0 0 0 20px!important;
}
.swiper-slide .img_wrap{
    overflow: hidden;
    transition: .2s all;
    line-height: 0;
    max-width: 465px;
}
.swiper-slide .img_wrap img{
    transform: scale(1);
    transition: .2s all;
}
.swiper-slide .img_wrap:hover img{
    transform: scale(1.2);
    transition: .2s all;
}
.day_tag_wrap{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 0 0;
}
.day_tag_wrap > p{
    margin: 0 5px 0 0;
    padding: 3px 10px;
}
.day_tag_wrap > p.days{
    padding: 0;
}
@media(min-width: 600px){
}

/* 768px for table*/
@media (min-width: 768px) {
    .news_wrap{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        max-width: 1620px;
    }
    .news_content{
        width: 32%!important;
        margin: 1em auto 0 0;
    }
    .anim_border > p{
        width: 95%;        
    }
}

/* 992px for pc*/
@media (min-width: 1000px) {
    main{
        margin: 260px 0 0;
    }
    .fv_wrap{
        max-width: 1620px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .fv_wrap > div.mv_wrap{
        width: 65%;
        max-width: 2000px;
    }
    .fv_wrap > div.fv_content{
        width: 35%;
        max-width: 2000px;
    }
}

/* 1200px for wide pc */
@media (min-width: 1200px) {
}