@charset "UTF-8";
/* CSS Document */



/*レシピ*/
.recipe_note{
	font-size:clamp(12px, 3vw, 16px);
	margin-top:20px;
}
.section-recipe{
	margin:60px 0 60px;
}
.section-recipe h2{
	font-size:2.4rem;
	margin-bottom:20px;
}
.section-recipe h3{
	background-color:#fd9c2a;
	color:#fff;
	padding:20px 0;
	font-size:clamp(14px, 4vw, 18px);
}
.recipe-description{
	font-size: clamp(12px, 4vw, 16px);
	padding:30px; 
	line-height:1.6;
}
.zairyo-container{
	padding:0 20px 40px;
	margin:20px 0 60px;
	 background-image : linear-gradient(to right, #000, #000 2px, transparent 5px, transparent 8px);  /* 幅2の線を作る */
  background-size: 8px 1px;          /* グラデーションの幅・高さを指定 */
  background-position: left bottom;  /* 背景の開始位置を指定 */
  background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
}
.section-recipe h4{
	font-size:2.4rem;
	margin-bottom:20px;
}
.section-recipe__zairyo{
	max-width:330px;
	margin:0 auto;
}
.section-recipe__zairyo li{
	list-style: none;
	 position: relative;
    padding-left: 25px;
	text-align: left;
	margin-bottom:8px;
}
.section-recipe__zairyo p{
	text-align:left;
}
.section-recipe__zairyo li:before {
    content: "";
    position: absolute;
    top: .35em;
    left: 6px;
    -webkit-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
    width: 3px;
    height: 7px;
    border-right: 2px solid #ffc13c;
    border-bottom: 2px solid #ffc13c;
  }
 
  .section-recipe__zairyo li:after {
    content: "";
    position: absolute;
    top: .2em;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #ffc13c;
    border-radius: 2px;
  }
.recipe-container h5{
	font-size:2.4rem;
	margin-bottom:20px;
}
.recipe{
	margin-bottom:30px;
}

.item img{
	width:90%;
	max-width:390px;
	margin:0px 0 10px;
}
.item p{
 padding:0px 20px 10px;
 text-align:left;
}
.item img{
	width:90%;
	max-width:390px;
	margin-bottom:10px;
}
.recipe-text{
	margin-bottom:30px;
}
.point{
	position:relative;
}
.point-text{
	position:absolute;
	top:5%;
	right:3%;
	text-align:left;
	background-color:rgba(255,255,255,0.84);
	padding:10px;
}
.point-text__description{
	font-size: clamp(12px, 3vw, 16px);
}
.pointo-text__title{
	color:#f5ad14;
	font-weight: bold;
}
.recipe-container{
		padding:0 0px 40px;
	margin:20px 0 60px;
	 background-image : linear-gradient(to right, #000, #000 2px, transparent 5px, transparent 8px);  /* 幅2の線を作る */
  background-size: 8px 1px;          /* グラデーションの幅・高さを指定 */
  background-position: left bottom;  /* 背景の開始位置を指定 */
  background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
}
.recipe-middle{
	text-align:left;
	padding:10px 30px;
}
.recipe-middle_text{
	display:flex;
	flex-direction:column;
	max-width: 600px;
    margin: 0 auto 60px;
	gap:20px;
}
@media(min-width:650px){
.section-recipe{
		margin-top:40px;
	}
.section-recipe h2{
	font-size:3.6rem;
	margin-bottom:40px;
}
.section-recipe h3{
	font-size:2.4rem;
}
.recipe-description{
	font-size:2.0rem;
	padding:60px; 
	line-height:1.8;
}
.zairyo-container{
	padding:0 60px 60px;
	margin:20px 0 80px;
	}
	
.section-recipe h4{
	font-size:2.4rem;
	margin-bottom:20px;
}
.section-recipe__zairyo{
	max-width:410px;
}
.section-recipe__zairyo li{
    padding-left: 25px;
	text-align: left;
	margin-bottom:10px;
	font-size:2.0rem;
}

.recipe-container h5{
	font-size:3.6rem;
	margin-bottom:60px;
}
.recipe{
	margin-bottom:80px;
}
.item{
		display:flex;
		align-items: center;
		max-width:1400px;
	    margin:0 auto 40px;
		padding:0 20px;
		box-sizing: border-box;
	}
.item img{
	margin:0px;
}
.recipe-img{
	width:40%;
	flex-shrink:0;
}
.item p{
   padding:20px 10px 0px 30px;
   font-size: clamp(14px, 2vw, 18px);
	text-align:left;
}

.point-text{
	position:absolute;
	top:10%;
	right:8%;
	text-align:left;
	background-color:rgba(255,255,255,0.84);
	padding:30px;
}
.point-text__description{
	font-size: 2.0rem;
}
.pointo-text__title{
	font-size:2.4rem;
	
}
.recipe-container{
		padding:0 0px 120px;
	margin:20px 0 120px;
	}
	.section-recipe__zairyo li:before {
		top: .55em;
	  }
	 
	  .section-recipe__zairyo li:after {
		top: .35em;
	  }
}


/*つぶつぶかつお紹介*/
.section-tsubutsubu{
	padding-bottom:60px;
	background-image : linear-gradient(to right, #000, #000 2px, transparent 5px, transparent 8px);  /* 幅2の線を作る */
	background-size: 8px 1px;          /* グラデーションの幅・高さを指定 */
	background-position: left bottom;  /* 背景の開始位置を指定 */
	background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
}
.section-tsubutsubu h2{
	font-size:2.4rem;
	margin-bottom:30px;
}
.tsubutsubu-introduction{
	padding:20px;
	margin:10px;
	    border: solid 2px #dedbdb;
}
.tsubutsubu-introduction img{
	width:60%;
}
.tsubutsubu-text h3{
	font-size:2.0rem;
	margin-top:10px;
	margin-bottom:20px;
}
.tsubutsubu-btn__01 a{
	text-decoration: none;
	color:#ffc13c;
	border: solid #ffc13c 2px;
	padding:20px 20px;
	display:block;
	margin:20px auto;
	max-width:200px;
	font-weight:bold;
}
.tsubutsubu-btn__02 a{
		text-decoration: none;
	color:#fff;
	background-color:#ffc13c;
	padding:10px 20px;
	display:block;
	margin:20px auto;
	max-width:200px;
	font-weight:bold;
}
@media(min-width:650px){
	
	.section-tsubutsubu{
	padding-bottom:120px;
}
.section-tsubutsubu h2{
	font-size:3.6rem;
	margin-bottom:60px;
}
.tsubutsubu-introduction{
	display:flex;
	padding:20px;
	border: solid 2px #dedbdb;
	align-items:center;
    justify-content: center;
	margin: 0 auto;
	max-width:700px
}
.tsubutsubu-introduction img{
	width:70%;
}
	.tsubutsubu-text h3{
	font-size:2.4rem;
	margin-top:10px;
	margin-bottom:30px;
}
.tsubutsubu-btn__01 a{
	width:200px;
	padding:10px 60px;
	margin:20px auto;
    font-size:2.4rem;
	max-width:348px;
	font-weight:bold;
}
.tsubutsubu-btn__02 a{
	width:200px;
	padding:10px 60px;
    font-size:1.8rem;
	max-width:348px;
}		
}