@charset "UTF-8";

/* ===============================
   ハンバーガーメニュー（共通）
   - body に .open 付与
   =============================== */

/* トグルボタン本体 */
.nav_toggle {
  position: fixed;
  top: 40px;
  right: 25px;
  height: 32px;
  cursor: pointer;
  z-index: 9999;
  transition: 0.5s;
  display: none; /* SP だけ表示（下の @media で上書き） */
}

.nav_toggle > div {
  position: relative;
  width: 25px;
}

/* 3本線 */
.nav_toggle span {
  width: 100%;
  height: 3px;
  left: 0;
  display: block;
  background: #fff;
  position: absolute;
  transition: transform 0.6s ease-in-out, top 0.5s ease;
}

.nav_toggle span:nth-child(1) { top: 0; }
.nav_toggle span:nth-child(2) { top: 8px; }
.nav_toggle span:nth-child(3) { top: 16px; }

/* open 状態（×マーク） */
body.open .nav_toggle span {
  background: #fff;
}
body.open .nav_toggle span:nth-child(1) {
  top: 15px;
  transform: rotate(45deg);
}
body.open .nav_toggle span:nth-child(2) {
  top: 15px;
  width: 0;
  left: 50%;
}
body.open .nav_toggle span:nth-child(3) {
  top: 15px;
  transform: rotate(-45deg);
}

/* スクロール時に下がるバージョン（JSから .nav_toggle_down を付ける） */
.nav_toggle.nav_toggle_down {
  background: #c52100;
  right: 0;
  padding: 14px 10px 0 10px;
}
.nav_toggle.nav_toggle_down span { background-color: #fff; }

/* ===============================
   全画面ナビ（スマホ用）
   =============================== */

.container { z-index: 90; }

/* オーバーレイ */
.hum_nav {
  background: linear-gradient(300deg, #1d568e 0%, #5f88b8 100%);
  color: #fff;
  position: fixed;
  inset: 0;
  z-index: 99;
  text-align: center;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 29px;
  opacity: 0;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  background-position-x: center;
}

/* サイトロゴ＆メニューリスト */
.hum_nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hum_nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  transition: color 0.6s ease;
  font-size: 1.1rem;
  font-weight: 300;
}

.hum_nav a:hover { color: #666; }

.hum_nav ul li {
  opacity: 0;
  transform: translateY(200px);
  transition: transform 0.2s ease, opacity 0.2s ease;
  font-size: 0.9rem;
}

/* 1つ目の li はロゴ想定 */
.hum_nav ul li:nth-child(1) {
  width: 30%;
  margin: 0 auto 20px;
}
.hum_nav ul li:nth-child(1) img { width: 100%; }

/* 順番ごとのアニメーション遅延 */
.hum_nav ul li:nth-child(2) { transition-delay: 0.10s; }
.hum_nav ul li:nth-child(3) { transition-delay: 0.15s; }
.hum_nav ul li:nth-child(4) { transition-delay: 0.20s; }
.hum_nav ul li:nth-child(5) { transition-delay: 0.25s; }
.hum_nav ul li:nth-child(6) { transition-delay: 0.30s; }
.hum_nav ul li:nth-child(7) { transition-delay: 0.35s; }
.hum_nav ul li:nth-child(8) { transition-delay: 0.40s; }
.hum_nav ul li:nth-child(9) { transition-delay: 0.45s; }
.hum_nav ul li:nth-child(10) { transition-delay: 0.50s; }
.hum_nav ul li:nth-child(11) { transition-delay: 0.55s; }
.hum_nav ul li:nth-child(12) { transition-delay: 0.60s; }
.hum_nav ul li:nth-child(13) { transition-delay: 0.65s; }

/* ===============================
   下部の斜めストライプ
   =============================== */

.hum_nav::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 30vw solid rgba(255, 255, 255, 0.1);
  border-right: 100vw solid transparent;
  background: none;
  z-index: -1;
}

.hum_nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 10vw solid var(--brand-500, #5f88b8);
  border-left: 100vw solid transparent;
  background: none;
  z-index: -2;
}

/* ボトムの斜め色帯アニメーション */
.hum_nav_bottom_red,
.hum_nav_bottom_blue {
  width: 100%;
  overflow: hidden;
  height: 200px;
  position: absolute;
}

.hum_nav_bottom_red {
  bottom: -140px;
  background-color: rgba(197, 33, 0, 0.5);
  right: -1000px;
  transform: rotateZ(-6deg);
  transition: 1.2s ease;
  transition-delay: 0.2s;
}

.hum_nav_bottom_blue {
  bottom: -200px;
  background-color: rgba(24, 41, 135, 0.7);
  left: -1000px;
  transform: rotateZ(6deg);
  transition: 0.5s ease;
  transition-delay: 0.6s;
}

body.open .hum_nav_bottom_red { right: -100px; }
body.open .hum_nav_bottom_blue { left: -100px; }

/* ===============================
   open 状態（body に .open）
   =============================== */

body.open { overflow: hidden; }

body.open .hum_nav {
  visibility: visible;
  opacity: 1;
}

body.open .hum_nav li {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1s ease, opacity 0.4s ease;
}

/* ===============================
   レスポンシブ（SPだけボタン表示）
   =============================== */

@media screen and (max-width: 959px) {
  .nav_toggle { display: block; }
  .hum_nav a { font-size: 1rem; }
  .index_contents_inner { width: 100%; }
  .hum_nav ul li:nth-child(1) { width: 60%; }
  .hum_nav_bottom_red { bottom: -185px; }
}