/* ================================
  future_chaki_summer
  MB→PC min-width:1100px
================================ */
.intro {
  border-top: 1px dotted #333;
  margin: 2rem 0 0;
  padding: 2rem 0 0;
}

#futureChakiSummer .recipe {
  margin: 3rem auto;
  text-align: center;
}
#futureChakiSummer .recipe > ol {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
#futureChakiSummer .recipe > ol > li {
  margin: 0;
  padding: 0;
}

/*  */
#chaki dl .itemBox {
  display: flex;
  margin: 2rem 0;
  width: 100%;
}
#chaki dl .itemBox dt {
  width: 45%;
  max-width: 400px;
  margin: 0 5% 0 0;
}
#chaki dl .itemBox dt img {
  border-radius: 12px;
}
#chaki dl .itemBox dd {
  flex: 1;
}
#chaki dl .itemBox dd .itemName {
  font-size: min(4vw, 24px);
}
#chaki dl .itemBox dd p {
  font-size: min(3.5vw, 16px);
  line-height: 1.4;
}
#chaki dl .itemBox dd .btn {
  text-align: right;
}
#chaki dl .itemBox dd .btn a {
  display: inline-block;
  background: #333;
  border-radius: 6px;
  color: #fff;
  margin: 10px 0 0 auto;
  padding: 5px 15px;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #futureChakiSummer .recipe h3 {
    margin-right: -6%;
    margin-left: -6%;
  }
}

@media screen and (min-width: 768px), print {
  #chaki dl .itemBox {
    align-items: center;
  }
  #chaki dl .itemBox dd .btn a {
    margin-top: 1.5rem;
    font-size: 13px;
  }
}

@media (hover: hover) {
  #futureChakiSummer a:hover img,
  #futureChakiSummer .btn a:hover {
    opacity: 0.6;
  }
}
@media (hover: none) {
  #futureChakiSummer a:hover img,
  #futureChakiSummer .btn a:active {
    opacity: 0.6;
  }
}