@charset "UTF-8";

html {
	font-family: メイリオ, Meiryo, "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
	background-color: rgb(255, 246, 232);
}

header {
	height: 4em;
	background-color: #142e79;
	display: flex;
	align-items: center;
	justify-content: center;
}

header img {
	height: 2.7em;
}

.br-pc {
	display: block;
}

.br-sp {
	display: none;
}

.num {
	font-family: "Roboto", sans-serif;
	font-size: 1.3em;
}

.num-c {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.3em;
}

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

	.br-sp {
		display: block;
	}
}

.sitewrap-top{
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.sitewrap-top ul {
	margin: 1em auto 1em -2em;
}

.sitewrap-top ul li {
	display: inline-block;
	font-size: max(14px, 0.8em);
	list-style: none;
}

.sitewrap-top ul li:not(:first-child)::before {
	content: ">";
	display: inline-block;
	margin-right: 0.8em;
	margin-left: 0.8em;
	vertical-align: middle;
}

.sitewrap-top ul a {
	vertical-align: middle;
	text-decoration: none;
	color: black;
}

.sitewrap-top ul a:hover {
	text-decoration: underline;
}

.page {
	background-color: white;
	width: 50%;
	min-width: 900px;
	margin: 0 auto;
	padding: 2em 3em;
}

h1 {
	font-size: 2.3em;
	color: white;
	background-color: #AED376;
	border-radius: 0.5em;
	padding: 0.5em;
	text-align: center;
}

p {
	font-size: 1.1em;
	font-weight: 600;
}

a {
	text-decoration: none;
	color: black;
}

.top-text {
	margin: 2em;
}

.top-img {
	width: 100%;
	margin: 1em auto 2em;
}

.conversation {
	display: flex;
	flex-direction: column;
	gap: 2em;
	width: 80%;
	margin: 0 auto 2em;
}

.conversation .lines {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.conversation .lines .arrow_boxs {
	width: 75%;
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.conversation .lines .character {
	width: 25%;
}

.character-wrapper {
	display: flex;
	flex-direction: column;
}

.character-wrapper,
span {
	font-weight: bold;
	font-size: 1em;
}

.arrow_box {
	width: 100%;
	position: relative;
	background: white;
	padding: 1.5em;
	border-radius: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 6em;
}

.arrow_box:after,
.arrow_box:before {
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
}

.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-width: 1em;
	border-bottom-width: 1em;
	border-left-width: 1.8em;
	border-right-width: 1.8em;
	margin-top: -1em;
}

.arrow_box:before {
	border-color: rgba(30, 144, 255, 0);
	border-top-width: 1.1em;
	border-bottom-width: 1.1em;
	border-left-width: 2em;
	border-right-width: 2em;
	margin-top: -1.1em;
}

.questioner {
	gap: 1em;
}

.questioner .arrow_box {
	border: 0.2em solid #E88AB6;
}

.questioner .arrow_box:after,
.questioner .arrow_box:before {
	left: 100%;
}

.questioner .arrow_box:after {
	border-left-color: #FFFFFF;
}

.questioner .arrow_box:before {
	margin-left: 0.1em;
	border-left-color: #E88AB6;
}

.professor {
	gap: 3em;
}

.professor .arrow_box {
	border: 0.2em solid #0059AA;
}

.professor .arrow_box:before {
	border-right-color: #0059AA;
}

.professor .arrow_box:after,
.professor .arrow_box:before {
	right: 100%;
}

.professor .arrow_box:after {
	border-right-color: #FFFFFF;
}

.products-points {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.products-points .products {
	width: 50%;
}

.products-points .points {
	width: 50%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.products-points .points .point {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 8em;
	width: 8em;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	padding: 1em;
	filter: drop-shadow(0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3));
	color: white;
	font-weight: bold;
}

.products-points .points .point .point-text {
	white-space: nowrap;
	text-align: center;
	font-size: 1.1em;
}

.products-points .points .point:nth-child(1) {
	background-image: url(../p_img/point1.webp);
}

.products-points .points .point:nth-child(2) {
	background-image: url(../p_img/point2.webp);
	margin: 0 -1em 10em;
}

.products-points .points .point:nth-child(3) {
	background-image: url(../p_img/point3.webp);
}

.products-points .points .point:nth-child(3) span {
	font-size: 0.8em;
}

section .section-title {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 1em;
	padding-bottom: 0.5em;
	margin: 3em auto;
}

section .section-title .nums {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	width: 5em;
	height: 5em;
	font-weight: bold;
	line-height: 1;
	color: white;
	box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
	padding: 0.5em;
	aspect-ratio: 1/1;
}

section .section-title .nums .text {
	font-size: 1em;
	margin-top: 0.5em;
}

section .section-title .nums .num {
	font-size: 2.5em;
	font-family: "Roboto", sans-serif;
}

section .section-title h2 {
	white-space: nowrap;
	font-size: 2.3em;
}

section .section-title p {
	text-align: left;
	font-size: 1em;
}

#point-1 .section-title {
	border-bottom: 0.15em solid #f28431;
}

#point-1 .section-title .nums {
	background-color: #f28431;
}

#point-1 .section-title h2 {
	color: #f28431;
}

#point-2 .section-title {
	border-bottom: 0.15em solid #b8c900;
}

#point-2 .section-title .nums {
	background-color: #b8c900;
}

#point-2 .section-title h2 {
	color: #b8c900;
}

#point-3 .section-title {
	border-bottom: 0.15em solid #0092E5;
}

#point-3 .section-title .nums {
	background-color: #0092E5;
}

#point-3 .section-title h2 {
	color: #0092E5;
}

#point-3 .section-title h2 span {
	font-size: 0.6em;
}

.chart {
	padding-top: 2em;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	gap: 1.5em;
}

.chart .normal,
.chart .eco {
	width: 21em;
	position: relative;
	padding: 1.5em;
	position: relative;
}

.chart .normal .title,
.chart .eco .title {
	position: absolute;
	top: -2em;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	white-space: nowrap;
	border-radius: 1em;
	color: white;
	padding: 0.5em 1em;
}

.chart .normal .title h3,
.chart .eco .title h3 {
	font-size: 1.5em;
}

.chart .normal .title h3 span,
.chart .eco .title h3 span {
	font-size: 0.9em;
}

.chart .normal .efficiencys,
.chart .eco .efficiencys {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	margin-top: 2em;
	gap: 1em;
}

.chart .normal .efficiencys p,
.chart .eco .efficiencys p {
	text-align: left;
}

.chart .normal .efficiencys .efficiency,
.chart .eco .efficiencys .efficiency {
	background-color: white;
	border-radius: 0.5em;
	padding: 0.5em;
	line-height: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 7.5em;
}

.chart .normal .efficiencys .efficiency div,
.chart .eco .efficiencys .efficiency div {
	border: none;
	font-weight: bold;
	font-size: 1.2em;
}

.chart .normal .efficiencys .efficiency span,
.chart .eco .efficiencys .efficiency span {
	font-size: 2.5em;
}

.chart .normal .charts,
.chart .eco .charts {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	position: relative;
}

.chart .normal .charts img,
.chart .eco .charts img {
	width: 14em;
	margin: 1em auto;
}

.chart .normal .charts .waste-heat-1,
.chart .normal .charts .waste-heat-2,
.chart .normal .charts .heat-exchange-1,
.chart .normal .charts .heat-exchange-2,
.chart .normal .charts .water,
.chart .normal .charts .gas,
.chart .normal .charts .hot-water,
.chart .eco .charts .waste-heat-1,
.chart .eco .charts .waste-heat-2,
.chart .eco .charts .heat-exchange-1,
.chart .eco .charts .heat-exchange-2,
.chart .eco .charts .water,
.chart .eco .charts .gas,
.chart .eco .charts .hot-water {
	position: absolute;
	font-weight: bold;
	line-height: 1;
}

.chart .normal .charts .waste-heat,
.chart .normal .charts .water,
.chart .normal .charts .gas,
.chart .normal .charts .hot-water,
.chart .eco .charts .waste-heat,
.chart .eco .charts .water,
.chart .eco .charts .gas,
.chart .eco .charts .hot-water {
	font-size: 1.2em;
}

.chart .normal .charts .waste-heat span,
.chart .normal .charts .water span,
.chart .normal .charts .gas span,
.chart .normal .charts .hot-water span,
.chart .eco .charts .waste-heat span,
.chart .eco .charts .water span,
.chart .eco .charts .gas span,
.chart .eco .charts .hot-water span {
	font-size: 0.7em;
}

.chart .normal .charts .water,
.chart .eco .charts .water {
	bottom: -0.5em;
	color: #0092E5;
}

.chart .normal .charts .gas,
.chart .eco .charts .gas {
	color: #F38200;
	bottom: -0.5em;
}

.chart .normal .charts .hot-water,
.chart .eco .charts .hot-water {
	color: #DC000C;
	bottom: -0.5em;
}

.chart .normal .side-questioner,
.chart .eco .side-questioner {
	position: absolute;
}

.chart .normal .side-questioner img,
.chart .eco .side-questioner img {
	width: 10em;
}

.chart .normal .side-questioner .arrow_boxs,
.chart .eco .side-questioner .arrow_boxs {
	position: absolute;
}

.chart .normal .side-questioner .arrow_boxs .arrow_box,
.chart .eco .side-questioner .arrow_boxs .arrow_box {
	transform: rotate(-7deg);
	padding: 1em;
	position: relative;
	width: 10em;
	height: auto;
	background: white;
	text-align: center;
	font-weight: bold;
	border-radius: 1em;
}

.chart .normal .side-questioner .arrow_boxs .arrow_box::after,
.chart .normal .side-questioner .arrow_boxs .arrow_box::before,
.chart .eco .side-questioner .arrow_boxs .arrow_box::after,
.chart .eco .side-questioner .arrow_boxs .arrow_box::before {
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	pointer-events: none;
	position: absolute;
	top: 100%;
	left: 74%;
}

.chart .normal .side-questioner .arrow_boxs .arrow_box::after,
.chart .eco .side-questioner .arrow_boxs .arrow_box::after {
	border-color: rgba(247, 247, 247, 0);
	border-top-width: 2.1em;
	border-bottom-width: 2.1em;
	border-left-width: 1em;
	border-right-width: 1em;
	margin-left: -3.5em;
	border-top-color: white;
}

.chart .normal .side-questioner .arrow_boxs .arrow_box::before,
.chart .eco .side-questioner .arrow_boxs .arrow_box::before {
	border-color: rgba(30, 144, 255, 0);
	border-top-width: 1.5em;
	border-bottom-width: 1.5em;
	border-left-width: 0.7em;
	border-right-width: 0.7em;
	margin-left: -3.2em;
	margin-top: 0em;
}

.chart .normal .side-questioner .arrow_boxs .arrow_box p,
.chart .eco .side-questioner .arrow_boxs .arrow_box p {
	font-size: 0.8em;
}

.chart .normal {
	background-color: #FFFBCD;
}

.chart .normal .title {
	background-color: #F38200;
}

.chart .normal .efficiency {
	border: 0.15em solid #F38200;
	color: #F38200;
}

.chart .normal .charts .waste-heat-1 {
	top: 9.5em;
	color: #E3380C;
}

.chart .normal .charts .heat-exchange-1 {
	top: 11.2em;
}

.chart .normal .charts .water {
	left: 3.3em;
}

.chart .normal .charts .gas {
	right: 6em;
}

.chart .normal .charts .hot-water {
	right: 3.5em;
}

.chart .normal .side-questioner {
	top: 7em;
	left: -11em;
}

.chart .normal .side-questioner .arrow_boxs {
	top: -6.5em;
	left: -1em;
}

.chart .normal .side-questioner .arrow_boxs .arrow_box {
	transform: rotate(-7deg);
	border: 0.15em solid #f38200;
}

.chart .normal .side-questioner .arrow_boxs .arrow_box::before {
	border-top-color: #f38200;
}

.chart .normal .side-questioner .arrow_boxs .arrow_box p {
	font-size: 0.8em;
}

.chart .eco {
	background-color: #E9F0CB;
}

.chart .eco .title {
	background-color: #399D26;
}

.chart .eco .efficiency {
	border: 0.15em solid #399D26;
	color: #399D26;
}

.chart .eco .charts .waste-heat-1 {
	top: 5.8em;
	color: #E3380C;
}

.chart .eco .charts .waste-heat-2 {
	color: #E3380C;
	text-align: center;
	right: 3.5em;
	top: 12.5em;
}

.chart .eco .charts .heat-exchange-1 {
	top: 15.2em;
}

.chart .eco .charts .heat-exchange-2 {
	top: 7.3em;
}

.chart .eco .charts .water {
	left: 2.9em;
}

.chart .eco .charts .gas {
	right: 6em;
}

.chart .eco .charts .hot-water {
	right: 3.3em;
}

.chart .eco .side-questioner {
	bottom: 7em;
	right: -11em;
}

.chart .eco .side-questioner img {
	width: 10em;
}

.chart .eco .side-questioner .arrow_boxs {
	top: -6.5em;
	right: -1em;
}

.chart .eco .side-questioner .arrow_boxs .arrow_box {
	transform: rotate(7deg);
	border: 0.15em solid #399d26;
}

.chart .eco .side-questioner .arrow_boxs .arrow_box::before {
	border-top-color: #399d26;
}

.chart .eco .side-questioner .arrow_boxs .arrow_box p {
	font-size: 0.8em;
}

.cost-simulation {
	width: 100%;
	min-height: 30em;
	background: linear-gradient(90deg, #FFFBCD 0%, #FFFBCD 50%, #EAF0CB 50%, #EAF0CB 100%);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cost-simulation .conventional-title,
.cost-simulation .eco-title {
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
	color: white;
	font-weight: bold;
	font-size: 1.5em;
	white-space: nowrap;
	line-height: 1;
	padding: 0.4em 0.5em 0.2em;
	border-radius: 100vw;
}

.cost-simulation .conventional-title {
	left: 25%;
	background-color: #F38200;
}

.cost-simulation .eco-title {
	left: 75%;
	background-color: #399D26;
}

.cost-simulation .products {
	display: flex;
	width: 100%;
}

.cost-simulation .products .product {
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 1em;
	padding: 2.5em 1.5em 1em;
}

.cost-simulation .products .product img {
	width: 50%;
}

.cost-simulation .products .product .product-info {
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	font-weight: bold;
	text-align: left;
}

.cost-simulation .products .product .product-info img {
	width: 80%;
}

.cost-simulation .costs {
	width: 95%;
	background-color: white;
	padding: 0.5em;
	margin-bottom: 2em;
	position: relative;
}

.cost-simulation .costs:nth-child(6) {
	margin-bottom: 1em;
	margin-top: 3.5em;
}

.cost-simulation .costs:nth-child(6) .cost-title {
	background-color: #DC000C;
}

.cost-simulation .costs .cost-title {
	width: 100%;
	background-color: #006BBE;
	padding: 0.3em 0.5em 0.2em;
	color: white;
	text-align: center;
	font-size: 1.7em;
	font-weight: bold;
}

.cost-simulation .costs .cost-title span {
	font-size: 0.8em;
}

.cost-simulation .costs .cost-wrapper {
	display: flex;
	flex-wrap: nowrap;
	position: relative;
}

.cost-simulation .costs .cost-wrapper .cost {
	font-weight: bold;
	font-size: 2.5em;
	width: 50%;
	text-align: center;
}

.cost-simulation .costs .cost-wrapper .cost:first-child {
	margin-right: 2.5%;
}

.cost-simulation .costs .cost-wrapper .cost:last-child {
	margin-left: 2.5%;
	position: relative;
}

.cost-simulation .costs .cost-wrapper .cost:last-child .high-cost,
.cost-simulation .costs .cost-wrapper .cost:last-child .low-cost {
	position: absolute;
	font-size: 0.6em;
	color: white;
	padding: 0 0.5em;
	white-space: nowrap;
	left: 90%;
	top: 50%;
	transform: translateY(-50%);
}

.cost-simulation .costs .cost-wrapper .cost:last-child .high-cost::before,
.cost-simulation .costs .cost-wrapper .cost:last-child .low-cost::before {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 0.4em solid transparent;
	border-bottom: 0.4em solid transparent;
	border-left: 0;
	top: 50%;
	transform: translateY(-50%);
	left: -0.8em;
}

.cost-simulation .costs .cost-wrapper .cost:last-child .high-cost {
	background-color: #D6006C;
}

.cost-simulation .costs .cost-wrapper .cost:last-child .high-cost::before {
	border-right: 0.8em solid #D6006C;
}

.cost-simulation .costs .cost-wrapper .cost:last-child .low-cost {
	background-color: #0092E5;
}

.cost-simulation .costs .cost-wrapper .cost:last-child .low-cost::before {
	border-right: 0.8em solid #0092E5;
}

.cost-simulation .costs .cost-wrapper .crown {
	position: relative;
}

.cost-simulation .costs .cost-wrapper .crown::before {
	content: "";
	position: absolute;
	transform: translateY(-50%);
	left: calc(0% - 0.2em);
	top: 50%;
	background: url(../p_img/crown.svg);
	width: 1.5em;
	height: 1.5em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.cost-simulation .costs .cost-wrapper .period {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: bold;
	border: 0.15em solid black;
	padding: 0.3em 0.5em 0.15em;
	line-height: 1;
}

.cost-simulation .costs .under-arrow {
	position: absolute;
	transform: translate(-50%);
	left: 50%;
	top: 90%;
	width: 10em;
}

.cost-simulation .side-Professor1,
.cost-simulation .side-Professor2 {
	position: absolute;
}

.cost-simulation .side-Professor1 img,
.cost-simulation .side-Professor2 img {
	width: 10em;
}

.cost-simulation .side-Professor1 .arrow_boxs,
.cost-simulation .side-Professor2 .arrow_boxs {
	position: absolute;
}

.cost-simulation .side-Professor1 .arrow_boxs .arrow_box,
.cost-simulation .side-Professor2 .arrow_boxs .arrow_box {
	padding: 1em;
	position: relative;
	width: 10em;
	height: auto;
	background: white;
	text-align: center;
	font-weight: bold;
	border-radius: 1em;
	border: 0.15em solid #0059AA;
}

.cost-simulation .side-Professor1 .arrow_boxs .arrow_box::after,
.cost-simulation .side-Professor1 .arrow_boxs .arrow_box::before,
.cost-simulation .side-Professor2 .arrow_boxs .arrow_box::after,
.cost-simulation .side-Professor2 .arrow_boxs .arrow_box::before {
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	pointer-events: none;
	position: absolute;
	top: 100%;
	left: 74%;
}

.cost-simulation .side-Professor1 .arrow_boxs .arrow_box::after,
.cost-simulation .side-Professor2 .arrow_boxs .arrow_box::after {
	border-color: rgba(247, 247, 247, 0);
	border-top-width: 2.1em;
	border-bottom-width: 2.1em;
	border-left-width: 1em;
	border-right-width: 1em;
	margin-left: -3.5em;
	border-top-color: white;
}

.cost-simulation .side-Professor1 .arrow_boxs .arrow_box::before,
.cost-simulation .side-Professor2 .arrow_boxs .arrow_box::before {
	border-color: rgba(30, 144, 255, 0);
	border-top-width: 1.5em;
	border-bottom-width: 1.5em;
	border-left-width: 0.7em;
	border-right-width: 0.7em;
	margin-left: -3.2em;
	margin-top: 0em;
	border-top-color: #0059AA;
}

.cost-simulation .side-Professor1 .arrow_boxs .arrow_box p,
.cost-simulation .side-Professor2 .arrow_boxs .arrow_box p {
	font-size: 0.8em;
	white-space: nowrap;
}

.cost-simulation .side-Professor1 {
	top: 30%;
	left: -11em;
}

.cost-simulation .side-Professor1 img {
	width: 10em;
}

.cost-simulation .side-Professor1 .arrow_boxs {
	top: -8em;
	right: 1em;
}

.cost-simulation .side-Professor1 .arrow_boxs .arrow_box {
	transform: rotate(-7deg);
}

.cost-simulation .side-Professor1 .arrow_boxs .arrow_box p {
	font-size: 0.8em;
}

.cost-simulation .side-Professor2 {
	bottom: -5em;
	right: -11em;
}

.cost-simulation .side-Professor2 img {
	width: 20em;
}

.cost-simulation .side-Professor2 .arrow_boxs {
	top: -8.5em;
	right: 1.5em;
}

.cost-simulation .side-Professor2 .arrow_boxs .arrow_box::after,
.cost-simulation .side-Professor2 .arrow_boxs .arrow_box::before {
	left: 50%;
}

.cost-simulation .side-Professor2 .arrow_boxs .arrow_box p {
	color: #DC000C;
	font-size: 1em;
}

.cost-simulation .side-Professor2 .arrow_boxs .arrow_box p span {
	background: linear-gradient(transparent 60%, #ff6 60%);
	padding: 0 0.5em;
	font-size: 1.2em;
}

.cost-caption {
	width: 100%;
	margin-top: 1em;
	text-align: left;
}

.cost-caption p {
	text-align: left;
	font-size: 1.2em;
}

.caption li {
	list-style-type: none;
	font-size: 0.8em;
	margin-left: -1.6em;
	position: relative;
	text-align: left;
}

.caption li::before {
	content: "※";
	position: absolute;
	left: -1em;
}

.energy-comparison-yearly {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5em;
	width: 90%;
	margin: 0 auto;
}

.energy-comparison-yearly h4 {
	font-size: 1.5em;
	color: #0092E5;
	position: relative;
	margin-left: 1.5em;
}

.energy-comparison-yearly h4::before {
	content: "";
	display: block;
	position: absolute;
	width: 1.5em;
	height: 1.5em;
	background-image: url(../p_img/bud.svg);
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	left: -1.5em;
	top: -0.2em;
}

.energy-comparison-yearly .conventional,
.energy-comparison-yearly .eco {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	gap: 1em;
}

.energy-comparison-yearly .conventional .info,
.energy-comparison-yearly .eco .info {
	display: flex;
	flex-direction: column;
	font-weight: bold;
	width: 13em;
	white-space: no-wrap;
	text-align: left;
}

.energy-comparison-yearly .conventional .info .graph-title,
.energy-comparison-yearly .eco .info .graph-title {
	font-size: 1.3em;
	white-space: nowrap;
	width: 10em;
}

.energy-comparison-yearly .conventional .info img,
.energy-comparison-yearly .eco .info img {
	width: 80%;
}

.energy-comparison-yearly .conventional .graph,
.energy-comparison-yearly .eco .graph {
	width: 80%;
	position: relative;
}

.energy-comparison-yearly .conventional .graph img,
.energy-comparison-yearly .eco .graph img {
	width: 100vw;
}

.energy-comparison-yearly .conventional .graph .energy-usage,
.energy-comparison-yearly .eco .graph .energy-usage {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-weight: bold;
	white-space: nowrap;
}

.energy-comparison-yearly .conventional .graph .energy-usage .data,
.energy-comparison-yearly .eco .graph .energy-usage .data {
	font-size: 2em;
}

.energy-comparison-yearly .conventional .graph .energy-usage .mj,
.energy-comparison-yearly .eco .graph .energy-usage .mj {
	font-size: 1.5em;
}

.energy-comparison-yearly .conventional .graph .energy-cut,
.energy-comparison-yearly .eco .graph .energy-cut {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	background-color: #6AAF47;
	color: white;
	font-weight: bold;
	right: 0;
	bottom: -4em;
	padding: 0.5em 1em;
	white-space: nowrap;
}

.energy-comparison-yearly .conventional .graph .energy-cut::before,
.energy-comparison-yearly .eco .graph .energy-cut::before {
	content: "";
	position: absolute;
	top: -1.5em;
	right: 2em;
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 1em solid transparent;
	border-left: 1em solid transparent;
	border-bottom: 1.7em solid #6AAF47;
	border-top: 0;
}

.energy-comparison-yearly .conventional .graph .energy-cut .energy-cut2,
.energy-comparison-yearly .eco .graph .energy-cut .energy-cut2 {
	margin-left: 0.5em;
}

.energy-comparison-yearly .conventional .graph .energy-cut .energy-cut2 .energy-cut2-1,
.energy-comparison-yearly .eco .graph .energy-cut .energy-cut2 .energy-cut2-1 {
	font-size: 1.5em;
}

.energy-comparison-yearly .caption {
	font-size: 0.8em;
	margin-top: 3em;
	margin-bottom: 5em;
	text-align: left;
}

.last-message {
	background-color: #fff6e8;
	border-radius: 1%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	gap: 1em;
	padding: 2em;
	border-radius: 1em;
}

.last-message img {
	width: 45%;
}

.last-message p {
	text-align: left;
	width: 50%;
}

small {
	text-align: center;
	width: 100%;
	display: block;
	margin: 3em auto 0;
	padding-bottom: 0.5em;
}

/*# sourceMappingURL=style.css.map */

@charset "utf-8";


/* all
-------------------------------------------------------------------*/
html {
	font-family: メイリオ, Meiryo, 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: max(14px, 1vw);
}


body {
	width: 100%;
	font-size: 100%;
	text-align: center;
}

.sitewrap {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* footer
-------------------------------------------------------------------*/

footer {
	background: #ebf4fe;
	padding: 2em 0;
	width: 100vw;
}

.footer_top {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2em;
	width: 100vw;
	margin-bottom: 1em;
}

#foot_left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

#foot_left>a {
	display: inline-block;
	white-space: nowrap;
}

#foot_left>a img {
	/* width: 208px; */
	vertical-align: middle;
	width: 13em;
}

#foot_left p {
	margin-top: 0.5em;
	font-size: 0.8em;
	color: #282828;
	font-weight: normal;
}

#foot_left p:first-of-type {
	margin-top: 0.8em;
}

#foot_right {
	font-size: 0.8em;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 2em;
}

#foot_right ul {
	border-left: 0.1em solid #bdbdbd;
	margin: 0;
}

#foot_right li {
	display: block;
	text-align: left;
	white-space: nowrap;
}

#foot_right li a,
.footer_bottom ul li a {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

#foot_right li a:before,
.footer_bottom ul li a:before {
	position: absolute;
	display: inline-block;
	content: "";
	width: 100%;
	height: 0.1em;
	background: #142e7a;
	bottom: 0;
	left: -100%;
	transition: left .2s;
}

#foot_right li a:hover,
.footer_bottom ul li a:hover {
	text-decoration: none;
}

#foot_right li a:hover:before,
.footer_bottom ul li a:hover:before {
	left: 0;
}

.footer_bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 0.1em solid #bdbdbd;
	font-size: 0.8em;
	padding-top: 0.7em;
	flex-direction: column;
}

.footer_bottom ul li {
	display: inline-block;
	padding: 0 0.8em;
	border-left: 0.1em solid #bdbdbd;
}

.footer_bottom ul li:first-of-type {
	padding-left: 0;
	border-left: none;
}

@media screen and (max-width:768px) {

	footer {
		padding: 2em 0 1em;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.footer_top {
		margin-bottom: 0.8em;
		flex-direction: column;
	}

	#foot_left {
		text-align: center;
		width: 100%;
		align-items: center;
	}

	#foot_left>a {
		display: inline-block;
	}

	#foot_left p {
		margin-top: 0.4em;
		font-size: 0.8em;
		color: #282828;
		text-align: center;
		width: 100%;
		display: block;
	}

	#foot_left p:first-of-type {
		margin-top: 10px;
	}

	#foot_right {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#foot_right ul {
		border-left: none;
		padding: 0;
		text-align: center;
		border-top: 0.1em solid #bdbdbd;
		width: calc(100vw - 2em);
		padding-top: 1em;
	}

	#foot_right li {
		text-align: center;
	}

	.footer_bottom {
		justify-content: center;
		width: calc(100vw - 2em);
	}

	.footer_bottom ul {
		display: none;
	}
}