@charset "utf-8";

/* ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

【PC】ウィンドウ幅が769px以上の場合に適用するCSS

■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ */
@media print,
screen and (min-width:769px) {

    .dog_food {
        width: 1000px;
        margin: auto;
        font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: 500;
        color: #484343;
    }

    .br-sp {
        display: none;
    }


    /* mv_area
================================================================================== */
    .mv_area {}

    .mv_area img {}

    /* CONCEPT
======================================== */
    .concept_area {
        padding: 30px;
        background: #e4f3f3;
    }


    .concept_area:after {
        content: '';
        position: absolute;
        top: 140px;
        height: 344px;
    }

    /* food_area
======================================== */
    section.sec.about_food2 {
        background: url(../../img/usr/genre/lwp/img_footprints.png) no-repeat center;
    }

    .food_area p {
        text-align: left;
        line-height: 1.6em;
    }

    p.setumei {
        width: 80%;
        align-content: center;
        margin: auto;
        padding: 50px;
        line-height: 1.6em;
    }

    /* レシピ説明
======================================== */
    .recipe_variation {
        display: flex;
        margin-top: 50px;
        width: 100%;
    }

    .recipe_variation li {
        margin: 5px;
        width: 25%;

    }

    .recipe_variation img {
        margin: auto;
    }

    .recipe_variation p {
        text-align: center;
        padding: auto;
        font-weight: bold;
    }

    /* 生薬説明
======================================== */

    .shouyaku_variation {
        display: flex;
        width: 100%;
    }

    .shouyaku_variation li {
        margin: 5px;
        width: 20%;

    }

    .shouyaku_variation img {}

    .shouyaku_variation p {
        text-align: center;
        padding: auto;
    }

    .youtube {
        text-align: center;
    }


    /* houto_area 使い方
======================================== */
    .howto_point {
        display: flex;
        width: 100%;
    }

    .howto_point img {
        width: 270px;
    }

    ul.howto_point p {
        font-size: 1.2em;
    }

    .howto_point li {
        margin: 33px;
        width: 33%;
    }

    .howto_point2 {
        display: flex;
    }

    .howto_point2 img {
        width: 270px;
    }

    .howto_point2 li {
        padding: 30px;
    }

    .howto_point2 p {
        padding: 5px;
        font-size: 1.4em;
        font-weight: bold;
    }

    section.sec.point2 {
        background: #F6ECE2;
        padding: 20px;
        padding: 20px;
    }

    .wasureta {
        background: url(../../img/usr/genre/lwp/img_footprints.png) no-repeat center;
        border-radius: 30px;
    }

    span.chuui {
        color: red;
    }

    /* day_area2 慣らし方
======================================== */
    section.sec.day_area {
        background: #e4f3f3;
        border-radius: 30px;
    }

    .day_area img {
        width: 270px;
    }

    ul.day_area {
        width: 100%;
    }

    .day_area li {
        margin: 15px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 30px;
        padding: 20px;
    }

    .day {
        font-size: 2.8em;
        text-align: left;
        font-weight: bold;
        color: #49a9c0;
        margin: 40px;
        width: 30%;
    }

    .day2 {
        width: 70%;
        font-size: 1.3em;
    }

    .howto_point2 {
        display: flex;
        width: 66%;
        margin: auto;
    }

    .howto_point2 img {
        width: 270px;
        height: 180px;
    }

    .howto_point2 li {
        padding: 30px;
    }

    section.sec.point2 {
        background: #F6ECE2;
        padding: 20px;
        padding: 20px;
    }

    p.topping {
        font-size: 1.3em;
        padding: 20px;
        font-weight: normal;
    }


    /* item_area 商品
======================================== */
    ul.item_variation {
        display: flex;
        width: 100%;
    }

    .item_variation li {
        width: 33%;
        padding:
    }

    .item_variation img {
        margin: 5px;
        padding: 5px;
    }

    .item_variation p {
        text-align: center;
        font-size: 1.4em;
    }



    /* common
  ================================================================================== */

    .sec {
        margin: 80px 0;
    }

    li {
        list-style: none;
    }

    .img {
        vertical-align: bottom;
        object-fit: cover;
    }

    .text {
        font-size: 1.2em;
        text-align: center;
        display: block;
    }

    .step {
        font-size: 2.6em;
        text-align: center;
        font-weight: bold;
        color: #e87822;
    }

    .tax {
        font-size: 0.6em;
    }

    .more {
        border: solid 2px;
        border-radius: 10px;
        width: 60%;
        margin: auto;
        padding: 13px;
        font-size: 2em;
    }

    /* 【共通】ボタン
 ================================================================================== */
    section.botan_area {
        width: 400px;
        text-align: center;
        margin: auto;
    }

    .btn_area .btn {
        padding: 30px 0;
        font-size: 1.8em;
        display: block;
        margin: 50px 0 0 0;
        position: relative;
        transition: 0.3s;
        border-radius: 100px;
    }

    .btn_area .btn img {
        position: absolute;
        right: 6.5%;
        top: 50%;
        transform: translateY(-50%);
        width: 25px;
        transition: all 300ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    .btn_area .btn:hover img {
        right: 6%;
    }

    .btn_area .btn:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        transform-origin: right top;
        transform: scale(0, 1);
        transition: transform 0.3s;
        background: #FAD2BC;
        border-radius: 100px;
    }

    .btn_area .btn:hover:before {
        transform-origin: left top;
        transform: scale(1, 1);
    }

    .btn_area .btn span {
        position: relative;
        z-index: 1;
    }

    .btn_01 .btn {
        background: #e87822;
        color: #ffff;
    }

    .btn_01 .btn:before {
        background: #FAD2BC;
    }

    .btn_02 .btn {
        background: #e87822;
        color: #4d3924;
    }

    .btn_02 .btn:before {
        background: #FF6700;
    }


    .btn_2 {
        background: #F7CD46;
        border: 1px solid #F7CD46;
        margin: 20px;
        padding: 5px;
    }



    /* fl
======================================== */
    .fl {
        display: flex;
        gap: 50px;
        width: 800px;
        margin: auto;
        align-items: center;
    }

    .fl img {
        width: 50%;
        margin: 30px 0;
    }

    .fl p {
        width: 100%;
        line-height: 2;
    }

    /* h2
======================================== */

    h2 {
        border-left: 3px solid var(--main-color);
        padding: 0 7px;
        margin: 50px 0 30px;
        font-size: 2.8em;
        background: linear-gradient(transparent 65%, #fff100 35%);
        display: inline-block;
    }

    /* h3
======================================== */

    h3.sale {
        font-size: 1.6em;
        font-weight: 600;
    }

    h3 {
        position: relative;
        padding: 15px 0;
        margin: 0 30px;
        font-size: 1.4em;
    }

    h3:before,
    h3:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        background: var(--main-color-3);
    }

    h3:before {
        width: 20%;
        background: var(--main-color);
        z-index: 1;
    }

    h3:after {}

    h3 {
        text-align: center;
    }




    section.sec.point {
        background: #F6ECE2;
        padding: 20px;
        padding: 20px;
    }



}