@charset "UTF-8";

/* アクセントクロスならコロル */

.corol-accent-cloth__images {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--base-size) * 40);
    width: 100%;
    margin: calc(var(--base-size) * 40) auto 0 auto;
}

.corol-accent-cloth__color-variants {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(var(--base-size) * 40);
}
.corol-accent-cloth__title {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: calc(var(--base-size) * 20);
    font-weight: 700;
    letter-spacing: 0.025em;
    text-align: center;
    white-space: nowrap;
    color: #3AACBA;
    border: solid 1px #E76E79;
    border-radius: 9999px;
    padding: calc(var(--base-size) * 5) calc(var(--base-size) * 40);
}
.corol-accent-cloth__title-em {
    font-family: var(--font-family-en);
    font-size: calc(var(--base-size) * 32);
    font-weight: 700;
    line-height: calc(var(--base-size) * 32);
    letter-spacing: 0.0125em;
    text-align: center;
    color: #E76E79;
}

.corol-accent-cloth__color-variants-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    place-content: center;
    gap: calc(var(--base-size) * 20);
    width: 100%;
    margin-top: calc(var(--base-size) * 40);
    padding: 0 calc(var(--base-size) * 6);
}
.corol-accent-cloth__color-variants-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--base-size) * 2);
}
.corol-accent-cloth__color-variants-item-color {
    width: 100%;
    aspect-ratio: 62 / 32;
    border-radius: calc(var(--base-size) * 2);
}
.corol-accent-cloth__color-variants-item-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--base-size) * 3);
}
.corol-accent-cloth__color-variants-item-name-number {
    font-size: calc(var(--base-size) * 13);
    line-height: 1;
    text-align: center;
}
.corol-accent-cloth__color-variants-item-name-text {
    font-size: calc(var(--base-size) * 11);
    line-height: calc(var(--base-size) * 12);
    text-align: center;
}

@media (min-width: 768px)
{
    .corol-accent-cloth__images {
        gap: calc(var(--base-size) * 80);
        width: 50%;
        margin-top: calc(var(--base-size) * 80);
    }

    .corol-accent-cloth__color-variants {
        margin-top: calc(var(--base-size) * 88);
    }

    .corol-accent-cloth__title {
        font-size: calc(var(--base-size) * 24);
        letter-spacing: 0.025em;
        border-width: 1px;
        padding: calc(var(--base-size) * 6) calc(var(--base-size) * 56);
    }
    .corol-accent-cloth__title-em {
        font-size: calc(var(--base-size) * 40);
        line-height: calc(var(--base-size) * 40);
        letter-spacing: 0.0125em;
    }

    .corol-accent-cloth__color-variants-list {
        grid-template-columns: repeat(8, 1fr);
        gap: calc(var(--base-size) * 20) 0;
        margin-top: calc(var(--base-size) * 50);
        padding: 0;
    }
    .corol-accent-cloth__color-variants-item {
        gap: calc(var(--base-size) * 8);
    }
    .corol-accent-cloth__color-variants-item-color {
        width: calc(var(--base-size) * 80);
        aspect-ratio: 80 / 34;
        border-radius: calc(var(--base-size) * 2);
    }
    .corol-accent-cloth__color-variants-item-name {
        gap: 0;
    }
    .corol-accent-cloth__color-variants-item-name-number {
        font-size: calc(var(--base-size) * 14);
        line-height: 1.15;
    }
    .corol-accent-cloth__color-variants-item-name-text {
        font-size: calc(var(--base-size) * 14);
        line-height: 1.15;
    }
}





/* 施工事例 */

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

.corol-works__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--base-size) * 36) 0;
    margin-top: calc(var(--base-size) * 56);
}
.corol-works__list-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 16);
}
.corol-works__list-item::before {
    content: "";
    display: block;
    width: calc(var(--base-size) * 34);
    height: calc(var(--base-size) * 80);
    background-image: url(../img/corol/works-arrow-sp.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: calc(var(--base-size) * 16);
    right: calc(var(--base-size) * 40);
    margin: auto 0;
    z-index: 4;
}
.corol-works__list-item-image {
    position: relative;
    height: calc(var(--base-size) * 190);
    border-radius: calc(var(--base-size) * 12);
    background-color: #fafafa;
    box-shadow: calc(var(--base-size) * 3) calc(var(--base-size) * 3) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.15);
}
.corol-works__list-item-image::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: solid calc(var(--base-size) * 4) #fff;
    border-radius: calc(var(--base-size) * 12);
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.corol-works__list-item-image::after {
    content: "";
    display: block;
    width: calc(var(--base-size) * 135);
    height: calc(var(--base-size) * 72);
    position: absolute;
    top: calc(var(--base-size) * -7);
    left: calc(var(--base-size) * -2);
    z-index: 3;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.corol-works__list-item-image--before::after {
    background-image: url(../img/corol/works-label--before.svg);
}
.corol-works__list-item-image--after::after {
    background-image: url(../img/corol/works-label--after.svg);
}
.corol-works__list-item-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--base-size) * 14);
    overflow: hidden;
    z-index: 1;
}

@media (min-width: 768px)
{
    .corol-works__list {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--base-size) * 80) calc(var(--base-size) * 60);
        margin-top: calc(var(--base-size) * 168);
    }
    .corol-works__list-item {
        flex-direction: row;
        align-items: stretch;
        gap: calc(var(--base-size) * 26);
    }
    .corol-works__list-item::before {
        width: calc(var(--base-size) * 100);
        height: calc(var(--base-size) * 46);
        background-image: url(../img/corol/works-arrow-pc.svg);
        top: 0;
        right: calc(var(--base-size) * 24);
        bottom: 0;
        left: 0;
        margin: auto;
    }
    .corol-works__list-item-image {
        position: relative;
        height: calc(var(--base-size) * 306);
        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.15);
    }
    .corol-works__list-item-image--before {
        width: calc(var(--base-size) * 206);
    }
    .corol-works__list-item-image--after {
        width: calc(var(--base-size) * 236);
    }
    .corol-works__list-item-image::before {
        border-width: calc(var(--base-size) * 5);
        border-radius: calc(var(--base-size) * 12);
    }
    .corol-works__list-item-image::after {
        left: calc(var(--base-size) * -6);
    }
    .corol-works__list-item-image--before::after {
        top: calc(var(--base-size) * -41);
        width: calc(var(--base-size) * 110);
        height: calc(var(--base-size) * 60);
    }
    .corol-works__list-item-image--after::after {
        top: calc(var(--base-size) * -48);
        width: calc(var(--base-size) * 122);
        height: calc(var(--base-size) * 66);
    }
    .corol-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) * 538));
}

.section__bg-img.--sbg-01 {
    top: calc(var(--base-size) * 16);
}
.section__bg-img.--sbg-02 {
    top: calc(var(--base-size) * 570);
}
.section__bg-img.--sbg-03 {
    top: calc(var(--base-size) * 1200);
}
.section__bg-img.--sbg-04 {
    top: calc(var(--base-size) * 300);
}

@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) * -54);
    }
    .section__bg-img.--sbg-04 {
        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) * 186);
    }
    .section__bg-img.--sbg-02 {
        top: calc(var(--base-size) * 1440);
    }
    .section__bg-img.--sbg-03 {
        top: calc(var(--base-size) * 760);
    }
    .section__bg-img.--sbg-04 {
        display: none;
    }
}