body {
    font-weight: 400;
}

.temp-all-area {
    font-family: Lato, "Noto Sans JP", "Hiragino Kaku Gothic Pro",
        "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",
        sans-serif;
    font-weight: 400;
    text-align: justify;
}

.temp-all-area h2,
h3,
h4,
h5,
p,
ul,
figure {
    margin: 0;
    padding: 0;
}

.temp-all-area a {
    text-decoration: none;
    color: #3c3c3c;
}

.temp-all-area li {
    list-style: none;
}

.temp-all-area img {
    width: 100%;
}


/* フォント選択 */

.Nserif {
    font-family: "Noto Serif JP", serif;
}

.Tenor {
    font-family: "Tenor Sans", sans-serif;
}

.Mincho {
    font-family: 游明朝, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
        "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.Gothic {
    font-family: 游ゴシック, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
        游ゴシック, "Yu Gothic", sans-serif;
}


@media screen and (max-width: 767px) {
    /*767px以下で非表示*/

    .pc-hide {
        display: none;
        /*非表示*/
    }

    /* 独自コメント1と11 */
    .product_comment-1,
    .product_comment-2 {
        display: block;
    }
}

@media screen and (min-width: 768px) {
    /*768px以上で非表示*/

    .sp-hide {
        display: none;
        /*非表示*/
    }
}

/* 下部アイテムリスト用 */

#floting-bt {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10;
}

#floting-bt a {
    display: block;
    width: 80px;
    height: 80px;
    color: #fff;
    font-size: 11px;
    line-height: 1.625;
    text-align: center;
    background: #4c6f50;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: rgb(0 0 0 / 30%) 0px 19px 38px, rgb(0 0 0 / 22%) 0px 15px 12px;
    transition: all 0.3s ease;
}

#floting-bt a img {
    border-radius: 50%;
}

@media screen and (min-width: 768px) {

    #floting-bt {
        position: fixed;
        right: 2rem;
        bottom: 2rem;
        z-index: 10;
    }

    #floting-bt a {
        width: 100px;
        height: 100px;
        font-size: .875rem;
    }

}

/* 下部アイテムリスト用 */

#floting-bt {
    bottom: 120px;
}

#floting-link {
    position: fixed;
    right: 14px;
    bottom: 20px;
    z-index: 1000;
}

#floting-link a {
    display: block;
    width: 120px;
    transition: all 0.3s ease;
}

@media screen and (min-width: 768px) {
    #floting-link {
        position: fixed;
        right: 27px;
        bottom: 8px;
    }

    #floting-link a {
        width: 100px;
        height: 100px;
        font-size: 0.875rem;
    }
}

@media screen and (min-width: 768px) {
    #floting-link a {
        width: 150px;
    }
}


/* 共通 */

.temp-all-area .red_font {
    color: #C46549;
}

.temp-all-area .inner {
    margin: 0 auto 80px;
    position: relative;
}

.temp-all-area p {
    font-size: 14px;
    line-height: 1.8;
}

.temp-all-area .head {
    text-align: center;
    margin: 0 0 40px;
}

.temp-all-area .head h2 {
    margin: 0 0 30px;
    font-weight: 400;
    position: relative;
    font-size: 22px;
    line-height: 1.8;
}

.temp-all-area .head .en-title {
    font-size: 24px;
    letter-spacing: 3px;
}

.temp-all-area .head .ja-title {
    font-size: 12px;
}


@media screen and (min-width: 768px) {
    .temp-all-area .inner {
        margin: 0 auto 150px;
        position: relative;
    }

    .temp-all-area p {
        font-size: 16px;
    }

    .temp-all-area .head {
        text-align: center;
        margin: 0 0 80px;
    }

    .temp-all-area .head .en-title {
        font-size: 35px;
    }

    .temp-all-area .head .ja-title {
        font-size: 14px;
    }
}

.top2_area .inner {
    max-width: 705px;
}

.top2_area h2 {
    font-size: 16px;
    text-align: center;
    font-weight: 300;
    line-height: 2;
    letter-spacing: 4px;
    margin: 0 0 50px;
}

.top2_area figure {
    padding: 0 40px;
}

.lead_area .inner {
    max-width: 1366px;
}

.lead_area .conts p {
    padding: 0 40px;
    line-height: 2;
}

@media screen and (min-width: 768px) {
    .lead_area .conts p {
        position: absolute;
        bottom: 22%;
        right: 10%;
    }
}



.reason_area .inner {
    padding: 60px 10px;
    background: #faf8f2;
}

.reason_area .head figure {
    width: 50%;
    margin: 0 auto;
}

.reason_area .head p {
    font-weight: 300;
    margin: 20px 0 0;
    letter-spacing: 3px;
    font-size: 16px;
}

.reason_area .reason_wrap {
    display: flex;
    flex-direction: column;
    gap: 50px 0;
}

.reason_area .inner_icon {
    text-align: center;
    font-size: 42px;
    font-weight: 300;
    color: #a07e61;
    margin: 0 0 20px;
}

.reason_area .inner_box figure {
    width: 90%;
    margin: 0 0 0 auto;
}

.reason_area .inner_box .conts {
    width: 78%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    background-color: #fff;
    margin: -20% 0 0;
    position: relative;
    z-index: 1;
    box-shadow: rgb(17 17 26 / 10%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 32px;
}

.reason_area .reason_box:nth-child(even) figure {
    margin: 0 auto 0 0;
}

.reason_area .reason_box:nth-child(even) .conts {
    margin: -20% 0 0 auto;
}

.reason_area .inner_box .conts p {
    font-weight: 500;
    line-height: 2.5;
}

@media screen and (min-width: 768px) {
    .reason_area .inner {
        padding: 80px 10%;
        max-width: 1000px;
    }

    .reason_area .head figure {
        max-width: 187px;
    }

    .reason_area .head p {
        font-size: 20px;
    }

    .reason_area .reason_wrap {
        gap: 100px 0;
    }

    .reason_area .reason_box {
        position: relative;
    }

    .reason_area .inner_box figure {
        width: 60%;
    }

    .reason_area .reason_box:nth-child(odd) .inner_icon {
        position: absolute;
        width: 40%;
        left: 20px;
        top: 42px;
    }

    .reason_area .reason_box:nth-child(even) .inner_icon {
        position: absolute;
        width: 40%;
        right: 20px;
        top: 42px;
    }

    .reason_area .reason_box:nth-child(odd) .inner_box .conts {
        width: 40%;
        margin: -16% 0 0 20px;
    }

    .reason_area .reason_box:nth-child(even) .inner_box .conts {
        width: 40%;
        margin: -16% 20px 0 auto;
    }

    .reason_area .inner_icon {
        font-size: 54px;
    }
}

/* point_area */
.point_area {
    overflow: hidden;
}

.point_area .inner {
    max-width: 1161px;
}

.point_area .head {
    margin: 0 0 60px;
}

.point_area .point_wrap {
    display: flex;
    flex-direction: column;
    gap: 100px 0;
    padding: 0 20px;
}

.point_area .conts .point_no {
    width: 90px;
    height: 90px;
    line-height: 90px;
    font-size: 15px;
    position: absolute;
    margin: 0;
    border-radius: 50%;
    color: #fff;
    background: #a7baa9;
    text-align: center;
}

.point_area .point_box:nth-child(odd) .point_no {
    top: -45px;
    left: 0;
}

.point_area .point_box:nth-child(even) .point_no {
    top: -45px;
    right: 0;
}

.point_area .conts h3 {
    font-size: 18px;
    line-height: 2;
    margin: 70px 0 25px 0;
    font-weight: 500;
    letter-spacing: 3px;
}

.point_area .point_box {
    position: relative;
}

.point_area .point_box figure {
    position: relative;
}



.point_area .point_box:nth-child(odd) figure:before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
    top: 15%;
    left: 50px;
    background-color: #f5f8f4;
    z-index: -1;
}

.point_area .point_box:nth-child(even) figure:before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
    top: 15%;
    right: 50px;
    background-color: #f5f8f4;
    z-index: -1;
}



.point_area .point_box:nth-child(odd) .obj-text {
    position: absolute;
    font-size: 34px;
    top: -25px;
    right: 0;
    font-weight: 100;
}

.point_area .point_box:nth-child(even) .obj-text {
    position: absolute;
    font-size: 34px;
    top: -25px;
    left: 0;
    font-weight: 100;
}


.point_area .point_box figure img {
    box-shadow: rgb(0 0 0 / 20%) 0px 18px 50px -10px;
}


@media screen and (min-width: 768px) {
    .point_area .point_wrap {
        gap: 200px 0;
    }

    .point_area .point_box {
        display: flex;
        gap: 0 5%;
    }

    .point_area .point_box:nth-child(odd) {
        flex-direction: row-reverse;
    }



    .point_area .point_box figure {
        width: 60%;
    }

    .point_area .inner .point_box figure:before {
        content: none;
    }

    .point_area .point_box:nth-child(odd):before {
        content: "";
        position: absolute;
        width: 100vw;
        height: 100%;
        top: 15%;
        left: 50px;
        background-color: #f5f8f4;
        z-index: -1;
    }

    .point_area .point_box:nth-child(even):before {
        content: "";
        position: absolute;
        width: 100vw;
        height: 100%;
        top: 15%;
        right: 50px;
        background-color: #f5f8f4;
        z-index: -1;
    }

    .point_area .point_box .conts {
        flex: 1;
        margin: 80px 0 0;
    }

    .point_area .conts h3 {
        font-size: 22px;
    }

    .point_area .conts .point_no {
        width: 150px;
        height: 150px;
        line-height: 150px;
        font-size: 24px;
    }

    .point_area .point_box:nth-child(odd) .obj-text {
        font-size: 56px;
        top: -12%;
    }

    .point_area .point_box:nth-child(even) .obj-text {
        font-size: 56px;
        top: -12%;
    }
}

.how-to-area .inner {
    margin: 0 auto;
}

.how-to-area .how-to_text {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 0 0 2rem
}


.how-to-area .how-to_text h3 {
    position: relative;
    text-align: center;
    padding: 0 0 2rem;
    font-size: 17px;
}

.how-to-area .how-to_text h3::after {
    content: '';
    width: 40px;
    height: 6px;
    background: #e7dab8;
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.how-to-area .how-to_text p {
    font-size: 13px;
    font-weight: 500;
}

.how-to-area .how-to-more {
    margin: 0 auto 40px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 0.1rem;
    line-height: 1.5;
    position: relative;
}

.how-to-area .how-to-more::before {
    content: "";
    border-top: 1px dashed #707070;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
}

.how-to-area .how-to-more p {
    background-color: #fff;
    position: relative;
    padding: 0 10px;
    display: inline-block;
    margin: 0;
}



@media screen and (min-width: 768px) {
    .how-to-area .how-to_mainflex {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 5%;
        padding: 0 20px;
    }

    .how-to-area .center-image {
        width: 30%;
        margin: 0 0 .5rem;
        padding: 0 0 0 20%;
    }

    .how-to-area .center-image .orcle-obj {
        left: 0rem;
    }

    .how-to-area .how-to_text {
        width: 50%;
        padding: 0;
        margin: 0;
    }

    .temp-all-area .how-to-area .how-to_text h3 {
        text-align: left;
        font-size: 18px;
    }

    .temp-all-area .how-to-area .how-to_text h3::after {
        left: 0;
        transform: translate(0, 0);
    }



    .how-to-area .how-to_text p {
        font-size: 14px;
    }

    .how-to-area .how-to-center-flex {
        justify-content: center;
        gap: 0 5%;
        flex-wrap: nowrap;
        padding: 0 20px;
    }

    .how-to-area .how-to-herf-flex {
        justify-content: center;
        gap: 0 5%;
        flex-wrap: nowrap;
        padding: 0 20px;
        align-items: center;
    }

    .how-to-area .how-to-herf-flex .how-to-herf-img .image {
        width: 71%;
        padding: 0 0 0 22%;
        justify-content: flex-start;
    }

    .how-to-area .how-to-herf-flex .how-to-herf-text h3 {
        text-align: left;
        font-size: 18px;
    }

    .how-to-area .how-to-herf-flex .how-to-herf-text h3::after {
        left: 0;
        transform: translate(0, 0);
    }
}


.how-to-area .head .en-title {
    font-size: 35px;
}

@media only screen and (max-width: 767px) {
    .how-to-area .head .en-title {
        font-size: 24px;
    }
}


.ranking_area .inner {
    max-width: 1366px;
}

.review-area {
    background: none;
    padding: 0;
}


.review-area .review-box {
    background: #F8F8F8;
}

.review-box .box-head .star img {
    max-width: 118px;
}

/* .media_area */

.media_area .media_wrap {
    position: relative;
    z-index: 1;
    padding: 50px 20px;
}

.media_area .media_wrap::before {
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #F8F3E9;
    z-index: -1;
}

.media_area .media_wrap .media_title h2 {
    margin: 0 0 20px;
    line-height: 1.8;
    letter-spacing: 3px;
    font-size: 18px;
}

.media_area .media_wrap .media_title h3 {
    margin: 0 0 20px;
    line-height: 1.8;
    font-size: 14px;
    letter-spacing: 1px;
}

.media_area .media_wrap .media_img {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 3%;
}

@media screen and (min-width: 768px) {
    .media_area .inner {
        position: relative;
        max-width: 780px;
    }

    .media_area .media_wrap {
        padding: 100px 20px;
    }


    .media_area .media_wrap::before {
        width: 100vw;
        left: auto;
        right: 46%;
    }

    .media_area .media_wrap .media_title h2 {
        font-size: 20px;
    }

    .media_area .media_wrap .media_title h3 {
        margin: 0 0 40px;
    }

    .media_area .media_wrap .media_img {
        gap: 0 7%;
    }
}



.main-area_2 .inner {
    padding: 0 20px;
    max-width: 1000px;
}

.main-area_2 .area_2_box .conts .title {
    font-size: 1.125rem;
    margin: 1rem 0;
}

@media only screen and (min-width: 768px) {
    .main-area_2 .area_2_box {
        display: flex;
        position: relative;
    }

    .main-area_2 .area_2_box figure {
        width: 70%;
    }

    .main-area_2 .area_2_box .conts {
        flex: 1;
        z-index: 1;
    }

    .main-area_2 .area_2_box .conts .title {
        margin: 17% 0 0 5%;
    }

    .main-area_2 .area_2_box .conts p {
        position: absolute;
        width: 51%;
        margin: 0 0 0 -20%;
        top: 40%;
    }

}


.cart-area .inner {
    padding: 0 20px 0;
    max-width: 950px;
}

.cart-area .head {
    text-align: center;
    margin: 0 0 3rem;
}

.cart-area .head .en-title {
    font-size: 24px;
    display: block;
    font-weight: normal;
    letter-spacing: .1em;
    margin: 0 0 .8rem;
}



@media only screen and (min-width: 767px) {
    .cart-area .head .en-title {
        font-size: 35px;
    }
}




/* cart-area */
.cart-area .inner-icon {
    font-size: 34px;
    text-align: center;
    margin: 0 0 50px;
}

.cart-area .inner-icon .icon_1 {
    padding: 0 0 10px;
    display: block;
    letter-spacing: 7px;
}


.cart-area .inner-icon .icon_2 {
    padding: 0 0 10px;
    display: block;
    font-size: 14px;
}

.cart-area .item_wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 5%;
}


.cart-area .item_box {
    max-width: 610px;
    margin: auto 0 0 0;
}

.cart-area .item_box figure {
    margin: 0 auto;
}

.cart-area .item_box .item_title {
    text-align: center;
    max-width: 366px;
    width: 94%;
    position: relative;
    height: 70px;
    margin: 0 auto;
}

.cart-area .item_title p {
    font-size: 11px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    text-align: left;
}

.cart-area .super_flex_cart .add_to_cart_sale {
    display: block;
    margin: 0 auto;
    box-shadow: 20px 20px 30px 0px rgba(0, 0, 0, 0.06);
}

.cart-area .select-pro input,
.cart-area .super_flex_cart input {
    box-shadow: rgb(0 0 0 / 20%) 0px 18px 50px -10px;
    padding: 0;
}

@media screen and (min-width: 768px) {
    .cart-area .item_wrap {
        grid-template-columns: repeat(3, 1fr);
    }

    .cart-area .item_box .item_title {
        text-align: left;
        width: auto;
        margin: 0 auto 20px;
    }

    .cart-area .item_title p {
        font-size: 13px;
        margin: 0 30px;
    }

    .cart-area .super_flex_cart .add_to_cart_sale {
        margin: 0 0 0 auto;
    }

    .cart-area .select-pro,
    .cart-area .super_flex_cart {
        margin: 0 30px;
    }
}


.question-area {
    max-width: 700px;
    margin: 0 auto;
}

.question-area .inner {
    padding: 0 20px;
}



.question-area .head {
    text-align: center;
    margin: 0 0 3rem;
}


.question-area .head .en-title {
    font-size: 24px;
    display: block;
    font-weight: normal;
    letter-spacing: .1em;
    margin: 0 0 .8rem;
}

.question-area .head .ja-title {
    font-weight: 500;
    font-size: 12px;

}

.question-area .question_box_01 {
    border-bottom: 1px dashed #707070;
    padding: 0 0 30px;
    margin: 0 0 30px;
}

.question-area .question_box li {
    display: flex;
    align-items: baseline;
}

.question-area .question_box li .title {
    font-size: 24px;
    width: 10%;
    margin: 0;
}

.question-area .question_box li .title_text {
    flex: 1;
    margin: 0;
}

.question-area .question_box .query .title {
    color: #4C6F50;
}

.question-area .question_box .query .title_text {
    font-size: 16px;
}


.question-area .question_box .answer .title {
    color: #A7BAA9;
}

.question-area .question_box .answer .title_text {
    font-size: 12px;
    font-weight: 400;
}


@media only screen and (min-width: 767px) {
    .question-area .head .en-title {
        font-size: 35px;
    }

    .question-area .head .ja-title {
        font-size: 14px;
    }

    .question-area .question_box .query .title_text {
        font-size: 20px;
    }

    .question-area .question_box .answer .title_text {
        font-size: 14px;
    }

}


.recipes-area .head .ja-title {
    line-height: 2;
}

.recipes-area {
    background-color: #F8F3E9;
    padding: 2.4rem 0 2.4rem;
    margin: 0 0 2.4rem;
}


@media only screen and (min-width: 767px) {
    .recipes-area {
        padding: 5.4rem 0 5.4rem;
        margin: 0 0 5.4rem;
    }
}

.recipes-area .head .en-title {
    font-size: 35px;
}


@media only screen and (max-width: 767px) {
    .recipes-area .head .en-title {
        font-size: 24px;
    }
}