@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(//fonts.googleapis.com/earlyaccess/sawarabimincho.css); 
/*==========================
COMMON
==========================*/
.top_cont {
    padding: 50px 0;
}
/*==========================
MAIN VISIUAL
==========================*/
#mv {
    height: 367px;
    /* padding-top: 234px; */
}
.slide {
    height: 400px;
    background-size: cover;
}
.slide.slide1{
    background: url(/maruzen/images/top/slide1.png) center no-repeat;
}
.slide.slide2{
    background: url(/maruzen/images/advantage/ad_mv.png) no-repeat;
    background-position: 28% 10%;
}
.slide.slide3{
    background: url(/maruzen/images/top/slide2.png)center no-repeat;
}
.mv .top_news h1 {
    color: #000;
    font-size: 2.4rem;
}
.mv .top_news h1:after {
    border-top: 1px solid #000;
    content: "";
    display: block;
    position: relative;
    top: -20px;
    left: 3em;
    width: calc(100% - 3em);
}
.top_news {
    max-width: 300px;
    font-size: 1.6rem;
}
.top_cont.topslider {
    padding: 0;
}

.bx-wrapper {
    border: none!important;
}
.text_area {
    background: rgba(255, 255, 255, 0.83);
    width: calc((100% - 1000px) / 2 + 500px);
    overflow: hidden;
}

.text_area p {
    float: right;
    padding: 35px 20px;
    font-size: 2.2rem;
    text-shadow: -1px 2px 9px #757474;
}

/*==========================
CONT1
==========================*/

.top_cont.cont1 p{
    font-size: 1.8rem;
}
.top_nav {
    justify-content: space-around;
}

.top_cont.cont1 p:before {
    content: "▶ ";
    font-size: 1.4rem;
    color: #801a22;
    line-height: 1.8rem;
}


/* ===================================================================================
 for PC min-width: 741px
 =================================================================================== */
@media screen and (min-width: 741px), print {
}

/* ===================================================================================
 for SP max-width: 740px
 =================================================================================== */
@media screen and (max-width: 740px) {
    /*==========================
    COMMON
    ==========================*/
    .top_cont {
        padding: 20px 0;
    }
    /*==========================
    MAIN VISUAL
    ==========================*/
    .text_area {
        width: 90%;
    }

    .text_area p {
        font-size: 1.6rem;
        padding: 5px 5px;
        float: none;
    }

    #mv {
        height: 280px;
        padding: 0;
        display: flex;
        align-items: center;
    }
    .bx-viewport {
        height: auto!important;
    }
    /*==========================
    CONT1
    ==========================*/
    .top_nav.flex {
        flex-wrap: wrap;
    }

    .top_nav_item {
        margin-bottom: 30px;
    }
}