@charset "utf-8";
/*===========
inview
===========*/

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 3rem);
  transition: 1s;
}

.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* 制作者:佐々木 */
/* NAV-LINK-ACTIVE-BORDER */
.current_now_link {
  border-bottom: 0.2rem solid #FE191F;
}

.header_bg_image {
  height: 40rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/about_worldwide.jpeg);
}

.header_works_bg {
  height: 40rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/header_works_bg.jpeg);
}

.header_news_bg {
  height: 40rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/header_news_bg.jpeg);
}

.header_contact_bg {
  height: 40rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/header_contact_bg.jpeg);
}


.sea_header {
  max-width: 128rem;
  width: 100%;
  height: 0;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  will-change: transform;
}

/* .sea_header_container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
} */

.header_logo {
  height: 8rem;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #20399F99;
}

.header_logo_image {
  object-fit: cover;
  aspect-ratio: 458.55/29.75;
  width: 45.855rem;
  /* background-image: url(../img/head_logo.svg); */
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: contain;
}

.header_nav {
  height: 0;
  width: fit-content;
  position: absolute;
  right: 5rem;
  top: 2.9rem;
}

.header_nav_list {
  height: 0;
  display: flex;
  gap: 5rem;
  position: relative;
}

.header_nav_link {
  color: #fff;
  text-shadow: 0.1rem 0.2rem 0.1rem rgba(0, 0, 0, 0.8);
  font-size: 1.8rem;
  font-weight: bold;
  line-height: calc(26 / 18);
}

.header_nav_hidden {
  width: 0;
  visibility: hidden;
}

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

  .header_bg_image {
    height: 23.2rem;
    background-size: 50rem;
    background-position: 100% 7%;
  }

  .sea_header {
    width: 37.5rem;
    height: 6rem;
    background-color: #20399F;
    gap: 1.276rem;
    justify-content: center;
    align-items: center;
    will-change: transform;
  }


  /* ハンバーガーメニューボタン */
  .hmb_menu_btn {
    width: 3.7rem;
    height: 3.7rem;
    border-radius: 50%;
    background-color: #ffffff;
    position: relative;
  }

  .hmb_menu_border {
    position: absolute;
    left: 0.85rem;
    display: block;
    width: 2rem;
    height: 0.1rem;
    background-color: #0F257A;
    transition: all .5s;
  }

  .hmb_menu_border:first-child {
    top: 1.45rem;
  }

  .hmb_menu_border:nth-child(2) {
    top: 1.85rem;
  }

  .hmb_menu_border:last-child {
    top: 2.25rem;
  }

  /* アクティブ時 */
  .hmb_nav_active .hmb_menu_border:first-child {
    transform: translateY(0.4rem) rotate(-25deg);
  }

  .hmb_nav_active .hmb_menu_border:nth-child(2) {
    transform: translateX(200%);
    opacity: 0;
  }

  .hmb_nav_active .hmb_menu_border:last-child {
    transform: translateY(-0.4rem) rotate(25deg);
  }


  .header_logo {
    max-width: 29.5rem;
    width: 100%;
    height: 6rem;
    padding: 0;
    background: none;
  }

  .header_logo_image {
    aspect-ratio: 295.24/29.75;
    width: 29.5rem;
  }

  .header_nav_hidden {
    width: fit-content;
    height: 0;
    position: absolute;
    top: 6rem;
    right: 0;
  }

  .sp_header_nav {
    position: absolute;
    right: -12.7rem;
    top: 0;
    width: 12.7rem;
    display: flex;
    justify-content: right;
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease-in-out;
    /* transition: all .5s; */
    /* transform: translateX(100%); */
  }

  .sp_nav_list {
    max-width: 12.7rem;
    width: 12.7rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #20399F;
    padding: 2rem;
  }

  .sp_nav_link {
    color: #ffffff;
    font-size: 2rem;
    line-height: calc(26 / 20);
    font-family: var(--DMSans);
  }

  /* .sp_header_nav {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  } */

  .contact_questions_area.active {
    z-index: 0;
  }

  .sp_header_nav.active {
    width: 12.7rem;
    right: 0;
    width: fit-content;
    visibility: visible;
    opacity: 1;
    transition-duration: .5s;
    /* transform: translateX(0); */
  }

  /* .sea_header.hmb_nav_active{
    visibility: visible;
  } */
}