/* ---------- PC版（ブラウザ幅1200px以上）ここから ---------- */

@media screen and (min-width: 1200px) {

#headerContainer .gnav01_megamenu_container { /* メガメニュー（の中身を入れるためのコンテナ） */
  max-width: 120rem; /* コンテンツ幅 */
  margin: 0 auto; /* 中央寄せ */
  min-height: 35.4rem; /* 第2階層3つ分の高さを最低高さに */
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 32.5rem 1fr 0; /* メガメニューは3列に区切っている。左から、タイトル＋キャッチ＋リンクボタン、第二階層＋第三階層＋第四階層、メガメニューの高さを調整するための要素 */
  grid-template-areas:
    "gnav01_megamenu_container_01 gnav01_megamenu_container_02 gnav01_megamenu_container_03";
  display: -ms-grid; /* 以下3行はIE用の設定 */
  -ms-grid-rows: auto;
  -ms-grid-columns: 32.5rem 1fr 0;
  position: relative; /* 第三階層の位置を決めるための position: relative; */
  background: linear-gradient(90deg,#b1ddde 0%,#b1ddde 32.5rem,#00b2ae 32.5rem,#00b2ae 62.5rem,#f7f8f8 62.5rem,#f7f8f8 100%); /* 要素に合わせた背景色（高さが伸びた時におかしくないように） */
}

#headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_megamenu_container { /* メガメニュー第二階層が無いパターン */
  background: linear-gradient(90deg,#b1ddde 0%,#00b2ae 32.5rem,#f7f8f8 32.5rem,#f7f8f8 100%);
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container { /* 地図でマーケティングのパターン */
  background: #f7f8f8;
  min-height: 46.0rem;
}

.gnav01_intro          { grid-area: gnav01_megamenu_container_01; -ms-grid-row: 1; -ms-grid-column: 1; } /* 以下3行もIE用の設定（何行目の何列目なのか） */
.gnav01_level02        { grid-area: gnav01_megamenu_container_02; -ms-grid-row: 1; -ms-grid-column: 2; }
.gnav01_level03_height { grid-area: gnav01_megamenu_container_03; -ms-grid-row: 1; -ms-grid-column: 3; }

#headerContainer .gnav01_intro { /* タイトル＋キャッチ＋リンクボタンの表示エリア */
  padding: 5.5rem 4rem 0 4rem;
  background-color: #b1ddde;
}

#headerContainer .gnav01_intro > .caption_en { /* 英語のショルダー */
  color: #00b2ae;
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
}

#headerContainer .gnav01_intro > .caption { /* タイトル */
  font-size: 2.3rem;
  font-weight: 500;
  margin: 0 0 3.1rem;
  position: relative;
}

#headerContainer .gnav01_intro > .caption:after { /* タイトル下の緑の線 */
  content: "";
  position: absolute;
  bottom: -1.6rem;
  left: 0;
  width: 2.4rem;
  height: 0.2rem;
  background-color: #00b2ae;
}

#headerContainer .gnav01_intro > .catchcopy { /* キャッチコピー */
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 2.4rem;
  margin: 0;
}

#headerContainer .gnav01_intro > .btn01 a { /* リンクボタン */
  position: relative; /* マウスオーバー設定用の position: relative; */
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.9rem;
  border-radius: 10rem;
  color: #ffffff;
  background-color: #00b2ae;
  padding: 0.7rem 2rem 0.9rem;
  display: block;
  text-align: center;
  margin: 2rem 0 0;
  overflow: hidden;
}

#headerContainer .gnav01_intro > .btn01 a:after { /* マウスオーバー用の設定（非マウスオーバー時の内容） */
  content: "";
  position: absolute;
  top: 0;
  left: 0; /* 左が固定（左から伸びて、左に縮む） */
  width: 0;
  height: 100%;
  background-color: #45c7c4; /* マウスオーバー時の背景色 */
  transition-duration: 0.2s; /* 0.2秒で変化（マウスアウト時） */
  z-index: 1; /* 文字より背面に表示 */
}

#headerContainer .gnav01_intro > .btn01 a:hover:after { /* マウスオーバー用の設定（マウスオーバー時の内容） */
  width: 100%; /* 0 → 100%に変化 */
  transition-duration: 0.2s; /* 0.2秒で変化（マウスオーバー時） */
}


#headerContainer .gnav01_intro > .btn01 a .linkicon { /* リンクボタンのアイコン */
  position: relative; /* z-index を有効にするための position: relative; */
  margin-right: 1rem;
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_intro > .btn01 a .linkicon img {
  display: inline-block;
  height: 2.6rem;
  vertical-align: -0.7rem;
}

#headerContainer .gnav01_intro > .btn01 a .innerText { /* ボタンの文字 */
  position: relative; /* z-index を有効にするための position: relative; */
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_level02 { /* メガメニュー第二階層（のulに付与したクラス） */
  width: 30rem;
}

#headerContainer .gnav01_level02 > li > a, #headerContainer .gnav01_level02 > li > .noLink {
  font-size: 2.2rem;
  font-weight: 500;
  display: table-cell; /* 文字をセンター表示するため */
  background-color: #00b2ae;
  color: #ffffff;
  width: 30rem;
  text-align: center;
  vertical-align: middle;
  height: 11.8rem;
  cursor: pointer;
  position: relative; /* マウスオーバー用とリンクアイコン用の position: relative; */
}

#headerContainer .gnav01_level02 > li > a[href] span:after { /* 遷移先がある場合はリンクアイコンを表示 */
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  background-image: url("../images/linkarrowGreen.svg");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: 50% calc(50% + 1.0px);
  transition-duration: 0.2s;
  margin-left: 1rem;
  vertical-align: -0.07em;
  background-color: #ffffff;
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_level02 > li > a[href].hover span:after { /* マウスオーバー時の設定 */
  background-image: url("../images/linkarrowWhite.svg");
  background-color: #00b2ae;
}

#headerContainer .gnav01_level02 > li > a:before, #headerContainer .gnav01_level02 > li > .noLink:before { /* マウスオーバー用の設定（非マウスオーバー時の内容） */
  content: "";
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  left: 0; /* 左が固定（左から伸びて、左に縮む） */
  top: 0;
  background-color: #f7f8f8; /* マウスオーバー時の背景色 */
  transition-duration: 0.2s; /* 0.2秒で変化（マウスアウト時） */
  z-index: 1;
}

#headerContainer .gnav01_level02 > li > a.hover:before, #headerContainer .gnav01_level02 > li > .noLink.hover:before { /* マウスオーバー用の設定（マウスオーバー時の内容） */
  width: 100%; /* 0 → 100%に変化 */
  transition-duration: 0.2s; /* 0.2秒で変化（マウスオーバー時） */
}

#headerContainer .gnav01_level02 > li > a > .innerText, #headerContainer .gnav01_level02 > li > .noLink > .innerText { /* ボタンの文字 */
  position: relative; /* z-index を有効にするための position: relative; */
  display: table-cell; /* IE用の設定 */
  width: 30rem; /* IE用の設定 */
  height: 11.8rem; /* IE用の設定 */
  text-align: center; /* IE用の設定 */
  vertical-align: middle; /* IE用の設定 */
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_level02 > li > .hover > .innerText { /* マウスオーバー時の文字色 */
  color: #00b2ae;
}

#headerContainer .gnav01_level03_height { /* メガメニューの高さを調整するための要素 */
  transition-duration: 0.25s; /* 0.25秒で変化 */
}

#headerContainer .gnav01_level03_wrapper { /* メガメニュー第三階層（のulに付与したクラス）→ 2022.08.30変更 メガメニュー第三階層（のul直上のdivに付与したクラス ← mCustomScrollbar＋column_count_2の場合、これら2つをulに直接適用すると2列表示にならないため、ulの直上にdivを追加して、divに対してmCustomScrollbarを適用、直下のulに対してcolumn_count_2を適用するように変更した）  */
  position: absolute; /* .gnav01_megamenu_containerが基準の位置 */
  left: 59rem;
  top: 0;
/*  padding: 4rem 100vw 4rem 3.5rem;  縦スクロールバーが表示されないよう、右側パディングをブラウザ幅（100vw）に設定 */
/*  width: calc(57.3rem + 100vw);  実質の幅は57.3rem。100vwは縦スクロールバーを表示しないための対策 */
  padding: 4rem 0 4rem 3.5rem;
  width: 57.3rem;
  margin: 0 0 0 3.7rem;
  display: none; /* 初期は非表示 */
  background-color: #f7f8f8;
  max-height: calc(100vh - 11rem - 11rem); /* 画面サイズを基に最大高さを設定（メガメニューの上下に11remのアキができる高さ（上はグロナビがハマる分） */
/*  overflow-y: scroll;*/
  overflow-y: hidden;
  overflow-x: hidden;
}

#headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03_wrapper { /* メガメニュー第二階層が無いパターン：第二階層部分まで左寄せ */
  left: 28.8rem;
  width: 87.5rem;
  display: block; /* 第二階層が無いので初期も表示 */
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: rgba(0,0,0,0.12) !important; } /* custom scrollbar のクラスを上書き設定（バーの色変更）→ 2022.09.06 今は使っていない（スクロールバーのデザインを変えたので） */
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: rgba(0,0,0,0.12) !important; }

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp { opacity: 0.75 !important; } /* custom scrollbar のクラスを上書き設定（上下ボタンの濃さ） */

.mCSB_container .gnav01_level03 { /* スクロールバーが暴れる対策（スクロールバーが表示された場合は逃がした分（右30px）を無くす） */
  margin-right: 0;
}

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden .gnav01_level03 { /* スクロールバーが暴れる対策（最初からスクロールバーが表示される分を逃がしておく） */
  margin-right: 3rem;
}

#headerContainer .gnav01_level03.column_count_2 { /* 第三階層を2列表示する場合の設定（.column_count_2を付与すると2列表示） */
  column-count: 2;
  column-gap: 0;
}

#headerContainer .gnav01_level03 li { /* メガメニュー第三階層（の個々のリンク） */
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 500;
  display: block;
  margin: 0;
  position: relative; /* プラスアイコン用の position: relative; */
  break-inside: avoid; /* 2列表示した場合に、1つのリンクが2列に渡らないための設定 */
}

#headerContainer .gnav01_level03 li > a, #headerContainer .gnav01_level03 li > .noLink {
  position: relative;
  display: block;
  padding: 0.75rem 1rem 0.85rem 3.4rem;
  cursor: pointer;
}

@-moz-document url-prefix() {
  /* Mozzila（Firefox）は微妙に高さが変わってしまい不要なスクロールバーが表示されてしまうため若干調整（小数点が出ないように） */
  #headerContainer .gnav01_level03 li > a, #headerContainer .gnav01_level03 li > .noLink {
    padding: 0.75rem 1rem 0.852rem 3.4rem;
  }
}

#headerContainer .gnav01_level03 li.currentPage > a, #headerContainer .gnav01_level03 li.currentPage > .noLink { /* 現在地表示 */
  color: #00b2ae;
}

#headerContainer .gnav01_level03 li > a:before, #headerContainer .gnav01_level03 li > .noLink:before { /* マウスオーバー用の設定（非マウスオーバー時の内容） */
  content: "";
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  left: 0; /* 左が固定（左から伸びて、左に縮む） */
  top: 0;
  background-color: #e6e6e6; /* マウスオーバー時の背景色 */
  transition-duration: 0.2s; /* 0.2秒で変化（マウスアウト時） */
  z-index: 1; /* 文字より背面に表示 */
}

#headerContainer .gnav01_level03 li > a.hover:before, #headerContainer .gnav01_level03 li > .noLink.hover:before {
  width: 100%; /* 0 → 100%に変化 */
  transition-duration: 0.2s; /* 0.2秒で変化（マウスオーバー時） */
}

#headerContainer .gnav01_level03 li > a .linkicon:before, #headerContainer .gnav01_level03 li > .noLink .linkicon:before { /* リンクアイコン */
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	font-weight: 900;
  position: absolute;
  top: 0.95rem;
  left: 1.6rem;
  color: #00b2ae;
  cursor: pointer;
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_level03 li > a .linkiconAppend, #headerContainer .gnav01_level03 li > .noLink .linkiconAppend { /* リンクアイコン */
  position: absolute; /* この指定をしないと（何故か）縦スクロールが表示されてしまう… */
}

#headerContainer .gnav01_level03 li > a .linkiconAppend:before, #headerContainer .gnav01_level03 li > .noLink .linkiconAppend:before { /* リンクアイコン */
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	font-weight: 900;
  color: #00b2ae;
  cursor: pointer;
  position: relative;
  z-index: 2; /* 背景色より前面に表示 */
  margin-left: 1rem;
}

#headerContainer .gnav01_level03 li > span.treeopen:before { /* プラスアイコン */
	font-family: "Font Awesome 5 Free";
	content: "\f055";
	font-weight: 900;
  position: absolute;
  top: 0.98rem;
  left: 1.2rem;
  color: #00b2ae;
  cursor: pointer;
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_level03 li > span.treeopen.treeclose:before { /* マイナスアイコン（クリックする毎にプラスアイコンと交互に表示） */
	content: "\f056";
}

#headerContainer .gnav01_level03 li > a > .innerText, #headerContainer .gnav01_level03 li > .noLink > .innerText { /* リンク内の文字列 */
  position: relative; /* z-index を有効にするための position: relative; */
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_level04 { /* メガメニュー第四階層（のulに付与したクラス） */
  padding: 0 1rem 1.7rem 3.4rem;
  margin: 1.3rem -1rem 0 -2.4rem;
  display: none; /* 初期は非表示 */
}

#headerContainer .gnav01_level04.column_count_2 { /* 第四階層を2列表示する場合の設定（.column_count_2を付与すると2列表示） */
  column-count: 2;
  column-gap: 0;
}

#headerContainer .gnav01_level04 > li {
  font-size: 1.4rem;
  line-height: 1.9rem;
  font-weight: 500;
  display: block;
  margin: 0;
  break-inside: avoid; /* 2列表示した場合に、1つのリンクが2列に渡らないための設定 */
}

#headerContainer .gnav01_level04 > li.currentPage > a {
  color: #00b2ae;
}

#headerContainer .gnav01_level04 > li > a {
  position: relative; /* マウスオーバー設定用＋リンクアイコン用の position: relative; */
  display: block;
  padding: 0.6rem 1rem 0.7rem 3.4rem;
}

#headerContainer .gnav01_level04 > li > a:before { /* マウスオーバー用の設定（非マウスオーバー時の内容） */
  content: "";
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  left: 0; /* 左が固定（左から伸びて、左に縮む） */
  top: 0;
  background-color: #e6e6e6; /* マウスオーバー時の背景色 */
  transition-duration: 0.2s; /* 0.2秒で変化（マウスアウト時） */
  z-index: 1; /* 文字より背面に表示 */
}

#headerContainer .gnav01_level04 > li > a.hover:before {
  width: 100%; /* 0 → 100%に変化 */
  transition-duration: 0.2s; /* 0.2秒で変化（マウスオーバー時） */
}

#headerContainer .gnav01_level04 > li > a .linkicon:before { /* リンクアイコン */
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
  position: absolute;
  top: 0.7rem;
  left: 1.7rem;
  color: #00b2ae;
  cursor: pointer;
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_level04 > li > a > .innerText { /* リンク内の文字列 */
  position: relative; /* z-index を有効にするための position: relative; */
  z-index: 2; /* 背景色より前面に表示 */
}

/* 地図でマーケティングの場合 */

.gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 li {
  position: absolute;
}

.gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li:nth-of-type(1) { top: 4rem; left: 15rem; }
.gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li:nth-of-type(2) { top: 4rem; left: 43rem; }
.gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li:nth-of-type(3) { top: 4rem; left: 77.6rem; }
.gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li:nth-of-type(4) { top: 16rem; left: 0; }
.gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li:nth-of-type(5) { top: 16rem; left: 30rem; }
.gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li:nth-of-type(6) { top: 16rem; left: 60rem; }
.gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li:nth-of-type(7) { top: 16rem; left: 90rem; }

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li > a, #headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li > .noLink {
  font-size: 1.2rem;
  line-height: 2.0rem;
  font-weight: 500;
  display: block;
  background-color: transparent;
  color: #000000;
  width: auto;
  text-align: left;
  vertical-align: top;
  height: auto;
  cursor: pointer;
  position: relative;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li > a > .innerText, #headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li > .noLink > .innerText {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  text-align: left;
  vertical-align: top;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_wrapper_boxseries_logo01 > .innerText > img, #headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_wrapper_boxseries_logo01 > .innerText > img {
  height: 3.0rem;
  margin: 0.8rem 0 0.6rem;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_wrapper_boxseries_logo02 > .innerText > img, #headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_wrapper_boxseries_logo02 > .innerText > img {
  height: 2.5rem;
  margin: 0.8rem 0 0.6rem;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level03_wrapper {
  display: block;
  top: 7rem;
  left: 0;
  padding: 0 0 4rem 0;
  width: 30rem;
  margin: 0;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden .gnav01_level03 {
  margin-right: 1rem;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level03 li > a, #headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level03 li > .noLink {
  margin-left: -1rem;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_level02 > li > a[href] span:after {
    position: absolute;
    right: -2.5rem;
    top: 3.6rem;
    width: 1.4rem;
    height: 1.4rem;
    background-image: url(../images/headerMenuLogoLinkArrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transition-duration: 0.2s;
    margin-left: 0;
    vertical-align: 0;
    background-color: transparent;
    z-index: 2;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_level02 > li > a.gnav01_megamenu_wrapper_boxseries_logo02 span:after {
    top: 3.4rem;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_level02 > li.currentPage > a[href] span:after, #headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_level02 > li > a[href].hover span:after {
    background-image: url(../images/headerMenuLogoLinkArrowGreen.png);
    transform: rotate(180deg);
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_level02 > li > a {
  transition-duration: 0.2s;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_level02 > li > a:hover {
  transform: translateX(1rem);
  transition-duration: 0.2s;
}

}

/* ---------- PC版（ブラウザ幅1200px以上）ここまで ---------- */

/* ---------- モバイル版（ブラウザ幅1200px未満）ここから ---------- */

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

#gnav01_wrapper {
  position: relative;
  background-color: #ffffff;
}

#gnav01_wrapper .gnav01_level01 {
  margin-bottom: 0;
}

#headerContainer .gnav01_level01 > li {
  font-size: 1.7rem;
  line-height: 2.55rem;
  font-weight: 700;
  background-color: #00b2ae;
  margin-bottom: 0.1rem;
  position: relative;
}

#headerContainer .gnav01_level01 > li > a {
  display: block;
  padding: 2.1rem 2.4rem 2.2rem 2.4rem;
  color: #ffffff;
}

#headerContainer .gnav01_level01 > li > a[href] > span:after { /* 遷移先がある場合はリンクアイコンを表示 */
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  background-image: url("../images/linkarrowWhite.svg");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: 50% calc(50% + 1.8px);
  transition-duration: 0.2s;
  margin-left: 1rem;
  vertical-align: -0.07em;
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_level01 > li > span.treeopen {
  position: absolute;
  top: 0.5rem;
  right: 0;
  color: #ffffff;
  cursor: pointer;
  z-index: 2;
}

#headerContainer .gnav01_level01 > li > span.treeopen::before {
  content: "";
  position: absolute;
  top: 1.0rem;
  right: 2.2rem;
  cursor: pointer;
  z-index: 2;
  width: 4rem;
  height: 4rem;
  background: url("/common/images/mobileHeaderMenu_treeopen01.svg") center center no-repeat;
}

#headerContainer .gnav01_level01 > li > span.treeopen.treeclose::before {
  background: url("/common/images/mobileHeaderMenu_treeclose01.svg") center center no-repeat;
}

#headerContainer .gnav01_level01 > li.currentDirectory > a { /* 現在地表示用の position: relative; */
  position: relative;
}

#headerContainer .gnav01_level01 > li.currentDirectory > a:after { /* 現在地表示 */
  content: "";
  position: absolute;
  top: 2rem;
  left: 1rem;
  height: calc(100% - 4rem);
  width: 0.5rem;
  background-color: #b1ddde;
}

#headerContainer .gnav01_level02 {
  display: none;
}

#headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 {
  padding: 0;
}

#headerContainer .gnav01_level02 > li, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li {
  font-size: 1.7rem;
  line-height: 2.55rem;
  font-weight: 700;
  background-color: #b1ddde;
  margin-left: 2rem;
  position: relative;
}

#headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 li {
  margin-left: 0;
}

#headerContainer .gnav01_level02 > li > a, #headerContainer .gnav01_level02 > li > .noLink, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li > a, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li > .noLink {
  display: block;
  padding: 1.2rem 2.2rem 1.3rem 2.2rem;
  color: #00b2ae;
  border-top: 1px solid #00b2ae;
}

#headerContainer .gnav01_level02 > li:first-child > a, #headerContainer .gnav01_level02 > li:first-child > .noLink, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li:first-child > a, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li:first-child > .noLink {
  display: block;
  padding: 1.2rem 2.2rem 1.3rem 2.2rem;
  color: #00b2ae;
  border-top: none;
}

#headerContainer .gnav01_level02 > li > a[href] > span:after, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li > a[href] > span:after { /* 遷移先がある場合はリンクアイコンを表示 */
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  background-image: url("../images/linkarrowGreen.svg");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: 50% calc(50% + 1.8px);
  transition-duration: 0.2s;
  margin-left: 1rem;
  vertical-align: -0.07em;
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_level02 > li > span.treeopen, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li > span.treeopen {
  position: absolute;
  top: 0;
  right: 0;
  color: #ffffff;
  cursor: pointer;
  z-index: 2;
}

#headerContainer .gnav01_level02 > li > span.treeopen::before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li > span.treeopen::before {
  content: "";
  position: absolute;
  top: 1.0rem;
  right: 2.4rem;
  cursor: pointer;
  z-index: 2;
  width: 3.6rem;
  height: 3.6rem;
  background: url("/common/images/mobileHeaderMenu_treeopen02.svg") center center no-repeat;
}

#headerContainer .gnav01_level02 > li > span.treeopen.treeclose::before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li > span.treeopen.treeclose::before {
  background: url("/common/images/mobileHeaderMenu_treeclose02.svg") center center no-repeat;
}

#headerContainer .gnav01_level02 > li > a.hover, #headerContainer .gnav01_level02 > li > .noLink.hover, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li > a.hover, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li > .noLink.hover { /* 現在地表示用の position: relative; */
  position: relative;
}

#headerContainer .gnav01_level02 > li > a.hover:before, #headerContainer .gnav01_level02 > li > .noLink.hover:before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li.currentPage > a:before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li.currentDirectory > a:before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li.currentPage > .noLink:before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level03 > li.currentDirectory > .noLink:before { /* 現在地表示 */
  content: "";
  position: absolute;
  top: 1.3rem;
  left: 1rem;
  height: calc(100% - 2.6rem);
  width: 0.5rem;
  background-color: #ffffff;
}

#headerContainer .gnav01_level03, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 {
  display: none;
  background-color: #ffffff;
  padding: 0.8rem 1.0rem 0.9rem 1.5rem;
}

#headerContainer .gnav01_level03 > li, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li {
  font-size: 1.7rem;
  line-height: 2.55rem;
  font-weight: 700;
  background-color: #ffffff;
  position: relative;
}

#headerContainer .gnav01_level03 > li > a, #headerContainer .gnav01_level03 > li > .noLink, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li > a, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li > .noLink {
  display: block;
  padding: 0.6rem calc(2.4rem + 1.65em) 0.8rem 2.4rem;
  color: #00b2ae;
}

#headerContainer .gnav01_level03 > li > a[href] > span:after, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li > a[href] > span:after { /* 遷移先がある場合はリンクアイコンを表示 */
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  background-image: url("../images/linkarrowGreen.svg");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: 50% calc(50% + 1.8px);
  transition-duration: 0.2s;
  margin-left: 1rem;
  margin-right: -0.95em;
  vertical-align: -0.07em;
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_level03 > li > span.treeopen, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li > span.treeopen {
  position: absolute;
  top: 0;
  right: 0;
  color: #ffffff;
  cursor: pointer;
  z-index: 2;
}

#headerContainer .gnav01_level03 > li > span.treeopen::before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li > span.treeopen::before {
  content: "";
  position: absolute;
  top: 0.0rem;
  right: 1.4rem;
  cursor: pointer;
  z-index: 2;
  width: 3.6rem;
  height: 3.6rem;
  background: url("/common/images/mobileHeaderMenu_treeopen03.svg") center center no-repeat;
}

#headerContainer .gnav01_level03 > li > span.treeopen.treeclose::before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li > span.treeopen.treeclose::before{
  background: url("/common/images/mobileHeaderMenu_treeclose03.svg") center center no-repeat;
}

#headerContainer .gnav01_level03 > li.currentPage > a, #headerContainer .gnav01_level03 > li.currentDirectory > a, #headerContainer .gnav01_level03 > li.currentPage > .noLink, #headerContainer .gnav01_level03 > li.currentDirectory > .noLink, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li.currentPage > a, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li.currentDirectory > a, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li.currentPage > .noLink, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li.currentDirectory > .noLink { /* 現在地表示用の position: relative; */
  position: relative;
}

#headerContainer .gnav01_level03 > li.currentPage > a:before, #headerContainer .gnav01_level03 > li.currentDirectory > a:before, #headerContainer .gnav01_level03 > li.currentPage > .noLink:before, #headerContainer .gnav01_level03 > li.currentDirectory > .noLink:before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li.currentPage > a:before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li.currentDirectory > a:before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li.currentPage > .noLink:before, #headerContainer .gnav01_megamenu_wrapper_level02less .gnav01_level04 > li.currentDirectory > .noLink:before { /* 現在地表示 */
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 1rem;
  height: calc(100% - 1.6rem);
  width: 0.5rem;
  background-color: #b1ddde;
}

#headerContainer .gnav01_level04 {
  display: none;
  background-color: #ffffff;
  padding: 0.3rem 0 0.4rem 2.0rem;
}

#headerContainer .gnav01_level04 > li {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 500;
  background-color: #ffffff;
  position: relative;
}

#headerContainer .gnav01_level04 > li > a {
  display: block;
  padding: 0.6rem calc(2.4rem + 0.95em) 0.8rem 2.4rem;
  color: #00b2ae;
}

#headerContainer .gnav01_level04 > li > a[href] > span:after { /* 遷移先がある場合はリンクアイコンを表示 */
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  background-image: url("../images/linkarrowGreen.svg");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: 50% calc(50% + 1.8px);
  transition-duration: 0.2s;
  margin-left: 1rem;
  margin-right: -0.95em;
  vertical-align: -0.07em;
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav01_level04 > li.currentPage > a { /* 現在地表示用の position: relative; */
  position: relative;
}

#headerContainer .gnav01_level04 > li.currentPage > a:before { /* 現在地表示 */
  content: "";
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  height: calc(100% - 1.8rem);
  width: 0.5rem;
  background-color: #b1ddde;
}

#headerContainer .gnav01_intro {
  display: none !important;
}

#gnav_inquiry {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 700;
  background-color: #f0f0f0;
  margin-bottom: 0.1rem;
  position: relative;
  display: block;
  padding: 1.2rem 2.4rem 1.3rem 2.4rem;
  color: #00b2ae;
}

#gnav_inquiry > span:after { /* リンクアイコンを表示 */
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  background-image: url("../images/linkarrowGreen.svg");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: 50% calc(50% + 1.8px);
  transition-duration: 0.2s;
  margin-left: 1rem;
  vertical-align: -0.07em;
  z-index: 2; /* 背景色より前面に表示 */
}

#gnav_trial {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 700;
  background-color: #f0f0f0;
  margin-bottom: 0.1rem;
  position: relative;
  display: block;
  padding: 1.2rem 2.4rem 1.3rem 2.4rem;
  color: #00b2ae;
}

#gnav_trial > span:after { /* リンクアイコンを表示 */
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  background-image: url("../images/linkarrowGreen.svg");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: 50% calc(50% + 1.8px);
  transition-duration: 0.2s;
  margin-left: 1rem;
  vertical-align: -0.07em;
  z-index: 2; /* 背景色より前面に表示 */
}

#headerContainer .gnav02_container  {
  margin-bottom: 0;
}

#headerContainer .gnav02_container > li {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 700;
  background-color: #f0f0f0;
  margin-bottom: 0.1rem;
  position: relative;
}

#headerContainer .gnav02_container > li > a {
  display: block;
  padding: 1.2rem 2.4rem 1.3rem 2.4rem;
  color: #00b2ae;
}

#headerContainer .gnav02_container > li > a > span:after { /* リンクアイコンを表示 */
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  background-image: url("../images/linkarrowGreen.svg");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: 50% calc(50% + 1.8px);
  transition-duration: 0.2s;
  margin-left: 1rem;
  vertical-align: -0.07em;
  z-index: 2; /* 背景色より前面に表示 */
}

#gnav_search img { /* 検索アイコン */
  display: none;
}

/* 地図でマーケティングの場合 */

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li > a, #headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li > .noLink {
  font-size: 1.2rem;
  line-height: 2.0rem;
  font-weight: 500;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li > a > .innerText > img, #headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li > .noLink > .innerText > img {
  height: 2.0rem;
  margin: 0.6rem 0 0.4rem;
}

#headerContainer .gnav01_megamenu_wrapper_boxseries .gnav01_megamenu_container .gnav01_level02 > li > span.treeopen {
    top: 1.1rem;
}

}