@charset "UTF-8";

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

  "Energyflex" QB Construction SP Styles

====================================================================== */
.inner { width: calc(740 / 780 * 100%); }
.inc-footer { margin: -60px 0 0; }

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

/*
  Page Header
====================================================================== */
.page-header .inner {
  width: calc(740 / 780 * 100%);
  padding: calc(40 / 780 * 100%) 0 calc(80 / 780 * 100%);
}
.page-header h2 {
  font-size: calc(48 / 780 * 100vw);
  line-height: calc(60 / 48);
  margin: 0 0 calc(140 / 780 * 100%);
}
.page-header h3 { font-size: calc(40 / 780 * 100vw); }
.page-header h3 span { border-width: 4px; }

/* Breadcrumb
---------------------------------------------------------------------- */
.page-header .breadcrumb {
  padding: 0 0 0 calc(30 / 780 * 100%);
  margin: 0 0 calc(80 / 780 * 100%);
}

/*
  Section Header
====================================================================== */
.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(44 / 780 * 100vw);
  line-height: calc(60 / 44);
}
.sec-header > div > figure img { aspect-ratio: 780 / 683; }
.sec-header > div .inner ul { display: none; }
.sec-header > div .inner ul + figure {
  margin: calc(40 / 780 * 100% * -1) 0 calc(40 / 780 * 100%);
}
/*
.sec-header > div .inner ul li { width: calc(225 / 780 * 100vw); }
.sec-header > div .inner ul li:nth-of-type(odd) { margin: 0; }
.sec-header > div .inner ul li:nth-of-type(2) { margin: 75px 0 0; }
.sec-header > div .inner ul li:nth-of-type(4),
.sec-header > div .inner ul li:last-of-type { margin: 40px 0 0; }
*/

/*
  Section
====================================================================== */
section .inner {
  width: calc(740 / 780 * 100%);
  padding-left: calc(40 / 740 * 100%);
  padding-right: calc(40 / 740 * 100%);
}

/* Section01
---------------------------------------------------------------------- */
.sec01 { margin: -8% 0 0; }
.sec01 .inner {
  padding-top: calc(90 / 780 * 100%);
  padding-bottom: calc(200 / 780 * 100%);
}
.const-strength {
  flex-direction: column;
  gap: 0;
}
.const-strength:not(:last-of-type) { margin: 0 0 calc(105 / 780 * 100%); }
.const-strength:nth-of-type(odd) { align-items: flex-end; }
.const-strength:nth-of-type(even) { flex-direction: column; }
.const-strength dl dt {
  font-size: calc(30 / 780 * 100vw);
  letter-spacing: .05em;
  line-height: 1.8;
  padding: 0 0 0 calc(128 / 780 * 100vw);
  margin: 0 0 1em;
}
.const-strength dl dt span { padding: 0 0 .15em; }
.const-strength dl dt::before {
  top: -5px;
  width: calc(113 / 780 * 100vw);
  height: calc(75 / 780 * 100vw);
}
.const-strength dl dd { padding: 0; }
.const-strength dl dd p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(40 / 24);
}
.const-strength figure {
  width: calc(450 / 780 * 100vw);
  margin: calc(40 / 780 * 100%) 0 0;
}

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

/* Section02
---------------------------------------------------------------------- */
.sec02 h3 { font-size: calc(36 / 780 * 100vw); }
.sec02 .inner { padding-bottom: calc(200 / 780 * 100%); }

.archive-list {
  border-radius: calc(50 / 780 * 100vw);
  padding: calc(80 / 780 * 100%) calc(60 / 780 * 100%);
  margin: 10px 0 0;
}
.archive-list dl:not(:last-of-type) { margin: 0 0 calc(100 / 780 * 100%); }
.archive-list dl dt {
  font-size: calc(26 / 780 * 100vw);
  margin: 0 0 1em;
}
.archive-list dl dd ul { display: block; }
.archive-list dl dd ul li {
  font-size: calc(24 / 780 * 100vw);
  margin: 0 0 .75em;
}

@media screen and (max-width:480px) {
  .archive-list dl dt { font-size: calc((26 / 780 * 100vw) * 1.15); }
  .archive-list dl dd ul li { font-size: calc((24 / 780 * 100vw) * 1.15); }
}

/* Section03
---------------------------------------------------------------------- */
.sec03 h3 { font-size: calc(36 / 780 * 100vw); }
.sec03 .contents-area + span {
  width: calc(100% - (20 / 780 * 100%));
  margin: 0 0 0 calc(20 / 780 * 100%);
  height: calc(415 / 780 * 100vw);
  aspect-ratio: 780 / 415;
  background-color: var(--l-gray);
  display: inline-block;
}
.sec03 .contents-area {
  position: relative;
  width: calc(100% - (20 / 780 * 100%));
  margin: 0 0 0 calc(20 / 780 * 100%);
  padding: 0 0 calc(160 / 780 * 100%);
}
.sec03 .contents-area .inner {
  width: calc(100% - calc(20 / 780 * 100%));
  margin: 0;
}
.cs-list {
  margin: calc(30 / 780 * 100%) 0 0;
  padding: 0 0 45px calc(40 / 780 * 100%);
}
.case-study {
  width: calc(540 / 780 * 100vw);
  border-radius: calc(20 / 780 * 100vw);
  padding: calc(40 / 780 * 100vw);
}
.case-study::after {
  border-radius: calc(20 / 780 * 100vw);
  box-shadow: 4px 4px 0 0 rgba(var(--blk-rgb), .1);
}
.case-study dl { margin: calc(60 / 780 * 100%) 0 0; }
.case-study dl dt {
  font-size: calc(30 / 780 * 100vw);
  margin: 0 0 .25em;
}
.case-study dl dd p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(40 / 24);
}

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