@charset "UTF-8";
/**********************************************
  product
***********************************************/
.product__innerView {
  background-image: url(../images/product/product_inner-mv.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.product__ttl {
  margin-top: 100px;
}
.product__slider {
  margin-top: 60px;
  gap: 20px;
}
.product__campaign  {
  margin-top: 120px;
}
.product__handled {
  margin-bottom: 120px;
}
@media screen and (min-width: 848.999px) {
  .product__innerView {
    height: 540px;
    padding-top: 100px;
  }
}
@media screen and (max-width: 849px) {
  /* TB/SP */
  .product__innerView {
    height: 40vw;
    min-height: 340px;
    padding-top: 50px;
  }
  .product__campaign {
    margin-top: 60px;
  }
  .product__handled {
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 768px) {
  /* SP */
  .product__ttl {
    margin-top: 50px;
  }
  .product__slider {
    margin-top: 30px;
  }
}
/**********************************************
  newitem
***********************************************/
.newitem__imgTxt {
  margin-top: 60px;
}
.newitem__imgArea {
  max-width: 540px;
  min-width: 300px;
  flex-shrink: 1;
}
.newitem__caption {
  padding-top: 0;
}
.newitem__ttl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--font-size-l);
  line-height: 1;
}
.newitem__price {
  font-size: var(--font-size-s);
}
.newitem__txt {
  margin-top: 40px;
}
.newitem__allergy {
  width: 100%;
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  /* SP */
  .newitem__imgTxt {
    margin-top: 30px;
  }
  .newitem__caption {
    max-width: 540px;
    padding: 0;
    margin-top: 20px;
  }
}

/**********************************************
  campaign
***********************************************/
.campaign {
  background-color: var(--sub-color);
  padding: 100px 0 120px;
}
.campaign__inner {
  margin: 0 auto;
}
.campaign__slider02 {
  margin-top: 60px;
}
@media screen and (max-width: 849px) {
  /* TB/SP */
  .campaign__slider02 {
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .campaign {
    background-color: var(--sub-color);
    padding: 50px 0 60px;
  }
}

/* campaignのslick特有CSSの上書き変更*/
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider02 .slick-slide {
  margin: 0 10px !important;
}

/*矢印の設定*/
.slick-prev,
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;/*矢印の色*/
  border-right: 2px solid #666;/*矢印の色*/
  height: 15px;
  width: 15px;
}
.slick-prev {/*戻る矢印の位置と形状*/
  left: -1%;
  transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
  right: -1%;
  transform: rotate(45deg);
}
.slick-prev:before,
.slick-next:before {
  content: none;
}

/*ドットナビゲーションの設定*/
.slick-dots {
  text-align:center;
  margin:20px 0 0 0;
  bottom: -35px;
}
.slick-dots li {
  display:inline-block;
  margin:0 5px;
}
.slick-dots li button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#ccc;/*ドットボタンの色*/
}
.slick-dots li button:before{
  content: ''!important;
  height:100%!important;
  width: 100%!important;
}
.slick-dots .slick-active button{
  background: var(--accent-color);/*ドットボタンの現在地表示の色*/
}
@media screen and (max-width: 849px) {
  /* TB */
  .slider02 .slick-slide {
    margin: 0 8px !important;
  }
  .slick-prev {/*戻る矢印の位置と形状*/
    left: -5%;
  }
  .slick-next {/*次へ矢印の位置と形状*/
    right: -5%;
  }
}
@media screen and (max-width: 768px) {
  /* SP */
  .slider02 .slick-slide {
    margin: 0;
  }
}