@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {position: absolute;top: 50%;left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 500%;font-weight: normal;font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.15em;line-height: 0.58;}
#Billboard h2 + p {position: absolute;bottom: 50%;left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 180%;font-weight: normal;font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.25em;line-height: 1;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;background-color: lightskyblue;mix-blend-mode: multiply;opacity: 0.6;}

#Main .block-economical-01 {position: relative;}
#Main .block-economical-01 h2 {font-size: 175%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;text-align: center;color: #3da7ba;}
#Main .block-economical-01 h2 strong {font-weight: normal;font-size: 240%;letter-spacing: 0.05em;line-height: 0.8;display: inline-block;}
#Main .block-economical-01 h3 span {display: inline-block;white-space: nowrap;}
#Main .block-economical-01 h3::before {content: "";position: absolute;top: 0.5em;left: 0;width: 2.75em;height: 2.75em;}
#Main .block-economical-01 h3 + figure {margin: 2em 0;}
#Main .block-economical-01 section h3 {position: relative;padding-left: 3.4em;}
#Main .block-economical-01 section {position: relative;margin-top: 1em;padding: 3em;overflow: hidden;}
#Main .block-economical-01 section h4 {position: relative}
#Main .block-economical-01 section h4 small {color: #272f33;font-size: 50%;font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;letter-spacing: 0; position: absolute;right: 0;bottom: 0;}
#Main .block-economical-01 .lineup {margin: 1.5em 0 3em;}
#Main .block-economical-01 .lineup img[alt="eco"] {width: auto;height: 2em;}
#Main .block-economical-01 .lineup img[alt="mem"] {width: auto;height: 3em;}
#Main .block-economical-01 .lineup img[alt="refa"] {width: auto;height: 2em;}
#Main .block-economical-01 .lineup img[alt="panasonic"] {width: auto;height: 1.3em;transform: translateY(-10%);}
#Main .block-economical-01 .lineup img[alt="mitsubishielectric"] {width: auto;height: 2.1em;transform: translateY(-10%);}
#Main .block-economical-01 .lineup img[alt="toto"] {width: auto;height: 1.3em;}
#Main .block-economical-01 .result {margin: 1.5em 0;}
#Main .block-economical-01 .result > div {background: #fff;border-radius: 1em;box-shadow: 0 0 0.5em rgb(0 0 0 / 5%);}
#Main .block-economical-01 .result ul {position: relative;padding: 3em 0 0em;border-radius: 0.75em 0.75em 0 0;}
#Main .block-economical-01 .result ul li {margin: 0.5em 0;line-height: 1;white-space: nowrap;}
#Main .block-economical-01 .result ul li:last-child {border-radius: 0.25em;background-color: #f8f8f8;padding: 0.5em 0 0.5em;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;font-size: 125%;text-align: center;color: #3da7ba;}
#Main .block-economical-01 .result ul li strong {font-weight: normal;font-size: 150%;}
#Main .block-economical-01 .result ul li img {display: inline-block;width: auto;height: 1em;margin-right: 0.5em;vertical-align: middle;}
#Main .block-economical-01 .result ul::before {content: attr(data-label)"";position: absolute;top: 0.5em;left: 0.5em;right: 0.5em;background-color: #3da7ba;padding: 0.25em 0;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;font-size: 125%;text-align: center;white-space: nowrap;color: #fff;}
#Main .block-economical-01 .result ul[data-label="水道料金"] li:nth-child(2) img {transform: translateY(-25%);}
#Main .block-economical-01 .result ul[data-label="水道料金"] li:nth-child(3) img {transform: translateY(-25%);height: 0.75em;}
#Eco01 h3::before {background: transparent url("../img/economical/icon_sdgs_07.svg") no-repeat 50% / contain;}
#Eco02 h3::before {background: transparent url("../img/economical/icon_sdgs_13.svg") no-repeat 50% / contain;}
#Eco03 h3::before {background: transparent url("../img/economical/icon_sdgs_06.svg") no-repeat 50% / contain;}
#Eco04 h3::before {background: transparent url("../img/economical/icon_sdgs_06.svg") no-repeat 50% / contain;}
#Eco05 h3::before {background: transparent url("../img/economical/icon_sdgs_06.svg") no-repeat 50% / contain;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-economical-01 section {border-top: 5px solid #3da7ba;box-shadow: 0 0 1px #3da7ba;}
  #Main .block-economical-01 section h3 {margin-top: -0.5em;text-align: left;line-height: 1.75;font-size: 125%;font-family: 'Cinzel', serif;}
  #Main .block-economical-01 section h4 {font-family: 'Cinzel', serif;font-size: 150%;line-height: 1.4;white-space: nowrap;color: #3da7ba;}
  #Main .block-economical-01 section h4 strong {color: #3da7ba; font-weight: normal;font-size: 200%;}
  #Main .block-economical-01 section p {line-height: 1.75;font-size: 112.5%;}
  #Main .block-economical-01 section .img {float: left;width: calc(100% - 24em);}
  #Main .block-economical-01 section .txt {float: right;width: 100%}
  #Main .block-economical-01 section .img + .txt {width: 23em;}
  #Main .block-economical-01 section .caps {clear: both;padding-top: 1em;font-size: 11px;}
  #Main .block-economical-01 section:nth-of-type(6) {padding-left: 20em;}
  #Main .block-economical-01 section:nth-of-type(6)::before {content: "";position: absolute;top: 3.25em;left: 3em;bottom: 3em;width: 16em;background: transparent url(../img/index/img_12.webp) no-repeat 50%;background-size:cover;}
  #Main .block-economical-01 .lineup {display: flex;justify-content: center;align-items: center;}
  #Main .block-economical-01 .lineup li:not(:last-child) {position: relative;padding-right: 1.5em;margin: 0 1em 0 0;}
  #Main .block-economical-01 .lineup li:not(:last-child)::before {content: "+";position: absolute;top: 50%;right: 0;transform: translateY(-50%);font-weight: bold;color: #888;}
  #Main .block-economical-01 .result {display: flex;justify-content: space-between;}
  #Main .block-economical-01 .result > div {width: calc(33.33% - 1em);}
  #Main .block-economical-01 .result ul {display: flex;flex-direction: column;min-height: 8em;margin: 0.25em 0.25em 4em;align-items: center;justify-content: center;}
  #Main .block-economical-01 .result ul li:last-child {position: absolute;top: 100%;left: 0.5em;right: 0.5em;margin: 0;}
  #Main .block-economical-01 .container {position: relative;z-index: 2;}
}
@media only screen and (min-width: 1025px) and (max-width: 1228px) {
  #Main .block-economical-01 section h3 br.tb {display: block !important;}
  #Main .block-economical-01 section h4 {font-size: 1.954vw;margin-bottom: 0.25em;}
  #Main .block-economical-01 section h4 strong {line-height: 1;}
  #Main .block-economical-01 section p {font-size: 100%;line-height: 1.5;}
  #Main .block-economical-01 section .img {margin-right: 1em;}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  #Main .block-economical-01 section h4 {font-size: 125%;}
  #Main .block-economical-01 section h4 strong {line-height: 1;}
  #Main .block-economical-01 section p {font-size: 100%;line-height: 1.5;}
  #Main .block-economical-01 section .img {margin-right: 1em;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard h2 {font-size: 280%;}
  #Billboard h2 + p {white-space: nowrap;font-size: 150%;}

  #Main .block-economical-01 h2 {margin: 1em 0 0.5em;font-size: 150%;}
  #Main .block-economical-01 h3 {font-size: 125%;}
  #Main .block-economical-01 section {padding: 2.5em 0 0;}
  #Main .block-economical-01 section h3 {line-height: 1.5; font-size: 112.5%;font-family: 'Cinzel', serif;text-align: center;}
  #Main .block-economical-01 section h3::before {top: 0;}
  #Main .block-economical-01 section h4 {border-top: 1px solid #3da7ba;border-bottom: 1px solid #3da7ba;font-family: 'Cinzel', serif;font-size: 125%;text-align: center;margin: 0.75em 0 1em;color: #3da7ba;}
  #Main .block-economical-01 section h4 strong {font-weight: normal;font-size: 150%;}
  #Main .block-economical-01 section p {line-height: 1.75;font-size: 100%;}
  #Main .block-economical-01 section .img {margin-bottom: 1em;}
  #Main .block-economical-01 section .caps {font-size: 10px;}
  #Main .block-economical-01 section + section {margin-top: 2em;}
  #Main .block-economical-01 section:nth-of-type(6) {padding-top: 22em;}
  #Main .block-economical-01 section:nth-of-type(6)::before {content: "";position: absolute;top: 3em;left: 0;right: 0;height: 18em;background: transparent url(../img/index_img_12.webp) no-repeat 50%;background-size:cover;}
  #Main .block-economical-01 .container {position: relative;}
  #Main .block-economical-01 .ttl-style-02 {font-size: 112.5%;}
  #Main .block-economical-01 .ttl-style-02 strong {letter-spacing: 0;}
  #Main .block-economical-01 .lineup {display: flex;flex-direction: column;align-items: center;margin: 0 0 -3.5em;}
  #Main .block-economical-01 .lineup li {margin: 0;}
  #Main .block-economical-01 .lineup li:not(:last-child)::after {content: "+";display: block;text-align: center;font-weight: bold;color: #888;}
  #Main .block-economical-01 .result {margin-bottom: 0;}
  #Main .block-economical-01 .result > div + div {margin-top: 1em;}
  #Main .block-economical-01 .result ul {padding: 3em 0.625em 0.625em;}
  #Main .block-economical-01 .result ul li {margin: 1.5em 0 0;text-align: center;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}