@charset "utf-8";
.mvPage {
    position: relative;
    border: none;
    background: #104b2b;
    padding-bottom: min(2.8vw, 30px);
}

/* contents */
#zeh .contents.container {
	width: 100%;
	max-width: none;
}

#zeh sub {
	font-size: 65%;
	vertical-align: baseline;
	position: relative;
	bottom: -0.2em;
}

/* introduction */
.zeh-intro {
	background: #fff url(../img/zeh/bg.webp) no-repeat center top / 100% auto;
	padding: 12.7rem 0 8.4rem;
}

.zeh-intro > .container {
	max-width: 1250px;
}

.zeh-intro__logo {
    width: min(80%, 872px);
	margin: 0 auto 9.4rem;
}

.zeh-intro__w-logo {
	width: min(40%, 313px);
	margin: 0 auto 8.7rem;
}

.zeh-intro__title {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid #005843;
	font-size: min(3.4vw, 4rem);
	letter-spacing: 0.12em;
	text-align: center;
}

.zeh-intro__lead {
	font-size: min(1.6vw, 2rem);
	line-height: 2.5;
	text-align: center;
}

.zeh-intro__lead span {
	font-size: 0.85em;
}

.zeh-intro__chart {
    width: min(100%, 1000px);
	margin: 7rem auto 0;
}

.zeh-intro__chart figcaption {
	color: #231815;
}

.zeh-intro__evaluate {
	max-width: 450px;
	margin: 6.5rem auto 0;
}

/* common section heading */
.zeh-section-title {
	background: #104b2b;
	color: #fff;
	font-size: 2.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 1.44rem 2rem;
	text-align: center;
}

/* merits */
.zeh-merits {
	padding-bottom: 9rem;
}

.zeh-merits__list {
	padding-top: 7.4rem;
}

.zeh-merit {
	align-items: center;
	margin-bottom: 6.5rem;
}

.zeh-merit:last-child {
	margin-bottom: 0;
}

.zeh-merit__photo,
.zeh-merit__body {
	width: 50%;
}

.zeh-merit__photo img {
	display: block;
	width: 100%;
}

.zeh-merit__body {
	padding: 1rem 0 1rem min(4vw, 4rem);
	color: #4b5157;
}

.zeh-merit--reverse .zeh-merit__body {
	padding: 1rem min(4vw, 4rem) 1rem 0;
}

.zeh-merit__heading {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 1rem;
}

.zeh-merit__heading h3 {
	font-size: min(4.3vw, 4.3rem);
	letter-spacing: 0.08em;
    color: #104b2b;
}

.zeh-merit__heading h3 small {
	font-size: 0.7em;
}

.zeh-merit__badge {
	width: min(8.8vw, 88px);
	height: min(12vw, 124px);
	background: url(../img/zeh/quotes-leaf.webp) no-repeat center / contain;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
	text-align: center;
	padding-top: 10px;
}

.zeh-merit__badge small {
	font-size: min(1vw, 1rem);
}

.zeh-merit__badge b {
	font-size: min(3vw, 3rem);
	font-weight: 400;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.2), 0 0 3px rgba(0, 0, 0, 0.2), 0 0 4px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2), 0 0 7px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.2), 0 0 9px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
}

.zeh-merit__catch {
	font-size: min(2.27vw, 2.27rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.7;
	padding-bottom: 2rem;
	position: relative;
}

.zeh-merit__catch::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, #005843 0 20%, #d8d9da 20% 100%);
}

.zeh-merit__description {
	color: #3b4348;
	font-size: min(1.3vw, 1.4rem);
	font-weight: 500;
	line-height: 2.5;
	margin-top: 1.8rem;
}

/* financial support */
.zeh-support {
	padding-bottom: 9rem;
}

.zeh-support__heading {
	display: flex;
	align-items: center;
	gap: 1.8rem;
	color: #005843;
}

.zeh-support__heading > img {
	width: min(5vw, 45px);
	flex: 0 0 auto;
}

.zeh-support__heading h2 {
	font-size: min(2.3vw, 2.3rem);
	line-height: 1.2;
}

.zeh-support__heading h2 small {
	font-size: 0.55em;
}

.zeh-support__heading p {
	color: #000;
	font-size: min(1.7vw, 1.7rem);
	margin-top: 0.4rem;
}

.zeh-support__table {
	margin-top: 2.4rem;
}

.zeh-support__table img {
	display: block;
	width: 100%;
}

.zeh-support__notes {
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.5;
	margin-top: 1.2rem;
}

.zeh-support__benefits {
	align-items: stretch;
	margin-top: 4rem;
}

.zeh-benefit {
	width: 33.333%;
	display: flex;
	align-items: flex-start;
	gap: 1.6rem;
	padding: 0 2.5rem;
    background-image: radial-gradient(circle, #8e8e8e 1px, transparent 2px);
    background-position: right top;
    background-size: 4px 8px; 
    background-repeat: repeat-y;
}

.zeh-benefit:first-child {
	padding-left: 0;
}

.zeh-benefit:last-child {
	padding-right: 0;
	background-image: none;
}

.zeh-benefit__icon {
	width: min(7vw, 70px);
	height: min(7vw, 70px);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.zeh-benefit__icon.ic-center {
    margin: auto;
}

.zeh-benefit__icon img {
	width: 100%;
}

.zeh-benefit__icon--percent {
	border-radius: 50%;
	background: #005843;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1;
}

.zeh-benefit h3 {
	color: #005843;
	font-size: min(2vw, 2.14rem);
	line-height: 1.35;
    height: 55px;
    align-content: center;
}

.zeh-benefit h3 small {
	display: block;
	font-size: 0.66em;
}

.zeh-benefit p {
	font-size: min(1.4vw, 1.5rem);
	line-height: 1.55;
	margin-top: 0.8rem;
    letter-spacing: 0;
}

/*#zeh .pageDirection {
	background: #104b2b;
}*/

@media screen and (min-width: 769px) {
    .header {
        background: rgba(255, 255, 255, 0.76);
    }

    .mvPage {
        position: relative;
        border: none;
        background: #104b2b;
        padding-bottom: min(2.8vw, 30px);
    }

    .mvPage .photo {
        position: unset;
    }

    .mvPage figcaption {
        bottom: min(0.6vw, 8px);
        right: 15%;
    }
}

@media screen and (max-width: 768px) {
    .br-pc {
        display: none;
    }

	.zeh-intro {
		padding: 5rem 0 6rem;
		background-size: auto 78rem;
	}

	.zeh-intro__logo {
		width: min(90%, 600px);
		margin-bottom: 4rem;
	}

	.zeh-intro__w-logo {
		width: min(35%, 180px);
		margin-bottom: 4rem;
	}

	.zeh-intro__title {
		font-size: min(4.8vw, 2.4rem);
		letter-spacing: 0.06em;
		padding-bottom: 2rem;
	}

	.zeh-intro__lead {
		font-size: 1.6rem;
		letter-spacing: 0.04em;
		line-height: 2;
		text-align: left;
	}

	.zeh-intro__lead span {
		font-size: 0.8em;
	}

	.zeh-intro__chart,
	.zeh-intro__evaluate {
		margin-top: 5rem;
	}

	.zeh-intro__chart figcaption {
		font-size: 9px;
	}

	.zeh-intro__evaluate {
		width: 80%;
	}

	.zeh-section-title {
		font-size: 2.4rem;
		padding: 1.4rem 2rem;
	}

	.zeh-merits {
		padding-bottom: 6rem;
	}

	.zeh-merits__list {
		padding-top: 5rem;
	}

	.zeh-merit {
		margin-bottom: 2rem;
	}

	.zeh-merit__photo,
	.zeh-merit__body {
		width: 100%;
	}

	.zeh-merit__body,
	.zeh-merit--reverse .zeh-merit__body {
		padding: 3rem 0 0;
	}

	.zeh-merit--reverse .zeh-merit__photo {
		order: -1;
	}

	.zeh-merit__heading {
		gap: 1rem;
		margin-bottom: 0;
	}

	.zeh-merit__heading h3 {
		font-size: 3.6rem;
	}

	.zeh-merit__badge {
		width: 70px;
		height: 90px;
	}

    .zeh-merit__badge small {
        font-size: 1rem;
    }

	.zeh-merit__badge b {
		font-size: 2.8rem;
	}

	.zeh-merit__catch {
		font-size: 2.2rem;
		line-height: 1.8;
		letter-spacing: 0.08em;
	}

	.zeh-merit__description {
		font-size: 1.4rem;
		line-height: 1.9;
	}

	.zeh-support {
		padding-bottom: 6rem;
	}

	.zeh-support__heading {
		align-items: flex-start;
		gap: 1.2rem;
	}

	.zeh-support__heading > img {
		width: 38px;
	}

	.zeh-support__heading h2 {
		font-size: 2.2rem;
	}

	.zeh-support__heading p {
		font-size: 1.6rem;
		line-height: 1.6;
	}

	.zeh-support__table {
		overflow-x: auto;
		padding-bottom: 0;
	}

	.zeh-support__notes {
		margin-top: 3rem;
	}
	
	.zeh-support .swipe {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 2rem;
	}

	.zeh-support .swipe span {
		background: #7d181d;
		border-radius: 5px;
		color: #fff;
		padding: 5px 20px;
		font-size: 14px;
		line-height: 1.4;
	}

	.zeh-support .swipe img {
		width: 40px;
		margin-left: 1rem;
	}

	.zeh-support__benefits {
		gap: 0;
		margin-top: 3rem;
	}

	.zeh-benefit {
		width: 100%;
		padding: 2.5rem 0 4rem;
        background-image: radial-gradient(circle, #8e8e8e 0.5px, transparent 1.5px);
        background-position: bottom left;
        background-repeat: repeat-x;
        background-size: 6px 10px; 
	}

	.zeh-benefit:first-child {
		padding-top: 0;
	}

	.zeh-benefit:last-child {
		padding-bottom: 0;
	}

	.zeh-benefit__icon {
		width: 58px;
		height: 58px;
	}

	.zeh-benefit__icon--percent {
		font-size: 3.1rem;
	}

	.zeh-benefit h3 {
        height: auto;
		font-size: 2rem;
	}

	.zeh-benefit p {
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 500px) {
	.zeh-support__table img {
		width: 600px;
		max-width: none;
	}
}