body {
  font-family: var(--font-family-1);
  color: var(--sub-color-1);
  background: #f4f1ed;
}

#container {
  font-family: var(--font-family-1);
  color: var(--sub-color-1);
}

.titleBox h1,
.titleBox h2,
.titleBox h3 {
  font-family: var(--font-family-3);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--sub-color-1);
}

.titleBox h1 {
  font-size: 42px;
  font-weight: 400;
}

.titleBox h2 {
  font-size: 32px;
  font-weight: 400;
}

.titleBox h3 {
  font-size: 22px;
  font-weight: 400;
}

.titleBox p {
  margin-top: 8px;
  font-family: var(--font-family-1);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--main-color);
}

.titleBox h1::after,
.titleBox.center h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--main-color);
}

.titleBox:not(.center) h1::after {
  margin-left: 0;
  margin-right: auto;
}

.mincho {
  font-family: var(--font-family-2);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sub-color-1);
}

.messageBox h2,
.messageBox h3,
.messageBox h4,
.doubleBox dt,
.tripleBox dt,
.serviceMovieView .serviceBox dl dt {
  font-family: var(--font-family-2);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sub-color-1);
}

.messageBox p,
.otherIndex p,
.doubleBox dd,
.tripleBox dd,
.serviceBox dd {
  font-family: var(--font-family-1);
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--sub-color-2);
}

.serviceMovieView .serviceBox dl dt,
.serviceMovieView .priceBox .messageBox {
  color: var(--sub-color-1);
}

.serviceMovieView .serviceBox dl dt {
  font-size: 24px;
}

#container .button {
  font-family: var(--font-family-1);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 999px;
}

#container .button.buttonBlack,
#container .button.buttonPink {
  background: #1e1b1a;
  color: #fff;
  padding: 14px 32px;
  line-height: 1.4;
}

#container .button.buttonAttr {
  width: auto;
  min-width: 10em;
  padding: 10px 22px;
  background: var(--main-color);
  border-radius: 999px;
  color: #fff;
}

.service-shop-cta {
  max-width: 760px;
  margin: 56px auto 0;
  padding: 44px 20px 0;
  border-top: 1px solid rgba(132, 120, 113, 0.35);
  text-align: center;
}

.service-shop-cta-label {
  margin: 0 0 12px;
  font-family: var(--font-family-1);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.service-shop-cta-text {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.8;
}

.doubleBox.brand figure,
.doubleBox.serviceMajo figure,
.serviceView .otherIndex figure,
.tripleBox figure {
  border-radius: 10px;
}

.titleBox h1.js-inview::after,
.titleBox.center h2.js-inview::after {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.titleBox h1.is-inview::after,
.titleBox.center h2.is-inview::after {
  transform: scaleX(1);
}

.titleBox .js-inview-ttl + .js-inview {
  transition-delay: 0.15s;
}

.messageBox .js-inview + .js-inview {
  transition-delay: 0.12s;
}

.messageBox .js-inview + .js-inview + .js-inview {
  transition-delay: 0.24s;
}

.messageBox .js-inview + .js-inview + .js-inview + .js-inview {
  transition-delay: 0.36s;
}

.doubleBox.brand > li:nth-child(even).js-inview,
.doubleBox.serviceMajo > li:nth-child(even).js-inview,
.doubleBox.service358 > li:nth-child(even).js-inview,
.tripleBox.merit > li:nth-child(2).js-inview {
  transition-delay: 0.12s;
}

.tripleBox.merit > li:nth-child(3).js-inview {
  transition-delay: 0.24s;
}

.serviceBox dl.js-inview dt + dd {
  transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .titleBox h1.js-inview::after,
  .titleBox.center h2.js-inview::after {
    transform: none;
    transition: none;
  }
}

@media (max-width: 800px) {
  .titleBox h1 {
    font-size: 28px;
  }

  .titleBox h2 {
    font-size: 22px;
  }

  .messageBox h3 {
    font-size: 20px;
  }

  .serviceMovieView .serviceBox dl dt {
    font-size: 18px;
  }
}