html {
  overflow-x: hidden;
  /* scroll-padding-top: 8rem; */
}

body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(../img/top_image.jpg);
  background-size: cover;
  animation-name: none;
  /* animation: fadezoom 10s 0s forwards; */
  overflow-x: hidden;
}

body.is_animated::before {
  animation: fadezoom 10s 0s forwards;
}

@keyframes fadezoom {
  0% {
    background-size: 100%;
  }

  100% {
    background-size: 110%;
  }
}

/* ローディング画面*/
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
}

#logo {
  width: 7rem;
  height: 6.7rem;
  margin: calc(50vh - 3.5rem) auto;
  animation: bounce 1s infinite ease-in-out;
}

.logo_loading_img {
  width: 7rem;
  height: 6.7rem;
}

#logo.loaded {
  opacity: 0;
  visibility: hidden;
}

/* ローディングアニメーション */
@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5rem)
  }
}

#loading.loaded {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999999;
  width: 100vw;
  height: 100vh;
  animation: circleHole 0.5s linear forwards;
  visibility: hidden;
}

@keyframes circleHole {
  0% {
    background: radial-gradient(circle, transparent 0%, transparent 0%, white 0%);
  }

  5% {
    background: radial-gradient(circle, transparent 0%, transparent 5%, white 15%);
  }

  10% {
    background: radial-gradient(circle, transparent 0%, transparent 10%, white 20%);
  }

  15% {
    background: radial-gradient(circle, transparent 0%, transparent 15%, white 25%);
  }

  20% {
    background: radial-gradient(circle, transparent 0%, transparent 20%, white 30%);
  }

  25% {
    background: radial-gradient(circle, transparent 0%, transparent 25%, white 35%);
  }

  30% {
    background: radial-gradient(circle, transparent 0%, transparent 30%, white 40%);
  }

  35% {
    background: radial-gradient(circle, transparent 0%, transparent 35%, white 45%);
  }

  40% {
    background: radial-gradient(circle, transparent 0%, transparent 40%, white 50%);
  }

  45% {
    background: radial-gradient(circle, transparent 0%, transparent 45%, white 55%);
  }

  50% {
    background: radial-gradient(circle, transparent 0%, transparent 50%, white 60%);
  }

  55% {
    background: radial-gradient(circle, transparent 0%, transparent 55%, white 65%);
  }

  60% {
    background: radial-gradient(circle, transparent 0%, transparent 60%, white 70%);
  }

  65% {
    background: radial-gradient(circle, transparent 0%, transparent 65%, white 75%);
  }

  70% {
    background: radial-gradient(circle, transparent 0%, transparent 70%, white 80%);
  }

  75% {
    background: radial-gradient(circle, transparent 0%, transparent 75%, white 85%);
  }

  80% {
    background: radial-gradient(circle, transparent 0%, transparent 80%, white 90%);
  }

  85% {
    background: radial-gradient(circle, transparent 0%, transparent 85%, white 100%);
  }

  90% {
    background: radial-gradient(circle, transparent 0%, transparent 90%, white 100%);
  }

  95% {
    background: radial-gradient(circle, transparent 0%, transparent 95%, white 100%);
  }

  100% {
    background: radial-gradient(circle, transparent 0%, transparent 100%, white 100%);

  }
}

/* ヘッダー */
header {
  width: 100vw;
  font-family: Noto Sans JP;
}

h1 {
  margin: 0;
}

/* トップページ用のヘッダー（PC用） */
/* 途中でロゴ、リンクの色、ホバー時の挙動が変わる */
.main_title_top {
  height: 0;
  position: fixed;
  z-index: 1000000;
}

/* 背景にグラデーションを付ける */
.main_top_wrap {
  display: flex;
  height: 23.8rem;
  background: linear-gradient(0deg, #00A6FE00, #00537F);
  transition: 0.4s ease-out;
  position: relative;
}

/* トップページのロゴ（上部） */
.logo_img_header_top1 {
  visibility: visible;
  opacity: 1;
  width: 50.595rem;
  height: 17.563rem;
  position: aboslute;
  top: 0;
  left: 0;
  margin-right: calc(100vw - 135.695rem);
  transition: 1s ease-out;
}

.logo_img_header_top1.header_control {
  visibility: hidden;
  opacity: 0;
  transition: 1s ease-out;
}

/* トップページのロゴ（下部） */
.logo_img_header_top2 {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: 1s ease-out;
  width: 28.808rem;
  height: auto;
  top: 0;
  left: 8.1rem;
  margin-right: 0;
}

.logo_img_header_top2.header_control {
  position: absolute;
  visibility: visible;
  opacity: 1;
  margin-right: calc(100vw - 121.908rem);
  transition: 1s ease-out;
}

/* トップページのリンク */
.header_top_link {
  display: block;
  color: white;
  font-weight: 500;
  margin-right: 9.65rem;
  letter-spacing: 0.2em;
  font-size: 1.8rem;
  padding-top: 3.7rem;
  transition: color 0.4s ease-out;
  white-space: nowrap;
}

.header_top_link:last-child {
  letter-spacing: 0.1em;
}

/* トップページのリンクの色を変える
    くるくる回す */
.header_top_link.header_control {
  transition: color 0.4s ease-out;
  overflow: hidden;
  /* 1つ目の影を隠す */
  color: transparent;
  /* テキスト本体は透明にする */
  /*
   影の設定
   1つ目：Y方向の位置にマイナスに設定してテキスト本体の上に配置、ぼかしなし
   2つ目：位置はテキスト本体と同じ、ぼかしなし
  */
  text-shadow: 0 -5em 0 #484848, 0 0 0 #484848;
  transition: text-shadow 0.3s;
}

.header_top_link.header_control:hover {
  text-shadow: 0 0 0 #484848, 0 5em 0 #484848;
}

/* トップページのヘッダー部についていた
シャドーのグラデーションを透明にする */
.main_top_wrap.header_control {
  background: transparent;
  transition: 0.4s ease-out;
}

/* トップページ以外のページ用のヘッダー（PC用） */
.main_title_other {
  position: fixed;
  display: flex;
  height: 10rem;
  color: #484848;
  z-index: 10000;
  background-color: white;
}

.logo_img_header_other {
  width: 28.808rem;
  height: auto;
  margin-left: 8.1rem;
  margin-right: calc(100vw - 121.908rem);
  /* margin-right: calc(100vw - 117.15rem); */
}

nav {
  display: flex;
  height: 10rem;
}

/* ホバーでリンクがくるくる回る */
.header_other_link {
  display: block;
  /* color: #484848; */
  font-weight: 500;
  margin-right: 9.65rem;
  letter-spacing: 0.2em;
  font-size: 1.8rem;
  padding-top: 3.7rem;
  white-space: nowrap;
  line-height: 1em;

  overflow: hidden;
  /* 1つ目の影を隠す */
  color: transparent;
  /* テキスト本体は透明にする */
  /*
   影の設定
   1つ目：Y方向の位置にマイナスに設定してテキスト本体の上に配置、ぼかしなし
   2つ目：位置はテキスト本体と同じ、ぼかしなし
  */
  text-shadow: 0 -5em 0 #484848, 0 0 0 #484848;
  transition: text-shadow 0.3s;

}

.header_other_link:last-child {
  letter-spacing: 0.1em;
}

.header_other_link:hover {
  text-shadow: 0 0 0 #484848, 0 5em 0 #484848;
  /* text-shadow: 0 1.5em 0 #484848; */
}

/* SP用のヘッダー（表示なし） */
.main_title_sp {
  display: none;
}

/* ハンバーガーメニュー （表示なし）*/
.hamburger_menu {
  display: none;
}

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

  /* バックの画像 */
  body::before {
    background-image: url(../img/top_image_sp.jpg);
  }

  /*ローディング画面  */
  #loading {
    z-index: 10000001;
  }

  #logo {
    width: 5.211rem;
    height: 5rem;
    margin: calc(50vh - 2.6rem) auto;
    animation: bounce 1s infinite ease-in-out;
  }

  .logo_loading_img {
    width: 5.211rem;
    height: 5rem;
  }

  /* ヘッダー */
  header {
    width: 37.5rem;
    height: 6rem;
    background-color: white;
    position: fixed;
    z-index: 10000000;
  }

  /* TOP画面（PC用、表示なし） */
  .main_title_top {
    display: none;
  }

  /* TOP以外のページのヘッダー（PC用、表示なし） */
  .main_title_other {
    display: none;
  }

  /* SP用のヘッダー */
  .main_title_sp {
    display: flex;
    width: 37.5rem;
    height: 6rem;
    position: relative;
  }

  /* logo */
  .logo_img_header_sp {
    width: 17.285rem;
    height: 6rem;
    margin-left: 0;
    margin-top: 0;
  }

  /* ハンバーガーボタン */
  .hamburger {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 4rem;
    z-index: 10000;
  }

  .hamburger span {
    display: block;
    width: 4rem;
    height: 0.1rem;
    background-color: #484848;
    margin-bottom: 0.9rem;
  }

  .hamburger span:last-of-type {
    margin-bottom: 0;
  }

  .hamburger_button_menu {
    display: block;
    letter-spacing: 0.3em;
    line-height: 1.5;
    text-align: center;
    margin: 0;
  }

  .hamburger_button_close {
    display: none;
  }

  /* ハンバーガーボタン：開き */
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(0.6rem, 2rem);
    width: 5.656rem;
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(-0.4rem, -0.8rem);
    width: 5.656rem;
  }

  .hamburger_button_menu.active {
    display: none;
  }

  .hamburger_button_close.active {
    display: block;
    letter-spacing: 0.25em;
    line-height: 1.5;
    margin: 2.1rem 0 0 -0.1rem;
  }

  /* ハンバーガーメニュー */
  .hamburger_menu {
    display: none;
    opacity: 0;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: 1s;
    z-index: -1;
    font-weight: bold;
    overflow-y: scroll;
  }

  .hamburger_menu.open {
    display: block;
    opacity: 1;
    z-index: 999;
    transition: 1s;
  }

  .hamburger_item {
    display: block;
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    text-align: center;
    color: #484848;
    margin-bottom: 6.2rem;
  }

  .hamburger_item1 {
    margin-top: 10rem;
  }

  .hamburger_item4 {
    margin-bottom: 4.288rem;
  }

  .hamburger_menu_list li:last-of-type {
    margin-bottom: 2rem;
  }

  .logo_img_hamburger {
    display: block;
    width: 18.118rem;
    height: 19.612rem;
    margin: 0 auto;
  }

}