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

	@media screen and (max-width: 1499px) {}
	@media screen and (max-width: 991px) {}
	@media print {}
	@media screen and (max-width: 767px) {}
 
	xl-1500(max-1499) 左右余白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 .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 !important;
		top: 0px;
		left : 0px;
		display: table;
		padding: 20px 2%;
		width: 100%;
		z-index: 999;
		transition: background-color 0.4s ease, box-shadow 0.4s ease;
	}
	.cus-header-normal .header-logo{
		position: relative;
		top: -2px;
		display: table-cell;
		width: 368px;
		vertical-align: middle;
		transition: all 0.4s ease;
	}
	.cus-header-normal .header-logo img {
		transition: all 0.4s ease;
		width: 100%;
	}
	.cus-header-normal .header-nav{
		position: relative;
		display: table-cell;
		text-align: right;
		vertical-align: middle;
	}

	.cus-header-normal.is-scrolled {/* スクロール時設定 */
		background-color: rgba(255, 255, 255, 0.95) !important;
		padding: 10px 2% !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}
	.cus-header-normal.is-scrolled .header-logo {
		position: relative;
		top: -7px;
		width: calc(368px * 0.8);
	}
	.cus-header-normal.is-scrolled .nav-link {
		color: #1b1d1e !important;
	}
	.cus-header-normal.is-scrolled .header-nav-col li .active {
		color: #e5004a !important; /* 現在のactive色 */
	}
	.cus-header-normal.is-scrolled .header-nav-col {
		align-items: center !important; /* 垂直中央に固定 */
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
	.cus-header-normal.is-scrolled .header-nav {
		vertical-align: middle !important; /* table-cellの垂直位置を中央に */
	}

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

	.cus-header-normal .header-nav .header-nav-brand{/* バーガーメニュー時 ロゴ */
		display: none;
	}
	@media screen and (max-width: 1589px) {
		.cus-header-normal .header-logo{
			top: -2px;
			width: calc(368px * 0.8);
		}
	}
	@media screen and (max-width: 1499px) {
		.cus-header-normal .header-logo{
			top: -4px;
			width: calc(368px * 0.6);
		}
	}
	@media screen and (max-width: 1269px) {
		.cus-header-normal .header-logo{
			top: -4px;
			width: calc(368px * 0.5);
		}

		.cus-header-normal.is-scrolled .header-logo {
			width: calc(368px * 0.64);
		}
	}
	@media screen and (max-width: 991px) {/* バーガーメニュー切り替え */
		.cus-header-normal{
			position: fixed;
			display: block;
			padding: 0;
		}
		.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: #baedf4;
			width: 100%;
			height: 60px;
			z-index: -1;
		}

		.cus-header-normal.is-scrolled {
			padding: 0 !important;          /* スクロール時の余白を消去 */
			background-color: transparent !important; /* 白背景を透明に（下のtoggler-bgを見せるため） */
			box-shadow: none !important;    /* 必要に応じてシャドウも消去 */
		}

		.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 !important;
		}
	}

/* 電話番号の表記 */
	.cus-navigation-phone{
		overflow: hidden;
		display: block;
		max-width: 400px;
		max-height: 100px;
		text-align: left;
		white-space: nowrap;
		transition: max-width 0.5s ease, opacity 0.3s ease;
		opacity: 1;
	}
	.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;
	}

	.cus-header-normal.is-scrolled .cus-navigation-phone {/* スクロール時 */
		max-width: 0;
		max-height: 0;
		opacity: 0;
		margin: 0 !important;
		pointer-events: none;
	}
	@media screen and (max-width: 1589px) {
		.cus-navigation-phone .phone-dial{
			font-size: 24px;
		}
		.cus-navigation-phone .phone-dial i{
			font-size: 19px
		}
		.cus-navigation-phone .phone-text{
			margin-left: 6px;
			font-size: 14px;
		}
	}
	@media screen and (max-width: 1499px) {
		.cus-navigation-phone .phone-dial{
			font-size: 22px;
		}
		.cus-navigation-phone .phone-dial i{
			font-size: 17px
		}
		.cus-navigation-phone .phone-text{
			margin-left: 12px;
			font-size: 13px;
		}
	}
	@media screen and (max-width: 1269px) {
		.cus-navigation-phone .phone-dial{
			font-size: 19px;
		}
		.cus-navigation-phone .phone-dial i{
			font-size: 15px
		}
		.cus-navigation-phone .phone-text{
			margin-left: 12px;
			font-size: 11px;
		}
	}
	@media screen and (max-width: 991px) {
		.cus-navigation-phone{
			display: none;
		}

	}

/* メールアイコンの表記 */
	.cus-navigation-mail{
		display: block;
		text-align: center;
	}
	.cus-navigation-mail .mail-link{
		overflow: hidden;
		display: block;
		position: relative;
		background: transparent;
		background-color: #878787;/* メールボタン背景色 */
		padding: 4px 20px;
		font-size: 28px;
		font-weight: 700;
		color: white;
		line-height: 1;
		text-decoration: none;
		z-index: 1;
		transition: .3s;
	}
	.cus-navigation-mail .mail-link .link-ic{
		font-size: 20px;
	}
	.cus-navigation-mail .mail-link .link-text{
		display: block;
		font-size: 13px;
	}
	.cus-navigation-mail .mail-link::before{
		content: "";
		top: 0;
		left: 0;
		overflow: hidden;
		position: absolute;
		background: #242424;/* メールボタン背景色 */
		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: 1499px) {
		.cus-navigation-mail .mail-link .ink-ic{
			font-size: 18px
		}
		.cus-navigation-mail .mail-link .link-text{
			font-size: 12px;
		}
	}
	@media screen and (max-width: 991px) {
		.cus-navigation-mail .mail-link{
			padding: 3px 0 6px 0;
		}
		.cus-navigation-mail .mail-link .ink-ic{
			font-size: 18px
		}
		.cus-navigation-mail .mail-link .link-text{
			font-size: 12px;
		}
	}


/* ビッグメニュー利用時 追加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{
		padding-right: 20px;
	}
	.cus-header-normal.is-scrolled .header-nav-col li:last-child{
		padding-right: 0px;
	}

	.header-nav-col li a,
	.header-nav-col li p{
		overflow: hidden;
		position: relative;
		background: transparent;
		color:  #1b1d1e;
		text-decoration: none;
		z-index: 10;
		transition: .3s;
	}
	.header-nav-col li a:hover{
		color: #e5004a;
		text-decoration: none;
	}
	.header-nav-col li a:hover::before{
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}

	.header-nav-col li .active{
		color:  #e5004a !important;
	}
	.header-nav-col li .active::before{
		transform: scaleX(1);
	}
	
	.header-nav-col .nav-sm{
		display: none;
	}
	@media screen and (max-width: 1589px) {
		.header-nav-col li{
			padding-right: 18px;
		}
		.header-nav-col li a,
		.header-nav-col li p{
			font-size: 17px;
		}
	}
	@media screen and (max-width: 1499px) {
		.header-nav-col li{
			padding-right: 15px;
		}
		.header-nav-col li a,
		.header-nav-col li p{
			font-size: 16px;
		}
	}
	@media screen and (max-width: 1269px) {
		.header-nav-col li{
			padding-right: 4px;
		}
		.header-nav-col li a,
		.header-nav-col li p{
			position: relative;
			top: 10px;
			font-size: 15px;
			line-height: 1.4;
			text-align: center;
		}
		.header-nav-col li:nth-child(2) a,
		.header-nav-col li:nth-child(2) p{/* 上下位置調整 */
			top: 0px;
		}
		.header-nav-col li:nth-child(4) a,
		.header-nav-col li:nth-child(4) p{/* 上下位置調整 */
			top: 0px;
		}
		.header-nav-col li a .txt-block,
		.header-nav-col li p .txt-block{
			display: block;
		}

		.cus-header-normal.is-scrolled .header-nav-col li a,
		.cus-header-normal.is-scrolled .header-nav-col li p{
			top: 0px !important;
		}
		.cus-header-normal.is-scrolled .header-nav-col li a .txt-block,
		.cus-header-normal.is-scrolled .header-nav-col li p .txt-block{
			display: inline !important;
		}
	}
	@media screen and (max-width: 991px) {
		.header-nav-col li,
		.header-nav-col li{
			border-bottom: #51dbda solid 1px;
		}
		.header-nav-col li:first-child,
		.header-nav-col li:first-child{
			border-top: #51dbda solid 1px;
		}
		.header-nav-col li:last-child,
		.header-nav-col li:last-child{
			border-bottom: #51dbda solid 0px;
		}


		.header-nav-col li a,
		.header-nav-col li p{
			top: 0px;
			padding: 12px 6px !important;
			text-align: left;
		}
		.header-nav-col li a::before{
			display: none;
		}
		.header-nav-col li a .txt-block,
		.header-nav-col li p .txt-block{
			display: inline;
		}
		.header-nav-col li a:hover{
			color: #1b1d1e;
		}
		.header-nav-col li .active{/* ベースフォントカラーに合わせる */
			background: #51dbda;
			color: white !important;
		}

		.header-nav-col li .dropdown-menu{
			display: block !important;
			opacity: 1 !important;
		}
	
		.header-nav-col .nav-sm{
			display: block;
			padding-top: 30px;
		}
		.header-nav-col .nav-sm .phone-dial{
			display: block;
			font-size: 20px;
			text-align: center;
		}
		.header-nav-col .nav-sm .phone-text{
			display: block;
			font-size: 15px;
			text-align: center;
		}

		/* スクロール時でも横並び（Flex）を解除し、縦並びを維持する */
    .cus-header-normal.is-scrolled .header-nav-col {
			display: block !important;     /* flexを解除 */
			width: 100% !important;        /* 親要素の幅を確保 */
    }
    /* リストアイテムを横いっぱいに広げる */
    .cus-header-normal.is-scrolled .header-nav-col li {
			width: 90% !important;        /* 幅を100%に固定 */
			display: block !important;     /* ブロック要素にする */
    }
    /* リンクエリアを横いっぱいに広げ、クリックしやすくする */
    .cus-header-normal.is-scrolled .header-nav-col li a {
			display: block !important;
			width: 100% !important;
			text-align: left;              /* 左寄せに戻す */
    }
	}


/* ドロップダウンメニュー時の装飾 */
	.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{
		margin-right: 0px;
		padding-right: 0;
	}

	.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: #03a8a7;
			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: #03a8a7;
	    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: #e8fefc;/* 背景色 */
			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;
		}
	}