@charset "utf-8";

main { overflow: hidden; }
/* common --------------------*/
body.stop { overflow:hidden; }
.slidein { animation:SlideIn 1.5s; }
.back-anime { animation:back 4s; user-drag:none;-webkit-user-drag: none; -moz-user-select: none; }
.fadeIn { 
  position:relative;
  top:100px;
  transition:all .5s ease-out;
  opacity:0;
}
.fadeIn.active { opacity:1; top:0; }

/* sec01 --------------------*/
#sec01 { position:relative; width:100vw; height:100vh; overflow:hidden; }
#sec01 ul { position:absolute; top:0; right:0; margin:5rem 5rem 0 0; }
#sec01 ul li { font-size:3rem; margin-bottom:1rem; animation:slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; transform:translateX(200%); }
#sec01 ul li:nth-child(1){ animation-delay:3s; }
#sec01 ul li:nth-child(2){ animation-delay:3.2s; }
#sec01 ul li:nth-child(3){ animation-delay:3.4s; }
#sec01 ul li:nth-child(4){ animation-delay:3.6s; }
#sec01 ul li:nth-child(5){ animation-delay:3.8s; }
#sec01 ul li:nth-child(6){ animation-delay:4s; }
#sec01 ul li:nth-child(7){ animation-delay:4.2s; margin-left:1em; }

/* logo --------------------*/
#logo {
  position:absolute;
  top:15%;
  left:5%;
}
#logo div { position:relative; mix-blend-mode:overlay; }
#logo p {
  position: absolute;
  width: 100%;
  left: 37%;
  bottom: 18%;
  font-size:5rem;
  font-weight:400;
  color: #fff;
  letter-spacing:10px;
  animation:slow-fade 4s;
  z-index:1;
}

/* sec02 --------------------*/
#sec02 { background:#505050; color:#fff; padding:10rem 0; }
#sec02 .inner { max-width:124rem; padding:0 2rem; margin:0 auto; }
#sec02 h2 { margin-bottom:2rem; }
#sec02 table { width:100%; }
#sec02 table tr {}
#sec02 table tr:nth-of-type(odd) { background:#aaa; }
#sec02 table tr th,#sec02 table tr td { padding:1rem 2rem; }
#sec02 table tr th { text-align:left; }
#sec02 table tr td{}

/* sp */
#sp { display:none; }
.sp { display:none; }

/* footer --------------------*/
footer { text-align:center; padding:0.5rem; background:#3e577f; }
footer small { color:#fff; opacity:1; }

/*----------------------------------------
responsive
----------------------------------------*/
@media screen and (max-width:1500px){  
  #logo svg { max-width:100rem; }
  #logo p { bottom:23%; }  
}

@media screen and (max-width:1350px){  
  /* common */
  .back-anime { height:80rem; width:100%; object-fit:cover; display:block; background-position:right; }
  /* sec01 */
  #sec01 { width:100%; height:100%; }
  /* logo */
  #logo { top:10%; left:0; margin-left:2rem; }
  #logo svg { max-width:80rem; }
  #logo p { font-size:3rem; bottom:29%; }  
}

@media screen and (max-width:1000px){
  /* common */
  body.stop { overflow:initial; }
  .back-anime { height:60rem; }
  /* logo */
  #logo { top:23%; }
  #logo svg { max-width:60rem; height:auto; }
  #logo p { bottom:15%; }
  /* sec01 */
  #sec01 ul { margin:3rem 3rem 0 0; }
  /* sec02 */
  #sec02 { padding:3rem 0; }  
}

@media screen and (max-width:820px){
  /*sec01*/
  #sec01 ul { display:none; }
  /*logo*/
  #logo { top:23%; left:0; right:0; text-align:center; margin-left:0; }
  #logo p { left:0; text-align:center; }
  /* sp */
  #sp { display:block; padding:3rem 0; }
  #sp ul { width:25%; margin-left:auto; padding:0 2rem; }
  #sp ul li { font-size:2.4rem; margin-bottom:0.5rem; animation:slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; transform:translateX(200%); }
  #sp ul li:nth-child(1){ animation-delay:1s; }
  #sp ul li:nth-child(2){ animation-delay:1.2s; }
  #sp ul li:nth-child(3){ animation-delay:1.4s; }
  #sp ul li:nth-child(4){ animation-delay:1.6s; }
  #sp ul li:nth-child(5){ animation-delay:1.8s; }
  #sp ul li:nth-child(6){ animation-delay:2s; }
  #sp ul li:nth-child(7){ animation-delay:2.2s; margin-left:1em;　margin-bottom:0; text-align:right; }
  .sp { display:block; }
}

@media screen and (max-width:600px){
  
  .back-anime { height:50rem; width:140%; }
  #logo svg { max-width:50rem; }
  #logo p { bottom:15%; font-size:2.4rem; }
  #sp ul { width:30%; }
  #sec02 table tr th { width:28%; }
  
}
@media screen and (max-width:450px){
  
  #logo svg { max-width:38rem; }
  #sp ul { width:40%; }
  #sp ul li { font-size:2rem; }
  #sec02 table tr th { width:30%; }
  
}

/*
@media screen and (min-width:820px) and (min-height:1010px){
  .fadeIn { opacity:1; top:0; }
}
*/

/*----------------------------------------
CSSアニメーションの設定
----------------------------------------*/
/* 背景アニメーション */
@keyframes back {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 右から表示 */
@keyframes slideIn {
  0% {
    transform: translateX(180%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

/* ゆっくり表示 */
@keyframes slow-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}