@charset "UTF-8";

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

  "Energyflex" Index PC Styles Overwrite

====================================================================== */
.l-footer::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(67 / 1920 * 100vw);
  aspect-ratio: 1920 / 67;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(../images/top/2026/top_sec11_bg_btm.png);
  background-size: 100%;
}

/*
  Main Visual
====================================================================== */
.mv > figure { width: calc((1560 / 1920) * 100vw); }
.mv > figure img {
  width: 100%;
  height: auto;
}

.mv-heading { font-size: calc(80 / 1920 * 100vw); }
.mv-heading + p { font-size: calc(25 / 1920 * 100vw); }

@media screen and (min-width:1921px) {
  .mv-heading {
    font-size: 80px;
    font-size: 8.0rem;
  }
  .mv-heading + p {
    font-size: 25px;
    font-size: 2.5rem;
  }
}

/* Slick Slider Overwrite
---------------------------------------------------------------------- */
.slick-prev,
.slick-next {
  z-index: 3;
  width: calc(80 / 1920 * 100vw);
  height: calc(80 / 1920 * 100vw);
  border-radius: 50%;
  background-color: var(--white);
  border: solid 2px var(--black);
  box-shadow: 3px 3px 0 0 var(--black);
  transition: all .3s;
}
.slick-prev:before, [dir='rtl'] .slick-prev:before { content: ""; }
.slick-next:before, [dir='rtl'] .slick-next:before { content: ""; }
.slick-prev:before,
.slick-next:before {
  text-indent: -9999px;
  font-size: 0;
  width: calc(28 / 1920 * 100vw);
  height: calc(8 / 1920 * 100vw);
  display: inline-block;
  background: url(../images/top/2026/slide_arrow.svg) no-repeat 50% 50% / cover;
  transition: all .3s;
}
.slick-next:before { transform: scaleX(-1); }
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background-color: #ffeb3b;
}

.main-visual .slick-list { z-index: 2; }
.main-visual .slick-prev { left: calc(30 / 1920 * 100vw); }
.main-visual .slick-next { right: calc(30 / 1920 * 100vw); }

@media screen and (min-width:1921px) {
  .slick-prev,
  .slick-next {
    width: 80px;
    height: 80px;
  }
  .slick-prev:before,
  .slick-next:before {
    width: 28px;
    height: 8px;
  }
  .main-visual .slick-prev { left: 30px; }
  .main-visual .slick-next { right: 30px; }
}

/*
  Section01
====================================================================== */
.sec01 {
  z-index: 1;
  transform: translateY(calc(-60 / 1920 * 100vw));
  margin: 0 0 calc(-60 / 1920 * 100vw);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(../images/top/2026/top_sec01_green_bg.webp);
  background-size: cover;
}
.sec01 h2 {
  font-size: calc(48 / 1920 * 100vw);
  color: var(--black);
}
.sec01 h2 span::after {
  width: calc(323 / 1920 * 100vw);
  background-image: url(../images/top/2026/top_sec01_underline_b.png);
}
.sec01 > div { padding: calc(110 / 1920 * 100vw) 0 0; }
.sec01 > div figure {
  position: relative;
  z-index: 2;
  top: initial;
  left: initial;
  bottom: initial;
  width: 100%;
  max-width: initial;
  transform: translateY(calc(35 / 1920 * 100vw));
}
.sec01 > div figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.sec01 > figure {
  width: auto;
  max-height: initial;
  overflow: hidden;
  margin: 0;
  display: none;
}
.sec01 > figure img {
  width: auto;
  height: auto;
  aspect-ratio: 1920 / 840;
}
.sec01 > i {
  position: absolute;
  left: calc(140 / 1920 * 100vw);
  bottom: calc(40 / 1920 * 100vw);
  width: calc(572 / 1920 * 100vw);
  height: auto;
  opacity: .25;
}
.sec01 > i img {
  width: 100%;
  height: auto;
  aspect-ratio: 118 / 120;
  object-fit: cover;
}

@media screen and (max-width:1280px) {
  .sec01 > figure { aspect-ratio: 1920 / 840; }
}

@media screen and (min-width:1921px) {
  .sec01 h2 {
    font-size: 48px;
    font-size: 4.8rem;
  }
  .sec01 > i {
    left: 140px;
    bottom: 40px;
    width: 572px;
  }
}

/*
  Section02
====================================================================== */
.sec02 {
  z-index: 0;
  margin: 0;
  padding: 0 0 155px;
  background: url(../common/images/inquiry_bg.png) repeat 0 0;
}
.sec-header { display: none; }
.sec02 .contents-area {
  aspect-ratio: 1920 / 1081;
  margin: 0 0 75px;
  background: url(../images/top/2026/top_sec02_bg002.webp) no-repeat 50% 0 / 100%;
}
.sec02 .contents-area > .inner { background: none; }
.sec02 .contents-area > .inner:last-of-type {
  display: block;
  padding: calc(185 / 1920 * 100vw) 0 0;
}
.sec02 .contents-area > .inner:last-of-type figure {
  width: calc(1200 / 1920 * 100vw);
  height: auto;
  margin: calc(130 / 1920 * 100vw) auto 0;
}
.sec02 .contents-area > .inner:last-of-type figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.sec02 .contents-area h2 {
  font-size: calc(48 / 1920 * 100vw);
  font-weight: 800;
  text-align: left;
}
.sec02 .contents-area h2 span {
  font-size: calc(54 / 48 * 1em);
  color: #0d47a1;
}

@media screen and (min-width:1921px) {
  .sec02 .contents-area > .inner:last-of-type {
    height: 100%;
    display: grid;
    place-content: center;
    padding: 0;
  }
  .sec02 .contents-area > .inner:last-of-type figure {
    width: 1200px;
    margin: 130px auto 0;
  }
}

/* Worst Case
---------------------------------------------------------------------- */
.worst-cases h3 {
  font-size: calc(48 / 1920 * 100vw);
  font-weight: 800;
  text-align: center;
  line-height: calc(60 / 48);
  letter-spacing: .05em;
  margin: 0 0 .5em;
}
.worst-case {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: var(--white);
}
.worst-case:not(:last-of-type) { margin: 0 0 15px; }
.worst-case::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background-color: #e9e7e7;
  mix-blend-mode: multiply;
}
.worst-case > figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.worst-case > div {
  position: relative;
  padding: 50px 0 0 55px;
}
.worst-case > div dl { letter-spacing: .05em; }
.worst-case > div dl dt {
  font-size: calc(30 / 1920 * 100vw);
  font-weight: 800;
  margin: 0 0 .5em;
}
.worst-case > div dl dd {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: calc(28 / 16);
}
.worst-case > div i {
  position: absolute;
  top: 12px;
  right: 15px;
  width: calc(64 / 1920 * 100vw);
  height: calc(84 / 1920 * 100vw);
  display: inline-block;
}
.worst-case > div i img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media screen and (min-width:1921px) {
  .worst-cases h3 {
    font-size: 48px;
    font-size: 4.8rem;
  }
  .worst-case > div dl dt {
    font-size: 30px;
    font-size: 3.0rem;
  }
  .worst-case > div i {
    width: 64px;
    height: 84px;
  }
}

/*
  Section03
====================================================================== */
.sec03 {
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(212,228,252,1) 100%);
  padding: 0 0 115px;
}
.sec03::before { content: none; }
.sec03 .sec-header {
  position: relative;
  height: auto;
  display: grid;
}
.sec03 .sec-header::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(-60 / 1920 * 100vw);
  left: 50%;
  transform: translateX(-50%);
  width: calc(147 / 1920 * 100vw);
  height: calc(176 / 1920 * 100vw);
  background: url(../images/top/top_sec03_check.png) no-repeat 0 0;
  background-size: cover;
}
.sec03 .sec-header > .inner {
  z-index: 1;
  grid-area: 1 / 1;
  background: none;
  padding: calc(140 / 1920 * 100vw) 0 0;
  display: block;
}
.sec03 .sec-header > .inner::before,
.sec03 .sec-header > .inner::after { content: none; }
.sec03 .sec-header figure { grid-area: 1 / 1; }
.sec03 .sec-header h2 {
  font-size: calc(30 / 1920 * 100vw);
  font-weight: 800;
  letter-spacing: .05em;
  line-height: calc(60 / 30);
  text-align: center;
  color: var(--white);
  margin: 0 0 45px;
}
.sec03 .sec-header h2 span {
  position: relative;
  font-size: calc(40 / 30 * 1em);
  background-color: transparent;
  padding: 0;
}
.sec03 .sec-header h2 span::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: -5px;
  width: calc(528 / 1920 * 100vw * 1.1);
  height: 10px;
  background: url(../images/top/2026/top_sec03_underline.png) no-repeat 50% 50%;
  background-size: cover;
}

@media screen and (min-width:1921px) {
  .sec03 .sec-header::before {
    width: 147px;
    height: 176px;
  }
  .sec03 .sec-header > .inner {
    height: 100%;
    padding: 0;
    display: grid;
    place-content: center;
    transform: translateY(calc(-35 / 1920 * 100vw));
  }
  .sec03 .sec-header h2 {
    font-size: 30px;
    font-size: 3.0rem;
  }
}

.consultation {
  position: relative;
  display: grid;
}
.consultation h3 {
  font-size: calc(48 / 1920 * 100vw);
  font-weight: 800;
  letter-spacing: .05em;
  line-height: calc(60 / 48);
  text-align: center;
  color: var(--yellow);
  grid-area: 1 / 1;
  transform: translateY(calc(160 / 1920 * 100vw));
}
.consultation figure {
  max-width: calc(1200 / 1920 * 100vw);
  margin: auto;
  grid-area: 1 / 1;
}

@media screen and (min-width:1921px) {
  .consultation h3 {
    font-size: 48px;
    font-size: 4.8rem;
  }
}

.resolution-unit {
  position: relative;
  /* display: grid; */
  transform: translateY(calc(-65 / 1920 * 100vw));
  margin: 0 0 calc(-65 / 1920 * 100vw);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-image: url(../images/top/2026/top_sec03_img001.webp);
  background-size: cover;
}

.resolution { margin: 0 0 85px; }
.resolution > .inner {
  position: relative;
  z-index: 1;
  height: auto;
  /* grid-area: 1 / 1; */
  background: none;
  padding: 130px 0 0 360px;
}
.resolution figure { grid-area: 1 / 1; }
.resolution h2 {
  font-size: calc(60 / 1920 * 100vw);
  font-weight: 800;
  color: #20a150;
  text-align: center;
}
.resolution h2 span {
  font-size: calc(72 / 60 * 1em);
  background: none;
  padding: 0;
}
.resolution h4 {
  font-size: calc(36 / 1920 * 100vw);
  font-weight: 800;
  letter-spacing: .05em;
  line-height: calc(54 / 36);
  text-align: center;
}
.resolution-item {
  position: relative;
  height: 70px;
  transform: skewX(-25deg);
}
.resolution-item:not(:last-of-type) { margin: 0 0 11px; }
.resolution-item::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background-color: #d3dce2;
  mix-blend-mode: multiply;
}
.resolution-item dl {
  height: 100%;
  display: grid;
  grid-template-columns: calc(390 / 840 * 100%) calc(450 / 840 * 100% );
}
.resolution-item dl dt {
  background-color: #20a150;
  display: grid;
  place-items: center start;
  padding: 0 0 0 40px;
}
.resolution-item dl dd {
  background-color: var(--white);
  display: grid;
  place-items: center start;
  padding: 0 20px 0 40px;
}
.resolution-item dl dt span {
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--white);
  transform: skewX(25deg);
  display: inline-block;
}
.resolution-item:nth-of-type(4) dl dt { padding: 0 0 0 20px; }
.resolution-item:nth-of-type(4) dl dt span { transform: skewX(25deg) scaleX(.9); }
.resolution-item dl dd span {
  font-size: max(calc(16 / 1920 * 100vw), 13px);
  letter-spacing: .075em;
  line-height: calc(24 / 16);
  transform: skewX(25deg);
  display: inline-block;
}
.resolution-unit h3 {
  font-size: calc(48 / 1920 * 100vw);
  font-weight: 800;
  letter-spacing: .05em;
  line-height: calc(60 / 48);
  text-align: center;
  white-space: nowrap;
}
.resolution-unit h3 span { color: #20a150; }

@media screen and (min-width:1921px) {
  .resolution h2 {
    font-size: 60px;
    font-size: 6.0rem;
  }
  .resolution h4 {
    font-size: 36px;
    font-size: 3.6rem;
  }
  .resolution-item dl dt span {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .resolution-item dl dd span {
    font-size: 16px;
    font-size: 1.6rem;
  }
  .resolution-unit h3 {
    font-size: 48px;
    font-size: 4.8rem;
  }
}

.two-solutions .inner {
  height: auto;
  background: none;
  padding: 0 120px;
}
.two-solutions .inner > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 30px;
  margin: 30px 0 65px;
}
.solution {
  position: relative;
  width: 100%;
  height: calc(200 / 1920 * 100vw);
  display: grid;
  place-content: center;
  text-align: center;
  border-style: solid;
  border-width: 3px;
}
.solution p {
  font-size: calc(28 / 1920 * 100vw);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: calc(36 / 28);
  margin: 0 0 .5em;
}
.solution h4 {
  font-size: calc(30 / 1920 * 100vw);
  font-weight: 800;
  letter-spacing: .025em;
  line-height: calc(40 / 30);
}
.solution:first-of-type {
  color: var(--white);
  border-color: var(--white);
  background-color: #20a150;
}
.solution:last-of-type {
  color: #20a150;
  border-color: #20a150;
  background-color: var(--white);
}
.solution::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 9px;
  left: 9px;
  width: 100%;
  height: 100%;
  background-color: #231815;
  mix-blend-mode: multiply;
  opacity: .1;
}

@media screen and (min-width:1921px) {
  .solution { height: 200px; }
  .solution p {
    font-size: 28px;
    font-size: 2.8rem;
  }
  .solution h4 {
    font-size: 30px;
    font-size: 3.0rem;
  }
}

/*
  Section Label Heading
====================================================================== */
.label-heading {
  height: calc(260 / 1920 * 100vw);
  background: url(../common/images/inquiry_bg.png) repeat 0 0;
}
.label-heading h3 {
  position: relative;
  z-index: 1;
  width: calc(500 / 1920 * 100vw);
  height: auto;
  overflow: hidden;
  transform: translateY(30px);
}
.label-heading h3 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media screen and (min-width:1921px) {
  .label-heading { height: 260px; }
  .label-heading h3 { width: 500px; }
}

/*
  Section04
====================================================================== */
.sec04 {
  transform: translateY(calc(-65 / 1920 * 100vw));
  aspect-ratio: 1920 / 1120;
  padding: calc(90 / 1920 * 100vw) 0 calc(150 / 1920 * 100vw);
}
.sec04 .inner { padding: calc(75 / 1920 * 100vw) 0 0; }
.sec04 h2 {
  font-size: calc(48 / 1920 * 100vw);
  font-weight: 600;
}
.sec04 .inner > p {
  font-size: calc(30 / 1920 * 100vw);
  font-weight: 600;
  text-align: center;
  color: var(--white);
  margin: .5em 0 0;
}
.cv-unit {
  width: 100%;
  display: block;
  overflow-x: visible;
}
.cv { width: auto; }
.cv  { text-decoration: none; }
.cv h3 {
  color: #20a150;
  border-bottom: solid 1px #cecece;
  padding: 0 0 1em;
  margin: 1em 0;
}
.cv dl { color: var(--black); }
.cv dl dd {
  border-top: 0;
  margin: .5em 0 0;
  padding: 0;
}
.cv figure img { aspect-ratio: 5 / 3; }
.tag {
  width: fit-content;
  font-style: normal;
  font-size: 13px;
  font-size: 1.3rem;
  color: var(--white);
  display: block;
  padding: .125em .5em;
  margin: 0 0 .5em;
  background-color: #20a150;
}

@media screen and (min-width:1921px) {
  .sec04 { padding: 90px 0 150px; }
  .sec04 h2 {
    font-size: 48px;
    font-size: 4.8rem;
  }
  .sec04 .inner > p {
    font-size: 30px;
    font-size: 3.0rem;
  }
}

/* Slick Slider Overwrite
---------------------------------------------------------------------- */
.cv-unit .slick-track {
  display: flex;
  padding: 0 0 15px;
}
.cv-unit .slick-list {
  margin: 0 -15px;
}
.cv-unit .slick-slide {
  height: auto !important;
  margin: 0 15px;
}
.cv-unit .slick-prev { left: calc(-115 / 1920 * 100vw); }
.cv-unit .slick-next { right: calc(-115 / 1920 * 100vw); }

@media screen and (min-width:1921px) {
  .cv-unit .slick-prev { left: -115px; }
  .cv-unit .slick-next { right: -115px; }
}

/*
  Section05
====================================================================== */
.sec05 {
  padding: 0 0 150px;
  background: none, var(--green);
}
.sec05::before, .sec05::after {
  content: "";
  position: absolute;
  width: calc(945 / 1920 * 100vw);
  height: auto;
  aspect-ratio: 945 / 1000;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}
.sec05::before {
  top: calc(260 / 1920 * 100vw);
  right: 0;
  background-image: url(../images/top/2026/top_sec05_bg_r.png);
}
.sec05::after {
  bottom: 0;
  left: 0;
  background-image: url(../images/top/2026/top_sec05_bg_l.png);
}
.sec05 > i {
  position: absolute;
  top: calc(130 / 1920 * 100vw);
  right: calc(130 / 1920 * 100vw);
  width: calc(583 / 1920 * 100vw);
  height: auto;
  aspect-ratio: 583 / 674;
}
.sec05 > i img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.sec05 .label-heading {
  background-color: #20a150;
  background-blend-mode: multiply;
}
.sec05 > .inner {
  position: relative;
  z-index: 1;
  padding: 80px 120px 0;
}

@media screen and (min-width:1921px) {
  .sec05::before { top: 260px; }
}

/* アウトソーシング 選ばれる5つの特徴
---------------------------------------------------------------------- */
.five-features-unit { margin: 0 0 85px; }
.five-features-unit h2 {
  font-size: calc(72 / 1920 * 100vw);
  font-weight: 800;
  letter-spacing: .075em;
  line-height: calc(60 / 48);
  color: var(--white);
}
.five-features-unit h2 span {
  font-size: calc(48 / 72 * 1em);
  letter-spacing: .075em;
  line-height: calc(60 / 48);
  color: var(--black);
  display: block;
}
.five-feature {
  position: relative;
  z-index: 1;
  height: calc(220 / 1920 * 100vw);
  display: flex;
  align-items: center;
  background-color: var(--white);
  margin: 15px 0 0;
}
.five-feature:nth-of-type(even) { flex-direction: row-reverse; }
.five-feature::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background-color: #231815;
  mix-blend-mode: multiply;
  opacity: .1;
}
.five-feature > div {
  position: relative;
  width: calc(520 / 960 * 100%);
  height: 100%;
  display: grid;
  place-items: center start;
  padding: 0 calc(80 / 1920 * 100vw) 0 calc(40 / 1920 * 100vw);
  background-color: var(--white);
}
.five-feature > div dl dt {
  display: flex;
  align-items: center;
  margin: 0 0 25px;
}
.five-feature > div dl dt i {
  width: calc(90 / 1920 * 100vw);
  height: auto;
  display: inline-block;
  flex-shrink: 0;
}
.five-feature > div dl dt i img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.five-feature > div dl dt span {
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 600;
  line-height: calc(36 / 24);
  color: #20a150;
  margin: 0 0 0 10px;
}
.five-feature > div dl dd {
  font-size: max(calc(16 / 1920 * 100vw), 13px);
  line-height: calc(28 / 16);
}
.five-feature figure {
  position: relative;
  width: calc(440 / 960 * 100%);
  height: calc(220 / 1920 * 100vw);
  overflow: hidden;
}
.five-feature figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media screen and (min-width:1921px) {
  .five-features-unit h2 {
    font-size: 72px;
    font-size: 7.2rem;
  }
  .five-feature { height: 220px; }
  .five-feature > div dl dt i { width: 90px; }
  .five-feature > div dl dt span {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .five-feature > div dl dd {
    font-size: 16px;
    font-size: 1.6rem;
  }
  .five-feature figure { height: auto; }
}

/* アウトソーシング比較表
---------------------------------------------------------------------- */
.os-comparison { margin: 0 0 60px; }
.os-comparison h3 {
  font-size: calc(34 / 1920 * 100vw);
  font-weight: 800;
  line-height: calc(60 / 34);
  text-align: center;
}
.os-comparison h3 span {
  font-size: calc(40 / 34 * 1em);
  color: var(--white);
}

@media screen and (min-width:1921px) {
  .os-comparison h3 {
    font-size: 34px;
    font-size: 3.4rem;
  }
}

/* Movie
---------------------------------------------------------------------- */
.movie-unit {
  max-width: 920px;
  width: 100%;
  margin: 0 auto 45px;
  padding: 15px 15px 5px;
  background: url(../common/images/inquiry_bg.png) repeat 0 0;
  display: none;
}

/*
  Section09
====================================================================== */
.sec09 {}
.contract-work-unit { display: grid; }
.contract-work {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
}
.contract-work-unit > figure { grid-area: 1 / 1; }
.contract-work-unit > figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media screen and (max-width:1700px) {
  .contract-work-unit > figure img { aspect-ratio: 1 / 1; }
}

@media screen and (max-width:1440px) {
  .contract-work-unit > figure img { aspect-ratio: 1 / 1.05; }
}

@media screen and (max-width:1280px) {
  .contract-work-unit > figure img { aspect-ratio: 1 / 1.1; }
}



/* 請負工事 - 選ばれる3つの特徴
---------------------------------------------------------------------- */
.three-features-unit {
  position: relative;
  margin: 0 0 100px;
}
.three-features-unit > .inner { padding: 100px 0 0; }
.three-features-unit h2 {
  font-size: calc(72 / 1920 * 100vw);
  font-weight: 800;
  letter-spacing: .075em;
  line-height: calc(60 / 48);
  color: #20a150;
}
.three-features-unit h2 span {
  font-size: calc(48 / 72 * 1em);
  letter-spacing: .075em;
  line-height: calc(60 / 48);
  color: var(--black);
  display: block;
}
.three-features { margin: 25px 0 0; }
.three-feature {
  width: calc(840 / 1200 * 100%);
  height: calc(110 / 1920 * 100vw);
  transform: skewX(-20deg);
  margin: 0 0 14px;
}
.three-feature::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8px;
  left: 8px;
  width: 100%;
  height: 100%;
  background-color: #231815;
  mix-blend-mode: multiply;
  opacity: .1;
}
.three-feature dl {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: calc(390 / 840 * 100%) calc(450 / 840 * 100%);
}
.three-feature dl dt {
  display: grid;
  grid-template-columns: calc(90 / 390 * 100%) calc(300 / 390 * 100%);
  color: var(--white);
}
.three-feature dl dt > p {
  position: relative;
  background-color: var(--green);
  display: grid;
  place-items: center;
}
.three-feature dl dt img {
  width: calc(35 / 90 * 100%);
  height: auto;
  transform: skewX(20deg);
  display: inline-block;
}
.three-feature dl dt span,
.three-feature dl dd span {
  transform: skewX(20deg);
  display: inline-block;
}
.three-feature dl dt > div {
  font-size: calc(24 / 1920 * 100vw);
  letter-spacing: .075em;
  line-height: calc(36 / 24);
  place-items: center start;
  background-color: #20a150;
  display: grid;
  padding: 0 0 0 1em;
}
.three-feature dl dd {
  background-color: var(--white);
  outline: solid 2px #20a150;
  outline-offset: -2px;
  display: grid;
  place-items: center start;
  padding: 0 1em 0 3em;
}
.three-feature dl dd > span {
  font-size: max(calc(16 / 1920 * 100vw),13px);
  letter-spacing: .075em;
  line-height: calc(28 / 16);
}

@media screen and (min-width:1921px) {
  .three-features-unit h2 {
    font-size: 72px;
    font-size: 7.2rem;
  }
  .three-feature { height: 110px; }
  .three-feature dl dt > div {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .three-feature dl dd > span {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

/* 請負工事 - 適正価格
---------------------------------------------------------------------- */
.fp-comparison .inner { padding: 0 120px; }
.fp-comparison h3 {
  font-size: calc(30 / 1920 * 100vw);
  font-weight: 800;
  line-height: calc(60 / 30);
  letter-spacing: .075em;
  white-space: nowrap;
}
.fp-comparison h3 span {
  font-size: calc(40 / 30 * 1em);
  color: #009a3e;
}

@media screen and (min-width:1921px) {
  .fp-comparison h3 {
    font-size: 30px;
    font-size: 3.0rem;
  }
}

/*
  Section10
====================================================================== */
.sec10 {
  position: relative;
  z-index: 1;
  height: auto;
  display: grid;
  transform: translateY(calc(-15 / 1920 * 100vw));
  margin: 0 0 calc(-15 / 1920 * 100vw);
}
.sec10::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(-60 / 1920 * 100vw);
  left: 50%;
  transform: translateX(-50%);
  width: calc(147 / 1920 * 100vw);
  height: calc(176 / 1920 * 100vw);
  background: url(../images/top/top_sec03_check.png) no-repeat 0 0;
  background-size: cover;
}
.sec10 > .inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-content: center;
  grid-area: 1 / 1;
}
.sec10 h2 {
  font-size: calc(48 / 1920 * 100vw);
  font-weight: 800;
  line-height: calc(60 / 48);
  letter-spacing: .075em;
  color: var(--white);
  text-align: center;
  margin: 0 0 40px;
}
.sec10 > figure { grid-area: 1 / 1; }
.sec10 > figure img {
  height: auto;
  object-fit: cover;
}

@media screen and (min-width:1921px) {
  .sec10 h2 {
    font-size: 48px;
    font-size: 4.8rem;
  }
}

/*
  Section11
====================================================================== */
.sec11 {
  padding: 0 0 90px;
  background-color: var(--yellow);
  transform: translateY(calc(-11 / 1920 * 100vw));
}
.sec11::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(-64 / 1920 * 100vw);
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 64;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(../images/top/2026/top_sec11_bg_top02.png);
  background-size: 100%;
}
/*
.sec11::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: calc(-67 / 1920 * 100vw);
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 67;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(../images/top/2026/top_sec11_bg_btm.png);
  background-size: 100%;
}
*/

.inq-header {
  position: relative;
  z-index: 2;
  transform: translateY(calc((54 + 78) / 1920 * 100vw * -1));
  margin: 0 0 calc((54 + 78) / 1920 * 100vw * -1);
}
.inq-header > figure { overflow: hidden; }
.inq-header > figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.inq-header > div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 50%;
  height: 100%;
  display: grid;
  place-content: center end;
}
.inq-header > div h3 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  line-height: calc(54 / 30);
  letter-spacing: .075em;
  margin: 0 0 .5em;
}
.inq-header > div h3 span { color: var(--d-green); }
.inq-header > div a {
  width: 380px;
  height: 100px;
  color: var(--white);
  background-color: #0d47a1;
  text-decoration: none;
  border: solid 2px var(--black);
  border-radius: 10px;
  box-shadow: 3px 3px 0 0 var(--black);
  transition: all .3s;
  display: grid;
  place-content: center;
  pointer-events: none;
  padding: 5px 0 0;
}
.inq-header > div a figure { width: 225px; }
.inq-header > div a figure figcaption {
  font-size: 15px;
  font-size: 1.5rem;
  letter-spacing: .05em;
  margin: .5em 0 0;
}