@charset "UTF-8";
/*
|---------------------------------------------------------------
| ec-connector-2025 TikTok Shop連携 css
|---------------------------------------------------------------
*/
:root {
  --ecc-service-theme-color: #219ab0;
  --ecc-service-primary-color: #0a8aa2;
  --ecc-service-secondary-color: #e6f3f6;
  --ecc-service-light-color: #edecec;
}

.footerTop {
  margin: clamp(25px, 3.33vw, 50px) 0 0;
}
.footerTop__partners {
  display: none;
}

.lsrv-section-title > span > span {
  display: inline;
}

/*
 * タイトル
------------------------------------------------*/
.tts-title {
  --ecc-title-color: #ffffff;
  --ecc-title-bgcolor: #000000;
  --ecc-shadow-size: 6px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  width: 100%;
  margin: var(--ecc-shadow-size) 0;
  padding: 0.75em 0.5em;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-radius: 1em;
  /* overflow: hidden; */
  color: var(--ecc-title-color);
  background: var(--ecc-title-bgcolor);
  position: relative;
}
.tts-title::after {
  content: "";
  display: block;
  width: 19px;
  height: 17px;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 2;
  margin: auto;
  background: var(--ecc-title-bgcolor);
}
@media (min-width: 750.02px) {
  .tts-title {
    --ecc-shadow-size: 10px;
    font-size: 27px;
    line-height: 1.5;
    padding: 0.75em 0.5em;
    border-radius: 1.5em;
  }
}
.tts-title > span {
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.tts-title svg {
  display: block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  align-self: center;
  flex-shrink: 0;
}
.tts-title svg path {
  fill: currentColor;
}

/* outline */
.tts-title {
  will-change: filter;
  transform: translateZ(0);
  /* NOTE: Safari bug
  filter: drop-shadow(calc(-1 * var(--ecc-shadow-size) / 2) calc(-1 * var(--ecc-shadow-size)) 0 var(--ecc-service-primary-color)) drop-shadow(calc(var(--ecc-shadow-size) / 2) var(--ecc-shadow-size) 0 #e7395b); */
  filter: drop-shadow(calc(var(--ecc-shadow-size) / 2) var(--ecc-shadow-size) 0 #e7395b);
  box-shadow: calc(-1 * var(--ecc-shadow-size) / 2) calc(-1 * var(--ecc-shadow-size)) 0 var(--ecc-service-primary-color);
}

/*
 * とは
------------------------------------------------*/
.tts-abouts {
  color: #000000;
  background: #ffffff;
}

.tts-about {
  display: block;
  width: 100%;
  padding: clamp(15px, 2vw, 30px) 0;
}
.tts-about__header {
  display: block;
  width: 100%;
  margin: 0 0 clamp(20px, 2.67vw, 40px);
}
.tts-about__body {
  display: block;
  width: 100%;
}
.tts-about__image {
  display: block;
  width: 100%;
  margin: 0 0 clamp(20px, 2.67vw, 40px);
}
@media (max-width: 750px) {
  .tts-about__image {
    width: auto;
    margin-left: calc(-1 * var(--ecc-container-padding, 15px));
    margin-right: calc(-1 * var(--ecc-container-padding, 15px));
  }
}
.tts-about__content {
  display: block;
  width: 100%;
  font-size: clamp(14px, 1.87vw, 16px);
  line-height: 1.75;
  font-weight: 500;
  text-align: left;
}
@media (min-width: 750.02px) {
  .tts-about__content {
    font-size: 20px;
    line-height: 2;
    text-align: center;
  }
}

.tts-about-image {
  display: block;
  width: 100%;
}
.tts-about-image img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * 特徴
------------------------------------------------*/
.tts-features {
  background-color: #dceaee;
}
.tts-features::before {
  background-image: url("../images/bg-feature01.png?t=1759395235090");
}
.tts-features::after {
  background-image: url("../images/bg-feature02.png?t=1759395235090");
}
@media (min-width: 750.02px) {
  .tts-features .lsrv-section-title {
    letter-spacing: -0.005em;
  }
}
.tts-features .lsrv-feature-section__content {
  font-feature-settings: "palt" 1;
}
@media (min-width: 750.02px) {
  .tts-features .lsrv-feature-section__content {
    /* font-feature-settings: normal; */
    padding: 0 0.5em;
  }
}

/*
 * 連携機能
------------------------------------------------*/
.tts-details {
  color: #000000;
  background: #f6f5f5;
}

.tts-detail {
  display: block;
  width: 100%;
}
.tts-detail__image {
  display: block;
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  overflow: hidden;
}
.tts-detail__image img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * データマッピング機能
------------------------------------------------*/
.tts-mappings {
  color: #ffffff;
  background: #222222;
}
@media (min-width: 750.02px) {
  .tts-mappings .tts-title {
    --ecc-title-color: #000000;
    --ecc-title-bgcolor: #ffffff;
    border-radius: 4px;
  }
}

.tts-mapping {
  display: block;
  width: 100%;
}
.tts-mapping__header {
  display: block;
  width: 100%;
  margin: 0 0 50px;
}
.tts-mapping__body {
  display: block;
  width: 100%;
}
.tts-mapping__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 60px);
}

.tts-mapping-image {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.tts-mapping-image img {
  display: block;
  width: 100%;
  height: auto;
}

.tts-mapping-section {
  display: block;
  width: 100%;
  color: var(--ecc-service-theme-color, inherit);
}
@media (min-width: 750.02px) {
  .tts-mapping-section {
    border-width: 1px;
    border-color: currentColor;
    border-style: solid;
  }
}
@media (max-width: 750px) {
  .tts-mapping-section {
    width: auto;
    margin-left: calc(-1 * var(--ecc-container-padding, 15px));
    margin-right: calc(-1 * var(--ecc-container-padding, 15px));
  }
}
.tts-mapping-section__header {
  display: block;
  width: 100%;
  margin: 0;
}
.tts-mapping-section__body {
  display: block;
  width: 100%;
  padding: clamp(30px, 4vw, 60px) clamp(20px, 2.67vw, 40px);
}

.tts-mapping-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0.5em 0;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  line-height: 1.5;
  border-width: 1px 0;
  border-color: currentColor;
  border-style: solid;
}
.tts-mapping-section-title__index {
  display: block;
  width: auto;
  padding: 0.25em 0.4em;
  font-family: var(--ecc-font-family-en, var(--ecc-font-family-base, sans-serif));
  font-size: 1.91em;
  font-weight: 900;
  line-height: 1.25;
  border-width: 0 1px 0 0;
  border-color: currentColor;
  border-style: solid;
  flex-shrink: 0;
}
.tts-mapping-section-title__text {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.25em 1.5em;
  flex-grow: 1;
  flex-basis: 0;
  text-align: left;
}
.tts-mapping-section-title__text > span {
  display: block;
  max-width: 100%;
}
@media (min-width: 750.02px) {
  .tts-mapping-section-title {
    --ecc-index-width: 98px;
    display: block;
    font-size: clamp(20px, 2.67vw, 28px);
    border-top-width: 0;
    position: relative;
    padding: 0.75em var(--ecc-index-width);
  }
  .tts-mapping-section-title__index {
    width: var(--ecc-index-width);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.46em;
    padding: 0.25em 0.25em;
    position: absolute;
    top: 16px;
    left: 0;
    right: auto;
    bottom: 16px;
    z-index: 2;
    margin: auto;
  }
  .tts-mapping-section-title__text {
    text-align: center;
    justify-content: center;
  }
}

/*
 * 費用
------------------------------------------------*/
@media (min-width: 750.02px) {
  .lsrv-pricings {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 -20px 0;
  }
  .lsrv-pricings__group {
    flex-grow: 1;
    flex-basis: 50%;
    max-width: 100%;
    margin-bottom: 30px;
    padding: 0 20px;
  }
}

/*
 * Contents
------------------------------------------------*/
.lsrv-interviews {
  padding: clamp(75px, 10vw, 100px) 0 clamp(35px, 4.67vw, 70px);
}
@media (min-width: 750.02px) {
  * + .lsrv-interviews {
    margin-top: 70px;
  }
}
.lsrv-interviews .ecc-section-title {
  margin-bottom: clamp(20px, 2.67vw, 40px);
}
.lsrv-interviews__content {
  overflow: hidden;
}
.lsrv-interviews__content .swiper {
  overflow: visible;
}
@media (min-width: 750.02px) {
  .lsrv-interviews__content {
    --ecc-container-maxwidth: 100%;
    --ecc-container-padding: 0;
  }
}

.lsrv-works {
  padding: clamp(35px, 4.67vw, 70px) 0;
}
.lsrv-works .ecc-section-title {
  margin-bottom: clamp(20px, 2.67vw, 40px);
}
.lsrv-works__content {
  --ecc-container-maxwidth: 100%;
  --ecc-container-padding: 0;
  padding: 10px 0;
  overflow: hidden;
}
.lsrv-works__content .swiper {
  overflow: visible;
}

.lsrv-columns {
  padding: clamp(35px, 4.67vw, 70px) 0 clamp(75px, 10vw, 100px);
}
.lsrv-columns .ecc-section-title {
  margin-bottom: clamp(20px, 2.67vw, 40px);
}
.lsrv-columns__content {
  padding: 10px 0;
  overflow: hidden;
}
.lsrv-columns__content .swiper {
  overflow: visible;
}
@media (min-width: 750.02px) {
  .lsrv-columns__content {
    --ecc-container-maxwidth: 100%;
    --ecc-container-padding: 0;
  }
}