/***********************************************************

	メニュー

***********************************************************/


#_mainFlame nav#desktopNavi {
	display: none;
}
@media screen and (min-width:1200px) {
	#_mainFlame nav#desktopNavi {
		display: block;
		position: fixed;
		width: 100%;
 		top: calc(267px - 74px - 147px);
		z-index: 1000;
	
		transition: top 0.5s ease;
	}
}

nav .l-nav_fig {
	text-align: center;
	padding: 0px 0;
	margin: 0 auto;
	width: 100%; /* 両サイドに10%ずつ余白を設定 */
	background-color: #fff;
	
    inset-inline-start: 0px;
}

nav .l-nav_menu {
  display: flex;
  justify-content: space-between; /* 横一列にメニューを等間隔で配置 */
  list-style: none;
  margin: 0;
  padding: 0 20%;
}
@media screen and (max-width:1500px) {
	nav .l-nav_menu {
		padding: 0 10%;
	}
}

nav ul.l-nav_menu {
}

nav .l-nav_menu li.onMouse {
	max-height: 60px; 
	padding: 0;
	margin: 0;
}

#desktopNavi .l-nav_menu a.c-headerMenu {
  position: relative; /* 子要素(dl)を絶対配置するための基準 */
	
  display: inline-block;
  text-decoration: none;
  font-size: 20px;
  line-height: 2.8em;
  padding: 10px 0 10px 0; /* 文字の周りの余白 */
  transition: color 0.3s; /* ホバー時のスムーズな色変化 */
}

nav .l-nav_menu a.c-headerMenu:visited {
	color: #474545;
}

nav .l-nav_menu a.c-headerMenu:hover {
	color: #333;
}

nav .l-nav_menu a.c-headerMenu::after {
	position: absolute;
	bottom: 14px;
	left: 0;
	content: '';
	width: 0;
	height: 3px;
	background-color: #0032a0;
	transition: .3s;
}
nav .l-nav_menu a.c-headerMenu:hover::after {
	width: 100%;
}


/***********************************************************

	サブメニュー　共通

***********************************************************/

nav .l-nav__about {
	/* 初期状態では非表示 */
	display: none;
	
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: rgba(217,236,241, 0.93); /* サブメニューの背景色 */
	padding: 10px 0 12px 0;
	z-index: 999;
}

/* ホバー時にサブメニューを表示
nav .l-nav_menu li:hover .l-nav__about {
	display: block;
} */

nav .p-navMenu__display {
	display: block;
}






nav .l-nav__about h4 {
	display: block;
	font-size: 24px;
	font-weight: bold;
	text-align: left;
	color: #0032a0;
	line-height: 1.4em;
	margin: 9px 0;
	
	padding-left: 5%;
}

nav#desktopNavi .c-close-button {
	display: block;
	position: absolute;
	top: 17px;
	right: 15px;
	
	width: 36px;
	height: 36px;
	cursor: pointer;
}
nav#desktopNavi .c-close-button span {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs, 1));
	width: 32px;
	height: 32px;
	border: 2px solid transparent;
	border-radius: 40px;
}
nav#desktopNavi .c-close-button span::after,
nav#desktopNavi .c-close-button span::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 34px;
	height: 3px;
	background: currentColor;
	transform: rotate(45deg);
	border-radius: 5px;
	top: 14px;
	left: -1px;
}
nav#desktopNavi .c-close-button span::after {
	transform: rotate(-45deg);
}






nav .c-navMenu {
	position: relative;
  display: flex; /* Flexboxを使用して横並び */
  justify-content: space-between; /* 均等配置 */
  width: 90%; /* 左右に5%の余白を確保 */
  margin: 0 auto; /* 中央揃え */
  padding: 0 0 10px 0;
}
nav .c-navMenu dl {
  flex: 1; /* 均等に4分割 */
  padding: 0 15px; /* 内側の余白 */
  border-left: 1px solid #0032a0; /* 各列の左側にボーダー */
	
	text-align: left;
}

nav .c-navMenu dl:first-child {
  /* border-right: 1px solid #0032a0;  最初の列の右にもボーダー */
}

nav .c-navMenu dt {
	padding: 5px 0;
	margin: 0;
}
nav .c-navMenu dd {
	padding: 3px 0;
	margin: 0;
}
nav .c-navMenu dd { margin: 0 0 0 1.0em; }

nav .c-navMenu dt a {
	display: block;
	font-size: 18px;
	line-height: 20px;
	font-weight: bold;
	color: #0032a0;
	text-decoration: none;
}

nav .c-navMenu dd a {
	display: block;
	font-size: 16px;
	line-height: 18px;
	color: #0032a0;
	text-decoration: none;
}

nav .c-navMenu dt a:hover , 
nav .c-navMenu dd a:hover {
	text-decoration: underline;
}


/***********************************************************

	サブメニュー　ClassNKについて のみ

***********************************************************/

nav#desktopNavi .c-aboutOrg {
	padding: 0 5%;
}

/* 親コンテナ：横並びの配置 */
nav .c-aboutOrg {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 50px; /* 各要素の間隔 */
	
	width: 100%;
}

/* --- UL（2列2行のメニュー） --- */
nav .c-aboutOrg ul {
	width: 646px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	grid-row-gap: 30px;
	
	padding: 0;
	list-style: none;
}

nav .c-aboutOrg ul li {
	/* background-color: #f8f9fa;  背景色 */
	padding: 0;
}


nav .c-aboutOrg ul li a { 
	display: block;
	text-decoration: none;
	overflow: hidden; /* 拡大した画像がはみ出ないように */
}
nav .c-aboutOrg ul li a figure {
	display: block;
	margin: 0;
	padding: 0;
	overflow: hidden; /* はみ出し防止 */
	
	width: 313px; /* 固定サイズ */
	height: 180px; /* 固定サイズ */
}

/* 画像のホバー時に拡大 */
nav .c-aboutOrg ul li a figure img {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
}

nav .c-aboutOrg ul li a figcaption {
	display: block;
	text-align: left;
	color: #0032a0;
	
	font-size: 22px;
	line-height: 44px;
	font-weight: bold;
	
	transition: color 0.3s ease-in-out;
}
nav .c-aboutOrg ul li a figcaption::after {
	content: "→";
	display: inline-block;
	padding-left: 1.0em;
}

/* ホバー時に画像を拡大（親の幅・高さは変更しない） */
nav .c-aboutOrg ul li a:hover figure img {
  transform: scale(1.16);
}

nav .c-aboutOrg ul li a:hover figcaption {
	color: #fff;
}





/* --- OL（左端にボーダーのメニュー） --- */
nav .c-aboutOrg ol {
	position: relative;
	padding: 0;
	list-style: none;
	padding-left: 20px;
}
/* 疑似要素でボーダーを引く */
nav .c-aboutOrg ol::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 473px; /* 縦いっぱいに伸ばす 可変 ------------------------------- */
	background-color: #0032a0;
}

nav .c-aboutOrg ol li {
  padding: 12px 16px;
}

nav .c-aboutOrg ol li a {
	display: block;
	text-align: left;
	color: #0032a0;
	
	font-size: 22px;
	line-height: 44px;
	font-weight: bold;
	
	transition: color 0.3s ease-in-out;
	cursor: pointer;
	text-decoration: none;
}
nav .c-aboutOrg ol li a::after {
	content: "→";
	display: inline-block;
	padding-left: 1.0em; /* 横サイズ 可変 ------------------------------- */
}

nav .c-aboutOrg ol li a:hover {
	text-decoration: none;
	color: #fff;
}





/* --- DL（背景青のボタン型） --- */
nav .c-aboutOrg dl {
	width: 390px;
	margin-left: 150px; /* 横サイズ 可変 ------------------------------- */
}

nav .c-aboutOrg dl dd {
	margin: 0;
	padding: 0;
}

nav .c-aboutOrg dl div.p-classNKchannel a {
	position: relative;
	display: block;
	padding: 2px 0 12px 0;
	font-size: 24px;
	line-height: 2.0em;
	color: #fff;
	text-align: center;
	
	text-decoration: none;
	padding-left: 2.0em;
}
nav .c-aboutOrg dl div.p-classNKchannel a::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 45px;
	height: 36px;
	
	background-image: url("../../common_image/header/youtubeLogo_30x24.svg");
	background-size: 36px 45px;
	background-repeat: no-repeat;
	background-position: 0 0;
	top: 8px;
	left: 8px;
}
nav .c-aboutOrg dl div.p-classNKchannel a::after {
	content: "→";
	display: inline-block;
	padding-left: 1.0em;
}

nav .c-aboutOrg dl div.p-classNKchannel a:hover {
  /* background-color: #ddeef2; */
}

nav .c-aboutOrg dl div.p-classNKchannel {
	width: 320px;
	background-color: #0065B4; /* 青い背景 */
	padding: 25px 35px 5px 35px;
	border-radius: 8px;
	color: white;
	
	margin-bottom: 22px;
}

/* ボタン全体のスタイル */
nav .c-aboutOrg dl a.p-recruitment {
	display: flex; /* 横並びにする */
	align-items: center; /* 縦方向の中央揃え */
	justify-content: flex-start; /* 左寄せ */
	width: 350px;
	background-color: #0065B4; /* 青い背景 */
	padding: 15px 20px; /* 余白を調整 */
	border-radius: 8px;
	color: white;
	text-decoration: none; /* リンクの下線を消す */
	gap: 12px; /* アイコンとテキストの間隔 */
}

/* 左端のアイコン */
nav .c-aboutOrg dl a.p-recruitment::before {
	content: "";
	width: 50px; /* アイコンの幅 */
	height: 30px; /* アイコンの高さ */
	background-image: url("../../common_image/header/icon-recruitment_30x50.svg");
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
	flex-shrink: 0; /* サイズを縮めない */
}

/* 採用情報のタイトル */
nav .c-aboutOrg dl a.p-recruitment span:first-of-type {
	font-size: 24px; /* 通常のフォントサイズ */
	white-space: nowrap; /* 1行に収める */
}

/* サブテキスト（2行表示） */
nav .c-aboutOrg dl a.p-recruitment span:last-of-type {
	font-size: 14px; /* フォントサイズを小さく */
	line-height: 1.3em; /* 行間を少し広めに */
	text-align: left;
	flex-grow: 1; /* 残りの幅を占める */
}


/* 全体の幅調整 */
@media screen and (max-width:1800px) {
	nav .c-aboutOrg dl { margin-left: 100px;}
}
@media screen and (max-width:1700px) {
	nav .c-aboutOrg dl { margin-left: 0px;}
}
@media screen and (max-width:1600px) {
	nav .c-aboutOrg ul {
		width: 446px;
	}
	nav .c-aboutOrg ul li a figure {
		width: 213px; /* 固定サイズ */
		height: 123px; /* 固定サイズ */
	}
	
	nav .c-aboutOrg ol::before {
		height: calc(359px + 21px);
	}
}
@media screen and (max-width:1380px) {
	nav .c-aboutOrg ul {
		width: 346px;
	}
	nav .c-aboutOrg ul li a figure {
		width: 163px; /* 固定サイズ */
		height: 94px; /* 固定サイズ */
	}
	
	nav .c-aboutOrg ol li a::after {
		padding-left: 0;
	}
}