.wrapper {width: 100%; box-sizing: border-box; max-width: 1200px; overflow: hidden; margin: 50px auto 0 auto;}
.main_title {width: 95%; margin: 80px auto 0 auto; padding: 1em 0; border-radius: 24px;}
.main_title_img {border-radius: 24px;}
#one {position: relative; z-index: 9; width: 95%; margin: 20px auto 0 auto;}
.info {display: grid; gap: 10px; grid-template-columns: auto 1fr; width: 100%; max-width: 600px; margin: 2em auto 1em auto; background: rgba(255, 255, 255, 0.8);}
.info_ttl h2 {color: #19386A; font-size: 29px; position: relative; display: inline-block;}
.info_ttl h2:before {position: absolute; content: attr(data-sub); top: 2em; left: 50%; transform: translateX(-50%); color: #aaa; font-size: 13px;}
.info_inner {border-top: 2px solid #CCCCCC;}
.info_text {border-bottom: 2px solid #CCCCCC; color: #19386A; padding: 15px 10px; line-height: 1.6em; font-size: 15px; display: flex; align-items: center;}
.list-info-date {margin-right: 40px;}
.list-info-newicon {background-color: #cf4332; color: #fff; text-align: center; line-height: 1.6; padding: 0 4px; font-size: 14px; display: inline-block; margin-right: 10px;}
#two {position: relative; z-index: 9;}
.recipe {background-color: rgb(215 134 77 / 80%);}
.n_area {padding: 20px; border-radius: 24px; margin: 50px auto; width: 95%;}
.inner {width: 100%; padding: 0; margin: 0 auto; box-sizing: border-box;}
.area_left {margin: 0 0 20px 20px; padding: 20px 0 0 0; border: none; font-size: 2em; font-weight: bold; color: #fff;}
.features {display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 0 auto; gap: 2em 1.4em; width: 95%; padding-bottom: 30px;}
.features article {display: flex; flex-direction: column;}
.features article a {width: 100%; /* aspect-ratio: 10 / 6.7; */}
.features article img {border-radius: 5px; object-fit: cover; width: 100%; height: 100%;}
.features article img:hover {transition: .3s; transform: scale(1.1) /*rotate(5deg)*/;}
.recipe_image {display: block; position: relative; overflow: hidden; border-radius: 11px; border: 5px solid #fff;}
.recipe_name {font-weight: bold; font-size: 1.43em; line-height: 1.2em; color: #fff; margin-top: 10px; margin-left: 5px;}
.and_more {text-align: center; color: #228132; font-weight: bold; padding: 2em 0; font-size: 1.3em;}

@media (max-width: 768px){
  .wrapper {margin: 100px auto 0 auto;}
  .main_title {width: 100%; margin: 0; padding: 0; border-radius: 0;}
  .main_title_img {border-radius: 0px;}
  .info {display: block; width: 100%; margin: 30px auto;}
  .info_ttl {text-align: center;}
  .info_inner {margin-top: 2em;}
  .info_text {display: block; padding: 10px 0;}
  .list-info-date {margin-bottom: 10px;}
  .area_left {margin: 0 0 20px 0px; text-align: center;}
  .features {grid-template-columns: 1fr 1fr; padding: 10px 0;}
}

@media (max-width: 450px){
  .wrapper {margin: 0 auto;}
  .features {grid-template-columns: 1fr;}
}