.item1 {
  position: absolute;
  z-index: 50;
  top: 2vw;
  left: 30vw;
  width: 11vw;
  height: auto;
}
.item2 {
  position: absolute;
  z-index: 50;
  top: 4.5vw;
  left: -5vw;
  width: 14vw;
  height: auto;
}

/* --- Dynamic Slider Styles --- */
.main-slider {
  position: relative;
  width: 100%;
  height: 50vw;
  /* スライダーの高さ */
  background-color: #000;
}
.over_f {
  overflow: hidden;
  height: 50vw;
  width: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  overflow: hidden;
}

/* 背景ズームアニメーション (ケン・バーンズ効果) */
.slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1.2);
  /* 最初は少し大きく */
  transition:
    transform 6s ease-out,
    opacity 1.5s ease-in-out;
  opacity: 0;
}

.slide.active {
  visibility: visible;
  z-index: 10;
}

.slide.active .slide-bg {
  opacity: 1;
  transform: scale(1);
  /* 6秒かけてゆっくり標準サイズへ（ズームイン効果） */
}

/* テキストアニメーション (パララックス効果風) */
.slide-content {
  position: relative;
  color: #fff;
  text-align: center;
  z-index: 20;
  opacity: 0;
  transform: translateY(30px);
  /* 最初は少し下 */
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: 0.5s;
  /* 背景が出てから少し遅れて開始 */
}

.slide.active .slide-content {
  opacity: 1;
  transform: translateY(0);
  /* 定位置へ戻る */
}

.slide-title {
  /*font-size: 4rem;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 0.05em;*/
}

.slide-sub {
  /* font-size: 1.2rem;
  background: rgba(0, 0, 0, 0.4);
  display: inline-block;
  padding: 5px 20px;
  border-radius: 50px;*/
}

/**/

.slide_inside {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(./slide_cover.webp);
  background-size: 100% 100%;
  z-index: 20;
}
.photo1,
.photo2,
.photo3,
.photo4 {
  position: absolute;
  z-index: 12;
  filter: drop-shadow(2px 2px 2px #555);
}
.photo1 {
  width: 25.5vw;
  left: -4vw;
  top: 6vw;
}

.photo2 {
  width: 20.5vw;
  right: -4vw;
  top: 8vw;
}

.photo3 {
  width: 23vw;
  left: -6.5vw;
  bottom: 5.5vw;
}

.photo4 {
  width: 23vw;
  right: -4vw;
  bottom: 8.5vw;
}

#period {
  position: absolute;
  bottom: -1.5vw;
  left: 0;
  right: 0;
  margin: auto;
  width: 72%;
  height: 7vw;
  background: #fff;
  border: 3px solid #555;
  border-radius: 0.5vw;
  overflow: hidden;
  z-index: 20;
  filter: drop-shadow(2px 2px 2px #555);
}
#period .left {
  width: 20%;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8vw;
  font-weight: bold;
  padding-left: 0.5vw;
  letter-spacing: 0.2vw;
}
.calendar_img {
  width: 1.5vw;
  margin: 0 0.5vw -0.2vw 0;
}
#period .right {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: left;
}
#period .right ul {
  padding: 1.5vw 0 0 2vw;
  font-size: 1.9vw;
  font-weight: 900;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  width: 85%;
}

#period .right li {
  letter-spacing: 0vw; /*0*/
}
.front_k {
  margin-left: -1.2vw;
}
.back_k {
  margin-right: -1.2vw;
}
.no {
  font-size: 4.3vw;
  line-height: 35%;
  /*font-family: "Anton", sans-serif;*/
  transform: scaleX(0.9);
  color: #e94709;
  margin: 0 -0.1vw;
}
.arrive {
  font-size: 1.6vw;
  font-weight: bold;
  background: #ffd900;
  border: 3px solid #000;
  border-radius: 0.5vw;
  padding: 0.5vw 1vw;
  margin-left: 1vw;
}
.orange {
  color: #e94709;
  margin: 0 0.2vw;
}
.site_ttlbox {
  width: 33%;
  height: 20vw;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 8vw;
  left: 0;
  right: 0;
  z-index: 30;
  text-align: center;
}
.mati {
  display: block;
  margin: auto;
  width: 90%;
  height: auto;
}
.pride {
  display: block;
  margin: 2.5vw auto 0 auto;
  width: 68%;
  height: auto;
}
.compact {
  margin: 0 -0.5vw;
}
.ttl1 {
  font-size: 4.8vw;
  font-weight: 700;
  color: #e94709;
  margin: 0.5vw 0 0 0;
  line-height: 100%;
  text-shadow:
    2px 0 0 #fff,
    -2px 0 0 #fff,
    0 2px 0 #fff,
    0 -2px 0 #fff,
    1px 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    2px 1px 0 #fff,
    2px -1px 0 #fff,
    -2px 1px 0 #fff,
    -2px -1px 0 #fff,
    1px 2px 0 #fff,
    1px -2px 0 #fff,
    -1px 2px 0 #fff,
    -1px -2px 0 #fff;
}
.ttl2 {
  font-size: 4vw;
  font-weight: 700;
  color: #e94709;
  margin: 0.5vw 0 0 0;
  line-height: 100%;
  text-shadow:
    2px 0 0 #fff,
    -2px 0 0 #fff,
    0 2px 0 #fff,
    0 -2px 0 #fff,
    1px 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    2px 1px 0 #fff,
    2px -1px 0 #fff,
    -2px 1px 0 #fff,
    -2px -1px 0 #fff,
    1px 2px 0 #fff,
    1px -2px 0 #fff,
    -1px 2px 0 #fff,
    -1px -2px 0 #fff;
  letter-spacing: -0.2vw;
}
.charm {
  color: #fff;
  margin: 1vw 0 0 0;
  font-size: 2vw;
  letter-spacing: 0.1vw;
  font-weight: 500;
  filter: drop-shadow(3px 3px 3px #000);
}

/* Mobile View */
@media screen and (max-width: 768px) and (min-width: 480px) {
  .main-slider {
    height: 50vh;
  }

  .slide-title {
    /*font-size: 2.2rem;*/
  }

  .slide-sub {
    /*font-size: 1rem;*/
  }
  #period {
    bottom: -2.5vw;
    width: 70%;
    height: 10vw;
  }
  .site_ttlbox {
    width: 60%;
    bottom: 22vw;
  }
  .charm {
    font-size: 3.5vw;
  }
} /*END*/
/* モバイル用の調整（より厳密に制御したい場合） */
@media (max-width: 480px) {
  .item1 {
    top: 1vw;
    left: 51vw;
  }
  .item2 {
    top: 11.5vw;
    left: -12vw;
    width: 31vw;
  }
  .photo1 {
    width: 29.5vw;
    left: -8vw;
    top: 19vw;
  }
  .photo2 {
    width: 29vw;
    right: -8vw;
    top: 17vw;
  }
  .photo3 {
    width: 31vw;
    left: -9.5vw;
    bottom: 11vw;
  }
  .photo4 {
    width: 30vw;
    right: -9vw;
    bottom: 11.5vw;
  }
  .main-slider {
    height: 78vw;
  }
  .over_f {
    height: 45vh;
  }
  .site_ttlbox {
    width: 80%;
    bottom: 0vw;
    height: 30vh;
  }
  .mati {
    width: 65%;
    margin: 0 auto 2vw auto;
  }
  .ttl1 {
    font-size: 7.5vw;
    line-height: 120%;
  }
  .ttl2 {
    font-size: 6.5vw;
  }
  .pride {
    margin: 4.5vw auto 0 auto;
    width: 70%;
  }
  .charm {
    font-size: 4vw;
    line-height: 120%;
  }
  #period {
    width: 90%;
    /*bottom: -2.5vw;
    height: 10vw;*/
    height: 20vw;
    bottom: -10.5vw;
    border: 1px solid #555;
    border-radius: 2w;
  }
  #period .left {
    font-size: 3.4vw;
    width: 10%;
  }
  .calendar_img {
    /*
    width: 2.4vw;
    margin: 0 1vw -0.7vw 0;*/
    display: none;
  }
  #period .left p {
    width: 90%;
    text-align: center;
  }
  #period .right {
    width: 90%;
  }
  #period .right ul {
    font-size: 3vw;
    height: 100%;
    padding: 0 0 0 3vw;
    width: 85%;
  }
  #period .right li {
    position: relative;
    padding-top: 8vw;
    display: flex;
    align-items: center;
    justify-content: left;
  }
  .year {
    display: block;
    position: absolute;
    top: 1.6vw;
    font-size: 4vw;
  }
  .no {
    font-size: 7.6vw; /*8.4*/
    letter-spacing: -0.2vw;
  }

  .arrive {
    border: 1px solid #000;
    font-size: 4vw;
    border-radius: 2vw;
    margin-left: 0vw;
    margin-right: 1vw;
  }
} /*END*/

@media (max-width: 375px) {
  #period .right ul {
    font-size: 3vw;
  }
}