@charset "utf-8";

.firstview {
    width: 100%;
    padding: 0;
}

.parallax_section {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.background_img_01 {
    background-image: url('../images/firstview/firstview_sp.jpg');
}

.background_img_02 {
    background-image: url('../images/firstview/firstview_sp2.jpg');
}

.parallax_section {
    /* background-attachment: scroll;
    background-position: center;
    background-size: cover; */
}

@supports (-webkit-touch-callout: none) {

    /* iOS専用：fixedを外す */
    .parallax_section {
        background-attachment: scroll !important;
    }
}


/* #about */
#about {
    max-width: 1000px;

    h1 {
        width: 2.5em;
        margin: 5% auto;
    }

    h2 {
        margin: 0 0 20px auto;
    }

    div[class*="__textarea"] {
        margin: 0 auto 50px;
    }


}

.about__text {
    display: flex;
    flex-direction: column;
    gap: 10px;

    p {
        font-size: 1.6rem;
    }
}

.about__btn {
    width: 140px;
    position: relative;
    margin: 10px 0 10px auto;

    a {
        display: block;
        width: 100%;
        line-height: 3;
        font-size: 1.6rem;
        color: #C69C6D;

    }

    a::after {
        content: "";
        display: block;
        width: 40px;
        height: 1px;
        background-color: #C69C6D;
        position: absolute;
        top: 50%;
        right: 0;
    }
}

.about__img {
    margin: auto 0 0;

    img {
        width: 100%;

    }
}


/* news */
#news {
    max-width: 1000px;

    .news__wrapper {
        width: min(100%, 720px);
        margin: 0 auto;
        padding: 20px 0;
        background-color: rgba(255, 255, 255, .5);


        .news__textarea {
            dt {
                padding: 20px 20px 0;
                margin: 0 20px;
                border-bottom: 1px solid #C69C6D;
                position: relative;
                transition-duration: 500ms;

                p {
                    font-size: 1.8rem;
                    line-height: 2;


                }

                p:last-of-type {
                    margin: 0 0 0 10px;
                }

            }

            dt:hover {
                border-left: 10px solid #C69C6D;
                margin: 0;

                p {
                    color: #C69C6D;
                }
            }

            dd {
                display: none;
                background-color: #fff;
                width: 100%;
                border-bottom: 1px solid #C69C6D;
                margin: 0 auto 10px;

                p {
                    font-size: 1.6rem;
                    padding: 5%;

                    .snslink {
                        display: inline;
                        background-color: initial;
                        padding: 0;
                        color: #C69C6D;
                        border-bottom: 1px solid #C69C6D;

                    }

                    .snslink:hover {
                        color: #4d4d4d;
                        border-color: #4d4d4d;
                    }
                }

                a {
                    display: block;
                    background-color: rgba(198, 156, 109, .1);
                    width: 100%;
                    font-size: 1.6rem;
                    padding: 10px 40px;
                    text-align: right;
                }

                a:hover {
                    color: #C69C6D;
                }
            }

            dd.open {
                display: block;
            }
        }
    }

    .news__more-btn {
        margin: 30px 0 30px auto;
        width: 140px;
        height: 30px;
        line-height: 2;
        text-align: end;
        border-bottom: 1px solid #C69C6D;

        a {
            display: block;
            width: 100%;
            height: 100%;
            font-size: 1.6rem;
        }

        a:hover {
            color: #C69C6D;
        }
    }
}

/* products */
.products {
    width: min(100%, 1200px);
    position: relative;

    .products__nav {
        width: 200px;
        position: sticky;
        top: 60px;
        z-index: 999;
        margin: 0 0 0 auto;

        ul {
            .products__nav-btn {
                display: block;
                font-size: 1.6rem;
                text-align: center;
                color: #fff;
                padding: .8em;
                z-index: 1;
            }

            .products__nav-btn::after {
                content: "▼";
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                padding: .8em;
                transition: all 0.4s ease;
            }

            .products__nav-btn:hover {
                background-color: #fff;
                color: #C69C6D;
                cursor: pointer;
            }

            .products__nav-btn.open::after {
                display: inline-block;
                transform: scale(1, -1);
            }


            li {
                width: 200px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #C69C6D;

                a {
                    display: block;
                    width: 100%;
                    color: #fff;
                    font-size: 1.6rem;
                    text-align: center;
                    line-height: 3;
                }

                a:hover {
                    background-color: #fff;
                    color: #C69C6D;
                }

                a:hover .products__nav-btn {
                    color: #C69C6D;
                }
            }

            .products__nav-toggle {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s ease;
            }

        }
    }

    .series-list {
        display: flex;
        gap: 1em;
        flex-wrap: wrap;
        margin: 2% 0;

        li {
            width: calc((100% - 1.5em) / 3);
            padding: 2%;
            font-size: 1.4rem;
            font-weight: 900;
            color: #4D4D4D;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: normal;
            border: 1px solid #C69C6D;
            background-color: rgba(255, 255, 255, 0.6);
            background-blend-mode: lighten;
            background-size: cover;
            background-repeat: no-repeat;
            transition-duration: 500ms;
            position: relative;
        }

        li::after {
            content: "";
            position: absolute;
            right: -10px;
            bottom: -3px;
            width: 0;
            height: 0;
            border-style: solid;
            border-right: 15px solid transparent;
            border-left: 15px solid transparent;
            border-bottom: 15px solid #c69c60;
            border-top: 0;
            transform: rotate(135deg);
        }


        li:nth-of-type(2) {
            background-image: url(../images/about/about_img_2.jpg);

        }

        li:nth-of-type(3) {
            background-image: url(../images/about/about2__1-hurosiki.jpg);
        }

        li:nth-of-type(4) {
            background-image: url(../images/about/about_img_1.jpg);
        }

        li:nth-of-type(5) {
            background-image: url(../images/about/index5_img.jpg);
        }

        li:nth-of-type(6) {
            background-image: url(../images/about/about_img_3.jpg);
        }

        li:hover {
            background-color: rgba(255, 255, 255, .9);
            color: #C69C6D;
            cursor: pointer;
        }

        li.on {
            background-color: rgba(255, 255, 255, .9);
            color: #C69C6D;
        }
    }

    .series-list.l2 {
        li {
            width: calc((100% - 1.5em) / 2);
            white-space: nowrap;
        }

        li:last-of-type {
            width: fit-content;
        }
    }

    .grid {
        position: relative;
        width: min(100%, 1200px);
        height: 1000px;
        margin: 0 auto;

        .grid__item {
            position: absolute;
            top: 0;
            left: 0;
            margin: 1%;
            padding: 3%;
            width: 100%;
            background-color: rgba(255, 255, 255, .5);

            .products__view {
                display: flex;
                justify-content: space-between;
                flex-direction: row-reverse;

                .products__name {
                    -ms-writing-mode: tb-rl;
                    writing-mode: vertical-rl;
                    padding: 3%;
                    border-right: 1px solid #C69C6D;
                    border-left: 1px solid #C69C6D;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    ruby {
                        font-size: 2.4rem;
                        font-weight: 500;
                        line-height: 1.5;
                        white-space: nowrap;

                        rt {
                            font-size: 1.4rem;
                            padding: 0 0 0 .1em;
                        }
                    }

                    .products__brand {
                        display: flex;
                        flex-direction: column;
                        margin: 1em auto;
                        white-space: nowrap;

                    }

                    .products__btn {
                        display: block;
                        width: 40px;
                        height: 40px;
                        margin: 0 auto;
                        background-color: #fff;
                        border: 1px solid #C69C6D;
                        padding: 21px 5px;

                    }

                    .products__btn::before,
                    .products__btn::after {
                        content: "";
                        display: block;
                        width: 17px;
                        height: 1px;
                        background-color: #C69C6D;
                        transform: rotate(-45deg);
                        transition: all 0.4s ease;
                    }

                    .products__btn::after {
                        transform: translate(6px, 0) rotate(45deg);
                    }

                    .products__btn:hover {
                        background-color: rgba(198, 156, 109, .1);
                        cursor: pointer;
                    }

                    .products__btn.click::before,
                    .products__btn.click::after {
                        scale: 1 -1;
                    }
                }

                .products__img {
                    text-align: center;
                    margin: auto;
                }
            }

            .products__in {
                display: none;
                width: 100%;
                margin: 3% 0 0 0;
                background-color: rgba(198, 156, 109, .2);
                text-align: center;
                border-bottom: 1px solid #C69C6D;
                max-height: 0;
                overflow: hidden;

                dl {
                    color: #C69C6D;
                    display: grid;
                    gap: 0 5%;
                    font-size: 2.2rem;
                    text-align: center;
                    margin: 3% 10%;
                    line-height: 1.5;

                    dt,
                    dd {
                        font-weight: 500;
                    }

                    dt {
                        grid-row: 1 / 2;
                        border-bottom: 1px solid #fff;
                        font-size: 2.6rem;
                    }

                    dt::after {
                        content: "kg";
                        font-size: 2rem;
                        padding: 5px;
                    }

                    .gram::after {
                        content: "g";
                    }

                    dd::before {
                        content: "¥";
                        font-size: 1.8rem;
                        padding: 5px;
                    }
                }

                p {
                    display: block;
                    padding: 3% 5%;
                    font-size: 1.4rem;
                    text-align: left;
                    line-height: 1.8;
                    background-color: rgba(255, 255, 255, .5);
                }
            }

            .products__in.open {
                display: block;
                max-height: 900px;
                animation: in 1s;
            }
        }
    }

    /* map */
    .grid__title {
        position: absolute;
        left: 0;
        right: 0;
    }
}

/* howto共通 */
.grid__title {
    width: min(100%, 600px);
    margin: auto;
    background-color: #fff;
    border: 1px solid #C69C6D;
    text-align: center;
    position: relative;


    h3 {
        line-height: 2;
        padding: 10px 20px 0;
        font-size: clamp(1.4rem, calc(1rem + 0.625vw), 2.4rem);
        font-weight: 900;
    }

    p {
        font-size: clamp(1.4rem, calc(1rem + 0.625vw), 1.6rem);
        padding: 0 10px 10px;

        br {
            @media screen and (max-width: 768px) {
                display: none;
            }
        }
    }
}

.grid__title::after {
    top: initial;
    bottom: 0;
    right: 0;
}

@keyframes in {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 贈り方 */
#howto {
    width: min(100%, 1200px);

    /* 3つを縦に並べて間を５em */
    .howto__wrapper {
        display: flex;
        flex-direction: column;
        gap: 2em;
    }

    /* pc横sp縦のセクションに共通で.flexboxをつけた */
    .flexbox {
        display: flex;
        justify-content: center;
        align-items: start;
        gap: 2em;

        @media screen and (max-width: 768px) {
            flex-direction: column;
        }
    }

    /* 配送方法　共通css */
    .textarea {
        padding: 3%;
        background-color: rgba(255, 255, 255, .5);

        h5 {
            width: 100%;
            line-height: 3;
            font-weight: bold;
            border-bottom: 1px solid #C69C6D;
            padding: 0 0 0 20px;
            position: relative;
            margin: auto;
        }

        h5::before {
            content: "";
            width: 15px;
            height: 15px;
            background-color: #C69C6D;
            position: absolute;
            top: 40%;
            left: 0;
        }
    }

    /* 3つあるセクションの各アイテムの名前↓ */
    .howto__contents {

        .grid__title {
            margin-bottom: 1%;
        }

        /* 1購入方法 */
        .howto__buy {
            width: 100%;
            min-width: 225px;
            background-color: rgba(255, 255, 255, .5);

            .howto__buytitle {
                line-height: 2;
                background-color: rgba(198, 156, 109, .1);
                color: #4d4d4d;
                text-align: center;
                border-bottom: 1PX solid #C69C6D;
            }

            .icon {
                margin: 5% auto 0;
                display: flex;
                justify-content: center;
            }

            p {
                font-size: 1.6rem;
                margin: 4%;

                @media screen and (min-width : 768px) {
                    height: 120px;
                }
            }

            .howto__infor {
                height: 150px;
                padding: 2% 4%;
                background-color: #C69C6D;
                color: #fff;

                dt {
                    width: 100%;
                    font-size: 2rem;
                    line-height: 2;
                    text-align: center;
                    border-bottom: 1px solid #fff;
                }


                dd {
                    font-size: 1.4rem;
                    margin: 2% 4% 4%;

                    .tel {
                        font-size: 2.4rem;
                        color: #fff;
                    }
                }

                .howto__infor-online {
                    display: block;
                    font-size: 1.6rem;
                    line-height: 3;
                    color: #fff;
                    border-bottom: 1px solid #fff;
                    margin: auto;
                    text-align: left;
                    position: relative;


                }

                .howto__infor-online:hover {
                    color: #E3CDB6;

                    .linkicon {
                        stroke: #E3CDB6;
                    }
                }
            }
        }

        /* 2配送について */
        .howto__delivery {

            /* 配送方法各３つ */
            .howto__type {
                width: 100%;

                dl {
                    margin-left: 1.6rem;

                    dt {
                        line-height: 2;
                    }

                    dt::before {
                        content: "・";
                        color: #C69C6D;
                    }

                    dd {
                        font-size: 1.4rem;
                        margin: 0 0 1em 2.5em;
                    }
                }

                a {
                    display: block;
                    width: fit-content;
                    margin-left: auto;
                    line-height: 3;
                    text-align: end;
                    border-bottom: 1px solid #C69C6D;
                }

                a:hover {
                    color: #c69c6d;
                }
            }
        }

        /* 配送スケジュール */
        #howto__delivery-schedule {
            .howto__delivery-day {
                .day-textarea {
                    flex-wrap: wrap;
                    flex-direction: row;
                    align-items: end;

                    .day__map {
                        width: max(40%, 200px);
                        margin: 1rem auto;
                    }

                    .day-list {
                        width: 280px;
                        display: grid;

                        dt {
                            grid-column: 1 / 2;
                            margin: 0 0 0 20px;
                            position: relative;
                        }

                        dt::before {
                            content: "";
                            display: block;
                            width: 15px;
                            height: 15px;
                            position: absolute;
                            top: 7px;
                            left: -20px;
                        }

                        dt:first-of-type:before {
                            background-color: #A7C8E2;
                        }

                        dt:nth-of-type(2):before {
                            background-color: #CBE9B3;
                        }

                        dt:last-of-type:before {
                            background-color: #EAB3B3;
                        }

                        dd {
                            grid-column: 2 / 3;
                            font-size: 1.6rem;
                            text-align: end;
                        }

                        dd::before {
                            content: ":";
                            font-size: 1.6rem;
                            margin: 0 .5em 0 0;
                        }

                        p {
                            grid-column: 2 / 3;
                            text-align: right;
                        }

                    }
                }
            }

            .howto__delivery-time {
                .time-chart {
                    width: 100%;
                    max-width: 330px;
                    margin: 1em 0;
                    border: 1px solid #C69C6D;

                    h5 {
                        width: fit-content;
                        margin: 0 .4em;
                        font-size: 1.5rem;
                        white-space: nowrap;
                    }

                    table {
                        margin: 1em .8em;

                        tbody {
                            width: 100%;

                            tr {
                                display: grid;
                                grid-template-columns: 1fr 2fr;
                                gap: .5em .8em;
                                font-size: 1.6rem;
                                text-align: center;

                                th {
                                    grid-column: 1 / 2;
                                    grid-row: 1 / 3;
                                    padding: 0 .8em 0 0;
                                    display: flex;
                                    justify-content: left;
                                    align-items: center;
                                    color: #C69C6D;
                                    border-right: 1px solid #c69c6d;
                                    position: relative;

                                }

                                th::after {
                                    content: "";
                                    display: block;
                                    width: 11px;
                                    height: 11px;
                                    background: #C69C6D;
                                    position: absolute;
                                    top: 50%;
                                    right: -6px;
                                    transform: translate(0, -50%);
                                }

                                td:first-of-type {
                                    grid-column: 2 / 3;
                                    grid-row: 1 / 2;
                                    line-height: 3;
                                    background-color: #C69C6D;
                                    color: #fff;
                                }

                                td:last-of-type {
                                    grid-column: 2 / 3;
                                    grid-row: 2 / 3;
                                    line-height: 3;
                                    background-color: rgba(198, 156, 109, .2);
                                    color: #C69C6D;
                                }
                            }
                        }


                    }
                }
            }
        }

        /* 配送料金 */
        #howto__delivery-charge {

            .charge-standard,
            .charge-Subsc {
                width: 100%;
            }

            .charge {
                width: 100%;

                tr {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 10px 5px;
                    font-size: 1.6rem;
                    text-align: center;

                    th {
                        grid-column: 1 / 3;
                        grid-row: 1 / 2;
                        padding: 10px 0;
                        color: #C69C6D;
                        border-bottom: 1px solid #c69c6d;
                        position: relative;
                    }

                    th::after {
                        content: "";
                        display: block;
                        width: 11px;
                        height: 11px;
                        background: #C69C6D;
                        position: absolute;
                        left: 50%;
                        bottom: -6px;
                        transform: translate(-50%, 0);
                    }

                    td:first-of-type {
                        grid-column: 1 / 2;
                        grid-row: 2 / 2;
                        line-height: 3;
                        padding: 5%;
                        background-color: #C69C6D;
                        color: #fff;
                    }

                    td:last-of-type {
                        grid-column: 2 / 3;
                        grid-row: 2 / 2;
                        line-height: 3;
                        padding: 5%;
                        background-color: rgba(198, 156, 109, .2);
                        color: #C69C6D;
                    }
                }
            }

            .tablesmall {
                text-align: right;
            }

            .charge-Subsc {
                dl {
                    margin: 1em 2em;

                    dd {
                        padding: 1em 0;
                        font-size: 1.6rem;


                        a {
                            width: 100%;
                            margin: 0;
                            text-align: center;
                            line-height: 3;
                            background: rgba(198, 156, 109, .1);

                            path {
                                stroke: #000;
                            }
                        }

                        a:hover {
                            color: #c69c6d;

                            svg {
                                path {
                                    stroke: #C69C6D;
                                }
                            }
                        }
                    }

                    p {
                        text-align: left;

                        br {
                            display: none;
                        }

                        @media screen and (min-width : 768px) {
                            br {
                                display: block;
                            }
                        }

                    }
                }
            }

            .charge-gift {
                dl {
                    max-width: 410px;

                    dt {
                        line-height: 2;
                        border-bottom: 1px solid #C69C6D;
                        margin: 5px 0;
                    }

                    dd {
                        display: flex;
                        gap: 10px;

                        figure {
                            width: min(50%, 200px);

                            figcaption {
                                font-size: 1.6rem;
                                line-height: 1.5;
                                color: #C69C6D;
                                text-align: center;
                            }
                        }
                    }
                }

                br {
                    @media screen and (min-width : 768px) {
                        display: none;
                    }
                }
            }
        }
    }

    #howto__return {
        dl {
            dt {
                color: #C69C6D;
            }

            dd {
                font-size: 1.4rem;
                margin: 0 0 3% 1.4em;
            }
        }
    }
}



@media screen and (min-width : 768px) {
    .parallax_section {
        margin: 0 0 0 0;
    }

    .background_img_01 {
        background-image: url('../images/firstview/slider1_logo.png'), url('../images/firstview/slider1.jpg');
    }

    .background_img_02 {
        background-image: url('../images/firstview/slider2_logo.png'), url('../images/firstview/slider2.jpg');
    }

    /* #about */
    .about__textwrapper {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: row-reverse;

        div[class*="about__textarea"] {
            width: 300px;
            height: 850px;
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;

            .about__text {
                justify-content: center;
                align-items: flex-start;
                flex-direction: row-reverse;
                gap: 30px;
                margin: 0 50%;
            }

            div[class^="about__"] p {
                -ms-writing-mode: tb-rl;
                writing-mode: vertical-rl;
                font-size: 2rem;
                letter-spacing: .1em;
            }

            .about__btn {
                width: 60px;
                height: 624px;
                grid-column: 1 / 2;
                grid-row: 1 / 2;
                display: flex;
                align-items: flex-end;

                a {
                    height: 230px;
                    -ms-writing-mode: tb-rl;
                    writing-mode: vertical-rl;
                    font-size: 1.6rem;
                    line-height: 2.5;
                    letter-spacing: .1em;
                    color: #C69C6D;
                    padding: 10px;
                    margin: 0 auto;
                    position: relative;
                }

                a::after {
                    rotate: 90deg;
                    position: absolute;
                    top: calc(100% - 20px);
                    left: 10px;
                    right: 10px;
                    bottom: 0;
                }

                a:hover {
                    background-color: #C69C6D;
                    color: #fff;
                }

                a:hover::after {
                    background-color: #fff;
                }
            }

            .about__img {
                width: 100%;
                grid-column: 1 / 4;
                grid-row: 2 / 3;
            }
        }
    }

    .news__textarea dt {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .products {
        .products__nav {
            top: 80px;
        }

        .series-list {
            position: sticky;
            top: 0;
            z-index: 1;
            width: 100%;
            flex-wrap: nowrap;

            li {
                height: 70px;
                padding: 1em 1%;
            }

            li:first-of-type {
                width: fit-content;
                white-space: nowrap;
            }
        }

        .series-list.l2 {
            li {
                flex: 0 1 auto;
                min-width: fit-content;
            }

            li:not(:first-of-type) {
                width: inherit;
            }
        }

        .grid {
            .grid__item {
                width: calc((100% - 50px) / 2);
            }
        }
    }

    .howto__delivery {
        .textarea {
            .howto__type:last-of-type {
                dl {
                    margin: 0 0 40px 16px;
                }
            }
        }
    }

    #howto__delivery-charge {

        .charge-Subsc {
            grid-column: 2 / 3;

        }

        .charge-gift {
            grid-column: 1 / 3;
            display: grid;

            h5 {
                grid-column: 1 / 3;
            }

            dl:first-of-type {
                grid-column: 1 / 2;
            }

            dl:last-of-type {
                grid-column: 2 / 3;

            }
        }
    }

    #howto__delivery-schedule {
        .howto__delivery-day {
            width: initial;
            max-width: 550px;
            margin: 0 auto 0 0;

            .howto__map-text {
                width: 270px;
                margin: auto 0;
            }
        }

        .howto__delivery-time {
            margin: 4rem auto 0 0;
        }
    }

    #howto__return {
        dl {
            display: grid;

            dt {
                grid-row: 1 / 2;
            }
        }
    }
}