/*
	* Bootstrap ヘッダ・フッタに関するカスタムCSS

	@media screen and (max-width: 1309px) {}
	@media screen and (max-width: 991px) {}
	@media print {}
	@media screen and (max-width: 767px) {}
 
	xl-1310(max-1309) 左右余白15pxを含む
	lg-992(max-991)
	md-768(max-767)
	sm-576(max-575)
 
	-------------------

	メニュー外クリックで閉じる為の追加オーバーレイ
	ドロップダウンボタンをマウスオーバーで利用
	ヘッダーレイアウト基本
	電話番号の表記
	メールアイコンの表記
	検索窓の設定上書き
	ビッグメニュー利用時 追加CSS
	ヘッダ内メニューレイアウト
	ドロップダウンメニュー時の装飾
	バーガーメニュー3本線
	バーガーメニュー内部のレイアウト調整
	ビッグメニュー実装内部

*/

/* メニュー外クリックで閉じる為の追加オーバーレイ */
	#nav-overlay{
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0);
		z-index: 9; /* navbar の上・collapse の下 */
	}


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

/* ヘッダー追従時に影を表示 */
	.cus-header-normal.is-shadow {
	  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	  transition: box-shadow 0.3s ease;
	}

/* ヘッダーレイアウト基本 */
	.cus-header-normal .header-nav .header-nav-col{
		display: -webkit-flex !important;
		display: flex !important;
		justify-content: flex-end !important;
		text-align: right !important;
	}

	.cus-header-normal{/* 横並び時レイアウト */
		position: fixed;
		top: 30px;
		left : 2%;
		display: table;
		background-color: white;
		border-radius: 16px;
		padding: 20px 3%;
		width: 96%;
		z-index: 999;
	}
	.cus-header-normal .header-logo{
		display: table-cell;
		width: 312px;
		vertical-align: middle;
	}
	.cus-header-normal .header-nav{
		position: relative;
		display: table-cell;
		text-align: right;
		vertical-align: middle;
	}

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

	.cus-header-normal .header-nav .header-nav-brand{/* バーガーメニュー時 ロゴ */
		display: none;
	}
	@media screen and (max-width: 1309px) {
		.cus-header-normal{/* 横並び時レイアウト */
			top: 20px;
			left : 2%;
			padding: 16px 2%;
			width: 96%;
		}
		.cus-header-normal .header-logo{width: calc(312px * 0.8);}
	}
	@media screen and (max-width: 991px) {/* バーガーメニュー切り替え */
		.cus-header-normal{
			position: fixed;
			top: 0px;
			left : 0%;
			display: block;
			background:rgba(255,255,255,0);
			border-radius: 0px;
			padding: 0;
			width: 100%;
			height: 60px;
		}
		.cus-header-normal .header-logo{/* ロゴ非表示 */
			display: none;
		}
		.cus-header-normal .header-nav{
			display: block;
			text-align: left;
		}
		.header-toggler-bg{
			position: relative;
			top: -10px;
		}
		.header-toggler-bg::before{
			content: '';
			position: absolute;
			top: 0px;
			left: 0px;
			background-color: #e5f0e6;
			width: 100%;
			height: 60px;
			z-index: -1;
		}

		.cus-header-normal .header-nav .header-nav-brand{/* バーガーメニュー時 ロゴ */
			display: block;
		}
		.cus-header-normal .header-nav .header-nav-brand img{/* 位置調整 */
			position: relative;
			top: 6px;
			width: 180px;
		}
	}
	@media print {
		.cus-header-normal{
			position: absolute;
		}
	}

/* 電話番号の表記 */
	.cus-navigation-phone{
		display: block;
		text-align: left;
	}
	.cus-navigation-phone .phone-dial{
		display: block;
		font-size: 28px;
		font-weight: 700;
		line-height: 1.4;
	}
	.cus-navigation-phone .phone-dial i{
		font-size: 20px
	}
	.cus-navigation-phone .phone-text{
		display: block;
		margin-left: 30px;
		font-size: 14px;
	}
	@media screen and (max-width: 1309px) {
		.cus-navigation-phone .phone-dial{
			font-size: 22px;
		}
		.cus-navigation-phone .phone-dial i{
			font-size: 17px
		}
		.cus-navigation-phone .phone-text{
			margin-left: 6px;
			font-size: 13px;
		}
	}
	@media screen and (max-width: 991px) {
		.cus-navigation-phone{
			margin: 20px 0 0 0;
			text-align: center;
		}
		.cus-navigation-phone .phone-text{
			margin-left: 0px;
		}
	}

/* メールアイコンの表記 */
	.cus-navigation-mail{
		display: block;
		text-align: center;
	}
	.cus-navigation-mail .mail-link{
		overflow: hidden;
		display: block;
		position: relative;
		background: transparent;
		background-color: #197023;/* メールボタン背景色 */
		border-radius: 6px;
		padding: 14px 26px 12px 26px;
		font-weight: 700;
		color: white;
		line-height: 1;
		text-decoration: none;
		z-index: 1;
		transition: .3s;
	}
	.cus-navigation-mail .mail-link .link-text{
		display: block;
	}
	.cus-navigation-mail .mail-link::before{
		content: "";
		top: 0;
		left: 0;
		overflow: hidden;
		position: absolute;
		background: #0f3a15;/* メールボタン背景色 */
		width: 100%;
		height: 100%;
		z-index: -1;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform ease .3s;
	}
	.cus-navigation-mail .mail-link:hover{
		text-decoration: none;
	}
	.cus-navigation-mail .mail-link:hover::before{
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}
	@media screen and (max-width: 1309px) {
		.cus-navigation-mail .mail-link .link-text{
			font-size: 15px;
		}
	}
	@media screen and (max-width: 991px) {
		.cus-navigation-mail{
			display: none;
		}
	}

/* 検索窓の設定上書き */
	.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: 1309px) {
		.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;
		}

	}


/* ビッグメニュー利用時 追加CSS */
	.cus-navigation-bigmenu{
		background-color: rgba(255,255,255,0.8);
		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.3));
		padding: 20px;
	}


/* ヘッダ内メニューレイアウト */
	.header-nav-col li a,
	.header-nav-col li p{
		overflow: hidden;
		position: relative;
		background: transparent;
		padding: 0 10px !important;
		color: #222222;
		text-decoration: none;
		z-index: 10;
		transition: .3s;
	}
	.header-nav-col li a::before{
		content: "";
		bottom: 0;
		left: 0;
		overflow: hidden;
		position: absolute;
		background: #aaaaaa;
		width: 100%;
		height: 1px;
		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{
		color: #222222 !important;
	}
	.header-nav-col li .active::before{
		transform: scaleX(1);
	}

	.header-nav-col .col-sm{
		display: none;
	}
	@media screen and (max-width: 991px) {
		.header-nav-col{
			border-top: #afd4b4 solid 1px;
		}
		.header-nav-col li{
			border-bottom: #afd4b4 solid 1px;
		}
		.header-nav-col li a,
		.header-nav-col li p{
			padding: 12px 6px !important;
		}
		.header-nav-col li a::before{
			background: #197023;
			width: 100%;
			height: 100%;
		}
		.header-nav-col li a:hover{
			color: white;
		}
		.header-nav-col li .active{
			color: white !important;
		}

		.header-nav-col li .dropdown-menu{
			display: block !important;
			opacity: 1 !important;
		}

		.header-nav-col .col-sm{
			display: block;
		}
	}


/* ドロップダウンメニュー時の装飾 */
	.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;
	}
	.dropdown-menu li .active{
		background: #aaaaaa;
	}



/* バーガーメニュー3本線 */
	.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: #197023;
			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;
	  top: 4px;
	  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: #197023;
	    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);
				}
			}
		}
	}

	.navbar-toggler {/* バーガーメニューの黒い枠を完全に消す */
		border: none !important;
		outline: none !important;
		box-shadow: none !important;
	}
	.navbar-toggler:focus,
	.navbar-toggler:active,
	.navbar-toggler:focus-visible {/* フォーカス時（クリック・タップ時）の枠も消す */
		border: none !important;
		outline: none !important;
		box-shadow: none !important;
	}


/* バーガーメニュー内部のレイアウト調整 */
	@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: 90%;/* 幅 */
			height: 100vh;
			background-color: #cce7cf;/* 背景色 */
			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{
			padding: 0 !important;
			margin: 0 !important;
			width: 89%;/* 幅 */
		}
		.cus-header-normal .header-nav-col li{
			text-align: left;
		}
		.cus-header-normal .header-nav-col li a{
			display: block;
			padding: 10px 0;
		}
	}


/* ビッグメニュー実装内部 */
	.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;
		}
	}