@charset "utf-8";

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

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

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

    .frozen-dogfood {
        background: url();
        font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: 500;
        color: #484343;
        background-size: contain;
        max-width: 1200px;
    }

    .br-sp {
        display: none;
    }

    input[type="checkbox"] {
        margin-right: 23px;
        font-size: 14px;
        line-height: 20px;
        width: 20px;
        height: 20px;
        display: inline-block;
        outline: none;
        appearance: none;
        border: none;
        background: url(/img/usr/common/check_on.jpg) no-repeat;
    }

    /* メイン
======================================== */
    .main_mv {
        margin: auto;
        width:
    }

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

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

    /* タイトル
======================================== */

    section.sec.title {
        background-color: rgb(232, 119, 34);
        height: 100px;
        width: auto;
    }



    h2.title {
        border-left: 3px solid var(--main-color);
        background: var(--main-color-3);
        padding: 10px 20px;
        margin: 50px 0 30px;
        font-size: 5em;
        border-bottom: solid 3px #4a2f1b;
        display: inline-block;
    }

    .title img {
        width: 500px;
        margin: 17px;
    }

    h2.title_2 {
        font-size: 3em;
    }

    .main-ttl {
        padding: 10px;
    }

    span.frozen {
        font-size: 2.3m;
    }

    h2.seibun {
        text-align: center;
    }

    /* 詳細背景
======================================== */


    section.sec.shousai {
        background-color: ;
        border-radius: 20px;
    }



    /* fl
======================================== */
    .fl {
        display: flex;
        width: 100%;
        margin: auto;
    }

    .fl img {
        margin: auto;
        display: block;
        width: 50%;
    }

    .fl p {
        width: 80%;
        margin: auto;
        padding: 20px 53px;
    }

    .left {
        width: 50%;
    }

    ul.orange {
        margin: auto;
        font-size: 1.6em;
        width: 50%;
    }

    ul.orange img {
        margin: 24px;
        height: 186px;
        width: auto;
        right: 25%;
        position: relative;
    }

    ul.seibun li {
        font-size: 2em;
        margin: auto;
        width: 80%;
        padding: 9px;
        left: 111px;
        position: relative;
    }

    ul.seibun li {
        position: relative;
        padding-left: 40px;
    }

    ul.seibun li::before {
        color: #e87722;
        content: "・";
        font-size: 177px;
        position: absolute;
        top: -94px;
        left: -111px;
    }

    /*  詳細エリア縦３つ
======================================== */

    ul.tate3 {
        width: 50%;
        margin: auto;
    }

    .tate3 li {
        font-size: 1.2em;
        line-height: 2.2;
    }

    li.ando {
        font-size: 1.6em;
        line-height: 1.5;
        margin-bottom: 40px;
    }



    /*  背景
======================================== */

    .bg_01 {
        background: url(/goods/frozenfood-item/img/bg_01.jpg);
        background-size: cover;
        width: 100%;
        height: 588px;
    }

    ul.hand {
        line-height: 1.5;
        position: relative;
        margin: 0 70px;
        color: #fff;
        font-size: 1.8em;
        padding: 40px;
    }

    .hand li {
        word-break: break-all;
    }


    .bg_02 {
        background: url(/goods/frozenfood-item/img/bg_02.jpg);
        background-size: cover;
        width: 100%;
        height: 588px;
    }

    ul.hand_2 {
        top: 64px;
        position: relative;
        left: 549px;
        font-size: 1.8em;
        line-height: 2.2;
        width: 500px;
    }

    .hand_2 li {
        color: #ff0000;
    }

    .food_up {
        background: url();
        background-size: cover;
        width: 100%;
    }

    /*  右にテキストを重ねる
======================================== */

    .img-left {
        position: relative;
    }

    .img-left img {
        margin: auto;
        width: 600px;
        display: block;
        margin-left: 44%;
        border-radius: 10px;
    }

    .text-right {
        position: absolute;
        top: 68px;
        width: 500px;
        background-color: #ffe47a;
        padding: 30px;
        border-radius: 30px;
        font-size: 1.4em;
        line-height: 2.2;
    }

    /*  左にテキストを重ねる
======================================== */

    .img-right {
        position: relative;
    }

    .img-right img {
        margin: auto;
        width: 600px;
        border-radius: 20px;
    }

    .text-left {
        position: absolute;
        top: 58px;
        right: 0px;
        width: 500px;
        background-color: yellowgreen;
        padding: 30px;
        border-radius: 30px;
        font-size: 1.4em;
        background-color: #eaa3a0;
    }

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

    .sec {
        margin-top: 100px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }


    li {
        list-style: none;
    }

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

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

    .price {
        font-size: 1.4em;
        color: #4a2f1b;
    }

    p.zairyou {
        font-size: 1.4em;
        text-align: left;
    }

    span.frozen {
        font-size: 2.3em;
    }

    span.te {
        font-weight: 900;
        font-size: 5em;
        color: #000;
    }

    /* 成分表
======================================= */

    .seibunhyou {
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .seibunhyou ul {
    display: flex;
    margin-bottom: 10px;
    }

    .seibunhyou li {
    list-style: none;
    width: 17%;
    font-size: 1.2rem;
    position: relative;
    }

    .seibunhyou li::after {
   content:"";
   display:inline-block;
   width:3px;
   height:40px;
   background-color:#0097A7;
   position:absolute;
   top:-2px;
   right:-5px;
    }

    .seibunhyou li:last-child::after{/*コレ*/
    display: none;
    }
    
     /* 診断
 ================================================================================== */
    section.sec.sindan {
    text-align: center;
    }
    
    h2.sindanlink {
    font-size: 3em;
    }
    
    /* 【共通】ボタン
 ================================================================================== */
    section.botan_area {
        width: 400px;
        text-align: center;
        margin: auto;
    }

    .btn_area .btn {
        padding: 18px 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;
    }

    .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 {
        border-radius: 45px;
        background: #f49702;
        border: 1px solid #f49702;
        margin: 20px;
        padding: 5px;
    }




}