/*
	* Bootstrap ページナビゲーションに関するカスタムCSS

	@media screen and (max-width: 1199px) {}
	@media screen and (max-width: 991px) {}
	@media print {}
	@media screen and (max-width: 767px) {}
 
	xl-1200(max-1199)
	lg-992(max-991)
	md-768(max-767)
	sm-576(max-575)
 
	-------------------

	ドロップダウンボタンをマウスオーバーで利用
	メニューの位置を調整（右寄せ）
	検索窓の設定上書き
	バーガーメニューのアニメーション
	アクティブ時の支持バー
	ドロップダウン装飾
	バーガーメニュー内部のレイアウト調整
	ビッグメニュー実装

*/

/* ドロップダウンボタンをマウスオーバーで利用 */
	@media screen and (min-width: 992px) {/* 992px以上に適用 */
		.dropdown:hover > .dropdown-menu{
			display: block !important;
		}
	}

/* メニューの位置を調整（右寄せ） */
	.navbar-nav{
		margin: 0 20px 0 auto !important;
	}


/* 検索窓の設定上書き */
	.cus-navigation-search input{
		width: 200px;
	}
	.cus-navigation-search .btn{
		border: #969696 solid 1px;
		background-color: white;
		font-size: 14px;
		color: #969696;
	}
	.cus-navigation-search .btn:hover{
		color: #222222;
	}
	@media screen and (max-width: 1199px) {
		.cus-navigation-search input{
			width: 170px;
		}
		.cus-navigation-search .btn{
			font-size: 12px;
		}
	}
	@media screen and (max-width: 991px) {
		.cus-navigation-search{
			display: -webkit-flex;
			display: flex;
			justify-content: center;
			margin: 20px 0 0 0;
		}

	}

/* バーガーメニューのアニメーション */
	.navbar-toggler{
		border-color: rgba(0, 0, 0, 0);
	}
	.navbar-toggler{
		border-color: rgba(0, 0, 0, 0);
		outline: none;
	}

	.navbar-toggler{
		border-color: rgba(0, 0, 0, 0);
		outline: none;
	}
	.navbar-toggler-icon{
		background-image: none;
	}
 
	.navbar-toggler-icon{
		position: relative;
		width: 40px;
		height: 40px;
		background: none;
		appearance: none;
		cursor: pointer;
		&,span{
			display: inline-block;
			box-sizing: border-box;
		}
		span{
			position: absolute;
			left: 5px;
			width: 80%;
			height: 2px;
			background-color: rgba(165, 165, 165, 1);
			border-radius: 1px;
			&:nth-of-type(1) {top: 8px;}
			&:nth-of-type(2) {top: 20px;}
			&:nth-of-type(3) {top: 32px;}
		}
	}

	.navbar-light .navbar-toggler{
	  border-color: rgba(0, 0, 0, 0);
	  outline: none;
	}
	 
	.navbar-light .navbar-toggler-icon{
	  background-image: none;
	}
	 
	.navbar-toggler-icon {
	  position: relative;
	  width: 40px;
	  height: 40px;
	  background: none;
	  appearance: none;
	  cursor: pointer;
	 
	  &,
	  span{
	    display: inline-block;
	    transition: all 0.4s;
	    box-sizing: border-box;
	  }
	 
	  span{
	    position: absolute;
	    left: 5px;
	    width: 80%;
	    height: 2px;
	    background-color: rgba(165, 165, 165, 1);
	    border-radius: 1px;
	 
	    &:nth-of-type(1) {
	      top: 8px;
	    }
	    &:nth-of-type(2) {
	      top: 20px;
	    }
	    &:nth-of-type(3) {
	      top: 32px;
	    }
	  }
	}

	.navbar-toggler[aria-expanded='true'] {
		span.navbar-toggler-icon {
			span {
				&:nth-of-type(1) {
					transform: translateY(12px) rotate(-315deg);
				}
				&:nth-of-type(2) {
					opacity: 0;
				}
				&:nth-of-type(3) {
					transform: translateY(-12px) rotate(315deg);
				}
			}
		}
	}

/* アクティブ時の支持バー */
	.header-nav-col li a{
		overflow: hidden;
		position: relative;
		background: transparent;
		padding: 6px 10px;
		color: #222222;
		text-decoration: none;
		z-index: 1;
		transition: .3s;
	}
	.header-nav-col li a::before{
		content: "";
		bottom: 0;
		left: 0;
		overflow: hidden;
		position: absolute;
		background: #fcb13e;
		width: 100%;
		height: 2px;
		z-index: -1;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform ease .3s;
	}
	.header-nav-col .dropdown a::before{
		display: none !important;
	}
	.header-nav-col .dropdown a i{
		position: relative;
		top: -2px;
		font-size: 10px;
	}
	.header-nav-col li a:hover{
		text-decoration: none;
	}
	.header-nav-col li a:hover::before{
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}

	.header-nav-col li .active::before{
		transform: scaleX(1);
	}

/* ドロップダウン装飾 */
	.dropdown-menu{
		background-color: rgba(255,255,255,0.8);
		width: 20vw;
	}
	.dropdown-menu li{
		padding: 0 5px;
	}
	.dropdown-menu li a{
		padding: 10px;
	}
	.dropdown-menu li a:hover{
		background: #aaaaaa;
		color: white;
	}

/* バーガーメニュー内部のレイアウト調整 */
	@media screen and (max-width: 991px) {
		.navbar-collapse{/* 内容量が多い際にスクロールさせる */
			overflow: auto !important;
			padding-top: 10px;
			padding-bottom: 20vh;
			height: 100vh !important;
		}
		.navbar-collapse::before{
			content: '';
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100vh;
			background-color: white;
			opacity: 0.9;
			z-index: -1;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
			animation: loading 0.3s;
		}
		@keyframes loading {
		  0% {
		    opacity: 0;
		  }
		  
		  100% {
		    opacity: 0.9;
		  }
		}

		.cus-header-normal .header-nav-col li{
			text-align: left;
		}
		.cus-header-normal .header-nav-col li a{
			display: block;
			padding: 10px 0;
		}

		.dropdown-menu{
			width: 90vw;
		}
		.dropdown-menu li a{
			padding: 10px !important;
		}
	}


/* ビッグメニュー実装 */
	.cus-header-normal.big-menu .header-nav,
	.cus-header-normal.big-menu .navbar,
	.cus-header-normal.big-menu .header-toggler-bg,
	.cus-header-normal.big-menu .navbar-collapse,
	.cus-header-normal.big-menu .header-nav-col,
	.cus-header-normal.big-menu .dropdown{
		position: static !important;
	}
	.dropdown-menu.big-menu{
		border: none !important;
		background: none !important;
		top: 40px;/* 高さ位置は要微調整 */
		left: 1vw !important;
		padding: 60px;
		width: 98vw;
	}
	@media screen and (max-width: 991px) {
		.dropdown-menu.big-menu{
			top: 0px;/* 高さ位置は要微調整 */
			left: 0px !important;
			padding: 0px;
			width: auto;
		}
	}