@charset "UTF-8";

/* #intro (background/text-align come from .intro-band in common.css) */
#intro {
	& .intro__ttl {
		color: var(--col-text);
		line-height: 1.4;
	}
	& .intro__ttl-accent {
		color: var(--col-accent);
	}
	& .intro__badges {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		flex-wrap: wrap;
	}
	& .intro__badge {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 52px;
		padding: 0 24px;
		background: var(--col-white);
		border: 1px solid var(--col-primary);
		border-radius: 10px;
		font-size: 16px;
		font-weight: 700;
		color: var(--col-primary);
	}
	& .intro__badge-icon {
		width: 13px;
		height: auto;
	}
}

/* #values */
#values {
	background: #f7fbfc;
	& .values__ttl {
		text-align: center;
		color: var(--col-text);
		margin-bottom: 40px;
	}
	/* #point: shared icon-grid nav (see common.css); nested here without its own section padding */
	& #point {
		margin-bottom: 70px;
		& .point__sub {
			color: var(--col-primary);
		}
	}
}

/* .value-card (Value 01-05): inset white card on the #values gray background */
.value-card {
	max-width: 1000px;
	margin: 0 auto;
	padding: 60px 40px;
	text-align: center;
	background: var(--col-white);
	border: 1px solid var(--col-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 6px 16px rgba(23, 67, 77, .06);
	& + .value-card {
		margin-top: 20px;
	}
	& .value-block__label {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 36px;
	}
	& .value-block__num {
		font-size: 20px;
		font-weight: 700;
		color: var(--col-accent);
		flex-shrink: 0;
	}
	& .value-block__line {
		flex: 1 1 auto;
		height: 1px;
		background: var(--col-accent);
		opacity: .4;
	}
	& .value-block__sub {
		font-size: 20px;
		font-weight: 700;
		color: #5b6b7b;
		text-align: left;
		margin-bottom: 0;
	}
	& .value-block__ttl {
		font-size: clamp(28px, calc(22px + 1.4vw), 40px);
		font-weight: 700;
		color: var(--col-primary);
		line-height: 1.4;
		text-align: left;
		margin-bottom: 40px;
	}
	& .value-block__lead {
		font-size: 18px;
		font-weight: 700;
		color: var(--col-text);
		margin-bottom: 30px;
	}
	& .value-block__img {
		display: block;
		width: 420px;
		max-width: 100%;
		height: auto;
		margin: 0 auto 30px;
	}
	& .value-block__body {
		margin: 0 auto;
		font-size: 14px;
		line-height: 1.8;
		color: var(--col-text);
		& p + p {
			margin-top: 20px;
		}
	}
	& .value-block__list {
		margin: 50px auto 0;
		text-align: left;
	}
	& .value-block__row {
		padding: 20px;
		background: #edf9f3;
		border: 1px solid var(--col-logo-green);
		border-radius: 10px;
		& + .value-block__row {
			margin-top: 8px;
		}
		& dt {
			display: flex;
			align-items: flex-start;
			gap: 8px;
			font-size: 15px;
			font-weight: 700;
			color: var(--col-primary);
			margin-bottom: 6px;
		}
		& dd {
			font-size: 14px;
			color: var(--col-text);
			& a {
				color: var(--col-teal);
				text-decoration: underline;
				&:hover {
					text-decoration: none;
				}
			}
		}
	}
	& .value-block__row-icon {
		width: 18px;
		height: auto;
		margin-top: 2px;
		flex-shrink: 0;
	}
	& .value-block__note {
		font-size: 13px;
		color: var(--col-text-muted);
	}
	& .value-block__example {
		color: var(--col-text-muted);
	}
}

/* #flow */
#flow {
	background: var(--col-white);
	text-align: center;
	& .flow__ttl {
		color: var(--col-text);
	}
	& .flow__lead {
		margin-bottom: 40px;
	}
	& .flow__table-outer {
		max-width: 1000px;
		margin: 0 auto;
		overflow-x: auto;
	}
	& .flow__img {
		display: block;
		width: 100%;
		max-width: 1000px;
		min-width: 600px;
		height: auto;
		margin: 0 auto;
		border-radius: var(--radius-lg);
		box-shadow: 0 6px 16px rgba(23, 67, 77, .06);
	}
}

/* tablet */
@media screen and (max-width: 1024px) {
	.value-card {
		& .value-block__sub,
		& .value-block__ttl {
			text-align: center;
		}
	}
}

/* sp */
@media screen and (max-width: 640px) {
	#intro {
		& .intro__badges {
			gap: 10px;
		}
		& .intro__badge {
			height: 42px;
			padding: 0 14px;
			font-size: 13px;
		}
	}
	#values {
    & .values__ttl {
      margin-bottom: 26px;
    }
		& #point {
			margin-bottom: 40px;
      & .point__sub {
        font-size: 13px;
      }
		}
	}
	#flow {
		& .flow__lead {
			margin-bottom: 30px;
		}
	}
	.value-card {
		padding: 30px 20px;
		& .value-block__label {
			margin-bottom: 26px;
		}
		& .value-block__num {
			font-size: 16px;
		}
		& .value-block__sub,
		& .value-block__ttl {
			text-align: center;
		}
		& .value-block__sub {
			font-size: 15px;
		}
		& .value-block__ttl {
			font-size: 24px;
			margin-bottom: 24px;
		}
		& .value-block__lead {
			font-size: 14px;
			margin-bottom: 24px;
		}
		& .value-block__img {
			width: 320px;
			margin-bottom: 24px;
		}
		& .value-block__body {
			font-size: 13px;
			text-align: left;
		}
		& .value-block__list {
			margin-top: 24px;
		}
		& .value-block__row {
			padding: 16px;
			& dt {
				font-size: 14px;
			}
			& dd {
				font-size: 13px;
			}
		}
	}
}