@charset "UTF-8";

/* ===========================
header
===============================*/
.nav__item:first-of-type {
    display: block;
}

.nav__item:nth-of-type(3) {
    display: none;
}

/* header pc */
@media screen and (min-width: 769px) {
    .header--prodduct {
        background-color: transparent;
        backdrop-filter: blur(1px);
    }

}

/* ===========================
article header
===============================*/
.productImg__top {
    top: 10px;
    left: 3.7%;
}

.category__topic {
    margin-top: 52px;
    font-family: "Shippori Mincho B1";
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2;
    text-align: left;
    margin-left: 8%;
}

/* article header pc */
@media screen and (min-width: 769px) {
    .section__topic--shopNow {
        margin-top: 204px;
    }

    .category__topic {
        margin-top: 0;
    }
}

/* ===========================
product
===============================*/
.product-bg {
    background-image: url(../imges/product_topBg.svg);
    background-size: cover;
    background-position: center;
    width: 100%;
}

.productImg__topSP {
    margin-top: 190px;
}

.productImg__topPC {
    display: none;
}

.productImg__topPC {
    display: none;
}

.contents {
    padding: 120px 8% 0;
    text-align: center;
}

.section__txt--product {
    margin-bottom: 50px;
}

.productImg {
    display: block;
    border-radius: 0px 20px;
    width: 275px;
    height: 275px;
    object-fit: cover;
}

.productImg--1 {
    margin-right: auto;
    margin-bottom: 63px;
}

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

.product__list {
    position: relative;
}

.cart__btn {
    position: absolute;
    height: 60px;
    width: 60px;
}

.cart__btn--1 {
    bottom: 7px;
    right: 49px;
}

.cart__btn--2 {
    bottom: 8px;
    right: 11px;
}

.product__list--3,
.product__list--4,
.product__list--5,
.product__list--6 {
    display: none;
}

/* product pc */
@media screen and (min-width: 769px) {
    .contents--product {
        padding: 0 14.5%;
    }

    .productImg__topPC {
        display: block;
        position: absolute;
        top: 176px;
        right: 15%;
    }

    .productImg__topSP {
        display: none;
    }

    .productImg__topSP {
        display: none;
    }

    .productImg__topPC {
        display: block;
    }

    .product-bg {
        background-image: url(../imges/product_topBg__pc.svg);
        background-size: cover;
        background-position: center;
        width: 100%;
    }

    .category__topic {
        font-size: 2.4rem;
        font-style: normal;
        font-weight: 500;
        line-height: 2;
    }

    .section__txt--product {
        margin-bottom: 100px;
    }

    .product__box {
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }

    .cart__btn {
        position: absolute;
        top: 162px;
        left: 197px;
        height: 86px;
        width: 86px;
    }

    .product__list {
        display: flex;
        flex-wrap: wrap-reverse;
    }

    .product__list--3,
    .product__list--4,
    .product__list--5,
    .product__list--6 {
        display: block;
    }

    .product__list {
        width: calc(100%/3);
        height: auto;
        display: flex;
        flex-direction: column;
        flex-direction: row;
    }

    .productImg {
        width: 293px;
        height: 254px;
    }

}

/* fade in */
/* 初期状態で非表示にする設定 */
.productImg,
.cart__btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px); /* 下にずらしておく */
    transition: opacity 3s, transform 0.5s; /* アニメーションのためのトランジション */
}

.fadeUp {
    opacity: 1;
    visibility: visible;
    animation: fadeUp 3s forwards;
}


@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* product pc 769px */



/* ===========================
customOrder
===============================*/
.section__txt--customOrder {
    color: var(--primary-white, #F5F5F5);
    font-family: "Shippori Mincho B1";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2;
    text-align: left;
    margin-top: 70px;
}

.order_arrowPc {
    display: none;
}

.section__topicUnder {
    padding-top: 30px;
}

.contents--customOrder {
    padding: 0 13.6% 55px;
    background-image: url(../imges/product_orderBg.svg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 134px;
    position: relative;
}

.section__topic--customOrder {
    margin-top: 134px;
    position: absolute;
    margin: 0;
    right: 0;
    left: 0;
    top: -15px;
}

.group__topic {
    margin: 50px auto;
    color: var(--primary-white, #F5F5F5);
    text-align: center;
    font-family: "Shippori Mincho B1";
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
}

.order__txt {
    color: var(--primary-white);
    font-family: "Shippori Mincho B1";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2;
    margin-top: 20px;
    position: relative;
}

/* customOrder pc */
@media screen and (min-width: 769px) {
    .group__topic {
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1.2;
        margin-top: 105px;
    }

    .section__topic--customOrder {
        top: -25px;
    }

    .section__txt--customOrder {
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 2;
        text-align: center;
        margin: 105px auto 0;
    }

    .order_arrowSp {
        display: none;
    }

    .order_arrowPc {
        display: block;
    }

    .delivery__list {
        display: flex;
        align-items: center
    }

    .delivery__listGroup {
        display: flex;
        align-items: center;
        gap: 50px;
        margin: 124px auto 88px;
    }

    .order__txt {
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 2;
        text-align: left;
    }

}
/* customOrder pc 769px */



/* ===========================
article__footer--order
===============================*/
.article__footer--order {
    color: var(--primary-white, #F5F5F5);
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.2;
    background-color: var(--primary-maincolor);
    border-top: solid 3px var(--primary-white);
    padding: 120px 8% 105px;
}

.form__topic {
    text-align: center;
}

.form__parts {
    margin-top: 40px;
}

.form__parts:first-of-type {
    margin-top: 100px;
}


input[type="text"],
input[type="email"],
input[type="date"],
textarea {
    background-color: var(--primary-white);
    color: #333333;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
    gap: 13px 20px;
}


input[type="checkbox"] {
    width: 16px;
    height: 16px;
    background: var(--primary-white);
    margin-bottom: 12px;
    margin-top: 12px;
    margin-right: 4px;
}

input[type="checkbox"]:checked {
    position: relative;
}

input[type="checkbox"]:checked::after {
    display: inline-block;
    content: '';
    width: 10px;
    height: 5px;
    border-left: 2px solid var(--primary-maincolor, #B8B6AF);
    border-bottom: 2px solid var(--primary-maincolor, #B8B6AF);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}


/* article__footer--order pc */
@media screen and (min-width: 769px) {
    .article__footer--order {
        font-size: 1.6rem;
        font-weight: 300;
        line-height: 1.2;
        border-top: none;
        padding: 120px 28% 202px;
    }
}

/* ===========================
footer
===============================*/
.footer {
    background-color: var(--primary-white);
}