/**
 * About page ("会社概要"). Figma node 37:778 (Narrow) / 37:874 (Wide).
 */

/* -- 会社案内: company info table -- */

.company-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--block-gap);
	padding: 0 var(--container-px) var(--section-py);
}

.company-info__inner {
	display: flex;
	flex-direction: column;
	gap: var(--block-gap);
	width: 100%;
	max-width: 1120px;
}

.company-table {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--color-border-base);
}

.company-table__row {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--color-border-base);
}

.company-table__row dt {
	padding: 10px 16px;
	background-color: var(--color-bg-muted);
	font: 700 15px/1.7 var(--font-sans);
	color: var(--color-text-primary);
}

.company-table__row dd {
	margin: 0;
	padding: 14px 16px;
	font: 400 16px/1.8 var(--font-sans);
	color: var(--color-text-primary);
}

.company-table__row dd a {
	color: var(--color-text-accent);
	font-weight: 700;
	text-decoration: underline;
}

/* -- 代表者あいさつ: greeting section -- */

.greeting-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--block-gap);
	padding: var(--section-py) var(--container-px);
	background-color: var(--color-bg-muted);
	background-image: url(../img/patterns/dots-on-muted.png);
	background-size: 16px 16px;
	background-repeat: repeat;
}

.greeting-section > .section-heading,
.greeting-card {
	width: 100%;
	max-width: 1120px;
}

.greeting-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 20px;
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-base);
	border-radius: var(--radius-lg);
}

.greeting-card__portrait {
	width: 100%;
	max-width: 300px;
	margin-inline: auto;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.greeting-card__portrait img {
	display: block;
	width: 100%;
	height: auto;
}

.greeting-text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.greeting-text p {
	font: 400 16px/1.8 var(--font-sans);
	color: var(--color-text-primary);
	margin: 0;
}

.greeting-text p strong {
	color: var(--color-text-accent);
}

.greeting-text h3 {
	margin: 4px 0 0;
	padding: 4px 0 4px 16px;
	border-left: 4px solid var(--color-brand-primary);
	font: 700 18px/1.7 var(--font-sans);
	color: var(--color-text-accent);
}

.greeting-text__signature {
	text-align: right;
	font-weight: 700;
}