@charset "UTF-8";
/*
---------------------------------------
    toppage
---------------------------------------
*/

#top-main {
    width: 700px;
    margin:  0 auto;
    box-sizing:border-box;
}





/*
#########################################

    レスポンシブ

#########################################
*/



@media screen and (max-width:960px){
    #top-main{
        display:block;
        width:100%;
        height:auto;
        margin:0 auto;
        padding:0;
        background:none;
        box-sizing:border-box;
    }
    #top-main-left{
        display:block;
        width:100%;
        padding:0;
        box-sizing:border-box;
    }
    #top-main-left > div{
        width:100%;
        margin-bottom:5vw;
    }
    #top-main-left img{
        max-width:100%;
        height:auto;
    }
    #top-main-left ul{
        margin:3vw 0 0;
        padding:0;
        list-style:none;
        height: auto;
        overflow:visible;
    }
    #top-main-left li{
        margin-bottom:2vw;
    }
    #top-main-left li a{
        display:block;
        padding:8px 3vw;
        background:#fff;
        border-radius:6px;
        text-decoration:none;
        box-shadow:0 2px 8px rgba(0,0,0,.06);
    }
    #top-main-left li .text{
        color:#322825;
        font-size:3.2vw;
        line-height:1.5;
        text-align:left;
    }
    #top-main-empty{
        display:none;
    }
    #top-main-right{
        display:block;
        width:100%;
        padding:0;
        box-sizing:border-box;
        text-align:center;
    }
    #top-main-right a{
        display:inline-block;
        width:calc(50% - 16px);
        margin: 0 5px 2vw;
        line-height:0;
        vertical-align: top;
    }
    #top-main-right img{
        width:100%;
        max-width:520px;
        height:auto;
    }
}