/*======================================
-----レイアウトの骨組みのみここに記載-----
======================================*/

.mamapan{
    overflow:hidden;
}

/*======================================
-------------フッターifarme-------------
======================================*/
/*.iframeWrap5 {
    padding-bottom: 52%;
}*/
@media screen and (max-width: 1024px) {
    .iframeWrap5 {
        padding-bottom: 100%;
    }   
}










/*======================================
---------------レイアウト---------------
======================================*/

/*10pxアキのグリッドレイアウトにする*/
.grd_gp10 {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
/*20pxアキのグリッドレイアウトにする*/
.grd_gp20 {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
/*25pxアキのグリッドレイアウトにする*/
.grd_gp25 {
    display: grid;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
}

/*50pxアキのグリッドレイアウトにする*/
.grd_gp50 {
    display: grid;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
}


/*80pxアキのグリッドレイアウトにする*/
.grd_gp80 {
    display: grid;
    grid-column-gap: 80px;
    grid-row-gap: 80px;
}


/*均等2分割*/
.grd_col_2fr{
    grid-template-columns: 1fr 1fr;  
}
.grd_col_2fr_r{
    grid-template-columns: 1fr 1fr; 
    grid-template-areas:
    "areaA areaB";
}
/*均等3分割*/
.grd_col_3fr{
    grid-template-columns: 1fr 1fr 1fr;
}
/*均等4分割*/
.grd_col_4fr{
    grid-template-columns: 1fr 1fr 1fr 1fr; 
}
/*3:2の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_3_2_l {
    grid-template-columns: 3fr 2fr;
}
/*2:3の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_2_3_l {
    grid-template-columns: 2fr 3fr;
}
/*3:2の2分割レイアウト（スマホ表示にしたとき、右の要素を上に表示）※直下のdivにgrd_itm1,grd_itm2などでエリア指定を行う*/
.grd_col_3_2_r {
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
    "areaA areaB";
}
/*2:3の2分割レイアウト（スマホ表示にしたとき、右の要素を上に表示）※直下のdivにgrd_itm1,grd_itm2などでエリア指定を行う*/
.grd_col_2_3_r {
    grid-template-columns: 2fr 3fr;
    grid-template-areas:
    "areaA areaB";
}
/*1:4の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_1_4_l {
    grid-template-columns: 1fr 4fr;
}
/*4:1の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_4_1_l {
    grid-template-columns: 4fr 1fr;
}
.grd_itm1{
    grid-area:areaA;
}
.grd_itm2{
    grid-area:areaB;
}
/*均等3分割SNS用*/
.grd_sns{
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}
/*sns内の画像サイズを40%に*/
.grd_sns img{
    width:40%;
}

@media (max-width: 767px){
/*スマホ表示の際、分割せず縦並び*/
    .grd_sp1fr{
        grid-template-columns: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

/*スマホ表示の際、分割せず縦並び*/
    .grd_sp1fr_r{
        grid-template-columns: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-areas:
        "areaB"
        "areaA";
    }


/*スマホ表示の際、均等2分割横並び*/
    .grd_sp2fr{
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
/*スマホ表示の際、右の要素を上に表示*/
    .grd_col_3_2_r, .grd_col_2_3_r, .grd_col_2fr_r {
        grid-template-areas:
        "areaB"
        "areaA";
    }
  .grd_sns{
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    }
    .grd_sns img{
        width:60%;
    }
}

/*----------中央寄せ----------*/
.blk_center{
    text-align: center;
}
.txt_center{
    text-align: center; /*インライン要素自体にかけると、要素内のテキストに反映される*/
}

/*----------上下アキ----------*/
.row_bottom{
	margin-bottom:15px;
}
.row_bottom30{
	margin-bottom:30px;
}
.row_bottom50{
	margin-bottom:50px;
}
.row_bottom80{
	margin-bottom:80px;
}
.row_bottom100{
	margin-bottom:100px;
}
.row_top{
    margin-top:15px;
}
.row_top30{
    margin-top:30px;
}
.row_top50{
    margin-top:50px;
}
.row_top80{
    margin-top:80px;
}
.row_top100{
    margin-top:100px;
}

/*----------左右アキ----------*/

@media (max-width: 767px){
.margin_side{
	margin-right:10px;
	margin-left:10px;
	}
}




/*----------セクション背景----------*/


.chef_background {
	background-color:#f5f5f5;
	margin:0 20 0 20;
}

.lunch_background {
	background-color:#fff9ed;
	margin:0 20 0 20;
}




/*----------PC・スマホ調整----------*/
@media only screen and (min-width : 320px) {
	.pc_h{
		display:none;
	}
	.smp_h{
		display:inline;
	}
}

@media only screen and (min-width : 992px) {
	.pc_h{
		display:inline;
	}
	.smp_h{
		display:none;
	}
}

@media only screen and (min-width : 1200px) {
	.pc_h{
		display:inline;
	}
	.smp_h{
		display:none;
	}
}




/* 背景色 */
.lead-bg01 { background-color: #f2eee9; padding: 30px 0; margin-bottom:4%;}
.lead-bg02 { background-color: #C63; padding: 2px 0px;}
.lead-bg03 { background-color: #efd7cf; padding: 4% 0;}
.lead-bgsns { background-color: #f3f3f3; padding: 30px 0px;}


/*区切り罫線*/
.partition-b {
  border-bottom: solid 1px #333333;
  margin-top:100px;
  margin-bottom:100px;
}
@media (max-width: 767px){
.partition-b {
  margin-top:20px;
  margin-bottom:70px;
}
}



/* 画像　右上だけR */
.img-r{ border-top-right-radius:15%;border-bottom-left-radius:15%;}


/* 色 */
.orange{ color:#C63;}
.red{color:#ae585f;}

/*============================================*/
/*SNS */
/*============================================*/
.sns{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.sns-box00{
    display: block;
    width: 20%;
    text-align: center;
    border-right: solid 1px #333;
}
.sns-box01{
    display: inline-block;
    width: 15%;
    padding: 10px;
    text-align: center;
}
.sns img{width: 40%;}
.sns h2{
    font-family: "Shippori Mincho", serif;
    font-size: 25px;
    text-shadow: none;
    margin: 40px 0px 30px 0px;
}
.sns h2::before{content: none;}
.sns h4{
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0px;
    text-shadow: none;
    margin-bottom: 20px;
}
@media screen and (max-width: 640px) {
.sns img{width: 80%;}
.sns h2{margin: 10px 0px;}
.sns-box00{width: 25%;}
.sns-box01{width: 18%;}
.sns h4{font-size: 11px;}
}




/*ボタン*/

.item-btn a {
    background: #eee;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /*max-width: 280px;*/
	margin:2% 0;
	margin-top:4%;
    padding: 10px 20px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: bold;
}
.item-btn a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 1.6rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.item-btn a:hover {
  background: #cd212f;
  color: #FFF;
}
.item-btn a:hover:after {
  right: 1.4rem;
}


.recipe-btn a {
    background: #ae585f;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    padding: 10px 20px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: bold;
}
.recipe-btn a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 1.6rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.recipe-btn a:hover {
  background: #eee;
  color: #ae585f;
}
.recipe-btn a:hover:after {
  right: 1.4rem;
}



/*============================================*/
/*item */
/*============================================*/
.item{
    display: flex;
	justify-content: center;
    align-items: flex-start;
	}
	
.item-box{
    padding: 10px;
    text-align: center;
	}
	

.item  h4{ 
font-size:14px;
margin-top:5px;
}


@media screen and (max-width: 760px){
	
.item{
	 width: 100%;
  display: flex;
    flex-wrap: wrap;
	}
	
.item-box{
    padding: 10px;
    text-align: center;
	width: 50%;
	}
.item  h4{ 
font-size:12px;
}
	}



.txt_frame1{
	background-color:#546569;
	padding:2%;
	margin:1% 0;
	color:#fff;
	font-weight:
  }

.txt_frame2{
	background-color:#b50100;
	padding:2%;
	margin:1% 0;
	color:#fff;
	font-weight:
  }
  
  
  
  
  
  
  
  
.howtobake h2{
	font-family:serif;
	font-size:2.0rem;
	text-align:left;
	font-weight:bold;
	margin:4% 0;
	color:#ae585f;
	}

.howtobake h3{
	font-family:;
	font-size:1.5rem;
	font-weight:bold;
	margin-top:4%;
	color:#313131;
	}

.howtobake h4{
	margin-bottom:4%;
}

.howtobake p{
	font-size:1.0rem;
	color:#333333;
	margin-bottom:5%;
}

/*-------スマホの時-------------*/
@media screen and (max-width: 768px) {
.howtobake{
	width:85%;
	}
.howtobake h2{
	font-size:1.8rem;
	text-align:center;
	margin:6% 0;
	}

.howtobake h3{
	font-size:1.2rem;
	margin-top:4%;
	}

.howtobake h4{
	margin-bottom:4%;
}

.howtobake p{
	font-size:.9rem;
	margin-bottom:5%;
}



}