@charset "UTF-8";
/* =====================================================================
   グループ紹介(/common/css/page/group.css。既存サイトの group/css/group.css)
   SitePage の style が GROUP の画面(グループ会社紹介・グループWebサイト一覧)だけで読み込む(layout :: headAssets)。
   ===================================================================== */
/* 2列は Bootstrap の row / col-lg-6(テンプレートで指定) */
.group-detail {
	border: 1px solid var(--site-border-light);
}

.group-list-ttl {
	margin: 0;
	padding: 10px 10px 12px;
	text-align: center;
}

.group-list-ttl img {
	max-width: 80%;
	height: auto;
}

/* 余白・文字揃え・lg 以上の横並びは Bootstrap の m-0 text-center text-lg-start d-lg-flex flex-lg-wrap(テンプレートで指定)。
   lg 以上の項目名の幅は --label-width(英語は長いため広げる) */
.group-list {
	--label-width: 6em;
}

html:lang(en) .group-list {
	--label-width: 10em;
}

.group-list dt {
	padding: .5em;
	background-color: var(--site-bg-light);
	line-height: 1;
}

.group-list dd {
	padding: .5em;
}

@media (min-width: 992px) {
	.group-detail {
		padding: .5em;
	}

	.group-list dt {
		width: var(--label-width);
		border-top: 1px dotted var(--site-border-light);
		background-color: transparent;
		line-height: inherit;
	}

	.group-list dd {
		width: calc(100% - var(--label-width));
		border-top: 1px dotted var(--site-border-light);
		word-break: break-all;
	}

	html:lang(en) .group-list dd {
		word-break: normal;
	}

	.group-list-ttl img {
		width: auto;
		height: 50px;
	}
}

/* 2列は Bootstrap の row row-cols-lg-2(テンプレートで指定) */
.service-list-link {
	display: block;
	height: 100%;
	padding: 1em;
	border: 1px solid var(--site-border-light);
	text-align: center;
	text-decoration: none;
}

.service-list-logo {
	display: block;
}

.service-list-logo img {
	display: block;
	max-width: 80%;
	margin: auto;
}

.service-list-name,
.service-list-url {
	display: block;
	padding: 0 .5em;
}

@media (min-width: 768px) {
	.service-list-link {
		display: flex;
		align-items: center;
	}

	.service-list-logo {
		width: 40%;
		padding-right: 1em;
	}

	.service-list-companyinfo {
		display: inline-block;
		width: 60%;
		text-align: left;
	}

	.service-list-name,
	.service-list-url {
		padding: 0;
	}
}

@media (min-width: 992px) {
	.service-list-logo,
	.service-list-companyinfo {
		width: 50%;
	}

	.service-list-companyinfo {
		font-size: .75rem;
		word-break: break-all;
	}
}