@charset "UTF-8";
/* CSS Document */

body { background: #000; }

main {
  font-family: ten-mincho, serif;
  font-weight: 400;
  font-style: normal;
}

main::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-image: url("images/bg.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
}

article {
  font-size: clamp(16px,3.8vw,18px);
  text-align: center;
  color: #fff;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: radial-gradient(circle, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%);
}

article p { margin: 1rem 0; }

article h1 { margin: 0 0 30px; }

.link-btn { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  margin: 2rem 0;
}

.link-btn a {
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
  border-radius: 40px;
  text-align: center;
  padding:20px 40px;
  line-height: 1;
  background: transparent linear-gradient(208deg, #21528D 0%, #8EB9CC 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px rgba(0,0,0,.16);
  margin: auto;
}

img.logo { display: block; margin: 0 auto 50px; } 

/* box */

.slidebox {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: clamp( 250px,78vw,403px );
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fade_box { 
  position: absolute;
  width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fade_box.box01 { height: clamp( 146px,46vw,360px ); }
.fade_box.box02 { height: clamp( 164px,51vw,403px ); }
.fade_box.box03 { height: clamp( 164px,51vw,403px ); }
.fade_box.box04 { height: clamp( 250px,78vw,300px ); z-index: 50; }

.fade_box div { 
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fade_box p.img_on {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 95%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* animation */

.fadeIn {
  animation-name:fadeInAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeInAnime {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade_box.box01 > div {
  animation-name:box01div;
  animation-duration:11s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes box01div {
  0% { opacity: 0; }
  9% { opacity: 1; }
  27% { opacity: 1; }
  36% { opacity: .3; }
  91% { opacity: .3; }
  100% { opacity: 0; }
}

.fade_box.box01 > p {
  animation-name:box01p;
  animation-duration:8s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay: 3s;
}

@keyframes box01p {
  0% { opacity: 0; transform: translateY(50px); }
  12.5% { opacity: 1; transform: translateY(0); }
  87.5% { opacity: 1; }
  100% { opacity: 0; }
}

.fade_box.box02 > div {
  animation-name:box02div;
  animation-duration:10s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay: 11s;
}

@keyframes box02div {
  0% { opacity: 0; }
  10% { opacity: 1 }
  20% { opacity: 1; }
  40% { opacity: .3; }
  90% { opacity: .3; }
  100% { opacity: 0; }
}

.fade_box.box02 > p {
  animation-name:box02p;
  animation-duration:7s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay: 13.5s;
}

@keyframes box02p {
  0% { opacity: 0; transform: translateY(50px); }
  14% { opacity: 1; transform: translateY(0); }
  86% { opacity: 1; }
  100% { opacity: 0; }
}

.fade_box.box03 > div {
  animation-name:box03div;
  animation-duration:10s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay: 21s;
}

@keyframes box03div {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 1; }
  40% { opacity: .3; }
  90% { opacity: .3; }
  100% { opacity: 0; }
}

.fade_box.box03 > p {
  animation-name:box03p;
  animation-duration:7.5s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay: 23.5s;
}

@keyframes box03p {
  0% { opacity: 0; transform: translateY(50px); }
  13% { opacity: 1; transform: translateY(0); }
  87% { opacity: 1; }
  100% { opacity: 0; }
}

.fade_box.box04 > p {
  animation-name:box04p;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay: 32s;
}

@keyframes box04p {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

.fade_box.box04 > div.link_delay {
  animation-name:box04link_delay;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay: 36s;
  flex-direction: column;
  margin-top: 50px;
}

@keyframes box04link_delay {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* PC / SP */

.sp-only { display: none; }
@media screen and (max-width: 896px) { 
  .pc-only { display: none; } .sp-only { display: block; } 
}