@charset "utf-8";

/* ************************************** _

タイトル：navi.css

概要：ナビゲーション

_ ************************************** */

/* 901px以上の指定
---------------------------------------------------------------------------- */
@media screen and (min-width: 901px) {
	ul#globalnavi {
		display: flex;
		align-items: center;
		margin: 0 0 0 0;
	}
	ul#globalnavi > li {
		list-style: none;
		text-align: center;
		font-size: 0.9em;
	}
	ul#globalnavi > li > a {
		color: #333333;
		font-weight: bold;
		padding: 30px 20px 30px 20px;
		display: inline-block;
		text-decoration: none;
		transition: all 0.3s;
	}
	ul#globalnavi li a:hover{
		color: #CCCCCC;
	}
	.globalnavi__contact{
		margin: 0 0 0 20px;
	}
	.globalnavi__contact a{
		color: #FFFFFF !important;
		background: #cc0000;
		border-radius: 30px;
		text-align: center;
		padding: 5px 20px 5px 20px !important;
		transition: all 0.3s;
	}
	.globalnavi__contact a:hover{
		background: #ef0000;
	}
	.disabled-link{
		cursor: default;
	}
	.lang{
		font-family: 'Cinzel', serif;
	}
	.lang a{
		padding: 30px 5px 30px 5px !important;
	}
	.slash{
		margin: 0 5px 0 5px;
	}
}


/*ドロップダウンメニュー*/
@media screen and (min-width: 901px) {
	ul#globalnavi > li > .drop-menu{
		display: none;
		transition: all;
	}
	ul#globalnavi > li:hover .drop-menu{
		display: block;
		position: absolute;
		top: 85px;/*.headerの高さ -5px*/
		left: 0;
		width: 100vw !important;
		margin: 0 0 0 0;
		text-align: left;
		/*background: rgba(255, 255, 255, 1);*/
		background: #FFFFFF url(../images/cmn_img/bg_doropdown.gif) no-repeat top center;
		border-top: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
		box-shadow: 0px 15px 30px -15px rgb(0 0 0 / 15%);
		animation: fadeIn forwards 0.5s;
		z-index: 999;
	}
	.drop-menu_inner{
		max-width: 1200px;
		width: 100%;
		margin: 0 auto 0 auto;
		padding: 20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;		
		align-items: center;
	}
	.drop-menu__title{
		/*width: 30%;*/
		position: relative;
		display: inline-block;
		width: fit-content;
		font-size: 1.4em;
		line-height: 1;
		margin: 0 0 0 0;
		padding: 0 0 0 23px;
		font-weight: bold;

	}
	.drop-menu__title a{}
	.drop-menu__title::before{
		content: "";
		position: absolute;
		top: calc( 50% - 7.5px);
		left: 0;
		width: 15px;
		height: 15px;
		border-radius: 10px;
		background: #FFFFFF;
		border: 2px solid #1a1a1a;
	}
	.drop-menu__title:hover::before{
		background: #1a1a1a;
	}
	.drop-menu__title:hover::after{
		border-top: 2px solid #FFFFFF;
		border-right: 2px solid #FFFFFF;		
	}	
	.drop-menu__title::after{
		content: '';
		position: absolute;
		top: calc( 50% - 1.5px);
		left: 5.5px;
		display: block;
		width: 4px;
		height: 4px;
		border-top: 2px solid #191919;
		border-right: 2px solid #191919;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		transition: all 0.3s;
	}
	.drop-menu__list{
		/*width: 65%;*/
		width: 75%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		border-left: 1px solid #CCCCCC;
		padding: 20px 0 0 5%;
	}
	.drop-menu__list li{
		/*width: 48%;*/
		width: 32%;
		position: relative;
		margin: 0 0 20px 0;
		padding: 0 0 0 23px;
	}
	.drop-menu__list li::before{
		content: "";
		position: absolute;
		top: calc( 0.5em - 1px );
		left: 0;
		width: 15px;
		height: 15px;
		border-radius: 10px;
		background: #FFFFFF;
		border: 2px solid #1a1a1a;
	}
	.drop-menu__list li:after{
		content: '';
		position: absolute;
		top: 0.85em;
		left: 5.5px;
		display: block;
		width: 4px;
		height: 4px;
		border-top: 2px solid #191919;
		border-right: 2px solid #191919;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		transition: all 0.3s;
	}
	.drop-menu__title a,
	.drop-menu__list li a{
		text-decoration: none;
		color: #1a1a1a;
		font-weight: bold;
	}
	.drop-menu__title a:hover,
	.drop-menu__list li a:hover{
		text-decoration: underline;
		color: #1a1a1a !important;
	}
	.drop-menu__title a:hover::before,
	.drop-menu li:hover::before{
		background: #1a1a1a;
	}
	.drop-menu__title a:hover::after,
	.drop-menu li:hover::after{
		border-top: 2px solid #FFFFFF;
		border-right: 2px solid #FFFFFF;		
	}

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

}


/* スマートフォンメニューボタン
---------------------------------------------------------------------------- */
/*.menu-btn{ display: none; }*/
.mburger{ display: none !important; }

.mm-navbar{
	padding: 10px !important;
	margin-right: 20px;
}

/* 900px以下の指定
---------------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
	ul#globalnavi{
		display: none;
	}
	.sub-menu{
		display: none;
	}	
	/*mmenuのメニュータイトル*/
	.mm-navbar__title{
		padding: 10px 0 10px 0;
	}
	.mburger {
		display: block !important;
		color: #333333 !important;
		--mb-button-size: 60px;
		--mb-bar-height: 4px;
		--mb-bar-spacing: 7px;
		position: absolute !important;
		top: 0px;
		right: 0 !important;
	}	
	.menu-wrap{
		width: 100%;
		border: none;
	}
	.drop-menu__title{
		display: none;
	}
	/*
	.drop-menu__list{}
	.drop-menu__list li{}
	.drop-menu__list li a{
		display: block;
		padding: 10px 10px 10px 20px;
	}
	*/
}