.bloginside { display: block; position: relative; margin: 0 0 20px 0; padding: 15px; background-color: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.18); border-radius: 3px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.blog-fluid { position: relative; width: 100%; -webkit-flex: 0 0 100%; -moz-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

.recipe-title { position: relative; margin: 10px 0 20px 0; padding: 0 0 7px 0; border-bottom: solid 2px #1e90cc; font-size: 24px; font-weight: 700; line-height: 30px; color: #1e90cc; }
.recipe-title span { position: relative; padding: 0; background-color: #fff; z-index: 1; }


.recipe-list { position: relative; }

.recipe-items { position: relative; display: flex; flex-direction: column; margin-bottom: 30px; background-color: #fff; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24); }
.recipe-image { position: relative; }
.recipe-img { position: relative; padding-top: 60%; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; overflow: hidden; z-index: 0; opacity: 1; border-radius: 0; }
.recipe-img img { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; min-width: 1%; max-width: 100%; height: auto; border-radius: 0; }
.recipe-txt { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; align-items: flex-start; padding: 10px;}
.recipe-txt h6 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; height: 40px; font-size: 16px; font-weight: 700; line-height: 20px; }
.recipe-txt p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 10px 0; width: 100%; height: 60px; font-size: 14px; font-weight: 400; line-height: 20px; }
.recipe-meta { padding: 10px 0 0 0; width: 100%; border-top: dashed 1px #ccc; font-size: 12px; color: #999; }
.recipe-meta span { display: block; }
.recipe-meta .recipe-category a, .recipe-meta .recipe-category a:link { color: #999; }
.recipe-meta .recipe-category::before { display: inline-block; margin-right: 5px; font-family: 'FontAwesome'; font-weight: 900; content: "\f02c"; font-weight: 900; }
.recipe-meta .recipe-category a::before { content: ", "; }
.recipe-meta .recipe-category a:first-child::before { content: ""; }
.recipe-items:hover { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.recipe-items:hover .recipe-img { opacity: 0.8; }
.recipe-txt a:hover h6, .recipe-meta .recipe-category a:hover { color: #1e90cc; }
.recipe-txt-detail {height: 60px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 10px 0;}

a.readmore { position: relative; padding: 10px 30px 10px 10px; width: auto; background-color: #1e90cc; border-radius: 0 0 5px 5px; border-bottom: solid 3px #54abd8; text-align: center; color: #fff; font-size: 12px; }
a.readmore:before { position: absolute; top: 50%; right: 10px; width: 18px; height: 18px; background-color: #fff; border-radius: 50%; color: #1e90cc; font-family: 'FontAwesome'; content: "\f105"; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); }
a.readmore:hover { opacity: 0.8; }

.recipe-detail { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: flex-start; margin: 0 15px 30px 15px; width: -webkit-fill-available; background-color: #eee; width: -moz-available; }
.recipe-detail .recipe-image { margin-right: 15px; width: 55%; }
.recipe-detail .recipe-txt { margin-top: 10px; width: 45%; }
.recipe-detail .recipe-txt h6 { display: block; -webkit-line-clamp: unset; margin-bottom: 10px; height: auto; }
.recipe-detail .recipe-txt p { display: block; -webkit-line-clamp: unset; height: auto; }

.recipe-subtitle { position: relative; margin-bottom: 20px; padding-bottom: 10px; border-bottom: solid 1px #ddd; font-size: 18px; font-weight: 700; line-height: 18px; }

.recipe-ingredients { margin-bottom: 30px; line-height: 24px; padding: 15px; background: #f8f8f8; box-shadow: 0 0 5px rgba(0,0,0,.2);}
.recipe-ingredients ul {  }
.recipe-ingredients ul li { position: relative; margin-bottom: 10px; padding-bottom: 10px; border-bottom: dashed 1px #ddd; display: flex; flex-direction: row; }
.recipe-ingredients ul li p { flex: 1; }
.recipe-ingredients ul li p b { display: block; margin: 0 0 15px 0; padding: 5px 0; border-bottom: dashed 1px #ddd; font-weight: 400; }
.recipe-ingredients ul li p span { float: right; }
.recipe-ingredients ul li span { margin-left: -30px; float: right; }
.recipe-ingredients ul li.recipe-row { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; height: 125px; }

.recipe-ingredients ul li .material-img { position: relative; width: 100px; margin-right: 10px; }
.recipe-ingredients ul li .material-img .material-thumb { display: block; position: relative; padding-top: 100%; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; overflow: hidden; z-index: 0; opacity: 1; background-image: url(../img/no-img.jpg); }
.recipe-ingredients ul li .material-img img { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; min-width: 1%; max-width: 100%; height: auto; }

.recipe-ingredients ul li .recipe-column { display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
.recipe-ingredients ul li .recipe-column span { margin-left: 0; margin-top: 10px; }


.recipe-howto { line-height: 24px; }
.recipe-howto p { margin: 0 0 20px 40px; }
.recipe-howto p span { position: relative; left: -20px; margin-left: -13px; }

.recipe-howto-video { margin-top: 30px; padding-top: 30px; border-top: dashed 1px #ddd; text-align: center; }

.recipe-btn { overflow: hidden; }
.recipe-btn .addfav { width: 40px; height: 40px; float: left; font-size: 16px; }
.recipe-btn .addfav a { display: block; background-color: #54c0e4; border-radius: 0 0 0 4px; }
.recipe-btn .addmore { position: relative; margin-left: 40px; height: 40px; }
.recipe-btn .addmore a { display: block; padding-right: 30px; background-color: #1e90cc; border-radius: 0 0 4px 0; font-size: 12px; }
.recipe-btn .addmore a:after { position: absolute; top: 50%; right: 10px; width: 18px; height: 18px; background-color: #fff; border-radius: 50%; color: #1e90cc !important; font-family: 'FontAwesome'; content: "\f105"; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); line-height: 18px; }
.recipe-btn a { height: 40px; line-height: 40px; color: #fff; text-align: center; }
.recipe-btn a:hover { opacity: 0.8; }
.recipe-ingredients ul li .addcart { position: absolute; bottom: 10px; right: 0; padding: 0 10px; width: 130px; height: 32px; background-color: #1e90cc; border: none; border-bottom: solid 3px #54abd8; border-radius: 4px; outline: none; text-align: center; color: #fff; font-size: 12px; }
.recipe-ingredients ul li .addcart:before { margin-right: 10px; font-family: 'FontAwesome'; content: "\f07a"; font-size: 14px; }
.recipe-ingredients ul li .addcart:hover, .recipe-ingredients ul li .addcart:active { opacity: 0.8; }    

@media only screen and (min-width: 320px) and (max-width: 767px)  {
    .recipe-detail { flex-direction: column; margin-left: 10px; margin-right: 10px; }
    .recipe-detail .recipe-image { margin-right: 0; width: 100%; }
    .recipe-detail .recipe-txt { width: 100%; }
    .recipe-howto-video iframe { width: 100%; }

    .recipe-ingredients ul li .material-img { width: 80px; }
}

/*Edit 2023/01/24 */
/* recipe detail */
.menu-recipe-area { position: relative; margin-bottom: 20px; padding: 0; width: 100%; height: auto; overflow: hidden; }
.menu-recipe-inside { padding: 0; } 
.recipe-step { position: relative; }
.recipe-step .item { position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-content: center; align-items: stretch; padding: 20px; border-top: dashed 1px #ddd; }
.recipe-step .item:first-child { border-top: none; }
.recipe-step .item .numb { position: relative; width: 48px; opacity: 1; }
.recipe-step .item .numb:before { position: absolute; top: -10px; left: -10px; content: ""; width: 36px; height: 36px; background-color: rgba(84, 171, 216, 0.3); border-radius: 999px; z-index: 0; }
.recipe-step .item .numb span { position: relative; display: block; padding: 10px; width: 48px; height: 48px; background-color: #1e90cc; border-radius: 999px; color: #fff; font-family: 'Dongle', sans-serif; font-size: 36px; font-weight: 400; line-height: 16px; text-align: center; z-index: 1; }
.recipe-step .item .numb span:before { display: block; content: "STEP"; font-family: 'Dongle', sans-serif; font-size: 14px; font-weight: 300; line-height: 1em; letter-spacing: 2px; }
.recipe-step .item .desc { margin: 0 0 0 20px; padding: 0 0 0 20px; border-left: dashed 1px #ddd; }
.recipe-step .item .desc .txt { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; }
.recipe-step .img { position: relative; width: 120px; }
.recipe-step .img .thumb { display: block; position: relative; padding-top: 70%; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; overflow: hidden; z-index: 0; opacity: 1; background-image: url(../img/no-img.jpg); }
.recipe-step .img img { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; min-width: 1%; max-width: 100%; height: auto; }
.recipe-step .item .desc .txt .detail { flex: 1; margin-left: 20px; }

.recipe-step .item:hover { background: #ecf9ff; }
.no-box-shadow{ box-shadow: unset !important; }
.round-circle{ border-radius:999px; box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.24); }
.img-used{ max-width:60px; }
.list_items_meterial .img{ margin: 5px 10px 5px 5px; }
.list_items_meterial.slick-slider { padding: 0 30px !important; }
.list_items_meterial .slick-prev, .list_items_meterial .slick-next { width: 27px; height: 60px; background-color: rgba(0, 0, 0, 0.2); z-index: 1000; }
.list_items_meterial .slick-prev::before, .list_items_meterial .slick-next::before { display: none; }
.list_items_meterial .slick-prev { left: 0; background-image: url('../img/common/ic-arrow-prev.png'); background-size: cover; }
.list_items_meterial .slick-next { right: 0; background-image: url('../img/common/ic-arrow-next.png'); background-size: cover; }

@media only screen and (min-width: 320px) and (max-width: 767px)  {
  .recipe-step .item { padding: 10px 0; }
  .recipe-step .item .numb { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80px; /*flex: 1 auto;*/ }
  .recipe-step .item .numb:before { /*top: -5px; left: -5px; width: 24px; height: 24px;*/ display: none; }
  .recipe-step .item .numb span { margin-bottom: 10px; padding: 7px 5px; width: 36px; height: 36px; font-size: 24px; line-height: 16px; }
  .recipe-step .item .numb span:before { font-size: 12px; letter-spacing: 1px; }
  .recipe-step .item .desc { margin: 0 0 0 10px; padding: 0 0 0 10px; }
  .recipe-step .item .desc .txt { flex-direction: column; }
  .recipe-step .item .desc .txt .detail { margin-left: 0; }
  .recipe-step .img { width: 80px; }
  .list_items_meterial .img{ margin:5px 0px; }
}