.blog-body { max-width: 680px; margin: 48px auto 0; color: var(--kf-ink); font: 400 18px/1.65 var(--kf-font); }
.blog-body h2 { font: 700 24px/1.25 var(--kf-font-display); letter-spacing: -0.01em; margin: 40px 0 12px; }
.blog-body p { margin: 0 0 16px; color: var(--kf-ink-2); }
.blog-body ul { margin: 0 0 16px; padding-left: 22px; color: var(--kf-ink-2); }
.blog-body li { margin: 0 0 8px; }
.blog-body a { color: var(--kf-ink); text-decoration: underline; text-underline-offset: 3px; }
.blog-body .blog-note { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--kf-hairline); font: var(--kf-text-footnote); }

.pref { max-width: 680px; margin: 48px auto 0; padding: 24px 0; border-top: 1px solid var(--kf-hairline);
  border-bottom: 1px solid var(--kf-hairline); text-align: center; }
.pref p { margin: 0 0 14px; color: var(--kf-ink-2); font: 400 16px/1.5 var(--kf-font); }
.pref-btn { display: inline-flex; max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; line-height: 1.3; }

.blog-more { max-width: 680px; margin: 56px auto 72px; }
.blog-more h2 { font: var(--kf-text-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-ink-2); margin: 0 0 8px; }
.blog-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kf-hairline); }
.blog-index .blog-list { max-width: 680px; margin: 48px auto 0; }
.blog-index .pref { margin-bottom: 72px; }
.blog-list li { border-bottom: 1px solid var(--kf-hairline); }
.blog-list a { display: block; padding: 18px 0; color: inherit; text-decoration: none; }
.blog-list a:hover { background: var(--kf-accent-soft); }
.bl-t { display: block; font: 700 20px/1.3 var(--kf-font-display); color: var(--kf-ink); }
.bl-d { display: block; margin-top: 6px; font: 400 16px/1.5 var(--kf-font); color: var(--kf-ink-2); }
.bl-date { display: block; margin-top: 8px; font: var(--kf-text-footnote); color: var(--kf-ink-3); }