@charset 'UTF-8';

/**
 * Solutions & Services サブメニュー(ドロワー / メガメニュー内).
 * bundle.css の .grid-nav をベースに、親リンク下の子リンク一覧を装飾.
 */
.grid-nav__sub {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	margin-top: 14px;
}

.grid-nav__sublink {
	color: inherit;
	opacity: 0.72;
	font-size: var(--sws-fs-14);
	line-height: 1.6;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.grid-nav__sublink:hover {
	opacity: 1;
}

@media screen and (max-width: 768px) {
	.grid-nav__sub {
		row-gap: 8px;
		margin-top: 10px;
	}

	.grid-nav__sublink {
		font-size: var(--sws-fs-13);
	}
}

/**
 * Solutions & Services ホバードロップダウン(PC ヘッダー上部 .gnav).
 * 親 .gnav__item にホバー / フォーカスするとパネルを表示.
 */
.gnav__item--has-sub {
	position: relative;
}

.gnav__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 9100;
	display: flex;
	flex-direction: column;
	row-gap: 12px;
	min-width: 200px;
	padding: 18px 22px;
	background-color: var(--sws-color-bg);
	border-radius: 0px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.gnav__item--has-sub:hover .gnav__sub,
.gnav__item--has-sub:focus-within .gnav__sub {
	opacity: 1;
	visibility: visible;
}

.gnav__sublink {
	color: var(--sws-color-3);
	font-size: var(--sws-fs-14);
	font-weight: 400;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
}

.gnav__sublink:hover {
	color: var(--sws-color-1);
}

/**
 * 外部リンク(別サブドメイン・新規タブ)の視覚的表示.
 * target="_blank" のサブリンクにのみ矢印グリフ(↗)を付与(画像アイコン不使用).
 * .gnav__sublink / .grid-nav__sublink の両方(ヘッダー上部・ドロワー)に適用.
 */
.gnav__sublink[target='_blank']::after,
.grid-nav__sublink[target='_blank']::after {
	content: '\2197'; /* ↗ NORTH EAST ARROW */
	display: inline-block;
	margin-left: 4px;
	font-size: 0.85em;
	line-height: 1;
	vertical-align: baseline;
}