@charset "utf-8";
/* ============================================================
   サイドメニュー（ハンバーガー展開部）／PC
   css/common.css の 1157〜1372行目 (.h_navi 系) を移植したもの。
   マークアップは共通ファイル common_page/menu.php をそのまま流用する。
   ※オリジナル(common.css)は編集しないこと。ここは新トップ専用のコピー。
   変更点:
     - font-size 1.1rem → 11px（html{font-size:62.5%} 依存をなくすため）
     - .side_menu_sub の開閉を display:none → max-height トランジションに変更（jQuery非依存化）
     - body.Android 用 Heebo フォント指定を除去
     - z-index 10000 → 10002（新ヘッダー .gh(10001) より前面に出す。下層と同じく画面上端から出すため）
     - .pc_menu_trigger 系は移植しない。×は新トップ専用の .gh-close（index.html / top.css）が
       下層の .pc_menu_trigger.active と同じ位置（右上 25px / 20px）に出る
   ※位置は下層ページと同じ top:0 / height:100%。先頭の li.header（71px）がその×の置き場になる。
   ============================================================ */

.h_navi * {
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
}
.h_navi a {
  color: inherit;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.h_navi {
  position: fixed;
  width: 0;
  height: 100%;
  margin-left: auto;
  padding: 0;
  background-color: #001030;
  opacity: 0;
  top: 0;
  right: 0;
  transform: translateX(200px);
  transition: opacity .3s, transform .3s, width 0s .3s;
  z-index: 10002;
}
.h_navi.active {
  width: 410px;
  opacity: 1;
  transform: translateX(0);
  transition: opacity .3s, transform .3s, width 0s;
}

.h_navi .h_navi_inner {
  height: 100%;
  width: 410px;
  margin-left: auto;
  position: absolute;
  top: 0;
}
.h_navi_inner {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.h_navi_inner::-webkit-scrollbar { display: none; }

/* 先頭の空き（下層と同じ71px）。右上の×（.gh-close）がここに乗る */
.h_navi .side_menu .header { height: 71px; }

.h_navi .side_menu > li:not(.header) { margin: 0 28px; }
.h_navi .side_menu > li > a,
.h_navi .side_menu > li p {
  position: relative;
  display: flex;
  align-items: center;
  line-height: 60px;
  margin: 0;
}
.h_navi .side_menu > li p .en {
  width: 42%;
  text-transform: uppercase;
}
.h_navi .side_menu > li p .jp {
  width: 50%;
  line-height: 60px;
  word-break: keep-all;
}
.h_navi .side_menu > li > a.btn_open::after,
.h_navi .side_menu > li p.btn_open::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 12px;
  height: 12px;
  background-image: url(/common_img/menu_arrow.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  transition: transform .4s;
  transform: translateY(-50%) rotate(180deg);
}
.h_navi .side_menu > li > a.btn_open.active::after,
.h_navi .side_menu > li p.btn_open.active::after {
  transform: translateY(-50%) rotate(0deg);
}
.h_navi .side_menu > li > a.btn_open.active,
.h_navi .side_menu > li p.btn_open.active,
.h_navi .side_menu > li:last-child {
  border-bottom: 1px solid #808080;
}
.h_navi .side_menu > li:last-child {
  margin-bottom: 60px;
}
.h_navi .side_menu > li p.btn_not_open a {
  width: 100%;
  display: flex;
  align-items: center;
}

/* 開閉：jQuery の slideToggle(500) → max-height トランジションに置き換え。
   swing は 0.5-cos(p*PI)/2（サイン型 ease-in-out）なので cubic-bezier で近似する。
   開いた時の max-height は top.js が scrollHeight から実寸で設定するため、
   ここでは固定値（旧: 700px）を持たせない（超過分だけ実際の開閉が速く見えるため）。 */
.h_navi .side_menu > li .side_menu_sub {
  overflow: hidden;
  max-height: 0;
  padding: 0;
  transition: max-height .5s cubic-bezier(.45, .05, .55, .95);
}

.h_navi .side_menu > li .side_menu_sub li {
  position: relative;
  width: 300px;
  margin-left: auto;
}
.h_navi .side_menu > li .side_menu_sub li a {
  display: block;
  padding-left: 6px;
  line-height: 54px;
  margin-left: 20px;
  border-top: 1px solid #4d4d4d;
  color: #fff;
  text-decoration: none;
}
.h_navi .side_menu > li .side_menu_sub li:first-child a { border: 0 !important; }
.h_navi .side_menu > li .side_menu_sub li:not(.not_link)::after,
.h_navi .side_menu > li .btn_not_open::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 12px;
  height: 12px;
  background-image: url(/common_img/menu_arrow.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  transform: translateY(-50%) rotate(90deg);
}
.h_navi .side_menu > li {
  border-bottom: 1px solid #a7a7a7;
  padding: 0 4px;
  cursor: pointer;
}
.h_navi .side_menu > li:first-child p,
.h_navi .side_menu > li .side_menu_sub li:first-child a { border-top: 0; }
.h_navi .t_dark_border { border-top: 1px solid #a7a7a7 !important; }
.h_navi .b_dark_border { border-bottom: 1px solid #a7a7a7 !important; }
.h_navi .side_menu > li > p .external {
  width: 20px;
  margin-left: -2px;
  object-fit: contain;
}
.h_navi .side_menu > li .side_menu_sub .external {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  vertical-align: middle;
}
.h_navi .side_menu > li .side_menu_sub .not_link a { cursor: default; }