/* CSS Document */
/* FOR SERVICE */
div.mainContent.service {
  background: #dbe8f6 url(../img/service/main_pc.png) no-repeat center top;
  background-size: 2400px 640px;
}

div.mainContent.service p.btn {
  width: 320px;
  font-size: 1.8rem;
  padding: 0 0;
}

div.mainContent.service p.btn a {
  display: block;
  background: #222f53;
  color: #FFF;
  text-align: center;
  line-height: 60px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.pageTopWrap {
  padding: 130px 0 110px;
}

div.mainContent div.serviceIntroWrap {
  padding: 0 0 90px;
  text-align: center;
}

div.mainContent div.serviceIntroWrap div.inner {
  background: #FFF;
  padding: 85px 0 60px;
}

div.mainContent div.serviceIntroWrap p.cap {
  font-size: 2.6rem;
  padding: 0 0 35px;
}

div.mainContent div.serviceIntroWrap p.lead {
  font-size: 2.0rem;
  padding: 0 0 35px;
  font-weight: bold;
}

div.mainContent div.serviceIntroWrap h2 {
  font-size: 3.2rem;
  line-height: 1.6;
  padding: 0 0 35px;
}

div.mainContent div.serviceUSPWrap {
  min-height: 620px;
  background: #FFF url(../img/service/seg1_pc.png) no-repeat center top;
  background-size: 2000px 550px;
}

div.mainContent div.serviceUSPWrap div.inner {
  width: 375px;
  padding: 75px 0 0 585px;
  margin: 0 auto;
  text-align: left;
}

div.mainContent div.serviceUSPWrap h2 {
  padding: 0 0 25px;
  color: #3376b1;
}

div.mainContent div.serviceUSPWrap h2 span {
  display: block;
}

div.mainContent div.serviceUSPWrap h2 span.en {
  font-size: 5.8rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  padding: 0 0 10px;
  font-weight: 600;
}

div.mainContent div.serviceUSPWrap h2 span.ja {
  font-size: 2.0rem;
}

div.mainContent div.serviceUSPWrap p.lead {
  color: #3376b1;
  font-size: 1.5rem;
  padding: 0 0 40px;
  font-weight: bold;
}

div.mainContent div.serviceUSPWrap p.btn a {
  background: #3376b1;
}

div.mainContent div.serviceCreationWrap {
  background: #f5f6f6 url(../img/service/seg2_pc.png) no-repeat center top;
  background-size: 2000px 1000px;
}

div.mainContent div.serviceCreationWrap div.inner {
  padding: 75px 0 120px;
  text-align: left;
}

div.mainContent div.serviceCreationWrap h2 {
  padding: 0 0 25px;
  color: #3b9a65;
}

div.mainContent div.serviceCreationWrap h2 span {
  display: block;
}

div.mainContent div.serviceCreationWrap h2 span.en {
  font-size: 5.8rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  padding: 0 0 10px;
  font-weight: 600;
}

div.mainContent div.serviceCreationWrap h2 span.ja {
  font-size: 2.0rem;
}

div.mainContent div.serviceCreationWrap p.lead {
  color: #3b9a65;
  font-size: 1.5rem;
  padding: 0 0 120px;
  font-weight: bold;
  width: 350px;
}

div.mainContent div.serviceCreationWrap p.btn {
  margin: 0 auto;
}

div.mainContent div.serviceCreationWrap p.btn a {
  background: #3b9a65;
}

div.mainContent div.serviceCreationWrap ul.worksList {
  padding: 0 0 30px;
  display: flex;
  flex-wrap: wrap;
}

div.mainContent div.serviceCreationWrap ul.worksList li {
  width: calc((100% - 60px) / 3);
  padding: 0 30px 30px 0;
}

div.mainContent div.serviceCreationWrap ul.worksList li:nth-child(3n) {
  padding-right: 0;
}

div.mainContent div.serviceCreationWrap ul.worksList li a {
  background: #FFF;
  display: block;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
}

div.mainContent div.serviceCreationWrap ul.worksList li a div.inside {
  padding: 15px 15px 30px;
}

div.mainContent div.serviceCreationWrap ul.worksList li a h3 {
  padding: 0 0 15px;
}

div.mainContent div.serviceCreationWrap ul.worksList li a h3 span {
  display: block;
  color: #3b9a65;
}

div.mainContent div.serviceCreationWrap ul.worksList li a h3 span.en {
  font-size: 2.1rem;
  line-height: 1.4;
  padding: 0 0 5px;
  font-weight: 600;
}

div.mainContent div.serviceCreationWrap ul.worksList li a h3 span.ja {
  font-size: 1.4rem;
}

div.mainContent div.serviceCreationWrap ul.worksList li a p.tag {
  color: #888;
  font-size: 1.3rem;
  font-weight: bold;
}

div.mainContent div.serviceCreationWrap ul.worksList li a p.img {
  position: relative;
}

div.mainContent div.serviceCreationWrap ul.worksList li a p.img::after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(../img/service/thumb_shadow.png) no-repeat center center;
  background-size: 100% 100%;
  content: "";
}

div.mainContent div.serviceCreationWrap ul.worksList li a p.img span.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(56, 56, 56, 0.85);
  z-index: 5;
  opacity: 0;
  transition: opacity 0.4s ease;
}

div.mainContent div.serviceCreationWrap ul.worksList li a p.img span.cover font {
  line-height: 48px;
  color: #FFF;
  font-size: 1.8rem;
  font-weight: 600;
  width: 170px;
  height: 48px;
  border: 2px solid #FFF;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  padding: 0 20px 0 0;
  background: url(../img/service/mark_link.png) no-repeat right 20px top 14px;
  background-size: 20px 20px;
}

div.mainContent div.serviceCreationWrap ul.worksList li a:hover {
  transform: translateY(-8px);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

div.mainContent div.serviceCreationWrap ul.worksList li a:hover p.img span.cover {
  opacity: 1;
}

div.mainContent div.serviceAttractWrap {
  min-height: 630px;
  background: #FFF url(../img/service/seg3_pc.png) no-repeat center top;
  background-size: 2000px 630px;
}

div.mainContent div.serviceAttractWrap div.inner {
  width: 375px;
  padding: 75px 0 0 585px;
  margin: 0 auto;
  text-align: left;
}

div.mainContent div.serviceAttractWrap h2 {
  padding: 0 0 25px;
  color: #e39e00;
}

div.mainContent div.serviceAttractWrap h2 span {
  display: block;
}

div.mainContent div.serviceAttractWrap h2 span.en {
  font-size: 5.8rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  padding: 0 0 10px;
  font-weight: 600;
}

div.mainContent div.serviceAttractWrap h2 span.ja {
  font-size: 2.0rem;
}

div.mainContent div.serviceAttractWrap p.lead {
  color: #e39e00;
  font-size: 1.5rem;
  padding: 0 0 40px;
  font-weight: bold;
}

div.mainContent div.serviceAttractWrap p.btn a {
  background: #e39e00;
}

div.mainContent div.serviceRepeaterWrap {
  background: #fff4e0 url(../img/service/seg5_pc.png) no-repeat center top;
  background-size: 2000px 700px;
}

div.mainContent div.serviceRepeaterWrap div.inner {
  padding: 75px 0 120px;
  text-align: left;
}

div.mainContent div.serviceRepeaterWrap h2 {
  padding: 0 0 25px;
  color: #e17a41;
}

div.mainContent div.serviceRepeaterWrap h2 span {
  display: block;
}

div.mainContent div.serviceRepeaterWrap h2 span.en {
  font-size: 5.8rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  padding: 0 0 10px;
  font-weight: 600;
}

div.mainContent div.serviceRepeaterWrap h2 span.ja {
  font-size: 2.0rem;
}

div.mainContent div.serviceRepeaterWrap p.lead {
  color: #e17a41;
  font-size: 1.5rem;
  padding: 0 0 40px;
  font-weight: bold;
}

div.mainContent div.serviceRepeaterWrap p.btn a {
  background: #e17a41;
}

div.mainContent div.serviceOthersWrap {
  background: #e8f0f9 url(../img/service/seg4_pc.png) no-repeat center bottom;
  background-size: 2000px 270px;
}

div.mainContent div.serviceOthersWrap div.inner {
  padding: 90px 0 120px;
}

div.mainContent div.serviceOthersWrap h2 {
  padding: 0 0 60px;
  text-align: center;
}

div.mainContent div.serviceOthersWrap h2 span {
  display: block;
}

div.mainContent div.serviceOthersWrap h2 span.en {
  font-size: 5.8rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  padding: 0 0 10px;
  font-weight: 600;
}

div.mainContent div.serviceOthersWrap h2 span.ja {
  font-size: 2.0rem;
}

div.mainContent div.serviceOthersWrap ul.othersWrap {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

div.mainContent div.serviceOthersWrap ul.othersWrap li {
  width: calc(50% - 20px);
  position: relative;
}

div.mainContent div.serviceOthersWrap ul.othersWrap li a {
  display: block;
  background: #FFF;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  padding: 60px 0;
}

div.mainContent div.serviceOthersWrap ul.othersWrap li a span {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 80px;
  padding: 0 60px 0 95px;
  display: inline-block;
  position: relative;
}

div.mainContent div.serviceOthersWrap ul.othersWrap li a span::after {
  background: url(../img/common/vector_right.svg) no-repeat center center;
  background-size: 40px 20px;
  width: 40px;
  height: 20px;
  content: "";
  right: 0;
  top: 30px;
  position: absolute;
  transition: right 0.3s ease;
}

div.mainContent div.serviceOthersWrap ul.othersWrap li.video::after {
  background: url(../img/service/other_icon.png) no-repeat center center;
  background-size: 130px 120px;
  width: 130px;
  height: 120px;
  content: "";
  left: 10px;
  top: -74px;
  position: absolute;
}

div.mainContent div.serviceOthersWrap ul.othersWrap li.video a span {
  background: url(../img/top/icon_service_4.svg) no-repeat left center;
  background-size: 80px 80px;
  color: #9c638b;
}

div.mainContent div.serviceOthersWrap ul.othersWrap li.ad a span {
  background: url(../img/top/icon_service_5.svg) no-repeat left center;
  background-size: 80px 80px;
  color: #a8724c;
}

div.mainContent div.serviceOthersWrap ul.othersWrap li a:hover {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  opacity: 0.8;
}

div.mainContent div.serviceOthersWrap ul.othersWrap li a:hover span::after {
  right: -8px;
}

div.mainContent div.serviceThinkingWrap {
  background: #3b4045;
  padding: 130px 0 110px;
}

div.mainContent div.serviceThinkingWrap div.inner {
  display: flex;
  justify-content: space-between;
}

div.mainContent div.serviceThinkingWrap div.left {
  width: calc(100% - 520px);
}

div.mainContent div.serviceThinkingWrap div.right {
  width: 440px;
  text-align: left;
}

div.mainContent div.serviceThinkingWrap h2 {
  padding: 0 0 40px;
}

div.mainContent div.serviceThinkingWrap h2 span {
  display: block;
}

div.mainContent div.serviceThinkingWrap h2 span.en {
  font-size: 5.8rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  padding: 0 0 10px;
  font-weight: 600;
  color: #FFF;
}

div.mainContent div.serviceThinkingWrap h2 span.ja {
  font-size: 2.0rem;
  color: #eabc04;
}

div.mainContent div.serviceThinkingWrap p.btn a {
  background: linear-gradient(to right, #0f79b3 0%, #6ba584 100%);
}

/* FOR SMALL PC OR TABLET DEVICE */
@media screen and (max-width: 1150px) {
  div.mainContent div.serviceUSPWrap div.inner {
    padding: 75px 0 0 525px;
  }
  div.mainContent div.serviceAttractWrap div.inner {
    padding: 75px 0 0 525px;
  }
}

/* ::::::::::::::::::::::::::::::::: PC ::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::::::::: SP ::::::::::::::::::::::::::::::::: */
@media screen and (max-width: 999px) {
  div.mainContent.service {
    background: #dbe8f6 url(../img/service/main_sp.png) no-repeat center top;
    background-size: 1300px 340px;
  }
  div.mainContent div.pageTopWrap {
    padding: 55px 0 70px;
  }
  div.mainContent.service p.btn {
    width: 100%;
  }
  div.mainContent div.serviceIntroWrap {
    padding: 0 0 50px;
  }
  div.mainContent div.serviceIntroWrap div.inner {
    padding: 50px 5% 50px;
  }
  div.mainContent div.serviceIntroWrap p.cap {
    font-size: 2.1rem;
    padding: 0 0 20px;
  }
  div.mainContent div.serviceIntroWrap p.lead {
    font-size: 1.5rem;
    padding: 0 0 30px;
  }
  div.mainContent div.serviceIntroWrap p.img {
    max-width: 400px;
    margin: 0 auto;
  }
  div.mainContent div.serviceIntroWrap h2 {
    font-size: 2.0rem;
    padding: 0 0 25px;
  }
  div.mainContent div.serviceUSPWrap {
    min-height: inherit;
    background: #FFF url(../img/service/seg1_sp.png) no-repeat left top;
    background-size: 320px 280px;
  }
  div.mainContent div.serviceUSPWrap div.inner {
    width: 90%;
    padding: 260px 5% 60px;
  }
  div.mainContent div.serviceUSPWrap h2 span.en {
    font-size: 4.2rem;
  }
  div.mainContent div.serviceUSPWrap h2 span.ja {
    font-size: 1.5rem;
  }
  div.mainContent div.serviceCreationWrap {
    background: #f5f6f6 url(../img/service/seg2_sp.png) no-repeat right top;
    background-size: 300px 330px;
  }
  div.mainContent div.serviceCreationWrap div.inner {
    padding: 270px 0 60px;
  }
  div.mainContent div.serviceCreationWrap h2 span.en {
    font-size: 4.2rem;
  }
  div.mainContent div.serviceCreationWrap h2 span.ja {
    font-size: 1.5rem;
  }
  div.mainContent div.serviceCreationWrap p.lead {
    padding: 0 0 40px;
    width: auto;
  }
  div.mainContent div.serviceCreationWrap ul.worksList {
    padding: 0 0 15px;
    display: block;
    position: relative;
  }
  div.mainContent div.serviceCreationWrap ul.worksList::before {
    content: "";
    position: absolute;
    left: -7%;
    top: 23%;
    width: 170px;
    height: 150px;
    background: url(../img/service/seg2_2_sp.png) no-repeat left top;
    background-size: 170px 150px;
  }
  div.mainContent div.serviceCreationWrap ul.worksList li {
    width: 100%;
    padding: 0 0 25px 0;
    position: relative;
  }
  div.mainContent div.serviceAttractWrap {
    min-height: auto;
    background: #FFF url(../img/service/seg3_sp.png) no-repeat left top;
    background-size: 400px 280px;
  }
  div.mainContent div.serviceAttractWrap div.inner {
    width: 90%;
    padding: 210px 5% 60px;
  }
  div.mainContent div.serviceAttractWrap h2 span.en {
    font-size: 4.2rem;
  }
  div.mainContent div.serviceAttractWrap h2 span.ja {
    font-size: 1.5rem;
  }
  div.mainContent div.serviceRepeaterWrap {
    background: #fff4e0 url(../img/service/seg5_sp.png) no-repeat center top;
    background-size: 640px 290px;
  }
  div.mainContent div.serviceRepeaterWrap div.inner {
    padding: 270px 0 60px;
  }
  div.mainContent div.serviceRepeaterWrap h2 span.en {
    font-size: 4.2rem;
  }
  div.mainContent div.serviceRepeaterWrap h2 span.ja {
    font-size: 1.5rem;
  }
  div.mainContent div.serviceRepeaterWrap p.lead {
    padding: 0 0 40px;
    width: auto;
  }
  div.mainContent div.serviceOthersWrap {
    background: #e8f0f9 url(../img/service/seg4_sp.png) no-repeat right bottom;
    background-size: 170px 100px;
  }
  div.mainContent div.serviceOthersWrap div.inner {
    padding: 50px 0 100px;
  }
  div.mainContent div.serviceOthersWrap h2 {
    padding: 0 0 50px;
  }
  div.mainContent div.serviceOthersWrap h2 span.en {
    font-size: 4.2rem;
  }
  div.mainContent div.serviceOthersWrap h2 span.ja {
    font-size: 1.5rem;
  }
  div.mainContent div.serviceOthersWrap ul.othersWrap {
    display: block;
  }
  div.mainContent div.serviceOthersWrap ul.othersWrap li {
    width: 100%;
    padding: 0 0 20px;
  }
  div.mainContent div.serviceOthersWrap ul.othersWrap li a {
    padding: 30px 0;
  }
  div.mainContent div.serviceOthersWrap ul.othersWrap li a span {
    font-size: 1.8rem;
    line-height: 70px;
    padding: 0 60px 0 85px;
  }
  div.mainContent div.serviceOthersWrap ul.othersWrap li a span::after {
    top: 25px;
  }
  div.mainContent div.serviceOthersWrap ul.othersWrap li.video::after {
    background-size: 65px 60px;
    width: 65px;
    height: 60px;
    content: "";
    left: 10px;
    top: -37px;
    position: absolute;
  }
  div.mainContent div.serviceOthersWrap ul.othersWrap li.video a span {
    background-size: 70px 70px;
  }
  div.mainContent div.serviceOthersWrap ul.othersWrap li.ad a span {
    background-size: 70px 70px;
  }
  div.mainContent div.serviceThinkingWrap {
    padding: 60px 0 60px;
  }
  div.mainContent div.serviceThinkingWrap div.inner {
    display: block;
  }
  div.mainContent div.serviceThinkingWrap div.left {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  div.mainContent div.serviceThinkingWrap div.left img {
    width: 95%;
    padding: 0 5% 0 0;
  }
  div.mainContent div.serviceThinkingWrap div.right {
    width: 100%;
  }
  div.mainContent div.serviceThinkingWrap h2 span.en {
    font-size: 4.2rem;
  }
  div.mainContent div.serviceThinkingWrap h2 span.ja {
    font-size: 1.5rem;
  }
}

/*# sourceMappingURL=map/service.css.map */
/*# sourceMappingURL=map/service.css.map */

/*# sourceMappingURL=map/service.css.map */