.page-container {
    box-sizing: border-box;
    font-family: "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    max-width: 930px;
    margin: 180px auto;
}

.page-container * {
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .page-container {
        padding: 0 20px;
        margin: 80px auto;
    }
}

.heading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;
}

.heading__eng {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
    font-size: 33px;
    font-weight: 900;
    line-height: 1;
}

.heading__eng::before,
.heading__eng::after {
    display: block;
    content: "";
    background: black;
    height: 3px;
    width: 57px;
    margin-top: 12px;
}


.heading__jp {
    font-size: 17px;
    font-weight: normal;
    line-height: 1;
}

/*
curtain
*/
.curtain-page a[data-fslightbox] {
    display: block;
}

.curtain-heading {
    display: flex;
    align-items: baseline;
    gap: 16px;
    border-bottom: 1px solid #231815;
    font-size: 27px;
    font-weight: bold;
    line-height: 1.2;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .curtain-heading {
        font-size: 20px;
    }
}

.curtain-heading__feature {
    font-size: 16px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .curtain-heading__feature {
        font-size: 14px;
    }
}

.curtain-lineup {
    text-align: center;
    margin-bottom: 160px;
}

@media (max-width: 768px) {
    .curtain-lineup {
        margin-bottom: 80px;
    }
}

.curtain-lineup__title {
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
    font-size: 37px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .curtain-lineup__title {
        font-size: 20px;
        margin-bottom: 18px;
    }
}

.curtain-categories {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    gap: 32px;
    width: min(830px, 100%);
}

@media (max-width: 768px) {
    .curtain-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        width: fit-content;
    }
}

.curtain-categories__item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: inherit;
}

.curtain-categories__image {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .curtain-categories__image {
        width: 80px;
        height: 80px;
    }
}

.curtain-categories__eng {
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
}

.curtain-categories__jp {
    font-size: 14px;
    line-height: 1;
}

.curtain-category {
    margin-top: 80px;
}

@media (max-width: 768px) {
    .curtain-category {
        margin-top: 60px;
    }
}

.curtain-curtains__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
}

@media (max-width: 768px) {
    .curtain-curtains__items {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.curtain-curtains__item {}

.curtain-curtains__image {
    width: 100%;
    height: auto;
}

.curtain-curtains__media {
    display: grid;
    grid-template-columns: 23fr 16fr;
    gap: 8px;
    align-items: end;
}

.curtain-curtains__main {
    aspect-ratio: 240 / 260;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.curtain-curtains__side-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.curtain-curtains__note {
    font-size: 13px;
}

.curtain-curtains__note--right {
    justify-self: end;
    text-align: right;
}

@media (max-width: 768px) {
    .curtain-curtains__note--right {
        justify-self: start;
        text-align: left;
    }
}

.curtain-design-examples {
    text-align: center;
    margin: 60px 0 50px;
}

@media (max-width: 768px) {
    .curtain-design-examples {
        margin: 50px 0 40px;
    }
}

.curtain-design-examples__title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    font-size: 18px;
    font-weight: 700;
    margin-bottom: 26px;
}

.curtain-design-examples__title span {
    background: #dde78e;
    padding: 6px 40px;
    border-radius: 999px;
    display: inline-block;
}

.curtain-design-examples__title::before,
.curtain-design-examples__title::after {
    content: "";
    height: 4px;
    background: #dde78e;
}

@media (max-width: 768px) {
    .curtain-design-examples__title {
        font-size: 13px;
    }

    .curtain-design-examples__title span {
        padding: 6px 28px;
    }
}

.curtain-design-examples__separator {
    border: none;
    height: 4px;
    background: #dde78e;
    margin: 20px 0 0;
}

.curtain-design-examples__cases {
    text-align: left;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

@media (max-width: 768px) {
    .curtain-design-examples__cases {
        grid-template-columns: 1fr;
    }
}

.curtain-design-examples__case-title {
    display: flex;
    align-items: center;
    gap: 16px;

    font-size: 21px;
}

.curtain-design-examples__case-title::before {
    content: "CASE" attr(data-index);

    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #9dcb5d;
    color: #1f2d0f;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;

    flex-shrink: 0;

    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .curtain-design-examples__case-title {
        margin-bottom: 10px;
    }
}

.curtain-design-examples__case-images {
    display: grid;
    align-items: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.curtain-design-examples__case-image {
    object-fit: cover;
}

.curtain-design-examples__case-image:first-child {
    aspect-ratio: 200 / 220;
}

.curtain-shade-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .curtain-shade-rail {
        grid-template-columns: 1fr;
        margin-top: 32px;
    }
}

.curtain-shade-rail__images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.curtain-shade-rail__image {
    aspect-ratio: 200 / 255;
    object-fit: cover;
}

.curtain-shade-rail__images--rails .curtain-shade-rail__image {
    aspect-ratio: 19 / 17;
}

.curtain-shade-rail__message {
    font-size: 21px;
    margin-top: 12px;
}

.curtain-curtains__figure {
    margin: 0;
    display: grid;
    gap: 6px;
}

.curtain-curtains__caption {
    font-size: 21px;
}

.curtain-roll {
    display: grid;
    gap: 90px;
}

@media (max-width: 768px) {
    .curtain-roll {
        gap: 36px;
    }
}

.curtain-roll__description {
    font-size: 21px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.curtain-roll__label {
    font-size: 21px;
}

.curtain-roll__media {
    display: grid;
    gap: 8px;
    align-items: end;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .curtain-roll__media {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.curtain-roll__image {
    object-fit: cover;
}

.curtain-roll__side {
    display: grid;
    gap: 10px;
}

.curtain-roll__media--two {
    grid-template-columns: repeat(2, minmax(0, 350px));
}

.curtain-roll__media--honeycomb {
    grid-template-columns: 35fr 11fr 20fr 20fr;
}

.curtain-roll__media--honeycomb .curtain-roll__image:nth-child(2) {
    aspect-ratio: 11 / 14;
    object-position: left;
}

@media (max-width: 768px) {
    .curtain-roll__media--honeycomb {
        grid-template-columns: 1fr 1fr;
    }

    .curtain-roll__media--honeycomb .curtain-roll__image:nth-child(2) {
        width: 50%;
    }
}

.curtain-roll__media--pleated {
    grid-template-columns: 37fr 37fr 11fr;
}

.curtain-roll__media--pleated .curtain-roll__image:nth-child(1),
.curtain-roll__media--pleated .curtain-roll__image:nth-child(2) {
    aspect-ratio: 37 / 23;
}

.curtain-roll__media--pleated .curtain-roll__image:nth-child(3) {
    aspect-ratio: 13 / 17;
    object-position: left;
}

@media (max-width: 768px) {
    .curtain-roll__media--pleated {
        grid-template-columns: 1fr 1fr;
    }

    .curtain-roll__media--pleated .curtain-roll__image:nth-child(3) {
        width: 50%;
    }
}

.curtain-roll__media--bordered {
    grid-template-columns: 37fr 18fr 32fr;
}

.curtain-roll__media--bordered .curtain-roll__image:nth-child(1) {
    aspect-ratio: 37 / 23;
}

.curtain-roll__media--bordered .curtain-roll__image:nth-child(2) {
    aspect-ratio: 18 / 21;
    object-position: left;
}

@media (max-width: 768px) {
    .curtain-roll__media--bordered {
        grid-template-columns: 2fr 1fr;
    }
}

.curtain-roll__media--3d {
    grid-template-columns: 32fr 23fr 31fr;
}

@media (max-width: 768px) {
    .curtain-roll__media--3d {
        grid-template-columns: 2fr 1fr;
    }
}

.curtain-blinds {
    margin-top: 40px;
    display: grid;
    gap: 44px;
}

@media (max-width: 768px) {
    .curtain-blinds {
        margin-top: 32px;
        gap: 32px;
    }
}

.curtain-blinds__item {
    display: grid;
    gap: 16px;
}

.curtain-blinds__images {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 16px;
}

@media (max-width: 768px) {
    .curtain-blinds__images {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

.curtain-blinds__images-left,
.curtain-blinds__images-right {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px;
}

.curtain-blinds__images--wood .curtain-blinds__images-left,
.curtain-blinds__images--wood .curtain-blinds__images-right {
    align-items: end;
}

.curtain-blinds__image {
    aspect-ratio: 340 / 260;
    object-fit: cover;
    width: 100%;
    max-width: 350px;
}

.curtain-blinds__image--small {
    aspect-ratio: 115 / 90;
    width: 100%;
    max-width: 115px;
}

.curtain-blinds__image--thin {
    aspect-ratio: 350 / 205;
    width: 100%;
    max-width: 350px;
}

.curtain-blinds__image--wood-001 {
    aspect-ratio: 250 / 200;
    width: 100%;
    max-width: 250px;
}

.curtain-blinds__image--wood-002 {
    aspect-ratio: 205 / 120;
    width: 100%;
    max-width: 205px;
}

.curtain-blinds__image--wood-003 {
    aspect-ratio: 150 / 200;
    width: 100%;
    max-width: 150px;
}

.curtain-blinds__image--wood-004 {
    aspect-ratio: 200 / 135;
    width: 100%;
    max-width: 200px;
}

.curtain-blinds__figure {
    display: grid;
    grid-template-rows: auto auto;
    gap: 6px;
    margin: 0;
}

.curtain-blinds__caption {
    font-size: 21px;
    line-height: 1.25;
}

.curtain-popular {
    margin-top: 40px;
    display: grid;
    gap: 44px;
}

@media (max-width: 768px) {
    .curtain-popular {
        margin-top: 32px;
        gap: 32px;
    }
}

.curtain-popular__item {
    display: grid;
    gap: 16px;
}

.curtain-popular__images {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 768px) {
    .curtain-popular__images {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

.curtain-popular__images--single {
    justify-items: center;
}

@media (max-width: 768px) {
    .curtain-popular__images--single {
        justify-items: stretch;
    }
}

.curtain-popular__image {
    aspect-ratio: 280 / 350;
    object-fit: cover;
}

.curtain-popular__image--single {
    width: min(520px, 80%);
}

@media (max-width: 768px) {
    .curtain-popular__image--single {
        width: 100%;
    }
}

.curtain-popular__note {
    font-size: 21px;
}

/*
curtain-bg
*/
.curtain-bg-pattern-001,
.curtain-bg-pattern-002,
.curtain-bg-pattern-003,
.curtain-bg-pattern-004,
.curtain-bg-pattern-005,
.curtain-bg-pattern-006,
.curtain-bg-pattern-007 {
    position: absolute;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 768px) {

    .curtain-bg-pattern-001,
    .curtain-bg-pattern-002,
    .curtain-bg-pattern-003,
    .curtain-bg-pattern-004,
    .curtain-bg-pattern-005,
    .curtain-bg-pattern-006,
    .curtain-bg-pattern-007 {
        filter: blur(2px) opacity(0.5);
    }
}

.curtain-bg-pattern-001 {
    aspect-ratio: 225 / 380;
    top: 420px;
    left: 0px;
    width: 225px;
    height: auto;
    background-image: url("../images/curtain/bg-pattern-01.png");
    background-position: center left -30px;
}

.curtain-bg-pattern-002 {
    aspect-ratio: 180 / 280;
    top: 1300px;
    right: 0px;
    width: 180px;
    height: auto;
    background-image: url("../images/curtain/bg-pattern-02.png");
    background-position: center right -30px;
}

.curtain-bg-pattern-003 {
    aspect-ratio: 225 / 380;
    top: 1900px;
    right: 0px;
    width: 225px;
    height: auto;
    background-image: url("../images/curtain/bg-pattern-03.png");
    background-position: center right -30px;
}

.curtain-bg-pattern-004 {
    aspect-ratio: 280 / 280;
    top: 2280px;
    left: 0px;
    width: 280px;
    height: auto;
    background-image: url("../images/curtain/bg-pattern-04.png");
    background-position: center left -30px;
}

.curtain-bg-pattern-005 {
    aspect-ratio: 420 / 610;
    top: 4200px;
    left: 0px;
    width: 420px;
    height: auto;
    background-image: url("../images/curtain/bg-pattern-05.png");
    background-position: center left -70px;
}

.curtain-bg-pattern-006 {
    aspect-ratio: 410 / 160;
    top: 4550px;
    right: 0px;
    width: 410px;
    height: auto;
    background-image: url("../images/curtain/bg-pattern-06.png");
    background-position: center right -30px;
}

.curtain-bg-pattern-007 {
    aspect-ratio: 300 / 300;
    top: 6100px;
    right: 0px;
    width: 300px;
    height: auto;
    background-image: url("../images/curtain/bg-pattern-07.png");
    background-position: center right -50px;
}