:root {
  --px-min: min(calc(16 / 390 * 100vw), calc(16 / 390 * 100svh / 1.48));
  --py-slide: min(calc(72 / 390 * 100vw), calc(72 / 390 * 100svh / 1.48));
  --text-Color:#2f2819;
}

main{
  position: relative;
  background: url(../img/bg-main.webp) repeat center center / cover;
  height: 100%;
  min-height: 100svh;
  color: var(--text-Color);
}
.p-h1Box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 310px;
  text-align: center;
  margin-inline: auto;
  padding-block: 40px;
  background: url(../img/bg-heading.GIF) no-repeat center center / contain;
}
.p-h1Box h1{
  margin-bottom: 8px;
  padding: 20px 20px 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  border-bottom: solid 1px rgba(47,40,25,0.5);
}
.p-h1Box span{
  padding-bottom: 20px;
}

/* モーダル */
.c-modal{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background: url(../img/bg-modal.webp) no-repeat bottom center / cover;
    z-index: 10;
}
.c-modal__open{
  display: block;
  width: 100%;
  margin-inline: auto;
}
.c-modal__open img{
  display: block;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1/1.163;
  margin-inline: auto;
}
.p-modal__bghand{
  position: fixed;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1/0.415;
  background: url(../img/bg-hand.GIF) no-repeat bottom center / contain;
}
/* スライダー */
.l-sp{
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-inline: var(--px-min);
    height: 100svh; 
}
.slick-wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--px-min)*2);
  max-width: 600px;
  width: 100%;
  max-width: min(calc(100% - var(--px-min) *2), calc((100svh - var(--px-min) * 2 - 48px) / 1.48)); /* 48pxは矢印分 */
  margin-inline: auto;
}
.p-slide__list{
  position: relative;
  margin-bottom: 16px;
}
.p-slide__item{
  aspect-ratio: 1/1.48;
  background: url(../img/bg-slide.webp) no-repeat bottom center / contain;
  padding-inline: min( var(--px-min),33px);
  padding-block: min(var(--py-slide),148px);

}
.arrows {
  width: 100%;
  margin-inline: auto;
  height: 32px;
  position: relative;
  bottom: - var(--py-slide);
}
.arrows .slick-prev,.arrows .slick-next{
  display: flex;
  align-items: center;
  width: calc((100% - 16px) / 2);
  gap:  0.5em;
}
.arrows .slick-prev{
  left: - var(--px-min);
}
.arrows .slick-next {
  flex-direction: row-reverse;
  right: 0;
}
.slick-prev:before,.slick-next:before {
  content: "";
  background: no-repeat center center / cover content-box;
  width: 32px;
  height: 32px;
}
.slick-prev:before {
  background-image: url(../img/btn-left.GIF);
  left: 0;
  }
.slick-next:before {
background-image: url(../img/btn-right.GIF);
right: 0;
}
.slick-counter{
  text-align: center;
  margin-top: 16px;
}
.p-slide__title{
  font-size: clamp(1.25rem, 1.045rem + 0.91vw, 1.5rem);
  margin-block: 1em;
  text-align: center;
}
.p-slide__subTitle{
  font-size: clamp(1rem, 0.795rem + 0.91vw, 1.25rem);
  margin-bottom: 1em;
  text-align: center;
}
.p-slide__text{
  font-size: clamp(0.875rem, 0.773rem + 0.45vw, 1rem);
}
.slick-prev, .slick-next{
  font-size: clamp(0.875rem, 0.773rem + 0.45vw, 1rem);
  line-height: 1;
  color: var(--text-Color);
  transition: ease 0.4s;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus{
  color: var(--text-Color);
}
.slick-prev:hover, .slick-next:hover{
  opacity: 0.5;
}
@media screen and (min-width: 769px) {
  .p-h1Box{
    margin-left: var(--px-min);
  }
}