body{
    margin: 0;
    background-image: url("img/haikei.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.header{
  background-size: contain;
  background-repeat: no-repeat;
  width: 100vw;
  height: 20vh;
}

.title{
  font-size: 90px;
}

.title p{
  margin: 7px;
}

.kugiri{
  margin-top: 5vh;
  margin-bottom: 5vh;
  width:100vw;
  height: 5vh;
  background-color: rgb(213, 255, 96);
}

.footer{
  background-color: rgb(115, 173, 5);
  width: 100vw;
  height: 20vh;
  color:white;

  display: flex;
  justify-content: center;
  align-items: center;
  
}

.color{
  background-color: rgb(206, 226, 177);
  margin:3rem;
  padding: 1rem;
  border-radius: 16px;
  border: 2px solid rgb(149, 173, 82);
}

.color2{
  background-color: rgb(230, 230, 230);
  margin:3rem;
  padding: 1rem;
  border-radius: 16px;
  border: 2px solid rgb(149, 173, 82);
}

.center{
  text-align: center;
}

#viva.center{
  font-size: 25px;
  margin:5rem;

}

#home.header{
  background-image: url(img/homeh.png);
}

#doragon.header{
  background-image: url(img/kyandoruh.png);
}

#kanade.header{
  background-image: url(img/kanadeh.png);
}

#basu.header{
  background-image: url(img/basuh.png)
}
#menu {
  height: 100vh;
  width: 100vw;
  z-index: 10;
  position: fixed;
  top: 0;
  left:0;

  background-image: url(img/menu-haikei.png);
  background-size: cover;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上と下に分ける */
  align-items: center;      /* 縦中央 */
}

#menu ul {
  margin-top: 50px; /* 上に少し余白 */

  list-style: none;
  font-size: 2vh;
  display: flex;
  flex-direction: column;
  writing-mode: vertical-rl;
}

#menu li {
  margin: 20px 0;
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center; /* 水平方向の中央揃え */
}

.navimg{
    margin-bottom: 40px;
}
#menuBtn{
    background-image: url(img/logo.png);
    background-color: transparent;
    border: none;
    background-size: contain;
    width: 140px;
    height: 140px;

    position: absolute;
    right: 7px;
    top: 7px;
}

#closeBtn {
  position: absolute;
  top: 7px;
  right: 7px;
  background: transparent;
  background-image: url(img/close.png);
  border: none;
  width: 140px;
  height: 140px;
  background-size: contain;
}

#menu.hidden {
  display: none;
}

.setu {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央（必要なら） */
  gap: 40px;               /* 文字と画像の間 */
  text-align: center;

  margin-bottom: 40px;
  font-size: 25px;
}

#shop.setu{
  gap:80px;
}

#viva.image{
  display: grid;
  gap: 40px;
  grid-template-columns: 300px 300px 300px;
}

.setuimg{
  width: 300px;
  height: 400px;
}

.text {
  max-width: 430px;
}

.slider {
  margin-inline: auto;
  
  width: 80%;
}

.slider-img {
  margin: 0 10px;
}

.slider-img img {
  height: auto;
  width: 100%;
}

.swiper-slide img {
  height: auto;
  width: 100%;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
/* スライドの動き等速 */
.swiper-wrapper {
  transition-timing-function: linear;
}

/* Swiperサイズ調整 */
.swiper {
  width: 100%;
  padding: 20px 0;
}

.swiper-slide {
  width: 300px; /* カードサイズ */
}