@charset "utf-8";

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

Name: megamenu.css

Description: グローバルナビのメガメニュー（クリックで開閉）
             XD「トップページ_PC – 1〜4」準拠

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

/* SPメニュー（common2.js が #GlobalNaviMenu を複製して作る #SpGlobalNavi）では非表示 */
.tp-mega {
	display: none;
}

/* ナビ4項目（会社を知る・製品を知る・取り組みを知る・採用情報）の文字を太字に */
#GlobalNaviMenu > li.tp-has-mega > a,
#GlobalNaviMenu > li.tp-has-mega > button > span {
	font-weight: 700;
}

/* ---------- SP：ボタンを押すとリンク一覧を開閉（アコーディオン） ----------
   common2.js がボタンのクリックで .is-open を付け外しする */
/* 開閉のアニメーション（するすると開く）は megamenu.js で行う */

/* 開閉アイコンを「＋／－」から矢印（閉：下向き、開：上向き）に変更。矢印の色・大きさは PC のメニューの赤い矢印に合わせる
   common2.css は ::before（縦棒）と ::after（横棒）で「＋」を描いているため、
   新しいナビの項目に限って ::before を消し、::after を矢印の形に描き直す */
#SpGlobalNavi > li.tp-has-mega:not(.Current) > button > span::before,
#SpGlobalNavi > li.tp-has-mega.Current > button > span > strong::before,
#SpGlobalNavi > li.tp-has-mega.Current > button > span > em::before {
	display: none;
}

#SpGlobalNavi > li.tp-has-mega:not(.Current) > button > span::after,
#SpGlobalNavi > li.tp-has-mega.Current > button > span > strong::after,
#SpGlobalNavi > li.tp-has-mega.Current > button > span > em::after {
	right: 22px;
	top: 50%;
	width: 9px;
	height: 9px;
	background-color: transparent;
	border-right: 2px solid #cc0000;
	border-bottom: 2px solid #cc0000;
	transform: translateY(-75%) rotate(45deg);
	transition: transform .3s;
}

/* 開いているときは上向き */
#SpGlobalNavi > li.tp-has-mega:not(.Current) > button.is-open > span::after,
#SpGlobalNavi > li.tp-has-mega.Current > button.is-open > span > strong::after,
#SpGlobalNavi > li.tp-has-mega.Current > button.is-open > span > em::after {
	transform: translateY(-25%) rotate(-135deg);
}

/* 項目を押しても赤くしない（common2.css の「#SpGlobalNavi button:hover / :focus > span」の赤背景・白文字を打ち消す） */
#SpGlobalNavi > li.tp-has-mega:not(.Current) > button:hover > span,
#SpGlobalNavi > li.tp-has-mega:not(.Current) > button:focus > span,
#SpGlobalNavi > li.tp-has-mega.Current > button:hover > span:has(> em),
#SpGlobalNavi > li.tp-has-mega.Current > button:focus > span:has(> em) {
	color: #0c0c0c;
	background-color: #f4f4f4;
}

#SpGlobalNavi > li.tp-has-mega.Current > button:hover > span > em,
#SpGlobalNavi > li.tp-has-mega.Current > button:focus > span > em {
	color: #0c0c0c;
}

/* 今いるページの項目も赤くしない（common2.css の li.Current の strong の赤背景・白文字を打ち消す）。太字は残す */
#SpGlobalNavi > li.tp-has-mega.Current > button > span > strong,
#SpGlobalNavi > li.tp-has-mega.Current > button:hover > span > strong,
#SpGlobalNavi > li.tp-has-mega.Current > button:focus > span > strong {
	color: #0c0c0c;
	background-color: #f4f4f4;
}

#SpGlobalNavi > li.tp-has-mega.Current > button:hover > span:has(> strong),
#SpGlobalNavi > li.tp-has-mega.Current > button:focus > span:has(> strong) {
	background-color: #f4f4f4;
}

#SpGlobalNavi .tp-mega .tp-mega-list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 2段目のリンク（common2.css の「#SpGlobalNavi > li > ul > li > a」に合わせる）
   ※ リスト内のリンクは common2.css の「#SpGlobalNavi li:not(.Current) > a」（字下げ16px）より優先させる */
#SpGlobalNavi .tp-mega a,
#SpGlobalNavi .tp-mega li:not(.Current) > a {
	display: block;
	position: relative;
	box-sizing: border-box;
	min-height: 60px;
	padding: 18.5px 48px 18.5px 32px;
	background-color: #d9d9d9;
	color: #0c0c0c;
	font-size: 90%;
	line-height: 1.6;
	text-decoration: none;
}

/* 中途採用ページの base.css が「#SpGlobalNavi li:not(.Current) > a」に !important で
   高さ・余白を詰める指定をしているため、メニュー内のリンクはより高い優先度で戻す */
#SpGlobalNavi .tp-mega li:not(.Current) > a {
	min-height: 60px !important;
	padding-top: 18.5px !important;
	padding-bottom: 18.5px !important;
}

#SpGlobalNavi .tp-mega a::before {
	content: none;
}

/* リンクの右向き矢印は出さない（開閉できる行の下向き・上向きの矢印だけを残す）
   メニュー下部の「English」「お問い合わせ」（#SpSupportNavi）の右向き矢印も同じく消す
   ※ common2.css の「#SpGlobalNavi li:not(.Current) > a::after」などより優先させるため、id を重ねている */
#SpGlobalNavi#SpGlobalNavi .tp-mega a::after,
#SpMenuModal #SpSupportNavi a::after {
	content: none;
}

#SpGlobalNavi .tp-mega a:hover,
#SpGlobalNavi .tp-mega a:focus {
	color: #fff;
	background-color: #cc0000;
}

/* SP：「会社を知る」の中の「採用情報」バナーは出さない（採用情報は1段目に同じ項目があるため。PC のメニューには出す） */
#SpGlobalNavi .tp-mega a.tp-mega-banner {
	display: none;
}

@media screen and (min-width: 995px) {

	/* 本文の重なり（z-index）より前面に出す
	   ※ 採用ページの base.css が後から「#HeaderArea2 { z-index: 20; }」を指定するため、優先度を上げている */
	html body #HeaderArea2 {
		z-index: 90;
	}

	#HeaderArea2 > .Container {
		position: relative;
	}

	/* メニューを開いている間、ヘッダーより下のページを暗くする幕（参考：日立産機システムのサイト）
	   幕は megamenu.js が追加する。ヘッダー（#HeaderArea1：z-index 80、#HeaderArea2：90）より下、本文より上に置く */
	.tp-mega-backdrop {
		position: fixed;
		inset: 0;
		z-index: 70;
		background: rgba(0, 0, 0, .7);
		opacity: 0;
		visibility: hidden;
		transition: opacity .5s, visibility .5s;
	}

	body.tp-mega-open .tp-mega-backdrop {
		opacity: 1;
		visibility: visible;
	}

	/* ナビ項目：クリックでメニューを開閉する <button>（common/js/megamenu.js が li に .is-open を付け外しする）
	   カーソルを合わせても・クリックしても赤くしない（common2.css の button:hover / :focus / :active の赤背景を打ち消す）。
	   キーボード操作中は、赤背景の代わりに枠線で位置を示す */
	#GlobalNaviMenu > li.tp-has-mega > button:hover,
	#GlobalNaviMenu > li.tp-has-mega > button:focus,
	#GlobalNaviMenu > li.tp-has-mega > button:active {
		color: #0c0c0c;
		background-color: transparent;
	}

	#GlobalNaviMenu > li.tp-has-mega > button:hover > span,
	#GlobalNaviMenu > li.tp-has-mega > button:focus > span,
	#GlobalNaviMenu > li.tp-has-mega > button:active > span {
		color: #0c0c0c;
	}

	#GlobalNaviMenu > li.tp-has-mega > button:focus-visible {
		outline: 2px solid #0c0c0c;
		outline-offset: -2px;
	}

	/* 今いるページの項目も赤くしない（common2.css の li.Current の strong の赤背景・下の三角の画像を打ち消す）。太字は残す */
	#GlobalNaviMenu > li.tp-has-mega.Current > button > span > strong {
		color: #0c0c0c;
		background-color: transparent;
		background-image: none;
	}

	/* メニューが開いている項目は白（白いパネルとつながって見える）
	   今いるページを示す赤（li.Current の strong）も、開いている間は白にする */
	#GlobalNaviMenu > li.tp-has-mega.is-open > button,
	#GlobalNaviMenu > li.tp-has-mega.is-open > button:focus {
		color: #0c0c0c;
		background-color: #fff;
	}

	#GlobalNaviMenu > li.tp-has-mega.is-open > button > span,
	#GlobalNaviMenu > li.tp-has-mega.is-open > button > span > strong,
	#GlobalNaviMenu > li.tp-has-mega.is-open > button > span > em {
		color: #0c0c0c;
		background-color: #fff;
		background-image: none;
	}

	/* カーソルを合わせている間はいつも赤（メニューが開いている項目も）
	   ※ 上の「開いている項目は白」より優先させるため、後ろに置き、同じ強さ以上の指定にしている */
	#GlobalNaviMenu > li.tp-has-mega > button:hover,
	#GlobalNaviMenu > li.tp-has-mega.is-open > button:hover {
		color: #fff;
		background-color: #cc0000;
	}

	#GlobalNaviMenu > li.tp-has-mega > button:hover > span,
	#GlobalNaviMenu > li.tp-has-mega > button:hover > span > strong,
	#GlobalNaviMenu > li.tp-has-mega > button:hover > span > em,
	#GlobalNaviMenu > li.tp-has-mega.is-open > button:hover > span,
	#GlobalNaviMenu > li.tp-has-mega.is-open > button:hover > span > strong,
	#GlobalNaviMenu > li.tp-has-mega.is-open > button:hover > span > em {
		color: #fff;
		background-color: transparent;
	}

	/* ---------- パネル ---------- */
	#GlobalNaviMenu .tp-mega {
		display: block;
		box-sizing: border-box;
		position: absolute;
		z-index: 200;  /* ヘッダー内のローカルナビ（採用ページなど）より手前 */
		top: 100%;
		right: 0;
		padding: 16px 32px 32px;
		background: #fff;
		box-shadow: 0 8px 16px rgba(12, 12, 12, .08);
		font-family: 'Noto Sans JP', sans-serif;
		/* 垂れ幕のアニメーション：見える範囲を上端から下へ広げる（閉じるときは下から上へ巻き上げる）
		   左右・下を少し外側まで広げているのは、パネルの影が切れないようにするため */
		visibility: hidden;
		clip-path: inset(0 -24px 100% -24px);
		transition: clip-path .4s ease-out, visibility .4s;
	}

	/* 開いているときだけ表示（カーソルを合わせただけでは開かない） */
	#GlobalNaviMenu > li.tp-has-mega.is-open > .tp-mega {
		visibility: visible;
		clip-path: inset(0 -24px -32px -24px);
	}

	/* 動きを減らす設定にしている人には、アニメーションなしで表示する */
	@media (prefers-reduced-motion: reduce) {
		#GlobalNaviMenu .tp-mega {
			transition: none;
		}
	}

	/* 幅（XDのパネル幅 - 左右余白64px） */
	#GlobalNaviMenu .tp-mega--corporate  { width: 884px; }
	#GlobalNaviMenu .tp-mega--products   { width: 990px; }  /* XDは964px。「PCS（直流交流交換装置）」が1行に収まるよう広げている */
	#GlobalNaviMenu .tp-mega--initiative { width: 464px; }
	#GlobalNaviMenu .tp-mega--recruit    { width: 854px; }

	/* ---------- リンク共通 ---------- */
	#GlobalNaviMenu .tp-mega a {
		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 34px 0 24px;
		background: #fff;
		color: #222;
		text-decoration: none;
		transition: background-color .3s ease-out, color .3s ease-out, box-shadow .3s ease-out;
	}

	/* ホバー：背景を薄い赤にする（文字は黒、矢印は赤のまま）。採用情報バナーは下の指定で別の動き */
	#GlobalNaviMenu .tp-mega-top:hover,
	#GlobalNaviMenu .tp-mega-top:focus-visible,
	#GlobalNaviMenu .tp-mega-list a:hover,
	#GlobalNaviMenu .tp-mega-list a:focus-visible {
		color: #222;
		background: #fad7d9;
	}

	/* 赤い「>」 */
	#GlobalNaviMenu .tp-mega a::after {
		content: "";
		position: absolute;
		right: 16px;
		top: 50%;
		width: 9px;
		height: 9px;
		border-top: 2px solid #cc0000;
		border-right: 2px solid #cc0000;
		transform: translateY(-50%) rotate(45deg);
	}

	/* 下部バナー：会社を知るの「採用情報」（XD「メガメニューホバー２」） */
	#GlobalNaviMenu .tp-mega a.tp-mega-banner {
		height: 60px;
		margin-top: 24px;
		background: #f4f4f4;
		font-size: 20px;
		font-weight: 700;
	}

	#GlobalNaviMenu .tp-mega a.tp-mega-banner:hover,
	#GlobalNaviMenu .tp-mega a.tp-mega-banner:focus-visible {
		color: #222;
		background: #fff;
		box-shadow: inset 0 0 0 2px #cc0001;
	}

	/* 上段：○○トップ */
	#GlobalNaviMenu .tp-mega-top {
		height: 80px;
		border-bottom: 1px solid #d9d9d9;
		font-size: 24px;
		font-weight: 600;
	}

	/* 下段：項目（列はパネルごとに指定） */
	#GlobalNaviMenu .tp-mega-list {
		display: grid;
		column-gap: 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#GlobalNaviMenu .tp-mega-list li {
		float: none;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #d9d9d9;
	}

	#GlobalNaviMenu .tp-mega-list a {
		height: 60px;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.3;  /* フォントによって収まらない場合は2行に折り返す（60pxに収まる） */
	}

	#GlobalNaviMenu .tp-mega--corporate  .tp-mega-list { grid-template-columns: repeat(3, 260px); }
	#GlobalNaviMenu .tp-mega--products   .tp-mega-list { grid-template-columns: 282px 304px 300px; }
	#GlobalNaviMenu .tp-mega--initiative .tp-mega-list { grid-template-columns: 400px; }
	#GlobalNaviMenu .tp-mega--recruit    .tp-mega-list { grid-template-columns: repeat(3, 250px); }
}

/* 画面幅が狭いPC（〜1300px）では文字を少し小さく */
@media screen and (min-width: 995px) and (max-width: 1300px) {
	#GlobalNaviMenu .tp-mega-top {
		height: 64px;
		font-size: 20px;
	}

	#GlobalNaviMenu .tp-mega-list a,
	#GlobalNaviMenu .tp-mega a.tp-mega-banner {
		height: 52px;
		font-size: 17px;
	}
}


/* ======================================================================
  パンくず（採用情報トップ）を大きく：XD の指定（PC 14px、SP 12px）
  - megamenu.css は複数ページ共通のため、採用情報トップにだけある .recruit-link-list を目印にする
====================================================================== */
body:has(.recruit-link-list) #TopicPath ul li {
	font-size: 14px;
}

/* パンくずの上の余白を詰め、ページの見出しなどを上に寄せる（XD：ヘッダー下端から約 8px、SP 約 4px） */
body:has(.recruit-link-list) #TopicPath ul {
	padding-top: 8px;
}

@media screen and (max-width: 767px) {
	body:has(.recruit-link-list) #TopicPath ul li {
		font-size: 12px;
	}

	body:has(.recruit-link-list) #TopicPath ul {
		padding-top: 4px;
	}
}


/* ======================================================================
  SP：ヘッダーの検索アイコンの左に言語切り替え（EN）アイコンを表示（XD「トップページ_SP」準拠）
  - common2.css は SP で検索以外のアイコンを非表示にしているため、English のリンクだけ表示し直す
    （common2.css の指定は :not(#SupportNaviSearch) で ID 3つ分の優先度があるため、#SupportNavi を重ねて上回る）
====================================================================== */
@media screen and (max-width: 767px) {
	#HeaderArea1 > .Container #SupportNavi#SupportNavi > a[lang="en"] {
		display: flex;
	}

	#HeaderArea1 > .Container #SupportNavi#SupportNavi > a[lang="en"] > img {
		display: block;
		width: 45px;
		height: 90px;
	}

	#HeaderArea1 > .Container #SupportNavi#SupportNavi > a[lang="en"] > span {
		display: none;
	}
}