/* Margin関連のCSS */
.margin-all-S {
    margin: var(--px-S);
}

.margin-all-M {
    margin: var(--px-M);
}

.margin-horizontal-SS {
    margin-left: var(--px-SS);
    margin-right: var(--px-SS);
}

.margin-horizontal-S {
    margin-left: var(--px-S);
    margin-right: var(--px-S);
}

.margin-horizontal-M {
    margin-left: var(--px-M);
    margin-right: var(--px-M);
}

.margin-horizontal-auto {
    margin-left: auto;
    margin-right: auto;
}

.margin-horizontal-offset-main {
    margin-left: -16px;
    margin-right: -16px;
}

.margin-vertical-SS {
    margin-top: var(--px-SS);
    margin-bottom: var(--px-SS);
}

.margin-vertical-S {
    margin-top: var(--px-S);
    margin-bottom: var(--px-S);
}

.margin-vertical-M {
    margin-top: var(--px-M);
    margin-bottom: var(--px-M);
}

.margin-vertical-L {
    margin-top: var(--px-L);
    margin-bottom: var(--px-L);
}

.margin-vertical-O {
    margin-top: var(--px-O);
    margin-bottom: var(--px-O);
}

.margin-vertical-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.margin-top-SS {
    margin-top: var(--px-SS);
}

.margin-top-S {
    margin-top: var(--px-S);
}

.margin-top-M {
    margin-top: var(--px-M);
}

.margin-top-L {
    margin-top: var(--px-L);
}

.margin-top-O {
    margin-top: var(--px-O);
}

.margin-right-SS {
    margin-right: var(--px-SS);
}

.margin-right-S {
    margin-right: var(--px-S);
}

.margin-right-M {
    margin-right: var(--px-M);
}

.margin-right-L {
    margin-right: var(--px-L);
}

.margin-right-O {
    margin-right: var(--px-O);
}

.margin-bottom-SS {
    margin-bottom: var(--px-SS);
}

.margin-bottom-S {
    margin-bottom: var(--px-S);
}

.margin-bottom-M {
    margin-bottom: var(--px-M);
}

.margin-bottom-L {
    margin-bottom: var(--px-L);
}

.margin-bottom-main-offset {
    margin-bottom: -100px;
}

.margin-left-auto {
    margin-left: auto;
}

.margin-left-S {
    margin-left: var(--px-S);
}

.margin-left-M {
    margin-left: var(--px-S);
}

.margin-left-L {
    margin-left: var(--px-L);
}

.margin-left-O {
    margin-left: var(--px-O);
}

/*Padding関連のCSS*/
.padding-all-S {
    padding: var(--px-S);
}

.padding-all-M {
    padding: var(--px-M);
}

.padding-all-L {
    padding: var(--px-L);
}

.padding-horizontal-main {
    padding-left: 16px;
    padding-right: 16px;
}

.padding-horizontal-zero {
    padding-left: 0px;
    padding-right: 0px;
}

.padding-horizontal-S {
    padding-left: var(--px-S);
    padding-right: var(--px-S);
}

.padding-horizontal-M {
    padding-left: var(--px-M);
    padding-right: var(--px-M);
}

.padding-vertical-SS {
    padding-top: var(--px-SS);
    padding-bottom: var(--px-SS);
}

.padding-vertical-S {
    padding-top: var(--px-S);
    padding-bottom: var(--px-S);
}

.padding-vertical-M {
    padding-top: var(--px-M);
    padding-bottom: var(--px-M);
}

.padding-vertical-L {
    padding-top: var(--px-L);
    padding-bottom: var(--px-L);
}

.padding-vertical-auto {
    padding-top: auto;
    padding-bottom: auto;
}

.padding-top-auto {
    padding-top: auto;
}

.padding-bottom-S {
    padding-bottom: var(--px-S);
}

.padding-bottom-M {
    padding-bottom: var(--px-M);
}

.padding-bottom-auto {
    padding-bottom: auto;
}

.padding-left-SS {
    padding-left: var(--px-SS);
}

.padding-left-S {
    padding-left: var(--px-S);
}

.padding-left-M {
    padding-left: var(--px-M);
}