:root {
  --groovy-ink: #202421;
  --groovy-paper: #f3f0e8;
  --groovy-white: #fcfbf7;
  --groovy-rust: #a5573e;
  --groovy-moss: #5f695e;
  --groovy-line: #cfcdc4;
  --groovy-muted: #696c67;
  --groovy-serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

.groovy-related-page {
  color: var(--groovy-ink);
  background: var(--groovy-white);
}

.groovy-related-page .c-pageTitle {
  padding: clamp(72px, 9vw, 128px) 24px;
  color: var(--groovy-white);
  background: var(--groovy-ink);
}

.groovy-related-page .c-pageTitle__inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.groovy-related-page .c-pageTitle__main {
  font-family: var(--groovy-serif);
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.groovy-related-page h1.c-pageTitle,
.groovy-related-page .p-articleHead h1 {
  font-family: var(--groovy-serif);
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.45;
}

.groovy-related-page .p-articleHead {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--groovy-line);
}

.groovy-related-page #content {
  padding-top: clamp(72px, 9vw, 128px);
  padding-bottom: clamp(88px, 10vw, 148px);
}

.groovy-related-page .l-mainContent {
  max-width: 1040px;
}

.groovy-related-page .post_content {
  color: var(--groovy-muted);
  line-height: 2;
}

.groovy-related-page .post_content h2 {
  padding: 0 0 20px !important;
  margin: clamp(72px, 8vw, 112px) 0 30px !important;
  color: var(--groovy-ink);
  border: 0 !important;
  border-bottom: 1px solid var(--groovy-line) !important;
  background: transparent !important;
  font-family: var(--groovy-serif);
  font-size: clamp(1.9rem, 3.8vw, 3.3rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.5;
}

.groovy-related-page .post_content h2::before,
.groovy-related-page .post_content h2::after {
  content: none !important;
}

.groovy-related-page .post_content h3 {
  padding-left: 18px;
  color: var(--groovy-ink);
  border-left: 3px solid var(--groovy-rust);
  font-family: var(--groovy-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}

.groovy-related-page .wp-block-button__link,
.groovy-related-page .swell-block-button__link {
  min-height: 56px;
  padding: 15px 24px;
  color: #fff;
  border: 1px solid var(--groovy-ink);
  border-radius: 0;
  background: var(--groovy-ink);
  font-weight: 700;
}

.groovy-related-page .wp-block-button__link:hover,
.groovy-related-page .swell-block-button__link:hover {
  border-color: var(--groovy-rust);
  background: var(--groovy-rust);
}

.groovy-related-page .is-style-balloon_box,
.groovy-related-page .has-border,
.groovy-related-page .swell-block-capbox,
.groovy-related-page .swell-block-box-menu {
  border-color: var(--groovy-line) !important;
  border-radius: 0 !important;
  background: var(--groovy-paper) !important;
  box-shadow: none !important;
}

.groovy-related-page figure img {
  border-radius: 0;
}

.groovy-related-page .p-breadcrumb {
  color: var(--groovy-muted);
  background: var(--groovy-paper);
}

@media (max-width: 640px) {
  .groovy-related-page .c-pageTitle {
    padding: 58px 18px;
  }

  .groovy-related-page #content {
    padding-top: 64px;
    padding-bottom: 88px;
  }
}

/* Thought page quote block contrast fix. */
.groovy-related-page.postid-198 .post_content .is-style-balloon_box {
  color: var(--groovy-white) !important;
  background: var(--groovy-moss) !important;
  line-height: 1.85;
}

.groovy-related-page.postid-198 .post_content .is-style-balloon_box::before {
  border-top-color: var(--groovy-moss) !important;
}