*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:"Noto Sans JP", sans-serif;
}

.page{
  position:relative;
  width:100%;
  min-height:100svh;
  padding:24px 36px;
  display:flex;
  flex-direction:column;
}

@media (max-width:480px){
  
  .page{
    padding:16px;
  }

}


/* 背景 */
.bg-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
}

/* ロゴ */
.logo{
  width:100%;
  max-width:600px;
  margin:0 auto;
}

.logo img{
  width:250px;
  display:block;
}

@media (max-width:480px){
  
  .logo{
    max-width:100%;
  }

  .logo img{
    width:120px;
  }
  
}


/* メインヴィジュアル */
.main-visual-wrap{
  width:100vw;
  margin-left:calc(50% - 50vw);
}

.main-visual{
  position:relative;
  width:100%;
  max-width:600px;
  margin:0 auto;
  aspect-ratio:3 / 4;
  overflow:hidden;
}

.main-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.img-1{
  animation:switchImage1 1s steps(1, end) infinite;
}

.img-2{
  animation:switchImage2 1s steps(1, end) infinite;
}

@keyframes switchImage1{
  0%, 49.999%{
    opacity:1;
  }

  50%, 100%{
    opacity:0;
  }
}

@keyframes switchImage2{
  0%, 49.999%{
    opacity:0;
  }

  50%, 100%{
    opacity:1;
  }
}



/* 下部ボタン周り */
.bottom-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0 auto;
}

/* 各SNS */
.sns-links{
  width:100%;
  max-width:500px;
  margin:0 auto clamp(22px, 3vw, 30px);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(14px, 4vw, 28px);
}

.sns-button{
  display:block;
  width:40%;
  transition:transform .12s ease;
  transform-origin:center center;
}

.sns-button:active{
  transform:scale(.97);
}

.sns-button img{
  width:100%;
  display:block;
}

@media (max-width:480px){

  .sns-button{
    width:20%;
  }

}


/* 遷移ボタン */
.transition-button{
  display:block;
  width:100%;
  max-width:600px;
  margin:0 auto;
  transition:transform .12s ease;
  transform-origin:center center;
}

.transition-button:active{
  transform:scale(.97);
}

.transition-button img{
  width:100%;
  display:block;
}

/* コピーライト */
.copyright{
  width:100%;
  max-width:600px;
  margin:4px auto 0;
  text-align:center;
  font-size:10px;
  line-height:1.5;
  color:#160013;
}