@charset "UTF-8";
 .box-border-box {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}
 .disp-flex {
   display: -webkit-flexbox;
   display: -moz-flexbox;
   display: -ms-flexbox;
   display: -o-flexbox;
   display: flexbox;
   display: -webkit-box;
   display: flex;
}
 .font-mincho {
   font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
 .bg-cover {
   background-size: cover;
   -moz-background-size: cover;
   -webkit-background-size: cover;
   -o-background-size: cover;
   -ms-background-size: cover;
   background-position: center;
}
 .t-wrapper {
   width: 1200px;
   max-width: 98%;
   margin: 0 auto;
   padding-right: 80px;
}
 @media screen and (max-width: 900px) {
   .t-wrapper {
     padding-right: 0;
  }
}
 @media screen and (max-width: 640px) {
   .t-wrapper {
     width: 100%;
  }
}
 .slick-prev {
   width: 50px;
   height: 50px;
}
 @media screen and (max-width: 900px) {
   .slick-prev {
     width: 40px;
     height: 40px;
  }
}
 .slick-next {
   width: 50px;
   height: 50px;
}
 @media screen and (max-width: 900px) {
   .slick-next {
     width: 40px;
     height: 40px;
  }
}
 .slick-prev:before {
   content: "";
   display: inline-block;
   width: 55px;
   height: 55px;
   background-image: url(../img/prev-arrow.png);
   background-size: contain;
   vertical-align: middle;
   opacity: 1;
}
 @media screen and (max-width: 900px) {
   .slick-prev:before {
     width: 40px;
     height: 40px;
  }
}
 .slick-next:before {
   content: "";
   display: inline-block;
   width: 55px;
   height: 55px;
   background-image: url(../img/next-arrow.png);
   background-size: contain;
   vertical-align: middle;
   opacity: 1;
}
 @media screen and (max-width: 900px) {
   .slick-next:before {
     width: 40px;
     height: 40px;
  }
}
 #mainVisual {
   width: 1270px;
   max-width: 95%;
   margin: 20px auto;
   padding-right: 55px;
}
 @media screen and (max-width: 900px) {
   #mainVisual {
     padding-right: 0;
     margin: 10px auto;
  }
}
 #mainVisual .main-pic {
   width: 100%;
   border-radius: 25px;
   background-image: url(../img/main-pic.jpg);
   background-size: cover;
   position: relative;
}
 @media screen and (max-width: 640px) {
   #mainVisual .main-pic {
     background-image: url(../img/main-pic-sm.jpg);
     position: relative;
  }
}
 #mainVisual .main-pic .pc-text-box {
   width: 65%;
   padding: 30px 0 10px;
   margin-left: auto;
   margin-right: 50px;
}
 @media screen and (max-width: 640px) {
   #mainVisual .main-pic .pc-text-box {
     display: none;
  }
}
 #mainVisual .main-pic .pc-text-box .sub-title {
   margin-bottom: 20px;
   margin-top: 30px;
   text-align: right;
}
 #mainVisual .main-pic .pc-text-bottom {
   width: 80%;
   display: flex;
   align-items: center;
   margin-top: 40px;
}
 @media screen and (max-width: 900px) {
   #mainVisual .main-pic .pc-text-bottom {
     width: 90%;
     margin-top: 30px;
  }
}
 #mainVisual .main-pic .pc-text-bottom .left {
   margin-right: 30px;
}
 @media screen and (max-width: 900px) {
   #mainVisual .main-pic .pc-text-bottom .left {
     margin-right: 20px;
  }
}
 #mainVisual .main-pic .sm-text-box {
  margin:0 auto;
   display: flex;
   padding-top: 30px;
}

#mainVisual .main-pic .sm-text-box h2{
  margin-left: auto;
  padding-right: 10px;
}
 @media screen and (min-width: 640px) {
   #mainVisual .main-pic .sm-text-box {
     display: none;
  }
}
 #mainVisual .main-pic .sm-text-bottom {
   width: 70%;
   padding-bottom: 90px;
   padding-left: 10px;
}
 @media screen and (min-width: 640px) {
   #mainVisual .main-pic .sm-text-bottom {
     display: none;
  }
}
 #mainVisual .main-pic .sm-main-results {
   position: absolute;
   bottom: -2px;
   right: -10px;
}
 @media screen and (min-width: 640px) {
   #mainVisual .main-pic .sm-main-results {
     display: none;
  }
}
 #mainVisual .main-pic .sm-main-results img {
   width: 140px;
}
 @media screen and (max-width: 768px) {
   #top-news {
     padding: 15px 0 40px;
  }
}
 @media screen and (min-width: 769px) {
   #top-news {
     position: relative;
  }
}
 #top-news .inner {
   padding: 40px 60px 0 50px;
   border-radius: 0 25px 25px 0;
   background-color: #fff;
}
 @media screen and (max-width: 768px) {
   #top-news .inner {
     width: 100%;
     display: flex;
     padding: 0;
     align-items: center;
  }
}
 @media screen and (min-width: 769px) {
   #top-news .inner {
     width: 46%;
     position: relative;
     display: inline-block;
     top: -55px;
  }
}
 @media screen and (min-width: 1000px) {
   #top-news .inner {
     width: 30%;
     top: -72px;
  }
}
 #top-news h2 {
   color: #0aa7d6;
   font-size: 2.2rem;
   padding-bottom: 25px;
}
 @media screen and (max-width: 768px) {
   #top-news h2 {
     padding: 35px 25px;
     text-align: center;
  }
}
 @media screen and (max-width: 640px) {
   #top-news h2 {
     font-size: 1.6rem;
     padding: 5px 10px;
     text-align: center;
  }
}
 #top-news .title-box {
   text-align: left;
}
 @media screen and (max-width: 768px) {
   #top-news .title-box {
     width: 65%;
     padding: 15px 25px;
     border-left: 1px solid #000;
  }
}
 @media screen and (max-width: 640px) {
   #top-news .title-box {
     width: 65%;
     padding: 5px 10px;
  }
}
 #top-news .title-box dl dt {
   font-size: 1.4rem;
   color: #9a9797;
   padding-bottom: 12px;
}
 @media screen and (max-width: 640px) {
   #top-news .title-box dl dt {
     font-size: 1.3rem;
     padding-bottom: 5px;
  }
}
 #top-news .title-box dl dd {
   font-size: 1.8rem;
   position: relative;
   line-height: 1.4;
}
 @media screen and (max-width: 640px) {
   #top-news .title-box dl dd {
     font-size: 1.5rem;
  }
}
 #top-news .title-box dl dd:after {
   content: url(../img/arrow-b.png);
   display: block;
   position: absolute;
   right: -40px;
   top: 0;
   bottom: 0;
   margin: auto;
}
 .top-campaign-bn {
   text-align: center;
   padding-bottom: 150px;
}
 @media screen and (max-width: 640px) {
   .top-campaign-bn {
     padding-bottom: 70px;
  }
}
 @media screen and (max-width: 640px) {
   .top-campaign-bn .pc {
     display: none;
  }
}
 @media screen and (min-width: 640px) {
   .top-campaign-bn .sm {
     display: none;
  }
}
 .top-campaign-bn .t-wrapper {
   max-width: 90%;
}
 .top-campaign-bn .top-banner img {
   width: 100%;
}
 @media screen and (max-width: 1200px) {
   .top-campaign-bn .top-banner img {
     width: 90%;
  }
}
 .top-campaign-bn .web-campaign {
   background-color: #fffcf5;
   border: 8px solid #54424b;
   background-image: url(../img/confetti-bn.png);
   position: relative;
   padding: 120px 50px 80px;
   margin-top: 200px;
   background-size: contain;
}
 @media screen and (max-width: 1200px) {
   .top-campaign-bn .web-campaign {
     padding: 100px 40px 80px;
  }
}
 @media screen and (max-width: 1100px) {
   .top-campaign-bn .web-campaign {
     padding: 85px 30px 70px;
  }
}
 @media screen and (max-width: 1000px) {
   .top-campaign-bn .web-campaign {
     background-size: cover;
     margin-top: 150px;
  }
}
 @media screen and (max-width: 768px) {
   .top-campaign-bn .web-campaign {
     padding: 60px 30px 55px;
  }
}
 @media screen and (max-width: 640px) {
   .top-campaign-bn .web-campaign {
     border: 5px solid #54424b;
     margin-top: 100px;
  }
}
 @media screen and (max-width: 420px) {
   .top-campaign-bn .web-campaign {
     padding: 30px 10px 38px;
  }
}
 .top-campaign-bn .web-campaign .inner {
   display: flex;
}
 @media screen and (max-width: 700px) {
   .top-campaign-bn .web-campaign .inner {
     align-items: center;
  }
}
 .top-campaign-bn .web-campaign .title {
   width: 70%;
   position: absolute;
   top: -75px;
   right: 0;
   left: 0;
   margin: auto;
}
 @media screen and (max-width: 1100px) {
   .top-campaign-bn .web-campaign .title {
     top: -60px;
  }
}
 @media screen and (max-width: 1000px) {
   .top-campaign-bn .web-campaign .title {
     width: 80%;
  }
}
 @media screen and (max-width: 640px) {
   .top-campaign-bn .web-campaign .title {
     top: -40px;
  }
}
 @media screen and (max-width: 420px) {
   .top-campaign-bn .web-campaign .title {
     width: 90%;
     top: -35px;
  }
}
 .top-campaign-bn .web-campaign h3 {
   font-size: 3.5rem;
   line-height: 1.7;
   text-align: left;
}
 @media screen and (max-width: 1100px) {
   .top-campaign-bn .web-campaign h3 {
     font-size: 3rem;
  }
}
 @media screen and (max-width: 800px) {
   .top-campaign-bn .web-campaign h3 {
     font-size: 2.6rem;
  }
}
 @media screen and (max-width: 700px) {
   .top-campaign-bn .web-campaign h3 {
     font-size: 2.3rem;
  }
}
 @media screen and (max-width: 420px) {
   .top-campaign-bn .web-campaign h3 {
     font-size: 1.8rem;
  }
}
 @media screen and (max-width: 360px) {
   .top-campaign-bn .web-campaign h3 {
     font-size: 1.6rem;
  }
}
 .top-campaign-bn .web-campaign h3 span {
   display: inline-block;
   position: relative;
   z-index: 1;
}
 .top-campaign-bn .web-campaign h3 span:before {
   content: "";
   background-color: #fdf59a;
   height: 14px;
   width: 100%;
   position: absolute;
   display: block;
   left: 0;
   z-index: -1;
   bottom: 5px;
}
 @media screen and (max-width: 640px) {
   .top-campaign-bn .web-campaign h3 span:before {
     height: 6px;
  }
}
 .top-campaign-bn .web-campaign .left-box {
   width: 40%;
   margin-right: 40px;
}
 @media screen and (max-width: 768px) {
   .top-campaign-bn .web-campaign .left-box {
     margin-right: 10px;
  }
}
 @media screen and (max-width: 640px) {
   .top-campaign-bn .web-campaign .left-box {
     width: 25%;
  }
}
 .top-campaign-bn .web-campaign .right-box {
   width: 60%;
}
 @media screen and (max-width: 640px) {
   .top-campaign-bn .web-campaign .right-box {
     width: 75%;
  }
}
 .top-campaign-bn .web-campaign .right-box .text {
   text-align: left;
   margin-top: 30px;
   font-weight: normal;
   font-size: 1.6rem;
   line-height: 1.8;
}
 @media screen and (max-width: 768px) {
   .top-campaign-bn .web-campaign .right-box .text {
     font-size: 1.5rem;
  }
}
 @media screen and (max-width: 700px) {
   .top-campaign-bn .web-campaign .right-box .text {
     display: none;
  }
}
 .top-campaign-bn .web-campaign .right-box .more-btn {
   text-align: left;
   margin-top: 50px;
}
 @media screen and (max-width: 700px) {
   .top-campaign-bn .web-campaign .right-box .more-btn {
     display: none;
  }
}
 .top-campaign-bn .web-campaign .right-box .more-btn a {
   background-color: #54424b;
   padding: 20px 80px 20px 40px;
}
 .top-campaign-bn .web-campaign .sm-bottom {
   margin-top: 15px;
}
 @media screen and (min-width: 701px) {
   .top-campaign-bn .web-campaign .sm-bottom {
     display: none;
  }
}
 .top-campaign-bn .web-campaign .sm-bottom .text {
   font-size: 1.5rem;
   font-weight: normal;
   text-align: left;
   line-height: 1.8;
   margin-bottom: 30px;
}
 @media screen and (max-width: 640px) {
   .top-campaign-bn .web-campaign .sm-bottom .text {
     font-size: 1.4rem;
  }
}
 .top-campaign-bn .web-campaign .sm-bottom .more-btn {
   text-align: left;
   margin-top: 50px;
}
 .top-campaign-bn .web-campaign .sm-bottom .more-btn a {
   background-color: #54424b;
   padding: 20px 80px 20px 40px;
}
 @media screen and (max-width: 640px) {
   .top-campaign-bn .web-campaign .sm-bottom .more-btn a {
     padding: 15px 60px 15px 30px;
  }
}
 #t-service {
   padding: 80px 0;
}
 @media screen and (max-width: 700px) {
   #t-service {
     padding: 45px 0;
  }
}
 @media screen and (min-width: 641px) {
   #t-service .br-sm {
     display: none;
  }
}
 #t-service .br-tb {
   display: block;
}
 @media screen and (min-width: 1200px) {
   #t-service .br-tb {
     display: none;
  }
}
 #t-service .t-wrapper {
   max-width: 100%;
   width: 100%;
}
 #t-service .service-box {
   margin-top: 80px;
}
 #t-service .service-box .inner {
   display: flex;
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .inner {
     display: block;
  }
}
 #t-service .service-box .inner .pic-box {
   width: 50%;
   background-position: top;
   background-size: cover;
   position: relative;
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .inner .pic-box {
     width: 95%;
     height: 270px;
     margin-right: auto;
  }
}
 @media screen and (max-width: 420px) {
   #t-service .service-box .inner .pic-box {
     height: 210px;
  }
}
 #t-service .service-box .inner .pic-box .en-text {
   font-size: 600%;
   font-weight: bold;
   font-family: "Geologica", sans-serif;
   position: absolute;
   bottom: -55px;
   left: 0;
   right: 0;
   margin: auto;
   text-align: center;
}
 @media screen and (max-width: 1000px) {
   #t-service .service-box .inner .pic-box .en-text {
     font-size: 450%;
     bottom: -45px;
  }
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .inner .pic-box .en-text {
     font-size: 500%;
     top: 0;
     bottom: auto;
     right: auto;
     top: -44px;
     left: 5px;
  }
}
 @media screen and (max-width: 640px) {
   #t-service .service-box .inner .pic-box .en-text {
     font-size: 390%;
     top: -32px;
  }
}
 #t-service .service-box .inner .text-box {
   width: 50%;
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .inner .text-box {
     width: 100%;
  }
}
 #t-service .service-box .inner .text-box .title {
   position: relative;
}
 #t-service .service-box .inner .text-box .title img {
   position: absolute;
   top: -40px;
   z-index: 2;
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .inner .text-box .title img {
     top: -112px;
  }
}
 @media screen and (max-width: 640px) {
   #t-service .service-box .inner .text-box .title img {
     top: -68px;
  }
}
 @media screen and (max-width: 1400px) {
   #t-service .service-box .inner .text-box .title .right-title {
     left: -50px;
  }
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .inner .text-box .title .right-title {
     left: 0;
     right: 0;
     margin: auto;
  }
}
 #t-service .service-box .inner .text-box .title .left-title {
   right: 20px;
}
 @media screen and (max-width: 1500px) {
   #t-service .service-box .inner .text-box .title .left-title {
     right: -50px;
  }
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .inner .text-box .title .left-title {
     left: 0;
     right: 0;
     margin: auto;
  }
}
 #t-service .service-box .inner .text-box .wrap {
   padding: 240px 40px 60px;
   text-align: center;
}
 @media screen and (max-width: 1400px) {
   #t-service .service-box .inner .text-box .wrap {
     padding: 170px 40px 60px;
  }
}
 @media screen and (max-width: 1000px) {
   #t-service .service-box .inner .text-box .wrap {
     padding: 135px 20px 60px;
  }
}
 @media screen and (max-width: 900px) {
   #t-service .service-box .inner .text-box .wrap {
     padding: 115px 20px 60px;
  }
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .inner .text-box .wrap {
     padding: 140px 10px 45px;
  }
}
 @media screen and (max-width: 420px) {
   #t-service .service-box .inner .text-box .wrap {
     padding: 75px 10px 45px;
  }
}
 #t-service .service-box .inner .text-box .wrap .note {
   font-size: 2rem;
   line-height: 1.6;
   font-weight: normal;
}
 @media screen and (max-width: 1000px) {
   #t-service .service-box .inner .text-box .wrap .note {
     font-size: 1.7rem;
  }
}
 @media screen and (max-width: 640px) {
   #t-service .service-box .inner .text-box .wrap .note {
     font-size: 1.6rem;
  }
}
 #t-service .service-box .inner .text-box .wrap .more-btn {
   margin-top: 40px;
}
 #t-service .service-box .inner .text-box .wrap .more-btn a {
   padding: 20px 110px 20px 90px;
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .second-box {
     display: flex;
     flex-direction: column;
  }
}
 #t-service .service-box .second-box .pic-box {
   margin-left: auto;
   margin-right: 0;
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .second-box .pic-box {
     order: 1;
  }
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .second-box .pic-box .en-text {
     right: 5px !important;
     left: auto !important;
  }
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .second-box .text-box {
     order: 2;
  }
}
 #t-service .service-box .pic-list {
   width: 50%;
   margin-left: auto;
   margin-bottom: 140px;
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .pic-list {
     width: 100%;
  }
}
 @media screen and (max-width: 640px) {
   #t-service .service-box .pic-list {
     margin-bottom: 80px;
  }
}
 #t-service .service-box .pic-list ul {
   display: flex;
}
 #t-service .service-box .pic-list ul li {
   width: 33%;
   margin-right: 10px;
   height: 130px;
   background-size: cover;
   background-position: center;
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .pic-list ul li {
     height: 100px;
     margin-right: 5px;
  }
}
 #t-service .service-box .pic-list ul li:last-child {
   margin-right: 0;
}
 #t-service .service-box .pic-list-left {
   width: 50%;
   margin-right: auto;
   margin-bottom: 0;
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .pic-list-left {
     width: 100%;
  }
}
 #t-service .service-box .pic-list-left ul {
   display: flex;
}
 #t-service .service-box .pic-list-left ul li {
   width: 33%;
   height: 130px;
   margin-left: 15px;
   background-size: cover;
   background-position: center;
}
 @media screen and (max-width: 700px) {
   #t-service .service-box .pic-list-left ul li {
     height: 100px;
     margin-left: 5px;
  }
}
 #t-service .service-box .pic-list-left ul li:first-child {
   margin-left: 0;
}
 @media screen and (max-width: 900px) {
   #t-service .service-box .more-btn a {
     font-size: 1.7rem;
     padding: 15px 60px 15px 30px;
  }
}
 @media screen and (max-width: 900px) {
   #t-service .service-box .more-btn a:after {
     padding-top: 2px;
  }
}
 #t-reason:before {
   content: "";
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 50vw 60px 50vw;
   border-color: transparent transparent #eff5f7 transparent;
   position: absolute;
   bottom: 100%;
   left: 0;
   right: 0;
}
 @media screen and (max-width: 640px) {
   #t-reason:before {
     border-width: 0 50vw 37px 50vw;
  }
}
 .reason-staff01 {
   position: absolute;
   top: -135px;
   right: 0;
   z-index: 2;
}
 @media screen and (max-width: 640px) {
   .reason-staff01 {
     top: -92px;
  }
}
 .reason-staff01 img {
   width: 250px;
}
 @media screen and (max-width: 640px) {
   .reason-staff01 img {
     width: 150px;
  }
}
 .reason-staff03 {
   position: absolute;
   bottom: 0;
   left: 30px;
   z-index: 0;
}
 @media screen and (max-width: 640px) {
   .reason-staff03 {
     left: auto;
     right: 0;
  }
}
 .reason-staff03 .pc {
   width: 280px;
}
 @media screen and (max-width: 640px) {
   .reason-staff03 .pc {
     display: none;
  }
}
 .reason-staff03 .sm {
   width: 240px;
}
 @media screen and (min-width: 641px) {
   .reason-staff03 .sm {
     display: none;
  }
}
 #t-reason:after {
   content: "";
   position: absolute;
   bottom: 0px;
   right: 0;
   width: 0;
   height: 0;
   border-bottom: 90px solid #fff;
   border-left: 100vw solid transparent;
   z-index: 1;
}
 @media screen and (max-width: 640px) {
   #t-reason:after {
     border-bottom: 35px solid #fff;
  }
}
 #t-reason {
   background-color: #eff5f7;
   padding: 30px 0 150px;
   position: relative;
   margin-top: 120px;
}
 @media screen and (max-width: 640px) {
   #t-reason {
     padding: 45px 0 75px;
  }
}
 @media screen and (min-width: 641px) {
   #t-reason .br-sm {
     display: none;
  }
}
 #t-reason ul {
   width: 1200px;
   margin: 138px auto 0;
   max-width: 95%;
}
 @media screen and (max-width: 640px) {
   #t-reason ul {
     width: 100%;
     margin: 55px auto 0;
  }
}
 #t-reason ul li {
   display: flex;
   align-items: center;
   margin-bottom: 100px;
}
 @media screen and (max-width: 640px) {
   #t-reason ul li {
     display: block;
     margin-bottom: 70px;
  }
}
 #t-reason ul li .pic {
   width: 50%;
   position: relative;
}
 @media screen and (max-width: 640px) {
   #t-reason ul li .pic {
     width: 100%;
  }
}
 #t-reason ul li .pic img {
   width: 80%;
   display: block;
   margin: 0 auto;
   position: relative;
   z-index: 2;
}
 #t-reason ul li .pic .reason-staff02 {
   position: absolute;
   left: -46px;
   top: -88px;
   width: 300px;
}
 @media screen and (max-width: 640px) {
   #t-reason ul li .pic .reason-staff02 {
     display: none;
  }
}
 #t-reason ul li .pic .reason-point {
   position: absolute;
   top: -54px;
   left: -20px;
   width: 300px;
   z-index: 0;
}
 @media screen and (max-width: 640px) {
   #t-reason ul li .pic .reason-point {
     top: -15px;
     left: -9px;
     width: 190px;
  }
}
 #t-reason ul li .text-box {
   width: 50%;
   position: relative;
   padding: 53px 20px 0;
}
 @media screen and (max-width: 640px) {
   #t-reason ul li .text-box {
     width: 100%;
     padding: 30px 20px 0;
  }
}
 #t-reason ul li .text-box .num {
   position: absolute;
   top: -20px;
   left: 10px;
   font-size: 10rem;
   font-weight: bold;
   font-family: "Geologica", sans-serif;
   color: rgba(10,167,214,0.24);
}
 @media screen and (max-width: 640px) {
   #t-reason ul li .text-box .num {
     top: -20px;
     font-size: 8rem;
  }
}
 #t-reason ul li .text-box h3 {
   font-size: 2.5rem;
   padding-bottom: 40px;
   font-weight: bold;
   line-height: 1.5;
   z-index: 1;
   position: relative;
}
 @media screen and (max-width: 640px) {
   #t-reason ul li .text-box h3 {
     font-size: 2.3rem;
     padding-bottom: 20px;
  }
}
 #t-reason ul li .text-box .text {
   font-size: 1.6rem;
   font-weight: normal;
   line-height: 1.7;
}
 @media screen and (max-width: 640px) {
   #t-reason ul li .text-pc {
     display: none;
  }
}
 @media screen and (min-width: 641px) {
   #t-reason ul li .text-sm {
     display: none;
  }
}
 #t-reason .more-btn {
   position: relative;
   z-index: 2;
}
 #t-company {
   padding-bottom: 170px;
}
 @media screen and (max-width: 768px) {
   #t-company {
     padding-bottom: 85px;
  }
}
 @media screen and (max-width: 640px) {
   #t-company {
     padding-bottom: 55px;
  }
}
 #t-company .company-bg {
   background-size: cover;
   background-position: center;
   height: 350px;
   width: 100%;
}
 @media screen and (max-width: 640px) {
   #t-company .company-bg {
     height: 160px;
  }
}
 #t-company .company-content {
   width: 1150px;
   margin: 0 auto;
   position: relative;
   top: -40px;
   padding: 85px 50px 50px;
   max-width: 95%;
   background-color: #87c427;
   display: flex;
}
 @media screen and (max-width: 900px) {
   #t-company .company-content {
     width: 90%;
     padding: 66px 40px 40px;
  }
}
 @media screen and (max-width: 768px) {
   #t-company .company-content {
     display: block;
     padding: 85px 50px 50px;
  }
}
 @media screen and (max-width: 640px) {
   #t-company .company-content {
     width: 95%;
     padding: 60px 20px 43px;
  }
}
 #t-company .company-content .left-box {
   width: 50%;
}
 @media screen and (max-width: 768px) {
   #t-company .company-content .left-box {
     width: 100%;
  }
}
 #t-company .company-content .left-box .heading-box h2 {
   font-size: 2.5rem;
   font-weight: bold;
   color: #fff;
}
 @media screen and (max-width: 640px) {
   #t-company .company-content .left-box .heading-box h2 {
     font-size: 2.3rem;
  }
}
 #t-company .company-content .left-box .heading-box .en-title {
   top: 35px;
   left: 30px;
   position: absolute;
}
 @media screen and (max-width: 640px) {
   #t-company .company-content .left-box .heading-box .en-title {
     left: 10px;
     top: 20px;
  }
}
 #t-company .company-content .left-box .heading-box .en-title img {
   width: 230px;
}
 @media screen and (max-width: 900px) {
   #t-company .company-content .left-box .heading-box .en-title img {
     width: 170px;
  }
}
 @media screen and (max-width: 768px) {
   #t-company .company-content .left-box .heading-box .en-title img {
     width: 230px;
  }
}
 @media screen and (max-width: 640px) {
   #t-company .company-content .left-box .heading-box .en-title img {
     width: 180px;
  }
}
 #t-company .company-content .left-box .pic {
   width: 40%;
   height: 270px;
   background-size: cover;
   background-position: center;
   position: absolute;
   bottom: -75px;
}
 @media screen and (max-width: 900px) {
   #t-company .company-content .left-box .pic {
     bottom: -45px;
  }
}
 @media screen and (max-width: 768px) {
   #t-company .company-content .left-box .pic {
     width: 100%;
     position: relative;
     bottom: auto;
     margin: 35px auto;
  }
}
 @media screen and (max-width: 768px) {
   #t-company .company-content .left-box .pic {
     margin: 23px auto;
     height: 150px;
  }
}
 #t-company .company-content .right-box {
   color: #fff;
   width: 50%;
}
 @media screen and (max-width: 768px) {
   #t-company .company-content .right-box {
     width: 100%;
  }
}
 #t-company .company-content .right-box .text {
   color: #fff;
   font-size: 1.6rem;
   line-height: 1.6;
}
 #t-company .company-content .right-box .more-btn {
   text-align: right;
   margin-top: 60px;
}
 @media screen and (max-width: 768px) {
   #t-company .company-content .right-box .more-btn {
     text-align: center;
  }
}
 @media screen and (max-width: 640px) {
   #t-company .company-content .right-box .more-btn {
     margin-top: 40px;
  }
}
 #t-company .company-content .right-box .more-btn a {
   background-color: #fff;
   color: #87c427;
}
 #t-company .company-content .right-box .more-btn a:after {
   content: url(../img/arrow-g.png);
   padding-top: 2px;
}
 #t-area {
   padding-bottom: 150px;
}
 @media screen and (max-width: 900px) {
   #t-area {
     padding-bottom: 85px;
  }
}
 #t-area .t-wrapper {
   width: 1100px;
}
 @media screen and (max-width: 640px) {
   #t-area .t-wrapper {
     width: 95%;
  }
}
 #t-area .area-content {
   display: flex;
}
 @media screen and (max-width: 640px) {
   #t-area .area-content {
     display: block;
  }
}
 #t-area .area-content .heading-box {
   position: relative;
}
 #t-area .area-content .heading-box h2 {
   font-size: 2.5rem;
   font-weight: bold;
   color: #0aa7d6;
   padding-left: 3px;
}
 @media screen and (max-width: 640px) {
   #t-area .area-content .heading-box h2 {
     font-size: 2.3rem;
  }
}
 #t-area .area-content .heading-box .en-title {
   top: -54px;
   left: 0;
   position: absolute;
   z-index: 0;
}
 @media screen and (max-width: 640px) {
   #t-area .area-content .heading-box .en-title {
     top: -42px;
  }
}
 #t-area .area-content .heading-box .en-title img {
   width: 160px;
}
 @media screen and (max-width: 900px) {
   #t-area .area-content .heading-box .en-title img {
     width: 170px;
  }
}
 @media screen and (max-width: 640px) {
   #t-area .area-content .heading-box .en-title img {
     width: 130px;
  }
}
 #t-area .area-content .left-box {
   width: 60%;
}
 @media screen and (max-width: 640px) {
   #t-area .area-content .left-box {
     width: 100%;
  }
}
 #t-area .area-content .left-box ul {
   display: flex;
   flex-wrap: wrap;
   margin-top: 30px;
}
 @media screen and (max-width: 640px) {
   #t-area .area-content .left-box ul {
     margin-top: 20px;
  }
}
 #t-area .area-content .left-box ul li {
   border: 2px solid #f3efd9;
   padding: 7px 12px;
   border-radius: 5px;
   position: relative;
   z-index: 2;
   background-color: #fff;
   margin: 3px;
}
 #t-area .area-content .right-box {
   width: 40%;
}
 @media screen and (max-width: 640px) {
   #t-area .area-content .right-box {
     width: 100%;
  }
}
 #t-area .area-content .right-box img {
   width: 80%;
   margin: 0 auto;
   display: block;
}
 @media screen and (max-width: 640px) {
   #t-area .area-content .right-box img {
     width: 65%;
     margin-top: 40px;
  }
}
 #top-bn-menu {
   padding-bottom: 120px;
}
 @media screen and (max-width: 640px) {
   #top-bn-menu {
     padding-bottom: 80px;
  }
}
 #top-bn-menu ul {
   display: flex;
   flex-wrap: wrap;
}
 @media screen and (max-width: 640px) {
   #top-bn-menu ul {
     display: block;
  }
}
 #top-bn-menu ul li {
   width: 50%;
   background-size: cover;
   background-position: center;
}
 @media screen and (max-width: 640px) {
   #top-bn-menu ul li {
     width: 100%;
  }
}
 #top-bn-menu ul li a {
   padding: 80px 40px;
}
 @media screen and (max-width: 640px) {
   #top-bn-menu ul li a {
     padding: 60px 30px;
  }
}
 #top-bn-menu ul li a .heading-box {
   display: flex;
   align-items: center;
}
 #top-bn-menu ul li a .heading-box h2 {
   font-size: 2rem;
   color: #fff;
   font-weight: bold;
}
 @media screen and (max-width: 640px) {
   #top-bn-menu ul li a .heading-box h2 {
     font-size: 1.8rem;
  }
}
 #top-bn-menu ul li a .heading-box .en-title {
   font-size: 1.8rem;
   position: relative;
   color: #fff;
   margin-left: 60px;
}
 @media screen and (max-width: 640px) {
   #top-bn-menu ul li a .heading-box .en-title {
     font-size: 1.6rem;
  }
}
 #top-bn-menu ul li a .heading-box .en-title:before {
   content: "";
   position: absolute;
   display: block;
   width: 20px;
   height: 2px;
   background-color: #fff;
   left: -30px;
   top: 0;
   bottom: 0;
   margin: auto;
}
 #top-bn-menu ul li a .heading-box .en-title:after {
   content: "";
   position: absolute;
   display: block;
   width: 20px;
   height: 2px;
   background-color: #fff;
   right: -30px;
   top: 0;
   bottom: 0;
   margin: auto;
}
 #t-blog {
   padding-bottom: 120px;
}
 @media screen and (max-width: 640px) {
   #t-blog {
     padding-bottom: 85px;
  }
}
 @media screen and (max-width: 640px) {
   #t-blog .t-wrapper {
     max-width: 95%;
  }
}
 #t-blog ul {
   display: flex;
   margin-top: 60px;
   margin-bottom: 50px;
}
 @media screen and (max-width: 768px) {
   #t-blog ul {
     flex-wrap: wrap;
  }
}
 @media screen and (max-width: 640px) {
   #t-blog ul {
     display: block;
     margin-top: 40px;
  }
}
 #t-blog ul li {
   width: 25%;
   margin-right: 40px;
}
 @media screen and (max-width: 768px) {
   #t-blog ul li {
     width: 46%;
     margin: 0 auto 40px;
  }
}
 @media screen and (max-width: 640px) {
   #t-blog ul li {
     width: 100%;
     margin: 0 auto 30px;
  }
}
 #t-blog ul li .pic {
   width: 100%;
   height: 160px;
   background-position: center;
   background-size: cover;
   position: relative;
}
 @media screen and (max-width: 640px) {
   #t-blog ul li .pic {
     height: 200px;
  }
}
 #t-blog ul li .pic .category {
   background-color: #ff6ec1;
   color: #fff;
   text-align: center;
   position: absolute;
   bottom: -10px;
   left: 0;
   padding: 5px 10px;
}
 #t-blog ul li .text-box {
   padding: 20px 0;
}
 #t-blog ul li .text-box .date {
   font-size: 1.3rem;
   color: #9a9797;
   padding-bottom: 10px;
}
 #t-blog ul li .text-box .title {
   font-size: 1.7rem;
   font-weight: bold;
   line-height: 1.4;
}
 #t-blog ul li:last-child {
   margin-right: 0;
}
 .top-paint {
   padding: 60px 0 100px;
}

 @media screen and (max-width: 640px) {
   .top-paint {
    padding: 90px 0 60px;
  }
}

 .top-paint .wrapper {
   width: 1200px;
   margin: 0 auto;
   max-width: 96%;
}
 .top-paint .paint-head {
   display: flex;
   align-items: baseline;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-head {
     display: block;
     position: relative;
  }
}
 .top-paint .paint-head .title {
   margin-right: 50px;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-head .title {
     margin-right: 0;
  }
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-head .note {
     position: absolute;
     top: -90px;
     width: 200px;
     right: 0;
  }
}
 .top-paint .paint-content {
   border: 4px solid #87C427;
   margin-top: 50px;
   padding: 40px 40px 100px;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content {
     padding: 30px 20px 50px;
     margin-top: 35px;
  }
}
 .top-paint .paint-content .heading {
   text-align: center;
   background-color: #87C427;
   color: #fff;
   font-weight: bold;
   font-size: 2rem;
   padding: 15px 10px;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .heading {
     font-size: 1.6rem;
     line-height: 1.4;
     padding: 10px;
  }
}
 @media screen and (max-width: 400px) {
   .top-paint .paint-content .heading {
     font-size: 1.5rem;
  }
}
 .top-paint .paint-content .heading .sm {
   display: block;
}
 @media screen and (min-width: 641px) {
   .top-paint .paint-content .heading .sm {
     display: none;
  }
}
 .top-paint .paint-content .flow {
   width: 1000px;
   max-width: 98%;
   margin: 40px auto;
   display: flex;
   justify-content: center;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .flow {
     flex-wrap: wrap;
     justify-content: center;
     margin: 30px auto 20px;
  }
}
 .top-paint .paint-content .flow li {
   position: relative;
   margin-right: 50px;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .flow li {
     width: 40%;
     margin-bottom: 20px;
  }
}
 .top-paint .paint-content .flow li p {
   font-size: 1.8rem;
   font-weight: bold;
   color: #0AA7D6;
   text-align: center;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .flow li p {
     font-size: 1.6rem;
  }
}
 .top-paint .paint-content .flow li:after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 15px;
   right: -35px;
   margin: auto;
   background-image: url(../img/g-triangle.png);
   width: 15px;
   height: 20px;
   background-size: cover;
}
 .top-paint .paint-content .flow li:last-child {
   margin-right: 0;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .flow li:nth-child(2) {
     margin-right: 0;
  }
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .flow li:nth-child(2):after {
     content: none;
  }
}
 .top-paint .paint-content .flow li:last-child:after {
   content: none;
}
 .top-paint .paint-content .text-box {
   font-size: 1.6rem;
   line-height: 1.8;
   font-weight: bold;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .text-box {
     font-size: 1.4rem;
  }
}
 .top-paint .paint-content .paint-list li {
   background-color: #FFFDE6;
   position: relative;
   padding: 40px 30px 0;
   margin-top: 100px;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .paint-list li {
     margin-top: 70px;
     padding: 40px 20px 0;
  }
}
 .top-paint .paint-content .paint-list li .box {
   display: flex;
   position: relative;
   top: -60px;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .paint-list li .box {
     display: block;
  }
}
 .top-paint .paint-content .paint-list li .pic {
   position: relative;
   z-index: 3;
   background-size: cover;
   background-position: center;
   width: 35%;
   height: 250px;
   margin-right: 40px;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .paint-list li .pic {
     display: none;
  }
}
 .top-paint .paint-content .paint-list li .pic-sm {
   position: relative;
   z-index: 3;
   background-size: cover;
   background-position: center;
   width: 100%;
   height: 200px;
   margin: 20px auto;
}
 @media screen and (min-width: 641px) {
   .top-paint .paint-content .paint-list li .pic-sm {
     display: none;
  }
}
 .top-paint .paint-content .paint-list li:last-child {
   margin-bottom: 0;
}
 .top-paint .paint-content .paint-list li:nth-child(2) .pic {
   margin-right: 0;
   margin-left: 40px;
}
 .top-paint .paint-content .paint-list .wrap {
   width: 65%;
   position: relative;
   z-index: 3;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .paint-list .wrap {
     width: 100%;
  }
}
 .top-paint .paint-content .paint-list .wrap .tit {
   font-size: 3rem;
   font-weight: bold;
   display: flex;
   align-items: center;
}
 .top-paint .paint-content .paint-list .wrap .tit span {
   font-size: 4rem;
   color: #FF6EC1;
   font-weight: bold;
   font-family: "Geologica", sans-serif;
}
 .top-paint .paint-content .paint-list .wrap .text {
   font-size: 1.5rem;
   line-height: 1.6;
   margin-top: 15px;
}
 @media screen and (max-width: 640px) {
   .top-paint .paint-content .paint-list .wrap .text {
     font-size: 1.4rem;
  }
}
 
.top-paint-bn{
  padding-top: 40px;
}

.reason-list-point .point-title{
  margin: 0 auto;
}

.reason-btn{
  text-align: right;
  margin: 0 0 30px auto;
}

 @media screen and (max-width: 640px) {
.reason-btn{
  text-align: center;
  margin: 0 auto 20px;
}
}

.reason-btn a{
  background-color: #87c427;
}

.reason-list-point .link-box{
  width: 1100px;
  max-width: 96%;
  margin: 0 auto;
}


.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 8px 40px;
  min-width: 120px;
  max-width: 100%;
  color:#fff;
  font-size: 16px;
  background: #0aa7d6;
  border-radius: 50px;;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #0aa7d6;
}

.balloon1 p {
  margin: 0;
  padding: 0;

}
.area-google .heading02{
  font-size: 30px;
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  .area-google .heading02{
    font-size: 20px;
  }
}

.area-google .heading02 span{
  font-size: 40px;
}

@media screen and (max-width: 640px) {
  .area-google .heading02 span{
    font-size: 28px;
  }
}
  

.area-google .heading02 .pink{
  color: #ff6ec1;
}

.area-google .heading02 .green{
  color: #87c427;
}

#top-Google .google-content{
  padding-bottom: 0;
}
#t-works{
  background-color: #eff5f7;
}

#top-ceritififation{
  background-color: #fff;
}

#top-ceritififation .ceritififation-content .pic-box{
  background-color: #f3f3f3;
}

.area-oyakudachi {
  background-color: #eff5f7;
  padding: 80px 0 60px;
}

@media screen and (max-width: 640px) {
  .area-oyakudachi ul{
    padding: 35px 0 30px;
  }
}

@media screen and (max-width: 640px) {
  .area-oyakudachi ul{
    display: block;
  }
}


.area-oyakudachi li{
  width: 100%;
  background-color: #fff;
  margin: 0 auto;
  padding:20px 20px 40px;
  margin-bottom: 15px;
}

@media screen and (max-width: 640px) {
  .area-oyakudachi li{
    width: 100%;
    margin-bottom: 20px;
  }
}

.area-oyakudachi p{
text-align: left;
}

.area-oyakudachi .title{
  font-weight: bold;
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 20px;
      padding: 10px;
    background: #87c427;
    color: #fff;
}

@media screen and (max-width: 640px) {
  .area-oyakudachi .title{
    font-size: 18px;
  }
}

.area-oyakudachi .text{
  font-size: 14px;
}