/* CSS Document */
@import url("common1.css");
picture{ line-height: 0; display: block; }
#newitemWrap{ background: #ea5432;}
#newIteminner{  background: url(../image/taste.png) 0 0 repeat-y #f1e5d5; 
position: relative;}

#newIteminner::before,#newIteminner::after{ content: ""; position: absolute; top:-17px; display: block;
  height: 0; width: 0;
  border-top: 0 solid transparent;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: #ea5432 40px solid;
}
#newIteminner::before{ left:-30px;
  transform: rotate(-46deg);
  -webkit-transform: rotate(-46deg);
  -ms-transform: rotate(-46deg);}

#newIteminner::after{ right:-30px;
  transform: rotate(46deg);
  -webkit-transform: rotate(46deg);
  -ms-transform: rotate(46deg); }


.txtcenter{ text-align: center; }
#newIteminner .txtcenter{ margin-bottom: 30px; }

#newIteminner li:nth-child(6){ margin-top: 7px; }
#newIteminner li:nth-child(7){ margin-top: 20px; }

#newIteminner ul{display: flex;  flex-wrap: wrap;}
#typeWrap{ background: #bbe2e3; }
#typeInner{ background: url(../image/typebg.gif) 0 0 repeat #fff; }

#typeTitle{ margin-top: -30px; margin-bottom: 5px; }
.newIcon{ position: relative; padding-bottom: 30px;}
.newIcon::after{ position: absolute; content: ""; background: url(../image/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{ right:0; bottom:10px;
  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){
  #wet{ width: 30%; }
  #gum{ width: 68%; }
  #taste .newIcon::after{ bottom:0.6vw }
  #taste dd{ height: 83px; }

}
@media screen and (min-width: 751px) 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%; }

/*.item.itemBox{ display: block; }
#gum,#slice{ margin-bottom: 60px; }*/
#gum .item li{ width: 26%; }
#gum .item li:nth-child(2){ width: 35%; }
#gum .item li:nth-child(3){ width: 29.5%; }

/*#wet{ width: 100%; }*/
#taste dd{ height: 8.4vw; }

}

@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; }

  #stick::after { right: -5.5vw; }

#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: 831px) {
#newIteminner li#item3 dl{ margin-top: -3vw;}
}

@media screen and (min-width: 751px) and (max-width: 830px) {
#newIteminner li#item3 dl{ margin-top: 10px}

}

@media screen and (min-width: 751px) {
.value .contents .product_section:not(:first-child) {
  margin-top: 50px; }

#newitemWrap{ padding: 40px 45px;}
#newIteminner{ padding:40px 32px 20px}
#newIteminner ul{ justify-content: space-evenly; }
#newIteminner li{ margin-bottom: 30px; margin-left: 6%; width: 40%;}
/*#newIteminner li:nth-child(even) { width: 36%; }*/
#newIteminner li:nth-child(even) p,
#newIteminner li:nth-child(even) dl{ margin-left: -20px; }
#newIteminner li p,#newIteminner li dl{ margin-top: 20px; }
#newIteminner li dd{ margin-bottom: 10px;}

#typeWrap{ padding:25px}
#typeInner{ padding:20px 55px 1px 30px}
.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; }

#gum{ 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; }


}


@media screen and (max-width: 750px) {
  .value .contents .product_section:not(:first-child) {
    margin-top: 6%; }
.contents .product_section ul li {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  #newitemWrap, #typeWrap{ padding:4vw}
  #newIteminner{ padding:7vw 5% }
/*  .item{ align-items: flex-start; }*/
  #newIteminner li:not(:last-child){ margin-bottom: 12vw; }
  #newIteminner li picture{ margin:0 3% }
  #newIteminner li p picture,
  #newIteminner li dl picture{ margin:0  }
  #newIteminner li p,#newIteminner li dl{ margin-top: 7%; }
  #newIteminner li dt{ text-align: left; width: 60%;}
  #newIteminner li dd{ margin-bottom: 4%;}

  #typeInner{ padding:20px 4vw 1px}
  .itemBox,#gum,#slice{ margin-bottom: 7vw; }
  .valueTitle{  margin-bottom: 6%;}
  .valueTitle dt{ margin-bottom: 3%; }
  .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,#topping::after{ bottom: 0; background-size: 90%; width: 55px; top: 0; }

#stick .item li{ width: 28%; }
#stick .item li,#gum .item li{  margin: 0 auto 4vw;}
#topping .item { flex-wrap:wrap ; }
#topping .item li picture{  margin-left: 5%;  margin-right: 5%; }
#topping .item li{ width: 33%; }


#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%; }
#gum .item li:nth-child(3){ width: 28.4%; }
#gum .item li:nth-child(4){ width: 31%; }
#gum .item li:nth-child(5),#gum .item li:nth-child(6){ width: 28%; }


#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% ;}

}

@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) {
#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(5),#gum .item li:nth-child(6){ width: 26%; }
#gum .item li:nth-child(2){ width: 34.6%; }
#gum .item li:nth-child(3),
#gum .item li:nth-child(4){ width: 28.8%; }

#stick::after, #topping::after{ top:-3.5vw }
}