@charset "utf-8";

:root {
  /* --NotoSerif: "Noto Serif", serif; */
  --backGray: #343434;
  --softWhite: #ffffff5a;
}

/* 各種ページ共通背景 */
.page_background_image {
  background-color: #343434;
  background-image: url(../img/back_image_wasi.png);
  background-blend-mode: soft-light;
  background-repeat: no-repeat;
  background-position: left top;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.header_container {
  font-family: var(--NotoSerif);
  font-size: 2rem;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 135.5rem;
  margin: 2.5rem 5rem 0 auto;
  z-index: 100;
}
.header_title_logo {
  width: 21.672rem;
  margin-top: 1rem;
  transition: all 0.5s;
}
.header_title_logo a {
  display: block;
}
.header_container img {
  object-fit: contain;
}
.header_title_logo.is_scrolling {
  opacity: 0;
  visibility: hidden;
}

.navigation_container {
  display: flex;
  gap: 9rem;
}
.nav_container_list {
  display: flex;
  gap: 4rem;
}
.header_lang_container {
  display: flex;
  gap: 1.5rem;
}

.nav_item_link {
  color: var(--white);
  font-weight: normal;
  line-height: calc(27 / 20);
}

.header_lang_btn,
.header_lang_slash {
  color: var(--white);
  height: 3.2rem;
}

.lang_is_active {
  border-bottom: 0.1rem solid var(--white);
}

/*=============================
HEADER-FV
=============================*/
.header_fv {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 100%;
  height: 81rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../img/header_fv.webp);
}
/* ==== ABOUT-FV ==== */
.header_about_fv {
  height: 60rem;
  background-position: center center;
  background-image: url(../img/header_about_fv.webp);
}
/* ==== TOURS-FV ==== */
.header_tours_fv {
  height: 60rem;
  background-position: center center;
  background-image: url(../img/header_tour_fv.webp);
}
/* ==== SERVICE-FV ==== */
.header_service_fv {
  height: 60rem;
  background-image: url(../img/header_service_fv.webp);
  background-position: center;
}
/* ==== NEWS-FV ==== */
.header_news_fv {
  height: 60rem;
  background-position: center center;
  background-image: url(../img/header_news_fv.webp);
}
/* ==== contact-FV ==== */
.header_contact_fv {
  height: 60rem;
  background-position: center center;
  background-image: url(../img/header_contact_fv.webp);
}

.header_fv_title {
  display: flex;
  gap: 1rem;
  align-items: center;
  color: var(--white);
  font-family: var(--NotoSerif);
  font-size: 3rem;
  font-weight: bold;
  line-height: calc(44 / 30);
  margin: 0 0 3.5rem 8rem;
}
.header_fv_title::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--white);
}

/*=============================
HEADER-TOP-BTN
=============================*/
.header_top_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 2.7rem;
  bottom: 3rem;
  width: 5.3rem;
  height: 5.3rem;
  border: 0.1rem solid var(--white);
  border-radius: 50%;
  cursor: pointer;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.header_top_btn.is_show {
  opacity: 1;
  visibility: visible;
}
.header_top_btn_arrow {
  display: block;
  width: 1.5rem;
  height: 0.1rem;
  background-color: var(--white);
}
.header_top_btn_arrow:nth-child(1) {
  transform: translateX(0.35rem) rotate(-60deg);
}
.header_top_btn_arrow:nth-child(2) {
  transform: translateX(-0.35rem) rotate(60deg);
}

.header_sp {
  display: none;
}

@media screen and (max-width: 699.98px) {
  .header_container {
    width: 35.5rem;
    margin: 1rem auto 0;
  }
  .header_title_logo {
    width: 16.254rem;
    margin-top: 0.5rem;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .navigation_container {
    gap: 3.3rem;
  }
  .nav_container_list {
    display: none;
  }

  /*=============================
  HMB-MENU
  =============================*/
  .header_sp_hmb {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  .header_hmb_circle {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--white);
  }
  .header_hmb_line {
    display: block;
    width: 4.5rem;
    height: 0.1rem;
    background-color: var(--white);
    transition: all 0.5s;
  }

  .hmb_nav_container {
    font-family: var(--NotoSerif);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    padding: 10rem 0 5rem;
    background-color: var(--backGray);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .hmb_nav_container::before {
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(../img/back_image_wasi.png);
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background-position: right bottom;
    opacity: 0.4;
    z-index: -1;
  }
  .header_hmb_menu {
    width: 31.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .hmb_nav_item {
    padding-bottom: 1rem;
    border-bottom: 0.1rem solid var(--softWhite);
  }
  .hmb_nav_item_link {
    display: block;
    color: var(--white);
    font-size: 2rem;
    font-weight: 400;
    line-height: calc(27 / 20);
  }

  .header_pc_lang.header_active {
    display: none;
  }
  .header_lang_container {
    font-size: 2rem;
    margin-top: 0.5rem;
  }

  /*=============================
  HEADER-ACTIVE
  =============================*/
  .hmb_nav_container.header_active {
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .header_active .header_hmb_line:nth-child(2) {
    animation: hmb-center-animation 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    animation-fill-mode: forwards;
    /* transform: translateY(0.5rem) rotate(15deg); */
  }
  .header_active .header_hmb_line:nth-child(3) {
    animation: hmb-bottom-animation 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    animation-duration: 1s;
    animation-fill-mode: forwards;
    /* transform: translateY(-0.5rem) rotate(-15deg); */
  }

  @keyframes hmb-center-animation {
    0% {
      transform: translateY(0) rotate(0);
    }
    100% {
      transform: translateY(0.5rem) rotate(15deg);
    }
  }
  @keyframes hmb-bottom-animation {
    0% {
      transform: translateY(0) rotate(0);
    }
    100% {
      transform: translateY(-0.5rem) rotate(-15deg);
    }
  }

  .inactive .header_hmb_line:nth-child(2){
    animation: hmb-center-animation-rev 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    animation-fill-mode: forwards;
  }

  .inactive .header_hmb_line:nth-child(3){
    animation: hmb-bottom-animation-rev 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    animation-fill-mode: forwards;
  }

  @keyframes hmb-center-animation-rev {
    0% {
      transform: translateY(0.5rem) rotate(15deg);
    }
    100% {
      transform: translateY(0) rotate(0);
    }
  }
  @keyframes hmb-bottom-animation-rev {
    0% {
      transform: translateY(-0.5rem) rotate(-15deg);
    }
    100% {
      transform: translateY(0) rotate(0);
    }
  }

  

  /*=============================
  HEADER-FV
  =============================*/
  .header_fv {
    height: 66.7rem;
    background-position: 82% top;
  }

  .header_about_fv,
  .header_tour_fv,
  .header_service_fv,
  .header_news_fv,
  .header_contact_fv {
    height: 40rem;
    background-position: center center;
  }

  .header_fv_title {
    font-size: 2.5rem;
    line-height: calc(36 / 25);
    margin: 0 0 1.5rem 1.5rem;
    gap: 0.5rem;
  }

  .header_pc {
    display: none;
  }
}