@charset "UTF-8";

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

  "Energyflex" Index SP Styles

====================================================================== */
.inc-footer { margin: -60px 0 0; }

@media screen and (max-width:480px) {
  .inc-footer { margin: calc(60 / 780 * 100% * -1) 0 0; }
}

/*
  Main Visual
====================================================================== */
.mv {
  display: flex;
  flex-direction: column-reverse;
}
.mv > figure { left: 0; }
.mv .contents-area { margin: calc(125 / 780 * 100% * -1) 0 0; }
.mv .contents-area .inner { justify-content: flex-start; }
.mv02 .contents-area .inner {
  flex-direction: column-reverse;
  padding: 0;
}
.mv-heading {
  font-size: calc(57 / 780 * 100vw);
  line-height: calc(87 / 60);
}
.mv-heading span { display: inline; }
.mv-heading + p { font-size: calc(24 / 780 * 100vw); }

.mv01 .mv-heading + p + figure {
  width: calc(583 / 780 * 100vw);
  margin: calc(20 / 780 * 100%) auto 0;
}
.mv02 .mv-heading {
  letter-spacing: 0;
  margin: 0;
}
.mv02 .contents-area .inner > figure {
  width: calc(255 / 780 * 100vw);
  margin: calc(20 / 780 * 100%) auto 0;
}
.mv03 .mv-heading { letter-spacing: 0; }
.mv03 .mv-heading + p + figure {
  width: calc(255 / 780 * 100vw);
  margin: calc(20 / 780 * 100%) auto 0;
}

/* Slick Slider Overwrite
---------------------------------------------------------------------- */
.main-visual .slick-list { overflow-y: hidden; }

/*
  Section01
====================================================================== */
.sec01 { background: none; }
.sec01 h2 {
  font-size: calc(48 / 780 * 100vw);
  line-height: calc(72 / 48);
}
.sec01 h2 span::after {
  left: -5px;
  width: calc(323 / 780 * 100vw);
  height: 5px;
}
.sec01 > div { padding: calc(65 / 780 * 100%) 0 0; }
.sec01 > div figure {
  max-width: 780px;
  margin: calc(35 / 780 * 100%) 0 0;
}
.sec01 > figure { aspect-ratio: 780 / 1180; }

/*
  Section02
====================================================================== */
.sec02 { margin: calc(60 / 780 * 100% * -1) 0 0; }
.sec-header { height: auto; }
.sec-header > div { width: 100%; }
.sec-header > div::before, .sec-header > div::after { content: none; }

.sec-header > div .inner {
  width: 100%;
  padding: 0;
}
.sec-header > div .inner h2 {
  font-size: calc(38 / 780 * 100vw);
  line-height: calc(60 / 38);
}
.sec-header > div figure img { aspect-ratio: 780 / 343; }
.sec02 .contents-area { margin: calc(65 / 780 * 100% * -1) 0 0; }
.sec02 .contents-area > .inner {
  width: calc(740 / 780 * 100%);
  padding: calc(100 / 780 * 100%) 0 calc(150 / 780 * 100%);
}
.sec02 .contents-area > .inner:last-of-type figure {
  width: calc(388 / 780 * 100vw);
  margin: calc(180 / 780 * 100% * -1) calc(50 / 780 * 100% * -1) 0 0;
}
.sec02 .contents-area h3 {
  font-size: calc(40 / 780 * 100vw);
  line-height: calc(60 / 40);
}
.sec02 .contents-area h3:first-of-type { margin: 0 0 calc(55 / 780 * 100%); }
.sec02 .contents-area h3:last-of-type { margin: calc(45 / 780 * 100%) 0 0; }
.sec02 .contents-area p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(48 / 24);
}
.sec02 .contents-area ul {
  gap: 0 5px;
  margin: calc(55 / 780 * 100%) 0;
}
.sec02 .contents-area ul li {
  font-size: calc(22 / 780 * 100vw);
  letter-spacing: 0;
  width: calc(225 / 780 * 100vw);
}

@media screen and (max-width:480px) {
  .sec02 .contents-area p {
    font-size: calc((24 / 780 * 100vw) * 1.15);
    padding: 0 1.25em;
  }
  .sec02 .contents-area ul li { font-size: calc((22 / 780 * 100vw) * 1.15); }
}

/*
  Section03
====================================================================== */
.sec03 { padding: 0 0 calc(125 / 780 * 100%) }
.sec03::before {
  top: calc(40 / 780 * 100vw * -1);
  width: calc(151 / 780 * 100vw);
  height: calc(180 / 780 * 100vw);
}
.sec03 .inner {
  width: calc(740 / 780 * 100%);
  padding: calc(170 / 780 * 100%) 0 calc(120 / 780 * 100%);
}
.sec03 h2 {
  font-size: calc(40 / 780 * 100vw);
  line-height: calc(60 / 40);
  margin: 0 0 calc(55 / 780 * 100%);
}
.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: calc(346 / 780 * 100vw); }
.sec03 ul li.sp {
  display: grid;
  place-content: center;
}
.sec03 ul li.sp img { width: calc(255 / 780 * 100vw); }
.sec03 ul + figure { display: none; }
.sec03 .link-btn a { text-indent: 0; }

/*
  Section04
====================================================================== */
.sec04 {
  aspect-ratio: 780 / 1180;
  background-image: url(../images/top/top_green_bg_sp.png);
  background-position: 80% 0;
  padding: calc(65 / 780 * 100%) 0 calc(115 / 780 * 100%);
}
.sec04 .inner {
  width: 100%;
  padding: 0;
}
.sec04 h2 { font-size: calc(40 / 780 * 100vw); }
.sec04 h2::after {
  top: calc(35 / 780 * 100vw * -1);
  right: calc(30 / 780 * 100vw * -1);
  width: calc(63 / 780 * 100vw);
  height: calc(47 / 780 * 100vw);
}
.cv-unit {
  margin: calc(40 / 780 * 100%) 0 calc(60 / 780 * 100%);
  gap: 0 calc(50 / 780 * 100vw);
  padding: 0 0 15px calc(60 / 780 * 100%);
  overflow-x: scroll;
}
.cv {
  width: calc(540 / 780 * 100vw);
  padding: calc(50 / 780 * 100%);
}
.cv:last-of-type { margin: 0 calc(60 / 780 * 100%) 0 0; }
.cv::after { box-shadow: 4px 4px 0 0 rgba(var(--blk-rgb), .1); }
.cv h3 { font-size: calc(28 / 780 * 100vw); }
.cv dl { font-size: calc(24 / 780 * 100vw); }
.cv dl dt small { font-size: calc(21 / 24 * 1em); }
.cv dl dd { line-height: calc(40 / 24); }

@media screen and (max-width:480px) {
  .cv dl { font-size: calc((24 / 780 * 100vw) * 1.15); }
}

/*
  Section05
====================================================================== */
.sec05 { padding: calc(100 / 780 * 100%) 0; }
.sec05 figure figcaption, .movie-wrap + h3 { font-size: calc(24 / 780 * 100vw); }

@media screen and (max-width:480px) {
  .sec05 figure figcaption, .movie-wrap + h3 { font-size: calc((24 / 780 * 100vw) * 1.15); }
}

/*
  Section06
====================================================================== */
.sec06 {
  padding: calc(120 / 780 * 100%) 0;
  aspect-ratio: 780 / 1160;
  background-image: url(../images/top/top_sec06_bg_sp.png);
  background-position: 100% 0;
}
.sec06 .inner { width: calc(740 / 780 * 100%); }
.sec06 h2 {
  font-size: calc(40 / 780 * 100vw);
  letter-spacing: .025em;
}
.sec06 ul { display: none; }
.sec06 figure {
  padding: 0 calc(20 / 780 * 100%);
  margin: calc(45 / 780 * 100%) 0 calc(50 / 780 * 100%);
}

/*
  Section07
====================================================================== */
.sec07 { flex-direction: column; }

/*
  Section08
====================================================================== */
.sec08 { padding: calc(140 / 780 * 100%) 0 calc(230 / 780 * 100%) }
.sec08 h2 {
  font-size: calc(40 / 780 * 100vw);
  letter-spacing: .025em;
  line-height: calc(60 / 40);
}
.sec08 p {
  font-size: calc(24 / 780 * 100vw);
  letter-spacing: .05em;
  line-height: calc(48 / 24);
  margin: 0 0 calc(45 / 780 * 100%);
}
.sec08 > figure.ttl {
  top: calc(40 / 780 * 100%);
  left: calc(371 / 780 * 100vw * -1);
  width: calc(796 / 780 * 100vw);
}
.sec08 > figure:last-of-type { width: calc(394 / 780 * 100vw); }

@media screen and (max-width:480px) {
  .sec08 p { font-size: calc((24 / 780 * 100vw) * 1.15); }
}