.c-wp-page-head {
  margin: 0 0 calc(40 / var(--w) * 100vw);
  text-align: center;
}

.c-wp-page-head h1 {
  color: #30281f;
  font-size: calc(32 / var(--w) * 100vw);
  font-weight: 600;
  line-height: 140%;
  letter-spacing: 0.04em;
}

.c-news-item ._news-thumb {
  display: block;
  width: calc(180 / var(--w) * 100vw);
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: calc(8 / var(--w) * 100vw);
}

.c-news-item ._news-thumb img,
.p-news-detail ._eyecatch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-news-detail ._eyecatch {
  margin: calc(28 / var(--w) * 100vw) 0 calc(36 / var(--w) * 100vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(8 / var(--w) * 100vw);
}

.p-index-before-after {
  padding: calc(110 / var(--w) * 100vw) 0;
  background: #fffaf0;
}

.p-index-before-after ._inner {
  max-width: calc(1120 / var(--w) * 100vw);
}

.p-index-before-after ._items {
  display: grid;
  margin-top: calc(40 / var(--w) * 100vw);
  gap: calc(72 / var(--w) * 100vw);
}

.p-index-before-after ._item {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: calc(52 / var(--w) * 100vw);
  align-items: center;
}

.p-index-before-after ._item.is-reverse {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.p-index-before-after ._item.is-reverse ._photos {
  order: 2;
}

.p-index-before-after ._item.is-reverse ._body {
  order: 1;
}

.p-index-before-after ._photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16 / var(--w) * 100vw);
}

.p-index-before-after ._photos figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: calc(8 / var(--w) * 100vw);
  background: #eee7d7;
}

.p-index-before-after ._photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

.p-index-before-after ._photos figcaption {
  position: absolute;
  left: calc(10 / var(--w) * 100vw);
  bottom: calc(10 / var(--w) * 100vw);
  min-width: calc(88 / var(--w) * 100vw);
  padding: calc(6 / var(--w) * 100vw) calc(12 / var(--w) * 100vw);
  border-radius: 999px;
  background: rgba(48, 40, 31, 0.86);
  color: #fff;
  font-family: var(--font-en);
  font-size: calc(13 / var(--w) * 100vw);
  line-height: 1.4;
  text-align: center;
}

.p-index-before-after ._body {
  color: #30281f;
}

.p-index-before-after ._body h3 {
  margin: 0 0 calc(22 / var(--w) * 100vw);
  color: #52622d;
  font-size: calc(30 / var(--w) * 100vw);
  font-weight: 600;
  line-height: 1.55;
}

.p-index-before-after ._body p {
  margin: 0;
  font-size: calc(17 / var(--w) * 100vw);
  line-height: 2.15;
}

.p-index-before-after ._body ._note {
  margin-top: calc(18 / var(--w) * 100vw);
  color: #7c4b26;
  font-size: calc(14 / var(--w) * 100vw);
}

@media screen and (max-width: 767px) {
  .c-wp-page-head {
    margin-bottom: calc(28 / var(--w) * 100vw);
  }

  .c-wp-page-head h1 {
    font-size: calc(26 / var(--w) * 100vw);
  }

  .c-news-item ._news-thumb {
    width: calc(104 / var(--w) * 100vw);
    border-radius: calc(6 / var(--w) * 100vw);
  }

  .p-news-detail ._eyecatch {
    margin: calc(22 / var(--w) * 100vw) 0 calc(28 / var(--w) * 100vw);
    border-radius: calc(6 / var(--w) * 100vw);
  }

  .p-index-before-after {
    padding: calc(72 / var(--w) * 100vw) 0;
  }

  .p-index-before-after ._inner {
    max-width: none;
  }

  .p-index-before-after ._items {
    margin-top: calc(18 / var(--w) * 100vw);
    gap: calc(56 / var(--w) * 100vw);
  }

  .p-index-before-after ._item,
  .p-index-before-after ._item.is-reverse {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .p-index-before-after ._photos {
    order: 2;
  }

  .p-index-before-after ._body {
    order: 1;
    margin-bottom: calc(22 / var(--w) * 100vw);
  }

  .p-index-before-after ._photos {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(12 / var(--w) * 100vw);
    width: 100%;
    padding: 0;
    overflow: visible;
  }

  .p-index-before-after ._photos figure {
    border-radius: calc(8 / var(--w) * 100vw);
  }

  .p-index-before-after ._photos figcaption {
    left: calc(8 / var(--w) * 100vw);
    bottom: calc(8 / var(--w) * 100vw);
    min-width: calc(72 / var(--w) * 100vw);
    padding: calc(5 / var(--w) * 100vw) calc(10 / var(--w) * 100vw);
    font-size: calc(12 / var(--w) * 100vw);
  }

  .p-index-before-after ._body h3 {
    margin-bottom: calc(16 / var(--w) * 100vw);
    font-size: calc(24 / var(--w) * 100vw);
  }

  .p-index-before-after ._body p {
    font-size: calc(15 / var(--w) * 100vw);
    line-height: 2;
  }

  .p-index-before-after ._body ._note {
    margin-top: calc(12 / var(--w) * 100vw);
    font-size: calc(13 / var(--w) * 100vw);
  }

}