/*** トップページ ***/
/*******************/
.Top_back_wrap {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-height: 100vh;
  aspect-ratio:1920 / 1080;
  line-height: 0;
  overflow: hidden;
}

/* =========================
    スライド
========================= */
.slide{
  position:absolute;
  inset:0;

  opacity:0;
  visibility:hidden;
}

.slide.active{
  opacity:1;
  visibility:visible;
  z-index:2;
}

/* =========================
    背景
========================= */
.bg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
}


/* =========================
    キャラ
========================= */
.chara{
  position:absolute;

  left:50%;
  top:0;

  width:clamp(180px, 61vw, 1200px);
  max-width:1200px;

  opacity:0;
}

.chara_1{
  left:25%;
}
.chara_2{
  left:50%;
}
.chara_3{
  left:30%;
}

.b-chara {
  width: 100%;
  max-width: 100%;
  left: 0;
}

.c-chara {
  width: 100%;
  max-width: 100%;
  left: 10%;
}

.d-chara {
  width: 100%;
  max-width: 100%;
  left: 20%;
}

/* =========================
    ロゴ
========================= */
.logo{
  position:absolute;

  left:50%;
  bottom:5%;

  transform:translateX(-50%);

  width:clamp(180px, 40vw, 600px);
  max-width:600px;

  opacity:0;
}

/* =========================
    ソフトタイトル（常時表示）
========================= */
.title_logo {
  position: absolute;
  width:clamp(110px, 30vw, 500px);
  top: 1em;
  left: 1em;
  transform-origin:center top;
	animation:top_title 2s both,
  top_title2 4s ease-in-out infinite;
  animation-delay:1.5s;
  z-index: 10;
}

.title_logo img{
  width:100%;
  height:auto;
  display:block;
}

@keyframes top_title {
	0% {
		transform:scale(1.5);
		opacity:0;
	}
	100% {
		transform:scale(1);
		opacity:1;
	}
}

@keyframes top_title2 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-7px); }
  100%  { transform: translateY(0); }
}


/* =========================
    切り替えアイコン
========================= */
.slide_nav{
  position:absolute;
  top:clamp(12px, 2vw, 32px);
  right:clamp(12px, 2vw, 32px);

  display:flex;

  gap:clamp(8px, 1vw, 16px);

  z-index:100;
}

.nav_btn{
  width:clamp(18px, 3vw, 48px);
  height:clamp(18px, 3vw, 48px);

  border:none;
  cursor:pointer;
  background:none;
  padding:0;

  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;

  opacity:.6;

  transition:
    opacity .3s,
    filter .3s,
    transform .3s;
}

.nav_btn:hover{
  opacity:.8;
  filter: brightness(1.1);
}

.nav_btn.active{
  opacity:1;
  filter:brightness(1.25);
}

.nav_btn:nth-child(1){
  background-image:url("/html/user_data/assets/img/bonus/al/top/icon01.png");
}

.nav_btn:nth-child(2){
  background-image:url("/html/user_data/assets/img/bonus/al/top/icon02.png");
}

.nav_btn:nth-child(3){
  background-image:url("/html/user_data/assets/img/bonus/al/top/icon03.png");
}

.nav_btn:nth-child(4){
  background-image:url("/html/user_data/assets/img/bonus/al/top/icon04.png");
}