@charset "UTF-8";
/*初期設定*/
html,
html * {
    box-sizing: border-box;
    font-family: -apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,YuGoMedium,Meiryo,sans-serif;
}


/*bodyもしくは.wrapで（横一杯のコンテンツ使用時は.wrapにて対応）*/
.wrap {
    margin-left: auto;
    margin-right: auto;
}

.respon-img {
    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 0px 0px;
}

.sm-10 {
    width:10%;
}
.sm-20 {
    width:20%;
}
.sm-30 {
    width:30%;
}
.sm-40 {
    width:40%;
}
.sm-50 {
    width:50%;
}
.sm-60 {
    width:60%;
}
.sm-70 {
    width:70%;
}
.sm-80 {
    width:80%;
}
.sm-90 {
    width:90%;
}
.sm-100 {
    width:100%;
}
.sm-33 {
    width:33.3%;
}
.sm-3-2 {
    width:66.7%;
}
.sm-4-3 {
    width:75%;
}
/*レスポンシブ設定ここまで*/

.sm-off {
    display: none;
}

}

/*769pxを超えたら768pxで縛るタブレット用*/
/*bodyもしくが.wrapで（.wrap使用時はここも.wrapにする）*/
@media (min-width:768px){
/*レスポンシブ設定*/
.wrap {
    max-width: 768px;
}

.md-10 {
    width:10%;
}
.md-20 {
    width:20%;
}
.md-30 {
    width:30%;
}
.md-40 {
    width:40%;
}
.md-50 {
    width:50%;
}
.md-60 {
    width:60%;
}
.md-70 {
    width:70%;
}
.md-80 {
    width:80%;
}
.md-90 {
    width:90%;
}
.md-100 {
    width:100%;
}
.md-33 {
    width:33.3%;
}
.md-3-2 {
    width:66.7%;
}
.md-4-3 {
    width:75%;
}

/*レスポンシブ設定ここまで*/

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

}

/*PCサイト*/
@media (min-width: 1024px){
/*レスポンシブ設定*/
.wrap {
        max-width:1024px;
}

.lg-10 {
    width:10%;
}
.lg-20 {
    width:20%;
}
.lg-30 {
    width:30%;
}
.lg-40 {
    width:40%;
}
.lg-50 {
    width:50%;
}
.lg-60 {
    width:60%;
}
.lg-70 {
    width:70%;
}
.lg-80 {
    width:80%;
}
.lg-90 {
    width:90%;
}
.lg-100 {
    width:100%;
}
.lg-33 {
    width:33.3%;
}
.lg-3-2 {
    width:66.7%;
}
.lg-4-3 {
    width:75%;
}

/*レスポンシブ設定ここまで*/

}