@keyframes fade_in {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade_in_img {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: .75;
    transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
  .section_header {
    border-bottom:4px solid var(--base-color);
    padding-bottom: .5rem;
  }
}
@media screen and (min-width: 768px) {
  #site-header {
    transition: background-color .25s ease;
  }
}
.scrolled #site-header {
  background:var(--base-color) ;
}

.section_title {
  font-weight: 700;
  font-size: 2.25rem;
}

.section_title_sub {
  font-weight: 700;
  color: var(--main-color);
  font-size: 0.875rem;
  text-indent: 6px;
}

.section_body {
  padding: 1rem 0;
  line-height: 1.6;
  p{
    padding-bottom: 1rem;
  }
}

@media screen and (min-width: 768px) {
  .is_grid {
    display: grid;
    grid-template-columns:1fr 2fr;
  }
  .is_grid .section_body{
    padding: 0 0 0 2rem;
    border-left: 8px solid var(--base-color);
  }
}

#body_wrapper {
  .section {
    padding: 2rem 0;
  }
  /*= キービジュアル =*/
  .section_mv {
    padding: 0;
    position:relative ;
    height: 75vh;
    overflow: hidden;
    .images_wrapper {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      background: var(--base-color);
    }
    .images_item {
      height: 75vh;
      width:calc(100vw / 4) ;
      opacity: .75;
      transform: translateY(-100%);
    }
    .images_item:nth-child(4) {
      animation:fade_in_img 1s ease forwards;
    }
    .images_item:nth-child(3) {
      animation:fade_in_img 1s ease .5s forwards;
    }
    .images_item:nth-child(2) {
      animation:fade_in_img 1s ease 1s forwards;
    }
    .images_item:nth-child(1) {
      animation:fade_in_img 1s ease 1.5s forwards;
    }
    .images_item img {
      height: 75vh;
      width:calc(100vw / 4) ;
      object-fit: cover;
    }
    .catch_wrapper {
      text-align: center;
      position: absolute;
      top: 0;
      bottom: 0;
      color: #fff;
      width: 100%;
      height: 100%;
      display: grid;
      align-items: center;
      padding:calc(100vw / 5 / 2) ;
      .catch_copy {
        font-family: var(--title-font);
        font-weight: normal;
        font-size: 4rem;
        animation: fade_in;
        animation-duration: 1.5s;
        animation-delay: 2s;
        opacity: 0;
        animation-fill-mode: forwards;
        @media screen and (min-width: 768px) {
            font-size: 4.5rem;
        }
      }
      .catch_lead {
        animation: fade_in;
        animation-duration: 1s;
        animation-delay: 1s;
        opacity: 0;
        animation-fill-mode: forwards;
        font-size: 1.25rem;
        font-weight: 400;
        @media screen and (min-width: 768px) {
            font-size: 1.5rem;
        }
      }
    }
  }

  /*= お知らせ =*/
  .section_news {
    .section_header {
      display: grid;
      grid-template-columns: 1fr 120px;
      align-items: center;
      @media screen and (min-width: 768px) {
        display: block;
      }
    }
    @media screen and (min-width: 768px) {
      .section_header .btn_wrapper {
          margin-top: 1rem;
      }
    }
    .archive_list .entry:last-of-type {
      border:none;
    }
    
    .archive_list .entry a:hover {
      color: var(--accent-color);
    }
  }

  /*= トップフィーチャー =*/
  .section_feature{
    text-align: center;
    background: var(--base-color);
    color: var(--diff-color);
    .link_list {
      display: grid;
      gap: 2rem;
      @media screen and (min-width: 768px) {
        grid-template-columns: repeat(2,1fr);
      }
    }
  }

  /*= オリジン =*/
  .section_origin{
    .body_title {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: .5rem;
      color: var(--main-color);
    }
  }

  /*= 採用情報 =*/
  .section_recruit {
    color: var(--diff-color);
    background: var(--base-color);
    text-align: center;
    position: relative;
    overflow: hidden;
    .bg_img{
      opacity: .5;
      position: absolute;
      object-fit: cover;
      object-position: center;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      filter: blur(20px);
      -webkit-filter: blur(20px);
    }
    .section_inner {
      position: relative;
      z-index: 3;
      padding: 2rem;
      @media screen and (min-width: 768px) {
        padding: 4rem 2rem;
      }
    }
    .recruit_lead {
      padding-bottom: 1rem;
    }
    .btn_wrapper .btn{
      font-size: 1.5rem;
      padding-right: 2.5rem;
      font-weight: 200;
    }
    .btn_wrapper .btn::before{
      width: 1rem;
      height: 1rem;
      right: 1.25rem;
    }
  }
}