@charset "utf-8";

@media (min-width:768px){
/* ---- グローバルメニュー tab ------ */
	#mddNav {
		width: 100%;
		height: auto;
		position: absolute;
		margin-top: 25px;
		/*background-color: red;*/
	}
	#mddNav > ul {
		width: 96%;
		margin: 0 auto;
		height: 55px;	
		padding-top: 10px;
		/*background-color: aqua;*/
		display: flex;
	}
	#mddNav > ul > li {
		width: auto;
		height: auto;
		line-height: 1.2;
		font-size: 1.5rem;
		font-weight: 600;
		/*background-color: yellow;*/
	}
	#mddNav > ul > li > a {
		height: 55px;
		padding: 0 11px;
		display: block;
		transition: all 0.2s linear;
		opacity: 1;
	}
	#mddNav > ul > li.page_logo{
		width: 110px;
		
		img{
			margin-top: -4px;
		}
	}

	#mddNav > ul > li:hover > a {
		color: #999;
		position: relative;
	}
		/*----- 各メニューの設定 -----*/
		.menu_01{
			position: relative;
			display: inline-block;
		}

		#mddNav > ul > li > a.menu_01:before {
			content: '';
			position: absolute;
			left: 50%;
			top: 37px;
			/* 最初は少し下にずらす */
			transform: translate(-50%, 10px);
			transition: .1s;

			/* 三角形 */
			width: 0;
			height: 0;
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			border-bottom: 8px solid #333; /* 色ここで指定 */
			
			opacity: 0;
			transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), opacity .2s;
		}
		/* hover時 */
		#mddNav > ul > li:hover > a.menu_01:before {
			transform: translate(-50%, 0); /* 元の位置へ */
			opacity: 1;
			transition-delay: .5s; /* ← 遅れて表示 */
		}

	#mddNav > ul > li.mddActive > a {
		/*background: red!important;*/
	}
	

	/*----- ドロップダウンメニュー中身 tab-----*/
	#mddNav .mddWrap {
		top: 55px;
		left: 0;
		width: 100%;
		/*height: 200px;mddnav.jsで設定しないとスイングしない*/
		text-align: center;	
		/*background: linear-gradient(to top, transparent,rgba(0,0,0,1));*/
		position: absolute;
		z-index: 10;
		overflow: hidden;
		display: none;	
		background-color: transparent;
	}
	.mddwall {
		width: 96%;
		margin: 0 auto;
		background: #333;
		height: auto;
		border-radius: 50px;
	}
	#mddNav .mddWrap .mddInner {
		height: 50px;  
		padding: 10px 0;
	}
	.mdmenu_wrap{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 0 25px;
	}
	.mdmenu{
		margin-right: 22px;
		padding: 5px 0;
		font-weight: 600;
		font-size: 1.5rem;
		
	}
	.mdmenu a {
		color: #fff;
	}
	.mdmenu a:hover{
		transition: all .5S;
		opacity: 1;
		color: #ccc;
		
	}


  
}


@media (min-width:1024px){
/* ---- グローバルメニュー pc ------ */
	#mddNav {
		margin-top: 40px;
	}
	#mddNav > ul > li {
		font-size: 1.8rem;
	}
	#mddNav > ul > li > a {
		margin-right: 5px;
	}
	#mddNav > ul > li.page_logo{
		width: 196px;
		
		img{
			margin-top: -16px;
		}
	}
	/*----- ドロップダウンメニュー中身 pc-----*/
	#mddNav .mddWrap .mddInner {
		height: 60px;  
		padding: 15px 0;
	}
	.mddwall {
		padding-left: 7px;
	}
	.mdmenu{
		margin-right: 40px;
		font-size: 1.6rem;
	}


  


}

@media (min-width:1280px){
/* ---- グローバルメニュー 1280 ------ */
	#mddNav {
		margin-top: 60px;
	}
	#mddNav > ul {
		width: 94%;
		margin-left: 50px;
		/*background-color: aqua;*/
	}
	#mddNav > ul > li {
		font-size: 2.0rem;
	}
	#mddNav > ul > li > a {
		margin-right: 20px;
	}
	#mddNav > ul > li.page_logo{
		width: 215px;
		
		img{
			margin-top: -15px;
		}
	}
	/*----- ドロップダウンメニュー中身 1280-----*/
	.mddwall {
		padding-left: 70px;
	}

}


@media (min-width:1480px){
/* ---- グローバルメニュー 1480 ------ */
	#mddNav > ul {
		margin-left: 50px;
	}
	#mddNav > ul > li > a {
		margin-right: 31px;
	}
	#mddNav > ul > li.page_logo{
		width: 255px;
		
		img{
			margin-top: -20px;
		}
	}

	/*----- ドロップダウンメニュー中身 1480-----*/
	.mddwall {
		padding-left: 115px;
	}
}

@media (min-width:1680px){

	/*----- ドロップダウンメニュー中身 1680-----*/
	.mddwall {
		padding-left: 110px;
	}
}