@charset "utf-8";

/*--------コンテンツ切り替え---------------------------*/

#yomuSupliTopSec,
#yomuSupliTopSec *{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

#yomuSupliTopSec img{
  vertical-align:top;
  max-width:100%;
  height: auto;
  border: none;
  line-height: 0;
}

/*----------SP------------------------------------------*/
@media screen and (max-width: 768px) {

  .sp_only{
    display: block !important;
  }

  .pc_only{
    display: none !important;
  }

  #yomuSupliTopSec{
    width:100%;
    margin:0 auto;
    color:#333;

  }

  #yomuSupliTopSec img{
    max-width:100%;
    height:auto;
    vertical-align:top;
    border:none;
  }

  #yomuSupliTopSec .notes{
    font-size: 13px;
    line-height: 1.4;
    padding: 0 15px 20px;
  }

  #yomuSupliTopSec .pagettl{
    margin: 0 0 20px;
  }

  #yomuSupliTopSec .pagettl img{
    text-align:center;
    width:100%;
    height:auto;
  }

  #yomuSupliTopSec .mainBanner {
    padding:0 10px;
  }

  #yomuSupliTopSec .mainBanner .bannerbox{
    margin-bottom:20px;
  }

  #yomuSupliTopSec .mainBanner a{
    display:block;
    text-decoration:none;
  }

  #yomuSupliTopSec .mainBanner .box{
    width:100%;

    display:block;

    color:#333;
    border:solid 3px #5BB3F0;
    padding:15px;
  }

  #yomuSupliTopSec .mainBanner .ttl img,
  #yomuSupliTopSec .mainBanner .ttl_img img{
    width:100%;
  }

  #yomuSupliTopSec .mainBanner .box .cont{
    width:100%;
    overflow:hidden;
    margin-top:10px;
  }

  #yomuSupliTopSec .mainBanner .box .photo{
    margin-right:15px;
    float:left;
    width:30%;
  }

  #yomuSupliTopSec .mainBanner .box .photo img{
    width:100%;
    height:auto;
  }


  #yomuSupliTopSec .mainBanner .box .text{

  }

  #yomuSupliTopSec .mainBanner .box .text h3{
    color:#CC0000;
    font-size:18px;
    line-height:1.4;
    font-weight:bold;
    margin:0;
    padding:0;
  }

  #yomuSupliTopSec .mainBanner .box .text p{
    margin:10px 0 0 0;
    font-size:14px;
    line-height:1.6;
  }

  #yomuSupliTopSec .mainBanner .box .text b{
    font-weight:bold;
  }

  #yomuSupliTopSec .mainBanner .box .btn_area{
    margin:10px 0px 0;
    padding-top:10px;
    font-size:0;
    text-align:center;
    vertical-align:top;
    clear:both;
  }

  #yomuSupliTopSec .mainBanner .box .btn_area .date{
    background:#CD0707;
    color:#FFF;
    font-size:13px;
    font-weight:bold;
    text-align:center;
    padding:0 10px;
    border-radius:25px;
    line-height:36px;
    height:36px;
    display:inline-block;
    margin-right:10px;
    vertical-align:top;
  }

  #yomuSupliTopSec .mainBanner .box .btn_area .btn{
    display:inline-block;
    vertical-align:top;
    transition:.3s;
  }

  #yomuSupliTopSec .mainBanner .box .btn_area .btn img{
    height:36px;
    width:auto;
  }

  #yomuSupliTopSec .mainBanner a:hover .btn img{
    opacity:0.7;

  }


  #yomuSupliTopSec .enqBlock{
    margin:40px 0;
  }


  #quiz-content{
    background-color: #fff;
    width: auto;
    margin: 20px -40px;
    padding: 15px;
    box-sizing: border-box;
    position:relative;
    color:#333;
  }

  #quiz-content p{
    margin:15px 0 0;
    font-size:14px;
    line-height:1.6;
  }

  #quiz-content img{
    display:block;
    max-width:50%;
    text-align:center;
    margin:0 auto;
  }


  #quiz-content h5{
    color:#0066CC;
    font-size:16px;
    font-weight:bold;
    text-align:left;
    margin:0;
    padding:0;
  }


  /*News*/
  #healthNewsSec{
    width:100%;
    margin:0 auto;

  }

  #healthNewsSec,
  #healthNewsSec *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  #healthNewsSec img{
    max-width:100%;
    height:auto;
    vertical-align:top;
    border:none;
  }

  #healthNewsSec .news_content{
    width:100%;
    margin:0 auto;
    padding:0 10px;
    overflow:hidden;
  }

  #healthNewsSec .news_content .pagettl{
    padding:0;
    margin:0 0 10px;
  }

  #healthNewsSec .news_content .pagettl img{
    width:100%;
    height:auto;

  }

  #healthNewsSec .news_content h2{
    color:#CC3333;
    font-size:17px;
    font-weight:bold;
    line-height:1.4;
    margin:0 0 15px;
    text-align:center;
  }

  #healthNewsSec .news_content .photo{
    width:50%;
    margin:20px auto 10px;
  }

  #healthNewsSec .news_content .photo img{
    width:100%;
    height:auto;
  }

  #healthNewsSec .news_content p{
    font-size:14px;
    line-height:1.8;
    margin:0;
    padding:0;
    color:#333;
  }

  #healthNewsSec .news_content p + p{
    margin-top:1em;
  }

  #healthNewsSec .news_content p.bdbox{
    padding:10px;
    border-top:dashed 1px #333;
    border-bottom:dashed 1px #333;
  }

  #healthNewsSec .news_content .fc_blue{
    color:#003f8e;
    font-weight:bold;
  }

  #healthNewsSec .news_content .fc_red{
    color:#CC3333;
    font-weight:bold;
  }

  #healthNewsSec .news_content h3{
    color:#CC3333;
    font-size:16px;
    font-weight:bold;
    line-height:1.4;
    margin:30px 0 15px;
  }

  #healthNewsSec .news_question{
    width:100%;
    margin:20px auto 20px;
    padding: 0 10px;
    overflow:hidden;
  }

  #healthNewsSec .news_question h3{
    color:#333333;
    font-size:15px;
    font-weight:bold;
    line-height:1.4;
    margin:20px 0 20px;
    position:relative;
    padding:3px 0 0 50px;
  }

  #healthNewsSec .news_question h3:before{
    content:"";
    display:block;
    width:40px;
    height:40px;
    background:url(../images/sp/news/news_icon_q.jpg) no-repeat;
    background-size:contain;
    position:absolute;
    left:0px;
    top:0px;
  }

  #healthNewsSec .news_question .arrow{
    display:block;
    width:300px;
    height:80px;
    background:url(../images/sp/news/news_arrow_answer.jpg) no-repeat;
    background-size:contain;
    margin:20px auto 0px;
  }

  #healthNewsSec .news_question p{
    font-size:14px;
    line-height:1.8;
    margin:0;
    padding:0;
    color:#333;
  }

  #healthNewsSec .news_question b{
    color:#CC3333;
    font-weight:bold;
    width:44px;
    white-space:nowrap;
  }

  #healthNewsSec .news_question .answer{
    margin:20px 10px 0;
  }

  #healthNewsSec .news_question .answer h4{
    color:#333333;
    font-size:15px;
    font-weight:bold;
    line-height:1.6;
    margin:20px 0 20px;
    position:relative;
    padding:0 0 0 80px;
    vertical-align:middle;
    min-height:60px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    width:100%;

  }

  #healthNewsSec .news_question .answer h4:before{
    content:"";
    display:block;
    width:80px;
    height:80px;
    background:url(../images/sp/news/news_icon_answer.jpg) center center no-repeat;
    background-size:contain;
    position:absolute;
    left:0px;
    top:50%;
    margin-top:-40px;
  }

  #healthNewsSec .news_question .answer p{
    font-size:14px;
  }

  #healthNewsSec .news_answer_btn{
    text-align:center;
    margin:20px auto 20px;
    max-width:80%;
  }

  #healthNewsSec .news_backno_banner{
    width:auto;
    text-align:center;
    margin:0px 10px 20px;
  }


  #healthNewsSec .news_backno_list{
    width:100%;
    margin:0px auto 40px;
  }

  #healthNewsSec .news_backno_list h1{
    margin:0 0 20px;
    padding:0;
  }

  #healthNewsSec .news_backno_list h1 img{
    width:100%;
  }


  #healthNewsSec .news_backno_list ul {
    list-style-type:none;
    padding:0;
    margin:0;
    border-top:solid 1px #CCC;
    border-bottom:solid 1px #CCC;
  }

  #healthNewsSec .news_backno_list ul li{
    padding:0;
    margin:0;
    border-bottom:dashed 1px #CCC;
  }

  #healthNewsSec .news_backno_list ul li:last-child{
    border-bottom:none;
  }

  #healthNewsSec .news_backno_list ul li a{
    width:100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-flex-flow: wrap;
    -moz-flex-flow: wrap;
    -ms-flex-flow: wrap;
    -o-flex-flow: wrap;
    flex-flow: wrap;

    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;

    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;

    padding:10px 10px;
    text-decoration:none;
    color:#333;
    tansition:.3s;
    position:relative;
  }


  #healthNewsSec .news_backno_list ul li a:after{
    display: inline-block;
    content: "";
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-8px;
    width: 10px;
    height: 10px;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  #healthNewsSec .news_backno_list ul li a:hover{
    background:#fff3f6;

  }

  #healthNewsSec .news_backno_list ul li .photo{
    width:25%;
  }

  #healthNewsSec .news_backno_list ul li .text{
    width:75%;
    padding:0 15px;
  }

  #healthNewsSec .news_backno_list ul li .text h3{
    color:#CC3300;
    font-size:14px;
    font-weight:bold;
    line-height:1.4;
    margin:0 0 5px;
  }

  #healthNewsSec .news_backno_list ul li .text p{
    color:#333;
    font-size:12px;
    line-height:1.6;
    margin:0px;
    padding:0;
  }

  #healthNewsSec .news_backno_list ul li .photo img{
    width:100%;
    height:auto;
    border:solid 1px #CCC;
    vertical-align: top;
  }



  #healthNewsSec .backNoSec{
    width:100%;
    margin:20px auto;
    background: url(../images/sp/news/bg_backNo.jpg) repeat-y left bottom;
  }

  #healthNewsSec .news{
    text-align:center;
    margin:40px 0;
  }

  #healthNewsSec .backNoSec ul{
    overflow:hidden;
    /zoom:1;
    width:670px;
    margin:0px auto;
  }

  #healthNewsSec .backNoSec ul li{
    float:left;
    width:214px;
    margin-right:8px;
    position:relative;
  }

  #healthNewsSec .backNoSec ul li span{
    position:absolute;
    left:98px;
    top:25px;
    width:100px;
    color:#333333;
    font-weight:bold;
    font-size:12px;
    line-height:1.4;
  }

  #healthNewsSec .backNoSec ul li span strong{
    font-weight:normal;
  }

  #healthNewsSec .backNoSec ul li a span{
    text-decoration:underline;
  }

  #healthNewsSec .backNoSec ul li a:hover span{
    text-decoration:none;
  }


  /*ヘルスケアレシピ*/

  #newHealthRecipeSec{
    width:100%;
    margin:0 auto;
  }

  #newHealthRecipeSec,
  #newHealthRecipeSec *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  #newHealthRecipeSec img{
    max-width:100%;
    height:auto;
    vertical-align:top;
    border:none;
  }

  #newHealthRecipeSec .pagettl{
    margin:0 auto 20px;
    padding:0;
  }

  #newHealthRecipeSec .pagettl img{
    width:100%;
    height:auto;
    vertical-align:top;
  }


  #newHealthRecipeSec .tabSec{
    margin:0 0 20px;
    padding:10px 0;
    font-size:14px;
    line-height:1.4;
    text-align:center;
  }

  #newHealthRecipeSec .tabSec p{
    font-size:14px;
    margin:0;
    padding:0;
  }

  #newHealthRecipeSec .tabSec h2{
    font-size:20px;
    font-weight:bold;
    margin:0;
    padding:0;
  }

  #newHealthRecipeSec .tabSec.tab_a{
    background:#FFDFE2;
  }

  #newHealthRecipeSec .tabSec.tab_a h2{
    color:#FF3399;
  }

  #newHealthRecipeSec .tabSec.tab_b{
    background:#CCFFCC;
  }

  #newHealthRecipeSec .tabSec.tab_b h2{
    color:#009900;
  }

  #newHealthRecipeSec .tabSec.tab_c{
    background:#FFFFCC;
  }

  #newHealthRecipeSec .tabSec.tab_c h2{
    color:#FFB333;
  }


  #newHealthRecipeSec .contents{
    padding:0 10px;
  }

  #newHealthRecipeSec .contents .ingredientsSec{
    margin:0px 0 20px;
  }


  #newHealthRecipeSec .contents .ingredientsSec .box{
    width:100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-flex-flow: wrap;
    -moz-flex-flow: wrap;
    -ms-flex-flow: wrap;
    -o-flex-flow: wrap;
    flex-flow: wrap;

    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;

    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;
  }


  #newHealthRecipeSec .contents .ingredientsSec .calory{
    width:80px;
    height:80px;
    position:relative;
    background:url(../images/sp/recipe/recipe_bg_calory.jpg) no-repeat left top;
    background-size:contain;
    text-align:center;
    line-height:1.4;
    font-size:13px;
    font-weight:bold;
    padding:0 5px 5px 0;

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;

    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
  }

  #newHealthRecipeSec .contents .ingredientsSec .desc{
    flex: 1;
  }

  #newHealthRecipeSec .contents .ingredientsSec .desc .title{
    margin:0 10px 0px;
    padding:0;
    font-size:14px;
    line-height:1.3;
    font-weight:bold;
    color:#333;
  }

  #newHealthRecipeSec .contents .ingredientsSec .desc h2{
    margin:0 10px 10px;
    padding:0;
    font-size:20px;
    line-height:1.3;
    font-weight:bold;
    color:#FF3300;
  }

  #newHealthRecipeSec .contents .ingredientsSec .food{
    width:33%;
    text-align:center;
  }



  #newHealthRecipeSec .contents .ingredientsSec .catchcopy{
    font-size:14px;
    line-height:1.8;
    margin:0;
    padding:10px 0;
    margin-top:10px;
    border-top:dotted 2px #CCC;
    border-bottom:dotted 2px #CCC;
  }



  #newHealthRecipeSec .contents .recipeMainSec{
    margin-bottom:20px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .photoSec{
    width:100%;
    text-align:center;
  }

  #newHealthRecipeSec .contents .recipeMainSec .photoSec .mainphoto{
    margin-bottom:20px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec{

  }

  #newHealthRecipeSec .contents .recipeMainSec .catchcopy{
    font-size:14px;
    line-height:1.4;
    margin:0 0 5px;
    text-align:center;
  }

  #newHealthRecipeSec .contents .recipeMainSec h3{
    font-size:20px;
    font-weight:bold;
    margin:0 0 20px;
    padding:0;
    color:#996600;
    letter-spacing:1px;
    text-align:center;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .calory{
    font-size:13px;
    margin-bottom:10px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec dl.recie{
    font-size:13px;
    line-height:1.8;
    letter-spacing:1px;
    text-align:left;
    margin:0 0 20px;
    padding:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }


  #newHealthRecipeSec .contents .recipeMainSec .textSec dl.recie dt{
    clear: both;
    float: left;
    margin:0;
    padding:5px 0 5px 5px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec dl.recie dd{
    margin:0;
    padding:5px 5px 5px 5px;
    color: #333333;
    text-align:right;
    border-bottom: solid 1px #FF9900;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .caution{
    margin-bottom:20px;
    font-size:14px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow1,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow2,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow3,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow4,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow5,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow6,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow7,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow8,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow9{
    position:relative;
    padding:0 0 10px 40px;
    border-bottom:dotted 1px #999;
    margin:0 0 10px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow1 p,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow2 p,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow3 p,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow4 p,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow5 p,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow6 p,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow7 p,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow8 p,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow9 p{
    font-size:14px;
    line-height:1.8;
    padding:0;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow1:before,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow2:before,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow3:before,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow4:before,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow5:before,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow6:before,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow7:before,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow8:before,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow9:before{
    content:"1";
    display:inline-block;
    background:#333;
    color:#FFF;
    font-size:13px;
    font-weight:bold;
    padding:3px 10px;
    position:absolute;
    left:0;
    top:0;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow2:before{content:"2";}
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow3:before{content:"3";}
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow4:before{content:"4";}
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow5:before{content:"5";}
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow6:before{content:"6";}
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow7:before{content:"7";}
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow8:before{content:"8";}
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow9:before{content:"9";}



  #newHealthRecipeSec .contents .recipeMainSec .textSec .onepointSec{
    color:#333;
    font-size:14px;
    line-height:1.8;
    margin-top:20px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .onepointSec b{
    color:#FF3300;
    font-weight:bold;
  }

  #newHealthRecipeSec .contents .recipeMainSec .authorSec{
    background:#FFDDDD;
    padding:10px;
    margin:20px 0;
    border-radius:10px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .authorSec.yellow{
    background:#FFFFCC;
  }

  #newHealthRecipeSec .contents .recipeMainSec .authorSec .photo{
    text-align:center;
    margin:0 auto 5px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .authorSec p{
    color:#333;
    font-size:13px;
    line-height:1.4;
    padding:0 5px;
    margin:0;
    text-align:left;
  }

  #newHealthRecipeSec .contents .bankno_banner{
    text-align:center;
    margin:30px 0;
  }


  #newHealthRecipeSec .recipe_backno{
    margin-bottom:40px;
  }

  /*切替*/
  #newHealthRecipeSec .tabnav{
    font-size:0;
    margin:0;
    padding:0;
    list-style-type:none;
  }

  #newHealthRecipeSec .tabnav li{
    display:inline-block;
    width:32%;
    margin-left:1%;
    text-align:center;
    vertical-align:bottom;
  }


  #newHealthRecipeSec .tabnav li a{
    background:#FFDFE2;
    color:#FF3399;
    font-size:13px;
    line-height:1.4;
    font-weight:bold;
    display:block;
    text-decoration:none;
    padding:5px 0;
    text-align:center;
    border-radius:6px 6px 0 0px;
  }

  #newHealthRecipeSec .tabnav li:nth-of-type(2) a{
    background:#CCFFCC;
    color:#009900;
  }

  #newHealthRecipeSec .tabnav li:nth-of-type(3) a{
    background:#FFFFCC;
    color:#FFB333;
  }


  #newHealthRecipeSec .tab_panel{
    margin:0px auto;
  }

  #newHealthRecipeSec #recipe1{
    border-top:solid 6px #FFDFE2;
  }

  #newHealthRecipeSec #recipe2{
    border-top:solid 6px #CCFFCC;
  }

  #newHealthRecipeSec #recipe3{
    border-top:solid 6px #FFFFCC;
  }


  #newHealthRecipeSec .tab_panel h1{
    margin:0 0 20px;
    padding:0;
  }

  #newHealthRecipeSec .tab_panel ul {
    list-style-type:none;
    padding:0;
    margin:0;
  }

  #newHealthRecipeSec .tab_panel ul li{
    padding:0;
    margin:0;
    border-bottom:dashed 1px #CCC;
  }

  #newHealthRecipeSec .tab_panel ul li:last-child{
    border-bottom:none;
  }

  #newHealthRecipeSec .tab_panel ul li a{
    width:100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-flex-flow: wrap;
    -moz-flex-flow: wrap;
    -ms-flex-flow: wrap;
    -o-flex-flow: wrap;
    flex-flow: wrap;

    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;

    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;

    padding:10px 10px;
    text-decoration:none;
    color:#333;
    tansition:.3s;
    position:relative;
  }


  #newHealthRecipeSec .tab_panel ul li a:after{
    display: inline-block;
    content: "";
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-8px;
    width: 10px;
    height: 10px;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  #newHealthRecipeSec .tab_panel ul li a:hover{
    background:#fff3f6;

  }

  #newHealthRecipeSec .tab_panel ul li .photo{
    width:18%;
  }

  #newHealthRecipeSec .tab_panel ul li .text{
    width:82%;
    padding:0 20px;
  }

  #newHealthRecipeSec .tab_panel ul li .text h3{
    color:#333;
    font-size:15px;
    font-weight:bold;
    line-height:1.4;
    margin:0 0 0px;
  }

  #newHealthRecipeSec .tab_panel ul li .text .new{
    color:#FFF;
    background:#FF6666;
    display:inline-block;
    font-size:10px;
    line-height:20px;
    padding:0 5px;
    margin:0 0 5px;
    border-radius:3px;

  }

  #newHealthRecipeSec .tab_panel ul li .photo img{
    width:100%;
    height:auto;
    border:solid 1px #CCC;
  }


  /* ナビ*/
  .yomusupliNavSec{
    width:90%;
    margin:20px auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-flex-flow: wrap;
    -moz-flex-flow: wrap;
    -ms-flex-flow: wrap;
    -o-flex-flow: wrap;
    flex-flow: wrap;

    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;

    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .yomusupliNavSec .btn_sitetop{
    width:100%;
  }

  .yomusupliNavSec .btn_sitetop a{
    display:block;
    height:54px;
    line-height:52px;
    border:solid 2px #FF6600;
    border-radius:6px;
    text-decoration:none;
    text-align:center;
    color: #FF6600;
    font-size:15px;
    vertical-align:middle;
    position:relative;
  }

  .yomusupliNavSec .btn_sitetop a:before{
    display: inline-block;
    content: "";
    position:absolute;
    right:18px;
    top:50%;
    margin-top:-5px;
    width: 10px;
    height: 10px;
    border-top: solid 2px #FF6600;
    border-right: solid 2px #FF6600;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }



  .yomusupliNavSec .btn_pagetop{
    width:100%;
    margin-bottom:15px;
  }

  .yomusupliNavSec .btn_pagetop a{
    display:block;
    height:54px;
    line-height:52px;
    border:solid 2px #FF3366;
    border-radius:6px;
    text-decoration:none;
    text-align:center;
    color: #FF3366;
    font-size:15px;
    vertical-align:middle;
    position:relative;
  }

  .yomusupliNavSec .btn_pagetop a:before{
    display: inline-block;
    content: "";
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-5px;
    width: 10px;
    height: 10px;
    border-top: solid 2px #FF3366;
    border-right: solid 2px #FF3366;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }




  /*margin*/
  .mt10{margin-top:10px;}

  .mt20{margin-top:20px;}

  .mt30{margin-top:30px;}

  .mt40{margin-top:40px;}

  .mt50{margin-top:50px;}

  .mt60{margin-top:60px;}

  .mt70{margin-top:70px;}

  .mt80{margin-top:80px;}

  .mt100{margin-top:100px;}

  .mb10{margin-bottom:10px;}

  .mb20{margin-bottom:20px;}

  .mb30{margin-bottom:30px;}

  .mb40{margin-bottom:40px;}

  .mb50{margin-bottom:50px;}

  .mb60{margin-bottom:60px;}

  .mb70{margin-bottom:70px;}

  .mb80{margin-bottom:80px;}

  .mb100{margin-bottom:100px;}

  .alC{text-align:center;}


  .banner_wrap{
    margin:20px auto;
    padding:0 10px;
    text-align:center;
  }


}

/*----------PC------------------------------------------*/
@media screen and (min-width: 769px) {

  .sp_only{
    display: none !important;
  }

  .pc_only{
    display: block !important;
  }


  #yomuSupliTopSec{
    width:770px;
    margin:40px auto 40px;
    color:#333;
  }

  #yomuSupliTopSec .notes{
    font-size: 14px;
    line-height: 1.8;
    margin: 20px 20px;
  }

  #yomuSupliTopSec img{
    border:0;
    vertical-align:top;
  }

  #yomuSupliTopSec .pagettl{
    margin-bottom:20px;
  }


  #yomuSupliTopSec .mainBanner .bannerbox{
    margin-bottom:20px;
  }

  #yomuSupliTopSec .mainBanner a{
    display:block;
    text-decoration:none;
  }

  #yomuSupliTopSec .mainBanner .box{
    width:100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-flex-flow: wrap;
    -moz-flex-flow: wrap;
    -ms-flex-flow: wrap;
    -o-flex-flow: wrap;
    flex-flow: wrap;

    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;

      -ms-align-items: center;
      -webkit-align-items: center;
      align-items: center;


    color:#333;
    border:solid 3px #5BB3F0;
    padding:15px;
  }

  #yomuSupliTopSec .mainBanner .box .ttl_img{
    width:284px;
  }

  #yomuSupliTopSec .mainBanner .box .cont{
    width:446px;
  }

  #yomuSupliTopSec .mainBanner .box .photo{
    margin-right:15px;
    float:left;
  }

  #yomuSupliTopSec .mainBanner .box .text{
    overflow:hidden;
  }

  #yomuSupliTopSec .mainBanner .box .text h3{
    color:#CC0000;
    font-size:18px;
    line-height: 1.2;
    font-weight:bold;
    margin:0;
    padding:0;
    overflow:hidden;
  }

  #yomuSupliTopSec .mainBanner .box .text p{
    margin:10px 0 0 0;
    font-size:14px;
    line-height:1.4;
  }

  #yomuSupliTopSec .mainBanner .box .text b{
    font-weight:bold;
  }

  #yomuSupliTopSec .mainBanner .box .btn_area{
    margin-top:10px;
    font-size:0;
    text-align:right;
    vertical-align:top;
  }

  #yomuSupliTopSec .mainBanner .box .btn_area .date{
    background:#CD0707;
    color:#FFF;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    padding:0 15px;
    border-radius:15px;
    line-height:30px;
    height:30px;
    display:inline-block;
    margin-right:10px;
    vertical-align:top;
  }

  #yomuSupliTopSec .mainBanner .box .btn_area .btn{
    display:inline-block;
    vertical-align:top;
    transition:.3s;
  }

  #yomuSupliTopSec .mainBanner a:hover .btn img{
    opacity:0.7;
  }


  #yomuSupliTopSec .enqBlock{
    margin:40px 0;
  }


  #quiz-content{
    background-color: #fff;
    width: 500px;
    margin: 30px auto;
    padding: 20px;
    box-sizing: border-box;
    position:relative;
    color:#333;
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  }

  #quiz-content p{
    margin:15px 0 0;
    font-size: 13px;
    line-height: 1.8;
  }

  #quiz-content h5{
    color:#0066CC;
    font-size:16px;
    font-weight:bold;
    text-align:left;
    margin:0;
    padding:0;
  }


  /*recipe*/
  #healthRecipeSec{
    width:770px;
    margin:0 auto;
  }

  #healthRecipeSec h2{
    margin-bottom:10px;

  }

  #healthRecipeSec .backNoSec{
    width:730px;
    margin:20px auto;
    background: url(../images/pc/recipe/footer_backNo.jpg) no-repeat #FFEBD5 left bottom;
    padding-bottom:35px;
  }

  #healthRecipeSec .recipe{
    text-align:center;
    margin:40px 0;
  }

  #healthRecipeSec .backNoSec ul{
    overflow:hidden;
    /zoom:1;
    margin-bottom:20px;
  }

  #healthRecipeSec .backNoSec ul li{
    float:left;
    width:178px;
    margin-left:45px;
    margin-bottom:5px;
    /display:inline;
  }

  #healthRecipeSec .backNoSec ul li img{
    margin-bottom:10px;
  }

  #healthRecipeSec .backNoSec ul li span{
    color:#990000;
    font-weight:bold;
    line-height:1.4;
  }

  #healthRecipeSec .backNoSec ul li span strong{
    font-weight:normal;
  }



  /*News*/
  #healthNewsSec{
    width:770px;
    margin:40px auto;
  }

  #healthNewsSec,
  #healthNewsSec *{
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
           -o-box-sizing: border-box;
          -ms-box-sizing: border-box;
              box-sizing: border-box;
  }

  #healthNewsSec .news_content{
    width:600px;
    margin:0 auto;
    overflow:hidden;
  }

  #healthNewsSec .news_content .pagettl{
    padding:0;
    margin:0 0 20px;
  }

  #healthNewsSec .news_content h2{
    color:#CC3333;
    font-size:18px;
    font-weight:bold;
    line-height:1.4;
    margin:0 0 20px;
    text-align:center;
  }

  #healthNewsSec .news_content .photo{
    width:280px;
    float:right;
    padding: 0 0 10px 20px;
    background: #FFF;
  }

  #healthNewsSec .news_content p{
    font-size:14px;
    line-height:1.8;
    margin:0;
    padding:0;
    color:#333;
  }

  #healthNewsSec .news_content p + p{
    margin-top:1em;
  }

  #healthNewsSec .news_content p.bdbox{
    padding:10px;
    border-top:dashed 1px #333;
    border-bottom:dashed 1px #333;
  }

  #healthNewsSec .news_content .fc_blue{
    color:#003f8e;
    font-weight:bold;
  }

  #healthNewsSec .news_content .fc_red{
    color:#CC3333;
    font-weight:bold;
  }

  #healthNewsSec .news_content h3{
    color:#CC3333;
    font-size:16px;
    font-weight:bold;
    line-height:1.4;
    margin:40px 0 20px;
  }

  #healthNewsSec .news_question{
    width:600px;
    margin:20px auto 20px;
    overflow:hidden;
  }

  #healthNewsSec .news_question h3{
    color:#333333;
    font-size:16px;
    font-weight:bold;
    line-height:1.4;
    margin:20px 0 20px;
    position:relative;
    padding:3px 0 0 70px;
  }

  #healthNewsSec .news_question h3:before{
    content:"";
    display:block;
    width:52px;
    height:52px;
    background:url(../images/pc/news/news_icon_q.jpg) no-repeat;
    background-size:contain;
    position:absolute;
    left:0px;
    top:0px;
  }

  #healthNewsSec .news_question .arrow{
    display:block;
    width:300px;
    height:80px;
    background:url(../images/pc/news/news_arrow_answer.jpg) no-repeat;
    background-size:contain;
    margin:20px auto 0px;
  }

  #healthNewsSec .news_question p{
    font-size:16px;
    line-height:1.8;
    margin:0;
    padding:0;
    color:#333;
  }

  #healthNewsSec .news_question b{
    color:#CC3333;
    font-weight:bold;
  }

  #healthNewsSec .news_question .answer{
    margin:20px 20px 0;
  }

  #healthNewsSec .news_question .answer h4{
    color:#333333;
    font-size:18px;
    font-weight:bold;
    line-height:1.8;
    margin:20px 0 20px;
    position:relative;
    padding:0 0 0 100px;
    vertical-align:middle;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
      -ms-align-items: center;
      -webkit-align-items: center;
      align-items: center;
    min-height:66px;
  }

  #healthNewsSec .news_question .answer h4:before{
    content:"";
    display:block;
    width:100px;
    height:66px;
    background:url(../images/pc/news/news_icon_answer.jpg) no-repeat;
    background-size:contain;
    position:absolute;
    left:0px;
    top:50%;
    margin-top:-33px;
  }

  #healthNewsSec .news_question .answer p{
    font-size:14px;
  }

  #healthNewsSec .news_answer_btn{
    text-align:center;
    margin:30px auto 30px;
    max-width:80%;
  }


  #healthNewsSec .news_backno_banner{
    width:600px;
    margin:0px auto 20px;
  }


  #healthNewsSec .news_backno_list{
    width:600px;
    margin:0px auto 40px;
  }

  #healthNewsSec .news_backno_list h1{
    margin:0 0 20px;
    padding:0;
  }

  #healthNewsSec .news_backno_list ul {
    list-style-type:none;
    padding:0;
    margin:0;
    border-top:solid 1px #CCC;
    border-bottom:solid 1px #CCC;
  }

  #healthNewsSec .news_backno_list ul li{
    padding:0;
    margin:0;
    border-bottom:dashed 1px #CCC;
  }

  #healthNewsSec .news_backno_list ul li:last-child{
    border-bottom:none;
  }

  #healthNewsSec .news_backno_list ul li a{
    width:100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-flex-flow: wrap;
    -moz-flex-flow: wrap;
    -ms-flex-flow: wrap;
    -o-flex-flow: wrap;
    flex-flow: wrap;

    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;

      -ms-align-items: center;
      -webkit-align-items: center;
      align-items: center;

    padding:10px 10px;
    text-decoration:none;
    color:#333;
    tansition:.3s;
    position:relative;
  }


  #healthNewsSec .news_backno_list ul li a:after{
    display: inline-block;
    content: "";
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-8px;
    width: 10px;
    height: 10px;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
  }

  #healthNewsSec .news_backno_list ul li a:hover{
    background:#fff3f6;

  }

  #healthNewsSec .news_backno_list ul li .photo{
    width:15%;
  }

  #healthNewsSec .news_backno_list ul li .text{
    width:85%;
    padding:0 20px;
  }

  #healthNewsSec .news_backno_list ul li .text h3{
    color:#CC3300;
    font-size:16px;
    font-weight:bold;
    line-height:1.4;
    margin:0 0 10px;
  }

  #healthNewsSec .news_backno_list ul li .text p{
    color:#333;
    font-size:13px;
    line-height:1.8;
    margin:0px;
    padding:0;
  }

  #healthNewsSec .news_backno_list ul li .photo img{
    width:100%;
    height:auto;
    border:solid 1px #CCC;
    vertical-align: top;
  }

  #healthNewsSec .backNoSec{
    width:730px;
    margin:20px auto;
    background: url(../images/pc/news/bg_backNo.jpg) repeat-y left bottom;
  }

  #healthNewsSec .news{
    text-align:center;
    margin:40px 0;
  }

  #healthNewsSec .backNoSec ul{
    overflow:hidden;
    /zoom:1;
    width:670px;
    margin:0px auto;
  }

  #healthNewsSec .backNoSec ul li{
    float:left;
    width:214px;
    margin-right:8px;
    position:relative;
  }

  #healthNewsSec .backNoSec ul li span{
    position:absolute;
    left:98px;
    top:25px;
    width:100px;
    color:#333333;
    font-weight:bold;
    font-size:12px;
    line-height:1.4;
  }

  #healthNewsSec .backNoSec ul li span strong{
    font-weight:normal;
  }

  #healthNewsSec .backNoSec ul li a span{
    text-decoration:underline;
  }

  #healthNewsSec .backNoSec ul li a:hover span{
    text-decoration:none;
  }

  #newHealthRecipeSec{
    width:770px;
    margin:40px auto;
  }

  #newHealthRecipeSec .pagettl{
    margin:0 auto 40px;
  }


  #newHealthRecipeSec .tabSec{

  }

  #newHealthRecipeSec .tabSec ul{
    overflow:hidden;
    /zoom:1;
    list-style-type:none;
    margin:0 -12px 0 0;
  }

  #newHealthRecipeSec .tabSec ul li{
    margin-right:12px;
    float:left;
    vertical-align:bottom;
  }

  #newHealthRecipeSec .tabSec ul li img{
    vertical-align:bottom;
  }

  #newHealthRecipeSec .category1{
    border-bottom:solid 10px #FFDFE2;
  }

  #newHealthRecipeSec .category2{
    border-bottom:solid 10px #CCFFCC;
  }

  #newHealthRecipeSec .category3{
    border-bottom:solid 10px #FFFFCC;
  }


  #newHealthRecipeSec .contents{
    width:740px;
    margin:0 auto;
    color:#333333;
    font-size: 16px;
    line-height: 1.8;
  }

  #newHealthRecipeSec .contents .ingredientsSec{
    overflow:hidden;
    zoom:1;
    margin:30px 0 50px;
  }

  #newHealthRecipeSec .contents .ingredientsSec .calory{
    float:left;
    width:140px;
    height:140px;
    position:relative;
    background:url(../images/pc/recipe/bg_calory.jpg) no-repeat left top;
    text-align:center;
    line-height:1.4;
    font-size:1.2em;
    font-weight:bold;
    margin-top:15px;
    padding-bottom: 10px;

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-flex-flow: column wrap;
    -moz-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    -o-flex-flow: column wrap;
    flex-flow: column wrap;

    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;

      -ms-align-items: center;
      -webkit-align-items: center;
      align-items: center;
  }

  #newHealthRecipeSec .contents .ingredientsSec .desc{
    float:left;
    width:390px;
    padding:0 10px;
  }

  #newHealthRecipeSec .contents .ingredientsSec .desc2{
    float:left;
    width:580px;
    margin-top:15px;
    padding:0 10px;
  }

  #newHealthRecipeSec .contents .ingredientsSec .desc .title,
  #newHealthRecipeSec .contents .ingredientsSec .desc2 .title{
    background:url(../images/pc/recipe/hr_dot_glay.gif) repeat-x left bottom;
    padding-bottom:12px;
    margin:0 0 10px;
    font-size: 18px;
    font-weight: bold;
  }

  #newHealthRecipeSec .contents .ingredientsSec .desc h2,
  #newHealthRecipeSec .contents .ingredientsSec .desc2 h2{
    font-size:1.125em;
    font-weight:bold;
    letter-spacing:2px;
    margin:0 0 5px;
    line-height:1.3;
  }

  #newHealthRecipeSec .contents .ingredientsSec .desc .catchcopy,
  #newHealthRecipeSec .contents .ingredientsSec .desc2 .catchcopy{
    font-size:0.813em;
    line-height:1.4;
    margin:0;
    padding-bottom:15px;
    background:url(../images/pc/recipe/hr_dot_glay.gif) repeat-x left bottom;
  }



  #newHealthRecipeSec .contents .ingredientsSec .food{
    margin-top:15px;
    width:190px;
    text-align:center;
    float:right;
  }


  #newHealthRecipeSec .contents .recipeMainSec{
    overflow:hidden;
    /zoom:1;
    margin-bottom:70px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .photoSec{
    width:415px;
    float:right;
  }

  #newHealthRecipeSec .contents .recipeMainSec .photoSec .mainphoto{
    margin-bottom:20px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec{
    width:300px;
    float:left;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .catchcopy{
    font-size:0.813em;
    line-height:1.4;
    margin:0 0 5px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec h3{
    font-size:1.3em;
    line-height: 1.4;
    font-weight:bold;
    margin:0 0 10px;
    color:#996600;
    letter-spacing:1px;
    padding-bottom:15px;
    background:url(../images/pc/recipe/hr_dot_orange.gif) repeat-x left bottom;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .calory{
    font-size:0.813em;
    margin-bottom:10px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec dl.recie{
    font-size:0.813em;
    line-height:1.4;
    letter-spacing:1px;
    text-align:left;
    margin-bottom:20px;
    overflow:hidden;
    /zoom:1;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec dl.recie dt{
    clear: both;
    float: left;
    margin:0;
    padding:5px 0 5px 5px;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec dl.recie dd{
    margin:0;
    padding:5px 5px 5px 5px;
    color: #333333;
    text-align:right;
    border-bottom: solid 1px #FF9900;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .caution{
    margin-bottom:20px;
    font-size:0.813em;
  }


  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow1,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow2,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow3,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow4,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow5,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow6,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow7,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow8,
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow9{
    background:url(../images/pc/recipe/h_flow1.gif) no-repeat left top;
    padding:20px 5px;
    font-size:0.813em;
    line-height:1.6;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow2{
    background:url(../images/pc/recipe/h_flow2.gif) no-repeat left top;
  }
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow3{
    background:url(../images/pc/recipe/h_flow3.gif) no-repeat left top;
  }
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow4{
    background:url(../images/pc/recipe/h_flow4.gif) no-repeat left top;
  }
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow5{
    background:url(../images/pc/recipe/h_flow5.gif) no-repeat left top;
  }
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow6{
    background:url(../images/pc/recipe/h_flow6.gif) no-repeat left top;
  }
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow7{
    background:url(../images/pc/recipe/h_flow7.gif) no-repeat left top;
  }
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow8{
    background:url(../images/pc/recipe/h_flow8.gif) no-repeat left top;
  }
  #newHealthRecipeSec .contents .recipeMainSec .textSec .flow9{
    background:url(../images/pc/recipe/h_flow9.gif) no-repeat left top;
  }


  #newHealthRecipeSec .contents .recipeMainSec .textSec .onepointSec{
    color:#333;
    font-size:0.813em;
    line-height:1.6;
  }

  #newHealthRecipeSec .contents .recipeMainSec .textSec .onepointSec b {
      color: #FF3300;
      font-weight: bold;
  }

  #newHealthRecipeSec .recipeBacknoSec{
    padding:70px 0 50px 20px;
    overflow:hidden;
    /zoom:1;
    letter-spacing:-.40em;
  }

  #newHealthRecipeSec #recipe1{
    background:#FFDFE2;
    background:url(../images/pc/recipe/bg_newrecipe.png) #FFDFE2 no-repeat 0px 20px;
  }

  #newHealthRecipeSec #recipe2{
    background:#CCFFCC;
    background:url(../images/pc/recipe/bg_newrecipe.png) #CCFFCC no-repeat 0px 20px;
  }

  #newHealthRecipeSec #recipe3{
    background:#FFFFCC;
    /*background:url(../images/pc/recipe/bg_newrecipe.png) #FFFFCC no-repeat 0px 20px;*/
  }

  #recipe1,#recipe2,#recipe3{
    display: none;
  }


  #newHealthRecipeSec .recipeBacknoSec .item{
    width:178px;
    padding:30px 30px 10px;
    display:inline-block;
    letter-spacing:normal;
    vertical-align:top;
  }

  #newHealthRecipeSec .recipeBacknoSec .item a{
    color:#663300;
    font-size:0.813em;
    line-height:1.4;
    display:block;
  }

  #newHealthRecipeSec .recipeBacknoSec .item .thum{
    width:169px;
    height:172px;
    background:url(../images/pc/recipe/bg_recipe_photo.png) no-repeat left top;
    padding:28px 0 0 9px;
  }

  #newHealthRecipeSec .recipeBacknoSec .item a:hover .thum img{
    filter: alpha(opacity=70);
    -moz-opacity:0.7;
    opacity:0.7;
  }

  #newHealthRecipeSec .recipeBacknoSec .item p{
    padding:5px;
    margin:0;
    text-align:center;
  }

  #newHealthRecipeSec .recipeBacknoSec .clear{
    clear:both;
  }


  /*margin*/
  .mt10{margin-top:10px;}

  .mt20{margin-top:20px;}

  .mt30{margin-top:30px;}

  .mt40{margin-top:40px;}

  .mt50{margin-top:50px;}

  .mt60{margin-top:60px;}

  .mt70{margin-top:70px;}

  .mt80{margin-top:80px;}

  .mt100{margin-top:100px;}

  .mb10{margin-bottom:10px;}

  .mb20{margin-bottom:20px;}

  .mb30{margin-bottom:30px;}

  .mb40{margin-bottom:40px;}

  .mb50{margin-bottom:50px;}

  .mb60{margin-bottom:60px;}

  .mb70{margin-bottom:70px;}

  .mb80{margin-bottom:80px;}

  .mb100{margin-bottom:100px;}

  .alC{text-align:center;}

  #commentForm{
    border:solid 1px #CCCCCC;
  }

  .banner_wrap{
    margin-top:50px;
    text-align:center;
  }


  /* ナビ*/
  .yomusupliNavSec{
    width:600px;
    margin:50px auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-flex-flow: wrap;
    -moz-flex-flow: wrap;
    -ms-flex-flow: wrap;
    -o-flex-flow: wrap;
    flex-flow: wrap;

    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;

    -ms-align-items: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .yomusupliNavSec .btn_sitetop{
    width:48%;
  }

  .yomusupliNavSec .btn_sitetop a{
    display:block;
    height:54px;
    line-height:52px;
    border:solid 2px #FF6600;
    border-radius:6px;
    text-decoration:none;
    text-align:center;
    color: #FF6600;
    font-size:15px;
    vertical-align:middle;
    position:relative;
  }

  .yomusupliNavSec .btn_sitetop a:before{
    display: inline-block;
    content: "";
    position:absolute;
    right:18px;
    top:50%;
    margin-top:-5px;
    width: 10px;
    height: 10px;
    border-top: solid 2px #FF6600;
    border-right: solid 2px #FF6600;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }



  .yomusupliNavSec .btn_pagetop{
    width:48%;
  }

  .yomusupliNavSec .btn_pagetop a{
    display:block;
    height:54px;
    line-height:52px;
    border:solid 2px #FF3366;
    border-radius:6px;
    text-decoration:none;
    text-align:center;
    color: #FF3366;
    font-size:15px;
    vertical-align:middle;
    position:relative;
  }

  .yomusupliNavSec .btn_pagetop a:before{
    display: inline-block;
    content: "";
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-5px;
    width: 10px;
    height: 10px;
    border-top: solid 2px #FF3366;
    border-right: solid 2px #FF3366;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

}


/*-----------------------*/
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8; }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover,
  .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent; }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover,
  .mfp-arrow:focus {
    opacity: 1; }
  .mfp-arrow:before,
  .mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-top:5px;
  padding-right: 36px; }

.mfp-title small{
  font-size:80% !important;
  margin-top:5px;
  display:block;
}


.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }


.gallery-arrow{
  position: absolute;
  top: 50%;
  margin-top: -15px;
  /*background-color: #fff;*/
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  text-align: center;
  line-height: 30px;
  left: 50%;
  cursor: pointer;
  z-index:10000;
}
.gallery-arrow-left:before{
  content: "";
  width: 30px;
  height: 30px;
  margin-right:-10px;
  display:inline-block;
  border-right: solid 5px #FFF;
  border-top: solid 5px #FFF;
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);

}
.gallery-arrow-right:before{
  content: "";
  width: 30px;
  height: 30px;
  margin-left:-10px;
  display:inline-block;
  border-right: solid 5px #FFF;
  border-top: solid 5px #FFF;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}
.mfp-container {
    padding-left: 60px;
    padding-right: 60px;
}

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

  .mfp-container {
      padding-left: 60px;
      padding-right: 60px;
  }


}