@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;filter: contrast(.5) brightness(3.5) grayscale(0.7);}
#Billboard h2 {position: absolute;bottom: calc(50% - 0.25em);left: 50%;transform: translate(-50%, 0);font-size: 340%;font-weight: normal;font-family: 'Cardo', serif;color: #fff;letter-spacing: 0.34em;line-height: 0.58;white-space: nowrap;transition: letter-spacing var(--easing) 1400ms;}
#Billboard h2 + p {position: absolute;top: calc(50% + 1.5em);left: 50%;transform: translate(-50%, 0);margin-top: 1em;font-family: "Cardo", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: #fff;letter-spacing: 0.4em;line-height: 1;text-align: center;transition: letter-spacing var(--easing) 1400ms;}
.staging #Billboard {filter: contrast(1) brightness(1) grayscale(0);transition: filter var(--easing) 2000ms;}
.transitionend #Billboard h2, .transitionend #Billboard h2 + p {letter-spacing: 0.3em;}
#Main .block-zehm-01 {position: relative;}

#Main .introduction {margin: 4em 0;}
#Main .introduction ul li a {display: block;color: #aaa;padding: 1em 1.5em;font-size: 175%;font-family: 'Cinzel', serif;letter-spacing: 0.05em;line-height: 1;text-decoration: none;text-align: center;}
#Main .introduction ul li a small {display: block;margin-top: 0.5em;font-size: 50%;line-height: 1;white-space: nowrap;}
#Main .introduction ul li.current a {background: linear-gradient(90deg, rgba(49, 137, 137, 0) 0%, rgba(49, 137, 137, 0.8) 50%, rgba(49, 137, 137, 0) 100%);color: #fff;cursor: default;pointer-events: none;}
#Main .introduction .container {padding: 0!important;margin-bottom: 0;background-color: transparent;background-image: none;}

#Main .block-enefarm-01 {position: relative;}
#Main .block-enefarm-01 h2 {font-size: 175%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;text-align: center;color: var(--teal-green);}
#Main .block-enefarm-01 h2 strong {font-weight: normal;font-size: 240%;letter-spacing: 0.05em;line-height: 0.8;display: inline-block;}
#Main .block-enefarm-01 h3 span {display: inline-block;white-space: nowrap;}
#Main .block-enefarm-01 h3::before {content: "";position: absolute;top: 0.5em;left: 0;width: 2.75em;height: 2.75em;}
#Main .block-enefarm-01 h3 + figure {margin: 2em 0;}
#Main .block-enefarm-01 .lineup {margin: 1.5em 0 3em;}
#Main .block-enefarm-01 .lineup img[alt="logo_enefarm"] {width: auto;height: 2.5em;}
#Main .block-enefarm-01 .lineup img[alt="refa"] {width: auto;height: 2.5em;}
#Main .block-enefarm-01 .lineup img[alt="mitsubishielectric"] {width: auto;height: 2.1em;transform: translateY(-10%);}
#Main .block-enefarm-01 .lineup img[alt="toto"] {width: auto;height: 1.3em;gap: 2rem;}
#Main .block-enefarm-01 .grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 2em;margin-top: 4em;position: relative;}
#Main .block-enefarm-01 .grid section:nth-child(1) {grid-area: 1 / 1 / 2 / 2;}
#Main .block-enefarm-01 .grid section:nth-child(2) {grid-area: 1 / 2 / 3 / 3;}
#Main .block-enefarm-01 .grid section:nth-child(3) {grid-area: 2 / 1 / 4 / 2;}
#Main .block-enefarm-01 .grid section:nth-child(4) {grid-area: 3 / 2 / 4 / 3;}
#Main .block-enefarm-01 .grid section:nth-child(5) {grid-area: 4 / 1 / 5 / 3;}
#Main .block-enefarm-01 .grid section {padding: 1.5em;box-shadow: 0 0 1px var(--teal-green);position: relative;}
#Main .block-enefarm-01 .grid section h4 {color: var(--teal-green);font-size: 112.5%;font-family: 'Cardo', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
#Main .block-enefarm-01 .grid section h4::after {display: block;content: '';width: 100%;height: 1px;margin: 0.5em 0 1em;background: linear-gradient(to right,var(--teal-green) 0%,var(--teal-green) 2em,#aaa 2em,#aaa 100%);}
#Main .block-enefarm-01 .grid section .txt {line-height: 1.5;}
#Main .block-enefarm-01 .grid section .caps {font-size: 11px;line-height: 1.5;margin-top: 1em;}
#Main .block-enefarm-01 .grid section figure {margin: 2em auto;}
#Main .block-enefarm-01 .grid section div {position: relative;}
#Main .block-enefarm-01 .grid section:nth-child(1) figure {max-width: 372px;}
#Main .block-enefarm-01 .grid section:nth-child(2) figure {max-width: 484px;}
#Main .block-enefarm-01 .grid section:nth-child(2) .txt {font-size: 125%;text-align: center;font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";margin-bottom: 0;}
#Main .block-enefarm-01 .grid section:nth-child(2) .txt strong {color: #8d6e94;font-weight: normal;}
#Main .block-enefarm-01 .grid section:nth-child(2) .txt strong span {font-size: 150%;}
#Main .block-enefarm-01 .grid section:nth-child(2) .txt small:last-child {display: block;font-size: 11px;}
#Main .block-enefarm-01 .grid section:nth-child(3) figure {max-width: 410px;}
#Main .block-enefarm-01 .grid section:nth-child(4) figure {max-width: 361px;}
#Main .block-enefarm-01 .grid section:nth-child(5) figure {max-width: 1148px;}
#Main .block-enefarm-01 .grid section:nth-child(5) a {display: block;width: 15%;height: 2.5em;position: absolute;right: 9%;bottom: 2%;z-index: 1;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Billboard {padding-top: 40%;background: transparent url("../img/economical/mv_pc.webp") no-repeat 50% / cover;}
  
  #Main .introduction ul {display: table;margin: 0 auto;max-width: 800px;}
  #Main .introduction ul li {display: table-cell;width: 20%;}
  #Main .introduction ul li a {transition: color ease 500ms;}
  #Main .introduction ul li a:hover {color: var(--teal-green);}

  #Main .block-enefarm-01 .lineup {display: flex;justify-content: center;align-items: center;}
  #Main .block-enefarm-01 .lineup li:not(:last-child) {position: relative;padding-right: 1.5em;margin: 0 1em 0 0;}
  #Main .block-enefarm-01 .lineup li:not(:last-child)::before {content: "+";position: absolute;top: 50%;right: 0;transform: translateY(-50%);font-size: bold;color: #888;}
  #Main .block-enefarm-01 .container {position: relative;z-index: 2;}
  #Main .block-enefarm-01 .grid section:last-child::before {content: attr(data-caps) "";line-height: 1;font-size: 10px;padding: 1em;color: #fff;position: absolute;right: calc(-100% - 3.25em);bottom: 0;z-index: 2;}
  #Main .block-enefarm-01 .grid section:last-child::after {display: block;content: '';width: 100%;height: 100%;background: url("../img/enefarm/enefarm_07.webp") no-repeat center/cover;position: absolute;right: calc(-100% - 2em);bottom: 0;z-index: 1;}
}
@media only screen and (min-width: 1025px) and (max-width: 1228px) {
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1200px) {
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard {padding-top: 75%;background: transparent url("../img/economical/mv_pc.webp") no-repeat 50% / cover;}
  #Billboard h2 {font-size: 250%;}
  .transitionend #Billboard h2,
  .transitionend #Billboard h2 + p {letter-spacing: 0.1em;}
  
  #Main .introduction ul {overflow: hidden;margin-bottom: 2em;}
  #Main .introduction ul li {width: 100%;margin: 0;}
  #Main .introduction ul li + li {margin-top: 1em;}
  #Main .introduction ul li a {padding: 1.5em 0;margin: 1px;border-radius: 5px; border: 1px solid rgba(18, 50, 70,0.2);font-size: 125%;}
  #Main .introduction ul li.current a {border-color: var(--teal-green);}
  #Main .introduction ul li a small {font-size: 70%;}
  
  #Main .block-enefarm-01 h2 {margin: 1em 0 0.5em;font-size: 150%;}
  #Main .block-enefarm-01 h2 strong {letter-spacing: 0;}
  #Main .block-enefarm-01 h3 {font-size: 125%;letter-spacing: 0;}
  #Main .block-enefarm-01 .container {position: relative;}
  #Main .block-enefarm-01 .ttl-style-02 {font-size: 112.5%;}
  #Main .block-enefarm-01 .ttl-style-02 strong {letter-spacing: 0;}
  #Main .block-enefarm-01 .lineup {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;font-size: 87.5%;}
  #Main .block-enefarm-01 .lineup li:not(:last-child) {position: relative;padding-right: 1.5em;margin: 0 1em 0 0;}
  #Main .block-enefarm-01 .lineup li:not(:last-child)::before {content: "+";position: absolute;top: 50%;right: 0;transform: translateY(-50%);font-weight: bold;color: #888;}
  #Main .block-enefarm-01 .lineup li:nth-child(n+3) {margin-top: 1em;}
  #Main .block-enefarm-01 .grid {display: block;margin-top: 2em;}
  #Main .block-enefarm-01 .grid section + section {margin-top: 3em;}
  #Main .block-enefarm-01 .grid section:nth-child(2) .txt {font-size: 112.5%;white-space: nowrap;}

}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}