@charset "utf-8";
.slider-wrapper{
  min-height: 100vh; /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#slider {
  width: 60vw;  /* 画面幅の60% */
  max-width: 800px; /* 最大サイズを設定 */
  aspect-ratio: 1/1 !important; /* 正方形を維持 */
  z-index: 1;
  right: 50px;
  top: 25px;
  border: 2px solid #352014;
}
.mainname {
  position: absolute;
  bottom: 150px;
  left: 30px;
  z-index: 2;
  font-size: 35px;
  color: #352014;
  padding: 8px 20px 13px;
  background-color: #D56930;
  display: inline-block;
  animation: main_anime 6s;
}
@keyframes main_anime {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.mainname span:first-child {
  position: relative;
}
.mainname span:last-child {
  background-color: #D56930;
  padding: 8px 20px 13px;
  position: absolute;
  top: 56px;
  left: 60px;
}

@media (max-width: 768px) {
  #slider {
    width: 80vw;  /* 画面幅の60% */
    max-width: 800px; /* 最大サイズを設定 */
    aspect-ratio: 1/1 !important; /* 正方形を維持 */
    right: 20px;
    top: 10px;
  }
.mainname {
  font-size: 18px;
}
.mainname span:last-child {
  top: 40px;
  left: 40px;
}}