/* =========================================
   SOONESS GROUP — SHARED HEADER NAVIGATION

   フロントページ・下層ページ共通のヘッダーナビ。
   もとは固定ページ「ホーム」(ID 7) の本文に
   <style> で埋め込まれていたものをテーマへ移設した。
   本文側の <style> は削除済み（二重定義を避けるため）。
========================================= */

/* =========================================
   SOONESS GROUP
   HEADER NAVIGATION
========================================= */


/* =========================================
   DESKTOP NAV
========================================= */

.sg-header .sg-nav.sg-nav-new {
	/*
	 * 通常メニューの下線を
	 * ナビゲーション下端から何px上げるか
	 *
	 * DROPDOWNも同じ値を使用するため、
	 * この数値だけで両方の高さを調整可能
	 */
	--sg-nav-line-offset: 17px;

	display: flex;

	align-items: center;
	justify-content: flex-end;

	gap: clamp(16px, 2vw, 32px);
}


/* =========================================
   NORMAL NAV ITEM
========================================= */

.sg-header .sg-nav-new .sg-nav-item {
	position: relative;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: flex-start;

	gap: 0;

	min-width: 80px;

	padding: 10px 0 41.5px;

	color: inherit;

	text-align: center;
	text-decoration: none;

	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}


/* =========================================
   ENGLISH
========================================= */

.sg-header .sg-nav-new .sg-nav-en {
	display: block;

	width: 100%;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;

	letter-spacing: 0.08em;

	text-align: center;

	white-space: nowrap;
}


/* =========================================
   NORMAL NAV HOVER LINE
========================================= */

.sg-header .sg-nav-new .sg-nav-item::after {
	position: absolute;

	right: 0;

	/*
	 * 従来 bottom: 0;
	 * ↓
	 * 8px上へ移動
	 */
	bottom: var(--sg-nav-line-offset);

	left: 0;

	width: 0;
	height: 2px;

	margin: auto;

	background: currentColor;

	content: "";

	transition: width 0.3s ease;
	/* home.css の .sg-nav > a::after が transform: scaleX(0) を当てるため打ち消す */
	transform: none;

}


/* =========================================
   CURRENT
========================================= */

.sg-header .sg-nav-new .sg-nav-item.is-current::after {
	width: 100%;
}


/* =========================================
   OUR WORK WRAPPER
========================================= */

.sg-header .sg-nav-dropdown {
	position: relative;

	display: flex;

	align-items: flex-start;
	justify-content: center;

	min-width: 80px;

	margin: 0;
	padding: 0;
}


/* =========================================
   OUR WORK
========================================= */

.sg-header .sg-nav-dropdown > .sg-nav-work {
	position: relative;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: flex-start;

	gap: 0;

	min-width: 80px;

	margin: 0;

	padding: 10px 0 41.5px;

	color: inherit;

	text-align: center;
	text-decoration: none;

	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}


/* OUR WORKには下線を作らない */

.sg-header .sg-nav-dropdown > .sg-nav-work::before,
.sg-header .sg-nav-dropdown > .sg-nav-work::after {
	content: none;

	display: none;
}


/* =========================================
   DROPDOWN MENU
========================================= */

.sg-header .sg-nav-dropdown-menu {
	position: absolute;

	/*
	 * 通常メニューの下線と
	 * 同じ高さからプルダウンを開始
	 */
	top: calc(100% - var(--sg-nav-line-offset));

	/*
	 * OUR WORK中央より右へ90px
	 */
	left: calc(50% + 90px);

	z-index: 9999;

	width: 285px;

	margin: 0;

	padding: 10px 12px;

	box-sizing: border-box;

	border-top: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.55);
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
	border-left: 1px solid rgba(255, 255, 255, 0.55);

	background: rgba(255, 255, 255, 0.92);

	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	box-shadow:
		0 18px 45px rgba(11, 35, 55, 0.14);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform:
		translateX(-50%)
		translateY(0);

	transition:
		opacity 0.22s ease,
		visibility 0.22s ease;
}


/* プルダウン上部の疑似要素は使用しない */

.sg-header .sg-nav-dropdown-menu::before,
.sg-header .sg-nav-dropdown-menu::after {
	content: none;

	display: none;
}


/* =========================================
   DROPDOWN OPEN
========================================= */

.sg-header .sg-nav-dropdown:hover > .sg-nav-dropdown-menu,
.sg-header .sg-nav-dropdown:focus-within > .sg-nav-dropdown-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* =========================================
   BUSINESS ITEM
========================================= */

.sg-header .sg-nav-business {
	--sg-business-color: #17324d;

	display: grid;

	grid-template-columns:
		8px
		minmax(0, 1fr)
		auto;

	align-items: center;

	column-gap: 13px;

	min-height: 56px;

	padding: 0 9px;

	box-sizing: border-box;

	border-bottom: 1px solid rgba(20, 45, 65, 0.09);

	color: #17324d;

	text-decoration: none;

	transition:
		background-color 0.2s ease;
}


.sg-header .sg-nav-business:last-child {
	border-bottom: 0;
}


/* =========================================
   BUSINESS DOT
========================================= */

.sg-header .sg-nav-business-dot {
	display: block;

	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: var(--sg-business-color);

	justify-self: start;
}


/* =========================================
   BUSINESS JAPANESE
========================================= */

.sg-header .sg-nav-business-ja {
	display: block;

	min-width: 0;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;

	letter-spacing: 0.04em;

	color: #17324d;

	text-align: left;

	white-space: nowrap;
}


/* =========================================
   BUSINESS ENGLISH
========================================= */

.sg-header .sg-nav-business-en {
	display: block;

	justify-self: end;

	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;

	letter-spacing: 0.12em;

	color: rgba(23, 50, 77, 0.46);

	text-align: right;

	white-space: nowrap;
}


/* =========================================
   BUSINESS COLORS
========================================= */

.sg-header .sg-nav-business--welfare {
	--sg-business-color: #d33488;
}


.sg-header .sg-nav-business--housing {
	--sg-business-color: #2f7844;
}


.sg-header .sg-nav-business--technology {
	--sg-business-color: #2f68cf;
}


.sg-header .sg-nav-business--green {
	--sg-business-color: #48a53e;
}


.sg-header .sg-nav-business--souvenir {
	--sg-business-color: #bd8b40;
}


/* =========================================
   HOVER
========================================= */

@media (hover: hover) {

	.sg-header .sg-nav-new .sg-nav-item:hover {
		opacity: 0.72;
	}


	.sg-header .sg-nav-new .sg-nav-item:hover::after {
		width: 100%;
	}


	/* OUR WORKは文字だけ変化 */

	.sg-header .sg-nav-dropdown > .sg-nav-work:hover {
		opacity: 0.72;
	}


	.sg-header .sg-nav-business:hover {
		background: rgba(23, 50, 77, 0.045);
	}


	.sg-header .sg-nav-new .sg-nav-contact:hover {
		opacity: 0.72;
	}

}


/* =========================================
   CONTACT BUTTON
========================================= */

.sg-header .sg-nav-new .sg-nav-contact {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	min-height: 48px;

	padding: 0 20px;

	border: 1px solid currentColor;

	border-radius: 0;

	color: inherit;

	font-size: 12px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.08em;

	text-decoration: none;

	white-space: nowrap;

	transform: translateY(-16px);

	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		opacity 0.25s ease;
}


.sg-header .sg-nav-new .sg-nav-contact span {
	position: static;

	display: inline;

	font-size: 13px;
	line-height: 1;

	transform: none;
}


/* =========================================
   MOBILE MENU
========================================= */

.sg-mobile-menu nav > a {
	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 0;

	text-decoration: none;
}


.sg-mobile-menu nav > a > span {
	display: block;

	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;

	letter-spacing: 0.08em;
}


/* =========================================
   MOBILE OUR WORK
========================================= */

.sg-mobile-work {
	width: 100%;

	margin: 0;
	padding: 0;
}


.sg-mobile-work > summary {
	display: flex;

	align-items: center;
	justify-content: space-between;

	width: 100%;

	margin: 0;

	cursor: pointer;

	list-style: none;
}


.sg-mobile-work > summary::-webkit-details-marker {
	display: none;
}


.sg-mobile-work > summary::marker {
	content: "";
}


.sg-mobile-work > summary > span {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;

	letter-spacing: 0.08em;
}


/* =========================================
   MOBILE PLUS / MINUS
========================================= */

.sg-mobile-work > summary > i {
	position: relative;

	display: block;

	width: 12px;
	height: 12px;

	flex: 0 0 12px;
}


.sg-mobile-work > summary > i::before,
.sg-mobile-work > summary > i::after {
	position: absolute;

	top: 50%;
	left: 50%;

	background: currentColor;

	content: "";

	transform: translate(-50%, -50%);
}


.sg-mobile-work > summary > i::before {
	width: 10px;
	height: 1px;
}


.sg-mobile-work > summary > i::after {
	width: 1px;
	height: 10px;
}


.sg-mobile-work[open] > summary > i::after {
	transform:
		translate(-50%, -50%)
		scaleY(0);
}


/* =========================================
   MOBILE BUSINESS LIST
========================================= */

.sg-mobile-work-menu {
	margin-top: 14px;
	margin-bottom: 8px;

	padding: 5px 0 5px 15px;
}


.sg-mobile-business {
	--sg-business-color: #fff;

	display: grid;

	grid-template-columns: 7px 1fr;

	align-items: center;

	column-gap: 10px;

	min-height: 42px;

	color: inherit;

	text-align: left;

	text-decoration: none;
}


.sg-mobile-business-dot {
	display: block;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: var(--sg-business-color);
}


.sg-mobile-business-name {
	display: block;

	justify-self: start;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;

	letter-spacing: 0.04em;

	text-align: left;

	white-space: nowrap;
}


/* =========================================
   MOBILE BUSINESS COLORS
========================================= */

.sg-mobile-business--welfare {
	--sg-business-color: #d33488;
}


.sg-mobile-business--housing {
	--sg-business-color: #2f7844;
}


.sg-mobile-business--technology {
	--sg-business-color: #2f68cf;
}


.sg-mobile-business--green {
	--sg-business-color: #48a53e;
}


.sg-mobile-business--souvenir {
	--sg-business-color: #bd8b40;
}


/* =========================================
   TABLET
========================================= */

@media screen and (max-width: 1200px) {

	.sg-header .sg-nav.sg-nav-new {
		gap: 14px;
	}


	.sg-header .sg-nav-new .sg-nav-item {
		min-width: 72px;

		padding: 10px 0 40px;
	}


	.sg-header .sg-nav-dropdown {
		min-width: 72px;
	}


	.sg-header .sg-nav-dropdown > .sg-nav-work {
		min-width: 72px;

		padding: 10px 0 40px;
	}


	.sg-header .sg-nav-new .sg-nav-en {
		font-size: 12px;
	}


	.sg-header .sg-nav-new .sg-nav-contact {
		min-height: 44px;

		padding: 0 16px;

		font-size: 11px;

		border-radius: 0;

		transform: translateY(-15px);
	}


	.sg-header .sg-nav-new .sg-nav-contact span {
		position: static;

		font-size: 13px;

		transform: none;
	}


	.sg-header .sg-nav-dropdown-menu {
		top: calc(100% - var(--sg-nav-line-offset));

		left: calc(50% + 90px);

		width: 275px;
	}


	.sg-header .sg-nav-business {
		column-gap: 12px;

		min-height: 54px;

		padding: 0 8px;
	}


	.sg-header .sg-nav-business-ja {
		font-size: 13px;
	}


	.sg-header .sg-nav-business-en {
		font-size: 9px;
	}

}


/* =========================================
   MOBILE BREAKPOINT

   home.css は 920px でモバイルへ切り替えるが、
   .sg-header .sg-nav.sg-nav-new (詳細度 0,3,0) が
   .sg-nav (0,1,0) に勝つため、旧 800px 指定では
   801〜920px で PC ナビとモバイルナビが同時表示されていた。
   内部ページ (internal.css 980px) に合わせて一本化する。
========================================= */

@media screen and (max-width: 980px) {

	.sg-header .sg-nav.sg-nav-new {
		display: none;
	}

	.sg-header .sg-mobile-menu {
		display: block;
	}


	/*
	 * 見た目の定義は home.css の @media (max-width: 920px) にしか無いため、
	 * 921〜980px では「表示はされるが完全に無スタイル」になっていた。
	 * .sg-header を前置して同じ値を再宣言し、帯全体を埋める。
	 */

	.sg-header .sg-mobile-menu > summary {
		display: flex;

		width: 80px;
		height: 42px;

		align-items: center;
		justify-content: space-between;

		cursor: pointer;

		font-size: 10px;
		font-weight: 750;

		letter-spacing: 0.15em;

		list-style: none;
	}

	.sg-header .sg-mobile-menu > summary::-webkit-details-marker {
		display: none;
	}

	.sg-header .sg-mobile-menu > summary i,
	.sg-header .sg-mobile-menu > summary i::before {
		display: block;

		width: 22px;
		height: 1px;

		background: currentColor;

		content: "";
	}

	.sg-header .sg-mobile-menu > summary i::before {
		transform: translateY(6px);
	}

	.sg-header .sg-mobile-menu nav {
		position: absolute;

		/* ヘッダー高が 104px/82px と変わるため追従させる */
		top: 100%;
		right: 24px;

		display: grid;

		width: min(330px, calc(100vw - 48px));

		padding: 18px 22px;

		/* --sg-ai-deep は .sg-home にしか定義がないのでフォールバックを与える */
		color: var(--sg-ai-deep, #061f3d);

		background: rgba(250, 252, 251, 0.97);
		box-shadow: 0 24px 60px rgba(3, 24, 48, 0.18);
	}

	.sg-header .sg-mobile-menu nav a {
		padding: 13px 2px;

		border-bottom: 1px solid rgba(12, 49, 88, 0.1);

		font-size: 12px;

		letter-spacing: 0.08em;
	}


	/*
	 * パネル内のアコーディオン見出し（事業概要）は、
	 * どちらのバリアントでも明るいパネルの上に載る。
	 * home.css:1470 の color:#fff が効くと白背景に白文字になる。
	 */

	.sg-header .sg-mobile-menu nav summary {
		color: var(--sg-ai-deep, #061f3d);
	}

	.sg-header--solid .sg-mobile-menu nav summary {
		color: var(--iv-ink, #072d55);
	}

}

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

	.sg-header .sg-mobile-menu {
		display: none;
	}

}


/* =========================================
   VARIANTS

   --overlay : フロントページ。ヒーロー写真に重なる（白文字）
   --solid   : 下層ページ。明るい背景の上（濃色文字）

   レイアウトは共通。配色のみここで分岐させる。
========================================= */


/* ---- overlay（ヒーロー重ね） ---- */

.sg-header--overlay {
	color: #fff;
}

.sg-header--overlay .sg-header-brand img {
	filter: brightness(0) invert(1);
}


/* ---- solid（下層ページ） ---- */

.sg-header--solid {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;

	width: 100%;

	color: var(--iv-ink, #072d55);

	border-bottom: 1px solid rgba(9, 50, 87, 0.13);
	background: rgba(251, 253, 252, 0.76);
	backdrop-filter: blur(18px);

	/* home.css の sgFadeDown は .sg-home 限定の reduced-motion 抑止しか無いため止める */
	animation: none;
}

/* ロゴは濃色版の画像そのもの。白抜きフィルタを解除する */
.sg-header--solid .sg-header-brand img {
	filter: none;
}

.sg-header--solid .sg-nav-new .sg-nav-contact {
	color: #fff;

	border: 1px solid var(--iv-ai, #0d3a69);
	background: var(--iv-ai, #0d3a69);
	backdrop-filter: none;
}

.sg-header--solid .sg-nav-new .sg-nav-contact:hover,
.sg-header--solid .sg-nav-new .sg-nav-contact:focus-visible {
	color: #fff;

	background: var(--iv-ink-deep, #031d38);

	transform: translateY(-16px);
}

.sg-header--solid .sg-nav-dropdown-menu {
	/* border-top は overlay 側で意図的に 0 にしてあるのでショートハンドを使わない */
	border-right: 1px solid rgba(9, 50, 87, 0.13);
	border-bottom: 1px solid rgba(9, 50, 87, 0.13);
	border-left: 1px solid rgba(9, 50, 87, 0.13);
	background: #fff;
	box-shadow: 0 18px 45px rgba(11, 35, 55, 0.18);
	backdrop-filter: none;
}

.sg-header--solid .sg-mobile-menu > summary {
	color: var(--iv-ink, #072d55);
}


/*
 * home.css:1488 の `.sg-mobile-menu summary i { background: currentColor }` は
 * 入れ子アコーディオンの 12x12 アイコンにも当たり、
 * ＋/− ではなく塗りつぶしの四角が描かれてしまう。
 */
.sg-header .sg-mobile-work > summary > i {
	background: none;
}


/*
 * home.css:317 の :hover は background を #fff にするが、
 * 抽出CSSの `.sg-header .sg-nav-new .sg-nav-contact { color: inherit }` (0,3,0) が
 * home.css の :hover (0,2,0) に勝つため、白地に白文字になっていた。
 */
.sg-header--overlay .sg-nav-new .sg-nav-contact:hover,
.sg-header--overlay .sg-nav-new .sg-nav-contact:focus-visible {
	color: var(--sg-ai-deep, #061f3d);
}


/* 事業概要トップ行は事業カラーを持たないので既定の #fff だとドットが見えない */
.sg-header .sg-mobile-business--index {
	--sg-business-color: #17324d;
}


/* =========================================
   DROPDOWN — タッチ / キーボード対応

   CSS の :hover / :focus-within は残したまま、
   JS が付与する .is-open でも開くようにする。
========================================= */

.sg-header .sg-nav-dropdown.is-open > .sg-nav-dropdown-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* Escape で閉じたあとは、ポインタが乗っていても開き直さない (WCAG 1.4.13) */
.sg-header .sg-nav-dropdown.is-dismissed:hover > .sg-nav-dropdown-menu,
.sg-header .sg-nav-dropdown.is-dismissed:focus-within > .sg-nav-dropdown-menu {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

	.sg-header {
		animation: none;
	}

	.sg-header .sg-nav-new .sg-nav-item::after,
	.sg-header .sg-nav-dropdown-menu {
		transition: none;
	}

}