@charset "UTF-8";

/* All renewed post detail pages ------------------------ */
#body_wrap.single-post #main_content {
  color: var(--tm-text);
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
}

/* SWELLの .l-content の上余白（SP 2em／600px以上 4em）を投稿ページだけ詰める */
#body_wrap.single-post #content.l-content {
  padding-top: 2em;
}

#body_wrap.single-post .l-mainContent__inner {
  width: min(100%, 920px);
  margin-inline: auto;
}

#body_wrap.single-post .p-articleFoot {
  display: none;
}

#body_wrap.single-post .p-articleHead {
  margin-bottom: 18px;
}

#body_wrap.single-post .c-postTitle__ttl {
  margin: 0;
  color: #111111;
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

#body_wrap.single-post .p-articleHead > .c-postTitle__date {
  display: none;
}

#body_wrap.single-post .p-articleMetas.-top {
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 32px;
}

#body_wrap.single-post .c-categoryList {
  gap: 8px;
}

#body_wrap.single-post .c-categoryList::before {
  content: none;
}

#body_wrap.single-post .c-categoryList__link {
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--tm-green);
  color: #ffffff;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

#body_wrap.single-post .c-postTimes {
  color: #888888;
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
}

#body_wrap.single-post .p-articleThumb {
  margin: 0 auto 48px;
  overflow: hidden;
  border-radius: 10px;
}

#body_wrap.single-post .post_content {
  color: var(--tm-text);
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.03em;
}

#body_wrap.single-post .post_content :is(p, li, dd, dt, table) {
  font-family: inherit;
}

/* 本文が500なので、太字はさらに一段上げて差をつける */
#body_wrap.single-post .post_content :is(strong, b) {
  font-weight: 700;
}

/* Remove legacy inline font declarations from old article blocks. */
#body_wrap.single-post .post_content [style*="font-family"] {
  font-family: inherit !important;
}


#body_wrap.single-post .post_content > p,
#body_wrap.single-post .post_content > ul,
#body_wrap.single-post .post_content > ol,
#body_wrap.single-post .post_content > blockquote,
#body_wrap.single-post .post_content > .wp-block-group {
  margin-top: 0;
  margin-bottom: 28px;
}

#body_wrap.single-post .post_content h2 {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 61px;
  align-items: center;
  margin: 64px 0 28px !important;
  padding: 6px 14px !important;
  border: 0 !important;
  border-bottom: 2px solid var(--tm-main) !important;
  border-radius: 0;
  background: #fff1e6 !important;
  box-shadow: none;
  color: #111111;
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-align: left;
}

#body_wrap.single-post .post_content h3 {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  align-items: center;
  margin: 48px 0 22px !important;
  padding: 6px 20px 6px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tm-main) !important;
  border-left: 4px solid var(--tm-main) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: #111111;
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: left;
}

#body_wrap.single-post .post_content h4 {
  box-sizing: border-box;
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  margin: 38px 0 18px !important;
  padding: 6px !important;
  border: 0 !important;
  border-bottom: 2px solid #d9d9d9 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: #111111;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: left;
}

#body_wrap.single-post .post_content :is(h2, h3, h4)::before,
#body_wrap.single-post .post_content :is(h2, h3, h4)::after {
  content: none !important;
}

#body_wrap.single-post .post_content a:not(.swell-block-button__link) {
  color: var(--tm-text);
  text-underline-offset: 0.18em;
}

#body_wrap.single-post .post_content a:not(.swell-block-button__link):hover {
  color: var(--tm-main);
}


#body_wrap.single-post .post_content blockquote {
  padding: 24px 28px;
  border: 0;
  border-left: 4px solid var(--tm-main);
  background: #fff1e6;
}

/* SWELLの「シンプル」引用スタイルが付ける二重線を消す（設定に「なし」が無いため） */
#body_wrap.single-post .post_content blockquote::before {
  content: none;
}

#body_wrap.single-post .post_content .p-toc {
  margin: 40px 0 56px;
  border: 0;
  border-radius: 10px;
  background: #c7c7c726;
}

/* Shared SWELL step design used by training and long-form articles. */
#body_wrap.single-post .post_content .swell-block-step {
  margin: 44px 0;
}

#body_wrap.single-post .post_content .swell-block-step__item {
  padding-bottom: 30px;
}

#body_wrap.single-post .post_content .swell-block-step__number {
  background: var(--tm-main) !important;
  color: #ffffff;
  font-family: "Noto Serif JP", serif;
}

#body_wrap.single-post .post_content .swell-block-step__title {
  color: #111111;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.7;
}

#body_wrap.single-post .post_content .swell-block-step__body {
  margin-top: 12px;
  padding: 18px 20px;
  border-radius: 8px;
  background: #fffaf6;
}

#body_wrap.single-post .post_content .swell-block-step__body > :last-child {
  margin-bottom: 0;
}

#body_wrap.single-post .post_content :is(.is-style-icon_announce, .is-style-icon_good, .is-style-icon_book) {
  border-radius: 8px;
  background-color: #fffaf6;
}

/* Renewed article buttons. */
#body_wrap.single-post #main_content .post_content .swell-block-button {
  --the-width: 100% !important;
  display: flex;
  width: 360px;
  max-width: 100%;
  justify-content: center;
  margin: 40px auto;
  text-align: center;
}

#body_wrap.single-post #main_content .post_content .swell-block-button .swell-block-button__link {
  position: relative;
  display: inline-flex;
  width: 360px !important;
  max-width: 100% !important;
  min-height: 68px;
  align-items: center;
  justify-content: center;
  padding: 14px 48px 14px 36px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--tm-main) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#body_wrap.single-post #main_content .post_content .swell-block-button .swell-block-button__link::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 17px;
  height: 17px;
  background: url("../img/common/contact-arrow.svg") center / contain no-repeat;
  transform: translateY(-50%);
}

#body_wrap.single-post #main_content .post_content .swell-block-button .swell-block-button__link:hover {
  background: var(--tm-main-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

#body_wrap.single-post #main_content .post_content .swell-block-button .swell-block-button__link:focus-visible {
  outline: 3px solid var(--tm-green);
  outline-offset: 4px;
}

/* Hide the legacy category navigation on renewed post details. */
#body_wrap.single-post .wp-block-categories-list.c-listMenu.wp-block-categories-taxonomy-category.wp-block-categories,
#body_wrap.single-post .p-blogParts.post_content[data-partsid="1684"],
#body_wrap.single-post .p-blogParts.post_content[data-partsid="1700"] {
  display: none;
}

/* Article link colors must not leak into the renewed footer blog part. */
#body_wrap.single-post .tm_footer a {
  color: var(--tm-text) !important;
  text-decoration: none;
}

#body_wrap.single-post .tm_footer a:hover {
  color: var(--tm-main) !important;
}

@media (max-width: 640px) {
  #body_wrap.single-post #content.l-content {
    padding-top: 1em;
  }

  #body_wrap.single-post .l-mainContent__inner {
    width: 100%;
  }

  #body_wrap.single-post .c-postTitle__ttl {
    font-size: 20px;
    line-height: 1.55;
    font-weight: 600;
  }

  #body_wrap.single-post .p-articleMetas.-top {
    margin-bottom: 24px;
  }

  #body_wrap.single-post .p-articleThumb {
    margin-bottom: 34px;
    border-radius: 8px;
  }

  #body_wrap.single-post .post_content {
    font-size: 15px;
    line-height: 1.9;
  }

  #body_wrap.single-post .post_content h2 {
    min-height: 50px;
    margin: 48px 0 22px !important;
    padding: 8px !important;
    font-size: 20px;
    line-height: 1.55;
  }

  #body_wrap.single-post .post_content h3 {
    margin: 38px 0 18px !important;
    padding: 5px 10px !important;
    font-size: 18px;
    line-height: 1.65;
  }

  #body_wrap.single-post .post_content h4 {
    margin: 30px 0 16px !important;
    padding: 4px 6px !important;
    font-size: 17px;
    line-height: 1.7;
  }

  #body_wrap.single-post .post_content blockquote {
    padding: 18px 20px;
  }

  #body_wrap.single-post .post_content .swell-block-step {
    margin: 34px 0;
  }

  #body_wrap.single-post .post_content .swell-block-step__item {
    padding-bottom: 24px;
  }

  #body_wrap.single-post .post_content .swell-block-step__title {
    font-size: 16px;
  }

  #body_wrap.single-post .post_content .swell-block-step__body {
    padding: 15px 16px;
  }

  #body_wrap.single-post #main_content .post_content .swell-block-button {
    width: 320px;
    margin: 32px auto;
  }

  #body_wrap.single-post #main_content .post_content .swell-block-button .swell-block-button__link {
    width: 320px !important;
    min-height: 56px;
    padding: 12px 42px 12px 28px;
    font-size: 15px;
  }
}