/* ベース */
#kitchen-kaden-summer {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
}
#kitchen-kaden-summer img {
  width: 100%;
  position: relative;
}
#kitchen-kaden-summer .pc_none {
  display: none;
}

/* 背景色 */
#kitchen-kaden-summer #item_area_1 {
  padding-bottom: 20px;
  background-color: #fff6f0; 
}
#kitchen-kaden-summer #item_area_2 {
  padding-bottom: 20px;
  background-color: #f0fcff; 
}
#kitchen-kaden-summer #item_area_3 {
  padding-bottom: 20px;
  background-color: #f0fff3; 
}
#kitchen-kaden-summer #item_area_4 {
  padding-bottom: 20px;
  background-color: #fff0f0; 
}

/* 見出し */
#kitchen-kaden-summer #item_area_1 h2 {
  font-size: 25px; 
  text-align: center; 
  color: #fff; 
  border: none; 
  margin: 0; 
  display: block;
  line-height: 30px; 
  background-color: #f1805a; 
  padding: 2%;
}
#kitchen-kaden-summer #item_area_2 h2 {
  font-size: 25px; 
  text-align: center; 
  color: #fff; 
  border: none; 
  margin: 0; 
  display: block;
  line-height: 30px; 
  background-color: #77c3df; 
  padding: 2%;
}
#kitchen-kaden-summer #item_area_3 h2 {
  font-size: 25px; 
  text-align: center; 
  color: #fff; 
  border: none; 
  margin: 0; 
  display: block;
  line-height: 30px; 
  background-color: #87d17d; 
  padding: 2%;
}
#kitchen-kaden-summer #item_area_4 h2 {
  font-size: 25px; 
  text-align: center; 
  color: #fff; 
  border: none; 
  margin: 0; 
  display: block;
  line-height: 30px; 
  background-color: #ff6666; 
  padding: 2%;
}

/* カラム設定 */
#kitchen-kaden-summer .col_4 {
  padding: 2% 2%; 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 12px;
}
#kitchen-kaden-summer .col_4 > li img {
  width: 100%;
  border-radius: 10px;
}
#kitchen-kaden-summer .col {
  padding: 2% 5%; 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 15px;
}
#kitchen-kaden-summer .col > li {
  position: relative;
  padding: 12px;
  text-align: center; 
  background-color: #fff;
  /* border-radius: 20px; */
}
#kitchen-kaden-summer .col > li:hover {
  opacity:.8;
  transition:.3s;
}
#kitchen-kaden-summer .col > li img {
  width: 100%;
  border-radius: 15px;
}


/* 商品名 */
#kitchen-kaden-summer .col > li .name {
  font-size: 16px; 
  line-height: 24px; 
  margin: 10px 0 5px;
}

/* 訴求ポイント */
#kitchen-kaden-summer #item_area_1 .col > li .point {
  display: inline-flex; 
  justify-content: center;
  align-items: center;
  font-size: 14px; 
  width: 75%; 
  height: 3em;
  line-height: 21px; 
  margin: 8px; 
  color: #fff; 
  padding: 5px 15px;
  background-color: #f1805a;
  border-radius: 50px;
  position: relative;
}
#kitchen-kaden-summer #item_area_2 .col > li .point {
  display: inline-flex; 
  justify-content: center;
  align-items: center;
  font-size: 14px; 
  width: 75%; 
  height: 3em;
  line-height: 21px; 
  margin: 8px; 
  color: #fff; 
  padding: 5px 15px;
  background-color: #77c3df;
  border-radius: 50px;
  position: relative;
}
#kitchen-kaden-summer #item_area_3 .col > li .point {
  display: inline-flex; 
  justify-content: center;
  align-items: center;
  font-size: 14px; 
  width: 75%; 
  height: 3em;
  line-height: 21px; 
  margin: 8px; 
  color: #fff; 
  padding: 5px 15px;
  background-color: #87d17d;
  border-radius: 50px;
  position: relative;
}
#kitchen-kaden-summer #item_area_4 .col > li .point {
  display: inline-flex; 
  justify-content: center;
  align-items: center;
  font-size: 14px; 
  width: 75%; 
  height: 3em;
  line-height: 21px; 
  margin: 8px; 
  color: #fff; 
  padding: 5px 15px;
  background-color: #ff6666;
  border-radius: 50px;
  position: relative;
}

/* 三角形 */
#kitchen-kaden-summer #item_area_1 .col > li .point::before {
  position: absolute;
  content: "";
  background: #f1805a;
  height: calc(tan(44deg)* 19px / 2);
  width: 20px;
  clip-path: polygon(100% 0, 50% 100%, 0 0%);
  bottom: 98%;
  left: 47%;
  transform: rotate(180deg);
}
#kitchen-kaden-summer #item_area_2 .col > li .point::before {
  position: absolute;
  content: "";
  background: #77c3df;
  height: calc(tan(44deg)* 19px / 2);
  width: 20px;
  clip-path: polygon(100% 0, 50% 100%, 0 0%);
  bottom: 98%;
  left: 47%;
  transform: rotate(180deg);
}
#kitchen-kaden-summer #item_area_3 .col > li .point::before {
  position: absolute;
  content: "";
  background: #87d17d;
  height: calc(tan(44deg)* 19px / 2);
  width: 20px;
  clip-path: polygon(100% 0, 50% 100%, 0 0%);
  bottom: 98%;
  left: 47%;
  transform: rotate(180deg);
}
#kitchen-kaden-summer #item_area_4 .col > li .point::before {
  position: absolute;
  content: "";
  background: #ff6666;
  height: calc(tan(44deg)* 19px / 2);
  width: 20px;
  clip-path: polygon(100% 0, 50% 100%, 0 0%);
  bottom: 98%;
  left: 47%;
  transform: rotate(180deg);
}


/* 点線 */
#kitchen-kaden-summer .col > li .line {
  border-bottom: dashed 2px #333; 
  width: 80%; margin: 5px auto;
}

/* 価格 */
#kitchen-kaden-summer .col > li .sale_price {
  position: relative; 
  color: #ed2323; 
  font-size: 30px; 
  line-height: 24px; 
  padding: 7px 0;
}
#kitchen-kaden-summer .col > li .sale_price span {
  font-size: 18px; 
  padding: 0 2% 0 0;
}

/* ボタン2カラム */
/* #kitchen-kaden-summer .btn {
  width: 75%; 
  margin: 10px auto; 
  color: #fff; 
  background-color: #333; 
  text-align: center; 
  border-radius: 5px; 
  position: relative; 
  padding: 3px 0;
} */

/* ボタン1カラム */
#kitchen-kaden-summer .category_btn {
  width: 70%; 
  background-color: #545454; 
  margin: 5px auto 5px; 
  text-align: center; 
  padding: 8px 0; 
  border-radius: 50px; 
  position: relative;
}
#kitchen-kaden-summer .category_btn:hover {
  opacity: 0.8;
}
#kitchen-kaden-summer .category_btn a {
  font-size: 20px; 
  color: #fff; 
  display: block;
}
#kitchen-kaden-summer .category_btn a:hover {
  font-size: 20px; 
  color: #fff!important; 
  display: block; 
  transition: 0.3s all;
}

/* 矢印 */
#kitchen-kaden-summer .col > li .sale_price::after {
  position: absolute; 
  top: 42%; 
  right: 25%; 
  vertical-align: middle;
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid #ed2323;
  border-right: 2px solid #ed2323;
  margin: auto;
  transform: rotate(45deg);
  transition: 0.3s all;
}
#kitchen-kaden-summer .category_btn::after {
  position: absolute; 
  top: 38%; 
  right: 10%; 
  vertical-align: middle;
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: auto;
  transform: rotate(45deg);
  transition: 0.3s all;
}
#kitchen-kaden-summer .category_btn:hover::after {
  right: 8%; 
  transition: 0.3s all;
}


/* ==================================================
アイコン
================================================== */
#kitchen-kaden-summer .point_icon {
  content: "";
  width: 82px;
  height: 82px;
  line-height: 8px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #dc1d22d4;
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  font-size: 25px;
  z-index: 1;
}
#kitchen-kaden-summer .point_icon span {
  font-size: 13px;
  padding-top: 15px;
}

#kitchen-kaden-summer .coupon_icon {
  content: "";
  width: 82px;
  height: 82px;
  line-height: 8px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #dc1d22d4;
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
#kitchen-kaden-summer .coupon_icon span {
  font-size: 20px;
  margin-top: -22px;
}
#kitchen-kaden-summer .coupon_txt {
  font-size: 27px;
  padding-top: 8px;
}