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

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

	追加オーバーレイ
	ドロップダウンボタンをマウスオーバーで利用
	メニューの位置を調整（右寄せ）
	メニュー基本
	メニュー内リンクの設定
	バーガーメニュー3本線
	バーガーメニュー内部のレイアウト調整
	ビッグメニュー実装

*/

/* オーバーレイ全画面表示用 */
	@media screen and (max-width: 991px) {
	  /* オーバーレイ */
		#nav-overlay {
		  display: none;      /* 初期非表示 */
		  position: fixed;
		  top: 0; left: 0;
		  width: 100%; height: 100%;
		  background-color: rgba(0,0,0,0.5);
		  z-index: 1040;
		  opacity: 0;
		  transition: opacity 0.3s ease;
		  pointer-events: none;
		}
		
		#nav-overlay.show {
		  display: block;     /* メニュー開閉時に表示 */
		  opacity: 1;
		  pointer-events: auto;
		}
	
	  /* ナビメニュー */
		.navbar-collapse {
	    position: fixed;
	    top: 0; left: 0;
	    width: 80%;
	    max-width: 400px;
	    height: 100vh;
	    background-color: rgba(255,255,255,0.95);
	    overflow-y: auto;
	    z-index: 1050;
	
	    /* 初期非表示 */
	    display: none;  /* ←ここを変更 */
	    opacity: 0;
	    transform: translateX(-20px);
	    pointer-events: none;
	  }
	  .navbar-collapse.show {
	    display: block;  /* ←ここで開いた時のみ表示 */
	    opacity: 1;
	    transform: translateX(0);
	    pointer-events: auto;
	  }

	  /* 背景スクロール禁止 */
	  body.no-scroll {
	    overflow: hidden;
	  }
	  .navbar-toggler{
	    z-index: 1100;
	  }
	}


/* メニュー基本 */
	.cus-header-logo{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 455px;
		height: 380px;
		vertical-align: middle;
		z-index: 5;
	}
	.cus-header-logo.logo-local{
		width: calc(455px * 0.7);
		height: calc(380px * 0.7);
	}

	.cus-header-nav-menu{
		position: absolute;
		top: 40px;
		width: 100%;
		height: 85px;
		text-align: center;
		z-index: 3;
	}
	.cus-header-nav-menu .menu-col{
		position: relative;
		margin: 0 auto;
		width: 780px;
		height: 85px;
		text-align: center;
		z-index: 3;
	}
	.cus-header-nav-menu .menu-col::before{
		content: '';
		position: absolute;
		top: 0px;
		left: 2px;
		background-image: url(../img/site/h-nav-bg-left.png);
		background-position: left center;
		background-repeat: no-repeat;
		background-size: auto 100%;
		width: 390px;
		height: 85px;
		z-index: 1;
	}
	.cus-header-nav-menu .menu-col::after{
		content: '';
		position: absolute;
		top: 0px;
		right: 2px;
		background-image: url(../img/site/h-nav-bg-right.png);
		background-position: right center;
		background-repeat: no-repeat;
		background-size: auto 100%;
		width: 390px;
		height: 85px;
		z-index: 1;
	}

	.cus-header-normal{/* 横並び時レイアウト */
		position: relative;
		width: 100%;
		height: 60px;
	}

	@media screen and (max-width: 1879px) {
		.cus-header-logo{
			width: 22vw;
			height: auto;
		}
		.cus-header-logo.logo-local{
			width: 18vw;
			height: auto;
		}

		.cus-header-nav-menu{
			top: 30px;
		}

		.cus-header-normal{/* 横並び時レイアウト */
			height: 55px;
		}
	}
	@media screen and (max-width: 1400px) {
		.cus-header-nav-menu{
			top: 25px;
		}
		.cus-header-nav-menu .menu-col{
			width: 56vw;
		}
		.cus-header-nav-menu .menu-col::before{
			width: 30vw;
		}
		.cus-header-nav-menu .menu-col::after{
			width: 30vw;
		}
	}
	@media print {
		.cus-header-logo{
			width: 80px !important;
			height: auto;
		}
	}
	@media screen and (max-width: 991px) {
		.cus-header-logo,
		.cus-header-logo.logo-local{
			position: fixed;
			z-index: 999;
		}

		.cus-header-nav-menu{
			top: 0px;
			padding-top: 80px;
			width: 100%;
			height: auto;
		}
		.cus-header-nav-menu .menu-col{
			margin: 0;
			width: auto;
			text-align: left;
		}
		.cus-header-nav-menu .menu-col::before{
			display: none;
		}
		.cus-header-nav-menu .menu-col::after{
			display: none;
		}
	}
	@media screen and (max-width: 767px) {
		.cus-header-logo,
		.cus-header-logo.logo-local{
			width: 120px;
			height: auto;
		}
	}

	.cus-navigation-mail{/* メールアイコンのボタンリンク */
		position: absolute;
		top: 30px;
		right: 2%;
		z-index: 4;
	}
	.cus-navigation-mail .mail-link{
		overflow: visible;
		display: inline-block;
		position: relative;
		background: transparent;
		background-color: #f39809;/* メールボタン背景色 */
		border-radius: 50%;
		padding: 26px 0 0 0;
		width: 200px;
		height: 200px;
		color: white;
		text-align: center;
		line-height: 1;
		text-decoration: none;
		z-index: 1;
		transition: transform 0.3s ease;
	}
	.cus-navigation-mail .mail-link .link-text1{
		display: block;
		font-family: "Commissioner", sans-serif;
		font-size: 20px;
		font-weight: 700;
	}
	.cus-navigation-mail .mail-link .link-ic{
		display: block;
		font-size: 76px;
		transition: transform 0.3s ease;
	}
	.cus-navigation-mail .mail-link .link-text2{
		display: block;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
	}
	.cus-navigation-mail .mail-link::before{
		content: '';
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		border: 2px solid #f39809; /* 好きな色 */
		border-radius: 50%;
		transform: scale(1);
		transition: transform 0.3s ease, opacity 0.3s ease;
		opacity: 0.5;
	}
	.cus-navigation-mail .mail-link:hover::before{
		transform: scale(1.1) rotate(10deg);
		opacity: 0.8;
	}
	.cus-navigation-mail .mail-link:hover .link-ic{
		transform: rotate(10deg) scale(1.1);
		transition: transform 0.3s ease;
	}
	@media screen and (max-width: 1200px) {
		.cus-navigation-mail{/* メールアイコンのボタンリンク */
			top: 25px;
		}
		.cus-navigation-mail .mail-link{
			padding: 2.2vw 0 0 0;
			width: 16vw;
			height: 16vw;
		}
		.cus-navigation-mail .mail-link .link-text1{
			font-size: 1.6vw;
		}
		.cus-navigation-mail .mail-link .link-ic{
			font-size: 5.6vw;
		}
		.cus-navigation-mail .mail-link .link-text2{
			font-size: 1.4vw;
		}
	}
	@media screen and (max-width: 991px) {
		.cus-navigation-mail{/* メールアイコンのボタンリンク */
			display: none;
		}
	}
	@media print {
		.cus-navigation-mail{/* メールアイコンのボタンリンク */
			display: none;
		}
	}

/* メニュー内リンクの設定 */
	.cus-nav-menu{/* 中央に寄せる */
	  display: flex;
	  justify-content: center;
	}

	.cus-nav-menu .menu-list{
		position: relative;
	  display: -webkit-flex !important;
		display: flex !important;
		flex-direction: row !important;
	  justify-content: center !important;
		padding: 10px 0 0 0;
		margin: 0px;
		list-style: none;
		z-index: 10;
	}
	.cus-nav-menu .menu-list li{
		padding-right: 20px;
	}
	.cus-nav-menu .menu-list li:last-child{
		padding-right: 0px;
	}
	.cus-nav-menu .menu-list li a{
		overflow: hidden;
		position: relative;
		display: block;
		background: transparent;
		padding: 0 10px !important;
		font-family: "Commissioner", sans-serif;
		font-size: 20px;
		font-weight: 700;
		color: #132f4d;
		text-align: center;
		text-decoration: none;
		z-index: 10;
		transition: .3s;
	}
	.cus-nav-menu .menu-list li a .jp{
		display: block;
		font-size: 15px;
		font-weight: 400;
	}
	.cus-nav-menu .menu-list li .active{
		color: #0555ad !important;
		text-decoration: none;
	}
	.cus-nav-menu .menu-list li a:hover{
		color: #0555ad;
		text-decoration: none;
	}

	.cus-nav-menu .menu-list .list-sm{
		display: none;
	}
	@media screen and (max-width: 1400px) {
		.cus-nav-menu .menu-list li{
			padding-right: 1vw;
		}
		.cus-nav-menu .menu-list li a{
			font-size: 19px;
		}
	}
	@media screen and (max-width: 991px) {
		.cus-nav-menu .menu-list{
			flex-direction: column !important;
			justify-content: start;
			padding: 0px;
		}
		.cus-nav-menu .menu-list li{
			padding-right: 0px;
			margin-bottom: 15px;
		}
		.cus-nav-menu .menu-list li:last-child{
			margin-bottom: 0px;
		}
		.cus-nav-menu .menu-list li a{
			display: block;
			border: #00428b solid 1px;
			border-radius: 100px;
			-webkit-border-radius: 100px;
			-moz-border-radius: 100px;
			padding: 8px 0 !important;
			width: 260px;
			font-size: 16px;
		}
		.cus-nav-menu .menu-list li a .jp{
			display: block;
			font-size: 15px;
			font-weight: 400;
		}
		.cus-nav-menu .menu-list li .active{
			background-color: #0555ad;
			color: white !important;
		}
		.cus-nav-menu .menu-list li a:hover{
			color: #132f4d;
		}

		.cus-nav-menu .menu-list .list-sm{
			display: block;
		}
	}


/* バーガーメニュー3本線 */
	.navbar-toggler{
		position: fixed;
		top: 3px;
		right: 10px;
		display: block;
		z-index: 9999;
	}
	.navbar-toggler-icon{
		background-image: none;
	}
	
	.custom-toggler span{
		display: block;
		width: 40px;
		height: 3px;
		margin: 8px 0;
		background-color: #000;
		transition: 0.4s;
	}
	.navbar-toggler.open .custom-toggler span:nth-child(1) {
		transform: rotate(45deg) translate(9px, 9px);
	}
	.navbar-toggler.open .custom-toggler span:nth-child(2) {
		opacity: 0;
	}
	.navbar-toggler.open .custom-toggler span:nth-child(3) {
		transform: rotate(-45deg) translate(6px, -6px);
	}

	@media print {
		.navbar-toggler{
			display: none;
		}
	}
/* 991px以下での標準ブートストラップ調整 */
	@media (max-width: 991px) {
		.navbar-toggler {
			display: block;
			border: none;
			background: transparent;
		}
	}