@charset "utf-8";
/* CSS Document */

/*==========================================================================
1. 統合・基本リセット (common.css / common_add.css 由来)
==========================================================================*/

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden; /* 横スクロール防止 */
	background: #fff;
	color: #333;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 14px;
	line-height: 1.7; /* 行間を適切に調整 */
	letter-spacing: 0.03em; /* 文字間を程よく詰める */
}

#wrapper {
	width: 100%;
	min-width: 0 !important; /* 固定幅1160pxを解除してレスポンシブ化 */
}

a { text-decoration: none; color: inherit; transition: 0.3s; }

ul { list-style: none; margin: 0; padding: 0; }

img { max-width: 100%; height: auto; vertical-align: top; }


/*==========================================================================
2. ヘッダー・レイアウト調整 
==========================================================================*/

#global-header {
	width: 100%;
	padding: 15px 5%; /* 上下を少し詰め、横に余白 */
	display: flex;
	justify-content: flex-start; /* 左寄せ */
	align-items: center;
	background: #fff;
	border-bottom: 1px solid #eee;
}

#header-left h1 {
	margin: 0;
	line-height: 0; /* 画像の下にできる謎の隙間を消す */
}

/* ロゴ画像サイズ調整 */
.header-logo {
	width: 180px;
	height: auto;
	display: block;
	transition: opacity 0.3s;
}

.header-logo:hover {
	opacity: 0.7;
}

#main {
	padding-top: 40px;
}

/* スマホ用調整 */
@media screen and (max-width: 480px) {
	.header-logo {
		width: 140px; /* スマホでは少しコンパクトに */
	}
	#global-header {
		padding: 10px 5%;
	}
}

/* ==========================================================================
3. 重要なお知らせ
========================================================================== */

#TOP_NOTICE {
	width: 92%;
	max-width: 850px;
	margin: 0 auto 60px;
}

.notice-box {
	border: 1px solid #333;
	padding: 40px 30px;
	text-align: center;
	background-color: #fcfcfc;
}

.notice-box h2 {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 25px;
	letter-spacing: 0.1em;
}

.notice-box .text {
	display: inline-block;
	text-align: left;
	font-size: 16px;
	line-height: 1.8;
}

/* スマホ用調整 */
@media screen and (max-width: 768px) {
	.notice-box { padding: 25px 15px; }
	.notice-box h2 { font-size: 18px; }
	.notice-box .text { font-size: 14px; }
}

/* ==========================================================================
4. コンテンツ・企業情報 (top.css / about.css 由来)
========================================================================== */
.section-row {
	width: 92%;
	max-width: 960px;
	margin: 0 auto 60px;
}

.sectionhead {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 30px;
	border-left: 5px solid #002e6a;
	padding-left: 15px;
}

.sectionhead span {
	display: block;
	font-size: 12px;
	color: #888;
}

.company-overview dt {
	font-weight: bold;
	padding: 15px 0 5px;
	border-bottom: 1px solid #eee;
}

.company-overview dd {
	padding: 5px 0 15px;
	margin-bottom: 10px;
}

/* スマホ用調整 */
@media screen and (min-width: 769px) {
	.company-overview { display: grid; grid-template-columns: 200px 1fr; }
	.company-overview dt { border-bottom: none; padding: 20px 0; }
	.company-overview dd { border-bottom: 1px solid #eee; padding: 20px 0; }
}

/* ==========================================================================
5. 関連会社リスト
========================================================================== */

.fukidashi {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	width: 100%;
	max-width: 900px;
	margin: 40px auto;
	padding: 0;
	list-style: none;
	letter-spacing: normal !important;
}

.fukidashi li {
	width: 100%;
	text-align: center;
}

.logo-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 10px 0;
	height: 140px; 
	cursor: default; /* ロゴ自体はクリック不可 */
}

.fukidashi figure {
	margin: 0;
	width: 100%;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fukidashi figure img {
	max-width: 75%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Goody Pointロゴの拡大（PC版 1.5 / スマホ版 1.35） */
.fukidashi li:last-child figure img {
	max-width: 95%;
	transform: scale(1.5);
}

/* ポップアップ詳細 */
.fukidashi figcaption {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(5px);
	width: 220px;
	padding: 12px;
	background: rgba(0, 30, 100, 0.75);
	color: #fff;
	font-size: 11px;
	line-height: 1.5;
	text-align: left;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 100;
	pointer-events: auto !important; /* ボタンを押せるようにする */
}

/* 吹き出しの三角 */
.fukidashi figcaption::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	border: 8px solid transparent;
	border-top-color: rgba(0, 30, 100, 0.75);
}

/* 社名の下のライン */
.fukidashi figcaption p strong {
	display: block;
	padding: 0 0 8px;
	text-align: center;
	font-size: 13px;
	color: #fff;
	position: relative;
}

.fukidashi figcaption p strong::after {
	display: block;
	content: "";
	width: 15px;
	height: 4px;
	background: #99a3d0;
	margin: 8px auto 5px;
}

/* 「もっと見る」ボタン（リンク） */
.fukidashi figcaption p span {
	display: block;
	margin-top: 10px;
	background: #0f218b;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	width: 100%;
	box-sizing: border-box;
	font-size: 10px;
	border-radius: 2px;
	transition: background 0.3s;
}

.fukidashi figcaption p span:hover {
	background: #1a2fb0;
}

/* ホバー/アクティブ時にポップアップを表示 */
.fukidashi li:hover figcaption,
.fukidashi li:active figcaption {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* スマホ用調整 */
@media screen and (max-width: 42em) {
	/* リスト全体の調整 */
	.fukidashi {
		grid-template-columns: repeat(2, 1fr);
		max-width: 450px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/* PC用のホバー効果をスマホでは無効化 */
	.fukidashi li:hover figcaption {
		opacity: 0 !important;
		visibility: hidden !important;
	}

	/* ロゴの拡大率（スマホ用） */
	.fukidashi li:last-child figure img {
		transform: scale(1.35) !important;
	}

	/* 吹き出し基本 */
	.fukidashi figcaption {
		width: 180px;
		display: block !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	/* 吹き出しの三角 */
	.fukidashi figcaption::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -8px;
		border: 8px solid transparent;
		border-top-color: rgba(0, 30, 100, 0.75);
	}

	/* iPhone Safari挙動対策 */
	.fukidashi li .logo-item {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		outline: none;
	}

	.fukidashi li .logo-item:active figcaption,
	.fukidashi li:focus-within figcaption {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateX(-50%) translateY(0);
		pointer-events: auto !important;
	}
}

/* ==========================================================================
6. フッター
========================================================================== */
#global-footer {
	background: #f8f8f8;
	padding: 40px 5%;
	text-align: center;
	font-size: 12px;
}

.footer-navigation { margin-bottom: 20px; }

.footer-navigation li { display: inline-block; margin: 0 10px; }