@charset "UTF-8";
/* CSS Document */
.billboard-style-02 {background: url("../img/service/service_mv_img01_pc.webp")no-repeat center/cover;}
.billboard-style-02 h2 .sp01 {color: var(--color-04);}
.block-service-01 .container:nth-child(1) {padding: 7em 0 25em;position: relative;}
.block-service-01 .container:nth-child(1) div > p:nth-child(1) {font-size: 187.5%;font-weight: 600;letter-spacing: 0.1em;line-height: 1.666;}
.block-service-01 .container:nth-child(1) div > p:nth-child(2) {font-size: 112.5%;line-height: 2;margin-top: 2em;}
.block-service-01 .container:nth-child(1) div ul {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 4em 2em 0;}
.block-service-01 .container:nth-child(1) div ul li {text-align: center;width: calc(33.333% + 6em);margin: 0 -3em;position: relative;}
.block-service-01 .container:nth-child(1) div ul li::before {display: block;content: "";padding-top: calc(100% - 40px);background: url("../img/service/service_bg02_pc.webp")no-repeat center/contain;box-sizing: border-box;}
.block-service-01 .container:nth-child(1) div ul li div {width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 100;}
.block-service-01 .container:nth-child(1) div ul li + li div {top: calc(50% - 1.9em);}
.block-service-01 .container:nth-child(1) div ul li h3 {color: var(--color-10);font-size: 156.25%;font-weight: 600;letter-spacing: 0.2em;}
.block-service-01 .container:nth-child(1) div ul li h3::before {display: block;content: attr(data-title);color: #000;font-size: 72%;font-weight: 500;font-family: "Barlow Condensed", sans-serif;letter-spacing: 0;}
.block-service-01 .container:nth-child(1) div ul li p {font-size: 93.75%;line-height: 2;margin-top: 1em;}
.block-service-01 .container:nth-child(1) .bg01 {display: block;content: '';width: 90%;height: 36em;background: url("../img/service/service_bg01_pc.webp")no-repeat left bottom -2em/contain;position: absolute;left: 0;bottom: 0;z-index: -1;}
.block-service-01 .container:nth-child(1) .bg01::after {display: block;content: '';width: 100%;height: 100%;background: #fff;position: absolute;top: 0;right: 0;z-index: 1;}
.block-service-01 .container:nth-child(1) .bg01.staging::after {width: 0;transition: all 0.3s ease-in-out;}
.block-service-01 .container:nth-child(2) > div {max-width: 850px;margin: 0 auto;padding-top: 10em;position: relative;}
.block-service-01 .container:nth-child(2) p {font-size: 112.5%;line-height: 2;}
.block-service-01 .container:nth-child(2) .imgWrap h3 {white-space: nowrap;width: 8em;position: absolute;top: 0;right: calc(100% + 0.5em);}
.block-service-01 .container:nth-child(2) .imgWrap h3 small {display: block;font-size: 125%;font-weight: 500;font-family: "Barlow Condensed", sans-serif;text-align: center;margin-bottom: 1em;}
.block-service-01 .container:nth-child(2) .imgWrap h3 small span {color: var(--color-04);}
.block-service-01 .container:nth-child(2) .imgWrap h3 p {font-size: 593.75%;font-weight: 300;letter-spacing: 0.4em;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;    line-height: 1.3;}
.block-service-01 .container:nth-child(2) .imgWrap h3 p span {color: var(--color-04);font-weight: 300;}
.block-service-01 .container:nth-child(2) .imgWrap figure {margin-top: 1.5em;}
.block-service-01 .container:nth-child(3) {margin-top: 5em;}
.block-service-01 .container:nth-child(3) h4 {color: #fff;font-size: 187.5%;font-weight: 600;text-align: center;letter-spacing: 0.2em;background: var(--color-04);}
.block-service-01 .container:nth-child(3) .list-style-01 {margin-top: 2em;}
.block-service-01 .container:nth-child(3) > div:nth-child(2) {margin-top: 5em;padding-bottom: 8em;background: var(--color-11);}
.block-service-01 .container:nth-child(3) h5 {font-size: 375%;font-weight: 600;font-family: "Barlow Condensed", sans-serif;position: relative;transform: translateY(-0.65em);}
.block-service-01 .container:nth-child(3) h5::before {display: inline-block;content: '';width: 1em;height: 1em;margin: 0 0.25em 0 -0.25em;background: url("../img/service/service_img01_pc.svg")no-repeat center/contain;}
.block-service-01 .container:nth-child(3) > div:nth-child(2) .list-style-01 {margin-top: 0;}
.block-service-02 {margin-top: 10em;}
.block-service-02 .container {position: relative;}
.block-service-02 .container:nth-child(1) > div:nth-child(1) {max-width: 850px;margin: 0 auto;padding-top: 11em;position: relative;}
.block-service-02 .container:nth-child(1) p {font-size: 112.5%;line-height: 2;}
.block-service-02 .container:nth-child(1) .imgWrap h3 {width: 16em;position: absolute;top: 0;right: calc(100% + 0.5em);}
.block-service-02 .container:nth-child(1) .imgWrap h3 small {display: block;font-size: 125%;font-weight: 500;font-family: "Barlow Condensed", sans-serif;text-align: center;margin-bottom: 1em;}
.block-service-02 .container:nth-child(1) .imgWrap h3 small span {color: var(--color-04);}
.block-service-02 .container:nth-child(1) .imgWrap h3 p {font-size: 593.75%;font-weight: 300;letter-spacing: 0.4em;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;white-space: nowrap;line-height: 1.3;}
.block-service-02 .container:nth-child(1) .imgWrap h3 p span {color: var(--color-04);font-weight: 300;}
.block-service-02 .container:nth-child(1) .imgWrap figure {margin-top: 1.5em;}
.block-service-02 .container:nth-child(1) .bg01 {display: block;content: '';width: 90vw;height: 40em;background: url("../img/service/service_bg01_pc.webp")no-repeat left bottom/contain;position: absolute;top: -18em;right: 0;z-index: 1;transform: scaleX(-1);mix-blend-mode: multiply;}
.block-service-02 .container:nth-child(1) .bg01::after {display: block;content: '';width: 100%;height: 100%;background: #fff;position: absolute;top: 0;right: 0;z-index: 1;}
.block-service-02 .container:nth-child(1) .bg01.staging::after {width: 0;transition: all 0.3s ease-in-out;}
.block-service-02 .container:nth-child(2) {margin-top: 5em;padding-bottom: 30em;}
.block-service-02 .container:nth-child(2) ul {display: flex;flex-wrap: wrap;justify-content: flex-start;margin: 0 -1em;}
.block-service-02 .container:nth-child(2) ul li {width: calc(50% - 2em);margin: 1em;}
.block-service-02 .container:nth-child(2) ul li h4 {color: #fff;padding: 0.25em 0.25em 0.25em 0.5em;background: var(--color-04);}
.block-service-02 .container:nth-child(2) ul li p {font-size: 93.75%;line-height: 2;min-height: 6em;}
.block-service-02 .container:nth-child(2) ul li img {margin: 1.5em 0;}
.block-service-02 .container:nth-child(2) .bg01 {display: block;content: '';width: 90%;height: 36em;background: url("../img/service/service_bg01_pc.webp")no-repeat left bottom/contain;position: absolute;left: 0;bottom: 0;z-index: -1;}
.block-service-02 .container:nth-child(2) .bg01::after {display: block;content: '';width: 100%;height: 100%;background: #fff;position: absolute;top: 0;right: 0;z-index: 1;}
.block-service-02 .container:nth-child(2) .bg01.staging::after {width: 0;transition: all 0.3s ease-in-out;}
.block-service-03 {padding: 0 0 10em;overflow-x: hidden;overflow-y: auto;}
.block-service-03 > div {position: relative;}
.block-service-03 ul {}
.block-service-03 ul li {transform: scale(0.9);transition: all 0.5s;opacity: 0.5;}
.block-service-03 ul li.swiper-slide-active {transform: scale(1.1);opacity: 1;}
.block-service-03 ul li div {margin: 0 2em;}
.block-service-03 ul li p:nth-of-type(1) {font-size: 112.5%;font-weight: 600;margin-top: 1em;}
.block-service-03 ul li p:nth-of-type(2) {font-size: 93.75%;font-weight: 600;margin-top: 0.15em;}
.block-service-03 ul li p:nth-of-type(3) {font-size: 93.75%;margin-top: 1em;}
.block-service-03 .swiper-button-next,
.block-service-03 .swiper-button-prev {display: block;width: 30px;height: 30px;border-right: 1px solid #000;border-bottom: 1px solid #000;margin: 0 auto;top: calc(50% - 4em);left: 0;right: 0;}
.block-service-03 .swiper-button-next {left: 44%;transform: rotate(-45deg);}
.block-service-03 .swiper-button-prev {right: 44%;transform: rotate(135deg);}
.block-service-03 .swiper-button-next:after,
.block-service-03 .swiper-button-prev:after {content: '';}
@media only screen and (max-width: 1400px) {
  .block-service-02 .container:nth-child(1) .imgWrap h3 p,
  .block-service-01 .container:nth-child(2) .imgWrap h3 p {font-size: 450%;margin: 0 auto;}
}
@media only screen and (max-width: 1300px) {
  .block-service-01 .container:nth-child(2) > div {display: flex;flex-wrap: wrap;flex-direction: column-reverse;width: 84%;max-width: 1100px;padding-top: 0;}
  .block-service-01 .container:nth-child(2) .imgWrap {margin-bottom: 1em;background: #000;position: relative;}
  .block-service-01 .container:nth-child(2) .imgWrap h3 {width: auto;top: 50%;left: 50%;right: auto;transform: translate(-50%, -50%);z-index: 100;}
  .block-service-01 .container:nth-child(2) .imgWrap h3 p {color: #fff;font-size: 400%;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-style: normal;-ms-writing-mode: lr-tb !important;writing-mode: horizontal-tb !important;}
  .block-service-01 .container:nth-child(2) .imgWrap h3 p span {color: #fff;}
  .block-service-01 .container:nth-child(2) .imgWrap figure {margin: 0;opacity: 0.75;}
  .block-service-01 .container:nth-child(2) .imgWrap h3 small span,
  .block-service-01 .container:nth-child(2) .imgWrap h3 small {color: #fff;}
  .block-service-01 .container:nth-child(2) .imgWrap h3 small {margin: 0;}
  .block-service-02 .container:nth-child(1) > div {display: flex;flex-wrap: wrap;flex-direction: column-reverse;width: 84%;max-width: 1100px;padding-top: 0;}
  .block-service-02 .container:nth-child(1) .imgWrap {margin-bottom: 1em;background: #000;position: relative;}
  .block-service-02 .container:nth-child(1) .imgWrap h3 {width: auto;top: 50%;left: 50%;right: auto;transform: translate(-50%, -50%);z-index: 100;}
  .block-service-02 .container:nth-child(1) .imgWrap h3 p {color: #fff;font-size: 400%;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-style: normal;-ms-writing-mode: lr-tb !important;writing-mode: horizontal-tb !important;white-space: nowrap;}
  .block-service-02 .container:nth-child(1) .imgWrap h3 p span {color: #fff;}
  .block-service-02 .container:nth-child(1) .imgWrap figure {margin: 0;opacity: 0.75;}
  .block-service-02 .container:nth-child(1) .imgWrap h3 small span,
  .block-service-02 .container:nth-child(1) .imgWrap h3 small {color: #fff;}
  .block-service-02 .container:nth-child(1) .imgWrap h3 small {margin: 0;}
  .block-service-02 .container:nth-child(1) .bg01 {top: -24em;}
}
@media only screen and (max-width: 1200px) {
  .billboard-style-02 h2::after {left: calc(50% - 2em);}
  .block-service-01 .container:nth-child(1) div ul {margin: 2em 0 0;}
  .block-service-01 .container:nth-child(1) div ul li {width: 33%;margin: 0;}
  .block-service-01 .container:nth-child(1) div ul li::before {padding-top: 100%;}
  .block-service-01 .container:nth-child(1) div ul li h3 {font-size: 125%;letter-spacing: 0;}
  .block-service-01 .container:nth-child(1) div > p:nth-child(2) {font-size: 100%;margin-top: 0.5em;}  
}
@media only screen and (max-width: 1100px) {
  .block-service-01 .container:nth-child(1) {padding: 1em 0 14em;}
  .block-service-01 .container:nth-child(3) .list-style-01 ul li:nth-child(3).staging {transition-delay: 0.2s;}
  .block-service-01 .container:nth-child(3) .list-style-01 ul li:nth-child(4).staging {transition-delay: 0.4s;}
  .block-service-01 .container:nth-child(3) .list-style-01 ul li:nth-child(5).staging {transition-delay: 0.2s;}
  .block-service-01 .container:nth-child(3) .list-style-01 ul li:nth-child(6).staging {transition-delay: 0.4s;}
  .block-service-01 .container:nth-child(3) > div:nth-child(2) {padding-bottom: 3em;}
  .block-service-02 .container:nth-child(2) {margin-top: 2em;padding-bottom: 20em;}
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  #contentsWrap {font-size: 1.6vw;}
  .block-service-01 .container:nth-child(3) .list-style-01 ul li {width: calc(50% - 1em);}
}
@media only screen and (min-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .billboard-style-02 {background: url("../img/service/service_mv_img01_sp.webp")no-repeat center/cover;}
  .billboard-style-02 h2::before {content: 'OUR';}
  #contentsWrap {overflow: hidden;}
  .block-service-01 .container:nth-child(1) {padding: 2em 0 10em;}
  .block-service-01 .container:nth-child(1) > div > p:nth-child(1) {font-size: 112.5%;font-weight: 600;letter-spacing: 0;line-height: 2;text-align: center;}
  .block-service-01 .container:nth-child(1) > div > p:nth-child(2) {line-height: 2;}
  .block-service-01 .container:nth-child(1) > div > p:nth-child(2) br {display: none;}
  .block-service-01 .container:nth-child(1) div ul {margin: 4em auto 0;width: 90%;}
  .block-service-01 .container:nth-child(1) div ul li {width: 100%;margin: -1.5em 0;}
  .block-service-01 .container:nth-child(1) div ul li + li div {top: 50%;}
  .block-service-01 .container:nth-child(1) .bg01 {width: 100%;height: 14em;background: url(../img/service/service_bg01_pc.webp) no-repeat right bottom / cover;left: 0;}
  .block-service-01 .container:nth-child(2) .imgWrap {width: 100vw;margin: 0 0 1.75em -8vw;}
  .block-service-01 .container:nth-child(2) .imgWrap h3 p {font-size: 218.75%;white-space: nowrap;}
  .block-service-01 .container:nth-child(2) p {font-size: 100%;width: 100%;}
  .block-service-01 .container:nth-child(3) {margin-top: 2em;}
  .block-service-01 .container:nth-child(3) h4 {font-size: 125%;width: 100vw;margin-left: -8vw;padding: 0.5em 0;}
  .block-service-01 .container:nth-child(3) .list-style-01 {margin-top: 1em;position: relative;}
  .block-service-01 .container:nth-child(3) .list-style-01 ul li {width: 100%;margin: 2em 0 0;}
  .block-service-01 .container:nth-child(3) h5 {font-size: 187.5%;text-align: center;transform: none;}
  .block-service-01 .container:nth-child(3) h5::before {display: block;margin: 0 auto;width: 2em;height: 2em;}
  .block-service-01 .container:nth-child(3) > div:nth-child(2) {margin-top: 3em;padding: 2em 0;overflow-x: hidden;overflow-y: auto;}
  .block-service-01 .container:nth-child(3) > div:nth-child(2) .list-style-01 ul li {transition: all 0.5s;opacity: 0.5;}
  .block-service-01 .container:nth-child(3) > div:nth-child(2) .list-style-01 ul li.swiper-slide-active {opacity: 1;}
  .block-service-01 .swiper-button-next2,
  .block-service-01 .swiper-button-prev2 {display: block;width: 20px;height: 20px;border-right: 1px solid #000;border-bottom: 1px solid #000;margin: 0 auto;position: absolute;top: calc(50% - 7em);left: 0;right: 0;z-index: 100;}
  .block-service-01 .swiper-button-next2 {left: auto;right: -1em;transform: rotate(-45deg);}
  .block-service-01 .swiper-button-prev2 {right: auto;left: -1em;transform: rotate(135deg);}
  .block-service-01 .swiper-button-next2:after,
  .block-service-01 .swiper-button-prev2:after {content: '';}
  .block-service-02 .container:nth-child(1) .imgWrap {width: 100vw;margin: 0 0 1.75em -8vw;}
  .block-service-02 .container:nth-child(1) .imgWrap h3 p {font-size: 218.75%;white-space: nowrap;}
  .block-service-02 .container:nth-child(1) .bg01 {width: 100%;height: 11em;background: url(../img/service/service_bg01_pc.webp) no-repeat right bottom / cover;top: -7em;left: 0;}
  .block-service-02 .container:nth-child(1) > div:nth-child(1) {padding-top: 0;}
  .block-service-02 .container:nth-child(1) p {font-size: 100%;width: 100%;}
  .block-service-02 .container:nth-child(2) {padding-bottom: 10em;}
  .block-service-02 .container:nth-child(2) .bg01 {width: 130%;height: 14em;margin-left: -19vw;}
  .block-service-02 .container:nth-child(2) ul li h4 {font-size: 112.5%;width: 100vw;text-align: center;margin-left: -8vw;padding: 0.5em 0;}
  .block-service-02 .container:nth-child(2) ul li h4 span {font-size: 125%;letter-spacing: 0.3em;margin-left: 0.5em;}
  .block-service-02 .container:nth-child(2) ul {margin: 0;}
  .block-service-02 .container:nth-child(2) ul li {margin: 0 0 1em;width: 100%;}
  .block-service-02 .container:nth-child(2) ul li img {margin: 2em 0 1em;}
  .block-service-03 {padding: 0 0 5em;}
  .block-service-03 ul li {text-align: center;}
  .block-service-03 ul li.swiper-slide-active {transform: scale(1);}
  .block-service-03 .swiper-button-next,
  .block-service-03 .swiper-button-prev {width: 20px;height: 20px;top: calc(50% - 4.5em);}
  .block-service-03 .swiper-button-next {left: auto;right: 1em;}
  .block-service-03 .swiper-button-prev {right: auto;left: 1em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}