@charset "UTF-8";

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

  "Energyflex" QBOutsourcing 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(35 / 780 * 100%);
}
.page-header h2 {
  font-size: calc(48 / 780 * 100vw);
  line-height: calc(60 / 48);
}
.page-header h3 {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(36 / 24);
}
.page-header p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(40 / 24);
  text-align: left;
  padding: 0 calc(40 / 780 * 100%);
  margin: calc(40 / 780 * 100%) 0 calc(45 / 780 * 100%);
}

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

/* Anchor Navi
---------------------------------------------------------------------- */
.anchor-nav {
  margin: calc(100 / 780 * 100%) 0 0;
  padding: 0 calc(40 / 780 * 100%);
}
.anchor-nav ul {
  flex-direction: column;
  gap: 10px 0;
}
.anchor-nav ul li {
  width: 100%;
  font-size: calc(24 / 780 * 100vw);
  line-height: 1.5;
}
.anchor-nav ul li a { padding: 1em; }

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

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

/*
  Section
====================================================================== */
.sec-heading {
  font-size: calc(48 / 780 * 100vw);
  text-indent: calc(30 / 780 * 100vw);
  margin: 0 0 -.25em;
}

/*
  Section01
====================================================================== */
.sec01 { padding: calc(155 / 780 * 100%) 0 0; }
.sec01 .contents-area {
  width: calc(100% - (20 / 780 * 100%));
  margin: 0;
  padding: calc(95 / 780 * 100%) calc(40 / 780 * 100%) calc(105 / 780 * 100%) calc(60 / 780 * 100%);
  border-top-right-radius: calc(50 / 780 * 100vw);
  border-bottom-right-radius: calc(50 / 780 * 100vw);
}
.sec01 .contents-area::before { content: none; }
.sec01 .contents-area h3 { font-size: calc(36 / 780 * 100vw); }
.sec01 .contents-area > div:nth-of-type(2) h3 { display: none; }
.sec01 .contents-area > div:first-of-type { margin: 0 0 calc(60 / 780 * 100%); }
.sec01 .contents-area > div:first-of-type h4 {
  font-size: calc(24 / 780 * 100vw);
  flex-direction: column;
  margin: calc(50 / 780 * 100%) auto calc(40 / 780 * 100%);
}
.sec01 .contents-area > div:first-of-type h4 i {
  width: calc(442 / 780 * 100vw);
  margin: calc(25 / 780 * 100%) 0 0;
}
.sec01 .contents-area > div:first-of-type figure figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(50 / 780 * 100vw);
  height: calc(50 / 780 * 100vw);
  display: block;
}

.five-features {
  border-radius: calc(50 / 780 * 100vw);
  padding: calc(70 / 780 * 100%) calc(50 / 780 * 100%) calc(90 / 780 * 100%);
  margin: 0 0 calc(140 / 780 * 100%);
}
.five-features dl { padding: 0; }
.five-features dl:not(:last-of-type) { margin: 0 0 calc(80 / 780 * 100%); }
.five-features dl::before { content: none; }
.five-features dl dt {
  position: relative;
  font-size: calc(30 / 780 * 100vw);
  line-height: calc(42 / 30);
  padding: 0 0 .25em calc(133 / 780 * 100vw);
  margin: 0 0 .75em;
}
.five-features dl dt::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: calc(113 / 780 * 100vw);
  height: calc(103 / 780 * 100vw);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}
.five-features dl:first-of-type dt::before { background-image: url(../images/qbos_features_num001.png); }
.five-features dl:nth-of-type(2) dt::before { background-image: url(../images/qbos_features_num002.png); }
.five-features dl:nth-of-type(3) dt::before { background-image: url(../images/qbos_features_num003.png); }
.five-features dl:nth-of-type(4) dt::before { background-image: url(../images/qbos_features_num004.png); }
.five-features dl:last-of-type dt::before { background-image: url(../images/qbos_features_num005.png); }

.five-features dl dd p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(40 / 24);
}
.sec01 .contents-area > div:nth-of-type(3) { margin: 0 0 calc(85 / 780 * 100%); }
.sec01 .contents-area > div:nth-of-type(3) ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 0;
  gap: calc(50 / 780 * 100%) 0;
  margin: calc(45 / 780 * 100%) 0 0;
}
.sec01 .contents-area > div:nth-of-type(3) ul li p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(36 / 24);
  margin: 1em 0 0;
}
.sec01 .contents-area > div:nth-of-type(4) { text-align: center; }
.sec01 .contents-area > div:nth-of-type(4) figure figcaption, .movie-wrap + h4 {
  font-size: calc(24 / 780 * 100vw);
  margin: .5em 0 0;
}

@media screen and (max-width:480px) {
  .sec01 .contents-area > div:first-of-type h4 { font-size: calc((24 / 780 * 100vw) * 1.15); }
  .five-features dl dd p { font-size: calc((24 / 780 * 100vw) * 1.15); }
  .sec01 .contents-area > div:nth-of-type(3) ul li p { font-size: calc((24 / 780 * 100vw) * 1.15); }
  .sec01 .contents-area > div:nth-of-type(4) figure figcaption { font-size: calc((24 / 780 * 100vw) * 1.15); }
}

/*
  Section02
====================================================================== */
.sec02 { padding: calc(155 / 750 * 100%) 0 0; }
.sec02 .contents-area {
  width: calc(100% - calc(20 / 780 * 100%));
  margin: 0 0 0 calc(20 / 780 * 100%);
  padding: calc(95 / 750 * 100%) calc(60 / 750 * 100%) calc(230 / 750 * 100%) calc(40 / 750 * 100%);
  border-top-left-radius: calc(50 / 780 * 100vw);
  border-bottom-left-radius: calc(50 / 780 * 100vw);
}
.sec02 .contents-area::after { content: none; }
.sec02 .contents-area > div:first-of-type { margin: 0 0 calc(100 / 750 * 100%); }
.sec02 .contents-area h3 { font-size: calc(36 / 780 * 100vw); }
.sec02 .contents-area > div:first-of-type > h3 + div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 15px;
  margin: 0 0 calc(20 / 780 * 100%);
}
.sec02 .contents-area h4 {
  font-size: calc(27 / 780 * 100vw);
  margin: 0;
  padding: 0 .5em;
}
.sec02 .contents-area h4 span { font-size: calc(45 / 27 * 1em); }
.label200 {
  position: static;
  top: initial;
  right: initial;
  width: calc(204 / 780 * 100vw);
}
.sec02 .contents-area > div:first-of-type ul {
  grid-template-columns: repeat(2, 1fr);
  gap: calc(65 / 780 * 100vw) calc(45 / 780 * 100vw);
}
.sec02 .contents-area > div:first-of-type ul li { width: auto; }
.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 .contents-area + span {
  bottom: calc(110 / 780 * 100vw);
  width: calc(100% - (20 / 780 * 100%));
  margin: 0 0 0 calc(20 / 780 * 100%);
  height: calc(400 / 780 * 100vw);
  aspect-ratio: 780 / 400;
  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(255 / 780 * 100%);
  border-bottom-left-radius: calc(50 / 780 * 100vw);
}
.sec03 .contents-area::after { content: none; }
.sec03 .contents-area .inner {
  width: calc(100% - calc(20 / 780 * 100%));
  margin: 0;
}
.sec03 .contents-area h3 { font-size: calc(36 / 780 * 100vw); }

.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); }
}

/*
  Section04
====================================================================== */
.sec04 { padding: calc(155 / 780 * 100%) 0 0; }
.sec04 .slider-area {
  width: 100%;
  margin: 0;
  padding: 0 0 0 calc(60 / 780 * 100%);
}
.sec04 .slider-area::after { content: none; }
.sec04 .contents-area {
  width: calc(100% - (20 / 780 * 100%));
  margin: 0 calc(20 / 780 * 100%) 0 0;
  border-top-right-radius: calc(50 / 780 * 100vw);
  border-bottom-right-radius: calc(50 / 780 * 100vw);
  background-position: 50% 100%;
  aspect-ratio: 760 / 1160;
}
.sec04 .contents-area::before { content: none; }
.cv {
  width: calc(540 / 780 * 100vw);
  border-radius: calc(20 / 780 * 100vw);
  padding: calc(50 / 780 * 100vw);
}
.cv::after {
  border-radius: calc(20 / 780 * 100vw);
  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(155 / 780 * 100%) 0 calc(100 / 780 * 100%) }
.sec05 .contents-area {
  width: calc(100% - (20 / 780 * 100%));
  margin: 0 0 0 calc(20 / 780 * 100%);
  padding: calc(90 / 780 * 100%) calc(60 / 780 * 100%) calc(100 / 780 * 100%) calc(40 / 780 * 100%);
  border-top-left-radius: calc(50 / 780 * 100vw);
  border-bottom-left-radius: calc(50 / 780 * 100vw);
}
.sec05 .contents-area::after { content: none; }
.sec05 .contents-area h3 { font-size: calc(36 / 780 * 100vw); }
.sec05 .contents-area figure {
  width: 100%;
  margin: calc(40 / 780 * 100%) auto 0;
}