@charset "utf-8";

/*=============================================================
 policy
=============================================================*/
/* pageBlock */
.act-lm-midPlan #pageBlock {
	height: auto;

	&::after {
		content: none;
	}
}

.act-lm-midPlan #pageTtlMain {
	&.-en {
		.contents {
			right: 0;
			max-width: min(calc(670 / 1200 * 100vw), 670px);

			@media only screen and (max-width:599px) {
				max-width: calc(290 / 375 * 100vw);
			}
		}
	}

	.contentsInner {
		position: relative;
	}

	.image {
		display: block;
		width: calc(1015 / 1440 * 100vw);
		height: 526px;
		margin-left: calc(50% - 50vw);

		@media only screen and (max-width:599px) {
			width: calc(312 / 375 * 100vw);
			height: auto;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.contents {
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		right: 6%;
		padding: 48px 56px;
		width: 100%;
		max-width: min(calc(600 / 1200 * 100vw), 600px);
		background-color: #fff;
		translate: 0 -50%;

		@media only screen and (max-width:599px) {
			position: relative;
			top: auto;
			right: auto;
			width: auto;
			max-width: calc(290 / 375 * 100vw);
			margin: -220px calc(50% - 50vw) 0 auto;
			padding: 20px 16px 12px;
			translate: none;
		}
	}

	.ttl-h1 {
		margin-top: 0;

		span {
			display: inline-block;
			position: relative;
			padding-bottom: 12px;

			@media only screen and (max-width:599px) {
				font-size: 19px;
				font-weight: 700;
				line-height: 1.685;
			}

			&::after {
				content: "";
				position: absolute;
				inset: auto 0 0;
				height: 4px;
				background-image: linear-gradient(90deg, var(--color-orange-38), var(--color-orange-40) 50%, var(--color-orange-20));
			}
		}
	}

	.text {
		margin-top: 24px;
		line-height: 1.85;

		@media only screen and (max-width:599px) {
			margin-top: 10px;
		}
	}
}

/* r-ttl-h2-mid */
.r-ttl-h2-mid {
	position: relative;
	margin-bottom: 72px;
	padding-bottom: 16px;
	color: var(--color-orange-38);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.5;

	@media only screen and (max-width:599px) {
		margin-bottom: 56px;
		font-size: 30px;
	}

	&:has(+ p) {
		margin-bottom: 24px;
	}

	&::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 4px;
		background-image: linear-gradient(90deg, var(--color-orange-38), var(--color-orange-40) 50%, var(--color-orange-20));
	}
}

/* r-ttl-h3-mid */
.r-ttl-h3-mid {
	position: relative;
	margin-bottom: 40px;
	padding-left: 24px;
	font-size: 26px;
	font-weight: 700;

	@media only screen and (max-width:599px) {
		padding-left: 24px;
		font-size: 24px;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 8px;
		background-image: linear-gradient(var(--color-orange-38), var(--color-orange-40) 50%, var(--color-orange-20));
	}

	& ~ & {
		margin-top: 72px;

		@media only screen and (max-width:599px) {
			margin-top: 56px;
		}
	}

	&.-number {
		display: flex;
		align-items: baseline;
		gap: 16px;
		padding-left: 0;

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

		&::after {
			content: none;
		}

		i {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			width: 45px;
			height: 45px;
			padding-bottom: 2px;
			border-radius: 100%;
			background-image: linear-gradient(var(--color-orange-38), var(--color-orange-40) 50%, var(--color-orange-20));
			color: #fff;
			font-size: 30px;
			font-style: normal;
			font-weight: 400;
			line-height: 1;
			text-align: center;
			translate: 0 2px;
		}
	}
}

/* r-ttl-h4-mid */
.r-ttl-h4-mid {
	position: relative;
	margin-bottom: 16px;
	padding-bottom: 12px;
	font-size: 22px;
	font-weight: 700;

	@media only screen and (max-width:599px) {
		margin-bottom: 24px;
		font-size: 20px;
	}

	&:has(i) {
		display: flex;
		align-items: baseline;
		gap: 8px;

		i {
			translate: 0 -2px;
		}
	}

	&::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 3px;
		background-image: linear-gradient(90deg, var(--color-orange-38), var(--color-orange-40) 50%, var(--color-orange-20));
	}

	i {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: fit-content;
		height: 20px;
		padding: 0 6px 2px;
		background-image: linear-gradient(90deg, var(--color-red-41), var(--color-orange-49));
		color: #fff;
		font-style: normal;
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		text-align: center;
	}
}

/* r-ttl-header */
.r-ttl-header {
	padding: 28px 40px 24px;
	background-image: linear-gradient(90deg, var(--color-red-41), var(--color-orange-49));
	color: #fff;
	text-align: center;

	@media only screen and (max-width:599px) {
		padding: 24px 12px 20px;
	}

	.tagline {
		display: flex;
		align-items: center;
		justify-content: center;
		width: fit-content;
		height: 36px;
		margin-inline: auto;
		padding-inline: 14px;
		background-color: #fff;
		color: var(--color-orange-32);
		line-height: 1;

		@media only screen and (max-width:599px) {
			height: 30px;
			padding-inline: 10px;
			font-size: 13px;
		}
	}

	.ttl-main {
		margin-block: 8px 0 !important;
		font-size: 32px;
		font-weight: 700;

		@media only screen and (max-width:599px) {
			margin-top: 8px !important;
			font-size: 26px;
		}

		b,
		span {
			display: block;
		}

		b {
			font-size: 40px;
			line-height: 1.2;

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

		span {
			margin-top: 8px;
			font-size: 24px;

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

	.list {
		display: grid;
		gap: 16px;
		margin-top: 40px;
		padding-block: 40px 16px;
		border-top: 1px solid rgb(255 255 255 / .6);
		text-align: left;

		@media only screen and (max-width:599px) {
			margin-top: 20px;
			padding-block: 20px 0;
		}

		li {
			position: relative;
			padding-left: 18px;
			font-weight: 700;
			letter-spacing: .023em;
			line-height: 1.5;

			&::before {
				content: "";
				position: absolute;
				top: 9px;
				left: 0;
				width: 8px;
				height: 8px;
				border-radius: 100%;
				background-color: var(--color-orange-57);
			}
		}
	}
}


/* r-block-intro */
.r-block-intro {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 24px 48px;

	@media only screen and (max-width:959px) {
		grid-template-columns: none;
	}

	.ttl {
		max-width: 384px;
		font-size: 26px;
		line-height: 1.2;
		letter-spacing: .115em;

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

	.contents {
		border-left: 1px solid #cfd3d9;

		@media only screen and (max-width:959px) {
			border-top: 1px solid #cfd3d9;
			border-left: 0;
		}
	}

	.text {
		padding-left: 48px;

		@media only screen and (max-width:959px) {
			padding-top: 24px;
			padding-left: 0;
		}

		p {
			&:not(:first-child) {
				margin-top: 1.5em;
			}
		}
	}
}

/* r-block-env */
.r-block-env {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;

	@media only screen and (max-width:599px) {
		grid-template-columns: none;
	}

	.item {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 5;
		gap: 0;
	}

	.lead {
		text-align: center;
	}

	.image {
		margin-top: 24px;

		img {
			width: 100%;
		}
	}

	.risk,
	.business {
		display: flex;
		flex-direction: column;

		dt,
		dd {
			padding-inline: 16px;
			line-height: 1.6;

			@media only screen and (max-width:599px) {
				padding-inline: 8px;
			}
		}

		dt {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 28px;
			font-size: 14px;
			font-weight: 700;
			text-align: center;
		}

		dd {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			padding-block: 24px;
			font-size: 18px;
			font-weight: 700;
			text-align: center;

			@media only screen and (max-width:599px) {
				padding-block: 16px;
			}
		}
	}

	.risk {
		margin-top: 24px;

		dt {
			background-color: var(--color-gray-83);
		}

		dd {
			min-height: 100px;
			background-color: var(--color-gray-95);
		}
	}

	.business {
		margin-top: 16px;

		dt {
			background-color: var(--color-orange-38);
			color: #fff;
		}

		dd {
			gap: 16px;
			background-color: var(--color-orange-94);
		}
	}
}

/* r-block-v */
.r-block-v {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;

	@media only screen and (max-width:599px) {
		grid-template-columns: none;
	}

	.item {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		gap: 24px;
		padding: 0 16px 16px;
		background-color: var(--color-gray-95);
	}

	.image {
		margin-inline: -16px;

		img {
			width: 100%;
		}
	}

	.ttl {
		padding-bottom: 8px;
		border-bottom: 2px solid var(--color-orange-32);
		font-size: 20px;
		font-weight: 700;
		line-height: 1.6;
		text-align: center;

		span {
			display: block;
			color: var(--color-orange-38);
			font-size: 14px;
			letter-spacing: .04em;
			line-height: 1.5;
		}
	}

	ul {
		li {
			position: relative;
			padding-left: 20px;
			letter-spacing: normal;

			&::before {
				content: "";
				position: absolute;
				top: 12px;
				left: 6px;
				width: 4px;
				height: 4px;
				border-radius: 100%;
				background-color: #000;
			}
		}
	}

	dl {
		display: flex;
		flex-direction: column;
		background-color: #fff;

		dt,
		dd {
			padding-inline: 16px;
			line-height: 1.6;
		}

		dt {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 28px;
			background-color: var(--color-orange-38);
			color: #fff;
			font-size: 14px;
			font-weight: 700;
			text-align: center;
		}

		dd {
			box-sizing: border-box;
			flex: 1;
			background-color: #fff;
			padding-block: 16px;
			font-size: 18px;
			font-weight: 700;

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

/* r-block-sdgs */
.r-block-sdgs {
	margin-top: 40px;
	padding: 40px 40px 44px;
	background-color: var(--color-gray-95);

	@media only screen and (max-width:599px) {
		padding: 24px 15px;
	}

	.ttl {
		font-size: 24px;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
	}

	.list {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 8px;
		margin-top: 16px;

		@media only screen and (max-width:599px) {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}

/* r-block-strategy */
.r-block-strategy {
	display: grid;
	margin-top: 24px;
	text-align: center;
	border: 1px solid var(--color-gray-83);

	.image {
		display: block;
		padding: 32px 16px 48px;
		background-color: #fff;

		@media only screen and (max-width:599px) {
			padding: 32px 24px 20px;
		}
	}
}

/* r-block-plan-01 */
.r-block-plan-01 {
	border: 1px solid var(--color-gray-83);
	text-align: center;

	@media only screen and (max-width:599px) {
		overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding: 10px;
		border: 0;
		background-color: var(--color-gray-95);
	}

	.inner {
		@media only screen and (max-width:599px) {
			box-sizing: border-box;
			width: 665px;
			border: 1px solid var(--color-gray-83);
		}
	}

	.contents {
		padding: 40px;
		background-color: #fff;

		@media only screen and (max-width:599px) {
			padding: 32px 24px 20px;
		}
	}

	.ttl {
		font-size: 30px;
		font-weight: 700;
		line-height: 1.6;

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

	.image {
		margin-top: 28px;

		@media only screen and (max-width:599px) {
			margin-top: 24px;
		}
	}
}

/* r-block-plan-02 */
.r-block-plan-02 {
	display: grid;
	grid-template-columns: 410px 1fr;
	gap: 72px 40px;
	margin-top: 72px;

	@media only screen and (max-width:959px) {
		grid-template-columns: none;
		row-gap: 40px;
		margin-top: 56px;
	}

	.ttl {
		font-size: 30px;
		font-weight: 700;
		line-height: 1.6;

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

	.notes {
		margin-top: 8px;
		font-size: 12px;
	}

	.table-default {
		tbody {
			b {
				font-size: 24px;
				font-weight: 400;
			}
		}
	}

	.image {
		grid-column: 1 / -1;
		text-align: center;

		@media only screen and (max-width:599px) {
			margin-top: 16px;
		}

		img {
			width: 100%;
		}
	}
}

/* r-block-policy */
.r-block-policy {
	display: grid;
	gap: 72px;
	margin-top: 72px;

	@media only screen and (max-width:959px) {
		gap: 56px;
		margin-top: 56px;
	}

	.unit {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 64px 88px;
		margin-top: 40px;

		@media only screen and (max-width:959px) {
			grid-template-columns: none;
			margin-top: 24px;
		}

		> div {
			display: flex;
			flex-direction: column;

			&.before {
				dt {
					background-color: var(--color-gray-83);
				}

				dd {
					background-color: var(--color-gray-95);
				}
			}

			&.after {
				position: relative;

				&::before {
					content: "";
					position: absolute;
					inset: 0 100% 0 auto;
					width: 56px;
					height: 64px;
					margin: auto;
					background: url("/ir/policy/img/midPlan_icon.svg") no-repeat center / contain;
					translate: -16px;

					@media only screen and (max-width:959px) {
						inset: auto 0 100%;
						width: 32px;
						height: 36px;
						rotate: 90deg;
						translate: 0 -12px;
					}
				}

				dt {
					background-color: var(--color-orange-38);
					color: #fff;
				}

				dd {
					background-color: var(--color-orange-94);
				}
			}
		}

		dt,
		dd {
			line-height: 1.6;
		}

		dt {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 28px;
			padding-inline: 16px;
			font-size: 14px;
			font-weight: 700;
			text-align: center;
		}

		dd {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			gap: 24px;
			padding: 24px;
			font-size: 18px;
			font-weight: 700;

			@media only screen and (max-width:599px) {
				padding-inline: 16px;
				font-size: 16px;
			}
		}
	}

	.list {
		flex: 1;

		@media only screen and (max-width:599px) {
			padding-inline: 8px;
		}

		> li {
			position: relative;
			padding-left: 28px;

			&::before {
				content: "";
				position: absolute;
				top: 12px;
				left: 10px;
				width: 5px;
				height: 5px;
				border-radius: 100%;
				background-color: #000;
			}
		}

		ul {
			> li {
				padding-left: .9em;
				text-indent: -.9em;

				&::before {
					content: "-";
					margin-right: .5em;
				}
			}
		}
	}

	.image {
		display: block;
		text-align: center;

		img {
			width: 100%;
		}
	}
}