@charset "utf-8";
/* CSS Document */

.gnavi__wrap li {/*角丸 ナビの隙間*/
  list-style-image: none;
  list-style-type: none;
  border-radius: 10px;
  margin: 2px 4px 2px 0;
  padding: 0 1em;
  font-size: 1em;
}


/**/
.gnavi__wrap {
  width: auto;
  margin: 0 auto;
	padding: 0;
}
.gnavi__lists {/*flexコンテナ（親要素）*/
   display: flex;/*flexboxは、flexコンテナ（親要素）とflexアイテム（子要素）で構成されており、flexコンテナ内にflexアイテムを横方向または縦方向に配置する仕組み*/
	flex-wrap: wrap;/*折り返して複数行に上から下に配置*/
	justify-content: center;/*アイテムの水平方向の位置*/
}

/*display: flex*/
/*align-itemsの設定（親）
stretch 	デフォルト。一番高い要素に合わせて伸びる
normal 	stretchと同じ。
center 	中央寄せ。
flex-start 	上に寄せる
flex-end 	下に寄せる
start 	flex-startと同じ。
end 	効かない。（flex-startと同じ）
baseline 	ベースラインが一直線になるように配置
*/


/*
flex-start 	行頭寄せ(左揃え)・初期値
flex-end 	行末寄せ(右揃え)
center 	センター揃え(中央揃え)
space-between 	アイテムの間にスペースを均等に割り付け
space-around 	アイテムの両端にスペースを均等に割り付け
*/




.gnavi__list {/*flexアイテム（子要素）*/
  width: auto;
  height: 50px;
  background-color: #FFFFFF;
  position: relative;
  transition: all .3s;
  border-bottom: 2px solid #3C8296;
  border-right: 1px solid #3C8296;
  border-top: 1px solid #ACC6CD;
  border-left: 1px solid #ACC6CD;
	left: -20px;
}
.gnavi__list:hover {
    background-color: #0071BB;
}
.gnavi__list:not(:first-child)::before {
    content: "";
	/*
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
	*/
    top: 0;
    left: 0;
    transition: all .3s;
}
.gnavi__list:hover::before {
    background-color: #0071BB;
}
.gnavi__list a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #1b4059;
  letter-spacing: 0.1em;
  font-weight: bold;/*600*/
  transition: all .3s;
}
.gnavi__list:hover a {
    color: #fff;
}


/*
ドロップダウンメニューをラップする要素（上記では dropdown__lists ）を position: absolute; で上からGナビの高さの位置に配置しておくことで、該当のGナビタイトルのすぐ下に表示されるようになります。
そして、Gナビタイトルにホバーした際に表示する仕様を実装するため、デフォルトでは display: none; で隠しておいて、 gnavi__list にホバーすると display: block; で表示させる点もポイントです。*/

/**/
.dropdown__lists {
    visibility: hidden;/*デフォルトでは非表示の状態にしておく*/
    opacity: 0;/*不透明度0*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
}
.gnavi__list:hover .dropdown__lists {
    visibility: visible;/*Gナビメニューにホバーしたら表示*/
    opacity: 1;/*不透明度1*/
}
.dropdown__list {
    background-color: #004d80;
    height: 50px;
    transition: all .3s;
    position: relative;/*現在の表示位置から相対的に要素の位置を動かしたい*/
	top: 1px;
	left: -40px;
}
.dropdown__list:not(:first-child)::before{
    content: "";
    /*width: 100%;
    height: 1px;
    background-color: #3492d1;
    position: absolute;*/
    top: 0;
    left: 0;
}
.dropdown__list:hover {
    background-color: #003558;
}
.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}
.dropdown__list a::before {
    content: '';
    display: block;
	/*
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
	*/
}


/*
表示時のアニメーションを追加する

仕様上はここまでの実装で問題ありませんが、さらにもうひと手間加えます。

ドロップダウンメニューの表示がやや唐突に感じるので、アニメーションを加えてみましょう。
 display: block; と display: none; で表示非表示を設定していた dropdown__lists の記述を変更します。

アニメーションの候補としては以下の2種類を想定します。
ひとつはフェードでふわっと表示されるアニメーション。もうひとつは上から下に表示されるアニメ―ションです。

*/

/*
 transition を使って、対象の要素が変化する時間を指定します。 display:none; では transition が機能しないので、代わりに visibility を使用して表示非表示を切り替えています。
そして opacity によって透明度を変化させれば、フェードアニメーションが実装出来ます。
*/

/*アニメーション ふわっと表示され、ふわっと消える*/
.dropdown__lists_a {
    visibility: hidden;/*デフォルトでは非表示の状態にしておく*/
    opacity: 0;/*不透明度0*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
}
.gnavi__list:hover .dropdown__lists_a {
    visibility: visible;/*Gナビメニューにホバーしたら表示*/
    opacity: 1;/*不透明度1*/
}



/*
transitionで変化時間を指定するのは先ほどと同じですが、今度は transformのscaleY() を使用します。
 scaleY(0) で非表示状態、 scaleY(1) で表示状態としています。実際には常に表示されている状態ですが、Y方向の倍率をゼロとすることで実質非表示と同じ状態となります。
また変形における原点を左右方向中央、上下方向一番上とすることで、要素の一番上を基準に変形させることができます。*/

/*アニメーション 上から下に表示*/
.dropdown__lists_d {
    transform: scaleY(0);/*デフォルトでは非表示の状態にしておく*/
    transform-origin: center top;/*変形を適応する基準をtopとする*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
}
.gnavi__list:hover .dropdown__lists_d {
    transform: scaleY(1);/*Gナビメニューにホバーしたら表示*/
}