@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@300;400;500;600;700;900&display=swap');

@font-face {
    font-family: 'Yu Mincho';
    src: url('/item/s/v2/fonts/yu-mincho-regular.eot');
    /* IE9 Compat Modes */
    src: url('/item/s/v2/fonts/yu-mincho-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('/item/s/v2/fonts/yu-mincho-regular.woff') format('woff'),
        /* Modern Browsers */
        url('/item/s/v2/fonts/yu-mincho-regular.ttf') format('truetype');
    /* Safari, Android, iOS */
    font-display: swap;
}

@font-face {
    font-family: 'Bebas Neue Pro';
    src: url('/item/s/v2/fonts/bebas-neue-pro-book.eot');
    /* IE9 Compat Modes */
    src: url('/item/s/v2/fonts/bebas-neue-pro-book.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('/item/s/v2/fonts/bebas-neue-pro-book.woff') format('woff'),
        /* Modern Browsers */
        url('/item/s/v2/fonts/bebas-neue-pro-book.ttf') format('truetype');
    /* Safari, Android, iOS */
    font-display: swap;
}

:root {
    --font-family__bebas: "Bebas Neue", sans-serif;
    --font-family__bebas_pro: "Bebas Neue Pro", sans-serif;
    --font-family__yu_mincho: "Yu Mincho", "Hiragino Mincho ProN", 'Noto Sans JP', sans-serif;
}

.greige-coordinate-top-image-container {
    position: relative;
    display: block;
}

.greige-coordinate-top-image-title-container {
    position: absolute;
    top: 27px;
    left: 21px;
}

.greige-coordinate-top-image-title {
    color: var(--color__white);
    font-family: var(--font-family__bebas);
    font-size: 36px;
    font-weight: var(--font-weight-regular);
    line-height: 50px;
    /* 138.889% */
    letter-spacing: 12px;
}

.greige-coordinate-top-image-sub-title {
    color: var(--color__white);
    font-family: var(--font-family__yu_mincho);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    line-height: 36px;
    /* 225% */
    letter-spacing: 1px;
    margin-top: 20px;
}

img.greige-coordinate-top-image.-_sp {
    display: block;
}

.greige-coordinate-introduction-container {
    margin-bottom: 60px;
}

.greige-coordinate-introduction-title {
    color: #444;
    text-align: center;
    font-family: var(--font-family__yu_mincho);
    font-size: 20px;
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    letter-spacing: 3px;
    margin: 60px 20px 0;
}

.greige-coordinate-description {
    color: #444;
    font-family: var(--font-family__noto-sans);
    font-size: var(--font-size__small);
    font-weight: 100;
    line-height: 24px;
    /* 184.615% */
    margin: 20px 20px 60px;
}

img.greige-coordinate-introduction-image.-_sp {
    display: block;
}

.greige-coordinate-point-container {
    margin: 60px 20px;
}

.greige-coordinate-title {
    color: #E4E4E4;
    font-family: var(--font-family__bebas);
    font-size: 25px;
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    letter-spacing: 7px;
    text-align: center;
    margin-bottom: 15px;
}

.greige-coordinate-sub-title {
    color: #444;
    text-align: center;
    font-family: var(--font-family__yu_mincho);
    font-size: 18px;
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    letter-spacing: 3px;
}

.greige-coordinate-point-image-container {
    margin: 40px 25.5px;
}

.greige-coordinate-title-alt {
    color: #949494;
    font-family: var(--font-family__bebas);
    font-size: 25px;
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    letter-spacing: 7px;
    text-align: center;
}

.greige-coordinate-coordinate-idea-items-outter-container {
    margin: 40px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.greige-coordinate-coordinate-idea-item-container {
    display: flex;
    gap: 16px;
}

.greige-coordinate-coordinate-idea-item-image-container {
    display: block;
    padding-top: 6px;
}

img.greige-coordinate-coordinate-idea-item-image {
    display: block;
    aspect-ratio: 160 / 139;
    width: 160px;
}

.greige-coordinate-coordinate-idea-item-description-container {
    display: block;
    width: calc(100vw - 176px - 40px);
}

.greige-coordinate-coordinate-idea-item-description-title {
    color: #444;
    font-family: var(--font-family__noto-sans);
    font-size: 13px;
    font-weight: var(--font-weight-regular);
    line-height: 24px;
    /* 184.615% */
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.greige-coordinate-coordinate-idea-item-description-content {
    color: #444;
    font-family: var(--font-family__noto-sans);
    font-size: var(--font-size__small);
    font-weight: 100;
    line-height: 24px;
    /* 184.615% */
}

img.greige-coordinate-style-image {
    display: block;
    margin: 40px 0;
}

.greige-coordinate-sub-title-alt {
    color: #444;
    font-family: var(--font-family__yu_mincho);
    font-size: 18px;
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    letter-spacing: 3px;
    background: linear-gradient(to top, #F4F4F4 40%, transparent 50%);
}

.greige-coordinate-color-scheme-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.greige-coordinate-color-scheme-title {
    margin-right: 20px;
    color: #444;
    font-family: var(--font-family__bebas_pro);
    font-size: 20px;
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    letter-spacing: 2px;
}

.greige-coordinate-color-scheme-container.greige-coordinate-color-scheme-1 .greige-coordinate-color-scheme-palette.color-palette-1 {
    background-color: var(--color__white);
    border: #D5D5D5 1px solid;
}

.greige-coordinate-color-scheme-container.greige-coordinate-color-scheme-1 .greige-coordinate-color-scheme-palette.color-palette-2 {
    background-color: #C7C1B6;
}

.greige-coordinate-color-scheme-container.greige-coordinate-color-scheme-1 .greige-coordinate-color-scheme-palette.color-palette-3 {
    background-color: #F5E9D9;
}

.greige-coordinate-color-scheme-container.greige-coordinate-color-scheme-1 .greige-coordinate-color-scheme-palette.color-palette-4 {
    background-color: #64422E;
}

.greige-coordinate-color-scheme-container .greige-coordinate-color-scheme-palette {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.greige-coordinate-products-list-container {
    display: flex;
    padding: 60px 20px;
    align-items: center;
    row-gap: 40px;
    align-self: stretch;
    flex-wrap: wrap;
    column-gap: 20px;
    background: #F4F2F0;
}

a.greige-coordinate-product-container {
    display: inline-block;
    width: calc((100vw - 40px - 20px) / 2);
}

.greige-coordinate-style-container {
    margin: 60px 0;
}

.greige-coordinate-product-category {
    color: #444;
    font-family: var(--font-family__noto-sans);
    font-size: var(--font-size__small);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    /* 230.769% */
    margin-top: 10px;
}

img.greige-coordinate-product-image {
    display: block;
}

.greige-coordinate-product-name {
    color: #444;
    font-family: var(--font-family__noto-sans);
    font-size: var(--font-size__small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    /* 230.769% */
    margin-top: 6px;
}

.greige-coordinate-color-scheme-2 .greige-coordinate-color-scheme-palette.color-palette-1 {
    background-color: #EDE9DC;
}

.greige-coordinate-color-scheme-2 .greige-coordinate-color-scheme-palette.color-palette-2 {
    background-color: #EAE0CE;
}

.greige-coordinate-color-scheme-2 .greige-coordinate-color-scheme-palette.color-palette-3 {
    background-color: #C7C1B6;
}

.greige-coordinate-color-scheme-2 .greige-coordinate-color-scheme-palette.color-palette-4 {
    background-color: #55453B;
}

.greige-coordinate-color-scheme-3 .greige-coordinate-color-scheme-palette.color-palette-1 {
    background-color: var(--color__white);
    border: #D5D5D5 1px solid;
}

.greige-coordinate-color-scheme-3 .greige-coordinate-color-scheme-palette.color-palette-2 {
    background-color: #E79643;
}

.greige-coordinate-color-scheme-3 .greige-coordinate-color-scheme-palette.color-palette-3 {
    background-color: #C7C1B6;
}

.greige-coordinate-color-scheme-3 .greige-coordinate-color-scheme-palette.color-palette-4 {
    background-color: #64422E;
}

.greige-coordinate-button-container {
    margin: 60px auto;
    display: block;
    text-align: center;
}

a.greige-coordinate-see-more-button {
    padding: 16px 40px;
    width: 276px;
}

.greige-coordinate-recommend-container {
    display: flex;
    padding: 60px 20px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    align-self: stretch;
    background: #DFDAD2;
}

.greige-coordinate-horizontal-line {
    border-bottom: 1px solid #949494;
    width: 100%;
    margin: 20px 0;
}

img.greige-coordinate-recommend-image {
    display: block;
}

.greige-coordinate-recommend-item-content {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}

.greige-coordinate-recommend-top-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0 17.5px;
}

a.greige-coordinate-recommend-item-link {
    padding: 9px 20px;
    width: auto;
    height: min-content;
    align-self: center;
}

.greige-coordinate-recommend-item-name-container {
    display: flex;
    flex-direction: column;
}

.greige-coordinate-recommend-item-category {
    color: #444;
    font-family: var(--font-family__noto-sans);
    font-size: var(--font-size__small);
    font-weight: var(--font-weight-normal);
/*    line-height: 30px;*/
    /* 230.769% */
}

.greige-coordinate-recommend-item-name {
    color: #444;
    font-family: var(--font-family__noto-sans);
    font-size: var(--font-size__small);
    font-weight: var(--font-weight-medium);
/*    line-height: 30px;*/
    /* 230.769% */
}

.greige-coordinate-recommend-bottom-container {
    display: flex;
    padding: 0;
    align-items: center;
    row-gap: 30px;
    align-self: stretch;
    flex-wrap: wrap;
    column-gap: 20px;
}

.greige-coordinate-sub-title-alt-container {
    margin: 0 46px;
    text-align: center;
}

.greige-coordinate-product-image-container {
    padding: 18.25px;
    background: #FFF;
}

@media only screen and (min-width: 678px) {
    .greige-coordinate-main-container {
        max-width: var(--pc-content-width);
        margin: 0 auto;
    }

    .greige-coordinate-top-image-title {
        display: flex;
        flex-direction: column;
        font-size: 90px;
        line-height: 110px;
        letter-spacing: 16px;
    }

    .greige-coordinate-top-image-title-container {
        top: 88px;
        left: 64px;
    }

    .greige-coordinate-top-image-sub-title {
        margin-top: 14px;
        font-size: 24px;
    }

    img.greige-coordinate-top-image.-_sp {
        display: none;
    }

    .greige-coordinate-description {
        max-width: 609px;
        margin: 30px auto 100px;
        text-align: center;
        font-size: var(--font-base__size);
        line-height: 30px;
    }

    .greige-coordinate-introduction-title {
        font-size: 24px;
        margin-top: 100px;
    }

    img.greige-coordinate-introduction-image.-_sp {
        display: none;
    }

    .greige-coordinate-point-container {
        margin: 100px 20px;
    }

    .greige-coordinate-title {
        font-size: 32px;
        letter-spacing: 16px;
        line-height: 36px;
    }

    .greige-coordinate-sub-title {
        font-size: 24px;
    }

    .greige-coordinate-point-image-container {
        margin: 60px 25.5px 80px;
    }

    .greige-coordinate-title-alt {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: 16px;
    }

    .greige-coordinate-coordinate-idea-items-outter-container {
        margin-top: 60px;
        flex-direction: row;
    }

    .greige-coordinate-coordinate-idea-item-container {
        width: calc( (100% - 40px - 32px ) / 3);
        flex-direction: column;
        position: relative;
        gap: 30px;
    }

    img.greige-coordinate-coordinate-idea-item-image {
        width: auto;
        aspect-ratio: 369/320;
    }

    .greige-coordinate-coordinate-idea-item-description-container {
        width: 100%;
    }

    .greige-coordinate-coordinate-idea-item-description-title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 18px;
    }

    .greige-coordinate-coordinate-idea-item-description-content {
        font-size: var(--font-base__size);
    }

    .greige-coordinate-style-container {
        margin: 100px 0;
    }

    .greige-coordinate-style-container .greige-coordinate-description {
        margin-bottom: 80px;
    }

    img.greige-coordinate-style-image {
        margin-bottom: 80px;
    }

    span.greige-coordinate-sub-title-alt {
        font-size: 24px;
    }

    .greige-coordinate-color-scheme-title {
        font-size: 32px;
        letter-spacing: 7px;
        margin-right: 50px;
    }

    .greige-coordinate-products-list-container {
        padding: 70px 40px;
        column-gap: 24px;
    }

    a.greige-coordinate-product-container {
        width: calc((100% - 72px) / 4);
    }

    .greige-coordinate-recommend-bottom-container a.greige-coordinate-product-container {
        width: calc((100% - 60px) / 4);
    }

    a.greige-coordinate-product-container:hover {
        text-decoration: none;
    }

    .greige-coordinate-button-container {
        margin: 100px auto;
    }

    a.greige-coordinate-see-more-button {
        width: auto;
    }

    .greige-coordinate-recommend-container {
        padding: 80px 40px;
        gap: 60px;
    }

    .greige-coordinate-recommend-top-container {
        flex-direction: row;
        gap: 60px;
        margin: 0 74px;
    }

    span.greige-coordinate-recommend-item-category {
        font-size: var(--font-base__size);
    }

    a.greige-coordinate-recommend-item-link {
        padding: 16px 10px;
        width: 276px;
    }

    .greige-coordinate-horizontal-line {
        max-width: 900px;
        margin: 40px 0;
    }

    .greige-coordinate-recommend-head-container .greige-coordinate-title-alt {
        margin-bottom: 15px;
    }

    span.greige-coordinate-recommend-item-name {
        font-size: 16px;
    }

    .greige-coordinate-product-image-container {
        padding: 31px;
    }

    .greige-coordinate-style-container.margin-top-250 {
        margin-top: 250px;
    }

    .greige-coordinate-coordinate-idea-item-image-container {
        padding-top: 0;
    }
}