@charset "utf-8";


/* ==========================
ローディング
============================= */
#loading {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: #fff;
  display: grid;
  place-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: all 1s ease; 
}

#loading.loaded {
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
}


#loading.show-img .spinner img {
  opacity: 1;
  transform: scale(1);
}
.spinner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
#loading .loadLine{
  display: flex;
  align-items: end;
  gap: .3rem;
}
#loading .loadLine span {
  opacity: 0;
  transform: translateY(20px);
  display: inline-block;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#loading .loadLine span.show {
  opacity: 1;
  transform: translateY(0);
}


@media screen and (max-width: 767px){
  .spinner{
    width: 300px;
    margin: auto;
    justify-content: center;

    .loadLine{
      &:nth-of-type(1){
        width: 250px;
      }
      &:nth-of-type(2){
        width: 300px;
      }
    }
  }
}

/* ==========================
mv
============================= */
.mv{
  width: 100%;
  display: block;
  position: relative;
  height: 100vh;

  & h2{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media print, screen and (min-width: 768px){
  .mv{
    background: url(../img/mv_bg.webp) no-repeat center/cover;
  }
}
  @media screen and (max-width: 767px){
  .mv{
    background: url(../img/mv_bg_sp.webp) no-repeat center/cover;
  }
}

.mv_kansya{
  position: absolute;
  top: 40%;
  left: 10%;
  transform: translate(0%, 0%);
  width: 35vw;
  img{
    width: 100%;
  }
}

.mv_po{
  position: absolute;
  top: 13.4rem;
  right: 0%;
}


.mv_image{
  width: 145px;
  height: 251px;
  position: absolute;
  top: 10rem;
  left: 0;

  span{
    position: absolute;

    &:nth-child(1){
      left: 2.7rem;
      top: 9rem;
    }
    &:nth-child(2){
      left: 0;
      top: 13.8rem;
    }
    &:nth-child(3){
      left: 3rem;
      top: 17rem;
    }
    &:nth-child(4){
      left: 0;
      top: 26rem;
    }
  }
}

.mv_text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 100%;
  position: relative;
  top: 15rem;
}
.mv_text span {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
  font-size: 17rem;
  line-height: 1;
  display: flex;
  align-items: end;
  height: 86px;
}


.mv_text span.show {
  opacity: 1;
  transform: translateY(0);
}

.mv_text .font_num {
  font-variant-numeric: tabular-nums;
  min-width: 1.8ch;
  justify-content: center;
}

/* 動き */
span.is-move-a {
  animation: move-a 3s ease-in-out;
}

span.is-move-b {
  animation: move-b 3s ease-in-out;
}
@keyframes move-a {
  0%,7%{transform:translate(0,0) rotate(0deg)}
  14%{transform:translate(0,0) rotate(10deg)}
  17.5%{transform:translate(0,0) rotate(0deg)}
  19.6%{transform:translate(-13px,-30px) rotate(-25deg)}
  24.5%{transform:translate(-16px,-20px) rotate(-15deg)}
  26.6%{transform:translate(-18px,-10px) rotate(-10deg)}
  28%{transform:translate(-20px,0) rotate(-5deg)}
  29.4%{transform:translate(-20px,2px) rotate(-3deg)}
  30.8%{transform:translate(-20px,0) rotate(-2deg)}
  35%{transform:translate(-18px,-12px) rotate(0deg)}
  37.8%{transform:translate(-14px,3px) rotate(0deg)}
  40.6%{transform:translate(-10px,-8px) rotate(0deg)}
  43.4%{transform:translate(-5px,5px) rotate(0deg)}
  46%,100%{transform:translate(0,0) rotate(0deg)}
}

@keyframes move-b {
  0%,7%{transform:translate(0,0) rotate(0deg)}
  14%{transform:translate(0,0) rotate(-10deg)}
  17.5%{transform:translate(0,0) rotate(0deg)}
  21%{transform:translate(13px,-28px) rotate(20deg)}
  25.2%{transform:translate(16px,-20px) rotate(10deg)}
  26.6%{transform:translate(18px,-10px) rotate(5deg)}
  28%{transform:translate(20px,0) rotate(2deg)}
  29.4%{transform:translate(20px,2px) rotate(1deg)}
  30.8%{transform:translate(20px,0) rotate(0deg)}
  35%{transform:translate(18px,3px) rotate(0deg)}
  37.8%{transform:translate(14px,-12px) rotate(0deg)}
  40.6%{transform:translate(10px,5px) rotate(0deg)}
  43.4%{transform:translate(5px,-8px) rotate(0deg)}
  46%,100%{transform:translate(0,0) rotate(0deg)}
}

/*タブレット（縦）*/
@media screen and (orientation: portrait) and (min-width: 768px){
  .mv{
    height: 916px;
  }
}

@media screen and (max-width: 767px){

  .mv_text{
    width: 90%;
    margin: auto;
    top: 20%;

    span{
      font-size: 20vw;
    }
  }
  .mv_image{
    width: 55px;
    height: 86px;
    position: absolute;
    top: 0;
    left: 0;

    span{
      &:nth-child(5){
        left: 0;
        top: 8rem;
      }
    }
  }
  .mv_kansya{
    width: 85%;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0%);
  }
  .mv_po{
    width: 70%;
    top: 40%;
  }
}

/* ==========================
news
============================= */
.news{
  padding: 6rem 0;
  background: #232222;
  position: relative;

  & h2{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

#news{
  width: 282px;
  height: 42px;
  margin: auto;
  display: flex;
  align-items: end;
  gap: 2rem;
  margin-bottom: 3rem;

  & p{
    text-align: center;
    white-space: nowrap;
  }
}



.news_inner{
  max-width: 1024px;
  width: 90%;
  margin: auto;
}
.news_box{
  display: flex;
  gap: 2rem;
  justify-content: center;

  & a{
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  & time{
    font-size: 1.4rem;
  }
  & h3{
    font-size: 2rem;
  }
}
@media print, screen and (min-width: 768px){
  .news{
    height: 682px;
  }
}


  @media screen and (max-width: 767px){
    .news{
      padding: 4rem 0 20rem;
    }
    .news_box{
      flex-direction: column;
      align-items: center;
    }
  }