@charset "utf-8";
/* CSS Document */
#adminBox, .acms-admin-box,
.tss_comprehensiveHead,
.tss_footer{
  position: relative;
  z-index: 100;
}

img{
  max-width: 100%;
}

.imr_body{
  position: relative;
}
.imr_bg{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}
.imr_bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imr_slide{
  z-index: 5;
}
.imr_slide.imr_pc{
  position: fixed;
  width: 100%;
  top: 50vh;
  transform: translateY(-50%);
}
.imr_slide.imr_sp{
  position: relative;
  display: none;
  margin-bottom: 16px;
}
.imr_slide img{
  aspect-ratio: 1;
  border-radius: 100%;
}
.imr_slide.imr_pc img{
  width: 294px;
}
.imr_slide.imr_sp img{
  width: 180px;
}


.imr_main{
  position: relative;
  text-align: center;
  z-index: 10;
}
.imr_wrap{
  max-width: 1160px;
  margin: auto;
  padding: 12px 16px 172px;
  background-color: rgba(255,255,255,0.91);
}


.imr_subttl{
  text-align: center;
}
.imr_kv{
  max-width: 975px;
  margin: auto;
  aspect-ratio: 365/211;
}
.imr_main h1{
  max-width: 558px;
  aspect-ratio: 149/113;
  margin: -190px auto 16px;
}
.imr_main h1 img{
  height: 100%;
  object-fit: contain;
}
.imr_actor{
  line-height: 1.5;
  margin-bottom: 40px;
  padding-top: 28px;
  font-weight: bold;
  font-size: clamp(0.875rem, 0.619rem + 0.95vw, 1.25rem);/*14-16 430-640*/
  color: #000000;
  background: url(../img/il_deco_dish.webp) center top no-repeat;
  background-size: auto 76px;
}
.imr_actor dd p{display: inline-block; padding:0 8px;}
.imr_actor dd:nth-last-of-type(n+2){margin-bottom: 8px;}

.imr_catch{
  max-width: 698px;
  aspect-ratio: 365/126;
  margin: 0 auto 1em;
}
.imr_catch img{
  height: 100%;
  object-fit: contain;
}
.imr_lead{
  max-width: 698px;
  line-height: 1.6;
  text-align: left;
  margin: 0 auto clamp(2rem, -1.071rem + 11.43vw, 3.5rem);/*32-56 430-640*/
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);/*14-16 320-1200*/
  color: #312828;
}

.imr_contentslist{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 56px 0;
  max-width: 1484px;
  margin: auto;
  container-name: contentslist;
  container-type: inline-size;
}
.imr_contents{
  position: relative;
  width: 480px;
  margin: auto 24px;
}
.imr_contents h2{
  aspect-ratio: 365/116;
}
.imr_contents h2 img{
  height: 100%;
  object-fit: contain;
}
.imr_contentbox{
  position: relative;
  margin-top: -10px;
}
.imr_contentbox::after{
  content: "";
  position: absolute;
  display: block;
  width: 500px;
  height: 590px;
  left: -10px;
  top: -18px;
  background: url(../img/il_frame.png) center center no-repeat;
  background-size: contain;
}
.imr_photo{
  aspect-ratio: 16/9;
}
.imr_photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imr_txt{
  height: 300px;
  padding: 24px 28px;
  text-align: left;
  background-color: #FFFFFF;
}
.imr_txt p{
  max-width: 420px;
  line-height: 1.875;
  font-size: 1rem;
  font-weight: bold;
  color: #312828;
}
.imr_videorea{
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1130px;
  width:100%;
  margin: 24px auto 16px;
}
.imr_videorea div{
  width:100%;
  max-width:480px;
  aspect-ratio: 16/9;
}
.imr_videorea div iframe{
  width: 100%;
  height: 100%;
}



.tss_footer{
  background: linear-gradient(#FAFFB1 0%, #EFB91A 11.71%, #FAFFB1 83.68%, #D86C0A 100%);
}
.tss_footer a{
  color:#775721;
}






@media screen and (max-width:1024px){
  .imr_main h1{
    width: 54.5vw;
    margin-top: -18.5vw;
  }
}
@media screen and (max-width:640px){
  .imr_wrap{
    background-color: #FDFEF3;
  }

  .imr_subttl img{
    width: 25.6%;
  }

  .imr_slide.imr_pc{display: none;}

  .imr_main h1{
    width: 75vw;
    margin-top: -12.5vw;
  }

  .imr_actor{
    background-size: auto 11.87vw;
  }

  .imr_slide.imr_sp{
    display: block;
    width: calc(100% + 32px);
    margin-left: -16px;
  }
  .imr_videorea{
    flex-direction: column;
    align-items: center;
  }

}
/*各テーマの枠サイズが小さくなる時（その時のウインドウサイズは524）*/
@container contentslist (width < 500px){
  .imr_contentbox{
    width: 91.6vw;
    margin: -1.9vw auto 0;
  }
  .imr_contentbox::after{
    width: calc(91.6vw + 20px);
    height: 113.65vw;
    top: -3.9vw;
  }
  .imr_txt{
    height: 57.16vw;
    padding: 4.58vw 5.34vw;
  }
  .imr_txt p{font-size: 3vw;}
}