@charset "utf-8";
/* CSS Document */
#adminBox, .acms-admin-box,
.tss_comprehensiveHead,
.tss_footer{
  position: relative;
  z-index: 100;
}


.imns_body{position: relative;}
.imns_bg{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.imns_bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.imns_main{
  position: relative;
  z-index: 10;
}



.imns_keyvisual{text-align: center;}
.imns_keyvisual picture{
  display: block;
  max-width: 1150px;
  margin: auto;
  aspect-ratio: 575/189;
}
.imns_keyvisual img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.imns_recipewrap{
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: -164px auto 0;
}
.imns_recipewrap::before{
  content: "";
  display: block;
  height: 76px;
  background: url(../img/imanishi2025/recipe/il_recipeheader_bg.png) center top no-repeat;
}


.imns_recipeheader{
  position: relative;
  margin-bottom: 14px;
  padding: 44px 16px 14px;
  border-radius: 40px;
  background-color: #F7BDB2;
}

.imns_gotop{
  width:16%;
  position:absolute;
  top:-40px;
  left:0;
  max-width:138px;
}
.imns_gotop img{width:100%;}

.imns_recipeheader h1{
  position: absolute;
  top: -71px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 534px;
}
.imns_recipeheader h1 img{width:100%;}
.imns_recipeheader > p{
  margin-bottom: 16px;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
}
.imns_recipeheader ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.imns_recipeheader ul li{
  width: 334px;
  max-width: 100%;
}
.imns_recipeheader ul li a{
  display: flex;
  width: 100%;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}
.imns_recipeheader ul li a div:nth-of-type(1){
  width: 41.3%;
  aspect-ratio: 23/15;
}
.imns_recipeheader ul li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imns_recipeheader ul li a div:nth-of-type(2){
  display: flex;
  align-items: center;
  width: 58.8%;
  padding: 0 10px;
  background-color: #FEF1D1;
}
.imns_recipeheader ul li a div:nth-of-type(2) p{
  line-height: 21px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: bold;
  color: #DF1814;
}
.imns_recipeheader ul li a div:nth-of-type(2) p span{
  display: block;
  font-size: 0.75rem;
}



.imns_recipentry{
  position:relative;
  margin-bottom: 24px;
  padding: 36px 16px 60px;
  border-radius: 40px;
  border: 15px solid #F7BDB2;
  background-color:#FFFFFF;
  background-image: url(../img/imanishi2025/recipe/il_recipebg_left.png), url(../img/imanishi2025/recipe/il_recipebg_right.png);
  background-position: left 6px top 6px, right 6px top 6px;
  background-repeat: no-repeat;
}
.imns_recipentry h2{
  margin-bottom: 24px;
  text-align: center;
}
.imns_phrecipe{
  max-width: 800px;
  width: 96%;
  margin: 0 auto 24px;
}
.imns_phrecipe picture{
  display: block;
  aspect-ratio: 40/23;
}
.imns_phrecipe img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.imns_recipeflxbox{
  display:flex;
  justify-content: space-between;
  gap: 0 6.6%;
  max-width: 960px;
  margin: auto;
}
.imns_recipeflxbox > div:first-of-type{width:39.5%;}
.imns_recipeflxbox > div:last-of-type{width:53.9%;}
.imns_recipeflxbox h3{
  display: flex;
	align-items: center;
  margin-bottom: 8px;
  font-size: clamp(1rem, 0.564rem + 1.62vw, 1.375rem);/*16-22 430-800*/
  font-weight: bold;
  color:#DF1814;
}
.imns_recipeflxbox h3:before{content:"●";}
.imns_recipeflxbox h3:after{
	content: "";
	flex-grow: 1;
	height: 2px;
	display: block;
  margin-left: .4em;
	background: #DF1814;
}
.imns_recipeflxbox ul{
  line-height: 1.75;
  margin-bottom: 20px;
  font-size: 0.875rem;
}
.imns_recipeflxbox > div:first-of-type img{max-width: 88%;}
.imns_recipeflxbox h4{
  margin-bottom: 10px;
  font-weight: bold;
  color: #000000;
}
.imns_recipeflxbox ol{
  counter-reset: imd-counter 0;
  line-height:1.5;
}
.imns_recipeflxbox ol:nth-last-of-type(n+2){margin-bottom: 24px;}
.imns_recipeflxbox ol li{
  padding-left: 0.5em;
  margin: 0 0 0.5em 2em;
  list-style-position: outside;
  position: relative;
}
.imns_recipeflxbox ol li:nth-last-of-type(n+2){margin-bottom: 16px;}
.imns_recipeflxbox ol li:before{
  position:absolute;
  display:block;
  counter-increment:imd-counter;
  content:counter(imd-counter);
  top:0;
  left:-1.5em;
  width: 1.5em;
  height: 1.5em;
  aspect-ratio: 1;
  text-align: center;
  font-size: 0.875rem;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 100%;
  background-color: #DF1814;
  z-index: 3;
}



/*footer*/
.tss_footer{background-color: #94E4FF;}
.tss_footer a{
  font-size: 0.875rem;
  font-weight: bold;
  color: #000000;
}




@media screen and (width > 800px){
  .imns_recipeheader ul li a:hover{border-color: #DF1814;}
}




@media screen and (width <= 1170px){/*1150 + 17 + おまけ*/
  .imns_recipewrap{margin-top: -14vw;}
  .imns_recipewrap::before{
    height: 6.49vw;
    background-size: 100% auto;
  }
  .imns_recipeheader h1{top: -6.06vw;}
}
@media screen and (width <= 1100px){/*1080 + 17 + おまけ*/
  .imns_recipentry{background-size: 15.96vw;}
}
@media screen and (width <= 800px){
  .imns_body{padding: 0 0 120px;}
  .imns_keyvisual picture{aspect-ratio: 187/70;}
  

  .imns_recipewrap{
    margin-top: -4vw;
    padding: 0 16px;
  }
  
  .imns_recipeheader{padding-top: 56px;}
  .imns_recipeheader p{
    text-align: left;
    font-size:0.875rem;
  }


  .imns_recipentry{background-size: 12vw;}
  .imns_recipentry h2 img{height: max(16px, 3.25vw);}
  .imns_phrecipe{width:88%;}
  .imns_recipeflxbox{
    display: block;
    font-size:0.875rem;
  }
  .imns_recipeflxbox > div:first-of-type,
  .imns_recipeflxbox > div:last-of-type{width:100%;}
  .imns_recipeflxbox > div:first-of-type img{
    display: block;
    margin: auto;
  }
  .imns_recipeflxbox > div:last-of-type{padding-top: 4vw;}
}

@media screen and (width <= 481px){
  .imns_gotop{
    top:-10px;
  }
}