.col__wrap, .col__wrap--margin, .col__wrap--marginL, .col__wrap--marginS, .col__wrap--center {
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.col__wrap--margin > li {
    padding: 1%;
}
.col__wrap--marginL {
    margin: 2% -2%;
}
.col__wrap--marginL > li {
    padding: 2%;
}
.col__wrap--marginS {
    margin: .5% -.5%;
}
.col__wrap--marginS > li {
    padding: .5%;
}
.col__wrap--stretch {
    align-items: stretch;
}
.col__wrap--center > li {
    align-self: center;
}

.col--1 {
    width: 8.3333333333%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--1.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    .col--pc-1 {
        width: 8.3333333333%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-1.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    .col--sp-1 {
        width: 8.3333333333%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-1.col--right {
        float: right;
    }
}
.col--2 {
    width: 16.6666666667%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--2.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    .col--pc-2 {
        width: 16.6666666667%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-2.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    .col--sp-2 {
        width: 16.6666666667%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-2.col--right {
        float: right;
    }
}
.col--3 {
    width: 25%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--3.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    .col--pc-3 {
        width: 25%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-3.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    .col--sp-3 {
        width: 25%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-3.col--right {
        float: right;
    }
}
.col--4 {
    width: 33.3333333333%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--4.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    .col--pc-4 {
        width: 33.3333333333%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-4.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    .col--sp-4 {
        width: 33.3333333333%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-4.col--right {
        float: right;
    }
}
.col--5 {
    width: 41.6666666667%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--5.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    .col--pc-5 {
        width: 41.6666666667%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-5.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    .col--sp-5 {
        width: 41.6666666667%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-5.col--right {
        float: right;
    }
}
.col--6 {
    width: 50%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--6.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    #content .col--pc-6 {
        width: 50%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-6.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    .col--sp-6 {
        width: 50%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-6.col--right {
        float: right;
    }
}
.col--7 {
    width: 58.3333333333%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--7.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    .col--pc-7 {
        width: 58.3333333333%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-7.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    .col--sp-7 {
        width: 58.3333333333%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-7.col--right {
        float: right;
    }
}
.col--8 {
    width: 66.6666666667%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--8.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    .col--pc-8 {
        width: 66.6666666667%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-8.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    .col--sp-8 {
        width: 66.6666666667%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-8.col--right {
        float: right;
    }
}
.col--9 {
    width: 75%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--9.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    .col--pc-9 {
        width: 75%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-9.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    .col--sp-9 {
        width: 75%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-9.col--right {
        float: right;
    }
}
.col--10 {
    width: 83.3333333333%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--10.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    .col--pc-10 {
        width: 83.3333333333%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-10.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    .col--sp-10 {
        width: 83.3333333333%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-10.col--right {
        float: right;
    }
}
.col--11 {
    width: 91.6666666667%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--11.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    .col--pc-11 {
        width: 91.6666666667%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-11.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    .col--sp-11 {
        width: 91.6666666667%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-11.col--right {
        float: right;
    }
}
.col--12 {
    width: 100%;
    list-style: none;
    text-indent: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.col--12.col--right {
    float: right;
}

/*PC **以上の幅の場合*/
@media all and (min-width: 40em) {
    .col--pc-12 {
        width: 100%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--pc-12.col--right {
        float: right;
    }
}
/*全スマホ 〜までの幅の場合*/
@media only screen and (max-width: 40em) {
    #content .col--sp-12 {
        width: 100%;
        list-style: none;
        text-indent: inherit;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .col--sp-12.col--right {
        float: right;
    }
}