@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp-noto.min.css");
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanmp-noto.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Noto+Serif+JP:wght@300;400;500&display=swap");
.font-mincho-web {
  font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

.font-gothic-web {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.basic-page {
  font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
}

.noto_serif {
  font-family: YakuHanMP_Noto, "Noto Serif JP", serif;
}

.font-style-italic {
  font-style: italic;
}

@media screen and (min-width: 897px) {
  .sp {
    display: none !important;
  }
}
a[href^="tel:"] {
  cursor: default;
  pointer-events: none;
}

@media screen and (max-width: 896px) {
  .pc {
    display: none !important;
  }
  a:hover,
a:hover img {
    opacity: 1 !important;
  }
  a[href^="tel:"] {
    cursor: pointer;
    pointer-events: auto;
  }
}
* html .clearfix {
  zoom: 1;
}

* + html .clearfix {
  zoom: 1;
}

.clearfix:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}

/* color */
*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* 横幅max */
#page.widthFull {
  max-width: inherit;
}
#page.widthFull #browsebar.fix {
  max-width: inherit;
}

/* flex */
.flexWrap.secFlexBlockPc, .flexWrap.secFlexBlock {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.justifyBetween.secFlexBlockPc, .justifyBetween.secFlexBlock {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.justifyCenter.secFlexBlockPc, .justifyCenter.secFlexBlock {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.alignEnd.secFlexBlockPc, .alignEnd.secFlexBlock {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.alignCenter.secFlexBlockPc, .alignCenter.secFlexBlock {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 896px) {
  .justifyBetweenSP.secFlexBlockPc, .justifyBetweenSP.secFlexBlock {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.secFlexBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.secFlexBlockPc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 896px) {
  .secFlexBlockPc {
    display: block;
  }
}

/* a */
a {
  color: #1f1f1f;
}
a.linkHover {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
a.linkHover:hover {
  opacity: 0.7;
}

/* ぱんくず */
@media screen and (max-width: 896px) {
  .basic-page .container.sectionContents.noPaddingSp {
    padding: 0;
  }
}

/* sec => 共通 */
.sec a.addArrow02:hover, .sec a.addArrow:hover {
  opacity: 0.7;
  text-decoration: none;
}

.sec {
  letter-spacing: 0.02em;
}
.sec.secColorLblue {
  background-color: #CEEBFB;
}
.sec.secColorBlue {
  background-color: #66B4E7;
}
.sec .secTitle {
  margin-bottom: 3.5em;
}
@media screen and (max-width: 896px) {
  .sec .secTitle {
    margin-bottom: 2.5em;
  }
}
.sec .secTitle h2 {
  width: 544px;
  margin: 0 auto;
}
@media screen and (max-width: 896px) {
  .sec .secTitle h2 {
    width: 90%;
  }
}
.sec .secTitle h2.titleSupervision {
  width: 751px;
}
@media screen and (max-width: 896px) {
  .sec .secTitle h2.titleSupervision {
    width: 70%;
  }
}
.sec .secTitle.titlePickup {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: -30px;
  margin-bottom: 0;
}
.sec .secTitle.titlePickup h2 {
  width: 152px;
}
.sec .secTitle.titleWhats {
  margin-bottom: 2.25em;
}
@media screen and (max-width: 896px) {
  .sec .secTitle.titleWhats {
    margin-bottom: 2em;
  }
}
.sec .secTitle.titleWhats h2 {
  width: 648px;
}
@media screen and (max-width: 896px) {
  .sec .secTitle.titleWhats h2 {
    width: 61%;
  }
}
.sec .secTitle.titleWhy h2 {
  width: 468px;
}
@media screen and (max-width: 896px) {
  .sec .secTitle.titleWhy h2 {
    width: 47%;
  }
}
.sec a.addArrow {
  position: relative;
  display: block;
  width: auto;
  padding: 1.2em 0 1.2em 1.5em;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  background-color: #0082D7;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media screen and (max-width: 896px) {
  .sec a.addArrow {
    padding: 1.2em 0 1.2em 2.5em;
    font-size: 15px;
  }
}
.sec a.addArrow:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 20px;
  height: 16px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/hvac/pes/technology/hocl/img/icon_arrow.svg);
}
@media screen and (max-width: 896px) {
  .sec a.addArrow:after {
    right: 30px;
  }
}
.sec a.addArrow02 {
  position: relative;
  display: block;
  width: auto;
  padding: 0.95em 0 0.95em 1.5em;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  border: 3px #fff solid;
  background-color: #0082D7;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media screen and (max-width: 896px) {
  .sec a.addArrow02 {
    padding: 1.2em 0 1.2em 1.2em;
    font-size: 15px;
  }
}
.sec a.addArrow02:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 12px;
  height: 19px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/hvac/pes/technology/hocl/img/icon_arrow02.svg);
}
.sec a.addArrow02.customTxtCenter {
  padding-left: 0;
  text-align: center;
}
@media screen and (max-width: 896px) {
  .sec a.addArrow02.customTxtCenter {
    padding: 1.2em 0 1.2em 1.2em;
    text-align: left;
  }
}
.sec .secBlock {
  position: relative;
  margin-bottom: 60px;
}
@media screen and (min-width: 897px) {
  .sec .secBlock.secBlockCustomMb85Pc {
    margin-bottom: 85px;
  }
}
@media screen and (min-width: 897px) {
  .sec .secBlock.secBlockCustomMb170Pc {
    margin-bottom: 170px;
  }
}
@media screen and (max-width: 896px) {
  .sec .secBlock.secBlockCustomMb45Sp {
    margin-bottom: 45px;
  }
}
@media screen and (max-width: 896px) {
  .sec .secBlock.secBlockCustomMb20Sp {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 896px) {
  .sec .secBlock.secBlockCustomMbNoneSp {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 897px) {
  .sec .secBlock:nth-last-of-type(1) {
    margin-bottom: 0;
  }
}
.sec .secBlock .secBlockTexts {
  max-width: 510px;
  padding-bottom: 2em;
  font-size: 20px;
  line-height: 36px;
}
@media screen and (max-width: 896px) {
  .sec .secBlock .secBlockTexts {
    font-size: 13px;
    line-height: 1.76;
  }
}
.sec .secBlock .secBlockTexts.textsW100 {
  max-width: inherit;
  padding-bottom: 1.5em;
}
@media screen and (max-width: 896px) {
  .sec .secBlock .secBlockTexts.textsW100 {
    padding-bottom: 2.5em;
  }
}
.sec .secBlock .secBlockImage {
  position: absolute;
  top: 0;
}
@media screen and (max-width: 896px) {
  .sec .secBlock .secBlockImage {
    position: static;
    margin: 0 auto 40px;
  }
}
.sec .secBlock .secBlockImage.blockImageKnowledge {
  left: 30px;
  width: 218px;
}
@media screen and (max-width: 896px) {
  .sec .secBlock .secBlockImage.blockImageKnowledge {
    width: 50%;
  }
}
.sec .secBlock .secBlockImage.blockImageBackground {
  width: 426px;
}
@media screen and (max-width: 896px) {
  .sec .secBlock .secBlockImage.blockImageBackground {
    width: 100%;
  }
}
.sec .secBlock .secBlockImage.blockImageCt {
  width: 284px;
}
@media screen and (max-width: 896px) {
  .sec .secBlock .secBlockImage.blockImageCt {
    width: 80%;
  }
}
.sec .secBlock .secBlockImage.blockImageEffect {
  left: 38px;
  width: 232px;
}
@media screen and (max-width: 896px) {
  .sec .secBlock .secBlockImage.blockImageEffect {
    width: 60%;
  }
}
.sec .secBlock .secBlockImage.blockImageSafety {
  right: 15px;
  width: 262px;
}
@media screen and (max-width: 896px) {
  .sec .secBlock .secBlockImage.blockImageSafety {
    width: 70%;
  }
}
.sec .secBlock .secBlockBtn {
  width: 180px;
}
@media screen and (max-width: 896px) {
  .sec .secBlock .secBlockBtn {
    width: 75%;
    max-width: 220px;
  }
}
.sec .secBlockLeft .secBlockTexts {
  margin: 0 0 0 auto;
}
@media screen and (max-width: 896px) {
  .sec .secBlockLeft .secBlockTexts {
    margin: 0;
  }
}
.sec .secBlockLeft .secBlockImage {
  left: 0;
}
.sec .secBlockLeft .secBlockBtn {
  margin: 0 0 0 auto;
}
@media screen and (max-width: 896px) {
  .sec .secBlockLeft .secBlockBtn {
    margin: 0 auto;
  }
}
.sec .secBlockRight .secBlockTexts {
  margin: 0 auto 0 0;
}
.sec .secBlockRight .secBlockImage {
  right: 0;
}
.sec .secBlockRight .secBlockBtn {
  margin: 0 auto 0 0;
}
@media screen and (max-width: 896px) {
  .sec .secBlockRight .secBlockBtn {
    margin: 0 auto;
  }
}

/* secContent => 共通 */
.secContent {
  padding: 100px 0 80px;
}
@media screen and (max-width: 896px) {
  .secContent {
    padding: 50px 0 40px;
  }
}
.secContent .container {
  max-width: 830px;
}
@media screen and (max-width: 896px) {
  .secContent .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.secContent.w980 .container {
  max-width: 980px;
}
.secContent.secBgPrinciple {
  height: 627px;
  background-color: #EAF7FD;
  background-image: url(/hvac/pes/technology/hocl/img/bg_wave_repeat1292px_bl_pc.png);
  background-position: 50% -270%;
  background-repeat: repeat-x;
  background-size: 1292px auto;
}
@media screen and (max-width: 896px) {
  .secContent.secBgPrinciple {
    height: auto;
    background-color: #D8EFFB;
    background-image: url(/hvac/pes/technology/hocl/img/bg_wave_sp.png);
    background-position: 0 -21vw;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
}
.secContent.secBgPrinciple .secTitle {
  margin-bottom: 3.5em;
}
.secContent.secBgSafety {
  height: 500px;
  background-color: #EAF7FD;
  background-image: url(/hvac/pes/technology/hocl/img/bg_wave_repeat1292px_bl_pc.png);
  background-position: 50% 30%;
  background-repeat: repeat-x;
  background-size: 1292px auto;
}
@media screen and (max-width: 896px) {
  .secContent.secBgSafety {
    height: auto;
    background-color: #D8EFFB;
    background-image: url(/hvac/pes/technology/hocl/img/bg_wave_sp.png);
    background-position: 0 -20vw;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
}
.secContent.secBgSupervision {
  padding-bottom: 50px;
  background-color: #EAF7FD;
  background-image: url(/hvac/pes/technology/hocl/img/bg_wave_repeat1292px_bl_pc.png);
  background-position: 50% 100%;
  background-repeat: repeat-x;
  background-size: 1292px auto;
}
@media screen and (max-width: 896px) {
  .secContent.secBgSupervision {
    padding-top: 30px;
    padding-bottom: 30px;
    height: auto;
    background-color: #D8EFFB;
    background-image: url(/hvac/pes/technology/hocl/img/bg_wave_sp.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 896px) {
  .secContent.secBgSupervision .secTitle {
    margin-bottom: 1.5em;
  }
}

.basic-page .container.menuBtnContainer {
  padding: 0;
}

/* menuHocl => add fixed */
.basic-page.isFixed .menuHocl {
  position: fixed;
}
@media screen and (min-width: 897px) {
  .basic-page.isFixed .menuHocl.isFixed {
    top: 58px;
  }
}
@media screen and (min-width: 897px) {
  .basic-page.isFixed .menuHocl.isFixed.isClosed {
    top: 110px;
  }
}
@media screen and (min-width: 897px) {
  .basic-page.isFixed .menuHocl.isFixed.isClosed.isOpen {
    top: 117px;
  }
}
@media screen and (min-width: 897px) {
  .basic-page.isFixed .menuHocl.isFixed.isClosed .menuHoclInner li.menuHoclIsTop {
    display: block;
  }
}

/* menuBtn & menuBgSp => add fixed */
@media screen and (max-width: 896px) {
  .basic-page.isFixed .menuBtn {
    position: fixed;
  }
}
@media screen and (max-width: 896px) {
  .basic-page.isFixed .menuBgSp {
    position: fixed;
  }
}

/* 開閉 pconly */
@media screen and (min-width: 1341px) {
  .menuHocl.isClosed {
    -webkit-transform: translateX(-172px);
            transform: translateX(-172px);
  }
}
@media screen and (max-width: 1340px) {
  .menuHocl.isClosed {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@media screen and (min-width: 897px) {
  .menuHocl.isClosed {
    -webkit-transition: opacity 0.3s, top 0.3s;
    transition: opacity 0.3s, top 0.3s;
    opacity: 0;
    pointer-events: none;
    height: 0;
  }
  .menuHocl.isClosed.isOpen {
    opacity: 1;
    pointer-events: auto;
    height: auto;
  }
}

/* 開閉 sponly */
@media screen and (max-width: 896px) {
  .menuHocl {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  .menuHocl.isOpen {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

/* btn 開閉 */
@media screen and (min-width: 897px) {
  .menuBtn {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  .menuBtn.isOpenPc {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
}
.menuBtn.isClosed {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.menuBtn.isOpen span:nth-of-type(1) {
  top: 10px;
  left: 17px;
  -webkit-transform: translateY(6px) rotate(-45deg);
          transform: translateY(6px) rotate(-45deg);
  width: 30%;
}
.menuBtn.isOpen span:nth-of-type(2) {
  top: 22px;
  left: 17px;
  -webkit-transform: translateY(-6px) rotate(45deg);
          transform: translateY(-6px) rotate(45deg);
  width: 30%;
}
.menuBtn.isOpen span:nth-of-type(2)::after {
  content: "Close"; /*3つ目の要素のafterにClose表示を指定*/
  -webkit-transform: translateY(0) rotate(-45deg);
          transform: translateY(0) rotate(-45deg);
  top: 8px;
  left: 0;
}

.menuHocl {
  position: absolute;
  top: 34px;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  z-index: 2;
  width: 174px;
  line-height: 1.5;
}
@media screen and (max-width: 896px) {
  .menuHocl {
    position: absolute;
    top: 0;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    z-index: 10;
    width: 65%;
    height: 100vh;
    padding-top: 80px;
    background-color: #fff;
  }
}
.menuHocl .menuHoclInner {
  width: 100%;
}
@media screen and (max-width: 896px) {
  .menuHocl .menuHoclInner {
    padding-left: 10px;
  }
}
.menuHocl .menuHoclInner li {
  margin-bottom: 12px;
}
@media screen and (max-width: 896px) {
  .menuHocl .menuHoclInner li {
    margin-bottom: 1px;
    text-align: left;
  }
}
.menuHocl .menuHoclInner li.menuHoclIsTop {
  display: none;
}
@media screen and (max-width: 896px) {
  .menuHocl .menuHoclInner li.menuHoclIsTop {
    display: block;
  }
}
.menuHocl .menuHoclInner a {
  display: block;
}
@media screen and (min-width: 897px) {
  .menuHocl .menuHoclInner a {
    height: 52px;
  }
}
.menuHocl .menuHoclInner img {
  background-color: #fff;
}
@media screen and (max-width: 896px) {
  .menuHocl .menuHoclInner img {
    width: 75%;
  }
}

.menuBtn {
  position: fixed;
  top: 55px;
  z-index: 1000;
  background: #0056A8;
  cursor: pointer;
  width: 52px;
  height: 52px;
  border: 2px #fff solid;
}
@media screen and (min-width: 1341px) {
  .menuBtn {
    -webkit-transform: translateX(-49px);
            transform: translateX(-49px);
  }
}
@media screen and (max-width: 1340px) {
  .menuBtn {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@media screen and (max-width: 896px) {
  .menuBtn {
    position: absolute;
    top: 16px;
    left: 10px;
    z-index: 15;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.menuBtn span {
  display: inline-block;
  -webkit-transition: all 0.4s;
  transition: all 0.4s; /*アニメーションの設定*/
  position: absolute;
  left: 9px;
  height: 2px;
  border-radius: 5px;
  background: #fff;
  width: 64%;
}
.menuBtn span:nth-of-type(1) {
  top: 10px;
}
.menuBtn span:nth-of-type(2) {
  top: 20px;
}
.menuBtn span:nth-of-type(2)::after {
  content: "Menu"; /*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top: 9px;
  left: -2px;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media screen and (max-width: 896px) {
  .menuBgSp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.menuBgSp.isClosed {
  display: none;
}
@media screen and (max-width: 896px) {
  .menuBgSp.isClosed.isOpen {
    display: block;
  }
}

.secHero {
  height: 1146px;
  font-size: 17px;
  text-align: center;
  line-height: 40px;
  background-color: #66B4E7;
  background-image: url(/hvac/pes/technology/hocl/img/bg_hero_repeat1292px_pc.png);
  background-position: 50% 0;
  background-repeat: repeat-x;
  background-size: 1292px auto;
}
@media screen and (max-width: 896px) {
  .secHero {
    height: auto;
    font-size: 14px;
    line-height: 2;
    background-color: #ADDEF8;
    background-image: url(/hvac/pes/technology/hocl/img/bg_hero_sp.jpg);
    background-size: 100% auto;
  }
}
.secHero h1 {
  width: 514px;
  margin: 0 auto 176px;
  padding-top: 64px;
}
@media screen and (max-width: 896px) {
  .secHero h1 {
    width: 75%;
    margin: 0 auto 20%;
    padding-top: 4%;
  }
}
.secHeroBgPc {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}
@media screen and (max-width: 896px) {
  .secHeroBgPc {
    display: none;
  }
}
.secHeroTextsNotes {
  font-size: 15px;
}
@media screen and (max-width: 896px) {
  .secHeroTextsNotes {
    max-width: 300px;
    margin: 1em auto 2em;
    padding: 0;
    font-size: 10px;
    text-align: left;
    line-height: 1.8;
  }
}
.secHeroTextsInner {
  padding-bottom: 1em;
}

/* secBlockBlue */
.secBlockBlue {
  padding: 1.75em;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #66B4E7;
}
@media screen and (max-width: 896px) {
  .secBlockBlue {
    font-size: 13px;
    text-align: center;
  }
}
.secBlockBlue .secBlockLinks {
  padding-top: 1.5em;
}
.secBlockBlue .secBlockLinks li {
  width: 370px;
}
@media screen and (max-width: 896px) {
  .secBlockBlue .secBlockLinks li {
    width: 100%;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 896px) {
  .secBlockBlue .secBlockLinks li:nth-last-of-type(1) {
    margin-bottom: 0;
  }
}

/* secPickup */
.secPickup {
  position: relative;
  width: 830px;
  margin: 0 auto;
  padding: 2.5em 0;
  border: 3px #0082D7 solid;
  background-color: #fff;
}
@media screen and (max-width: 896px) {
  .secPickup {
    width: 100%;
  }
}
.secPickup:after, .secPickup:before {
  content: "";
  display: block;
  position: absolute;
  width: 57px;
  height: 57px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/hvac/pes/technology/hocl/img/icon_virus.svg);
}
@media screen and (max-width: 896px) {
  .secPickup:after, .secPickup:before {
    width: 24px;
    height: 24px;
  }
}
.secPickup:after {
  top: 30%;
  left: 45px;
}
@media screen and (max-width: 896px) {
  .secPickup:after {
    top: auto;
    bottom: 19%;
    left: 4%;
  }
}
.secPickup:before {
  top: 25px;
  right: 65px;
}
@media screen and (max-width: 896px) {
  .secPickup:before {
    top: 6%;
    right: 5%;
  }
}
.secPickup .secPickupTexts {
  color: #0082D7;
  font-size: 23px;
  text-align: center;
  line-height: 1.78;
}
@media screen and (max-width: 896px) {
  .secPickup .secPickupTexts {
    font-size: 13px;
  }
}
.secPickup .secPickupTexts span {
  font-size: 15px;
  letter-spacing: 0.1em;
  vertical-align: middle;
}
@media screen and (max-width: 896px) {
  .secPickup .secPickupTexts span {
    display: inline-block;
    padding: 0.75em 0 1.5em;
    font-size: 10px;
    line-height: 1.6;
  }
}
.secPickup .secBlockBtn {
  position: absolute;
  right: 18px;
  bottom: -35px;
  width: 180px;
}
@media screen and (max-width: 896px) {
  .secPickup .secBlockBtn {
    position: static;
    max-width: 220px;
    width: 75%;
    margin: 0 auto;
  }
}

/* secBlockDemonstration */
.secBlockDemonstration li {
  width: 370px;
}
@media screen and (max-width: 896px) {
  .secBlockDemonstration li {
    width: 90%;
    margin: 0 auto;
  }
}

/* secNewBlock */
.secNewBlock {
  padding: 3em 2.75em;
  font-size: 17px;
  line-height: 35px;
  background-color: #CEEBFB;
}
@media screen and (max-width: 896px) {
  .secNewBlock {
    padding: 1.5em;
    font-size: 12px;
    line-height: 1.9;
  }
}
.secNewBlock div {
  margin-bottom: 1em;
}
@media screen and (max-width: 896px) {
  .secNewBlock div {
    margin-bottom: 1.5em;
  }
}
.secNewBlock dt {
  width: 106px;
}
.secNewBlock dd {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.secNewBlock a {
  padding-bottom: 0.25em;
  color: #1f1f1f;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(98%, transparent), color-stop(0%, #14B4E6));
  background: linear-gradient(transparent 98%, #14B4E6 0%);
}
@media screen and (max-width: 896px) {
  .secNewBlock a {
    padding-bottom: 0.1em;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(96%, transparent), color-stop(0%, #14B4E6));
    background: linear-gradient(transparent 96%, #14B4E6 0%);
  }
}
.secNewBlock a:hover {
  text-decoration: none;
}

/* secSupervision */
.secSupervision {
  padding: 0 2.5em;
}
@media screen and (max-width: 896px) {
  .secSupervision {
    padding: 0;
  }
}
.secSupervisionPhoto {
  width: 240px;
  margin-right: 3em;
}
@media screen and (max-width: 896px) {
  .secSupervisionPhoto {
    width: 50%;
    margin: 0 auto 1em;
  }
}
.secSupervisionTexts {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.secSupervisionTextsNotes {
  margin-bottom: 1em;
  font-size: 20px;
}
@media screen and (max-width: 896px) {
  .secSupervisionTextsNotes {
    font-size: 6px;
    text-align: center;
  }
}
.secSupervisionTextsName {
  margin-bottom: 0.75em;
  font-size: 32px;
}
@media screen and (max-width: 896px) {
  .secSupervisionTextsName {
    margin-bottom: 1.75em;
    font-size: 16px;
    text-align: center;
  }
}
.secSupervisionTextsName .nameSmall01 {
  font-size: 15px;
}
@media screen and (max-width: 896px) {
  .secSupervisionTextsName .nameSmall01 {
    font-size: 7px;
  }
}
.secSupervisionTextsName .nameSmall02 {
  padding-left: 1em;
  font-size: 20px;
}
@media screen and (max-width: 896px) {
  .secSupervisionTextsName .nameSmall02 {
    font-size: 10px;
  }
}
.secSupervisionTextsText {
  font-size: 15px;
  line-height: 30px;
}
@media screen and (max-width: 896px) {
  .secSupervisionTextsText {
    font-size: 12px;
    line-height: 1.8;
  }
}

.secSupervisionBdr {
  margin-top: 3em;
  padding: 1.5em 2em;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0.06em;
  border: 2px #0082D7 solid;
  background-color: #fff;
}
@media screen and (max-width: 896px) {
  .secSupervisionBdr {
    padding: 1.25em;
    font-size: 12px;
    line-height: 1.8;
  }
}

/* bgEffects */
.bgEffects.bgEffectsTwin, .bgEffects.bgEffectsSBl, .bgEffects.bgEffectsLBl, .bgEffects.bgEffectsSWt, .bgEffects.bgEffectsLWt {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
}

.bgEffects {
  position: absolute;
}
.bgEffects.bgEffectsLWt {
  width: 48px;
  height: 60px;
  background-image: url(/hvac/pes/technology/hocl/img/effect_l_wt.svg);
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffectsLWt {
    width: 24px;
    height: 32px;
  }
}
.bgEffects.bgEffectsSWt {
  width: 32px;
  height: 42px;
  background-image: url(/hvac/pes/technology/hocl/img/effect_s_wt.svg);
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffectsSWt {
    width: 20px;
    height: 25px;
  }
}
.bgEffects.bgEffectsLBl {
  width: 40px;
  height: 51px;
  background-image: url(/hvac/pes/technology/hocl/img/effect_l_bl.svg);
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffectsLBl {
    width: 24px;
    height: 32px;
  }
}
.bgEffects.bgEffectsSBl {
  width: 25px;
  height: 31px;
  background-image: url(/hvac/pes/technology/hocl/img/effect_s_bl.svg);
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffectsSBl {
    width: 20px;
    height: 25px;
  }
}
.bgEffects.bgEffectsTwin {
  width: 100px;
  height: 127px;
  background-image: url(/hvac/pes/technology/hocl/img/effect_twin_wt.svg);
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffectsTwin {
    width: 57px;
    height: 79px;
  }
}
.bgEffects.bgEffects01 {
  left: -105px;
  top: -30px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects01 {
    display: none;
  }
}
.bgEffects.bgEffects02 {
  right: -110px;
  bottom: 0;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects02 {
    display: none;
  }
}
.bgEffects.bgEffects03 {
  right: 50px;
  top: 0;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects03 {
    right: 8%;
    top: -1.5%;
  }
}
.bgEffects.bgEffects04 {
  left: -120px;
  top: 360px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects04 {
    left: 9%;
    top: 12%;
  }
}
.bgEffects.bgEffects042 {
  display: none;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects042 {
    display: block;
    right: 15%;
    top: 39%;
  }
}
.bgEffects.bgEffects05 {
  left: 300px;
  bottom: 280px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects05 {
    left: auto;
    right: 6%;
    top: 20%;
    bottom: auto;
  }
}
.bgEffects.bgEffects052 {
  display: none;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects052 {
    display: block;
    left: 15%;
    top: 53%;
  }
}
.bgEffects.bgEffects06 {
  left: -40px;
  top: -26px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects06 {
    left: 5%;
    top: 45%;
    background-image: url(/hvac/pes/technology/hocl/img/effect_l_wt.svg);
  }
}
.bgEffects.bgEffects07 {
  right: 35px;
  top: -10px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects07 {
    right: 5%;
    top: -5%;
    background-image: url(/hvac/pes/technology/hocl/img/effect_l_wt.svg);
  }
}
.bgEffects.bgEffects08 {
  left: -120px;
  bottom: 60px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects08 {
    display: none;
  }
}
.bgEffects.bgEffects09 {
  right: -20px;
  top: -20px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects09 {
    right: 1%;
    top: 7%;
  }
}
.bgEffects.bgEffects10 {
  left: -80px;
  bottom: 126px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects10 {
    left: 5%;
    bottom: 20%;
  }
}
.bgEffects.bgEffects11 {
  right: 80px;
  top: -30px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects11 {
    right: auto;
    left: 7%;
    top: 40%;
    background-image: url(/hvac/pes/technology/hocl/img/effect_s_wt.svg);
  }
}
.bgEffects.bgEffects12 {
  left: 43%;
  bottom: -30px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects12 {
    left: auto;
    right: 5%;
    bottom: 2%;
    background-image: url(/hvac/pes/technology/hocl/img/effect_l_wt.svg);
  }
}
.bgEffects.bgEffects13 {
  left: 40px;
  top: 30px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects13 {
    left: auto;
    right: 2%;
    top: auto;
    bottom: -14%;
  }
}
.bgEffects.bgEffects14 {
  right: -20px;
  bottom: 0;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects14 {
    left: 5%;
    right: auto;
    top: -15%;
  }
}
.bgEffects.bgEffects15 {
  left: -70px;
  top: 0;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects15 {
    left: 8%;
    top: -4%;
  }
}
.bgEffects.bgEffects16 {
  right: -115px;
  bottom: 150px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects16 {
    display: none;
  }
}
.bgEffects.bgEffects17 {
  right: 88px;
  top: 44px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects17 {
    right: 8%;
    top: 16%;
  }
}
.bgEffects.bgEffects18 {
  left: -60px;
  bottom: 154px;
}
@media screen and (max-width: 896px) {
  .bgEffects.bgEffects18 {
    left: 6%;
    top: 22%;
    bottom: auto;
  }
}

@media screen and (max-width: 896px) {
  .secStart.secContent {
    padding-bottom: 0;
  }
}

.secWhy.secContent {
  padding: 200px 0 0;
  height: 870px;
  background-color: #fff;
  background-image: url(/hvac/pes/technology/hocl/img/bg_why.png);
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 2000px auto;
}
@media screen and (max-width: 896px) {
  .secWhy.secContent {
    padding: 32% 0 10%;
    height: auto;
    background-color: #addef8;
    background-image: url(/hvac/pes/technology/hocl/img/bg_why_sp.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
}
.secWhy .secTitle {
  margin-bottom: 3em;
}
@media screen and (max-width: 896px) {
  .secWhy .secTitle {
    margin-bottom: 1.75em;
  }
}
.secWhy .secTitle h2 {
  width: 462px;
  margin: 0 auto;
}
@media screen and (max-width: 896px) {
  .secWhy .secTitle h2 {
    width: 46%;
  }
}
.secWhy .secBlock {
  margin: 0;
  padding: 0;
}
.secWhy .secBlock .secBlockInner {
  margin-bottom: 1.25em;
  font-size: 17px;
  text-align: center;
  line-height: 2.3;
}
@media screen and (max-width: 896px) {
  .secWhy .secBlock .secBlockInner {
    margin-bottom: 1em;
    font-size: 14px;
    line-height: 2;
  }
}
.secWhy .secBlock .secBlockInner:nth-last-of-type(1) {
  margin-bottom: 0;
}
.secWhy .bgEffects.bgEffectsWhy {
  position: absolute;
  top: 7%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 86%;
  z-index: 0;
}
@media screen and (min-width: 897px) {
  .secWhy .bgEffects.bgEffectsWhy {
    display: none;
  }
}

.js-animation-item.is-init {
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.js-animation-item.is-init.is-animation {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}