@charset "utf-8";

/*menubarブロック初期設定
---------------------------------------------------------------------------*/
#menubar ul {list-style: none;margin: 0;padding: 0;}

/*メニューを非表示にしておく*/
#menubar {display: none;}

/*開閉用のスタイル*/
#menubar.db {display: block;}
#menubar.dn {display: none;}

/*メニュー１個あたりの設定*/
#menubar a {
	display: block;
	text-decoration: none;
		/*テキストを中央に*/
	padding: 14px 0;	/*上下、左右へのメニュー内の余白*/
	color: #616161;
	/* border-bottom: 3px solid; */
}



/*大きな端末用のメニュー設定
---------------------------------------------------------------------------*/

/*メニュー１個あたりの設定*/
.p #menubar a {
	/* background: #f1efef; */	/*背景色*/
	height: 100%;
}


/*小さな端末用の設定（開閉ブロック）
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.s #menubar.db {
	position: fixed;
	overflow: auto;
	z-index: 100;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 30px 0;	/*上下、左右へのブロック内の余白*/
	background: rgba(0,0,0,0.9);		/*背景色。0,0,0は黒の事で0.9は色が90%出た状態の事。*/
	animation: animation1 0.2s both;	/*animation.cssの、animation1を実行する。0.2sは0.2秒の事。*/
	text-align: center;
	color: #fff;
}

/*メニュー１個あたりの設定*/
.s #menubar.db a {
	display: inline-block;
	text-decoration: none;
	text-align: center;		/*テキストを中央に*/
	padding: 10px;	/*メニュー内の余白*/
	color: #fff;
}

.s #menubar.db .megaMenu-list p a {
	padding: 0px;
}


/*ドロップダウンメニュー
---------------------------------------------------------------------------*/

/*ドロップダウンメニューの親のリンク先が空なので、カーソルをデフォルトにしておく。*/
a.ddmenu {
	cursor: default;
}

/*ドロップダウンメニューを持つ親に矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f150";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em;	/*アイコンとテキストとの間に空けるスペース*/
	opacity: 0.6;			/*アイコンの透明度。色を60%出した状態。*/
}


.mega-childttl{
	font-size: 1.3em;
	line-height: 1em;
	padding-bottom: .5em;
}
.mega-childttl a {
	position: relative;
	text-decoration: none;
}






/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*開閉用のスタイル*/
#menubar_hdr.db {display: flex;}
#menubar_hdr.dn {display: none;}

/*３本バーを囲むブロック*/
#menubar_hdr {
	position: fixed;
	z-index: 101;
	cursor: pointer;
	left: 0.5%;			/*左からの配置場所指定*/
	top: 2px;			/*上からの配置場所指定*/
	padding: 16px 14px;	/*上下、左右への余白*/
	width: 52px;		/*幅（３本バーが出ている場合の幅になります）*/
	height: 52px;		/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	transform: scale(1.2);			/*元々準備していたサイズの1.2倍にしました。お好みでサイズ調整して下さい。*/
	display: none;
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 2px solid #fff;	/*線の幅、線種、色*/
	box-shadow: 1px 1px 2px #000;
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 26px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(6px, 7px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(6px, -7px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}

  

/*---------------------------------------------------------------------------
【SP】画面サイズが767px以下
---------------------------------------------------------------------------*/
@media screen and (max-width:767px) { 

/*ドロップダウンを非表示にしておく*/
#menubar .ddmenu_parent div {
	display: none;
}
	
.mega-childttl{
	font-size: 1em;
	position: relative;
}
.mega-childttl a {
	position: relative;
	text-decoration: none;
}
.mega-childttl::before {
	left: 25%;
	top: 38%;
	width: 50%;
	border-bottom: 1px solid;
	border-right: 1px solid;
	bottom: 0;
	content: '';
	height: 12px;
	position: absolute;
	transform: skewX(50deg);
	transition: all .3s; /*なめらかな動き*/
}
.mega-childlink {
	font-size: .9em;
	text-align: left!important;
	display: none;
}

.mega-childlink::before{
	left: 3px;
	width: 4px;
	height: 4px;
	border-top: 2px solid #7a0;
	border-right: 2px solid #7a0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.spmenu {
	display: none;
}

}

/*---------------------------------------------------------------------------
【Tab】画面サイズ768px以上1024px以下
---------------------------------------------------------------------------*/
@media screen and (min-width:768px) and ( max-width:1024px) {
/*ドロップダウンを非表示にしておく*/
#menubar .ddmenu_parent div {
	display: none;
}
	
.mega-childttl{
	font-size: 1em;
	position: relative;
}
.mega-childttl a {
	position: relative;
	text-decoration: none;
}
.mega-childttl::before {
	left: 35%;
	top: 38%;
	width: 30%;
	border-bottom: 1px solid;
	border-right: 1px solid;
	bottom: 0;
	content: '';
	height: 12px;
	position: absolute;
	transform: skewX(50deg);
	transition: all .3s; /*なめらかな動き*/
}
.mega-childlink {
	font-size: .9em;
}


}

/*---------------------------------------------------------------------------
【PC】画面サイズ1025px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) {


/*menubarブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック全体*/

#menubar {
	width: 100%;
	height: 50px;
	z-index: 10;
	position: absolute;
}
#menubar:hover {
	background-color: rgba(241, 239, 239, 0.8);
	transition: .3s;
}
#menubar:hover a {
	color: #616161!important;
}
#menubar h1 {
	margin: 0;
	line-height: 1;	/*行間を少しだけ狭くする*/
	font-size: 1.2em;
	position: absolute;
	top: 0;
	left: 1em;
	letter-spacing: .1em;
	width: 20%;
}
#menubar .menubar-list {
	margin: 0;
	display: flex;
	justify-content: flex-end;
	line-height: 1.4;	/*行間を少しだけ狭くする*/
	width: 70%;
	height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	font-size: .9em;
	font-weight: bold;
	letter-spacing: 0.05em;
}

/*メニュー１個あたりの設定*/
#menubar ul .menubar-item {
	flex: 1;
	transition: background-color .3s;
	text-align: center;
}

#menubar .disabled {
	pointer-events: none;
}


/*マウスオン時*/
#menubar ul li a:hover ,
#menubar ul li a:hover ul
 {
	opacity: 1;
	background: #f1efef!important;	/*背景色*/
	transition-delay: .3s;
}



/*ドロップダウンメニュー
---------------------------------------------------------------------------*/
.megaMenu {
	background-color: rgba(241, 239, 239, 1)!important;
	left: -43%;
	opacity: 0;
	position: absolute;
	transition: opacity .3s, visibility .3s;
	visibility: hidden;
	width: 142%;
	z-index: 50;
	padding: 40px 20px 20px;
	pointer-events: none;
	}
  .megaMenu-list {
	padding-bottom: 30px;
	padding-top: 30px;
	display: flex;
	justify-content: space-between;
	width: 60%;
	margin: 0 auto!important;
	flex-wrap: wrap;
	}
  .megaMenu-list .megaMenu-item{
	margin: 0 1.5em 2em;
	text-align: left;
	width: 27%;
	}
	.megaMenu-list .megaMenu-item p {
	margin: 0;
	line-height: 1.2;
	}
  .megaMenu-list .megaMenu-item .mega-img:hover,
  .megaMenu-list .megaMenu-item .mega-childlink:hover{
	opacity: .3;
  }
  
  .megaMenu-item {
	display: inline-block;
  }

.mega-childttl a::before {
border-bottom: 1px solid;
border-right: 1px solid;
bottom: 0;
content: '';
height: 12px;
position: absolute;
left: 0;
transform: skewX(50deg);
width: 100%;
transition: all .3s; /*なめらかな動き*/
}


/*マウスオーバー時の動き*/
.mega-childttl a:hover::before{
	left: 10%;
}

.mega-img{
	transition: all .3s;
}
.mega-childlink{
	position: relative;
	display: inline-block;
	padding: 0 0 0 26px;
	text-decoration: none;
	width: 100%;
	transition: all .3s;
}
.mega-childlink a{
	padding: 7px 0!important;
}
.mega-childlink a::before,
.mega-childlink a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}  
.mega-childlink a::before {
	left: 0px;
	width: 8px;
	height: 8px;
	border-top: 1px solid;
	border-right: 1px solid;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
  /* メニューをhoverした時のスタイル */
  .menubar-item:hover .megaMenu {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
  }
  /* レイアウトのためのスタイル */
  a {
	text-decoration: none;
  }




/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*ハンバーガーメニューを非表示にする*/
#menubar_hdr {display: none;}

}