@charset "UTF-8";

/* =================================
    共通
================================= */
.lower-title {
	display: none;

	&.environment {
		display: block;

		h1 {
			top: 160px;
			display: flex;
			flex-flow: column;
			gap: 14px;

			span {
				font-size: 23px;
				letter-spacing: .11em;
				line-height: 1.39;
			}
		}
	}
}
@media screen and (max-width: 900px) {
	.lower-title.environment h1 {
		top: 100px;
	}
}

@media screen and (max-width: 500px) {
	.lower-title.environment h1 {
		top: 90px;
		font-size: 28px;
		gap: 0;
	}
}

main section p {
	color: #1F1F1F;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.875;
	margin-top: 12px;
}

/* =================================
    セクション
================================= */

section {
	border: 1px solid #0661B5;
	border-radius: 50px;
	padding: 85px 66px;
	position: relative;
	margin: 236px auto 0;
	width: 90%;
	max-width: 1187px;

	&:first-child {
		margin-top: 140px;
	}

	&::before {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	&.balance::before {
		background: url(../images/benefits/section-icon_1.webp) no-repeat;
		background-size: contain;
		top: -130px;
		width: 213px;
		height: 193px;
	}

	&.support::before {
		background: url(../images/benefits/section-icon_2.webp) no-repeat;
		background-size: contain;
		top: -96px;
		width: 221px;
		height: 150px;
	}

	&.health::before {
		background: url(../images/benefits/section-icon_3.webp) no-repeat;
		background-size: contain;
		top: -141px;
		width: 144px;
		height: 192px;
	}

	h2 {
		color: #1F1F1F;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 44px;
		font-size: 28px;
		letter-spacing: .06em;
		line-height: 1.14;
		white-space: nowrap;

		&::before,
		&::after {
			content: "";
			background: linear-gradient(90deg, #0661B5, #FCDFC8);
			display: block;
			width: 100%;
			height: 1px;
		}
	}

	h3 {
		border-bottom: 1px solid #B8B8B8;
		color: #0661B5;
		font-size: 28px;
		letter-spacing: .06em;
		line-height: 1.14;
		padding-bottom: 20px;
	}

	>ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 74px 52px;
		margin-top: 75px;

		>li {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			position: relative;
			width: calc(50% - 45px);

			&::before {
				content: "";
				background-image: linear-gradient(90deg, #FCDFC8, #0661B5);
				border-radius: 50%;
				display: block;
				transform: rotate(-30deg);
				width: 23px;
				height: 16px;
				margin-top: 10px;
			}

			>div {
				width: 100%;
			}

			.col-text {
				display: grid;
				grid-template-rows: repeat(4, auto);
				grid-auto-flow: column;
				gap: 0 100px;
				margin-top: 17px;
				padding-left: calc(1em + 13px);
				position: relative;
				width: max-content;

				li {
					font-weight: 500;
				}

				&::before {
					content: "例";
					font-weight: 500;
					position: absolute;
					top: 0;
					left: 0;
				}

				
				&::after {
					content: "等";
					font-weight: 500;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
		}
	}
}

/* =================================
	tablet
================================= */
@media screen and (max-width: 1024px) {
	section {
		padding: 115px 40px 80px;
		margin-top: 170px;

		>ul {
			flex-flow: column;

			>li {
				width: 100%;
			}
		}
	}
}

/* =================================
	sp
================================= */
@media screen and (max-width: 767px) {
	main section p {
		margin-top: 10px;
	}

	section {
		padding: 0 16px 42px;
		margin-top: 154px;

		&.balance {
			padding-top: 64px;

			&::before {
				top: -98px;
				width: 165px;
				height: 148px;
			}
		}

		&.support {
			padding-top: 80px;

			&::before {
				top: -74px;
				width: 201px;
				height: 186px;
			}
		}

		&.health {
			padding-top: 69px;

			&::before {
				top: -137px;
				width: 143px;
				height: 189px;
			}
		}

		h2 {
			font-size: 23px;
			line-height: 1.39;

			&::before,
			&::after {
				content: none;
			}
		}

		h3 {
			font-size: 23px;
			line-height: 1.39;
			padding-bottom: 10px;
		}

		>ul {
			gap: 30px;
			margin-top: 48px;

			>li {
				.col-text {
					display: block;
					padding-left: calc(1em + 11px);
					padding-right: 2em;
					margin-top: 10px;
				}
			}
		}
	}
}