@charset "utf-8";

/* ==================================================================

	index.css

=================================================================== */

/* --------------------------------
   □ scene
-------------------------------- */ 

#scene{
    margin-bottom: 0;
    padding: 0;
}
#scene .scenearea{
    position: relative;
}

#scene ul.sceneList{
    overflow: hidden;
    position: relative;
}

#scene ul.sceneList li{
    width: 22%;
    margin-right: 4%;
    float: left;
}

#scene ul.sceneList li a{
    text-decoration: none;
}

#scene ul.sceneList li:last-child{
    margin-right: 0;
}

#scene ul.sceneList li dl dt{
    position: relative;
    font-size: 112.5%;
    font-weight: 700;
    margin-bottom: 10px;
    display: inline-block;
    padding-right: 30px;
}

#scene ul.sceneList li dl dt:after{
    content: "";
    background: url("../../images/common/icon/arrow/arrow.png");
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: 0.3s;
}

#scene ul.sceneList li a:hover dl dt:after{
    right: -20px;
}

#scene ul.sceneList li dl dd{
    font-size: 87.5%;
}

.fs-c-productList {
    display: none;
}


@media only screen and
(max-width : 767px) {

     /*  □ scene
    -------------------------------- */
    #scene {
        padding:0;
        width:auto;
        position:relative;
        box-sizing:border-box;
    }
    #scene .container{
        box-sizing:border-box;
    }

    #scene .scenearea{
        position: relative;
    }

    #scene .scenearea:before{
        content: "";
        display:none;
    }


    #scene ul.sceneList{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
    }
    #scene ul.sceneList li{
        width:47%;
        margin:0;
        margin-bottom:2em;
    }


}