@charset "utf-8";



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


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

    .jyure {
        width: 1200px;
        margin: auto;
        text-align: center;
    }

    li {
        list-style: none;
    }
     .br-sp {
        display: none;
    }

    /* common
====================================== */
    sec {
        margin-top: 100px;
        margin: auto;
    }

    h2.sub_title {
        font-size: 3.6em;
        color: #fff;
        padding: 65px 0 0;
    }

    h2.title {
        font-size: 3em;
        margin: auto;
        color: #fff;
        padding: 5px;
    }

    h2.odoroki {
        color: #fff;
    }

    h2.red {
        color: #ff0000;
    }

    h2.why {
        color: #000;
    }

    h2.seibun {
        font-size: 2em;
        border-bottom: solid 1px;
        display: inline-block;
    }
    h3.sub_title {
        font-size: 2.2em;
        color: #fff;
        background-color: :#0170c163;
        padding: 20px;
        margin: auto;
    }

    /* 低分子 */
    .title_teibunsi {
        background-color: #d12b48;
        margin-top: 75px;
        padding: 20px;
    }
    
    .setumei_1 {
        font-size: 1.4em;
        margin: 30px;
        line-height: 2;
    }

    /* プロテオグリカン */
    .title_p_glycan {
        background-color: #02144e; 
        padding: 20px;
    }
    
    .left {
        width: 50%;
        margin: 26px;
    }

    .q_teiki {
        background-color: #ffffffb8;
        margin: auto;
        padding: 5px;
        width: 83%;
        line-height: 1;
    }
     .fl_right {
        width: 45%;
        position: relative;
        left: 50%;
        top:78px;
    }
    p.white {
        color: #fff;
        font-size: 1.4em;
        text-align: left;
    }



    /* 濃縮ローヤルゼリー */
    .title_r_jelly {
        background-color: orange;
        padding: 20px;
    }  
        background-color: #d12b48;
        margin-top: 75px;
        padding: 20px;
    }
    .half {
        display: block;
        width: 54%;
        font-size: 1.3em;
        margin: 75px 0 0 50px;
        line-height: 1.7;
    }
    .half p {
        text-align:left;
    }

    h3.orange_sub_title {
        background-color: bisque;
        padding: 13px;
    }
     /*ビューティチャージ*/
    p.beauty_text {
        width: 50%;
        margin-left: 49%;
        font-size: 1.4em;
        text-align: left;
   }

 /*こだわり*/
    section.sec.kodawari {
        background-image: url(/stg/goods/hakko/img/jure_19.jpg);
        background-position: initial;
        background-size: cover;
        position: relative;
        width: 1200px;
        height: 740px;
        color: #fff;
    }
    h3.bg_red {
        background-color: #ca090d9e;
        padding: 24px;
        width: fit-content;
        margin: auto;
        margin-bottom: 20px;
     }
    p.center_setumei {
        width: 50%;
        margin-left: 25%;
        font-size: 1.4em;
        text-align: left;
    }



    .fl {
        display: flex;
        justify-content: center;
        width: 75%;
        margin: auto;
    }

   



    /* 背景
  ====================================== */
    section.sec.sugoi {
        background-image: url(/stg/goods/hakko/img/jure_10.png);
        background-position: center;
        background-size: cover;
        width:1200px;
    }

    section.sec.p_glycan {
        background-image: url(/stg/goods/hakko/img/jure_13.jpg);
        background-position: center;
        background-size: cover;
        width:1200px;
        height: 1200px;
    }

    section.sec.r_jelly {
        background-image: url(/stg/goods/hakko/img/jure_14.jpg);
        background-position: bottom;
        background-size: cover;
        width:1200px;
        height:960px;
    }

    section.sec.iroiro {
        background-image: url(/stg/goods/hakko/img/jure_15.jpg);
        background-position: initial;
        background-size: cover;
        position: relative;
        width: 1200px;
        height:1500px;
    }

    section.sec.beautycharge {
        background-image: url(/stg/goods/hakko/img/jure_18.jpg);
        background-position: initial;
        background-size: cover;
        position: relative;
        height: 750px;
        width: 1200px;
    }

   




    /*  ポイント
  ====================================== */
    ul.point {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .point li {
        display: inline-block;
        width: 200px;
        height: 200px;
        line-height: 74px;
        background-color: #d12a48;
        border-radius: 50%;
        text-align: center;
        margin: 10px;
    }

    span.yellow {
        color: #fff;
        border-bottom: 1px solid;
        font-size: 1.3em;
    }

    p.point_3 {
        color: #f6cd46;
        ;
        font-size: 1.5em;
        line-height: 2;
    }



    ul.point_9 {
        display: flex;
        max-width: 1000px;
        margin: auto;
        justify-content: center;
    }

    /*  丸 */
    p.point_text_snk {
        position: absolute;
        top: 31%;
        left: 12%;
        color: #fff;
        font-weight: 600;
        letter-spacing: 0.2em;
        font-size: 1.5em;
    }

    p.point_text {
        position: absolute;
        top: 42%;
        left: 18%;
        color: #fff;
        font-weight: 600;
        letter-spacing: 0.2em;
        font-size: 1.5em;
    }

    li.snk {
        background-image: url(/stg/goods/hakko/img/snk.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: relative;
    }

    li.origo {
        background-image: url(/stg/goods/hakko/img/origo.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: relative;
    }

    li.eras {
        background-image: url(/stg/goods/hakko/img/eras.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: relative;
    }

    li.hiaru {
        background-image: url(/stg/goods/hakko/img/hiaru.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: relative;
    }

    li.vc {
        background-image: url(/stg/goods/hakko/img/vc.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: relative;
    }

    li.vb1 {
        background-image: url(/stg/goods/hakko/img/vb1.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: relative;
    }

    li.vb6 {
        background-image: url(/stg/goods/hakko/img/vb6.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: relative;
    }

    li.calni {
        background-image: url(/stg/goods/hakko/img/calni.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: relative;
    }

    li.seni {
        background-image: url(/stg/goods/hakko/img/seni.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: relative;
    }



    /* 成分 */

    span.r_seibun {
        font-size: 0.6em;
        background-color: #c40101;
        width: fit-content;
        padding: 5px;
        margin: 12px;
        color: #fff;
    }

    span.b_seibun {
        font-size: 0.6em;
        background-color: #0e0ee3;
        padding: 5px;
        width: fit-content;
        color: #fff;
        margin: 12px;
    }

    span.o_seibun {
        font-size: 0.6em;
        background-color: bisque;
        padding: 5px;
        width: fit-content;
        margin: 12px;
    }


    /*  エラスチンペプチド */
    .half_1 {
        position: relative;
        text-align: left;
        top: 150px;
        left: 150px;
        width: 440px;
        font-size: 1.3em;
        word-break: keep-all;
    }

    /*  ヒアルロン酸 */
    .half_right {
        position: relative;
        text-align: left;
        top: 278px;
        left: 570px;
        width: 450px;
        font-size: 1.3em;
        word-break: keep-all;
    }

    /*  ラフィノース・フラクトオリゴ糖 */
    .raff {
        position: relative;
        top: 533px;
        font-size: 1.3em;
        word-break: keep-all;
        width: 60%;
        margin: auto;
    }

    /*  L-カルニチンフマル塩酸 */
    .fumaru {
        position: relative;
        top: 573px;
        font-size: 1.3em;
        word-break: keep-all;
        width: 60%;
        margin: auto;
    }





}