@charset "utf-8";
/* 各ページのヘッダー部分で使用するCSS */

#header {
  position: fixed; /* 画面に固定 */
  height: 70px; /* 高さ指定 */
  width: 100%; /* 横幅全体 */
  z-index: 999; /* 他の要素より手前に表示 */
  background-color: #dcd4d4; /* 背景色を追加 */
  /* レイアウトのためのCSS */
  display: flex; /* 子要素をフレックスボックスで配置 */
  justify-content: space-between; /* 子要素を両端に配置し、間に均等なスペース */
  align-items: center; /* 子要素を垂直方向の中央に配置 */
  text-align: center; /* テキストを中央揃え（Flexboxではあまり影響しない可能性あり） */
  padding: 20px 100px 20px 0; /* 内側の余白（上、右、下、左） */
  flex-direction: row-reverse;
}

/* ヘッダーのスクロールアニメーション（上に上がる動き） */
#header.UpMove {
  position: fixed;
  width: 100%;
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

/* ヘッダーのスクロールアニメーション（下に下がる動き） */
#header.DownMove {
  position: fixed;
  width: 100%;
  animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 画面幅960px以下でのヘッダーの調整 */
@media screen and (max-width: 960px) {
  #header,
  #header.UpMove,
  #header.DownMove {
    animation: none; /* モバイルではアニメーションを無効化 */
    height: auto; /* 高さを自動調整 */
    padding: 0; /* パディングをリセット */
    display: block; /* ブロック要素に変更（縦並び） */
  }
}

/* ナビゲーションのメインUL設定 */
nav ul {
  list-style: none; /* リストのマーカーを削除 */
  display: flex; /* 子要素（li）を横並びにする */
  justify-content: center; /* 子要素を水平方向の中央に配置 */
}

/* 2階層目以降のULは横並びにしない（ドロップダウンメニュー用） */
nav ul ul {
  display: block; /* ブロック要素として縦に並べる */
}

/* 下の階層のULや矢印の基点にするためliにrelativeを指定 */
nav ul li {
  position: relative; /* 絶対配置の子要素の基準点とする */
}

/* ナビゲーションのメインリンク設定 */
nav ul li a {
  display: block; /* ブロック要素としてクリック可能領域を広げる */
  text-decoration: none; /* 下線を削除 */
  color: #333; /* デフォルトのテキスト色 */
  padding: 20px 20px; /* 内側の余白 */
  transition: all 0.3s; /* ホバーアニメーション */
}

/* 2階層目以降のリンク設定 */
nav ul li li a {
  padding: 10px 20px; /* メインリンクより上下の余白を小さくする */
}

/* リンクにホバーした時の設定 */
nav ul li a:hover {
  color: #960021 !important; /* ホバー時のテキスト色を赤色に */
}

/*== 矢印の設定 ==*/
/* 2階層目を持つli（ドロップダウンがある項目）の矢印の設定 */
nav ul li.has-child::before {
  content: ""; /* 擬似要素として空の内容を作成 */
  position: absolute; /* 親要素（li）を基準に配置 */
  left: 5px; /* 左からの位置 */
  top: 30px; /* 上からの位置 */
  width: 6px; /* 矢印の幅 */
  height: 6px; /* 矢印の高さ */
  border-top: 2px solid #960021; /* 矢印の上辺の色を赤色に */
  border-right: 2px solid #960021; /* 矢印の右辺の色を赤色に */
  transform: rotate(135deg); /* 回転させて矢印の形にする */
}

/*== 2・3階層目の共通設定（ドロップダウンメニュー） ==*/
/* 下の階層を持っているulの指定 */
nav li.has-child ul {
  position: absolute; /* 親要素（li）を基準に配置 */
  left: 0; /* 親要素の左端に合わせる */
  top: 62px; /* 親要素の62px下から表示開始 */
  z-index: 4; /* 他の要素より手前に表示 */
  background: rgba(255, 255, 255, 0.2); /* 半透明の白い背景 */
  width: 180px; /* ドロップダウンメニューの幅 */
  visibility: hidden; /* 最初は非表示 */
  opacity: 0; /* 最初は完全に透明 */
  transition: all 0.3s; /* 表示・非表示を滑らかにアニメーション */
}

/* hoverしたら表示 */
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul {
  visibility: visible; /* 表示状態にする */
  opacity: 1; /* 不透明にする */
}

/* ドロップダウンメニュー内のaタグの形状 */
nav li.has-child ul li a {
  color: #333;
  border-bottom: solid 1px rgba(255, 255, 255, 0.4); /* 下線で区切る */
}

/* ドロップダウンメニュー内の最後のaタグには下線をつけない */
nav li.has-child ul li:last-child a {
  border-bottom: none;
}

/* ドロップダウンメニュー内のaタグにホバーした時の設定 */
nav li.has-child ul li a:hover,
nav li.has-child ul li a:active {
  background: rgba(255, 255, 255, 0.2); /* ホバー時の背景色を半透明の白に */
}

/* レスポンシブ対応（画面幅1200px以下） */
@media screen and (max-width: 1200px) {
  nav ul li a {
    padding: 10px; /* メインリンクのパディングを狭くする */
  }
  nav ul li li a {
    padding: 10px 10px; /* 2階層目以降のリンクのパディングをさらに狭くする */
  }
  nav ul li.has-child::before {
    left: 0; /* 矢印の位置を左端に調整 */
  }
}

/* モバイル時のナビゲーション非表示 */
.g-nav-openbtn {
  display: none;
}

@media screen and (max-width: 960px) {
  /* ナビゲーション全体のスタイル */
  #g-nav {
    position: fixed; /* 画面に固定 */
    z-index: 999; /* 最前面 */
    top: -120%; /* 画面外上部に隠しておく */
    left: 0;
    width: 100%;
    height: 100vh; /* 画面いっぱいの高さ */
    background: rgba(0, 0, 0, 0.8); /* 半透明の黒背景 */
    transition: all 0.6s; /* 開閉アニメーション */
  }

  /* activeクラスがついたら位置を0に（JSで追加される） */
  #g-nav.panelactive {
    top: 0;
  }

  /* ナビゲーションの縦スクロール */
  #g-nav.panelactive #g-nav-list {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto; /* コンテンツがはみ出したらスクロール */
    -webkit-overflow-scrolling: touch;
  }

  /* ナビゲーションのUL設定 */
  #g-nav ul {
    width: 90%;
    margin: 100px auto 0 auto; /* 天地中央揃え */
  }

  #g-nav ul ul {
    width: 100%;
    margin: 0;
  }

  /* プルダウンナビのCSS（モバイル用） */
  #g-nav ul li.has-child ul {
    position: relative; /* 絶対配置ではなく、通常のフローに */
    left: 0;
    top: 0;
    width: 100%;
    visibility: visible; /* JSで制御するため一旦表示 */
    opacity: 1; /* JSで制御するため一旦表示 */
    display: none; /* JSのslidetoggleで表示させるため非表示に */
    transition: none; /* JSで制御するためCSSのアニメーションを切る */
    transform: none;
  }

  /* リストのレイアウト設定 */
  #g-nav li {
    list-style: none;
    text-align: center;
  }

  #g-nav li a {
    color: #aaa; /* リンクテキスト色 */
    text-decoration: none;
    padding: 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
  }

  /* ナビゲーション全体（画面幅960px以下） */
  nav {
    padding: 0; /* ナビゲーション全体のパディングをリセット */
  }

  nav ul {
    display: block; /* メインナビゲーションを縦並びに変更 */
  }

  nav ul li a {
    border-bottom: 1px solid #eee; /* 各リンクの下に区切り線を追加 */
  }

  /* 矢印の位置と向き（モバイル向け） */
  nav ul li.has-child::before {
    left: 20px; /* 矢印の位置を右に調整 */
  }

  nav ul ul li.has-child::before {
    transform: rotate(135deg); /* サブメニューの矢印の向きを調整 */
    left: 20px; /* サブメニューの矢印の位置を調整 */
  }

  /* .active クラスがついた時の矢印の向き（アコーディオンメニューなど用） */
  nav ul li.has-child.active::before {
    transform: rotate(-45deg); /* 矢印の向きを反対に（開閉を示す） */
  }

  /* ハンバーガーボタンの表示 */
  .g-nav-openbtn {
    display: block; /* ボタンを表示 */
    position: fixed;
    z-index: 9999; /* 最前面 */
    top: 10px;
    right: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
  }

  .g-nav-openbtn.active {
    background: rgb(111, 111, 111);
    border-radius: 50%;
  }

  /* ボタン内側 */
  .g-nav-openbtn .openbtn-area {
    transition: all 0.4s;
  }

  .g-nav-openbtn span {
    display: inline-block;
    transition: all 0.4s; /* アニメーションの設定 */
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background: #333;
    width: 45%;
  }

  .g-nav-openbtn span:nth-of-type(1) {
    top: 15px;
  }

  .g-nav-openbtn span:nth-of-type(2) {
    top: 23px;
  }

  .g-nav-openbtn span:nth-of-type(3) {
    top: 31px;
  }

  /* activeクラスが付与されると線と周りのエリアが回転して×になる */
  .g-nav-openbtn.active .openbtn-area {
    transform: rotateY(-360deg);
  }

  .g-nav-openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-135deg);
    width: 30%;
    background: #fff;
  }

  .g-nav-openbtn.active span:nth-of-type(2) {
    opacity: 0;
    background: #fff;
  }

  .g-nav-openbtn.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(135deg);
    width: 30%;
    background: #fff;
  }
}

/* 線の基点とするためrelativeを指定 */
.nav01c li a {
  position: relative;
}

.nav01c li.current a,
.nav01c li a:hover {
  color: #333;
}

/* リンクの下線のスタイル */
.nav01c li a::after {
  content: "";
  position: absolute;
  bottom: 16px;
  left: 25%;
  width: 50%;
  height: 1px;
  background: #333;
  transition: all 0.3s;
  transform: scale(0, 1); /* X方向0、Y方向1 */
  transform-origin: left top; /* 左上基点 */
}

/* ドロップダウンメニュー内のリンクには下線を表示しない */
.nav01c li li a::after {
  display: none;
}

/* 現在地とhoverの設定で下線を拡大 */
.nav01c li.current a::after,
.nav01c li a:hover::after {
  transform: scale(1, 1); /* X方向にスケール拡大 */
}

/* 画面幅960px以下では下線を非表示 */
@media screen and (max-width: 960px) {
  .nav01c li a::after {
    display: none;
  }
}