@charset "UTF-8";
section.service-read {
  border-top: 1px solid #000;
  padding: calc(100 / var(--pc)) calc(120 / var(--pc)) calc(40 / var(--pc));
  margin-top: calc(25 / var(--pc));
}
section.service-read p {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
}
section.branding-commerce {
  margin: calc(53 / var(--pc)) calc(120 / var(--pc));
  padding: calc(30 / var(--pc));
  border: 1px solid #000;
  position: relative;
  width: calc(870 / var(--pc));
}
section.branding-commerce p:nth-of-type(1) {
  position: absolute;
  top: calc(-13 / var(--pc));
  left: calc(20 / var(--pc));
  font-size: calc(15 / var(--pc));
  font-weight: 600;
  line-height: 165%;
  letter-spacing: calc(0.6 / var(--pc));
  background: #F3F1EE;
  padding: 0 calc(7 / var(--pc));
}
section.branding-commerce p:nth-of-type(2) {
  font-size: calc(13 / var(--pc));
  line-height: 180%;
  letter-spacing: calc(0.26 / var(--pc));
}
section.service-menu {
  margin-top: calc(100 / var(--pc));
  display: flex;
  flex-wrap: wrap;
}
section.service-menu .service-menu-item {
  width: 50%;
  height: calc(595 / var(--pc));
  padding: calc(70 / var(--pc)) calc(70 / var(--pc)) calc(69 / var(--pc)) calc(120 / var(--pc));
  position: relative;
  color: #fff;
  transition: 0.6s;
}
section.service-menu .service-menu-item:nth-of-type(1) {
  background: url(../img/service/service-top-menu-img01.webp) no-repeat;
  background-size: cover;
}
section.service-menu .service-menu-item:nth-of-type(2) {
  background: url(../img/service/service-top-menu-img02.webp) no-repeat;
  background-size: cover;
}
section.service-menu .service-menu-item:nth-of-type(3) {
  background: url(../img/service/service-top-menu-img03.webp) no-repeat;
  background-size: cover;
}
section.service-menu .service-menu-item:nth-of-type(4) {
  background: url(../img/service/service-top-menu-img04.webp) no-repeat;
  background-size: cover;
}
section.service-menu .service-menu-item:nth-of-type(5) {
  background: url(../img/service/service-top-menu-img05.webp) no-repeat;
  background-size: cover;
}
section.service-menu .service-menu-item:nth-of-type(6) {
  background: url(../img/service/service-top-menu-img06.webp) no-repeat;
  background-size: cover;
}
section.service-menu .service-menu-item:hover {
  background-color: rgb(0, 0, 0); /* 半透明の黒を重ねる */
  background-blend-mode: multiply;
}
section.service-menu .service-menu-item .arrow {
  position: absolute;
  top: calc(82 / var(--pc));
  right: calc(70 / var(--pc));
  border: 1px solid #fff;
}
section.service-menu .service-menu-item .arrow::after {
  background: url(../img/common/arrow-f-r.webp) no-repeat;
  background-size: cover;
}
section.service-menu .service-menu-item h2 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: calc(45 / var(--pc));
  font-weight: 700;
  line-height: 120%;
  letter-spacing: calc(0.9 / var(--pc));
}
section.service-menu .service-menu-item h2 span {
  display: block;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: calc(12 / var(--pc));
  font-weight: 300;
  line-height: 140%;
  letter-spacing: calc(0.48 / var(--pc));
}
section.service-menu .service-menu-item dl {
  margin-top: calc(40 / var(--pc));
  padding-bottom: calc(30 / var(--pc));
  border-bottom: 1px solid #fff;
}
section.service-menu .service-menu-item dl dt {
  font-size: calc(26 / var(--pc));
  font-weight: 600;
  line-height: 150%;
  letter-spacing: calc(0.52 / var(--pc));
}
section.service-menu .service-menu-item dl dd {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
}
section.service-menu .service-menu-item ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(5 / var(--pc)) calc(24 / var(--pc));
  font-size: calc(15 / var(--pc));
  font-weight: 600;
  line-height: 165%;
  letter-spacing: calc(0.6 / var(--pc));
  margin-top: calc(30 / var(--pc));
}
section.service-menu .service-menu-item ul li {
  display: flex;
  gap: 0 calc(5 / var(--pc));
  align-items: center;
}
section.service-menu .service-menu-item ul li::before {
  display: inline-block;
  content: "";
  width: calc(8 / var(--pc));
  height: calc(8 / var(--pc));
  background: #fff;
}
section.service-menu .service-menu-item a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
section.services-header {
  position: relative;
}
section.services-header .services-header-sticky {
  position: relative;
}
section.services-header .services-header-sticky .services-header-bg {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}
section.services-header .services-header-sticky .services-header-bg::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  transition: 0.6s;
}
section.services-header .services-header-sticky .services-header-bg.active::before {
  opacity: 1;
}
section.services-header .services-header-sticky .services-header-bg .bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
  z-index: 1;
}
section.services-header .services-header-sticky .services-header-bg .bg-image.fade-layer {
  opacity: 0;
  z-index: 3;
}
section.services-header .services-header-sticky .services-header-bg .bg-image.active {
  opacity: 0;
  z-index: 2;
}
section.services-header .services-header-txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  color: #fff;
}
section.services-header .services-header-txt > .area {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 calc(120 / var(--pc));
}
section.services-header .services-header-txt > .area h1 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: calc(100 / var(--pc));
  font-weight: 700;
  line-height: 100%;
  letter-spacing: calc(2 / var(--pc));
  margin-bottom: calc(40 / var(--pc));
}
section.services-header .services-header-txt > .area dl dt {
  font-size: calc(48 / var(--pc));
  font-weight: 600;
  line-height: 140%;
  letter-spacing: calc(0.96 / var(--pc));
}
section.services-header .services-header-txt > .area dl dd {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
  margin-top: calc(20 / var(--pc));
}
section.services-header .services-header-txt > .area.area02 dt, section.services-header .services-header-txt > .area.area03 dt, section.services-header .services-header-txt > .area.area04 dt, section.services-header .services-header-txt > .area.area05 dt {
  font-size: calc(30 / var(--pc));
}
section.services-header .services-header-txt > .area.area01 {
  padding-top: calc(446 / var(--pc));
}
section.services-header .services-header-txt > .area.area03, section.services-header .services-header-txt > .area.area05 {
  padding-left: calc(789 / var(--pc));
}
section.services-header .services-header-txt > .area[data-image="e-commerce-top.webp"] {
  padding-top: calc(349 / var(--pc));
}
section .services-read dl dt {
  font-size: calc(48 / var(--pc));
  font-weight: 600;
  line-height: 140%;
  letter-spacing: calc(0.96 / var(--pc));
}
section .services-read dl dd {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
  margin-top: calc(30 / var(--pc));
}
section .services-inner {
  width: calc(1360 / var(--pc));
  margin: 0 auto;
}
section .service-splide {
  margin-top: calc(40 / var(--pc));
  position: relative;
  height: calc(570 / var(--pc));
  overflow: hidden;
  touch-action: none;
}
section .service-splide .slide-inner {
  position: relative;
}
section .service-splide .slide-inner .service-splide-txt {
  width: calc(550 / var(--pc));
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  margin-left: calc(70 / var(--pc));
}
section .service-splide .slide-inner .service-splide-txt h2 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: calc(45 / var(--pc));
  font-weight: 700;
  line-height: 120%;
  letter-spacing: calc(0.9 / var(--pc));
}
section .service-splide .slide-inner .service-splide-txt h2 span {
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-size: calc(15 / var(--pc));
  font-weight: 600;
  line-height: 140%;
  letter-spacing: calc(0.6 / var(--pc));
  display: block;
  margin-top: calc(5 / var(--pc));
}
section .service-splide .slide-inner .service-splide-txt dl {
  margin-top: calc(26 / var(--pc));
}
section .service-splide .slide-inner .service-splide-txt dl dt {
  font-size: calc(26 / var(--pc));
  font-weight: 600;
  line-height: 150%;
}
section .service-splide .slide-inner .service-splide-txt dl dd {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
  margin-top: calc(10 / var(--pc));
}
section .service-splide .slide-inner .service-splide-txt ul {
  margin-top: calc(26 / var(--pc));
}
section .service-splide .slide-inner .service-splide-txt ul li {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
  display: flex;
  gap: 0 calc(5 / var(--pc));
  align-items: baseline;
  margin-top: calc(5 / var(--pc));
}
section .service-splide .slide-inner .service-splide-txt ul li::before {
  display: block;
  content: "";
  width: calc(8 / var(--pc));
  height: calc(8 / var(--pc));
  background: #fff;
}
section .service-splide .slide-inner .service-splide-txt p {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
  margin-top: calc(30 / var(--pc));
}
section .service-splide .scroll-indicator {
  position: absolute;
  right: calc(30 / var(--pc));
  top: calc(30 / var(--pc));
  width: 2px;
  height: calc(300 / var(--pc));
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
section .service-splide .scroll-indicator__thumb {
  position: absolute;
  top: 0;
  width: 100%;
  background: #fff;
  transition: top 0.4s ease;
}
section .service-splide + .services-read {
  margin-top: calc(140 / var(--pc));
}
section.services-content {
  margin-top: calc(100 / var(--pc));
}
section.e-commerce-flexbx {
  margin-top: calc(102 / var(--pc));
}
section.e-commerce-flexbx h2 {
  width: calc(327 / var(--pc));
  margin-top: calc(100 / var(--pc));
}
section.e-commerce-flexbx h2 img {
  filter: invert(0%) sepia(4%) saturate(0%) hue-rotate(324deg) brightness(95%) contrast(105%);
}
section.e-commerce-flexbx .e-commerce-flexbx-detail {
  display: flex;
  margin-top: calc(80 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-detail .e-commerce-flexbx-detail-txt {
  width: calc(637 / var(--pc));
  flex-shrink: 0;
}
section.e-commerce-flexbx .e-commerce-flexbx-detail .e-commerce-flexbx-detail-txt dt {
  font-size: calc(48 / var(--pc));
  font-weight: 600;
  line-height: 140%;
  letter-spacing: calc(0.96 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-detail .e-commerce-flexbx-detail-txt dd {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
  width: calc(510 / var(--pc));
  margin-top: calc(30 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-detail .e-commerce-flexbx-detail-img {
  width: calc(755 / var(--pc));
  margin-left: calc(-32 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-features {
  margin-top: calc(69 / var(--pc));
  display: flex;
}
section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item {
  width: 33.3333333333%;
  height: calc(460 / var(--pc));
  text-align: center;
  padding: calc(268 / var(--pc)) 0 calc(40 / var(--pc));
  color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
}
section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item:nth-of-type(1) {
  background-image: url(../img/service/e-commerce-img02.webp);
}
section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item:nth-of-type(2) {
  background: url(../img/service/e-commerce-img03.webp);
}
section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item:nth-of-type(3) {
  background: url(../img/service/e-commerce-img04.webp);
}
section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item h3 {
  font-size: calc(30 / var(--pc));
  font-weight: 600;
  line-height: 150%;
  letter-spacing: calc(0.6 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item h3 + p {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
  margin-top: calc(10 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-icons {
  margin-top: calc(97 / var(--pc));
  display: flex;
  flex-wrap: wrap;
  gap: calc(61 / var(--pc)) calc(40 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-icons .e-commerce-flexbx-icons-item {
  width: calc(415 / var(--pc));
  display: flex;
  align-items: flex-start;
  gap: 0 calc(16 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-icons .e-commerce-flexbx-icons-item img {
  width: calc(90 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-icons .e-commerce-flexbx-icons-item dl dt {
  font-size: calc(18 / var(--pc));
  font-weight: 600;
  line-height: 165%;
  letter-spacing: calc(0.718 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-icons .e-commerce-flexbx-icons-item dl dd {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
  margin-top: calc(10 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-link {
  margin-top: calc(71 / var(--pc));
}
section.e-commerce-flexbx .e-commerce-flexbx-link a:nth-of-type(1) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0 calc(15 / var(--pc));
  margin-left: auto;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: calc(28 / var(--pc));
  font-weight: 700;
  line-height: 150%;
}
section.e-commerce-flexbx .e-commerce-flexbx-link a:nth-of-type(1)::after {
  display: inline-block;
  content: "";
  width: calc(27 / var(--pc));
  height: calc(27 / var(--pc));
  background: url(../img/home/link-blank.webp) no-repeat;
  background-size: contain;
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(140deg) brightness(107%) contrast(101%);
}
section.e-commerce-flexbx .e-commerce-flexbx-link picture {
  margin-top: calc(19 / var(--pc));
}
section.shopify-ecforce {
  margin-top: calc(72 / var(--pc));
}
section.shopify-ecforce .shopify-ecforce-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(60 / var(--pc));
}
section.shopify-ecforce .shopify-ecforce-container .shopify-ecforce-item {
  width: calc(650 / var(--pc));
}
section.shopify-ecforce .shopify-ecforce-container .shopify-ecforce-item dl dt {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: calc(45 / var(--pc));
  font-weight: 700;
  line-height: 120%;
  letter-spacing: calc(0.9 / ar(--pc));
}
section.shopify-ecforce .shopify-ecforce-container .shopify-ecforce-item dl dd {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
  margin-top: calc(20 / var(--pc));
  height: calc(104 / var(--pc));
}
section.shopify-ecforce .shopify-ecforce-container .shopify-ecforce-item img {
  margin-top: calc(40 / var(--pc));
}
section.shopify-ecforce .shopify-ecforce-container .shopify-ecforce-item img + p {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: calc(12 / var(--pc));
  font-weight: 450;
  line-height: 150%;
  letter-spacing: calc(0.48 / var(--pc));
  color: #828282;
  margin-top: calc(13 / var(--pc));
  text-align: right;
}
section.shopify-ecforce .btn {
  font-size: calc(20 / var(--pc));
  font-weight: 300;
  margin-top: calc(31 / var(--pc));
  display: inline-block;
}
section.overseas, section.btob, section.seamless, section.solution, section.other-content {
  margin-top: calc(100 / var(--pc));
  padding-top: calc(100 / var(--pc));
  position: relative;
}
section.overseas::before, section.btob::before, section.seamless::before, section.solution::before, section.other-content::before {
  display: block;
  content: "";
  width: 0;
  height: 1px;
  border-top: 1px solid #000;
  position: absolute;
  top: 0;
  left: 0;
  transition: 1.2s;
}
section.overseas.active::before, section.btob.active::before, section.seamless.active::before, section.solution.active::before, section.other-content.active::before {
  width: 100%;
}
section.other-content {
  margin-top: calc(220 / var(--pc));
  padding-top: calc(70 / var(--pc));
}
section.btob img + p {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: calc(12 / var(--pc));
  font-weight: 450;
  line-height: 150%;
  letter-spacing: calc(0.48 / var(--pc));
  color: #828282;
  margin-top: calc(13 / var(--pc));
  text-align: right;
}
section.overseas .services-read dd {
  width: calc(872 / var(--pc));
}
section.overseas .overseas-icons {
  width: calc(1165 / var(--pc));
  margin: calc(80 / var(--pc)) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(41 / var(--pc)) calc(45 / var(--pc));
}
section.overseas .overseas-icons .overseas-icons-item {
  width: calc(257 / var(--pc));
  text-align: center;
}
section.overseas .overseas-icons .overseas-icons-item img {
  width: calc(180 / var(--pc));
  margin: 0 auto;
}
section.overseas .overseas-icons .overseas-icons-item p {
  font-size: calc(18 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.357 / var(--pc));
  margin: calc(35 / var(--pc)) 0 0;
}
section.overseas .overseas-icons .overseas-icons-item p span {
  font-weight: 600;
}
section.overseas .overseas-bottom {
  margin-top: calc(100 / var(--pc));
}
section.overseas .overseas-bottom .overseas-bottom-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(60 / var(--pc));
}
section.overseas .overseas-bottom .overseas-bottom-container .overseas-bottom-item {
  width: calc(650 / var(--pc));
}
section.overseas .overseas-bottom .overseas-bottom-container .overseas-bottom-item dl dt {
  font-size: calc(48 / var(--pc));
  font-weight: 600;
  line-height: 140%;
  letter-spacing: calc(0.96 / var(--pc));
}
section.overseas .overseas-bottom .overseas-bottom-container .overseas-bottom-item dl dd {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
  margin-top: calc(30 / var(--pc));
  height: calc(130 / var(--pc));
}
section.overseas .overseas-bottom .overseas-bottom-container .overseas-bottom-item img {
  margin-top: calc(53 / var(--pc));
}
section.overseas .overseas-bottom .overseas-bottom-container .overseas-bottom-item img + p {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: calc(12 / var(--pc));
  font-weight: 450;
  line-height: 150%;
  letter-spacing: calc(0.48 / var(--pc));
  color: #828282;
  margin-top: calc(13 / var(--pc));
  text-align: right;
}
section.overseas .overseas-bottom .btn {
  font-size: calc(20 / var(--pc));
  font-weight: 300;
  margin-top: calc(31 / var(--pc));
  display: inline-block;
}
section.btob table, section.seamless table, section.solution table {
  width: 100%;
  margin-top: calc(50 / var(--pc));
  border-collapse: collapse;
}
section.btob table th, section.btob table td, section.seamless table th, section.seamless table td, section.solution table th, section.solution table td {
  border: calc(7 / var(--pc)) solid #F3F1EE;
}
section.btob table th, section.seamless table th, section.solution table th {
  background: #414141;
  color: #fff;
  font-size: calc(20 / var(--pc));
  font-weight: 600;
  line-height: 150%;
  letter-spacing: calc(0.4 / var(--pc));
  padding: calc(17 / var(--pc)) calc(50 / var(--pc));
  text-align: left;
}
section.btob table td, section.seamless table td, section.solution table td {
  background: #fff;
}
section.btob table td:nth-of-type(1), section.seamless table td:nth-of-type(1), section.solution table td:nth-of-type(1) {
  font-size: calc(20 / var(--pc));
  font-weight: 600;
  line-height: 150%;
  letter-spacing: calc(0.4 / var(--pc));
  padding: calc(21 / var(--pc)) calc(50 / var(--pc));
  width: calc(340 / var(--pc));
}
section.btob table td:nth-of-type(2), section.seamless table td:nth-of-type(2), section.solution table td:nth-of-type(2) {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 170%;
  letter-spacing: calc(0.3 / var(--pc));
  padding: calc(21 / var(--pc)) calc(50 / var(--pc));
}
section.btob table td ul li, section.seamless table td ul li, section.solution table td ul li {
  display: flex;
}
section.btob table td ul li::before, section.seamless table td ul li::before, section.solution table td ul li::before {
  display: inline-block;
  content: "-";
  margin-right: 0.5em;
}
section.btob table + img, section.seamless table + img, section.solution table + img {
  margin-top: calc(70 / var(--pc));
}
section.btob .btn, section.seamless .btn, section.solution .btn {
  font-size: calc(20 / var(--pc));
  font-weight: 300;
  margin-top: calc(31 / var(--pc));
  display: inline-block;
}
section.solution, section.other-content {
  padding-bottom: calc(100 / var(--pc));
}
section.solution::after, section.other-content::after {
  display: block;
  content: "";
  width: 0;
  height: 1px;
  border-bottom: 1px solid #000;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 2.4s;
}
section.solution.other-content, section.other-content.other-content {
  padding-bottom: calc(70 / var(--pc));
}
section.solution.active::after, section.other-content.active::after {
  width: 100%;
}
section.solution .solution-logos, section.other-content .solution-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(45 / var(--pc));
  width: calc(1200 / var(--pc));
  margin: calc(50 / var(--pc)) auto 0;
}
section.solution .solution-logos .solution-logos-item, section.other-content .solution-logos .solution-logos-item {
  width: calc(204 / var(--pc));
}
@media (max-width: 768px) {
  section.service-read {
    padding: calc(40 / var(--sp)) calc(20 / var(--sp));
    margin-top: calc(20 / var(--sp));
  }
  section.service-read p {
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(0.26 / var(--sp));
  }
  section.branding-commerce {
    margin: calc(53 / var(--sp)) calc(20 / var(--sp));
    padding: calc(25 / var(--sp)) calc(20 / var(--sp)) calc(20 / var(--sp));
    width: calc(335 / var(--sp));
  }
  section.branding-commerce p:nth-of-type(1) {
    position: absolute;
    top: calc(-13 / var(--sp));
    left: calc(20 / var(--sp));
    font-size: calc(15 / var(--sp));
    padding: 0 calc(7 / var(--sp));
  }
  section.branding-commerce p:nth-of-type(2) {
    font-size: calc(13 / var(--sp));
    line-height: 170%;
    letter-spacing: calc(0.26 / var(--sp));
  }
  section.service-menu {
    margin-top: calc(70 / var(--sp));
  }
  section.service-menu .service-menu-item {
    width: 100%;
    height: calc(430 / var(--sp));
    padding: calc(50 / var(--sp)) calc(45 / var(--sp));
  }
  section.service-menu .service-menu-item:nth-of-type(1) {
    background: url(../img/service/service-top-menu-img01_sp.webp) no-repeat;
    background-size: cover;
  }
  section.service-menu .service-menu-item:nth-of-type(2) {
    background: url(../img/service/service-top-menu-img02_sp.webp) no-repeat;
    background-size: cover;
  }
  section.service-menu .service-menu-item:nth-of-type(3) {
    background: url(../img/service/service-top-menu-img03_sp.webp) no-repeat;
    background-size: cover;
  }
  section.service-menu .service-menu-item:nth-of-type(4) {
    background: url(../img/service/service-top-menu-img04_sp.webp) no-repeat;
    background-size: cover;
  }
  section.service-menu .service-menu-item:nth-of-type(5) {
    background: url(../img/service/service-top-menu-img05_sp.webp) no-repeat;
    background-size: cover;
  }
  section.service-menu .service-menu-item:nth-of-type(6) {
    background: url(../img/service/service-top-menu-img06_sp.webp) no-repeat;
    background-size: cover;
  }
  section.service-menu .service-menu-item .arrow {
    position: absolute;
    top: calc(50 / var(--sp));
    right: calc(45 / var(--sp));
  }
  section.service-menu .service-menu-item h2 {
    font-size: calc(26 / var(--sp));
    line-height: 115%;
    letter-spacing: calc(0.52 / var(--sp));
  }
  section.service-menu .service-menu-item h2 span {
    font-size: calc(12 / var(--sp));
    line-height: normal;
    letter-spacing: calc(0.48 / var(--sp));
  }
  section.service-menu .service-menu-item dl {
    margin-top: calc(20 / var(--sp));
    padding-bottom: calc(15 / var(--sp));
  }
  section.service-menu .service-menu-item dl dt {
    font-size: calc(18 / var(--sp));
    letter-spacing: calc(0.36 / var(--sp));
  }
  section.service-menu .service-menu-item dl dd {
    display: none;
  }
  section.service-menu .service-menu-item ul {
    gap: calc(5 / var(--sp)) calc(10 / var(--sp));
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(1.95 / var(--pc));
    margin-top: calc(10 / var(--sp));
  }
  section.service-menu .service-menu-item ul li {
    gap: 0 calc(8 / var(--sp));
  }
  section.service-menu .service-menu-item ul li::before {
    width: calc(4 / var(--sp));
    height: calc(4 / var(--sp));
  }
  section.services-header .services-header-sticky {
    height: 410vh; /* area数 × 100vh */
  }
  section.services-header .services-header-txt > .area {
    padding: 0 calc(20 / var(--sp));
  }
  section.services-header .services-header-txt > .area h1 {
    font-size: calc(38 / var(--sp));
    letter-spacing: calc(0.76 / var(--sp));
  }
  section.services-header .services-header-txt > .area dl {
    margin-top: calc(30 / var(--sp));
  }
  section.services-header .services-header-txt > .area dl dt {
    font-size: calc(26 / var(--sp));
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.52/var(--sp);
  }
  section.services-header .services-header-txt > .area dl dd {
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(0.26 / var(--sp));
    margin-top: calc(15 / var(--sp));
  }
  section.services-header .services-header-txt > .area.area02 dt, section.services-header .services-header-txt > .area.area03 dt, section.services-header .services-header-txt > .area.area04 dt, section.services-header .services-header-txt > .area.area05 dt {
    font-size: calc(18 / var(--sp));
  }
  section.services-header .services-header-txt > .area.area01 {
    padding-top: calc(200 / var(--sp));
  }
  section.services-header .services-header-txt > .area.area02, section.services-header .services-header-txt > .area.area04 {
    padding-right: calc(118 / var(--sp));
  }
  section.services-header .services-header-txt > .area.area03, section.services-header .services-header-txt > .area.area05 {
    padding-left: calc(118 / var(--sp));
  }
  section .services-read dl dt {
    font-size: calc(26 / var(--sp));
    font-weight: 700;
    line-height: 130%;
    letter-spacing: calc(0.52 / var(--sp));
  }
  section .services-read dl dd {
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(0.26 / var(--sp));
    margin-top: calc(15 / var(--sp));
  }
  section .services-inner {
    width: calc(335 / var(--sp));
  }
  section .service-splide {
    margin-top: calc(20 / var(--sp));
    height: calc(465 / var(--sp));
  }
  section .service-splide.consulting {
    height: calc(345 / var(--sp));
  }
  section .service-splide.branding {
    height: calc(250 / var(--sp));
  }
  section .service-splide.marketing {
    height: calc(398 / var(--sp));
  }
  section .service-splide.operational {
    height: calc(348 / var(--sp));
  }
  section .service-splide.operational2 {
    height: calc(308 / var(--sp));
  }
  section .service-splide .slide-inner .service-splide-txt {
    width: calc(285 / var(--sp));
    margin-left: calc(25 / var(--sp));
  }
  section .service-splide .slide-inner .service-splide-txt h2 {
    font-size: calc(26 / var(--sp));
    line-height: 115%;
    letter-spacing: calc(0.52 / var(--sp));
  }
  section .service-splide .slide-inner .service-splide-txt h2 span {
    font-size: calc(12 / var(--sp));
    line-height: normal;
    letter-spacing: calc(0.48 / var(--sp));
    margin-top: calc(5 / var(--sp));
  }
  section .service-splide .slide-inner .service-splide-txt dl {
    margin-top: calc(19 / var(--sp));
  }
  section .service-splide .slide-inner .service-splide-txt dl dt {
    font-size: calc(18 / var(--sp));
  }
  section .service-splide .slide-inner .service-splide-txt dl dd {
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(0.26 / var(--sp));
    margin-top: calc(12 / var(--sp));
  }
  section .service-splide .slide-inner .service-splide-txt ul {
    margin-top: calc(20 / var(--sp));
  }
  section .service-splide .slide-inner .service-splide-txt ul li {
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(0.26 / var(--sp));
    gap: 0 calc(5 / var(--sp));
    margin-top: calc(5 / var(--sp));
  }
  section .service-splide .slide-inner .service-splide-txt ul li::before {
    width: calc(8 / var(--sp));
    height: calc(8 / var(--sp));
  }
  section .service-splide .slide-inner .service-splide-txt p {
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(0.26 / var(--sp));
    margin-top: calc(20 / var(--sp));
  }
  section .service-splide .scroll-indicator {
    right: calc(15 / var(--sp));
    top: calc(40 / var(--sp));
    height: calc(180 / var(--sp));
  }
  section .service-splide + .services-read {
    margin-top: calc(50 / var(--sp));
  }
  section.services-content {
    margin-top: calc(40 / var(--sp));
  }
  section.e-commerce-flexbx {
    margin-top: calc(41 / var(--sp));
  }
  section.e-commerce-flexbx h2 {
    width: calc(180 / var(--sp));
    margin-top: calc(40 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-detail {
    flex-direction: column;
    gap: calc(31 / var(--sp)) 0;
    margin-top: calc(30 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-detail .e-commerce-flexbx-detail-txt {
    width: 100%;
  }
  section.e-commerce-flexbx .e-commerce-flexbx-detail .e-commerce-flexbx-detail-txt dt {
    font-size: calc(26 / var(--sp));
    font-weight: 700;
    line-height: 130%;
    letter-spacing: calc(0.52 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-detail .e-commerce-flexbx-detail-txt dd {
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(0.26 / var(--sp));
    width: 100%;
    margin-top: calc(15 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-detail .e-commerce-flexbx-detail-img {
    width: 100%;
    margin-left: 0;
  }
  section.e-commerce-flexbx .e-commerce-flexbx-features {
    margin-top: calc(80 / var(--sp));
    flex-direction: column;
  }
  section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    height: calc(200 / var(--sp));
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item:nth-of-type(1) {
    background-image: url(../img/service/e-commerce-img02_sp.webp);
  }
  section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item:nth-of-type(2) {
    background: url(../img/service/e-commerce-img03_sp.webp);
  }
  section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item:nth-of-type(3) {
    background: url(../img/service/e-commerce-img04_sp.webp);
  }
  section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item h3 {
    font-size: calc(21 / var(--sp));
    letter-spacing: calc(0.42 / var(--pc));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-features .e-commerce-flexbx-features-item h3 + p {
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(0.26 / var(--sp));
    margin-top: calc(8 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-icons {
    margin-top: calc(80 / var(--sp));
    flex-direction: column;
    gap: calc(15 / var(--sp)) 0;
  }
  section.e-commerce-flexbx .e-commerce-flexbx-icons .e-commerce-flexbx-icons-item {
    width: 100%;
    gap: 0 calc(21 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-icons .e-commerce-flexbx-icons-item img {
    width: calc(70 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-icons .e-commerce-flexbx-icons-item dl dt {
    font-size: calc(18 / var(--sp));
    line-height: 150%;
    letter-spacing: calc(0.36 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-icons .e-commerce-flexbx-icons-item dl dd {
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(0.26 / var(--sp));
    margin-top: calc(13 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-link {
    margin-top: calc(33 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-link a:nth-of-type(1) {
    gap: 0 calc(8 / var(--sp));
    font-size: calc(15 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-link a:nth-of-type(1)::after {
    width: calc(18 / var(--sp));
    height: calc(17 / var(--sp));
  }
  section.e-commerce-flexbx .e-commerce-flexbx-link picture {
    margin: calc(10 / var(--sp)) calc(50% - 50vw) 0;
    width: 100vw;
    max-width: none;
  }
  section.e-commerce-flexbx .e-commerce-flexbx-link picture img {
    max-width: none;
  }
  section.shopify-ecforce {
    margin-top: calc(50 / var(--sp));
  }
  section.shopify-ecforce .shopify-ecforce-container {
    flex-direction: column;
    gap: calc(25 / var(--sp)) 0;
  }
  section.shopify-ecforce .shopify-ecforce-container .shopify-ecforce-item {
    width: 100%;
  }
  section.shopify-ecforce .shopify-ecforce-container .shopify-ecforce-item dl dt {
    font-size: calc(26 / var(--sp));
    line-height: 115%;
    letter-spacing: calc(0.52 / ar(--pc));
  }
  section.shopify-ecforce .shopify-ecforce-container .shopify-ecforce-item dl dd {
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(0.26 / var(--sp));
    margin-top: calc(15 / var(--sp));
    height: auto;
  }
  section.shopify-ecforce .shopify-ecforce-container .shopify-ecforce-item img {
    margin-top: calc(20 / var(--sp));
  }
  section.shopify-ecforce .shopify-ecforce-container .shopify-ecforce-item img + p {
    font-size: calc(9 / var(--sp));
    line-height: 110%;
    letter-spacing: calc(0.36 / var(--sp));
    margin-top: calc(8 / var(--sp));
  }
  section.shopify-ecforce .btn {
    font-size: calc(15 / var(--sp));
    margin-top: calc(25 / var(--sp));
  }
  section.overseas, section.btob, section.seamless, section.solution, section.other-content {
    margin-top: calc(80 / var(--sp));
    padding-top: calc(80 / var(--sp));
  }
  section.other-content {
    margin-top: calc(120 / var(--sp));
    padding-top: calc(40 / var(--sp));
  }
  section.btob img + p {
    font-size: calc(9 / var(--sp));
    line-height: 110%;
    letter-spacing: calc(0.36 / var(--sp));
    margin-top: calc(8 / var(--sp));
  }
  section.overseas .services-read dd {
    width: 100%;
  }
  section.overseas .overseas-icons {
    width: 100%;
    margin-top: calc(30 / var(--sp));
    gap: calc(15 / var(--sp)) calc(25 / var(--sp));
    justify-content: center;
  }
  section.overseas .overseas-icons .overseas-icons-item {
    width: calc(140 / var(--sp));
  }
  section.overseas .overseas-icons .overseas-icons-item img {
    width: calc(100 / var(--sp));
  }
  section.overseas .overseas-icons .overseas-icons-item p {
    font-size: calc(13 / var(--sp));
    font-weight: 300;
    line-height: 150%;
    letter-spacing: calc(0.26 / var(--sp));
    margin-top: calc(19 / var(--sp));
  }
  section.overseas .overseas-bottom {
    margin-top: calc(80 / var(--sp));
  }
  section.overseas .overseas-bottom .overseas-bottom-container {
    flex-direction: column;
    gap: calc(30 / var(--sp)) 0;
  }
  section.overseas .overseas-bottom .overseas-bottom-container .overseas-bottom-item {
    width: 100%;
  }
  section.overseas .overseas-bottom .overseas-bottom-container .overseas-bottom-item dl dt {
    font-size: calc(26 / var(--sp));
    font-weight: 700;
    line-height: 130%;
    letter-spacing: calc(0.52 / var(--sp));
  }
  section.overseas .overseas-bottom .overseas-bottom-container .overseas-bottom-item dl dd {
    font-size: calc(13 / var(--sp));
    letter-spacing: calc(0.26 / var(--sp));
    margin-top: calc(15 / var(--sp));
    height: auto;
  }
  section.overseas .overseas-bottom .overseas-bottom-container .overseas-bottom-item img {
    margin-top: calc(20 / var(--sp));
  }
  section.overseas .overseas-bottom .overseas-bottom-container .overseas-bottom-item img + p {
    font-size: calc(9 / var(--sp));
    line-height: 110%;
    letter-spacing: calc(0.36 / var(--sp));
    margin-top: calc(8 / var(--sp));
  }
  section.overseas .overseas-bottom .btn {
    font-size: calc(15 / var(--sp));
    margin-top: calc(25 / var(--sp));
  }
  section.btob table, section.seamless table, section.solution table {
    margin-top: calc(25 / var(--sp));
  }
  section.btob table th, section.btob table td, section.seamless table th, section.seamless table td, section.solution table th, section.solution table td {
    border: calc(2 / var(--sp)) solid #F3F1EE;
  }
  section.btob table th, section.seamless table th, section.solution table th {
    font-size: calc(9 / var(--sp));
    letter-spacing: calc(0.18 / var(--sp));
    padding: calc(8 / var(--sp)) calc(15 / var(--sp));
  }
  section.btob table td:nth-of-type(1), section.seamless table td:nth-of-type(1), section.solution table td:nth-of-type(1) {
    width: calc(87 / var(--sp));
    font-size: calc(9 / var(--sp));
    letter-spacing: calc(0.18 / var(--sp));
    padding: calc(10 / var(--sp)) calc(15 / var(--sp));
  }
  section.btob table td:nth-of-type(2), section.seamless table td:nth-of-type(2), section.solution table td:nth-of-type(2) {
    font-size: calc(9 / var(--sp));
    line-height: 140%;
    letter-spacing: calc(0.18 / var(--sp));
    padding: calc(10 / var(--sp)) calc(15 / var(--sp));
  }
  section.btob table + img, section.seamless table + img, section.solution table + img {
    margin-top: calc(30 / var(--sp));
  }
  section.btob .btn, section.seamless .btn, section.solution .btn {
    font-size: calc(15 / var(--sp));
    margin-top: calc(25 / var(--sp));
  }
  section.solution {
    padding-bottom: calc(80 / var(--sp));
  }
  section.solution .solution-logos {
    gap: 0 calc(15 / var(--sp));
    width: 100%;
    margin-top: calc(25 / var(--sp));
  }
  section.solution .solution-logos .solution-logos-item {
    width: calc(97 / var(--sp));
  }
  section.other-content {
    padding-bottom: calc(40 / var(--sp));
  }
}/*# sourceMappingURL=services.css.map */ var(--sp));
  }
}