@charset "utf-8";
/* **********************************************
recipe.css
----------------------------------------------
list.php
detail.php
********************************************** */

.recipe_block{
  max-width:1020px;
  margin:0 auto;
  padding:0 15px;
}

.new_recipe_sttl, .normal_recipe_sttl{
  display:flex;
  align-items:center;
  min-height:80px;
  border-top:solid 2px #fc0;
  border-bottom:solid 2px #fc0;
  padding:8px 18px;
  margin:40px 0 25px;
  font-size:22px;
}
.new_recipe_sttl span{
  flex-shrink:0;
  display:inline-block;
  width:80px;
  text-align:center;
  font-size:18px;
  line-height:80px;
  color:#fff;
  margin-right:10px;
  background:#fc0;
  border-radius:50%;
}
.normal_recipe_sttl span{
  flex-shrink:0;
  display:inline-block;
  width:80px;
  height:80px;
  margin-right:10px;
}

.new_recipe_box ul{
  display:flex;
  flex-wrap:wrap;
}
.new_recipe_box ul li{
  width:45.8%;
  margin:0 8.4% 8% 0;
  font-size:16px;
}
.new_recipe_box ul li:nth-child(2n){
  margin-right:0;
}
.new_recipe_box ul li img{
  display:block;
  margin-bottom:20px;
}

.normal_recipe_box ul{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:90px;
}
.normal_recipe_box ul li{
  width:22.9%;
  margin:0 2.8% 20px 0;
  font-size:16px;
  line-height:1.2;
}
.normal_recipe_box ul li img{
  display:block;
  margin-bottom:15px;
}

.new_recipe_box ul li:nth-child(4n),
.normal_recipe_box ul li:nth-child(4n){
  margin-right:0;
}
.new_recipe_box p,
.normal_recipe_box p{
  font-size:16px;
}

.recipe_detail_block{
  max-width:1020px;
  margin:0 auto;
  padding:50px 15px 0;
}

.recipe_detail_block .breadcrumb{
  margin-bottom:45px;
}
.recipe_detail_block .breadcrumb li{
  float:left;
  font-size:14px;
  margin-right:0.5em;
}

.recipe_detail_box01{
  display:flex;
  margin-bottom:20px;
}
.recipe_detail_box01 .recipe_pic{
  width:48.6%;
  margin-right:2.8%;
}
.recipe_detail_box01 .recipe_use_product{
  width:calc(48.6% - 2px);
  border:solid 1px #fc0;
  position:relative;
}
.recipe_detail_box01 .recipe_use_product::before{
  content:"";
  display:block;
  width:100%;
  height:0;
  padding-top:100%;
}
.recipe_detail_box01 .recipe_use_product .inner{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.recipe_detail_box01 .recipe_use_product figure{
  width:51%;
  height:0;
  padding-top:51%;
  margin-bottom:20px;
  position:relative;
}
.recipe_detail_box01 .recipe_use_product figure img{
  position:absolute;
  top:0;
  left:0;
}
.recipe_detail_box01 .recipe_use_product p{
  font-size:16px;
  margin-bottom:15px;
}
.recipe_detail_box01 .recipe_use_product a{
  display:block;
  min-width:calc(51% - 10px);
  padding:12px 5px;
  font-size:14px;
  text-align:center;
  color:#fff;
  background:#ed4c59;
}
.recipe_detail_zairyo{
  margin-bottom:40px;
}
.recipe_detail_zairyo h3, .recipe_detail_tsukurikata h3{
  font-size:18px;
  margin-bottom:20px;
}
.recipe_detail_tsukurikata h3{
  margin-bottom:10px;
}
.recipe_detail_zairyo h4, .recipe_detail_tsukurikata h4{
  font-size:18px;
  margin-bottom:20px;
}
.recipe_detail_tsukurikata h4{
  margin-bottom:10px;
}
.recipe_detail_zairyo ul{
  display:flex;
  flex-wrap:wrap;
}
.recipe_detail_zairyo ul li{
  width:calc(48.5% - 6em);
  margin:0 3% 15px 0;
  padding:0 6em 15px 0;
  border-bottom:solid 1px #b2b2b2;
  font-size:14px;
  position:relative;
}
.recipe_detail_zairyo ul li p{
  position:absolute;
  top:0;
  right:0;
}
.recipe_detail_zairyo ul li:nth-child(2n){
  margin-right:0;
}

.recipe_detail_tsukurikata .making_list_outer{
  display:flex;
  margin-bottom:20px;
}
.recipe_detail_tsukurikata .making_list{
  display:flex;
  align-items:center;
  min-height:40px;
  font-size:14px;
  line-height:1.4;
  padding-left:58px;
  position:relative;
}
.recipe_detail_tsukurikata .making_list_outer:not(:first-of-type){
  margin-top:20px;
  padding-top:20px;
  border-top:solid 1px #b2b2b2;
}
.recipe_detail_tsukurikata .making_list .numbering{
  display:block;
  width:40px;
  line-height:40px;
  font-size:18px;
  font-weight:bold;
  text-align:center;
  color:#fff;
  background:#fc0;
  border-radius:50%;
  position:absolute;
  top:0;
  left:0;
}
.recipe_detail_tsukurikata .making_list:not(:first-of-type) .numbering{
  top:20px;
}
.recipe_detail_tsukurikata .recipe_movie{
  max-width:560px;
  margin:0 auto 30px;
  position:relative;
}
.recipe_detail_tsukurikata .recipe_movie::before{
  content:"";
  display:block;
  width:100%;
  height:0;
  padding-top:56.25%;
}
.recipe_detail_tsukurikata .recipe_movie iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}


/* ------------------------------------------------------------ */
@media screen and (max-width:768px){
/* ------------------------------------------------------------ */

}

/* ------------------------------------------------------------ */
@media screen and (max-width:480px){
/* ------------------------------------------------------------ */

.new_recipe_sttl, .normal_recipe_sttl{
  min-height:60px;
  padding:8px 2px;
  margin:30px 0 25px;
  font-size:18px;
  line-height:1.1;
}
.new_recipe_sttl span{
  width:60px;
  font-size:14px;
  line-height:60px;
  margin-right:8px;
}
.normal_recipe_sttl span{
  width:60px;
  height:60px;
  margin-right:8px;
}

.new_recipe_box ul li{
  width:100%;
  margin:0 0 20px 0;
}
.new_recipe_box ul li img{
  margin-bottom:10px;
}

.recipe_detail_zairyo ul li p{
position:relative;

}
.new_recipe_box ul, .normal_recipe_box ul{
  margin-bottom:50px;
}
.normal_recipe_box ul li{
  width:48%;
  margin:0 4% 20px 0;
}
.normal_recipe_box ul li img{
  margin-bottom:10px;
}

.normal_recipe_box ul li:nth-child(4n){
  margin-right:4%;
}
.normal_recipe_box ul li:nth-child(2n){
  margin-right:0;
}

.recipe_detail_block{
  padding:30px 15px 0;
}

.recipe_detail_block .breadcrumb{
  margin-bottom:25px;
}
.recipe_detail_block .breadcrumb li{
  font-size:13px;
}

.recipe_detail_box01{
  flex-direction:column;
}
.recipe_detail_box01 .recipe_pic{
  width:100%;
  margin-right:0;
  margin-bottom:15px;
}
.recipe_detail_box01 .recipe_use_product{
  width:calc(100% - 2px);
}
.recipe_detail_zairyo ul li{
  width:calc(100% - 6em);
  margin:0 0 15px;
}

.recipe_detail_tsukurikata .making_list{
  padding-left:50px;
}


}

/*検索窓 追加*/
.recipe_block input[type="search"]
{
  -webkit-border-radius : 0;
  -webkit-appearance : none;
  -webkit-tap-highlight-color : rgba(0,0,0,0);
}
.recipe_search_btn
{
  -webkit-border-radius : 0;
  -webkit-appearance: none;
}
.recipe_search{
margin-bottom:10px;
}
.recipe_block  input.recipe_keyword {
width:65%;
}
.recipe_block input.recipeSearch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 0;
  background: url(../img/sg_common/ico_loupe.png) no-repeat;
  background-size: contain;
  text-indent: -9999px;
}
.recipe_block input[type="text"],
.recipe_block input[type="search"]
{
  background:#fff;
  padding:10px;
  font-family: Arial, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-size:16px;
  line-height:1;
  letter-spacing:0;
  border: 2px #ccc solid;
  border-right:none;
  vertical-align : middle;
}
.recipe_block input::placeholder{
  font-family: Arial, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-size:16px;
}

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;

  /* Now your own custom styles */
   height: 14px;
   width: 14px;
   display: block;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
  /* setup all the background tweaks for our custom icon */
  background-repeat: no-repeat;

  /* icon size */
  background-size: 14px;

}

.recipe_block .paging{
  border-top:solid 2px #ccc;
  border-bottom:solid 2px #ccc;
  padding:12px 10px;
  display:flex;
  align-items:center;
}

#recipe_nav {
  list-style: none;
  margin-bottom: 25px;
}

#recipe_nav li {
  text-align: center;
  display: inline-block;
  margin: 0;
  margin-right: 5px;
  width: auto;
  font-size: 80%;
  font-family: Arial, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}
#recipe_nav li a{
  text-decoration: underline;
}
ul.recipe_search_box{
  margin-top: -30px;
}
ul.recipe_search_box li{
  margin: 0;
  width: 50%;
}
.recipe_search_btn{
width: 30%;
padding: 11px 16px;
font-size: 16px;
font-weight: bold;
font-family: Arial, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
line-height: 1;
color: #FFF;
background: #fc0;
border: 2px #fc0 solid;
vertical-align : middle;
}
/*
.recipe_search_btn{
width: 30%;
padding: 11px 16px;
font-size: 16px;
font-weight: bold;
font-family: Arial, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
line-height: 1;
color: #7c6d62;
background: #efe8e3 url(../img/sg_common/ico_loupe_transparent.png) no-repeat;
background-size: 17px 17px;
background-position-y: center;
background-position-x: 10px;
border: solid 2px #7c6d62;
border-left: none;
}
*/
/* ------------------------------------------------------------ */
@media screen and (max-width:1004px){
  ul.recipe_search_box li:nth-child(1){
    width:100%;
  }
  ul.recipe_search_box{
    margin-bottom:10px;
  }
}
/* ------------------------------------------------------------ */
@media screen and (max-width:530px){
  ul.recipe_search_box{
    margin-top: 0px;
  }
  .recipe_block  input.recipe_keyword {
    width:55%;
  }
  .recipe_search_btn{
    width:35%;
  }
  #recipe_nav{
    margin-bottom: 0px;
  }
  ul.recipe_search_box{
    margin-bottom:10px;
  }
  .search_block.sp{
    display:none;
  }
  .recipe_block input::placeholder{
    font-size:12px;
  }
}
_:lang(x)+_:-webkit-full-screen-document, 
  .recipe_block input[type="text"],
  .recipe_block input[type="search"]
  {
    padding:9px;
  }
input::-webkit-input-placeholder { padding-top: 0.3em; }
/* ------------------------------------------------------------ */
/*検索窓追加　追加ここまで*/