@charset "UTF-8";
/*
	* Bootstrap ヘッダ・フッタに関するカスタムCSS

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

	ヘッダの表示位置
	ヘッダの背景色設定
	ロゴサイズ調整
	メニュー全体のテキスト色
	メニュー右寄せ調整
	ドロップダウン標準アニメーションの廃止
	PC表示時：ドロップダウンのスライドダウンアニメーション
	モバイルメニュー・スライド設定（背景色は上で設定済）
	ハンバーガーアイコンを矢印に変えるアニメーション
	追加項目・メール
	追加項目・画面幅縮小時のメニューカスタム

*/

/* ヘッダの表示位置 */
	.cus-header-normal{
		position: fixed;
		width: 100%;
		z-index: 999;
	}

/* ヘッダの背景色設定 */
	.cus-navbar {
		position: relative;
    background-color: transparent; /* PC時は透明 */
    transition: background-color 0.4s ease;
		padding: 0 220px 0 0 !important;/* メニュー右に追加項目がある場合指定 */
	}
	.cus-navbar.scrolled {/* スクロール後の背景色 */
		overflow: hidden;
		background-color: #ffffff !important;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	}
	.cus-navbar.scrolled .nav-link {/* スクロール後のテキストカラー */
		color: inherit !important;
	}

	.cus-header-logo-sm{/* スマホ用ロゴが別にある場合（スクロール時などにも必要な場合利用） */
		display: none;
	}
	.cus-navbar.scrolled .cus-header-logo{
		display: none;
	}
	.cus-navbar.scrolled .cus-header-logo-sm{
		display: block;
	}
	@media (max-width: 991.98px) {
    .cus-navbar {
      /* スマホ時の背景色（ここで好きな色に変更可能） */
      background-color: #ffffff; 
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
			padding: 0 !important;
    }
    /* 左からスライドしてくるメニュー本体の背景色 */
    .navbar-collapse {
      background-color: rgba(255,255,255,1);
			backdrop-filter: blur(10px); /* 背景をぼかすとお洒落になります（任意） */
			-webkit-backdrop-filter: blur(10px);
    }

    .cus-header-logo{
			display: none;
		}
    .cus-header-logo-sm{
			display: block;
		}
	}

/* ロゴサイズ調整 */
	.cus-header-logo{/* サイズ、位置微調整 */
		width: 340px;
	}
	.cus-header-logo img,
	.cus-header-logo-sm img{
		position: relative !important;
		top: 5px !important;
	}
	@media screen and (max-width: 1714px) {
		.cus-header-logo{width: calc(340px * 0.8);}
		.cus-header-logo-sm{width: calc(340px * 0.8);}
	}
	@media screen and (max-width: 1540px) {
		.cus-header-logo{width: calc(340px * 0.6);}
		.cus-header-logo-sm{width: calc(340px * 0.6);}
	}
	@media screen and (max-width: 1319px) {
		.cus-header-logo{width: calc(340px * 0.5);}
		.cus-header-logo-sm{width: calc(340px * 0.5);}
	}
	@media (max-width: 991.98px) {
		.cus-header-logo{width: calc(340px * 0.4);}
		.cus-header-logo-sm{width: 240px;}
	}
	@media print {.cus-header-logo{
		width: calc(340px * 0.3);}
	}
	@media screen and (max-width: 767px) {
		.cus-header-logo-sm{width: 240px;}
	}

/* メニュー全体のテキスト色 */
	.cus-navbar .nav-link,
	.cus-navbar .dropdown-item,
	.cus-navbar .dropdown-menu {/* メニュー全体のテキスト色 */
    color: white;
	}
	.cus-navbar .nav-link:hover,
	.cus-navbar .dropdown-item:hover,
	.cus-navbar .dropdown-menu:hover {
    color: white;
	}
	.cus-navbar .nav-link.active,
	.cus-navbar .dropdown-item.active,
	.cus-navbar .dropdown-menu.active {
    color: white;
	}

/* メニュー調整 */
	.cus-navbar .nav-link {/* 上下左右中央寄せ */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 40px;
	}
	.cus-navbar .nav-item:first-child{
		display: none;
	}

	@media (min-width: 992px) {
    .cus-navbar .navbar-nav {/* メニュー右寄せ */
			padding-right: 1rem;
    }
    .cus-navbar .nav-item {
			margin-left: 1.5rem;/* メニューの間隔 */
    }
	}
	@media (max-width: 991.98px) {
		.cus-navbar .nav-link {
    	justify-content: flex-start;
    	text-align: left;
    	padding-left: 0;
		}
		.cus-navbar .nav-item:first-child{
			display: block;
		}
    .cus-navbar .navbar-nav {
			margin-left: 0 !important;
			padding-left: 0;
    }
	}

/* ドロップダウン標準アニメーションの廃止 */
	.dropdown-item {
    transition: none !important; /* アニメーション時間をゼロにする */
	}
	.dropdown-item:hover, 
	.dropdown-item:focus {
    background-color: transparent !important; /* 背景色を変えない場合 */
    outline: none;
	}

/* PC表示時：ドロップダウンのスライドダウンアニメーション */
	@media (min-width: 992px) {
		.navbar-nav .dropdown-menu {
			display: block;          /* 常に構造として配置 */
			visibility: hidden;      /* 初期状態は見えなくする */
			opacity: 0;
			transform: translateY(-10px); /* 10px上に配置しておく */
			transition: all 0.3s ease;    /* アニメーションの速度と動き */
			pointer-events: none;    /* 消えている間はクリック不可 */
		}
		.navbar-nav .nav-item.dropdown:hover .dropdown-menu,
		.navbar-nav .nav-item.dropdown .dropdown-menu.show {
			visibility: visible;
			opacity: 1;
			transform: translateY(0);    /* 元の位置にスライド */
			pointer-events: auto;
		}
	}

/* --- モバイルメニュー・スライド設定（背景色は上で設定済） --- */
	@media (max-width: 991.98px) {
    .navbar-collapse {
			position: fixed;
			top: 0;
			left: -100%; /* 初期状態は左に隠す */
			display: block !important;
			width: 86%;  /* 画面幅の86% */
			height: 100dvh;
			padding: 80px 20px 40px;
			transition: all 0.4s ease;
			z-index: 1050;
			overflow-y: auto;
			overscroll-behavior: contain;
    }
    .navbar-collapse.show {
			left: 0; /* 表示時にスライドイン */
    }

    #nav-overlay {/* モバイルメニューコンテンツ全体オーバーレイ */
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
			z-index: -1;
    }
    #nav-overlay.show {
			display: block;
    }

    .cus-navbar .dropdown-menu {/* ドロップメニュー本体を表示状態にする */
			display: block;
			position: static; /* 浮かせず、リストの中に組み込む */
			float: none;
			width: 100%;
			background-color: transparent; /* 背景は親に合わせる */
			border: none;
			box-shadow: none;
			padding-left: 1.5rem; /* 子階層らしくインデントをつける */
			margin: 0;
			opacity: 1;
			visibility: visible;
    }
    .cus-navbar .dropdown-toggle::after {
			display: none; /* 矢印を消す場合 */
    }
    .cus-navbar .nav-link.dropdown-toggle {
			pointer-events: none; /* タイトル部分をクリックしても反応させない */
			font-weight: bold;
    }
	}
	@media (min-width: 992px) {
    .cus-navbar .navbar-nav .nav-link.active::before {
    	width: 6px; /* ホバー時と同じサイズを指定 */
    	opacity: 1; /* 確実に見えるように設定 */
    }
	}
	@media (max-width: 991.98px) {
    .navbar-nav .nav-item .nav-link.active {
    	background-color: #c74a81 !important; /* 背景に色を敷く */
    	color: #ffffff !important;           /* 文字を白抜きにする */
    	font-weight: bold;                  /* 必要に応じて太字に */
    }
	}

/* --- ハンバーガーアイコンを矢印に変えるアニメーション --- */
	@media (max-width: 991.98px) {
		.cus-navbar{padding: 0 !important; height: 60px;}
    .menu-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: linear-gradient(to right, #00296e, #008ad2) !important;
				border-radius: 0px !important;
        position: relative;
				top: -1px;
				right: -12px;
        padding: 0;
        margin-left: auto;
        width: 60px;
        height: 61px;
        z-index: 1100 !important;
    }
    .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 15px;
        height: 2px;
        background-color: #ffffff;
        width: 50%;
    }
    .menu-trigger span:nth-of-type(1) { top: 20px; }
    .menu-trigger span:nth-of-type(2) { top: 27px; }
    .menu-trigger span:nth-of-type(3) { top: 34px; }

    /* アクティブ時：矢印に変形 */
		.menu-trigger.active{
			position: relative;
			z-index: 1100 !important;
		}
    .menu-trigger.active span:nth-of-type(1) {
        transform: translate(-3px, 1px) rotate(-45deg);
        width: 30%;
    }
    .menu-trigger.active span:nth-of-type(2) {
        opacity: 1; /* 中線は残して軸にする */
    }
    .menu-trigger.active span:nth-of-type(3) {
        transform: translate(-3px, -1px) rotate(45deg);
        width: 30%;
    }

		.menu-trigger, 
		.menu-trigger:focus, 
		.menu-trigger:active, 
		.menu-trigger:focus-visible {
				outline: none !important;
				box-shadow: none !important;
				-webkit-tap-highlight-color: transparent;
		}
		.navbar-toggler:focus {
				text-decoration: none;
				outline: 0;
				box-shadow: none !important;
		}
	}

/* リンクホバー時のアクション */
	@media (min-width: 992px) {
    .cus-navbar .nav-link {
        position: relative; /* 線の基準点 */
        display: inline-flex; /* 線の幅をテキストに合わせる */
        padding-bottom: 5px;  /* テキストと線の間隔 */
    }

    /* 線の初期状態（透明・幅ゼロ） */
    .cus-navbar .nav-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
				margin-left: -3px;
        width: 0;           /* 最初は幅0 */
        height: 6px;        /* 線の太さ */
        background-color: #ffffff; /* 線の色（白） */
				border-radius: 10px;
        transition: width 0.3s ease; /* 伸びるアニメーション */
    }
		.cus-navbar.scrolled .nav-link::before {
        background-color: #c74a81; /* CONTACTボタンと同じピンク系、もしくは#333など */
    }

    /* ホバー時に幅を100%にする */
    .cus-navbar .nav-link:hover::before {
        width: 6px;
    }
    /* ドロップダウンメニュー内のアイテムは背景色を変えず線も出さない（または別設定） */
    .dropdown-item::before {
        display: none !important;
    }
	}

/* メール */
	.navbar-mail{
		position: absolute;
		top: 0px;
		right: 0px;
		width: 220px;
		height: 100%;
	}
	.navbar-mail a{
		overflow: hidden;
		position: relative;
		display: block;
		box-sizing: content-box;
		background-color: #c74a81;
		padding: 20px 0;
		font-family: 'Poppins', sans-serif;
		font-size: 24px;
		font-weight: 700;
		color: white;
		text-decoration: none;
		text-align: center;
		z-index: 1;
	}
	.navbar-mail a::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 0; /* 最初は高さ0 */
		background-color: rgba(0, 0, 0, 0.3);
		transition: height 0.3s ease;
		z-index: -1;
	}
	.navbar-mail a:hover::before {
		height: 100%;
	}
	@media screen and (max-width: 767px) {
		.navbar-mail {
			position: static;
			width: 100%;
			height: auto; /* 100% から auto に変更 */
		}
	}

/* 追加項目・画面幅縮小時のメニューカスタム */
	@media screen and (max-width: 1649px) {
		.navbar-nav .nav-item .nav-link{
			display: flex;
			flex-direction: column;
			font-size: 15px;
			line-height: 1.3;
		}
		.navbar-nav .nav-item .nav-link .dot{
			display: none;
		}
	}
	@media screen and (max-width: 1470px) {
		.navbar-nav .nav-item .nav-link{
			padding-left: 0.4rem !important;
			padding-right: 0.4rem !important;
			font-size: 15px;
		}
	}
	@media screen and (max-width: 1230px) {
		.navbar-nav .nav-item .nav-link{
			font-size: 15px;
		}

		.cus-navbar {/* contact */
			padding: 0 190px 0 0 !important;
		}
		.navbar-mail{
			width: 190px;
		}
		.navbar-mail a{
			font-size: 22px;
		}
	}
	@media screen and (max-width: 1179px) {
		.navbar-nav .nav-item .nav-link{
			padding-left: 0.2rem !important;
			padding-right: 0.2rem !important;
			font-size: 14px;
		}

		.cus-navbar {/* contact */
			padding: 0 160px 0 0 !important;
		}
		.navbar-mail{
			width: 160px;
		}
		.navbar-mail a{
			font-size: 20px;
		}
	}
	@media screen and (max-width: 1060px) {
		.navbar-nav .nav-item .nav-link{
			padding-left: 0rem !important;
			padding-right: 0rem !important;
			font-size: 14px;
		}

		.cus-navbar {/* contact */
			padding: 0 140px 0 0 !important;
		}
		.navbar-mail{
			width: 140px;
		}
		.navbar-mail a{
			font-size: 18px;
		}
	}
	@media (max-width: 991.98px) {/* バーガーメニュー用 */
		.cus-navbar {
			padding: 0 !important;
		}
		.navbar-nav .nav-item{
			border-bottom: black solid 1px;
		}
		.navbar-nav .nav-item .nav-link{
			display: block;
			padding: 12px 0;
			font-size: 20px;
			color: inherit;
			text-align: center;
			line-height: 1.6;
		}
		.navbar-nav .nav-item .nav-link .dot{
			display: inline;
		}
	}
	@media print {
		.cus-navbar{
			display: none;
		}
	}
	@media screen and (max-width: 767px) {
		.navbar-nav .nav-item .nav-link{
			padding: 10px 0;
			padding-left: 1rem !important;
			font-size: 16px;
			text-align: left;
		}

		.navbar-mail{
			position: static;
			width: 100%;
			height: auto;
		}
		.navbar-mail a{
			padding: 14px 0;
			font-size: 16px;
		}
		.navbar-mail a::before {
			display: none;
		}
	}

	/* スクロール時のCONTACTボタンの高さを調整 */
	.cus-navbar.scrolled .navbar-mail a{
		padding-top: 15px;
		transition: all 0.2s ease;
	}
	.navbar-mail a{
		transition: all 0.2s ease;
	}
	@media screen and (max-width: 1540px) {
		.cus-navbar.scrolled .navbar-mail a{
			padding-top: 13px;
		}
	@media screen and (max-width: 1319px) {
		.cus-navbar.scrolled .navbar-mail a{
			padding-top: 14px;
		}
	}

	.navbar-brand{
		z-index: 1100 !important;
	}