/*20241023 縺九ｓ縺溘ｓ縺翫＞縺励＞譁咏炊髮�隼菫ｮ逕ｨ*/

.content_index.-wide {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.content_index.-wide li {
  flex-basis: 20%;
}

.recipe_wrap .section_title {
  margin-bottom: 60px;
}

@media screen and (max-width: 770px) {
  .recipe_wrap .section_title {
    margin-bottom: 30px;
  }
}

.recipe_area {
  margin-bottom: 100px;
}

@media screen and (max-width: 770px) {
  .recipe_area {
    margin-bottom: 40px;
  }
}

.recipe_area .section_title02 {
  margin-bottom: 20px;
}


.recipe_area .intro_box {
  margin-bottom: 40px;
  text-align: center;
}

@media screen and (max-width: 770px) {
  .recipe_area .intro_box {
    max-width: fit-content;
    margin-inline: auto;
    text-align: left;
    margin-bottom: 20px;
  }
}

.recipe_area .time_box {
  display: flex;
  align-items: center;
  gap: 1.2em;
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.recipe_area .time_box dt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.recipe_area .time_box dt::before {
  content: "";
  mask: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_157_2)"><path d="M3.58903 8.28369C3.62017 8.29314 3.65161 8.29924 3.68271 8.29924C3.817 8.29924 3.93907 8.21502 3.97966 8.08041C4.03278 7.91502 3.94212 7.73986 3.77978 7.68674C3.61407 7.6367 3.43892 7.72732 3.38579 7.88998C3.33267 8.05545 3.42333 8.2306 3.58903 8.28369Z" fill="%234B4B4B"/><path d="M6.07007 4.97132C6.13569 4.97132 6.20159 4.94937 6.25777 4.90874H6.25472C6.39511 4.80867 6.42347 4.61179 6.32339 4.47417C6.22026 4.33378 6.02339 4.30542 5.88577 4.4055C5.74511 4.50867 5.71702 4.70246 5.82015 4.84312C5.87968 4.92738 5.9764 4.97132 6.07007 4.97132Z" fill="%234B4B4B"/><path d="M9.95776 3.68042C9.96081 3.68042 9.96081 3.68042 9.96081 3.68042C10.1326 3.68042 10.2733 3.54003 10.2703 3.36792C10.2703 3.19304 10.1296 3.05542 9.95776 3.05542C9.78292 3.05878 9.64526 3.19917 9.64526 3.37128C9.64831 3.54308 9.78597 3.68042 9.95776 3.68042Z" fill="%234B4B4B"/><path d="M13.8609 4.92428C13.9577 4.92428 14.0547 4.87729 14.1139 4.79307C14.2171 4.65237 14.1826 4.45862 14.0422 4.35881C13.9015 4.25565 13.7077 4.28983 13.6076 4.43053C13.5078 4.57124 13.5389 4.76499 13.6796 4.86479C13.7358 4.90569 13.7984 4.92428 13.8609 4.92428Z" fill="%234B4B4B"/><path d="M3.60768 11.7838C3.44229 11.8369 3.35467 12.0151 3.41085 12.1774C3.4078 12.1774 3.4078 12.1774 3.4078 12.1774C3.45143 12.3087 3.5735 12.3932 3.7078 12.3932C3.73893 12.3932 3.77038 12.3898 3.80452 12.3773C3.96717 12.3243 4.0578 12.1463 4.00167 11.9837C3.94823 11.8179 3.77034 11.7307 3.60768 11.7838Z" fill="%234B4B4B"/><path d="M5.8733 15.1993C5.7735 15.34 5.80463 15.5337 5.94533 15.6369C6.0015 15.6744 6.06404 15.693 6.12662 15.693C6.22334 15.693 6.32041 15.6494 6.38264 15.5649C6.48275 15.4242 6.45162 15.2274 6.31092 15.1276C6.17021 15.0275 5.97338 15.0586 5.8733 15.1993Z" fill="%234B4B4B"/><path d="M16.4076 11.7273C16.2422 11.6742 16.0671 11.7648 16.014 11.9305C15.9608 12.0932 16.0515 12.2711 16.2172 12.3212C16.2483 12.3337 16.2798 12.3367 16.314 12.3367C16.4452 12.3367 16.5672 12.2525 16.6109 12.1212C16.664 11.9555 16.5703 11.7807 16.4076 11.7273Z" fill="%234B4B4B"/><path d="M16.2984 8.24312C16.3295 8.24312 16.361 8.23671 16.3951 8.22757C16.5578 8.17109 16.6484 7.99625 16.5953 7.83054C16.5922 7.82445 16.5889 7.81804 16.5858 7.81195V7.80859C16.5328 7.64625 16.3545 7.55867 16.1922 7.61175C16.0265 7.66488 15.9389 7.84308 15.992 8.00574C15.9953 8.01183 15.9984 8.01824 15.9984 8.02437C16.0014 8.02437 16.0014 8.02437 16.0014 8.02742C16.0421 8.15855 16.1672 8.24312 16.2984 8.24312Z" fill="%234B4B4B"/><path d="M13.7358 15.0961C13.5951 15.1993 13.564 15.3931 13.6672 15.5337C13.7264 15.6149 13.8234 15.6619 13.9202 15.6619C13.9827 15.6619 14.0483 15.6399 14.1014 15.5993C14.2421 15.4992 14.2732 15.3024 14.1704 15.1647C14.0672 15.0244 13.8735 14.9929 13.7358 15.0961Z" fill="%234B4B4B"/><path d="M10.0264 16.3181C9.85463 16.3181 9.71392 16.4588 9.71728 16.6336C9.71728 16.8054 9.85767 16.9431 10.0298 16.9431C10.2016 16.9431 10.3423 16.8024 10.3423 16.6306C10.3389 16.4557 10.1982 16.3181 10.0264 16.3181Z" fill="%234B4B4B"/><path d="M10 0C4.48594 0 0 4.48609 0 10C0 15.5142 4.48594 20 10 20C15.5141 20 20 15.5142 20 10C20 4.48609 15.5141 0 10 0ZM10 17.619C5.79895 17.619 2.38098 14.2014 2.38098 10C2.38098 5.79895 5.79895 2.38098 10 2.38098C14.2011 2.38098 17.619 5.79895 17.619 10C17.619 14.2014 14.2011 17.619 10 17.619Z" fill="%234B4B4B"/><path d="M10.8139 5.10437H9.17999V9.70398V10.5209V11.3379H14.5967V9.70398H10.8139V5.10437Z" fill="%234B4B4B"/></g><defs><clipPath id="clip0_157_2"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
  background-color: currentColor;
  width: 30px;
  height: 30px;
  mask-size: contain;
  mask-repeat: no-repeat;
  display: block;
}

.recipe_area .time_box dd {
  line-height: 1.4;
}

.recipe_area .time_box .time_cap {
  font-size: 1.5rem;
}

.recipe_area .recipe_material td {
  vertical-align: middle;
}

.recipe_area .recipe_material td.vertical_middle {
  text-align: center;
}

.recipe_area .howto_box .flex {
  justify-content: flex-start;
  gap:20px 35px;
}

.recipe_area .material_area {
  margin-bottom: 0;
}

.recipe_area .material_title {
  margin-bottom: 0;
}

@media screen and (max-width: 770px) {
  .recipe_area .material_title {
    margin-bottom: 8px;
  }
}

.howto_cook_box .flex{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

@media screen and (max-width: 500px) {

  .howto_cook_box .flex{    
    grid-template-columns: 1fr;
  }

  .howto_cook_box .column3{
    width: 100%;
  }
}

.howto_cook_box .flex > div {
  margin-bottom: 0;
}

.recipe_area .recipe_box {
  gap: 20px;
}

@media screen and (max-width: 1024px) {
  .recipe_area .recipe_box {
    max-width: 458px;
    margin-inline: auto;
    flex-direction: column;
  }
}

@media screen and (max-width: 500px) {
  .recipe_area .recipe_box {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 500px) {
  .recipe_area .howto_txt {
    margin-bottom: 0;
  }
}