@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {position: absolute;bottom: 50%;left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 500%;font-weight: normal;font-family: var(--serif);color: #fff;letter-spacing: 0.15em;line-height: 0.58;text-align: center;}
#Billboard h2 + p {position: absolute;top: calc(50% + 1.5em);left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 125%;font-weight: normal;font-family: var(--serif);color: #fff;text-align: center;letter-spacing: 0.25em;line-height: 2;white-space: nowrap;}
#Billboard img {mix-blend-mode: screen;}
#Billboard::before {content: "image";position: absolute;bottom: 0;right: 0;padding: 1em;z-index: 2;font-family: var(--serif);font-size: 10px;color: #fff;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;background-color: slategray;mix-blend-mode: multiply;opacity: 0.6;}

#Main .block-economical-01 {position: relative;}
#Main .block-economical-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-economical-01 .ttl-style-01 {margin-bottom: 2em;}
#Main .block-economical-01 .ttl-style-01 strong {font-weight: normal;font-size: 300%;line-height: 1;}
#Main .block-economical-01 .ttl-style-01::after {content: "";position: absolute;bottom: 0;left: 50%;width: 22em;height: 2.8em;background-color: #9f131a;transform: translateX(-50%);z-index: -1;}
#Main .block-economical-01 section {position: relative;background-color: #fff;border-radius: 3px;margin-top: 2em;padding: 2em;box-sizing: border-box;}
#Main .block-economical-01 section h4 {font-size: 137.5%;font-family: var(--serif);color: #937b45;}
#Main .block-economical-01 section h5 {border-bottom: 1px solid #ddd;margin-bottom: 0.5em;font-size: 100%;font-family: var(--serif);color: #595857;}
#Main .block-economical-01 section p {font-size: 87.5%;color: #595857;}
#Main .block-economical-01 section .lead {margin-bottom: 0;font-size: 100%;text-align: left;line-height: 1.75;color: #595757;}
#Main .block-economical-01 section .caps {font-size: 62.5%;line-height: 1.5;}
#Main .block-economical-01 section[data-type="eco"] .column > div:nth-child(2) figure {margin-bottom: 1em;}
#Main .block-economical-01 section:nth-child(3) figure,
#Main .block-economical-01 section:nth-child(4) figure,
#Main .block-economical-01 section:nth-child(5) figure {margin: 1em 0;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-economical-01 .grid-list {justify-content: space-between;}
  #Main .block-economical-01 section {width: 100%;}
  #Main .block-economical-01 section:nth-child(3),
  #Main .block-economical-01 section:nth-child(4) {width: calc(50% - 1em);}
  #Main .block-economical-01 section:nth-child(3) .lead span,
  #Main .block-economical-01 section:nth-child(4) .lead span {display: inline;white-space: normal;}
  #Main .block-economical-01 section .column {display: flex;justify-content: space-between;margin-top: 1.5em;}
  #Main .block-economical-01 section .column > div {width: calc(50% - 1em);}
  #Main .block-economical-01 section[data-type="mem"] header {position: relative;padding-right: 5em;}
  #Main .block-economical-01 section[data-type="mem"] header::before {content: "";position: absolute;top: 0;right: 0;width: 5em;background: transparent url("../img/economical/icon_mem.svg") no-repeat 50% / contain;aspect-ratio: 1 / 1;}
  #Main .block-economical-01 section[data-type="mem"] footer {margin: 1.5em 0;}
  #Main .block-economical-01 section[data-type="mem"] .column > div:nth-child(2) p {position: relative;padding-right: 50%;font-size: 75%;}
  #Main .block-economical-01 section[data-type="mem"] .column > div:nth-child(2) p:nth-of-type(1)::after {content: "";position: absolute;top: 0;left: 55%;right: 0;bottom: 0;background: transparent url("../img/economical/img_03.webp") no-repeat 50% / contain;}
  #Main .block-economical-01 section[data-type="mem"] .column > div:nth-child(2) p:nth-of-type(2)::after {content: "";position: absolute;top: 0;left: 55%;right: 0;bottom: 0;background: transparent url("../img/economical/img_04.webp") no-repeat 50% / cover;}

  #Main .block-economical-01 section[data-type="eco"] header {position: relative;padding-right: 26em;}
  #Main .block-economical-01 section[data-type="eco"] header::before {content: "";position: absolute;top: 0;right: 0;width: 24em;background: transparent url("../img/economical/icon_eco.svg") no-repeat 50% / contain;aspect-ratio: 4 / 1;}
  #Main .block-economical-01 section[data-type="eco"] .column > div:nth-child(1) {width: calc(70% - 1em);}
  #Main .block-economical-01 section[data-type="eco"] .column > div:nth-child(2) {width: 30%;}
  #Main .block-economical-01 section[data-type="eco"] .column > div:nth-child(2) p {margin-top: 1em;font-size: 75%;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {
  #Main .block-economical-01 section[data-type="mem"] .column > div:nth-child(2) p:nth-of-type(2) {padding-right: 0;}
  #Main .block-economical-01 section[data-type="mem"] .column > div:nth-child(2) p:nth-of-type(2)::after {display: none;}
  #Main .block-economical-01 section[data-type="eco"] header {padding-right: 14em;}
  #Main .block-economical-01 section[data-type="eco"] header::before {width: 10em;aspect-ratio: 1.3 / 1;background-image: url("../img/economical/icon_eco_02.svg");}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard h2 {bottom: calc(50% + 1em);font-size: 280%;letter-spacing: 0.1em;}
  #Billboard h2 + p {top: calc(50% + -1.5em);font-size: 100%;letter-spacing: 0.1em;}

  #Main .block-economical-01 .ttl-style-01 {margin-top: 1em;}
  #Main .block-economical-01 .ttl-style-01 strong {font-size: 240%;}
  #Main .block-economical-01 section h5 {border: 1px solid #ddd;border-radius: 3em;margin-top: 1.5em;padding: 0.5em;text-align: center;line-height: 1.5;letter-spacing: 0;}
  #Main .block-economical-01 section h4,
  #Main .block-economical-01 section .lead {text-align: center;}

  #Main .block-economical-01 section img {margin: 1em 0;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}