/*リセットCSS*/
html,
html * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: -apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,YuGoMedium,Meiryo,sans-serif;
}

body {
    margin-left: auto;
    margin-right: auto;
}

.respon {
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/*レスポンシブ設定*/
.row:before, .row:after {
    content: "";
    display: table;
}
.row:after {
    clear: both;
}
/*各カラムのスペース（周りに7pxの余白）*/
.col {
    float: left;
    padding: 0px 7px 14px;
}
.sm-1 {
    width:100%;
}
.sm-2 {
    width:50%;
}
.sm-3 {
    width:33.3%;
}
.sm-4 {
    width:25%;
}
.sm-3-2 {
    width:66.7%;
}
.sm-4-3 {
    width:75%;
}
/*レスポンシブ設定ここまで*/

.sm-off {
    display: none;
}


/*タブレット用*/
@media (min-width: 768px){
/*レスポンシブ設定*/
body {
    max-width: 768px;
}
.md-1 {
    width:100%;
}
.md-2 {
    width:50%;
}
.md-3 {
    width:33.3%;
}
.md-4 {
    width:25%;
}
.md-3-2 {
    width:66.7%;
}
.md-4-3 {
    width:75%;
}
/*レスポンシブ設定ここまで*/

.sm-off {
    display: inline-block;    
}

}

/*PCサイト
@media (min-width: 1024px){
body {
        max-width:1024px;
}
.lg-1 {
    width:100%;
}
.lg-2 {
    width:50%;
}
.lg-3 {
    width:33.3%;
}
.lg-4 {
    width:25%;
}
.lg-3-2 {
    width:66.7%;
}
.lg-4-3 {
    width:75%;
}

}*/