@charset "UTF-8";
/*------------------------------
下層ページ全体共通
------------------------------*/
#business,
#case,
#company,
#contact {
  width: 90%;
  margin: 0 auto;
  position: relative;
  padding-bottom: 60px;
  padding-top: 80px;
}
#business h2,
#case h2,
#company h2,
#contact h2 {
  border: 1px solid #adadad;
  padding: 5px 0;
}
@media screen and (min-width: 992px) {
  #business h2,
  #case h2,
  #company h2,
  #contact h2 {
    padding: 10px 0;
  }
}
#business h3,
#case h3,
#company h3,
#contact h3 {
  background-color: #ffffff;
  padding: 8px 0 8px 5%;
  width: 45%;
}
@media screen and (min-width: 576px) {
  #business h3,
  #case h3,
  #company h3,
  #contact h3 {
    width: 30%;
  }
}
#business ul,
#case ul,
#company ul,
#contact ul {
  display: flex;
  padding: 15px 0 15px 5%;
}
#business ul a,
#case ul a,
#company ul a,
#contact ul a {
  color: #ffffff;
}
#business li:after,
#case li:after,
#company li:after,
#contact li:after {
  content: "-";
  font-weight: 900;
  margin: 0 10px;
  color: #ffffff;
}
#business li:last-child:after,
#case li:last-child:after,
#company li:last-child:after,
#contact li:last-child:after {
  content: "";
}
#business .container,
#case .container,
#company .container,
#contact .container {
  padding-top: 30px;
  padding-right: 0px;
  padding-left: 0px;
  max-width: 100%;
}
@media screen and (min-width: 992px) {
  #business .container,
  #case .container,
  #company .container,
  #contact .container {
    max-width: 80%;
  }
}
#business .flex768-1clm, #business .flex768-2clm,
#case .flex768-1clm,
#case .flex768-2clm,
#company .flex768-1clm,
#company .flex768-2clm,
#contact .flex768-1clm,
#contact .flex768-2clm {
  margin: 1%;
}
@media screen and (min-width: 576px) {
  #business .flex768-1clm, #business .flex768-2clm,
  #case .flex768-1clm,
  #case .flex768-2clm,
  #company .flex768-1clm,
  #company .flex768-2clm,
  #contact .flex768-1clm,
  #contact .flex768-2clm {
    margin: 1% 1.5%;
  }
}
@media screen and (min-width: 992px) {
  #business .flex768-1clm, #business .flex768-2clm,
  #case .flex768-1clm,
  #case .flex768-2clm,
  #company .flex768-1clm,
  #company .flex768-2clm,
  #contact .flex768-1clm,
  #contact .flex768-2clm {
    margin: 1%;
  }
}

#business .fullimg-box {
  background-image: url(../img/business.jpg);
  background-size: cover;
  background-position: center;
  padding-top: 50px;
}

#case .fullimg-box {
  background-image: url(../img/case.jpg);
  background-size: cover;
  background-position: center;
  padding-top: 50px;
}

#company .fullimg-box {
  background-image: url(../img/company.jpg);
  background-size: cover;
  background-position: center;
  padding-top: 50px;
}

#contact .fullimg-box {
  background-image: url(../img/contact.jpg);
  background-size: cover;
  background-position: center;
  padding-top: 50px;
}

.content-boxlink .zoomIn {
  position: relative;
}
.content-boxlink p {
  padding-top: 45px;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.6;
}
@media screen and (min-width: 576px) {
  .content-boxlink p {
    font-size: 0.9rem;
    line-height: 1.8;
  }
}

.content-boxlink .zoomIn h2,
.content-box h2 {
  position: absolute;
  right: 0;
  bottom: -28px;
  height: 45px;
  width: 92%;
  text-align: left;
  font-size: 0.8rem;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 4%;
}
@media screen and (min-width: 576px) {
  .content-boxlink .zoomIn h2,
  .content-box h2 {
    font-size: 1rem;
    height: 55px;
    width: 85%;
  }
}
@media screen and (min-width: 992px) {
  .content-boxlink .zoomIn h2,
  .content-box h2 {
    font-size: 1.05rem;
  }
}

.content-box h2:after {
  border-style: none;
}

/*-----天窓工事-----*/
.after-box {
  position: relative;
}
.after-box .arrow-box {
  position: absolute;
  z-index: 99;
  background-color: #0252A3;
  width: 55px;
  height: 55px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  .after-box .arrow-box {
    width: 80px;
    height: 80px;
  }
}
.after-box .arrow-box .arrow {
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-left: 17px solid #ffffff;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  .after-box .arrow-box .arrow {
    width: 15px;
    height: 15px;
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent;
    border-left: 23px solid #ffffff;
  }
}

.velux {
  padding-bottom: 60px;
}
.velux h3 {
  padding-top: 30px;
}
@media screen and (min-width: 576px) {
  .velux h3 {
    padding-top: 60px;
  }
}
.velux .velux-rogo {
  padding: 30px 0 0;
}
.velux .velux-rogo img {
  display: block;
  margin: 0 auto;
  width: 280px;
}
.velux .year-box div {
  background-color: #0252A3;
  color: #ffffff;
  text-align: center;
  padding: 10px 0 0;
}
.velux .year-box div h4 {
  border-bottom: 2px solid #ffffff;
  display: inline-block;
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  .velux .year-box div h4 {
    font-size: 4rem;
  }
}
.velux .year-box div p {
  padding: 10px 0;
}

/*-----施工例-----*/
.case-margin {
  margin: 0 1% 5%;
}

.img2clm {
  margin: 0;
  flex-basis: 50%;
  max-width: 50%;
  width: 50%;
}

/*-----会社案内-----*/
#company-kazu img {
  height: auto;
}
#company-kazu h3 img {
  max-width: 50%;
}
@media screen and (min-width: 768px) {
  #company-kazu h3 img {
    max-width: 35%;
  }
}
#company-kazu .inner {
  justify-content: center;
  align-items: center;
}

#company-profile,
#company-performance {
  position: relative;
}
#company-profile .container,
#company-performance .container {
  padding: 0 5% 5%;
}
@media screen and (min-width: 992px) {
  #company-profile .container,
  #company-performance .container {
    padding: 0 10% 5%;
  }
}
#company-profile .inner,
#company-performance .inner {
  border-bottom: 1px solid #adadad;
  margin-bottom: 2%;
  padding-bottom: 2%;
}
#company-profile .inner:first-of-type,
#company-performance .inner:first-of-type {
  padding-top: 5%;
}
#company-profile img,
#company-performance img {
  max-width: 50%;
  height: auto;
  margin: 2% 0 0;
}

/*-----お問い合わせ-----*/
#contact-form .tel {
  color: #E7010D;
  font-size: 2rem;
  font-weight: 600;
  margin: 0 3%;
}
#contact-form form {
  padding: 0 3% 5%;
}
@media screen and (min-width: 992px) {
  #contact-form form {
    padding: 0 10% 5%;
  }
}
#contact-form form p {
  text-align: center;
}
#contact-form form #error {
  color: #E7010D;
  font-weight: bold;
  margin: 3% 0 0;
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  #contact-form form #error {
    font-size: 1.6rem;
  }
}
#contact-form form .thanks-message {
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: #E7010D;
  margin: 10% 0;
}
@media screen and (min-width: 768px) {
  #contact-form form .thanks-message {
    font-size: 1.4rem;
  }
}
#contact-form form .inner {
  padding-bottom: 2%;
}
#contact-form form .inner input {
  border: 1px solid #adadad;
  width: 98%;
  height: 45px;
  font-size: 1rem;
  padding: 0 15px;
}
#contact-form form .inner textarea {
  border: 1px solid #adadad;
  width: 98%;
  height: 200px;
  font-size: 1rem;
  padding: 15px;
}
#contact-form form .inner select {
  border: 1px solid #adadad;
  width: 98%;
  height: 50px;
  font-size: 1rem;
  padding: 15px;
}
#contact-form form .inner:first-of-type {
  padding-top: 5%;
}
#contact-form form .button {
  margin: 50px auto 0 auto;
  padding: 3% 20%;
  font-size: 1.2em;
  font-weight: 600;
}

/*-----プライバシーポリシー-----*/
#contact-privacy dt {
  padding-top: 2%;
}/*# sourceMappingURL=underlayer.css.map */