@charset "UTF-8";

/* comp1-section */
@media all {
	
	.inner-section-bg-green {
		position: relative;
		text-align: center;
	}

	.comp1-table {position: relative;}
	.comp1-dl {
		display: flex;
		align-items: stretch;
	}
	.comp1-dl:not(:first-child) {border-bottom: 2rem solid #fff;}
	.comp1-dl :is(dt, dd) {
		display: flex;
		align-items: center;
	}
	.dd-ps, .dd-ac {
		padding: 1em;
		line-height: 2;
	}
	.dd-ps, .dd-logo {order: 1;}
	.dd-ac, .dd-ac-ttl {order: 3;}
	.dd-ac-ttl {font-weight: normal;}
	.dd-logo, .dd-ac-ttl {justify-content: center;}
	.comp1-dl:nth-child(even) .dd-ps {background-color: #e4efe1;}
	.comp1-dl:nth-child(odd) .dd-ps {background-color: #f5fbf3;}
	.dt-comp {
		justify-content: center;
		width: 8em;
		border-left: 5rem solid #fff;
		border-right: 5rem solid #fff;
		font-weight: normal;
		color: #fff;
		text-align: center;
	}
	.dt-comp, .dt-blank {
		order: 2;
		width: 8em;
	}

	.comp1-dl:nth-child(even) .dt-comp {background-color: var(--main-color);}
	.comp1-dl:nth-child(odd) .dt-comp {background-color: #557669;}

	.comp1-dl:nth-child(even) .dd-ac {background-color: #e5e5e5;}
	.comp1-dl:nth-child(odd) .dd-ac {background-color: #efefef;}
	
	/* sp */
	@media only screen and (max-width: 767px) {
		.comp1-content {padding-bottom: 100rem;}
		.comp1-section + .belt {margin-top: 65rem;}

		.comp1-table {
			padding: 0 5rem;
		}
		.comp1-dl:first-child {margin-bottom: 20rem; text-align: center;}
		.dd-logo img {width: 125rem;}
		.comp1-dl:not(:first-child),
		.dt-comp {border-width: 2rem;}

		.dd-logo, .dd-ps, .dd-ac-ttl, .dd-ac {
			width: 240rem;
		}
		.dt-blank, .dt-comp {
			width: 50rem;
			writing-mode: vertical-rl;
			line-height: 1;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.comp1-table {
			margin-top: 55rem;
			font-size: 15rem;
		}
		.comp1-dl:not(:first-child) > * {min-height: 100rem;}
		.comp1-dl:first-child {margin-bottom: 25rem;}
		.dd-logo img {width: 165rem;}
		.dd-ac-ttl {font-size: 18rem;}
		.comp1-dl > dd {width: calc(50% - 60rem);}

		.belt {margin-top: 150rem;}
		/* pc */
		@media (min-width: 1025px) {
			.comp1-table {font-family: var(--sans-serif-orig);}
		}

		/* tab */
		@media (max-width: 1024px) {
			.comp1-section {padding: 0;}
			.comp1-table {padding:  0 20rem;}
		}
	}
}

/* cool-section */
@media all {
	.cool-section::before,
	.warm-section::before {
		content: '';
		position: absolute;
		top: 0;
		display: block;
		background: center / contain no-repeat url(../img/introduction/comparison/bg-leaf.jpg);
	}
	.warm-section::before {background-image: url(../img/introduction/comparison/bg-light.jpg);}

	.cool-section-ttl,
	.warm-section-ttl {
		display: block;
		color: var(--cool-blue);
		text-align: center;
	}
	.warm-section-ttl,
	.warm-section .point-ttl {color: var(--warm-orange);}

	.point-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 25rem;
		margin: 0 auto;
		line-height: 2;
	}
	.point-item {
		text-align: justify;
		font-feature-settings: "palt";
	}
	.point-num {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		margin: -50rem auto 0;
		padding-bottom: 50rem;
		width: 100rem;
		height: 100rem;
		border-radius: 50%;
		font-family: var(--serif);
		font-size: 24rem;
		font-weight: bold;
		text-align: center;
		line-height: 1;
	}
	.cool-section .point-item,
	.cool-section .point-num {background-color: var(--cool-blue-light);}
	.point-num  {mix-blend-mode: screen;}
	.warm-section .point-item,
	.warm-section .point-num {background-color: var(--warm-orange-light);}

	.point-small {
		margin-bottom: 2rem;
		font-size: 11rem;
		font-weight: 600;
	}
	.point-ttl {
		position: relative;
		margin-top: -1em;
		font-weight: 500;
		color: var(--cool-blue);
		text-align: center;
		line-height: 1.474;
	}
	
	.cool-section .point-txt {margin-top: 2em;}
	.warm-section .point-txt {margin-top: 1em;}

	:not(.comp2-section) figcaption {
		margin-top: 1em;
		font-weight: normal;
		color: var(--txt);
		text-align: center;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.cool-section,
		.warm-section {
			padding: 40rem 0;
		}
		.warm-section {padding-bottom: 80rem;}
		.cool-section::before,
		.warm-section::before {
			width: 320rem;
			height: 140rem;
			top: 0;
		}
		.cool-section::before {right: 0;}
		.warm-section::before {left: 0;}

		.point-list {
			margin-top: 80rem;
			gap: 70rem 10rem;
			font-size: 13rem;
		}
		.point-item {
			padding: 0 15rem 20rem;
			width: 47.5%;
		}
		.point-item:nth-child(even) {transition-delay: .25s;}

		.point-ttl {
			font-size: 16rem;
			white-space: nowrap;
		}
		.cool-section .point-ttl {padding-top: 9rem;}

		.pc-text-right {padding: 60rem 20rem 0;}
		.system-img {margin-top: 20rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.cool-section,
		.warm-section {padding-top: 100rem;}
		.warm-section {margin-top: 90rem;}
		.cool-section::before,
		.warm-section::before {
			width: 960rem;
			height: 420rem;
		}
		.cool-section::before {left: calc(50% - 160rem);}
		.warm-section::before {right: calc(50% - 160rem);}

		.point-list {margin-top: 100rem;}
		.point-item {
			padding: 0 17rem;
			width: 230rem;
			height: 220rem;
		}
		.warm-section .point-item {height: 210rem;}
		.point-item:nth-child(2) {transition-delay: .25s;}
		.point-item:nth-child(3) {transition-delay: .5s;}
		.point-item:nth-child(4) {transition-delay: .75s;}

		.point-ttl {font-size: 19rem;}
		.cool-section .point-ttl {padding-top: 9rem;}
		.warm-section .point-ttl {padding-top: 3rem;}

		.pc-text-right,
		.pc-text-left {
			margin-top: 50rem;
			align-items: center;
		}
		.system-img {
			flex-shrink: 0;
			width: 460rem;
		}
		.cool-system-img {margin-right: 54rem;}

		/* tab */
		@media (max-width: 1024px) {
			.point-list {
				width: 500rem;
				row-gap: 65rem;
			}
			.point-item:nth-child(3) {transition-delay: 0s;}
			.point-item:nth-child(4) {transition-delay: .25s;}
		}
	}
}


/* comp2-section */
@media all {
	.comp2-section {text-align: center;}
	/* sp */
	@media only screen and (max-width: 767px) {
		.comp2-section {
			padding: 80rem 0 0;
		}
		.comp2-inner-section-text {padding: 0 15rem;}
		.comp2-table {
			margin-top: 30rem;
			padding: 0 5rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.comp2-section {
			padding-top: 100rem;
			padding: 100rem 20rem 0;
		}
		.comp2-table {transform: translateY(75rem);}
		.design-image-notice {
			margin-top: 1em;
			max-width: 820rem;
		}

		.more-aside {margin-top: 220rem;}
	}
}



/* deco */
@media all {
	.deco {z-index: 1;}
	.deco1 {mix-blend-mode: darken;}
	/* sp */
	@media only screen and (max-width: 767px) {
		.deco1 {
			bottom: -100rem;
			left: 55rem;
			width: 80rem;
		}
		.deco2 {
			bottom: -30rem;
			right: 20rem;
			width: 140rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {

		/* tab */
		@media (max-width: 1024px) {
			.deco1 {
				top: 150rem;
				left:calc(50% - 430rem);
			}
			.deco1 img {width: 120rem;}

			.deco2 {
				bottom: 50rem;
				right: calc(50% - 500rem);
			}
			.deco2 img {width: 200rem;}
		}
		/* pc */
		@media (min-width: 1025px) {
			.deco1 {
				top: 250rem;
				left: calc(50% - 720rem);
			}
			.deco1 img {
				width: 180rem;
			}
			.deco2 {
				top: 350rem;
				right: calc(50% - 890rem);
			}
			.deco2 img {
				width: 380rem;
			}
		}
	}
}





/* template-section */
@media all {
	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}


.pc-text-right {display: none;}