/* HSE Management System Assessment
 * Page namespace: .p-auth-hse
 * Scope only: /hp/ja/authentication/hse/
 */

.p-auth-hse {
	--hse-blue: #0065b4;
	--hse-blue-dark: #004b87;
	--hse-blue-soft: #eef6fb;
	--hse-border: #d6e1ea;
}

/* ==========================================================================
   HSE Hero
   ClassNK common c-hero / c-hero__title is used.
   Because this page has no hero image, only the section height and blank
   background are supplied here. Title position, blue panel and typography
   remain controlled by the common CSS.
   ========================================================================== */
.p-auth-hse .p-auth-hse-hero {
	min-height: 180px;
	display: flex;
	align-items: center;
	background: #eef3f7;
}

.p-auth-hse .p-auth-hse-hero .c-hero__title h1 {
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
}

@media screen and (max-width: 767px) {
	.p-auth-hse .p-auth-hse-hero {
		min-height: 120px;
	}

	.p-auth-hse .p-auth-hse-hero .c-hero__title h1 {
		white-space: normal;
		overflow-wrap: break-word;
		word-break: normal;
	}
}


/* On-page navigation: same interaction pattern as e-Certificate */
.p-auth-hse__anchorNav {
	border-bottom: 1px solid var(--hse-border);
	background: #fff;
}

.p-auth-hse__anchorNav .l-container {
	padding-top: 20px;
	padding-bottom: 20px;
}

.p-auth-hse__anchorNavTitle {
	margin: 0 0 12px;
	font-weight: 700;
}

.p-auth-hse__anchorNavList {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-auth-hse__anchorNavList a {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--hse-border);
	background: #fff;
	color: var(--hse-blue-dark);
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	text-decoration: none;
}

.p-auth-hse__anchorNavList a:hover,
.p-auth-hse__anchorNavList a:focus-visible {
	border-color: var(--hse-blue);
	background: var(--hse-blue-soft);
}

.p-auth-hse__sectionAnchor {
	scroll-margin-top: 120px;
}

.p-auth-hse__subheading {
	margin-top: 40px;
}

.p-auth-hse__documentList {
	margin-top: 12px;
}

/* Long tables remain structurally valid and scroll only when needed. */
.p-auth-hse__tableScroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.p-auth-hse__tableScroll:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.p-auth-hse__seminarTable {
	min-width: 680px;
}

.p-auth-hse__seminarTable td:first-child {
	width: 32%;
}

.p-auth-hse__note {
	font-size: 0.94em;
}

.p-auth-hse__applicationBox {
	margin-top: 24px;
	padding: 24px;
}

.p-auth-hse__updated {
	margin-bottom: 10px;
	text-align: right;
}

.p-auth-hse__organizationTable {
	min-width: 1180px;
}

.p-auth-hse__organizationTable caption {
	padding: 12px 16px;
	background: #394b59;
	color: #fff;
	font-weight: 700;
	text-align: left;
}

.p-auth-hse__organizationTable td,
.p-auth-hse__organizationTable th {
	vertical-align: top;
}

/* Keep organization names and certificate numbers visually scannable. */
.p-auth-hse__organizationTable td:nth-child(2) {
	font-weight: 700;
}

.p-auth-hse__organizationTable td:nth-child(6),
.p-auth-hse__organizationTable td:nth-child(7) {
	white-space: nowrap;
}

.p-auth-hse__contactBox > :first-child {
	margin-top: 0;
}

.p-auth-hse__contactBox > :last-child {
	margin-bottom: 0;
}

.p-auth-hse__contactName {
	font-weight: 700;
}

.p-auth-hse__contactBox address {
	margin: 12px 0 18px;
	font-style: normal;
}

.p-auth-hse__contactList {
	margin: 0;
}

.p-auth-hse__contactList > div {
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr);
	gap: 8px 16px;
	padding: 7px 0;
}

.p-auth-hse__contactList dt {
	font-weight: 700;
}

.p-auth-hse__contactList dd {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

@media screen and (max-width: 1023px) {
	.p-auth-hse__anchorNavList {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (max-width: 767px) {
	.p-auth-hse__anchorNav .l-container {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.p-auth-hse__anchorNavList {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-auth-hse__anchorNavList a {
		min-height: 44px;
		padding: 8px;
		font-size: .9rem;
	}

	.p-auth-hse__applicationBox {
		padding: 18px;
	}

	.p-auth-hse__updated {
		text-align: left;
	}

	.p-auth-hse__contactList > div {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}