@charset "UTF-8";

/* 張替えずにキレイに */

.clothmake-clean__secondary {
    background-color: var(--color-secondary);
    margin-top: calc(var(--base-size) * 94);
    padding-bottom: calc(var(--base-size) * 120);
    margin-bottom: calc(var(--base-size) * -120);
}

.clothmake-clean__outline {
    position: relative;
    top: calc(var(--base-size) * -40);
    margin-bottom: calc(var(--base-size) * -40);
}

.clothmake-clean__outline-header {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(var(--base-size) * 25);
}
.clothmake-clean__outline-before,
.clothmake-clean__outline-after {
    position: relative;
    padding: calc(var(--base-size) * 4);
    box-shadow: calc(var(--base-size) * 3) calc(var(--base-size) * 3) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.16);
}
.clothmake-clean__outline-before {
    width: calc(var(--base-size) * 140);
    background-color: #A1A9B1;
    z-index: 2;
}
.clothmake-clean__outline-after {
    flex-grow: 2;
    width: calc(var(--base-size) * 162);
    background-color: #ffffff;
    z-index: 1;
}
.clothmake-clean__outline-before::before,
.clothmake-clean__outline-after::before {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
}
.clothmake-clean__outline-before::before {
    width: calc(var(--base-size) * 54);
    height: calc(var(--base-size) * 30);
    background-image: url(../img/clothmake/outline-before-label.svg);
    top: calc(var(--base-size) * -11);
    left: 0;
}
.clothmake-clean__outline-after::before {
    width: calc(var(--base-size) * 62);
    height: calc(var(--base-size) * 34);
    background-image: url(../img/clothmake/outline-after-label.svg);
    top: calc(var(--base-size) * -14);
    left: calc(var(--base-size) * -7);
}
.clothmake-clean__outline-before::after {
    content: "";
    display: block;
    width: calc(var(--base-size) * 40);
    height: calc(var(--base-size) * 18);
    background: url(../img/clothmake/outline-arrow.svg) no-repeat center center / contain;
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--base-size) * -34);
    margin: auto 0;
}

.clothmake-clean__outline-content {
    position: relative;
    margin: 0 calc(var(--base-size) * -25);
}
.clothmake-clean__outline-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--base-size) * 17);
    margin-top: calc(var(--base-size) * 60);
    padding: calc(var(--base-size) * 32) calc(var(--base-size) * 25);
    border-radius: calc(var(--base-size) * 16);
    background-color: #ffffff;
    box-shadow: calc(var(--base-size) * 3) calc(var(--base-size) * 3) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.16);
    z-index: 2;
}
.clothmake-clean__outline-content::before,
.clothmake-clean__outline-list::before {
    content: "";
    display: block;
    width: calc(var(--base-size) * 64);
    height: calc(var(--base-size) * 64);
    background-color: #ffffff;
    position: absolute;
    top: calc(var(--base-size) * -32);
    left: calc(var(--base-size) * 70);
    transform: rotate(45deg) skew(30deg, 30deg);
    z-index: 1;
}
.clothmake-clean__outline-content::before {
    box-shadow: calc(var(--base-size) * 6) calc(var(--base-size) * 6) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.5);
}
.clothmake-clean__outline-item {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--base-size) * 5);
}
.clothmake-clean__outline-figure {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: calc(var(--base-size) * 12);
    overflow: hidden;
    box-shadow: calc(var(--base-size) * 3) calc(var(--base-size) * 3) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.16);
}
.clothmake-clean__outline-figure-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.clothmake-clean__outline-caption {
    font-size: calc(var(--base-size) * 14);
    font-weight: 500;
}

.clothmake-clean__comment {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../img/clothmake/comment-bg-sp.svg) no-repeat top center;
    background-size: contain;
    margin: calc(var(--base-size) * 40) calc(var(--base-size) * -6) 0 calc(var(--base-size) * -6);
}
.clothmake-clean__comment-person {
    order: 2;
    width: calc(var(--base-size) * 182);
    height: calc(var(--base-size) * 182);
    overflow: hidden;
    margin-top: calc(var(--base-size) * -26);
}
.clothmake-clean__comment-person-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.clothmake-clean__comment-text {
    order: 1;
    padding: calc(var(--base-size) * 40) calc(var(--base-size) * 24) calc(var(--base-size) * 40) calc(var(--base-size) * 36);
    font-size: calc(var(--base-size) * 14);
    font-weight: 500;
}

.clothmake-clean__movie {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: calc(var(--base-size) * 40);
    border-radius: calc(var(--base-size) * 16);
    overflow: hidden;
}
.clothmake-clean__movie iframe {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 768px)
{
    .clothmake-clean__secondary {
        margin-top: calc(var(--base-size) * 260);
        padding-bottom: calc(var(--base-size) * 200);
        margin-bottom: calc(var(--base-size) * -200);
    }

    .clothmake-clean__outline {
        top: calc(var(--base-size) * -120);
        margin-bottom: calc(var(--base-size) * -120);
    }

    .clothmake-clean__outline-header {
        gap: calc(var(--base-size) * 70);
    }
    .clothmake-clean__outline-before,
    .clothmake-clean__outline-after {
        padding: calc(var(--base-size) * 12);
        box-shadow: calc(var(--base-size) * 3) calc(var(--base-size) * 3) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.16);
    }
    .clothmake-clean__outline-before {
        width: calc(var(--base-size) * 430);
    }
    .clothmake-clean__outline-after {
        width: calc(var(--base-size) * 500);
    }
    .clothmake-clean__outline-before::before {
        width: calc(var(--base-size) * 166);
        height: calc(var(--base-size) * 90);
        top: calc(var(--base-size) * -30);
        left: 0;
    }
    .clothmake-clean__outline-after::before {
        width: calc(var(--base-size) * 192);
        height: calc(var(--base-size) * 104);
        top: calc(var(--base-size) * -44);
        left: calc(var(--base-size) * -22);
    }
    .clothmake-clean__outline-before::after {
        width: calc(var(--base-size) * 136);
        height: calc(var(--base-size) * 58);
        right: calc(var(--base-size) * -110);
    }

    .clothmake-clean__outline-content {
        position: relative;
        margin: 0;
    }
    .clothmake-clean__outline-list {
        grid-template-columns: repeat(4, 1fr);
        gap: calc(var(--base-size) * 17) calc(var(--base-size) * 30);
        margin-top: calc(var(--base-size) * 42);
        padding: calc(var(--base-size) * 55) calc(var(--base-size) * 55) calc(var(--base-size) * 47) calc(var(--base-size) * 55);
        border-radius: calc(var(--base-size) * 22);
        box-shadow: calc(var(--base-size) * 3) calc(var(--base-size) * 3) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.16);
    }
    .clothmake-clean__outline-content::before,
    .clothmake-clean__outline-list::before {
        width: calc(var(--base-size) * 70);
        height: calc(var(--base-size) * 70);
        top: calc(var(--base-size) * -35);
        left: calc(var(--base-size) * 250);
        transform: rotate(45deg) skew(20deg, 20deg);
    }
    .clothmake-clean__outline-content::before {
        box-shadow: calc(var(--base-size) * 6) calc(var(--base-size) * 6) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 1.16);
    }
    .clothmake-clean__outline-item {
        gap: calc(var(--base-size) * 13);
    }
    .clothmake-clean__outline-figure {
        border-radius: calc(var(--base-size) * 12);
        box-shadow: calc(var(--base-size) * 3) calc(var(--base-size) * 3) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.16);
    }
    .clothmake-clean__outline-caption {
        font-size: calc(var(--base-size) * 16);
    }

    .clothmake-clean__comment {
        flex-direction: row;
        background: url(../img/clothmake/comment-bg-pc.svg) no-repeat center left;
        background-size: calc(var(--base-size) * 880) calc(var(--base-size) * 206);
        margin: calc(var(--base-size) * 110) 0 0 0;
    }
    .clothmake-clean__comment-person {
        width: calc(var(--base-size) * 266);
        height: calc(var(--base-size) * 304);
        margin-top: calc(var(--base-size) * -40);
    }
    .clothmake-clean__comment-text {
        flex-grow: 2;
        padding: 0 0 0 calc(var(--base-size) * 120);
        font-size: calc(var(--base-size) * 22);
    }

    .clothmake-clean__movie {
        margin-top: calc(var(--base-size) * 100);
        border-radius: calc(var(--base-size) * 22);
    }
}





/* クロスメイクなら */

.clothmake-why__point-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--base-size) * 25);
    padding: calc(var(--base-size) * 10) 0;
    margin-top: calc(var(--base-size) * 30);
}
.clothmake-why__point-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--base-size) * 12);
    border: 2px solid #000000;
    border-radius: calc(var(--base-size) * 12);
    padding: calc(var(--base-size) * 14) calc(var(--base-size) * 20);
    background-color: #fff;
    box-shadow: calc(var(--base-size) * 3) calc(var(--base-size) * 3) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.16);
}
.clothmake-why__point-item::before,
.clothmake-why__point-item::after {
    content: "";
    display: block;
    width: calc(var(--base-size) * 22);
    height: calc(var(--base-size) * 22);
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
}
.clothmake-why__point-item::before {
    top: calc(var(--base-size) * -12);
    right: calc(var(--base-size) * 14);
}
.clothmake-why__point-item::after {
    bottom: calc(var(--base-size) * -12);
    left: calc(var(--base-size) * 14);
}
.clothmake-why__point-lead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--base-size) * 2);
}
.clothmake-why__point-lead-icon {
    width: calc(var(--base-size) * 62);
    height: calc(var(--base-size) * 62);
}
.clothmake-why__point-lead-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.clothmake-why__point-lead-text {
    font-family: "Kiwi Maru", serif;
    font-size: calc(var(--base-size) * 23);
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}
.clothmake-why__point-description {
    font-size: calc(var(--base-size) * 15);
    text-align: center;
    padding-bottom: calc(var(--base-size) * 3);
}

#clothmake-why .common-ordered-content {
    margin-top: calc(var(--base-size) * 90);
}

@media (min-width: 768px)
{
    .clothmake-why__point-list {
        flex-direction: row;
        justify-content: center;
        gap: calc(var(--base-size) * 20);
        padding: calc(var(--base-size) * 10) 0;
        margin-top: calc(var(--base-size) * 80);
    }
    .clothmake-why__point-item {
        flex-basis: calc(100% / 4);
        gap: calc(var(--base-size) * 20);
        border-width: 2px;
        border-radius: calc(var(--base-size) * 12);
        padding: calc(var(--base-size) * 12) calc(var(--base-size) * 16);
        box-shadow: calc(var(--base-size) * 3) calc(var(--base-size) * 3) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.16);
    }
    .clothmake-why__point-item::before,
    .clothmake-why__point-item::after {
        width: calc(var(--base-size) * 28);
        height: calc(var(--base-size) * 28);
    }
    .clothmake-why__point-item::before {
        top: calc(var(--base-size) * -14);
        right: calc(var(--base-size) * 20);
    }
    .clothmake-why__point-item::after {
        bottom: calc(var(--base-size) * -14);
        left: calc(var(--base-size) * 20);
    }
    .clothmake-why__point-lead {
        gap: calc(var(--base-size) * 5);
    }
    .clothmake-why__point-lead-icon {
        width: calc(var(--base-size) * 100);
        height: calc(var(--base-size) * 100);
    }
    .clothmake-why__point-lead-text {
        font-size: calc(var(--base-size) * 35);
    }
    .clothmake-why__point-description {
        font-size: calc(var(--base-size) * 16);
        text-align: left;
        padding-bottom: calc(var(--base-size) * 20);
    }

    #clothmake-why .common-ordered-content {
        margin-top: calc(var(--base-size) * 150);
    }
}





/* 他の施工方法との比較 */

#clothmake-why .common-comparison {
    margin-top: calc(var(--base-size) * 120);
}

@media (min-width: 768px)
{
    #clothmake-why .common-comparison {
        margin-top: calc(var(--base-size) * 150);
    }
}





/* 料金のご案内 */

#clothmake-why {
    overflow: hidden;
}
.clothmake-why__price {
    margin-top: calc(var(--base-size) * 120);
}

.clothmake-why__price-title {
    display: flex;
    align-items: flex-end;
    border-left: calc(var(--base-size) * 5) solid #004F85;
    padding: calc(var(--base-size) * 2) 0 calc(var(--base-size) * 2) calc(var(--base-size) * 10);
    font-size: calc(var(--base-size) * 20);
    font-weight: 500;
}

.clothmake-why__price-lead {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    min-height: calc(var(--base-size) * 218);
    margin: calc(var(--base-size) * 40) 0 0 0;
}
.clothmake-why__price-lead::before {
    content: "";
    display: block;
    width: calc(var(--base-size) * 466);
    height: calc(var(--base-size) * 210);
    background: url(../img/clothmake/price-lead-bg-sp.svg) no-repeat center center;
    background-size: calc(var(--base-size) * 466) calc(var(--base-size) * 210);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.clothmake-why__price-lead-primary {
    font-size: calc(var(--base-size) * 22);
    font-weight: 700;
}
.clothmake-why__price-lead-secondary {
    font-size: calc(var(--base-size) * 26);
    font-weight: 700;
    text-align: center;
    line-height: calc(var(--base-size) * 40);
    margin-top: calc(var(--base-size) * 4);
}
.clothmake-why__price-lead-secondary-em {
    font-family: var(--font-family-en);
    font-size: calc(var(--base-size) * 38);
    font-weight: 900;
    color: #FFEB00;
    line-height: calc(var(--base-size) * 40);
}
.clothmake-why__price-lead-notes {
    font-size: calc(var(--base-size) * 11);
    font-weight: 500;
    margin-top: 0.5em;
}

.clothmake-why__price-table-notes {
    font-size: calc(var(--base-size) * 11);
    text-align: right;
    margin-top: calc(var(--base-size) * 40);
}

.clothmake-why__price-table {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 20);
    margin-top: calc(var(--base-size) * 10);
}
.clothmake-why__price-table-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #BBDAF3;
    padding: 0 calc(var(--base-size) * 7) calc(var(--base-size) * 7) calc(var(--base-size) * 7);
    border-radius: calc(var(--base-size) * 10);
}
.clothmake-why__price-table-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--base-size) * 21);
    font-weight: 500;
    min-height: calc(var(--base-size) * 80);
}
.clothmake-why__price-table-content {
    display: flex;
    flex-direction: column;
}
.clothmake-why__price-table-content-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--base-size) * 2);
    padding: calc(var(--base-size) * 25) calc(var(--base-size) * 12);
}
.clothmake-why__price-table-content-item:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: calc(var(--base-size) * 10);
}

.clothmake-why__price-table-content-type {
    font-size: calc(var(--base-size) * 16);
}
.clothmake-why__price-table-content-price {
    display: flex;
    align-items: center;
    font-size: calc(var(--base-size) * 20);
}
.clothmake-why__price-table-content-price-em {
    font-family: var(--font-family-en);
    font-size: calc(var(--base-size) * 34);
    font-weight: 700;
    color: #FF575D;
    line-height: calc(var(--base-size) * 45);
}
.clothmake-why__price-table-content-notes {
    font-size: calc(var(--base-size) * 13);
    margin-top: calc(var(--base-size) * -4);
}

.clothmake-why__price-notes {
    margin-top: calc(var(--base-size) * 20);
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 10);
}
.clothmake-why__price-notes-item {
    position: relative;
    font-size: calc(var(--base-size) * 11);
    padding-left: 1.2em;
}
.clothmake-why__price-notes-item::before {
    content: "※";
    position: absolute;
    left: 0;
}

.clothmake-why__price-info {
    font-size: calc(var(--base-size) * 20);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: calc(var(--base-size) * 60);
}

@media (min-width: 768px)
{
    .clothmake-why__price {
        margin-top: calc(var(--base-size) * 150);
    }
    .clothmake-why__price-title {
        display: flex;
        align-items: flex-end;
        border-left: calc(var(--base-size) * 5) solid #004F85;
        padding: calc(var(--base-size) * 3) 0 calc(var(--base-size) * 7) calc(var(--base-size) * 20);
        font-size: calc(var(--base-size) * 28);
        line-height: 1.25;
    }

    .clothmake-why__price-lead {
        min-height: calc(var(--base-size) * 330);
        margin-top: calc(var(--base-size) * 70);
    }
    .clothmake-why__price-lead::before {
        width: calc(var(--base-size) * 1000);
        height: calc(var(--base-size) * 330);
        background-image: url(../img/clothmake/price-lead-bg-pc.svg);
        background-size: contain;
    }
    .clothmake-why__price-lead-primary {
        font-size: calc(var(--base-size) * 28);
    }
    .clothmake-why__price-lead-secondary {
        font-size: calc(var(--base-size) * 45);
        line-height: calc(var(--base-size) * 71);
        margin-top: calc(var(--base-size) * 4);
    }
    .clothmake-why__price-lead-secondary-em {
        font-size: calc(var(--base-size) * 66);
        line-height: calc(var(--base-size) * 70);
    }
    .clothmake-why__price-lead-notes {
        font-size: calc(var(--base-size) * 14);
        margin-top: 0.5em;
    }
    .clothmake-why__price-table-notes {
        font-size: calc(var(--base-size) * 15);
        margin-top: calc(var(--base-size) * 70);
    }

    .clothmake-why__price-table {
        align-items: stretch;
        gap: calc(var(--base-size) * 10);
        margin-top: calc(var(--base-size) * 10);
    }
    .clothmake-why__price-table-item {
        flex-direction: row;
        padding: calc(var(--base-size) * 5) calc(var(--base-size) * 5) calc(var(--base-size) * 5) 0;
        border-radius: calc(var(--base-size) * 10);
    }
    .clothmake-why__price-table-title {
        width: calc(var(--base-size) * 280);
        min-height: none;
        font-size: calc(var(--base-size) * 20);
    }

    .clothmake-why__price-table-content {
        flex-grow: 2;
        flex-direction: row;
    }
    .clothmake-why__price-table-content-item {
        flex-basis: calc(100% / 3);
        gap: calc(var(--base-size) * 2);
        padding: calc(var(--base-size) * 15) calc(var(--base-size) * 16);
    }
    .clothmake-why__price-table-content-item:nth-of-type(odd) {
        border-radius: calc(var(--base-size) * 10);
    }
    .clothmake-why__price-table-content-type {
        font-size: calc(var(--base-size) * 18);
    }
    .clothmake-why__price-table-content-price {
        font-size: calc(var(--base-size) * 24);
    }
    .clothmake-why__price-table-content-price-em {
        font-size: calc(var(--base-size) * 40);
        line-height: calc(var(--base-size) * 53);
    }
    .clothmake-why__price-table-content-notes {
        font-size: calc(var(--base-size) * 16);
        margin-top: 0;
    }

    .clothmake-why__price-notes {
        margin-top: calc(var(--base-size) * 25);
        gap: 0;
    }
    .clothmake-why__price-notes-item {
        font-size: calc(var(--base-size) * 16);
        padding-left: 1.2em;
    }

    .clothmake-why__price-info {
        font-size: calc(var(--base-size) * 30);
        margin-top: calc(var(--base-size) * 80);
    }
}





/* 施工事例 */

#clothmake-works {
    background: var(--color-secondary);
}

.clothmake-works__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--base-size) * 50);
    margin-top: calc(var(--base-size) * 60);
}
.clothmake-works__list-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 20);
}

.clothmake-works__list-item-detail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 15);
    padding: calc(var(--base-size) * 15) 0;
    border: solid max(calc(var(--base-size) * 2), 2px) #0F70B9;
    border-radius: calc(var(--base-size) * 15);
    background-color: #fff;
}
.clothmake-works__list-item--pink .clothmake-works__list-item-detail {
    border-color: #E76E79;
}
.clothmake-works__list-item-person {
    position: relative;
    padding: calc(var(--base-size) * 15) calc(var(--base-size) * 16);
    background-color: #0F70B9;
    color: #fff;
}
.clothmake-works__list-item--pink .clothmake-works__list-item-person {
    background-color: #E76E79;
}
.clothmake-works__list-item-person-image {
    width: calc(var(--base-size) * 78);
    aspect-ratio: 1 / 1;
    border: solid max(calc(var(--base-size) * 2), 2px) #0F70B9;
    border-radius: 50%;
    background-color: #FFFCD6;
    overflow: hidden;
    position: absolute;
    top: calc(var(--base-size) * -35);
    right: calc(var(--base-size) * 14);
}
.clothmake-works__list-item--pink .clothmake-works__list-item-person-image {
    border-color: #E76E79;
}
.clothmake-works__list-item-person-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clothmake-works__list-item-person-label {
    color: #FFFCD6;
    font-size: calc(var(--base-size) * 18);
    font-weight: 700;
}
.clothmake-works__list-item-person-text {
    font-size: calc(var(--base-size) * 15);
    font-weight: 500;
    margin-top: calc(var(--base-size) * 8);
}

.clothmake-works__list-item-comment {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 4);
    padding: 0 calc(var(--base-size) * 15);
}
.clothmake-works__list-item-comment-label {
    font-size: calc(var(--base-size) * 18);
    font-weight: 700;
    color: #0F70B9;
}
.clothmake-works__list-item--pink .clothmake-works__list-item-comment-label {
    color: #E76E79;
}
.clothmake-works__list-item-comment-text {
    font-size: calc(var(--base-size) * 15);
    font-weight: 400;
}

.clothmake-works__list-item-images {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 15);
}
.clothmake-works__list-item-images::before {
    content: "";
    display: block;
    width: calc(var(--base-size) * 38);
    aspect-ratio: 46 / 102;
    background: url(../img/clothmake/works-item-arrow--blue.svg) no-repeat center center / contain;
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--base-size) * 36);
    z-index: 4;
    margin: auto 0;
}
.clothmake-works__list-item--pink .clothmake-works__list-item-images::before {
    background-image: url(../img/clothmake/works-item-arrow--pink.svg);
}
.clothmake-works__list-item-image {
    position: relative;
    width: 100%;
    aspect-ratio: 485 / 220;
    border-radius: calc(var(--base-size) * 15);
}
.clothmake-works__list-item-image::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: solid max(calc(var(--base-size) * 2), 2px) #0F70B9;
    border-radius: calc(var(--base-size) * 15);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.clothmake-works__list-item--pink .clothmake-works__list-item-image::before {
    border-color: #E76E79;
}
.clothmake-works__list-item-image::after {
    content: "";
    display: block;
    width: calc(var(--base-size) * 135);
    aspect-ratio: 135 / 73;
    position: absolute;
    top: calc(var(--base-size) * -32);
    left: calc(var(--base-size) * -2);
    z-index: 3;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.clothmake-works__list-item-image--before::after {
    background-image: url(../img/clothmake/works-before-icon.svg);
}
.clothmake-works__list-item-image--after::after {
    background-image: url(../img/clothmake/works-after-icon.svg);
    top: calc(var(--base-size) * -23);
}
.clothmake-works__list-item-image-img {
    position: relative;
    z-index: 1;
    border-radius: calc(var(--base-size) * 15);
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px)
{
    .clothmake-works__list {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--base-size) * 30);
        margin-top: calc(var(--base-size) * 120);
    }
    .clothmake-works__list-item {
        gap: calc(var(--base-size) * 20);
    }

    .clothmake-works__list-item-detail {
        gap: calc(var(--base-size) * 16);
        padding: calc(var(--base-size) * 20) 0;
        border: solid max(calc(var(--base-size) * 2), 2px) #0F70B9;
        border-radius: calc(var(--base-size) * 15);
    }

    .clothmake-works__list-item-person {
        display: flex;
        align-items: center;
        gap: calc(var(--base-size) * 20);
        padding: calc(var(--base-size) * 16);
    }
    .clothmake-works__list-item-person-image {
        flex-shrink: 0;
        width: calc(var(--base-size) * 116);
        position: relative;
        top: auto;
        right: auto;
    }
    .clothmake-works__list-item-person-label {
        font-size: calc(var(--base-size) * 18);
    }
    .clothmake-works__list-item-person-text {
        font-size: calc(var(--base-size) * 16);
        margin-top: calc(var(--base-size) * 4);
    }

    .clothmake-works__list-item-comment {
        gap: calc(var(--base-size) * 8);
        padding: 0 calc(var(--base-size) * 24);
    }
    .clothmake-works__list-item-comment-label {
        font-size: calc(var(--base-size) * 18);
    }
    .clothmake-works__list-item-comment-text {
        font-size: calc(var(--base-size) * 16);
        min-height: calc(5em * 1.5);
    }

    .clothmake-works__list-item-images {
        gap: calc(var(--base-size) * 15);
    }
    .clothmake-works__list-item-images::before {
        width: calc(var(--base-size) * 46);
        right: calc(var(--base-size) * 24);
    }
    .clothmake-works__list-item-image {
        border-radius: calc(var(--base-size) * 15);
    }
    .clothmake-works__list-item-image::before {
        border: solid max(calc(var(--base-size) * 2), 2px) #0F70B9;
        border-radius: calc(var(--base-size) * 15);
    }
    .clothmake-works__list-item-image::after {
        width: calc(var(--base-size) * 135);
        top: calc(var(--base-size) * -12);
        left: calc(var(--base-size) * -2);
    }
    .clothmake-works__list-item-image--after::after {
        top: calc(var(--base-size) * -12);
    }
    .clothmake-works__list-item-image-img {
        border-radius: calc(var(--base-size) * 15);
    }
}





/* 背景ペイント1 */

.section__bg--ex-01 {
    top: auto;
    bottom: 0;
    height: calc(100% + calc(var(--base-size) * 596));
}

.section__bg-img.--sbg-01 {
    top: calc(var(--base-size) * 10);
}
.section__bg-img.--sbg-02 {
    top: calc(var(--base-size) * 630);
}
.section__bg-img.--sbg-03 {
    top: calc(var(--base-size) * 308);
}

@media (max-width: 767px)
{
    .section__bg-img.--sbg-01 {
        left: calc(var(--base-size) * -58);
    }
    .section__bg-img.--sbg-02 {
        left: calc(var(--base-size) * -58);
    }
    .section__bg-img.--sbg-03 {
        right: calc(var(--base-size) * -80);
    }
}

@media (min-width: 768px)
{
    .section__bg--ex-01 {
        height: calc(100% + calc(var(--base-size) * 562));
    }

    .section__bg-img.--sbg-01 {
        top: calc(var(--base-size) * 150);
    }
    .section__bg-img.--sbg-02 {
        top: calc(var(--base-size) * 850);
    }
    .section__bg-img.--sbg-03 {
        top: calc(var(--base-size) * 460);
    }
}



/* 背景ペイント2 */

.section__bg-img.--sbg-04 {
    top: calc(var(--base-size) * 32);
}
.section__bg-img.--sbg-05 {
    top: calc(var(--base-size) * 1144);
}
.section__bg-img.--sbg-06 {
    top: calc(var(--base-size) * 4356);
}
.section__bg-img.--sbg-07 {
    top: calc(var(--base-size) * 5750);
}

.section__bg-img.--sbg-08 {
    top: calc(var(--base-size) * 726);
}
.section__bg-img.--sbg-09 {
    top: calc(var(--base-size) * 2316);
}
.section__bg-img.--sbg-10 {
    top: calc(var(--base-size) * 5118);
}
.section__bg-img.--sbg-11 {
    top: calc(var(--base-size) * 6140);
}

@media (max-width: 767px)
{
    .section__bg-img.--sbg-04 {
        left: calc(var(--base-size) * -58);
    }
    .section__bg-img.--sbg-06 {
        left: calc(var(--base-size) * -70);
    }
    .section__bg-img.--sbg-07 {
        left: calc(var(--base-size) * -70);
    }

    .section__bg-img.--sbg-08 {
        right: calc(var(--base-size) * -52);
    }
    .section__bg-img.--sbg-09 {
        right: calc(var(--base-size) * -60);
    }
    .section__bg-img.--sbg-10 {
        right: calc(var(--base-size) * -60);
    }
    .section__bg-img.--sbg-11 {
        right: calc(var(--base-size) * -46);
    }
}

@media (min-width: 768px)
{
    .section__bg-img.--sbg-04 {
        top: calc(var(--base-size) * 212);
    }
    .section__bg-img.--sbg-05 {
        top: calc(var(--base-size) * 1330);
    }
    .section__bg-img.--sbg-06 {
        top: calc(var(--base-size) * 2792);
    }
    .section__bg-img.--sbg-07 {
        display: none;
    }

    .section__bg-img.--sbg-08 {
        top: calc(var(--base-size) * 688);
    }
    .section__bg-img.--sbg-09 {
        top: calc(var(--base-size) * 1760);
    }
    .section__bg-img.--sbg-10 {
        top: calc(var(--base-size) * 3792);
    }
    .section__bg-img.--sbg-11 {
        display: none;
    }
}