@charset "UTF-8";
:root { --text-green: #81a23e; --text-yellow: #fcee21; --text-red: #c30d23; }

.header { background-color: rgba(0, 0, 0, 0); transition: background 0.3s ease 0s; }
.header.bgActive { background-color: black; }

.bg-white { position: relative; background-color: #fff; }

.contentsArea { padding-bottom: 0; }

.header-space { height: 1px; }

/******************************************************

spfooterinformation

******************************************************/
#spFooterNav { opacity: 0; pointer-events: none; transition: 0.3s linear 0s opacity; }
#spFooterNav ul li a { pointer-events: none; }
#spFooterNav.active { opacity: 1; pointer-events: auto; }
#spFooterNav.active ul li a { pointer-events: auto; }

.page-wrap { padding-bottom: 0rem; }

/******************************************************

main

******************************************************/
.page_title { font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 500; font-style: normal; }

#main .main-txt { width: 90%; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; color: #fff; }
#main .main-txt .page_title { color: #fff; margin-bottom: 1rem; }
#main .note { position: absolute; bottom: 5px; right: 5px; color: #fff; }

#block00 { margin-top: 4rem; margin-bottom: 4rem; }
#block00 .midashi-M { margin-bottom: 2rem; }
#block00 .midashi-M img { vertical-align: sub; margin-right: 15px; }

.category_ttl_box::before { background: url("../img/zeh-m/yashi_bg01_green.png") top left no-repeat; background-size: 100% auto; }
.category_ttl_box::after { background: url("../img/zeh-m/yashi_bg02_green.png") top right no-repeat; background-size: 100% auto; }
.category_ttl_box .category_ttl { font-size: 2.2rem; font-weight: bold; }
.category_ttl_box .category_ttl img { margin: 0 10px 2px 0; max-width: 300px; }
.category_ttl_box .category_ttl img img { width: 100%; height: auto; }
.category_ttl_box .category_ttl::after { background: url(../img/top/line03.png) top center no-repeat; background-size: 100% auto; margin-top: 2rem; }

.contents_inner .img { margin-top: 8rem; max-width: 880px; margin-inline: auto; }
.contents_inner .img img { width: 100%; height: auto; }

@media screen and (max-width: 599px) { .main { padding-bottom: 100%; }
  .main .page-name .ja { margin-top: 1.5rem; }
  .category_ttl_box .category_ttl img { display: block; margin: 0 auto 10px auto; }
  .contents_inner .img { margin-top: 3rem; } }
/******************************************************
 common

******************************************************/
.section { font-family: '游ゴシック', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
.section::before { content: ''; background-image: linear-gradient(to right, #000 2px, transparent 2px); background-size: 10px 2px; background-repeat: repeat-x; display: block; height: 2px; max-width: 880px; width: 90%; margin-inline: auto; margin-top: 4rem; margin-bottom: 4rem; }

.section-header { max-width: 880px; width: 90%; margin-inline: auto; text-align: center; line-height: 1.4; }
.section-header .point-number { font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; color: var(--text-green); font-size: 2.9rem; font-weight: bold; display: flex; justify-content: center; gap: 15px; align-items: flex-end; }
.section-header .point-number .number { font-size: 138%; line-height: 1.2; }
.section-header .catch-copy { background-color: var(--text-green); font-size: 1.8rem; font-weight: bold; color: #ffffff; margin-top: 1rem; font-feature-settings: "palt"; letter-spacing: 0.04em; padding: 6px 10px; }
.section-header .catch-copy strong { color: var(--text-yellow); }
.section-header .text { font-size: 1.0rem; margin-top: 2rem; text-align: left; line-height: 1.7; }

.section-body { max-width: 880px; width: 90%; margin-inline: auto; }

@media screen and (max-width: 599px) { .section-header .catch-copy { font-size: 2.2rem; } }
/******************************************************
 point01

******************************************************/
#point01 { margin-top: 1rem; }
#point01::before { display: none; }
#point01 .energy { border: 1px solid var(--text-green); border-radius: 2rem; margin-top: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 30px 49px; position: relative; }
#point01 .energy .plus { position: absolute; left: 48%; top: 28%; width: 72px; }
#point01 .energy .plus img { width: 100%; height: auto; }
#point01 .energy .point { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 0; }
#point01 .energy .point .title { font-size: 1.7rem; font-weight: bold; text-align: center; }
#point01 .energy .point .img { margin-inline: auto; margin-top: 2.5rem; }
#point01 .energy .point .img img { width: 100%; height: auto; }
#point01 .energy .point .catch { background-color: var(--text-red); color: #ffffff; font-size: 1.15rem; text-align: center; padding: 10px; border-radius: 1rem; font-feature-settings: "palt"; letter-spacing: 0.02em; font-weight: bold; margin-top: 4rem; }
#point01 .energy .point .catch strong { font-size: 200%; }
#point01 .energy .point .text { font-size: 1.0rem; margin-top: 20px; line-height: 1.6; }
#point01 .energy .point01 .img img { scale: 1.06; }
#point01 .energy .point02 .img { max-width: 250px; }
#point01 .energy::before { content: ""; position: absolute; bottom: 0; left: 50%; border-style: solid; border-width: 30px 30px 0 30px; border-color: var(--text-green) transparent transparent; translate: -50% 100%; }
#point01 .energy::after { content: ""; position: absolute; bottom: 0; left: 50%; border-style: solid; border-width: 28.6px 28.6px 0 28.6px; border-color: #ffffff transparent transparent; translate: -50% 100%; }
#point01 .result { margin-top: 5rem; }
#point01 .result .title { color: #ffffff; background-color: var(--text-green); font-size: 1.7rem; display: flex; justify-content: center; font-weight: bold; align-items: flex-end; flex-wrap: wrap; gap: 10px 0; padding: 15px 10px; border-radius: 0.5rem; line-height: 1; }
#point01 .result .title strong { color: var(--text-yellow); font-size: 2.2rem; }
#point01 .result .title strong .number { font-size: 151%; }
#point01 .result .sub-title { font-size: 1.3rem; font-weight: bold; margin-top: 1.5rem; font-feature-settings: "palt"; letter-spacing: 0.02em; line-height: 1.2; }
#point01 .result .sub-title strong { font-size: 111%; color: var(--text-green); }
#point01 .result .detail-list { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
#point01 .result .detail-list .detail { font-family: "zen-kaku-gothic-new", sans-serif; font-weight: 400; font-style: normal; border: 2px solid var(--text-green); display: flex; flex-wrap: wrap; justify-content: center; font-size: 1.45rem; font-weight: bold; align-items: flex-end; gap: 5px 2px; padding: 15px 0; }
#point01 .result .detail-list .detail strong { font-size: 165%; color: var(--text-green); }
#point01 .result .detail-list .detail .note { font-size: 12px; }
#point01 .result .detail-list + .note { margin-top: 1.5rem; }

@media screen and (max-width: 1024px) { #point01 .energy { padding: 30px 40px; }
  #point01 .energy .plus { left: 50%; width: 40px; } }
@media screen and (max-width: 599px) { #point01 { margin-top: 0; }
  #point01 .energy { grid-template-columns: 1fr; padding: 25px 30px; }
  #point01 .energy .plus { position: static; margin-inline: auto; width: 72px; }
  #point01 .energy .point .title { font-size: 2rem; }
  #point01 .energy .point .catch { margin-top: 2.5rem; }
  #point01 .energy .point01 .img { max-width: 339px; }
  #point01 .energy .point01 .img img { scale: 1; }
  #point01 .result .title strong { text-align: center; }
  #point01 .result .sub-title { text-align: center; }
  #point01 .result .detail-list { grid-template-columns: 1fr; }
  #point01 .result .detail-list .detail { flex-direction: column; padding: 10px; }
  #point01 .result .detail-list .detail > * { margin-inline: auto; } }
/******************************************************
 point02

******************************************************/
#point02 .section-body { display: grid; grid-template-columns: 45.22% 50%; gap: 20px 4.77%; margin-top: 2rem; }
#point02 .section-body .grade .title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; }
#point02 .section-body .grade .img img { width: 100%; height: auto; }
#point02 .section-body .grade01 .img img { scale: 1.05; }
#point02 .section-body .grade02 .img img { scale: 1.03; transform-origin: bottom left; }
#point02 .section-body .note { grid-column: span 2; }

@media screen and (max-width: 599px) { #point02 .section-body { grid-template-columns: 1fr; }
  #point02 .section-body .grade01, #point02 .section-body .grade02 { margin-top: 2rem; }
  #point02 .section-body .grade01 .img img, #point02 .section-body .grade02 .img img { scale: 1; }
  #point02 .section-body .note { grid-column: span 1; } }
/******************************************************
 point03

******************************************************/
#point03 .overview { display: grid; grid-template-columns: 60.22% 35.22%; gap: 20px 4.54%; margin-top: 3rem; }
#point03 .overview .img { position: relative; max-width: 530px; }
#point03 .overview .img img { width: 100%; height: auto; }
#point03 .overview .img .note { position: absolute; right: 3px; bottom: 3px; color: #ffffff; }
#point03 .overview .text { font-size: 1.0rem; text-align: left; line-height: 1.7; }
#point03 .for-body { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem 48px; }
#point03 .for-body .title { color: var(--text-green); font-size: 2.3rem; font-weight: bold; font-feature-settings: "palt"; letter-spacing: 0.02em; grid-column: span 2; }
#point03 .for-body .img { max-width: 416px; }
#point03 .for-body .img img { width: 100%; height: auto; }

@media screen and (max-width: 599px) { #point03 .overview { grid-template-columns: 1fr; }
  #point03 .overview .img { margin-inline: auto; }
  #point03 .for-body { grid-template-columns: 1fr; }
  #point03 .for-body .title { grid-column: span 1; text-align: center; }
  #point03 .for-body .img { margin-inline: auto; } }
/******************************************************
 point04

******************************************************/
#point04 { background-color: rgba(189, 204, 212, 0.2); margin-top: 7rem; padding: 7rem 0; }
#point04::before { display: none; }
#point04 .equipments { border: 1px solid var(--text-green); border-radius: 2rem; margin-top: 4rem; background-color: #ffffff; padding: 30px 29px; overflow: hidden; margin-top: 4rem; }
#point04 .equipments .name { background-color: var(--text-green); color: #ffffff; font-size: 2rem; font-weight: bold; font-feature-settings: "palt"; letter-spacing: 0.02em; padding: 10px; text-align: center; margin-inline: -29px; margin-block-start: -30px; }
#point04 .equipments .content { margin-top: 2rem; }
#point04 .equipments .content img { width: 100%; height: auto; }
#point04 .equipments .content > .text { font-size: 1.0rem; line-height: 1.6; }
#point04 .equipments .content > .note:last-child { margin-top: 2rem; }
#point04 .ecojozu { margin-top: 2.5rem; }
#point04 .ecojozu .content { display: grid; grid-template-columns: 47.19% 47.8%; grid-template-rows: repeat(3, max-content); gap: 25px 5%; margin-top: 3rem; }
#point04 .ecojozu .content .description .logo { max-width: 326px; width: 80%; margin-inline: auto; }
#point04 .ecojozu .content .description .logo img { width: 100%; height: auto; }
#point04 .ecojozu .content .description .text { font-size: 1.0rem; line-height: 1.6; margin-top: 2rem; }
#point04 .ecojozu .content .figure { grid-row: span 2; position: relative; }
#point04 .ecojozu .content .figure img { width: 100%; height: auto; }
#point04 .ecojozu .content .figure .note { position: absolute; right: 0; bottom: 0; width: 70%; line-height: 1.2; }
#point04 .ecojozu .content .merit img { width: 100%; height: auto; }
#point04 .ecojozu .content > .note { grid-column: span 2; }
#point04 .ecojozu .content > .note:last-child { margin-top: 0; }
#point04 .danran .detail { border-radius: 1rem; border: 2px solid var(--text-red); padding: 20px 28px; margin-top: 1.5rem; }
#point04 .danran .detail01 { display: grid; grid-template-columns: 0.8fr 1fr; gap: 0 30px; align-items: center; }
#point04 .danran .detail01 .img { grid-row: span 2; max-width: 328px; }
#point04 .danran .detail01 .title { font-size: 1.5rem; font-weight: bold; font-feature-settings: "palt"; letter-spacing: 0.02em; }
#point04 .danran .detail01 .text { font-size: 12px; line-height: 1.4; margin-top: 5px; }
#point04 .danran .detail02 .detail-header { display: grid; grid-template-columns: 0.4fr 0.9fr 1fr; gap: 10px 5px; align-items: center; }
#point04 .danran .detail02 .detail-header .text { font-size: 11px; font-weight: bold; }
#point04 .danran .detail02 .detail-header .text strong { font-size: 17px; }
#point04 .danran .detail02 .detail-header .merit { max-width: 348px; }
#point04 .danran .detail02 .detail-header + .text { font-size: 12px; line-height: 1.4; margin-top: 10px; }
#point04 .danran .detail03 { border: 0; padding: 25px 30px; background-color: #d3e9ef; }
#point04 .toilet .merit { margin-top: 2rem; display: grid; grid-template-columns: 1fr 0.6fr; gap: 30px 90px; }
#point04 .toilet .merit .title { font-size: 2.3rem; font-feature-settings: "palt"; letter-spacing: 0.02em; font-weight: bold; grid-column: span 2; }
#point04 .toilet .merit .title strong { color: var(--text-green); }
#point04 .toilet .merit .img01 { max-width: 450px; }
#point04 .toilet .merit .img02 { max-width: 274px; }
#point04 .toilet .simulation { margin-top: 2rem; }
#point04 .toilet .simulation .title { font-size: 17px; font-weight: bold; border-bottom: 1px solid #000000; padding-bottom: 5px; font-feature-settings: "palt"; letter-spacing: 0.02em; }
#point04 .toilet .simulation .title .date { font-size: 12px; }
#point04 .toilet .simulation ul { display: flex; flex-wrap: wrap; gap: 3px 5px; margin-top: 10px; }
#point04 .toilet .simulation ul li { display: flex; align-items: center; font-weight: bold; font-size: 16px; }
#point04 .toilet .simulation ul li .sub-title { font-size: 13px; }
#point04 .toilet .simulation ul li .note { font-size: 12px; }
#point04 .toilet .save-water { border-radius: 1rem; background-color: var(--text-red); padding: 25px 30px; margin-top: 2rem; }
#point04 .shower .content .txtArea { width: 82%; }
#point04 .shower .content .pic { width: 17%; }
#point04 .shower .content .note { width: 100%; margin-top: 1rem; }
#point04 .shower .detail { border-radius: 1rem; background-color: var(--text-red); padding: 25px 30px; margin-top: 2rem; display: grid; grid-template-columns: 180px 1fr; gap: 20px; overflow: hidden; }
#point04 .shower .detail .img { margin-inline-start: -30px; margin-block: -25px; position: relative; }
#point04 .shower .detail .img img { object-fit: cover; width: 100%; height: 100%; }
#point04 .shower .detail .img .note { color: #ffffff; position: absolute; right: 3px; bottom: 3px; }
#point04 .shower .detail .text { display: grid; place-items: center; }
@media screen and (max-width: 599px) { #point04 .shower .content .txtArea { width: 48%; }
  #point04 .shower .content .txtArea .text { line-height: 1.6; }
  #point04 .shower .content .pic { width: 50%; }
  #point04 .shower .content .note { width: 100%; margin-top: 1rem; } }

@media screen and (max-width: 1024px) { #point04 .danran .detail01 { grid-template-columns: 1fr; }
  #point04 .danran .detail01 .img { grid-row: span 1; margin-inline: auto; }
  #point04 .danran .detail01 .title { margin-top: 20px; }
  #point04 .danran .detail02 .detail-header { grid-template-columns: 0.3fr 1fr; justify-content: center; max-width: 400px; margin-inline: auto; }
  #point04 .danran .detail02 .detail-header .merit { grid-column: span 2; margin-inline: auto; }
  #point04 .danran .detail02 .detail-header + .text { margin-top: 20px; } }
@media screen and (max-width: 599px) { #point04 { margin-top: 5rem; padding: 5rem 0; }
  #point04 .equipments { padding: 25px 25px; margin-top: 2.5rem; }
  #point04 .equipments .name { margin-inline: -25px; margin-block-start: -25px; }
  #point04 .ecojozu .content { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); }
  #point04 .ecojozu .content .description { order: 1; }
  #point04 .ecojozu .content .figure { grid-row: span 1; order: 3; }
  #point04 .ecojozu .content .figure .note { position: static; width: 100%; margin-top: 20px; }
  #point04 .ecojozu .content .merit { order: 2; }
  #point04 .ecojozu .content .note { grid-column: span 1; order: 4; }
  #point04 .danran .detail { padding: 15px 20px; }
  #point04 .danran .detail .title { text-align: center; }
  #point04 .danran .detail02 .detail-header { grid-template-columns: 0.8fr 1fr; }
  #point04 .toilet .merit { grid-template-columns: 1fr; }
  #point04 .toilet .merit .title { grid-column: span 1; text-align: center; }
  #point04 .toilet .merit .img01, #point04 .toilet .merit .img02 { margin-inline: auto; }
  #point04 .shower .detail { grid-template-columns: 0.7fr 1fr; gap: 15px; padding: 20px; }
  #point04 .shower .detail .img { margin-inline-start: -20px; margin-block: -20px; } }
/******************************************************
 point05

******************************************************/
#point05 { margin-top: 6rem; }
#point05::before { display: none; }
#point05 .section-body { margin-top: 3rem; }
#point05 .section-body .figure .title { font-size: 14px; font-weight: bold; }
#point05 .section-body .figure .img { margin-top: 15px; }
#point05 .section-body .figure .img img { width: 100%; height: auto; }
#point05 .section-body .note { margin-top: 1.5rem; }
#point05 .jutakuseinou { max-width: 880px; width: 90%; margin: 5rem auto 0; }
#point05 .jutakuseinou h5 { width: 100%; text-align: center; color: var(--text-green); font-size: 1.5rem; font-weight: bold; margin-bottom: 2rem; }
#point05 .jutakuseinou p { width: 55%; line-height: 1.8; }
#point05 .jutakuseinou .pic { width: 42%; }

@media screen and (max-width: 599px) { #point05 { margin-top: 4rem; }
  #point05 .jutakuseinou p { width: 100%; margin-bottom: 2rem; }
  #point05 .jutakuseinou .pic { width: 100%; } }
#point06 { margin: 5rem auto 0; }
#point06::before { content: none; }
#point06 h5 { width: 100%; text-align: center; color: var(--text-green); font-size: 1.5rem; font-weight: bold; margin-bottom: 2rem; margin-top: 2rem; }
#point06 p { line-height: 1.8; width: 100%; text-align: center; }