/* CSS Document */

.tleStyle1 { font-weight: 200;}
.section{ max-width: 980px;
    width: 90%;
    margin-right: auto;
    margin-left: auto; box-sizing: border-box;}

.social { display: flex; justify-content: end;}
.fb-share-button{ margin: -2px 0 0 10px; }

@media screen and (min-width: 1081px), print {
  .sp{ display: none; }
  .tleStyle1 {font-size: 2em;}
  #main_visual { margin-bottom: 50px;}
  #section1 li:first-child{ margin-bottom: 40px; }
}
@media screen and (max-width: 1080px) {
    .tleStyle1 { font-size: 7vw; }
    #main_visual { margin-bottom: 4%;}
    #section1 li:first-child{ margin-bottom: 3%; }

}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .valueTitle,.valueTitle2 { display: flex;  align-items: center; }
}
@media screen and (min-width: 751px){
#bleadList{ margin-bottom: 50px; }
.social {margin-top: 30px; margin-bottom: 55px; }

#valueitem{ margin-top: 80px; }
#valueitem li{ margin-bottom:40px; }
}

@media screen and (max-width: 750px) {
#bleadList{ margin-bottom: 4%; }
.social {margin-top: 4%; }
main .social.section{ margin-bottom: 4%;}
}


/*valueの画像は共有*/
picture{ line-height: 0; display: block; }
/*#newitemWrap{ background: #ea5432;}
#newIteminner{  background: url(../../images/product/value/taste.png) 0 0 repeat-y #f1e5d5; 
position: relative;}*/

.txtcenter{ text-align: center; }

#typeWrap{ background: #75bdf8;/*bbe2e3*/ }
#typeInner{ background: url(../image/typebg_sp.gif) 0 0 repeat #fff; background-size: 10%; }

/*
.newIcon{ position: relative; padding-bottom: 30px;}
.newIcon::after{ position: absolute; content: ""; background: url(../../images/product/value/newIcon.png) 0 0 no-repeat;
max-width: 87px; width: 100%; height:31px; left:0; bottom:0 }
*/

#stick,#topping{ position: relative; }
#stick::after,
#topping::after{  position: absolute; content: ""; background-repeat: no-repeat; background-position: 0 0;}

#stick::after{ right:0; bottom:30px;
background-image: url(../image/dog1.png) ;
width: 153px; height: 139px;
}
#stick .newIcon::after{ bottom:3.4vw }
#topping .newIcon::after{ bottom:-0.7vw }

.item{ display: flex; }

.separates{flex-wrap: wrap;}

#gum .separates{ justify-content: space-between;}
#topping::after{ bottom:0;
  background-image: url(../image/dog2.png) ;
  width: 125px; height: 113px;}
#topping .valueTitle{ margin-bottom: 30px; }

#slice .newIcon::after{ bottom:-0.6vw }

.valueTitle2 dt{ margin-bottom: 20px; }
.valueTitle2 dd{ margin-bottom: 25px; }

/* 共通 */
.value .contents {
  padding-bottom: 50px;
  position: relative;
}
@media screen and (min-width: 1061px) and (max-width: 1080px) {
  #topping::after{ right: -2vw;}
}
@media screen and (min-width: 961px) and (max-width: 1060px) {
  #topping::after{ right: -2vw; bottom: -9vw;}
}
@media screen and (min-width: 1064px){
  #taste .newIcon::after{ bottom:0.6vw }

}
@media screen and (min-width: 1081px) and (max-width: 1063px) {
  #stick::after {
    max-width: 153px;
    height: 91px;
    background-size: 100%;
    width: 100px;
    max-height: 139px;}

  #stick .newIcon::after, #gum .newIcon::after{ bottom: inherit; top: 265px; }
  #stick .separates li{ width: 13%; }

#gum .item li{ width: 26%; }
#gum .item li:nth-child(2){ width: 35%; }
#gum .item li:nth-child(3){ width: 29.5%; }


}

@media screen and (min-width: 961px) {
#gum .separates{ width: 48%;}
}

@media screen and (min-width: 751px) and (max-width: 960px) {
  #topping::after{ width: 16%;
    max-height: 113px;
    background-size: 100%;
    max-width: 125px;
    height: 113px;
    bottom: -10.5vw;
    right: -4vw; }


#gum .newIcon{ width: 25%; }
#gum .newIcon::after{ top:23vw }
#gum .separates {width: 61%;}

  #taste .separates li{ width: 42%; }
  #taste .separates li:nth-child(3){ width: 40%; }
}



@media screen and (min-width: 1081px) {
#typeTitle{ margin-top: -30px; margin-bottom: 60px; }

#typeWrap{ padding:25px; margin-top: 60px; margin-bottom: 90px;}
#typeInner{ padding:20px 40px 1px }
.itemBox{ margin-left:10px; margin-bottom: 60px; }
.valueTitle{ display: flex; align-items: center; margin-bottom: 20px;}
.valueTitle dt{ margin-right: 30px; }
#sweet .item li:not(:last-child){ margin-right: 20px; }
.separates{ width: 60%; margin-left: 25px;}
#stick .separates{ width: 74%; }
#stick .separates li:not(:last-child){ margin-bottom: 25px; margin-right: 23px; }

#wet{ width: 30%; }
#gum{ width: 68%; margin-right: 3%; }
#gum .item li:first-child,#gum .item li:nth-child(2),#gum .item li:nth-child(3){ margin-bottom: 20px; }
#gum .item li{ margin-right: 0; }
#gum .newIcon::after{ bottom:1.1vw }

#wet .item li:not(:last-child) { margin-right: 20px; }
#slice { width: 50%; margin-right: 2vw; }
#slice .item li:not(:last-child){ margin-right: 32px; }

#taste { width: 51%; }
#taste .separates li:first-child{ margin-right: 20px; margin-bottom: 15px;}
#topping .item li:not(:last-child){ margin-right: 30px; }
#topping::after{ left:86%;}

}


@media screen and (max-width: 1080px) {
.pc{ display: none; }
#typeTitle{ margin-bottom: 10%; text-align: center;}
#typeWrap{ padding: 3.5% }
#typeInner{ padding:60px 4vw 4%}
  .product_section ul li {
    margin-right: auto;
    margin-left: auto;
    text-align: center;  }

  .itemBox,#gum,#slice{ margin-bottom: 12vw; }
  .valueTitle,.valueTitle2{  margin-bottom: 6%; text-align: center;}
  .valueTitle dt{ margin-bottom: 3%; }
  .valueTitle dt,
  .valueTitle2 dt{width: 70%; margin-left: auto; margin-right: auto;}
  .valueTitle dd img{ width: 100%; max-width: 465px; }
  #sweet .item{ flex-wrap: wrap; }
  #sweet .item li:first-child,
  #sweet .item li:nth-child(2),#sweet .item li:nth-child(3),#sweet .item li:nth-child(4){ margin-bottom: 2vw; margin-left:1vw ; }
  #sweet .item li{ width: 22%; }
  /*#wet,#slice,#taste*/
  .item.itemBox{ display: block; }
  .newIcon::after{ background-position: center 0; 
    left: 50%;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    width: 100%;
    background-size: 70%;  }
  .newIcon{ margin:0 auto 3%;  text-align: center;}
  #stick .newIcon::after { bottom: -3px;}
  #stick .item, #gum .item,#taste .item { flex-wrap: wrap; }
  #stick .separates,#gum .separates,#taste .separates{ width: 100%;}
  #stick::after{ bottom: 0; }
  #stick::after,#topping::after{  background-size: 90%; width: 78px;}

#stick .item li{ width: /*28*/22%; }
#stick .item li:first-child img{ width: 83%; }

#stick .item li,#gum .item li{  margin-bottom:  4vw;}
#topping .item { flex-wrap:wrap ; }
#topping .item li picture{  margin-left: 5%;  margin-right: 5%; }
#topping .item li{ width: 23%/*33*/; }
#topping .item li:last-child{ width: 19.3%; }
#topping .item li:not(:last-child){ margin-right: 3%; }

#topping::after{bottom: -15vw; right:0%;  }

#gum .item li{ text-align: center;}
#gum .newIcon::after,#taste .newIcon::after{ bottom:-0.9vw }
#gum .item li:first-child{ width: 25%; }
#gum .item li:nth-child(2){ width: /*34*/ 18.6%; }
#gum .item li:nth-child(3){ width: /*28.4*/25.3%; }
#gum .item li:nth-child(4){ width: /*31*/21%; }
#gum .item li:nth-child(5){ width: 28%; }
#gum .item li:nth-child(6),#gum .item li:nth-child(7){ width: 25.2%; }


#slice .item li /*picture*/{ margin-left: 9%;  margin-right: 9%; }

#taste .item.separates{ flex-wrap: nowrap; justify-content: center;}
#taste .item li{ margin: 0 2% ;}
#taste .item li:first-child{ width: 198px; }
#package{ text-align: center; }
}

@media screen  and (max-width: 640px) {
#topping::after{bottom: 0;top: -45px; left: 76%;}
}

@media screen and (min-width: 441px) and (max-width: 580px) {
#stick::after { bottom: -25vw;}
}
@media screen  and (max-width: 440px) {
  #stick::after { bottom: -35vw;}
  }
/*
@media screen and (max-width: 750px) and (min-width: 641px) {
#typeTitle{ margin-top: -5%; }
}

@media screen and (max-width: 640px) and (min-width: 481px) {
  #typeTitle{ margin-top: -7%; }
}*/

@media screen and (max-width: 750px) and (min-width: 481px) {
#wet .item li { margin-left: 10%; margin-right: 10%; }
/*#stick .newIcon img,#taste .newIcon img ,#gum .newIcon img{ max-width: 200px; }*/

}

@media screen and (max-width: 480px) {
#typeTitle{ margin-top: -26px; }
#stick .newIcon img /*,#gum .newIcon img*/{ width:50% }
/*#taste .newIcon img{ width:60% }*/
#slice .newIcon img{ width: 70%; }
#wet .item li { margin-left: 13%; margin-right: 13%; }
}

@media screen and (max-width: 350px) {
#gum .item li:first-child,
#gum .item li:nth-child(2),
#gum .item li:nth-child(3){ margin-right: 4%; }

#gum .item li:first-child, #gum .item li:nth-child(5){ width: 22%; }
#gum .item li:nth-child(2){ width: 16.6%; }
#gum .item li:nth-child(3){ width: 22.8%; }
#gum .item li:nth-child(4){ width: 19%; }

#gum .item li:nth-child(6),#gum .item li:nth-child(7){ width: 20%; }
#stick::after, #topping::after{ top:-10.5vw }
}