/*
 * サイト共通フッター。
 *
 * フッター固有のレイアウト・余白・レスポンシブ・配色はこのファイルで管理する。
 * 矢印付きリンクの操作表現は link-interactions.css へ集約する。
 */

.l-footer {
	--footer-directory-padding-top: 40px;
	--footer-directory-padding-bottom: 48px;
	--footer-section-gap: 24px;
	--footer-column-gap: 48px;
	--footer-content-gap: 24px;
	--footer-wide-content-gap: 28px;
	--footer-industry-column-gap: 34px;
	--footer-link-height: 34px;
	--footer-link-padding-block: 4px;
	--footer-link-padding-inline-start: 20px;
	--footer-industry-link-padding-inline-start: 24px;

	color: var(--color-text);
	background: #222222;
}

/* サイトマップ領域 */
.l-footer__directory {
	padding: var(--footer-directory-padding-top) 0 var(--footer-directory-padding-bottom);
	background: var(--color-background-subtle);
	border-top: 1px solid var(--color-border);
}

.l-footer__directory-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--footer-section-gap) var(--footer-column-gap);
}

.l-footer__group {
	min-width: 0;
}

.l-footer__group--wide {
	grid-column: 1 / -1;
}

.l-footer__group summary {
	position: relative;
	display: grid;
	gap: 1px;
	min-height: 0;
	padding: 0 0 12px;
	color: var(--color-primary-dark);
	border-bottom: 1px solid var(--color-primary-dark);
	list-style: none;
	pointer-events: none;
}

.l-footer__group summary::-webkit-details-marker {
	display: none;
}

.l-footer__group summary span {
	font-size: 0.94rem;
	font-weight: 700;
}

/*
 * サービス・課題・業種はPCでは見出し自体を一覧ページへのリンクにする。
 * summary 内にはリンクを入れず、スマートフォンでは開閉操作専用に戻す。
 */
.l-footer__group-heading-link {
	display: flex;
	align-items: center;
	padding: 0 0 12px;
	color: var(--color-primary-dark);
	border-bottom: 1px solid var(--color-primary-dark);
	font-size: 0.94rem;
	font-weight: 700;
	text-decoration: none;
}

.l-footer__group-heading-link:hover,
.l-footer__group-heading-link:focus-visible {
	color: var(--color-primary-hover);
	text-decoration: none;
}

.l-footer__group > .l-footer__group-summary--mobile-only {
	display: none;
}

/* 通常リンク一覧 */
.l-footer__links {
	display: grid;
	margin-top: var(--footer-content-gap);
}

.l-footer__group--wide .l-footer__links {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--footer-industry-column-gap);
	margin-top: var(--footer-wide-content-gap);
}

.l-footer__group--problems .l-footer__links {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: var(--footer-industry-column-gap);
}

.l-footer__links a,
.l-footer__industry-group a {
	display: flex;
	align-items: center;
	padding-right: 4px;
	color: #33434d;
	font-weight: 500;
}

.l-footer__links a {
	min-height: var(--footer-link-height);
	padding-top: var(--footer-link-padding-block);
	padding-bottom: var(--footer-link-padding-block);
	padding-left: var(--footer-link-padding-inline-start);
	font-size: 0.76rem;
	line-height: 1.45;
}

/* 業種別リンク一覧 */
.l-footer__industry-directory {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--footer-section-gap) var(--footer-industry-column-gap);
	padding-top: var(--footer-content-gap);
}

.l-footer__industry-group h3 {
	padding-bottom: 7px;
	margin: 0 0 var(--footer-content-gap);
	color: var(--color-primary-dark);
	border-bottom: 1px solid var(--color-border);
	font-size: 0.78rem;
	font-weight: 700;
}

.l-footer__industry-group > div {
	display: grid;
}

.l-footer__industry-group a {
	min-height: 35px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: var(--footer-industry-link-padding-inline-start);
	font-size: 0.72rem;
}

/* 最下段 */
.l-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 76px;
	gap: 32px;
	color: #ffffff;
	border-top: 1px solid rgb(255 255 255 / 24%);
	font-size: 0.75rem;
}

.l-footer__bottom-left {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 28px;
}

.l-footer__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.l-footer__logo img {
	width: 132px;
	height: auto;
}

.l-footer__copyright {
	margin-left: auto;
	color: #ffffff;
	font-weight: 500;
	white-space: nowrap;
}

.l-footer__bottom nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px 22px;
}

.l-footer__bottom a,
.l-footer__bottom a:hover,
.l-footer__bottom a:focus-visible {
	color: #ffffff;
	text-decoration: none;
}

.l-footer__bottom a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 500;
}

.l-footer__bottom .c-link-underline {
	padding-bottom: 0;
}

.l-footer__bottom .c-external-link-icon,
.l-footer__bottom .is-external-link:hover .c-external-link-icon,
.l-footer__bottom .is-external-link:focus-visible .c-external-link-icon {
	background-color: #ffffff;
}

/* タブレット */
@media (max-width: 1120px) {
	.l-footer__directory-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.l-footer__group--wide {
		grid-column: 1 / -1;
	}

	.l-footer__group--wide .l-footer__links,
	.l-footer__group--problems .l-footer__links,
	.l-footer__industry-directory {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* スマートフォンは閉じた状態を初期表示するアコーディオンとして表示する。 */
@media (max-width: 768px) {
	.l-footer {
		--footer-directory-padding-top: 46px;
		--footer-link-padding-inline-start: 24px;
	}

	.l-footer__directory-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.l-footer__group--wide {
		grid-column: auto;
	}

	.l-footer__group-heading-link {
		display: none;
	}

	.l-footer__group > .l-footer__group-summary--mobile-only {
		display: flex;
	}

	.l-footer__group summary {
		display: flex;
		align-items: center;
		min-height: 72px;
		padding: 0 44px 0 0;
		color: var(--color-text);
		border-bottom: 1px solid var(--color-border);
		cursor: pointer;
		line-height: 1.5;
		pointer-events: auto;
	}

	.l-footer__group summary span {
		font-size: var(--font-size-body);
		line-height: 1.5;
	}

	.l-footer__group summary::after {
		position: absolute;
		top: 50%;
		right: 10px;
		width: 8px;
		height: 8px;
		content: "";
		border-right: 2px solid var(--color-text);
		border-bottom: 2px solid var(--color-text);
		transform: translateY(-50%) rotate(45deg);
		transform-origin: center;
		transition: transform 0.2s ease;
	}

	.l-footer__group[open] summary::after {
		transform: translateY(-50%) rotate(225deg);
	}

	.l-footer__group > .l-footer__links,
	.l-footer__group > .l-footer__industry-directory {
		display: none;
	}

	.l-footer__group[open] > .l-footer__links {
		display: grid;
		grid-template-columns: 1fr;
		margin-top: 0;
	}

	.l-footer__group--problems[open] > .l-footer__links {
		grid-template-columns: 1fr;
	}

	.l-footer__group[open] > .l-footer__industry-directory {
		display: grid;
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 18px 0 8px;
	}

	/* 通常リンクと業種リンクは同じタップ領域・上下余白・区切り線で表示する。 */
	.l-footer__links a,
	.l-footer__industry-group a {
		min-height: 52px;
		padding-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--color-border);
		font-size: var(--font-size-body);
		line-height: 1.6;
	}

	.l-footer__industry-group h3 {
		color: var(--color-text);
		font-size: 0.9rem;
	}

	.l-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
		min-height: 0;
		gap: 8px;
		padding: 22px 0 24px;
		font-size: var(--font-size-body);
		text-align: left;
	}

	.l-footer__bottom-left,
	.l-footer__bottom nav {
		width: 100%;
		align-items: flex-start;
		flex-direction: column;
	}

	.l-footer__bottom-left {
		gap: 4px;
	}

	.l-footer__bottom nav {
		gap: 0;
		font-size: 0.6875rem;
	}

	.l-footer__bottom nav a {
		min-height: 28px;
		line-height: 1.4;
	}

	.l-footer__logo {
		margin-bottom: 4px;
	}

	.l-footer__logo img {
		width: 132px;
	}

	.l-footer__copyright {
		margin-left: 0;
		font-size: 0.6875rem;
		white-space: normal;
	}
}