@charset "UTF-8";
/* CSS Document */
#pageWrap {
  padding: 0 0 0;
}
.notes-area {
  margin: 0 auto 0;
}
.gothic {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
#sec01 {}
#sec01 {
  padding: 5% 0;
  background-color: #ecf0f3;
}
#sec01 h3 {
  color: #a5904c;
  font-size: 55px;
  letter-spacing: 0.1em;
}
#sec01 h3 span {
  font-size: 120%;
}
#sec01 .imgWrap {
  width: 90%;
  max-width: 680px;
  margin: 0 auto;
  padding: 2% 0;
}
#sec01 .imgWrap .imgBox {
  width: 47%;
}
#sec01 .lead {
  font-size: 24px;
  padding: 1em 0;
}
#sec01 .figWrap {
  padding-top: 4%;
}
#sec01 .figWrap .figBox:nth-of-type(1) {
  width: 50%;
}
#sec01 .figWrap .figBox:nth-of-type(2) {
  width: 40%;
}
.h3-01 {
  background-image: url("../images/bg-h3.jpg");
  background-position: center center;
  background-size: cover;
  position: relative;
  color: #fff;
  container-type: inline-size;
}
.h3-01 h3 {
  font-size: 1.8cqw;
  padding: 1.0em 0;
  line-height: 1.6;
}
.h3-01 h3 span {
  color: #ffff00;
}
.h3-01::before, .h3-01::after {
  content: "";
  position: absolute;
  width: 3vw;
  height: 3vw;
  border-width: 1.5vw;
  border-color: transparent;
  border-style: solid;
}
.h3-01::before {
  left: 0;
  top: 0;
  border-left-color: #02284c;
  border-top-color: #02284c;
}
.h3-01::after {
  right: 0;
  bottom: 0;
  border-right-color: #02284c;
  border-bottom-color: #02284c;
}
#sec02 {
  padding-bottom: 5%;
}
#sec02 .flex {}
#sec02 .itemWrap, #sec04 .itemWrap {
  padding: 50px 0;
}
#sec02 .flex .itemWrap {
  width: 48%;
  text-align: center;
}
#sec02 .itemWrap .numBox, #sec04 .itemWrap .numBox {
  width: 20%;
  max-width: 84px;
  margin: 0 auto;
  padding: 30px 0;
}
.h4-01 {
  color: #6273a5;
  font-size: 35px;
}
.h4-01 span {
  font-size: 120%;
}
#sec02 .itemWrap .pQ {
  display: inline-block;
  font-size: 24px;
  text-align: left;
  text-indent: -1.1em;
  padding-left: 1.1em;
  padding-top: 1em;
}
#sec02 .itemWrap .figBox {
  padding: 50px 0;
}
#sec02 .res01 {
  border: #b29e69 solid 2px;
  padding: 1.5em;
}
#sec02 .res01 p {
  font-size: 30px;
  line-height: 1.3;
}
#sec02 .res01 p span {
  font-size: 120%;
  color: #b29e69;
}
#sec02 .arw {
  width: 40px;
  margin: 0 auto;
  padding: 3% 0;
}
#sec02 .res02 {
  background-color: #8a91b5;
}
#sec02 .res02 p {
  font-size: 32px;
  text-decoration: underline;
  text-underline-offset: 7px;
  color: #f4e13d;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: bold;
  padding: 1.5em 0;
}
#sec03 {
  position: relative;
  padding-bottom: 5%;
}
#sec03 .bgBox {
  background-color: #ecf0f3;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#sec03 .bgBox::before, #sec03 .bgBox::after {
  content: "";
  position: absolute;
  width: 4vw;
  height: 100%;
  background-image: url("../images/bg-line.svg");
  background-size: 100%;
  background-repeat: repeat-y;
  top: 0;
}
#sec03 .bgBox::before {
  left: 0;
}
#sec03 .bgBox::after {
  right: 0;
}
#sec03 .main {
  position: relative;
}
#sec03 .main .tit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  transform: translate(-50%, -50%);
}
#sec03 .main::after {
  content: "image photo";
  font-size: 10px;
  position: absolute;
  right: 0.5em;
  bottom: 0.3em;
}
#sec03 .h4Box {
  width: 85%;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 6%;
  position: relative;
}
#sec03 .h4Box .imgBox {
  position: absolute;
  width: 18%;
  left: 87%;
  top: 10%;
}
#sec03 .typeBox {
  position: relative;
  z-index: 1;
  width: 85%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2% 0;
}
#sec03 .flex {}
#sec03 .flex .leftBox {
  width: 54%;
  max-width: 644px;
}
#sec03 .flex .leftBox .cap {
  width: 70%;
  margin: 0 auto;
  padding: 20px 0 0;
}
#sec03 .flex .rightBox {
  width: 43%;
}
#sec03 .flex .rightBox .itemBox {
  background-color: #fff;
  position: relative;
  padding: 20px 30px;
  text-align: left;
}
#sec03 .flex .rightBox .itemBox::after {
  content: "";
  position: absolute;
  width: 18%;
  height: 50%;
  left: 0;
  top: 0;
  transform: translate(-30%, -15%);
  background-image: url("../images/point-01.svg");
  background-position: left top;
  background-size: 100%;
  background-repeat: no-repeat;
}
#sec03 .flex .rightBox .item02 {
  margin: 50px 0;
}
#sec03 .flex .rightBox .item02::after {
  background-image: url("../images/point-02.svg");
}
#sec03 .flex .rightBox .item03::after {
  background-image: url("../images/point-03.svg");
}
#sec03 .flex .rightBox .itemBox h5 {
  font-size: 24px;
  padding-left: 2em;
  border-bottom: #000 solid 1px;
  margin-bottom: 15px;
  position: relative;
}
#sec03 .flex .rightBox .itemBox h5::after {
  content: "";
  position: absolute;
  width: 9%;
  height: 300%;
  right: 0;
  bottom: -50%;
  background-image: url("../images/ils-01.svg");
  background-position: right bottom;
  background-size: 100%;
  background-repeat: no-repeat;
}
#sec03 .flex .rightBox .item02 h5::after {
  background-image: url("../images/ils-02.svg");
}
#sec03 .flex .rightBox .item03 h5::after {
  background-image: url("../images/ils-03.svg");
  width: 10%;
  height: 300%;
  right: -2%;
}
#sec03 .flex .rightBox .itemBox h6 {
  font-size: 18px;
}
#sec03 .flex .rightBox .itemBox p {
  text-align: justify;
  width: 50%;
}
#sec03 .flex .rightBox .itemBox dt {
  font-size: 16px;
  padding-top: 1em;
  padding-bottom: 0.5em;
}
#sec03 .flex .rightBox .itemBox .imgBox {
  width: 47%;
}
.capImg::after {
  content: "image photo";
}
#sec03 .flex .rightBox .item03 .imgBox::after {
  bottom: -15px;
}
#sec03 .capBox {
  text-align: right;
}
#sec03 .capBox p {
  font-size: 10px;
}
.h3-02 {
  background-color: #8a91b5;
  padding: 2% 0;
}
#sec04 {
  padding-bottom: 5%;
}
#sec04 > .boxWidth, #sec05 > .boxWidth {
  max-width: 1100px;
}
#sec04 .flex01 {
  padding: 3% 0;
}
#sec04 .flex01 .imgBox {
  width: 44%;
  max-width: 480px;
}
#sec04 .flex01 p {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  width: 52%;
  text-align: justify;
  font-size: 21px;
  line-height: 2;
}
#sec04 .sankaku {
  color: #6273a5;
  font-size: 46px;
  transform: scaleX(2);
  padding-bottom: 30px;
}
#sec04 .flex02 {
  background-image: url("../images/ bg-sec4.svg");
  background-repeat: repeat-y;
  background-size: 100%;
}
#sec04 .flex02 .bottom {
  transform: rotateZ(180deg);
}
#sec04 .flex02 h4 {
  font-size: 40px;
  padding-bottom: 1em;
}
#sec04 .flex02 h4 span {
  position: relative;
  background-color: #a5904c;
  background: linear-gradient(180deg, rgba(165, 144, 76, 0) 65%, rgba(165, 144, 76, 1) 65%);
}
#sec04 .flex02 .flex-container {
  width: 80%;
  max-width: 760px;
  margin: 0 auto;
}
#sec04 .flex02 .flex-container .itemBox {
  width: 46%;
}
#sec04 .flex02 .flex-container .itemBox h6 {
  font-size: 18px;
  color: #6273a5;
  line-height: 1.3;
  font-weight: normal;
  padding-top: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3em;
}
#sec04 .flex02 .flex-container .itemBox p {
  font-size: 18px;
  padding: 1em 0;
  text-align: justify;
}
#sec04 .flex02 .flex-container .itemBox p span {
  color: #c1272d;
}
#sec04 .flex02 .flex-container .itemBox .center {
  text-align: center;
}
.seko::after {
  content: "当社施工例";
}
#sec05 {
  padding-bottom: 6%;
}
#sec05 .mainBox {
  position: relative;
}
#sec05 .mainBox .titBox {
  position: absolute;
  left: 50%;
  width: 45%;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}
#sec05 .mainBox .titBox h3 {
  font-size: 44px;
  text-indent: -0.5em;
}
#sec05 .mainBox .titBox p {
  font-size: 22px;
}
#sec05 .mainBox .imgBox {}
#sec05 .mainBox .imgBox::after {
  right: 55%;
}
#sec05 .kihon {
  margin-top: 10%;
}
#sec05 .kihon .txtBox {
  background-image: url("../images/bg-sec5.svg");
  background-repeat: repeat-y;
  background-size: 100%;
}
#sec05 .kihon .bottom {
  transform: rotateZ(180deg);
}
#sec05 .kihon .txtBox h3 {
  font-size: 40px;
  color: #c1272d;
}
#sec05 .kihon .txtBox p {
  color: #a5904c;
  font-size: 24px;
}
#sec05 .soudan {
  color: #6273a5;
  font-size: 35px;
  padding: 1em 0;
}
#sec05 .flex {
  gap: 50px 0;
}
#sec05 .flex .itemBox {
  width: 47%;
  border: #e2e4ef solid 2px;
  position: relative;
  padding: 40px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#sec05 .flex .itemBox::before {
  content: "";
  background-color: #e7e9f0;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 10px;
  top: 10px;
  z-index: -1;
}
#sec05 .flex .itemBox h4 {
  color: #02284c;
  font-size: 30px;
  border-bottom: #02284c solid 1px;
  margin-bottom: 20px;
}
#sec05 .flex .itemBox .imgBox {
  width: 86%;
  margin: 0 auto;
}
#sec05 .flex .itemBox ul {
  display: inline-block;
  padding: 15px 0;
}
#sec05 .flex .itemBox li {
  text-align: left;
  color: #02284c;
  font-size: 20px;
  text-align: left;
  line-height: 1.3;
  padding: 0.5em 0;
  position: relative;
}
#sec05 .flex .itemBox li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 102%;
  width: 24px;
  height: 100%;
  background-image: url("../images/check.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}
#sec05 .itemBox .yoyaku {
  background-color: #d1d8f0;
  border-radius: 10px;
  color: #6273a5;
  font-size: 20px;
  padding: 15px;
  margin-bottom: 15px;
}
#sec05 .itemBox .flex2 {
  align-self: flex-end;
}
#sec05 .itemBox .flex2 div {
  width: 31%;
}
#sec06 {}
#sec06 .btnBox {
  padding: 3% 0;
}
#sec06 .btnBox a {
  width: 70%;
  max-width: 580px;
  margin: 0 auto;
  display: block;
  background-color: #8a91b5;
}
@media screen and (max-width: 959px) {
  .boxWidth {
    container-type: inline-size;
  }
  #sec01 h3 {
    font-size: 4.8cqw;
  }
  #sec01 .lead, #pageWrap h2, #pageWrap h3 {
    font-size: 2.4cqw;
  }
  #sec02 .itemWrap .pQ {
    font-size: 2.0cqw;
  }
  #sec02 .res01 p, #sec02 .res02 p {
    font-size: 2.6cqw;
  }
  #sec03 .flex .rightBox .itemBox {
    container-type: inline-size;
    padding: 15px;
  }
  #sec03 .flex .rightBox .itemBox h5 {
    font-size: 6.4cqw;
    margin-bottom: 0;
  }
  #sec03 .flex .rightBox .itemBox h6 {
    font-size: 5.0cqw;
    padding: 0.2em 0;
  }
  #sec03 .flex .rightBox .itemBox p {
    font-size: 4cqw;
    line-height: 1.4;
  }
  #sec03 .flex .rightBox .itemBox::after {
    width: 20%;
  }
  #sec03 .flex .rightBox .item02 {
    margin: 7% 0;
  }
  #sec04 .flex01 p, #sec04 .flex02 .flex-container .itemBox p {
    font-size: 2.0cqw;
  }
  #sec05 .mainBox .titBox {
    left: 45%;
    width: 50%;
  }
  #sec05 .mainBox .titBox h3, #sec05 .kihon .txtBox h3, #sec05 .soudan, #pageWrap h4 {
    font-size: 2.6cqw;
  }
  #sec05 .mainBox .titBox p {
    font-size: 1.7cqw;
  }
  #sec04 .flex02 h4 {
    font-size: 3.4cqw;
  }
  #sec05 .flex .itemBox {
    container-type: inline-size;
  }
  #sec05 .flex .itemBox h4 {
    font-size: 6.4cqw;
  }
  #sec05 .flex .itemBox li, #sec05 .itemBox .yoyaku {
    font-size: 4.8cqw;
  }
  #sec05 .kihon .txtBox h3 {
    font-size: 3.8cqw;
  }
  #sec05 .kihon .txtBox p {
    font-size: 2.6cqw;
  }
}
@media screen and (max-width: 599px) {
  #sec01 .lead, #pageWrap h2, #pageWrap h3 {
    font-size: 5.4cqw;
  }
	#pageWrap #sec01 h3 {
		font-size: 6.6cqw;
		line-height: 1.3;
		padding: 0.5em 0;
	}
  #sec01 .imgWrap .imgBox {
    width: 49%;
  }
  #sec01 .lead, #pageWrap h2, #pageWrap h3 {
    font-size: 4.0cqw;
  }
  #sec01 .figWrap .figBox:nth-of-type(1) {
    width: 90%;
    margin: 0 auto 20px;
  }
  #sec01 .figWrap .figBox:nth-of-type(2) {
    width: 70%;
    margin: 0 auto;
  }
  #sec02 .flex .itemWrap {
    width: 100%;
    text-align: center;
  }
  #sec05 .mainBox .titBox h3, #sec05 .kihon .txtBox h3, #sec05 .soudan, #pageWrap h4 {
    font-size: 5.6cqw;
  }
  #sec02 .itemWrap .pQ {
    font-size: 4.0cqw;
  }
  #sec02 .itemWrap .figBox {
    padding: 15px 0 0;
  }
  #sec02 .itemWrap, #sec04 .itemWrap {
    padding: 20px 0;
  }
  #sec02 .res01 p, #sec02 .res02 p {
    font-size: 4.6cqw;
  }
  #sec03 .main .tit {
    left: 50%;
    top: 50%;
    width: 40%;
    transform: translate(-50%, -60%);
  }
  #sec03 .flex .leftBox {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 30px;
  }
  #sec03 .flex .leftBox .cap {
    width: 70%;
    margin: 0 auto;
    padding: 20px 0 0;
  }
  #sec03 .flex .rightBox {
    width: 90%;
    margin: 0 auto;
  }
  #sec03 .flex .rightBox .itemBox {
    padding: 15px;
  }
  #sec03 .flex .rightBox .itemBox::after {
    width: 20%;
    transform: translate(-30%, -10%);
  }
  #sec03 .flex .rightBox .itemBox h5 {
    margin-bottom: 10px;
  }
  #sec03 .flex .rightBox .itemBox h6 {
    margin-bottom: 5px;
  }
  #sec03 .capBox {
    text-align: left;
    width: 86%;
    padding-top: 0.5em;
  }
  #sec04 .flex01 .imgBox {
    width: 90%;
    margin: 0 auto 20px;
  }
  #sec04 .flex01 p, #sec04 .flex02 .flex-container .itemBox p {
    width: 90%;
    margin: 0 auto;
    font-size: 3.4cqw;
    line-height: 1.6;
  }
  #sec04 .flex02 h4 {
    font-size: 4.8cqw;
  }
  #sec04 .flex02 .flex-container {
    width: 70%;
    margin: 0 auto;
  }
  #sec04 .flex02 .flex-container .itemBox, #sec04 .flex02 .flex-container .itemBox p {
    width: 100%;
  }
  #sec04 .flex02 {
    position: relative;
  }
  #sec04 .flex02::before, #sec04 .flex02::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    background-color: #fff;
  }
  #sec04 .flex02::before {
    left: 0;
    top: 0;
  }
  #sec04 .flex02::after {
    left: 0;
    bottom: 0;
  }
  #sec04 .flex02 .flex-container .itemBox h6 {
    font-size: 4.0cqw;
  }
  #sec05 .mainBox .imgBox::after {
    right: 0.5em;
  }
  #sec05 .mainBox .titBox {
    position: static;
    width: 90%;
    transform: translateY(0%);
    margin: 0 auto;
    text-align: center;
    padding: 15px 0;
  }
  #sec05 .mainBox .titBox p {
    font-size: 3cqw;
  }
  #sec05 .kihon .txtBox h3 {
    font-size: 4.4cqw;
  }
  #sec05 .kihon .txtBox p {
    font-size: 3cqw;
  }
  #sec05 .soudan, #pageWrap h4 {
    font-size: 5.4cqw;
  }
  #sec05 .flex {
    gap: 20px 0;
  }
  #sec05 .flex .itemBox {
    width: 80%;
    margin: 0 auto;
    padding: 30px;
  }
  #sec05 .flex .itemBox ul {
    margin-left: 15px;
  }
  #sec05 .flex .itemBox li::before {
    width: 16px;
    right: 105%;
  }
  #sec06 .btnBox a {
    width: 90%;
		margin: 30px auto;
  }
}