/* --- common & overwrite --- */
sub {
	font-size: .65em;
	vertical-align: baseline;
}
.-underline {
	text-decoration: underline;
}
.-indent {
	padding-left: 1em;
}
.tpl-text {
	&.-declaration {
		padding: 30px;
		background-color: #E7EEFA;
		font-size: 20px;
		font-weight: bold;
		line-height: 1.5;

		@media screen and (max-width: 750px) {
			font-size: 12px;
			padding: 15px;
			text-align: left!important;
		}
	}
	&.-annotation {
		font-size: 14px;
		@media screen and (max-width: 750px) {
			font-size: 10px;
		}
	}
	&.-indent {
		padding-left: 1em;

		.-indent {
			padding-left: 2em;
		}
	}
	&.-signature {
		line-height: inherit;
		@media screen and (max-width: 750px) {
			font-size: 12px;
		}
	}
}
.tpl-figure {
	margin: 0 auto 10px;

	@media only screen and (min-width: 751px) {
		margin: 0 auto 25px;

		&.full {
			width: 960px;
		}
		&.compact {
			width: 820px;
		}
	}

	@media only screen and (max-width: 750px) {
		width: 100%;
	}

	.tpl-section & {
		&:last-child {
			margin-bottom: 0;
		}
	}

	&:has(+ .tpl-figure) {
		margin-bottom: 0;
	}

	&:not(:has(figcaption)) {
		img {
			margin-bottom: 0;
		}
	}

	img {
		&:not([width]) {
			width: 100%;
		}
	}
}
.tpl-basic-img {
	@media only screen and (min-width: 751px) {
		&.full {
			width: 960px;
		}
		&.compact {
			width: 820px;
		}
	}
}
.tpl-list {
	&.reset {
		all: revert;
		margin-bottom: 30px;
		padding-left: 1.5em;

		@media only screen and (max-width: 750px) {
			margin-bottom: 15px;
		}

		ol, ul {
			all: revert;
			padding-left: 2em;
		}

		li {
			all: revert;
			line-height: 2;

			&::before {
				all: revert;
			}

			@media only screen and (max-width: 750px) {
				font-size: 12px;
			}
		}
	}
}

.align-c-pc {
	text-align: center;
	@media only screen and (max-width: 750px) {
		text-align: revert;
	}
}
.align-c-sp {
	text-align: revert;
	@media only screen and (max-width: 750px) {
		text-align: center;
	}
}

.width-fit {
	width: fit-content;
}
.with-shadow {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
}

/* --- common --- */
.c-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 30px;

	@media screen and (max-width: 750px) {
		gap: 15px;
	}

	img {
		width: 100%;
	}

	&.-gap0 {
		@media screen and (min-width: 751px) {
			gap: initial;
		}
	}
	&.-gap0sp {
		@media screen and (max-width: 750px) {
			gap: initial;
		}
	}

	&.-col2 {
		@media screen and (min-width: 751px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	&.-col2sp {
		@media screen and (max-width: 750px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	&.-col3 {
		@media screen and (min-width: 751px) {
			grid-template-columns: repeat(3, 1fr);
		}
	}
	&.-col3sp {
		@media screen and (max-width: 750px) {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	&.-col4 {
		@media screen and (min-width: 751px) {
			grid-template-columns: repeat(4, 1fr);
		}
	}
	&.-col4sp {
		@media screen and (max-width: 750px) {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	&.-reverse-sp {
		@media screen and (max-width: 750px) {
			display: flex;
			flex-direction: column-reverse;
			gap: 15px;
		}
	}

	> .-full {
		@media screen and (min-width: 751px) {
			grid-column: span 2;
		}
	}

	> .tpl-text {
		margin-bottom: 0;
	}

	.tpl-section & {
		margin-bottom: 30px;
		@media screen and (max-width: 750px) {
			margin-bottom: 15px;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}
.c-flex {
	display: flex;
	gap: 30px;

	@media only screen and (max-width: 750px) {
		flex-direction: column;
		gap: 15px;
	}

	&.-center {
		justify-content: center;
	}

	&.-middle {
		align-items: center;
	}

	.-grow {
		flex-shrink: 0;
	}
}
.c-panel {
	padding: 30px;
	&.-bg-white {
		background-color: #FFF;
	}
	&.-bg-gray {
		background-color: #F2F2F2;
	}
}
.c-link-list {
	li {
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #CCCCCC;

		a {
			display: block;
			padding-right: 15px;
			font-size: 14px;
			color: inherit;
			text-decoration: none;

			@media screen and (max-width: 750px) {
				font-size: 12px;
			}
		}
	}
}

.tpl-table-scroll {
	@media screen and (max-width: 750px) {
		overflow-x: auto;
		margin-right: -15px;
		margin-bottom: 15px;
		padding-right: 15px;
	}
}

/* --- data-esg ---*/
.tpl-table-scroll {
	overflow-x: auto;
	max-width: 100%;
	@media screen and (max-width: 750px) {
		max-width: initial;
	}

	.sticky-caption {
		position: sticky;
		top: 0;
		left: 0;
		width: fit-content;
	}

	.sticky {
		position: sticky;
		top: 0;
		left: 0;
		background: 0;
		border-right: 0;
		border-left: 0;

		&::before {
			content: "";
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-left: 1px solid #DCDCDC;
			background: #EEEEEE;
			z-index: -1;
		}
	}
}
.tpl-table {
	caption {
		margin-bottom: .5em;

		@media screen and (max-width: 750px) {
			font-size: 12px;
		}
	}

	:has(.tpl-table-scroll) & {
		table-layout: fixed;
		border-collapse: collapse;
		border-spacing: 0;
	}

	&.esg-social {
		min-width: 1385px;
		@media screen and (max-width: 750px) {
			min-width: 822px;
		}

		col {
			width: 115px;
			@media screen and (max-width: 750px) {
				width: 70px;
			}

			&:nth-child(1) {
				width: 130px;
				@media screen and (max-width: 750px) {
					width: 32px;
				}
			}
			&:nth-child(2) {
				width: 160px;
				@media screen and (max-width: 750px) {
					width: 128px;
				}
			}
			&:nth-child(3) {
				width: 60px;
				@media screen and (max-width: 750px) {
					width: 32px;
				}
			}
		}

		th, td {
			text-align: center;
			@media screen and (min-width: 751px) {
				padding: 15px;
				font-size: 14px;
				line-height: 1.6;

				* {
					line-height: 1.6;
				}
			}
			@media screen and (max-width: 750px) {
				padding: 10px;
			}
		}

		tbody {
			th {
				@media screen and (max-width: 750px) {
					text-align: left;
					line-height: 1.1;
				}
			}
		}

		.sticky {
			&:nth-child(2) {
				left: 130px;
				@media screen and (max-width: 750px) {
					left: 32px;
				}
			}

			&:nth-child(3) {
				left: 290px;
				@media screen and (max-width: 750px) {
					left: 160px;
				}
			}

			&[colspan="2"] {
				&+.sticky {
					left: 290px;
					@media screen and (max-width: 750px) {
						left: 160px;
					}
				}
			}

			&.col2 {
				left: 130px;
				@media screen and (max-width: 750px) {
					left: 32px;
				}
			}

			&.col3 {
				left: 290px;
				@media screen and (max-width: 750px) {
					left: 160px;
				}
			}
		}
	}

	&.esg-governance {
		table-layout: fixed;
		width: 960px;
		@media screen and (max-width: 750px) {
			width: 100%;
		}
		
		col {
			&:nth-child(1) {
				width: 115px;
				@media screen and (max-width: 750px) {
					width: 32px;
				}
			}
			&:nth-child(2) {
				width: 145px;
				@media screen and (max-width: 750px) {
					width: 88px;
				}
			}
			&:nth-child(3) {
				width: 90px;
				@media screen and (max-width: 750px) {
					width: 45px;
				}
			}
		}

		th, td {
			text-align: center;
			@media screen and (min-width: 751px) {
				padding: 15px;
				font-size: 14px;
				line-height: 1.6;

				* {
					line-height: 1.6;
				}
			}
			@media screen and (max-width: 750px) {
				padding: 10px;
			}
		}

		tbody {
			th {
				@media screen and (max-width: 750px) {
					line-height: 1.1;
				}
			}
		}
	}

	&.esg-skill {
		th, td {
			text-align: center;
			@media screen and (min-width: 751px) {
				padding: 15px;
				font-size: 14px;
				line-height: 1.6;

				* {
					line-height: 1.6;
				}
			}
			@media screen and (max-width: 750px) {
				padding: 10px;
			}
		}

		tbody {
			th {
				@media screen and (max-width: 750px) {
					line-height: 1.1;
				}
			}
		}

		col {
			&:nth-child(1) {
				width: 45px;
				@media screen and (max-width: 750px) {
					width: 32px;
				}
			}
			&:nth-child(2) {
				width: 120px;
				@media screen and (max-width: 750px) {
					width: 88px;
				}
			}
			&:nth-child(3) {
				width: 145px;
				@media screen and (max-width: 750px) {
					width: 45px;
				}
			}
		}

		.multiple {
			@media screen and (min-width: 751px) {
				line-height: 3.2;
			}
		}

		@media screen and (max-width: 750px) {
			.sp-none {
				display: none;
			}
			colgroup {
				display: none;
			}
			thead {
				display: none;
			}
			tbody {
				tr {
					width: 100%;
				}
				td {
					position: relative;
					display: block;
					width: 100%;
					border: 0;
					border-bottom: 1px solid #DCDCDC;

					&[data-label-position] {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-weight: bold;

						&::after {
							content: "（"attr(data-label-position)"）";
						}

						tr:not(:first-child) & {
							margin-top: 1em;
						}
					}

					&[data-label="会社における地位"] {
						display: none;
					}

					&[data-label] {
						min-height: 39px;
						padding-right: 22%;
						text-align: right;

						&::before {
							box-sizing: border-box;
							position: absolute;
							top: 0;
							left: 0;
							content: attr(data-label);
							width: 50%;
							padding: 10px 15px;
							background-color: #EEEEEE;
							font-weight: bold;
							text-align: left;
						}
					}
				}
			}
		}
	}
}