#wrapper {
 width: 100%;
 min-width: 1100px;
}
@media screen and (max-width: 768px) {
 #wrapper {
  min-width: 0;
 }
}
#wrapper .kv_area {
 position: relative;
 z-index: 1;
 width: 100%;
 min-width: 1100px;
 height: 339px;
 background: url(/purpose/img/kv.jpg) center bottom no-repeat;
 background-size: cover;

 -ms-background-size: cover;
}
@media screen and (max-width: 768px) {
 #wrapper .kv_area {
  min-width: 0;
  height: 250px;
 }
}
#wrapper .kv_area >.inner {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 align-items: -webkit- center;
 align-items: center;
 -ms-flex-align: center;
 -webkit-box-pack: start;
 -ms-flex-pack: start;
 justify-content: -webkit- flex-start;
 justify-content: flex-start;
 width: 1100px;
 height: 339px;
 margin: 0px auto 0px;
 padding: 0 20px;

 -js-display: flex;
}
@media screen and (max-width: 768px) {
 #wrapper .kv_area >.inner {
  width: 100%;
  height: 100%;
  padding: 0 5%;
 }
}
#wrapper .purpose_area {
 width: 100%;
 padding: 95px 0 120px;
 text-align: center;
 background: #ffffff;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area {
  padding: 40px 0;
 }
}
#wrapper .purpose_area >.inner {
 width: 100%;
 max-width: 1100px;
 margin: 0 auto;
}
#wrapper .purpose_area >.inner h2 {
 margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area >.inner h2 {
  margin-bottom: 20px;
 }
}
#wrapper .purpose_area >.inner p.lead {
 font-size: 16px;
 line-height: 1.625;
 display: block;
 width: 100%;
 max-width: 785px;
 margin: 0 auto 45px;
 text-align: left;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area >.inner p.lead {
  font-size: 14px;
  padding: 0 5%;
 }
}
#wrapper .purpose_area >.inner .bgbl {
 width: 100%;
 padding: 45px 50px 60px;
 background: #f1f9ff;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area >.inner .bgbl {
  padding: 30px 4% 40px;
 }
}
#wrapper .purpose_area >.inner .bgbl h3 span {
 font-size: 20px;
 font-weight: bold;
 position: relative;
 display: inline-block;
 color: #005faf;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area >.inner .bgbl h3 span {
  font-size: 18px;
 }
}
#wrapper .purpose_area >.inner .bgbl h3 span:after {
 position: absolute;
 bottom: -15px;
 left: 50%;
 display: block;
 width: 30px;
 height: 2px;
 content: "";
 -webkit-transform: translate(-50%, 0);
 transform: translate(-50%, 0);
 background: #005faf;
}
#wrapper .purpose_area >.inner .bgbl ul.purpose {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
 width: 100%;
 margin: 75px 0 80px;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area >.inner .bgbl ul.purpose {
  display: block;
  margin: 65px 0 40px;
 }
}
#wrapper .purpose_area >.inner .bgbl ul.purpose li {
 position: relative;
 width: 32%;
 padding: 55px 35px 45px;
 background: #ffffff;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area >.inner .bgbl ul.purpose li {
  width: 100%;
  padding: 45px 5% 25px;
 }
 #wrapper .purpose_area >.inner .bgbl ul.purpose li:not(:last-child) {
  margin-bottom: 50px;
 }
}
#wrapper .purpose_area >.inner .bgbl ul.purpose li p.num {
 font-size: 0;
 position: absolute;
 top: 0;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 color: #005faf;
}
#wrapper .purpose_area >.inner .bgbl ul.purpose li p.ttl {
 font-size: 18px;
 font-weight: bold;
 margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area >.inner .bgbl ul.purpose li p.ttl {
  font-size: 16px;
 }
}
#wrapper .purpose_area >.inner .bgbl ul.purpose li p.txt {
 font-size: 16px;
 line-height: 1.625;
 text-align: left;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area >.inner .bgbl ul.purpose li p.txt {
  font-size: 14px;
 }
}
#wrapper .purpose_area >.inner .bgbl .utilizing {
 width: 100%;
 margin-top: 55px;
 padding: 40px;
 background: #ffffff;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area >.inner .bgbl .utilizing {
  margin-top: 40px;
  padding: 25px 5%;
 }
}
#wrapper .purpose_area >.inner .bgbl .utilizing ul {
 display: grid;

 grid-template-columns: auto 1fr;
 grid-auto-flow: column;
 grid-template-rows: auto auto;
 -webkit-column-gap: 45px;
 -moz-column-gap: 45px;
 column-gap: 45px;
 row-gap: 10px;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area >.inner .bgbl .utilizing ul {
  display: block;
 }
}
#wrapper .purpose_area >.inner .bgbl .utilizing ul li {
 font-size: 18px;
 line-height: 1.5555555556;
 padding-left: 1em;
 text-align: left;
 text-indent: -1em;
}
@media screen and (max-width: 768px) {
 #wrapper .purpose_area >.inner .bgbl .utilizing ul li {
  font-size: 16px;
 }
 #wrapper .purpose_area >.inner .bgbl .utilizing ul li:not(:last-child) {
  margin-bottom: 10px;
 }
}
/*# sourceMappingURL=layout.css.map */