@charset "UTF-8";

/* ======================================================================

  "Energyflex" Index PC Styles

====================================================================== */
.inner.wide { max-width: 1500px; }
.inc-footer { margin: -60px 0 0; }

/*
  Main Visual
====================================================================== */
.main-visual { background-color: var(--green); }

.mv { display: grid; }
.mv > figure {
  position: relative;
  left: calc((360 / 1920) * 100vw);
  grid-area: 1 / 1;
}
.mv > figure img {
  height: auto;
  object-fit: cover;
}
.mv .contents-area {
  position: relative;
  z-index: 1;
  color: var(--white);
  grid-area: 1 / 1;
}

.mv .contents-area .inner {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
}
@media screen and (max-width:1500px) {
  .mv .contents-area .inner {
    justify-content: center;
  }
}

.mv-heading {
  font-size: 80px;
  font-size: 8.0rem;
  line-height: calc(117 / 80);
}
.mv-heading span {
  width: fit-content;
  display: block;
  border-bottom: solid 3px var(--white);
}
.mv-heading + p {
  font-size: 25px;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: .1em;
  margin: 1em 0 0;
}
.mv-heading + p + figure img {
  width: 100vw;
  height: auto;
  object-fit: cover;
}

.mv02 .mv-heading { letter-spacing: .2em; }
.mv01 .mv-heading span small {
  font-size: calc(30 / 80 * 1em);
  letter-spacing: .05em;
}
.mv01 .mv-heading + p + figure {
  position: relative;
  width: calc(778 / 1920 * 100vw);
  margin: 50px 0 -15px;
}
.mv02 .mv-heading {
  letter-spacing: .1em;
  margin: 40px 0 0;
}
.mv02 .contents-area .inner { padding: 0 0 70px; }
.mv02 .contents-area .inner > figure { width: calc(340 / 1920 * 100vw); }
.mv02 .contents-area .inner > figure img {
  width: 100vw;
  height: auto;
  object-fit: cover;
}
.mv03 .mv-heading { letter-spacing: .1em; }
.mv03 .mv-heading + p + figure {
  width: calc(340 / 1920 * 100vw);
  margin: 30px 0 -60px;
}

@media screen and (min-width:1501px) {
  .mv .inner.wide {
    max-width: 100%;
    width: 100%;
    padding: 0 calc(210 / 1920 * 100vw);
  }
}

/* Slick Slider Overwrite
---------------------------------------------------------------------- */
.main-visual .slick-list { padding: 0 0 60px; }

@media screen and (max-width:1280px) {
  .main-visual .slick-list { padding: 0; }
}

/*
  Section01
====================================================================== */
.sec01 {
  z-index: 0;
  display: grid;
  background: var(--green);
}
.sec01 > .inner { position: relative; }
.sec01 h2 {
  font-size: 48px;
  font-size: 4.8rem;
  letter-spacing: .05em;
  text-align: center;
  color: var(--white);
}
.sec01 h2 span { position: relative; }
.sec01 h2 span::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: 323px;
  height: 10px;
  background: url(../images/top/top_sec01_underline.png) no-repeat 50% 50%;
  background-size: cover;
}
.sec01 > div {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  padding: calc(50 / 1920 * 100%) 0 0;
}
.sec01 > div figure {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(130 / 1920 * 100vw);
  width: 100vw;
  max-width: 1920px;
}
.sec01 > figure {
  width: calc(945 / 1920 * 100%);
  /* aspect-ratio: 945 / 1035; */
  max-height: calc(970px + 60px);
  grid-area: 1 / 1;
  margin: -60px 0 0 calc((1920 - 945) / 1920 * 100%);
}
.sec01 > figure img {
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width:1280px) {
  .sec01 > div { padding: calc(110 / 1920 * 100%) 0 0; }
  .sec01 > div figure {
    position: relative;
    left: initial;
    transform: translateX(0);
    bottom: initial;
    margin: calc(60 / 1920 * 100%) auto 0;
  }
  .sec01 > figure {
    width: 100%;
    aspect-ratio: 1920 / 970;
    margin: 0;
  }
}

/*
  Section02
====================================================================== */
.sec02 { margin: calc(130 / 1920 * 100vw * -1) 0 0; }

.sec-header {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 385px;
  display: flex;
  align-items: flex-start;
}
.sec-header > div {
  position: relative;
  width: 1200px;
  margin: auto;
  display: grid;
}
.sec-header > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc( (100vw - 1200px) / 2 * -1 );
  width: calc( (100vw - 1200px) / 2 );
  height: 100%;
  aspect-ratio: 1920 / 385;
  display: inline-block;
  background: url(../common/images/sec-header_bg.png) repeat-x 0 0;
  background-size: contain;
}
.sec-header > div::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc( (100vw - 1200px) / 2 * -1 );
  width: calc( (100vw - 1200px) / 2 );
  height: 100%;
  aspect-ratio: 1920 / 385;
  display: inline-block;
  background: url(../common/images/sec-header_bg.png) repeat-x 0 0;
  background-size: contain;
}

.sec-header > div .inner {
  position: relative;
  z-index: 1;
  width: 1200px;
  padding: 0 100px;
  grid-area: 1 / 1;
}
.sec-header > div .inner h2 {
  font-size: 48px;
  font-size: 4.8rem;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: calc(60 / 48);
  text-align: center;
}
.sec-header > div .inner h2 span { color: var(--d-green); }
.sec-header > div figure { grid-area: 1 / 1; }
.sec-header > div figure img {
  height: auto;
  object-fit: cover;
}

.sec02 .contents-area {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1450;
  background: url(../images/top/top_sec02_bg.webp) no-repeat 0 0;
  background-size: cover;
  margin: -70px 0 0;
}
.sec02 .contents-area > .inner {
  position: relative;
  z-index: 1;
  background-color: var(--white);
  padding: 100px 0 125px;
}
.sec02 .contents-area > .inner:last-of-type {
  background: none;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}
.sec02 .contents-area > .inner:last-of-type figure {
  width: calc(517 / 1920 * 100vw);
  height: auto;
  margin: calc(115 / 1920 * 100% * -1) 0 0;
}
.sec02 .contents-area h3 {
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: calc(54 / 36);
  text-align: center;
}
.sec02 .contents-area h3:first-of-type { margin: 0 0 50px; }
.sec02 .contents-area h3:last-of-type { margin: 65px 0 0; }
.sec02 .contents-area h3:last-of-type span {
  display: inline-block;
  border-bottom: solid 6px var(--l-green)
}
.sec02 .contents-area h3:last-of-type span i {
  font-style: normal;
  color: var(--d-green);
}
.sec02 .contents-area p {
  font-size: 19px;
  font-size: 1.9rem;
  letter-spacing: .05em;
  line-height: calc(38 / 19);
  text-align: center;
}
.sec02 .contents-area p span {
  font-weight: 600;
  color: var(--d-green);
}
.sec02 .contents-area ul {
  display: flex;
  justify-content: center;
  gap: 0 50px;
  margin: 35px 0 45px;
}
.sec02 .contents-area ul li {
  font-size: 17px;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: calc(28 / 17);
  text-align: center;
  color: var(--white);
  background-color: var(--green);
  width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
}

@media screen and (max-width:1280px) {
  .sec02 { margin: -50px 0 0; }
}
@media screen and (max-width:1200px) {
  .sec-header > div { width: 100%; }
  .sec-header > div .inner {
    width: 100%;
    padding: 0;
  }
}

/*
  Section03
====================================================================== */
.sec03 { background: url(../common/images/inquiry_bg.png) repeat 0 0; }
.sec03::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  width: 151px;
  height: 180px;
  background: url(../images/top/top_sec03_check.png) no-repeat 0 0;
  background-size: cover;
}
.sec03 .inner {
  position: relative;
  height: 100%;
  background-color: var(--white);
  padding: 135px 120px 120px;
}
.sec03 h2 {
  font-size: 36px;
  font-size: 3.6rem;
  letter-spacing: .05em;
  line-height: calc(54 / 36);
  text-align: center;
  margin: 0 0 35px;
}
.sec03 h2 span {
  font-size: 2em;
  background-color: var(--yellow);
  line-height: 1.0;
  padding: 0 .25em;
  display: inline-block;
}
.sec03 h2 span i {
  font-size: .5em;
  font-style: normal;
}
.sec03 ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 36px 52.5px;
  margin: 0 0 55px;
}
.sec03 ul li { width: 285px; }
.sec03 ul + figure {
  position: absolute;
  top: 110px;
  right: 120px;
  width: 185px;
  overflow: hidden;
}
.sec03 ul + figure img {
  height: auto;
  aspect-ratio: 340 / 308;
  object-fit: cover;
}
.sec03 .link-btn a { text-indent: 1em; }

@media screen and (max-width:1280px) {
  .sec03 .inner { padding: 135px 60px 120px; }
  .sec03 ul + figure { right: 60px; }
}
@media screen and (max-width:1024px) {
  .sec03 ul {
    width: calc(710 / 740 * 100%);
    justify-content: space-between;
    gap: calc(30 / 780 * 100vw) 0;
    margin: 0 auto calc(80 / 780 * 100%);
  }
  .sec03 ul li { width: 48%; }
  .sec03 ul li.sp {
    display: grid;
    place-content: center;
  }
  .sec03 ul li.sp img {
    width: 255px;
    height: auto;
    aspect-ratio: 340 / 308;
    object-fit: cover;
  }
  .sec03 ul + figure { display: none; }
  .sec03 .link-btn a { text-indent: 0; }
  }

/*
  Section04
====================================================================== */
.sec04 {
  aspect-ratio: 1920 / 1000;
  background: url(../images/top/top_green_bg.webp) no-repeat 0 0;
  background-size: cover;
  padding: 75px 0 120px;
}
.sec04 h2 {
  position: relative;
  width: fit-content;
  font-size: 36px;
  font-size: 3.6rem;
  letter-spacing: .075em;
  line-height: calc(54 / 36);
  color: var(--white);
  text-align: center;
  margin: auto;
}
.sec04 h2::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -28px;
  width: 52px;
  height: 39px;
  display: inline-block;
  background: url(../images/top/top_sec04_heading_deco.png) no-repeat 0 0;
  background-size: cover;
}
.cv-unit {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 15px;
  margin: 45px 0 70px;
}
.cv {
  position: relative;
  width: 360px;
  border-radius: 20px;
  padding: 30px;
  background-color: var(--white);
  flex-shrink: 0;
}
.cv figure {
  width: 100%;
  overflow: hidden;
}
.cv figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.cv::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-shadow: 8px 8px 0 0 rgba(var(--blk-rgb), .1);
  mix-blend-mode: multiply;
}
.cv h3 {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .05em;
  line-height: calc(30 / 18);
  margin: .5em 0 .25em;
}
.cv h3 span { color: var(--green); }
.cv dl {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
}
.cv dl dt small {
  font-size: calc(13 / 16 * 1em);
  display: block;
  margin: .75em 0 0;
}
.cv dl dd {
  border-top: solid 1px var(--black);
  margin: 1em 0 0;
  padding: 1em 0 0;
  line-height: calc(30 / 16);
}

@media screen and (max-width:1280px) {
  .cv-unit { gap: 0 40px; }
}

/*
  Section05
====================================================================== */
.sec05 {
  padding: 85px 0 100px;
  background: url(../common/images/inquiry_bg.png) repeat 0 0;
}
.sec05 figure {
  max-width: 900px;
  margin: auto;
}
.sec05 figure figcaption {
  font-size: 24px;
  font-size: 2.4rem;
  letter-spacing: .05em;
  text-align: center;
  margin: 1em 0 0;
}
.movie-wrap + h3 {
  font-size: 24px;
  font-size: 2.4rem;
  letter-spacing: .05em;
  text-align: center;
  margin: 1em 0 0;
}
.movie-wrap + h3 > span {
  font-size: .65em;
  font-weight: 400;
}

/*
  Section06
====================================================================== */
.sec06 {
  aspect-ratio: 1920 / 830;
  background: url(../images/top/top_sec06_bg.webp) no-repeat 70% 50%;
  background-size: cover;
  padding: 120px 0 100px;
}
.sec06 h2 {
  font-size: 36px;
  font-size: 3.6rem;
  letter-spacing: .075em;
  line-height: calc(54 / 36);
  text-align: center;
}
.sec06 ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 30px;
  margin: 50px 0 55px;
}
.sec06 ul li {
  width: 180px;
  flex-shrink: 0;
}
.sec06 ul li:nth-of-type(even) { margin: 95px 0 0; }

@media screen and (max-width:1024px) {
  .sec06 ul { padding: 0; }
  .sec06 ul li { width: 16.5vw; }
}

/*
  Section07
====================================================================== */
.sec07 {
  display: flex;
  align-items: center;
}

/*
  Section08
====================================================================== */
.sec08 {
  padding: 110px 0;
  background-color: var(--white);
}
.sec08 .inner { text-align: center; }
.sec08 h2 {
  position: relative;
  z-index: 1;
  font-size: 36px;
  font-size: 3.6rem;
  letter-spacing: .075em;
  line-height: calc(54 / 36);
  margin: 0 0 1em;
}
.sec08 p {
  font-size: 19px;
  font-size: 1.9rem;
  letter-spacing: .05em;
  line-height: calc(38 / 19);
  margin: 0 0 110px;
}
.sec08 > figure { position: absolute; }
.sec08 > figure.ttl {
  top: 35px;
  left: 0;
  width: calc(797 / 1920 * 100vw);
}
.sec08 > figure:last-of-type {
  right: 0;
  bottom: 0;
  width: calc(845 / 1920 * 100vw);
}
.sec08 .link-btn {
  position: relative;
  z-index: 1;
}