/*------------------------------------------------------------------------------
  PC or ALL 
------------------------------------------------------------------------------*/
.content {
  background: url(../images/bg.jpg) repeat;
}
.home .page-content {
  margin: 0 auto ;
}
.home .header {
  position: absolute;
  top: 0;
  left: 0;
}
.header-logo {
  width: 140px;
}
.home .header-logo {
  margin-top: 20px;
}
.home .header-logo img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.header-nav > ul > li .en {
  font-family: "Noto Serif JP", serif;
}
.home .header-nav > ul > li .en{
  color: #fff;
}
.mainvisual {
  height: 120vh;
  position: relative;
}
.mainvisual-catch {
  display: block;
  position: absolute;
  top: 64%;
  bottom: auto;
  transform: translateY(-50%);
  left: 15vw;
  width: auto;
  writing-mode: vertical-rl;
  height: 87%;
}
.mainvisual-catch div.copy {
  margin: 0;
  font-size: 4.6rem;
  line-height: 1.7;
  letter-spacing: 3px;
  position: relative;
  position: absolute;
  z-index: 10;
}
.mainvisual-catch div.sub-text {
  line-height: 1.4;
  margin-top: 6vw;
  margin-right: -3vw;
}
.mv-catch-text {
  font-size: 2rem;
  line-height: 2.4;
  margin-top: 7vw;
  margin-right: 3vw;
  letter-spacing: 1px;
}
.mainvisual .swiper-slide img {
  filter: brightness(0.5);
}
.mainvisual-catch div.copy p {
  text-shadow: 1px 2px 9px #747171;
}
.image-text-type03 .text:before {
  background: url(../images/bg4.jpg) repeat;
}
.box .btn a {
  padding: 13px 45px 12px 40px;
  border-radius: 10px;
}
.box .btn a:after {
  right: 10px;
}
.list-number-type02 ol li:before {
  width: 100px;
  height: 100px; 
  top: -5px;
  left: -5px;
  color: #fff;
  font-size: 4.4rem;
  border-bottom: none;
  background: url(../images/icon-bg.png);
  font-family: "Bona Nova SC", serif;
  font-weight: 400;
  padding: 12px 27px;
}
.list-flow-type01:after {
  z-index: 0;
  background: #eeeeee;
}
.list-flow-type01 > ul > li .text:before {
  z-index: 2;
}
.footer {
  background: url(../images/bg2.jpg) repeat center 55px;
}
.footer-main:after {
  background: #cfaa2a;
}
.pagetop a {
  display: block;
  width: 84px;
  height: 84px;
  color: none;
  line-height: 1;
  text-align: center;
  background: none;
  border-radius: 50%;
  box-shadow: none;
}
.pagetop a:after {
  display: none;  
}
.fixed-footer .contact a {
  border-radius: 10px;
}
.fixed-footer .tel a {
  font-size: 3.6rem;
  font-weight: normal;
}
.fixed-footer .tel a:before {
  margin: 7px 5px 0 0;
  font-size: 2.8rem;
}
.home {
  .title-type02:before, .title-type04:before {
    background: url(../images/bottom.png) no-repeat;
    width: 63px;
    height: 16px;
  }
  .box h3.box-h3 {
    color: var(--main-color);
  }
}
.main-concept {
  .box h3.box-h3 {
    font-size: 3.4rem;
  }
}
.main-merit {
  .box h3.box-h3 {
    text-align: center;
  }
  .box .copy {
    text-align: center;
  }
}
.main-maintenance {
  .box-wrap.bg {
    z-index: 1;
  }
  .box-wrap.bg:before {
    background: url(../images/bg2.jpg) repeat;
  }
  .row .col {
    background: url(../images/bg4.jpg) repeat;
    box-shadow: 3px 5px 20px #a2a2a29e;
    border-radius: 3px;
  }
  .row .col img {
    width: 100%;
  }
  h3:not([class]) {
    font-size: 2.4rem;
    font-family: "Noto Serif JP", serif;
    color: var(--main-color);
    text-align: center;
    padding: 20px 5px 0;
    margin: 0;
    line-height: 1.4;
  }
  h3:not([class]):after{
    display: none;
  }
  .text {
    padding: 0 33px 40px;
  }
}
.main-flow {
  .box-wrap.bg {
    z-index: 1;
  }
  .box-wrap.bg:before {
    background: url(../images/bg3.jpg) no-repeat center bottom /cover;
  }
  .box.list-flow-type01 {
    background: #fff;
    padding: 60px;
  }
  ul.box-ul {
  }
  .list-flow-type01:after {
    left: 160px;
  }
  .list-flow-type01:after {
    top: 60px;
    height: 85%;
  }
}
.main-message {
  .box h3:not([class]) {
    font-size: 2.6rem;
    padding: 0;
    font-family: "Noto Serif JP", serif;
  }
  h3:not([class]):after {
    display: none;
  }
  .box h2.box-h2 {
    font-family: "Noto Serif JP", serif;
    color: var(--main-color);
  }
  .box.title-text-type01.right {
    padding: 0px 9vw;
  }
  .text {
    max-width: 600px;
  }
}
.main-message2 {
  .box-wrap.bg {
    z-index: 1;
  }
  .box-wrap.bg:before {
    background: #fff;
  }
}
.main-blog {
  .box-wrap.bg {
    z-index: 1;
  }
  .box-wrap.bg:before {
    background: #fff;
  }
  .title-type01:before, .title-type03:before {
    width: 63px;
    height: 16px;
    background: url(../images/bottom.png) no-repeat;
    bottom: -25px;
    top: auto;
  }
  .blog-type01 .btn, .blog-type02 .btn, .blog-type03 .btn, .blog-type04 .btn {
    top: 0;
    position: absolute;
    right: 0;
    margin-top: -110px;
  }
}



/*------------------------------------------------------------------------------
  TABLET and SHONE
------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .home {
    .box .copy {
      font-size: 2rem;
    }
    .box h3.box-h3 {
      font-size: 2.8rem;
    }

  }
  .main-concept {
    .box h3.box-h3 {
        font-size: 2.8rem;
    }
  }
}

/*------------------------------------------------------------------------------
  TABLET ONLY
------------------------------------------------------------------------------*/
@media screen and (min-width: 600px) and (max-width: 1024px) {
}

/*------------------------------------------------------------------------------
  SPHONE ONLY
------------------------------------------------------------------------------*/
@media screen and (max-width: 599px) {
  .header-logo {
    width: 75px;
    margin-top: 0;
  }
  .home .header-logo {
    width: 80px;
    margin-top: 20px;
  }
  .mainvisual {
    height: calc(100vh - 100px);
  }
  .mainvisual-catch {
    left: auto;
    top: 60%;
    text-align: left;
  }
  .mainvisual-catch div.copy {
    font-size: 3rem;
  }
  .mv-catch-text {
    font-size: 1.6rem;
  }
  .mainvisual-catch div.copy {
    margin-right: 10vw;
}
  .main-merit {
    .list-number-type02 ol li:before {
      left: 40px;
    }
  }
  .list-flow-type01 > ul > li .icon {
    z-index: 10;
  }
  .main-flow {
    .box.list-flow-type01 {
        background: #fff;
        padding: 5vmin;
    }
    .list-flow-type01:after {
      left:8vmin;
    }
    .list-flow-type01:after {
        top: 5vmin;
        height: 95%;
    }
  }
  .main-blog {
    .blog-type01 .btn, .blog-type02 .btn, .blog-type03 .btn, .blog-type04 .btn {
        position: initial;
        margin-top: 10vw;
    }
  }
}