/* DESIGN-mastercard.md colors and restrained depth; tighter corners per user preference. */
:root {
  color-scheme: light;
  --canvas: #f3f0ee;
  --paper: #fcfbfa;
  --white: #ffffff;
  --ink: #141413;
  --button-primary: #c7457c;
  --button-primary-hover: #ab3568;
  --muted: #696969;
  --line: #ded9d4;
  --heading-rainbow: linear-gradient(90deg, #df5661 0%, #e58a3b 20%, #d6b342 40%, #49a36e 60%, #488fd1 80%, #9467b7 100%);
  --radius-panel: 12px;
  --radius-small: 4px;
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 16px; font-weight: 450; line-height: 1.8; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #3860be; outline-offset: 5px; }
::selection { background: #f8d5bf; color: var(--ink); }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 10; padding: 10px 20px; border-radius: var(--radius-small); color: var(--white); background: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-header { max-width: 1280px; margin: 24px auto 32px; min-height: 96px; padding: 16px 32px 16px 24px; display: flex; align-items: center; gap: 32px; border-radius: var(--radius-panel); background: var(--white); box-shadow: 0 4px 24px rgb(0 0 0 / 4%); }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-logo { width: 56px; height: 56px; object-fit: contain; }
.brand-name { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.04em; }
.brand-caption { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 0 auto; }
.main-nav a { display: flex; align-items: center; min-height: 48px; padding: 4px 2px; font-size: 14px; font-weight: 600; white-space: nowrap; text-underline-offset: 6px; }
.main-nav a:hover { text-decoration: underline; }
.header-illustration { --header-art: url("header-illustration.png"); display: none; pointer-events: none; }
.header-illustration-alt { --header-art: url("header-illustration-2.png"); }
.header-illustration-third { --header-art: url("header-illustration-3.png"); }
.site-header a:focus-visible { outline-offset: 3px; }
@media (min-width: 1101px) {
  .site-header { position: relative; padding-right: 296px; overflow: hidden; }
  .brand, .main-nav { position: relative; z-index: 1; }
  .header-illustration {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    width: 256px;
    background-image: linear-gradient(90deg, #fff 0, rgb(255 255 255 / 0%) 24%), var(--header-art);
    background-size: 100% 100%, 190px auto;
    background-position: center, right 12px top 0;
    background-repeat: no-repeat;
  }
}
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 292px; align-items: start; gap: 24px; max-width: 1248px; margin: 0 auto 64px; }
main { min-width: 0; }
.lined-heading { position: relative; display: block; width: 100%; border: 0; padding: 0 0 10px 25px; text-align: left; }
.lined-heading::before { position: absolute; content: ""; bottom: 0; left: 0; width: 15px; height: 15px; background: #df5661; clip-path: polygon(100% 0, 0 100%, 100% 100%); pointer-events: none; }
.lined-heading::after { position: absolute; content: ""; bottom: 0; left: 10px; right: 0; height: 3px; background: var(--heading-rainbow); pointer-events: none; }
.latest-posts { margin-bottom: 12px; padding: 14px 16px; border-radius: var(--radius-panel); background: var(--paper); font-size: 15px; line-height: 1.5; }
.latest-stories { margin-top: 12px; }
.latest-posts-heading { position: relative; margin-bottom: 4px; }
.latest-posts-heading h2 { padding-right: 80px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.latest-posts-heading small { position: absolute; top: 3px; right: 0; color: var(--muted); font-size: 12px; text-align: right; }
.latest-post-list { margin: 0; padding: 0; list-style: none; }
.latest-post-row { border-bottom: 1px solid var(--line); }
.latest-post-row:last-child { border-bottom: 0; }
.latest-post-link { display: grid; grid-template-columns: 90px 62px minmax(0, 1fr) 12px; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 0; color: inherit; }
.latest-story-link { grid-template-columns: 90px minmax(0, 1fr) 12px; }
.latest-post-time { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.latest-post-region { display: inline-flex; width: max-content; max-width: 100%; padding: 2px 8px; border-radius: var(--radius-small); background: #ece8e3; font-size: 13px; font-weight: 500; }
.latest-post-content { min-width: 0; }
.latest-post-title { display: block; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.latest-post-link:hover .latest-post-title { color: #3860be; text-decoration: underline; }
.latest-post-link:focus-visible { outline: 2px solid #3860be; outline-offset: 2px; }
.latest-post-arrow { color: var(--muted); }
.latest-post-empty { padding: 12px 0 6px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .latest-posts-heading h2 { font-size: 20px; }
}
@media (max-width: 540px) {
  .latest-posts { padding: 12px; }
  .latest-post-link { grid-template-columns: minmax(0, 1fr) auto 12px; gap: 2px 8px; }
  .latest-story-link { grid-template-columns: minmax(0, 1fr) 12px; }
  .latest-story-link .latest-post-content { grid-column: 1; }
  .latest-story-link .latest-post-arrow { grid-column: 2; }
  .latest-post-time { grid-column: 1; grid-row: 1; }
  .latest-post-region { grid-column: 2; grid-row: 1; }
  .latest-post-content { grid-column: 1 / 3; grid-row: 2; }
  .latest-post-arrow { grid-column: 3; grid-row: 1 / 3; }
}
.status-label { flex-shrink: 0; padding: 2px 10px; border: 1px solid #cbc5bd; border-radius: var(--radius-small); color: #555; font-size: 12px; line-height: 1.7; }
.boards { padding: 32px 32px 24px; border-radius: var(--radius-panel); background: var(--paper); }
#boards { padding: 14px 16px 24px; }
@media (max-width: 540px) {
  #boards { padding: 12px 12px 24px; }
}
.section-heading { position: relative; }
.section-heading h1 { padding-right: 160px; font-size: 28px; font-weight: 600; line-height: 1.6; letter-spacing: -.02em; }
#boards-title { font-size: 22px; }
@media (max-width: 767px) {
  #boards-title { font-size: 20px; }
}
#boards .section-heading h1 { padding-right: 116px; }
.new-post-picker { position: absolute; top: 0; right: 0; z-index: 3; }
.new-post-button { display: inline-flex; align-items: center; justify-content: center; width: 104px; min-height: 34px; padding: 0 10px; border: 1px solid var(--button-primary); border-radius: var(--radius-small); background: var(--button-primary); color: var(--white); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; list-style: none; cursor: pointer; }
.new-post-button::-webkit-details-marker { display: none; }
.new-post-button:hover, .new-post-picker[open] .new-post-button { border-color: var(--button-primary-hover); background: var(--button-primary-hover); }
.new-post-button:focus-visible { outline: 3px solid #3860be; outline-offset: 3px; }
.new-post-picker-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(264px, calc(100vw - 56px)); padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: 0 12px 32px rgb(0 0 0 / 14%); }
.new-post-picker-panel label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.new-post-picker-panel select { display: block; width: 100%; min-height: 44px; padding: 8px; border: 1px solid #bab2a8; background: var(--white); color: var(--ink); font-size: 16px; }
.new-post-picker-panel .button { width: 100%; margin-top: 12px; }
@media (max-width: 540px) {
  #boards .section-heading h1 { padding-right: 108px; }
  .new-post-button { width: 100px; min-height: 32px; font-size: 12px; }
}
.section-description { margin-top: 12px; color: var(--muted); font-size: 14px; }
.region-list { margin-top: 12px; }
.region { padding: 15px 0; }
.region h2 { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 6px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.region h2::after { content: ""; flex: 1; min-width: 0; height: 1px; background: var(--line); }
.prefectures { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 0; column-gap: 12px; padding: 0; margin: 0; list-style: none; }
.prefectures li { font-size: 16px; white-space: nowrap; line-height: 1.8; }
.prefectures a { display: flex; align-items: center; min-height: 31px; color: #3860be; text-underline-offset: 5px; }
.prefectures a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .region { padding: 11px 0 16px; }
  .prefectures { display: flex; flex-wrap: wrap; gap: 8px; }
  .prefectures a { justify-content: center; min-width: 86px; min-height: 36px; padding: 4px 11px; border: 1px solid #e6dfda; border-radius: 5px; background: #f7f3f0; }
  .prefectures a:hover { background: #f9eef3; }
}
.availability-note { border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font-size: 12px; }
.sidebar { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.about { padding: 28px 24px 26px; border: 1px solid #ddd7d0; border-radius: var(--radius-panel); text-align: center; }
.community-logo { margin: 0 auto 20px; object-fit: contain; }
.about h2 { font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.about p { margin-top: 12px; color: #555; font-size: 14px; line-height: 1.95; }
.sidebar-news { min-width: 0; padding: 14px 16px 24px; border-radius: var(--radius-panel); background: var(--paper); }
.sidebar-news h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.sidebar-news-list { margin: 16px 0 0; padding: 0; list-style: none; }
.sidebar-news-item + .sidebar-news-item { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.sidebar-news .news-date { display: inline-block; font-variant-numeric: tabular-nums; }
.sidebar-news-body { margin-top: 10px; color: #555; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.sidebar-news-empty { margin-top: 16px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.about-signature { display: block; margin-top: 24px; color: var(--muted); font: 10px/1.5 Arial, sans-serif; letter-spacing: .08em; }
.guide { padding: 14px 16px 28px; border-radius: var(--radius-panel); background: var(--paper); }
@media (max-width: 540px) {
  .sidebar-news { padding: 12px 12px 24px; }
  .guide { padding: 12px 12px 28px; }
}
.guide h2 { font-size: 20px; font-weight: 600; }
.guide-copy { margin: 20px 0 0; padding: 0; list-style: none; color: #555; font-size: 14px; line-height: 1.9; }
.guide-copy li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 12px; padding-bottom: 18px; }
.guide-copy li + li { border-top: 1px solid #e4dfd9; padding-top: 18px; }
.guide-copy li:last-child { padding-bottom: 0; }
.guide-index { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #e0d9d1; border-radius: var(--radius-small); background: var(--canvas); color: #555; font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.sidebar-menu { min-width: 0; padding: 14px 16px 20px; border-radius: var(--radius-panel); background: var(--paper); }
.sidebar-menu h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.sidebar-menu-links { margin: 12px 0 0; padding: 0; list-style: none; }
.sidebar-menu-links li + li { border-top: 1px solid var(--line); }
.sidebar-menu-links a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px; color: var(--ink); font-size: 14px; font-weight: 600; text-underline-offset: 4px; }
.sidebar-menu-links .sidebar-menu-article { padding-top: 10px; padding-bottom: 10px; line-height: 1.6; }
.sidebar-menu-links .arrow { display: none; }
.sidebar-menu-links a::after { content: ""; flex: none; width: 5px; height: 5px; margin: 0 8px 0 auto; border-top: 1.5px solid #3860be; border-right: 1.5px solid #3860be; transform: rotate(45deg); }
.sidebar-menu-links a:hover { color: #3860be; background: #f5f2ef; }
@media (max-width: 540px) {
  .sidebar-menu { padding: 12px 12px 20px; }
}
.sidebar-note { padding: 0 24px; color: var(--muted); font-size: 14px; line-height: 2; }
.site-footer { padding: 32px 40px; background: var(--ink); color: var(--canvas); }
.footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 24px 40px; max-width: 1200px; margin: 0 auto; }
.footer-brand { display: flex; align-items: center; gap: 16px; margin-right: auto; }
.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.footer-name { font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
.footer-brand > span:last-child { font-size: 12px; color: #d1cdc7; }
.footer-inner a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; text-underline-offset: 5px; }
.footer-inner a:hover { text-decoration: underline; }
.footer-inner small { color: #bbb7b2; font-size: 12px; }
/* Shared bulletin board and administration UI. */
input, select, textarea, button { font: inherit; }
button, input, select, textarea { border-radius: var(--radius-small); }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #3860be; outline-offset: 3px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1px solid var(--button-primary); border-radius: var(--radius-small); color: var(--white); background: var(--button-primary); font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; }
.button:hover { background: var(--button-primary-hover); border-color: var(--button-primary-hover); }
.button-secondary { border-color: #bab2a8; background: var(--white); color: var(--ink); }
.button-secondary:hover { border-color: var(--ink); background: #ebe6e0; }
.button-danger { border-color: #913e39; background: #913e39; color: var(--canvas); }
.button-danger:hover { border-color: #74312d; background: #74312d; }
.button:disabled { opacity: .5; cursor: default; }
.button.is-submitting:disabled { position: relative; opacity: 1; cursor: progress; }
.button.is-submitting .submit-original-label { visibility: hidden; }
.button.is-submitting .submit-sending-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.submit-feedback-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.text-link { color: #3860be; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.boards.board-panel.board-page { padding-top: 10px; }
.boards.board-panel.contact-page { padding-top: 10px; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: 13px; }
.board-page .breadcrumb { margin-bottom: 2px; }
.contact-page .breadcrumb { margin-bottom: 2px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; text-underline-offset: 4px; }
.board-page .breadcrumb a { min-height: 28px; }
.contact-page .breadcrumb a { min-height: 28px; }
.breadcrumb a:hover { text-decoration: underline; }
.board-title { font-size: 28px; font-weight: 600; line-height: 1.6; letter-spacing: -.02em; }
.board-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.board-toolbar .section-description { flex: 1 1 220px; margin: 0; }
.filter-form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 24px 0; padding: 20px; border-radius: var(--radius-small); background: #f0ece7; }
.filter-form .form-field { flex: 1 1 220px; }
.filter-form .text-link { padding: 10px 0; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.post-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.form-field { min-width: 0; }
.form-field-wide { grid-column: 1 / -1; }
.form-trap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.form-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.form-field input:not([type="checkbox"]):not([type="hidden"]), .form-field select, .form-field textarea { display: block; width: 100%; min-height: 46px; min-width: 0; padding: 10px 12px; border: 1px solid #bab2a8; background: var(--white); color: var(--ink); font-size: 16px; line-height: 1.6; }
.form-field textarea { resize: vertical; }
.board-purpose-field select { max-width: 320px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #857e76; }
.post-search.boards { container: post-search / inline-size; margin-top: 12px; padding: 14px 16px 22px; }
.post-search-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.post-search-form { display: grid; grid-template-columns: 122px 122px 150px minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 20px; }
.post-search-keyword-action { display: contents; }
.post-search-form .form-field input:not([type="checkbox"]):not([type="hidden"]), .post-search-form .form-field select { height: 46px; padding: 8px 10px; }
.post-search-form .form-field select { padding-left: 6px; padding-right: 6px; }
.post-search-submit.button { min-height: 46px; height: 46px; gap: 6px; padding: 8px 15px; white-space: nowrap; }
.post-search-submit svg { flex: none; width: 16px; height: 16px; }
.board-toolbar.board-search-toolbar { display: flow-root; }
.board-search-toolbar .section-description { float: left; display: flex; align-items: center; width: calc(100% - 200px); min-height: 46px; margin-right: 16px; }
.board-search-toolbar > .board-compose { float: left; min-height: 46px; margin-right: 8px; padding: 8px 14px; }
.board-search > summary { width: max-content; list-style: none; cursor: pointer; }
.board-search > summary::-webkit-details-marker { display: none; }
.board-search-button.button { border-color: #1c3557; background: #1c3557; color: var(--white); }
.board-search-button.button:hover { border-color: #142742; background: #142742; }
.board-search-button:focus-visible { outline: 3px solid #3860be; outline-offset: 3px; }
.board-filter-form { clear: both; display: grid; grid-template-columns: 140px 140px minmax(0, 1fr) auto; align-items: end; margin-bottom: 0; }
.board-filter-purpose select { max-width: 140px; }
.board-filter-form .board-filter-reset { display: inline-flex; align-items: center; grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: 0; font-size: 14px; }
.post-search-help { margin-top: 12px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.post-search-results { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.post-search-results h3 { margin-bottom: 4px; font-size: 16px; font-weight: 600; }
.post-search-list { margin: 0; padding: 0; list-style: none; }
.post-search-result { min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.post-search-result:last-child { border-bottom: 0; }
.post-search-subject { display: block; margin: 0; color: #3860be; font-size: 16px; font-weight: 600; line-height: 1.65; overflow-wrap: anywhere; text-underline-offset: 5px; }
.post-search-subject a { display: block; }
a.post-search-subject:hover, .post-search-subject a:hover { text-decoration: underline; }
.post-search-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.post-search-meta > * { min-width: 0; }
.post-search-meta time { font-variant-numeric: tabular-nums; }
.post-search-empty { padding-top: 12px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
@container post-search (max-width: 570px) {
  .post-search-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
  .post-search-keyword-action { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
  .post-search-submit.button { padding-right: 12px; padding-left: 12px; }
}
@container post-search (min-width: 571px) and (max-width: 670px) {
  .post-search-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
  .post-search-keyword-action { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
  .post-search-submit.button { padding-right: 11px; padding-left: 11px; }
}
@media (max-width: 767px) {
  .post-search.boards { padding: 14px 16px 18px; }
  .post-search-title { font-size: 20px; }
}
@media (max-width: 540px) {
  .post-search.boards { padding: 12px 12px 18px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) and (min-width: 768px), (max-width: 767px) {
    .post-search-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
    .post-search-keyword-action { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
    .post-search-submit.button { padding-right: 12px; padding-left: 12px; }
  }
}
.form-help { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.required-label, .optional-label { display: inline-block; margin-left: 6px; color: #7a7065; font-size: 11px; font-weight: 500; }
.required-label { color: #9a3a0a; }
.input-unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.input-unit > span { color: var(--muted); font-size: 14px; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.form-grid .form-actions { margin-top: 0; }
.confirmation-field { display: flex; align-items: flex-start; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--canvas); font-size: 14px; line-height: 1.8; cursor: pointer; }
.confirmation-field input { flex: 0 0 auto; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--ink); }
.notice { margin-top: 24px; padding: 16px 18px; border: 1px solid #c7cec1; border-radius: var(--radius-small); background: #eef1e9; color: #3f5340; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.notice-error { border-color: #e0bbb1; background: #fbefea; color: #913e39; }
.notice code { overflow-wrap: anywhere; }
.result-count { margin: 16px 0 10px; color: var(--muted); font-size: 12px; }
.post-list { margin-top: 16px; border-top: 1px solid var(--line); }
.post-row { padding: 22px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.post-subject { font-size: 18px; font-weight: 600; line-height: 1.6; }
.post-subject a { display: block; padding: 4px 0; color: #3860be; text-underline-offset: 5px; }
.post-subject a:hover { text-decoration: underline; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.post-meta time { font-variant-numeric: tabular-nums; }
.post-detail { margin-top: 24px; }
.detail-subject { font-size: 24px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.post-profile { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 16px 0; margin: 20px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.post-profile > div { display: flex; align-items: baseline; gap: 10px; }
.post-profile dt { color: var(--muted); }
.post-profile dd { margin: 0; font-weight: 600; }
.post-body { margin: 24px 0; font-size: 15px; line-height: 2; overflow-wrap: anywhere; }
/* Public posts share the top page's warm surfaces without changing admin rows. */
.board-post-list { display: grid; gap: 14px; margin-top: 16px; }
.board-post-card { min-width: 0; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--paper); }
.board-post-list .board-post-card { margin-top: 0; }
.board-post-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  border-bottom: 1px solid #e6d9df;
  background: #f4e8ee;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 2px 4px rgb(80 42 61 / 8%);
}
.board-post-heading-actions { grid-template-columns: minmax(0, 1fr) auto; }
.board-post-subject { min-width: 0; align-self: center; padding: 6px 12px; font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.board-post-subject a { display: block; text-underline-offset: 5px; }
.board-post-subject a:hover { text-decoration: underline; }
.board-post-heading-actions .board-post-subject a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board-post-content { padding: 8px 12px 12px; }
.board-post-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 14px; font-size: 14px; line-height: 1.65; }
.board-post-meta p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.board-post-actions { display: flex; align-items: center; gap: 6px; }
.board-post-heading .board-post-actions { grid-column: 2; grid-row: 1; align-self: center; padding: 6px 12px 6px 0; }
.board-post-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 52px; min-height: 32px; padding: 5px 7px; border: 1px solid transparent; border-radius: var(--radius-small); font-size: 12px; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.board-post-actions .board-post-action-delete { background: #fbefea; color: #913e39; }
.board-post-actions .board-post-action-report { background: #edf2fa; color: #3860be; }
.board-post-actions .board-post-action-delete:hover { background: #f2ddd5; }
.board-post-actions .board-post-action-report:hover { background: #dce6f6; }
.board-post-actions a:focus-visible { outline: 3px solid #3860be; outline-offset: 3px; }
.board-post-actions svg { width: 14px; height: 14px; flex: none; }
.board-post-label { color: var(--muted); }
.board-post-author, .board-post-author-text { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.board-post-author { color: #3860be; text-decoration: underline; text-underline-offset: 4px; }
.board-post-author:hover { color: #294787; }
.board-post-meta time { font-variant-numeric: tabular-nums; }
.board-post-date { color: var(--muted); white-space: nowrap; }
.board-post-purpose, .board-purpose-badge { align-items: center; justify-content: center; flex: 0 0 auto; padding: 4px 10px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.board-post-purpose { display: inline-flex; }
.board-purpose-meet { border-color: #edb893; background: #fae4d6; color: #7d3c16; }
.board-purpose-partner { border-color: #e7a7c1; background: #f8dce8; color: #892d56; }
.board-purpose-friend { border-color: #8ed0c9; background: #ddf1ee; color: #17675f; }
.board-purpose-mail { border-color: #a9c4ec; background: #e4ecfa; color: #2c527f; }
.board-purpose-hobby { border-color: #c9b5e8; background: #eee5fa; color: #634092; }
.board-purpose-other { border-color: #d2c6ba; background: #ede8e3; color: #5c5147; }
.board-post-profile { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 6px 0 0; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.65; }
.board-post-profile > div { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.board-post-profile dt { color: var(--muted); }
.board-post-profile dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.board-post-body { margin: 9px 0 0; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.board-view-switch { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; width: 166px; height: 38px; margin: 18px 0 0 auto; padding: 3px; border: 1px solid #bdc8d3; border-radius: 999px; background: #e9eef3; box-shadow: inset 0 1px 2px rgb(22 46 73 / 10%); }
.board-view-switch::before { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); border-radius: 999px; background: #1c3557; box-shadow: 0 2px 5px rgb(20 39 66 / 22%); content: ""; transform: translateX(0); transition: transform .18s ease; }
.board-view-switch.is-detail::before { transform: translateX(100%); }
.board-view-switch a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; margin: -6px 0; padding: 5px 7px; color: #4b5e73; font-size: 12px; font-weight: 700; white-space: nowrap; }
.board-view-switch a[aria-current="page"] { color: var(--white); }
.board-view-switch a:not([aria-current="page"]):hover { color: #1c3557; }
@media (prefers-reduced-motion: reduce) {
  .board-view-switch::before { transition: none; }
}
.board-compact-list { margin: 12px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 5px; list-style: none; overflow: hidden; }
.board-compact-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 270px; align-items: center; gap: 8px 20px; min-height: 58px; padding: 7px 14px; border-bottom: 1px solid #e8e0df; background: var(--white); }
.board-compact-row:nth-child(odd) { background: #f4e8ee; }
.board-compact-row:last-child { border-bottom: 0; }
.board-compact-subject { min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.board-compact-subject a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; text-underline-offset: 4px; }
.board-compact-title { min-width: 0; }
.board-compact-subject a:hover { color: #a92d65; text-decoration: underline; }
.board-compact-person { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.board-compact-profile { color: #514e4b; }
.board-compact-profile > span + span::before { content: ' · '; }
.board-compact-author { color: var(--muted); font-size: 12px; }
.board-compact-author a { color: #3860be; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.board-compact-author a:hover { color: #294787; }
.board-compact-date { display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: #514e4b; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.board-purpose-badge { display: inline-flex; }
.board-compact-new { flex: 0 0 auto; color: #c7457c; font-size: 11px; font-style: italic; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
@media (max-width: 1100px) {
  .board-compact-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 8px 12px; }
  .board-compact-subject { grid-column: 1 / -1; }
  .board-compact-person { grid-column: 1; }
  .board-compact-date { grid-column: 2; }
}
@media (max-width: 767px) {
  .board-view-switch { margin-top: 16px; }
  .board-compact-list { margin: 12px -10px 0; border: 0; border-radius: 0; }
  .board-compact-row { grid-template-columns: minmax(0, 1fr); gap: 2px; min-height: 0; padding: 14px 4px 12px; border-bottom: 1px solid var(--line); }
  .board-compact-row, .board-compact-row:nth-child(odd) { background: transparent; }
  .board-compact-date { grid-column: 1; grid-row: 1; justify-content: flex-start; gap: 9px; font-size: 12px; }
  .board-compact-subject { grid-column: 1; grid-row: 2; color: var(--button-primary); font-size: 18px; font-weight: 700; }
  .board-compact-person { grid-column: 1; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 13px; }
  .board-compact-author { order: -1; color: var(--ink); font-size: 13px; }
  .board-compact-author a { color: var(--ink); }
  .board-compact-author-label { display: none; }
  .board-compact-profile { color: #5d5956; font-size: 12px; white-space: nowrap; }
  .board-compact-profile > span + span::before { content: '/'; }
}
@media (max-width: 900px) {
  .board-post-heading-actions .board-post-subject { --subject-max: 15px; display: flex; align-items: center; padding: 6px 8px 6px 12px; }
  .board-post-heading-actions .board-post-subject-long { --subject-max: 14px; }
  .board-post-heading-actions .board-post-subject a { width: 100%; font-size: var(--subject-max); }
  .board-post-heading .board-post-actions { gap: 4px; padding: 4px 8px 4px 0; }
  .board-post-actions a { gap: 3px; min-width: 0; min-height: 28px; padding: 3px 5px; font-size: 12px; }
}
@media (min-width: 901px) and (pointer: coarse) { .board-post-actions a { min-height: 44px; min-width: 44px; } }
/* The 1–80 character classes match the posting limit and avoid inline styles. */
.board-post-length-1 { --subject-length: 1; }
.board-post-length-2 { --subject-length: 2; }
.board-post-length-3 { --subject-length: 3; }
.board-post-length-4 { --subject-length: 4; }
.board-post-length-5 { --subject-length: 5; }
.board-post-length-6 { --subject-length: 6; }
.board-post-length-7 { --subject-length: 7; }
.board-post-length-8 { --subject-length: 8; }
.board-post-length-9 { --subject-length: 9; }
.board-post-length-10 { --subject-length: 10; }
.board-post-length-11 { --subject-length: 11; }
.board-post-length-12 { --subject-length: 12; }
.board-post-length-13 { --subject-length: 13; }
.board-post-length-14 { --subject-length: 14; }
.board-post-length-15 { --subject-length: 15; }
.board-post-length-16 { --subject-length: 16; }
.board-post-length-17 { --subject-length: 17; }
.board-post-length-18 { --subject-length: 18; }
.board-post-length-19 { --subject-length: 19; }
.board-post-length-20 { --subject-length: 20; }
.board-post-length-21 { --subject-length: 21; }
.board-post-length-22 { --subject-length: 22; }
.board-post-length-23 { --subject-length: 23; }
.board-post-length-24 { --subject-length: 24; }
.board-post-length-25 { --subject-length: 25; }
.board-post-length-26 { --subject-length: 26; }
.board-post-length-27 { --subject-length: 27; }
.board-post-length-28 { --subject-length: 28; }
.board-post-length-29 { --subject-length: 29; }
.board-post-length-30 { --subject-length: 30; }
.board-post-length-31 { --subject-length: 31; }
.board-post-length-32 { --subject-length: 32; }
.board-post-length-33 { --subject-length: 33; }
.board-post-length-34 { --subject-length: 34; }
.board-post-length-35 { --subject-length: 35; }
.board-post-length-36 { --subject-length: 36; }
.board-post-length-37 { --subject-length: 37; }
.board-post-length-38 { --subject-length: 38; }
.board-post-length-39 { --subject-length: 39; }
.board-post-length-40 { --subject-length: 40; }
.board-post-length-41 { --subject-length: 41; }
.board-post-length-42 { --subject-length: 42; }
.board-post-length-43 { --subject-length: 43; }
.board-post-length-44 { --subject-length: 44; }
.board-post-length-45 { --subject-length: 45; }
.board-post-length-46 { --subject-length: 46; }
.board-post-length-47 { --subject-length: 47; }
.board-post-length-48 { --subject-length: 48; }
.board-post-length-49 { --subject-length: 49; }
.board-post-length-50 { --subject-length: 50; }
.board-post-length-51 { --subject-length: 51; }
.board-post-length-52 { --subject-length: 52; }
.board-post-length-53 { --subject-length: 53; }
.board-post-length-54 { --subject-length: 54; }
.board-post-length-55 { --subject-length: 55; }
.board-post-length-56 { --subject-length: 56; }
.board-post-length-57 { --subject-length: 57; }
.board-post-length-58 { --subject-length: 58; }
.board-post-length-59 { --subject-length: 59; }
.board-post-length-60 { --subject-length: 60; }
.board-post-length-61 { --subject-length: 61; }
.board-post-length-62 { --subject-length: 62; }
.board-post-length-63 { --subject-length: 63; }
.board-post-length-64 { --subject-length: 64; }
.board-post-length-65 { --subject-length: 65; }
.board-post-length-66 { --subject-length: 66; }
.board-post-length-67 { --subject-length: 67; }
.board-post-length-68 { --subject-length: 68; }
.board-post-length-69 { --subject-length: 69; }
.board-post-length-70 { --subject-length: 70; }
.board-post-length-71 { --subject-length: 71; }
.board-post-length-72 { --subject-length: 72; }
.board-post-length-73 { --subject-length: 73; }
.board-post-length-74 { --subject-length: 74; }
.board-post-length-75 { --subject-length: 75; }
.board-post-length-76 { --subject-length: 76; }
.board-post-length-77 { --subject-length: 77; }
.board-post-length-78 { --subject-length: 78; }
.board-post-length-79 { --subject-length: 79; }
.board-post-length-80 { --subject-length: 80; }
@supports (container-type: inline-size) and (font-size: 1cqi) {
  .board-post-heading-actions .board-post-subject { container-type: inline-size; }
  @media (max-width: 900px) {
    .board-post-heading-actions .board-post-subject a { font-size: clamp(12px, calc((100cqi - 1px) / var(--subject-length)), var(--subject-max)); }
  }
}
/* Detail titles remain readable in their heading without a duplicate title row. */
.board-post-detail .board-post-heading { display: flow-root; }
.board-post-detail .board-post-heading .board-post-actions { float: right; margin-left: 6px; }
.board-post-detail .board-post-subject { display: block; container-type: normal; }
.board-post-detail .board-post-subject a { display: inline; width: auto; overflow: visible; white-space: normal; text-overflow: clip; font-size: var(--subject-max, 16px); }
@media (min-width: 901px) {
  .board-post-detail .board-post-heading-actions .board-post-subject { padding-top: 11px; padding-bottom: 11px; }
}
@media (min-width: 901px) and (pointer: coarse) {
  .board-post-detail .board-post-heading-actions .board-post-subject { padding-top: 17px; padding-bottom: 17px; }
}
@media (max-width: 767px) {
  .board-post-subject { padding: 6px 12px; }
  .board-post-meta { gap: 3px 12px; }
  .board-post-profile { gap: 3px 12px; }
}
/* On phones, use full-width post rows with actions at the end of the subject band. */
@media (max-width: 767px) {
  .board-post-list { gap: 0; margin-right: -20px; margin-left: -20px; }
  .board-post-list .board-post-card {
    min-width: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--white);
  }
  .board-post-list .board-post-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-radius: 0;
  }
  .board-post-list .board-post-content { padding: 0; }
  .board-post-list .board-post-subject {
    grid-column: 1;
    grid-row: 1;
    display: block;
    container-type: normal;
    padding: 10px 8px 10px 13px;
    font-size: 17px;
  }
  .board-post-list .board-post-heading-actions .board-post-subject a {
    width: auto;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-size: inherit;
  }
  .board-post-list .board-post-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 12px;
    min-width: 0;
    padding: 11px 13px 0;
    font-size: 13px;
  }
  .board-post-list .board-post-heading .board-post-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    gap: 6px;
    padding: 6px 13px 6px 0;
  }
  .board-post-list .board-post-actions a {
    min-height: 32px;
    padding: 4px 7px;
    font-size: 12px;
  }
  .board-post-list .board-post-actions svg { display: block; }
  .board-post-list .board-post-profile {
    gap: 3px 12px;
    margin: 9px 13px 0;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
    font-size: 13px;
  }
  .board-post-list .board-post-body {
    margin: 0;
    padding: 11px 13px 13px;
    line-height: 1.7;
  }
}
.empty-state { padding: 32px 0; color: var(--muted); font-size: 14px; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.pagination a, .pagination span { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--white); font-size: 13px; }
.pagination a:hover { border-color: var(--ink); }
.pagination [aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--canvas); }
.admin-panel { padding: 32px; border-radius: var(--radius-panel); background: var(--paper); }
.admin-panel h1 { font-size: 28px; font-weight: 600; line-height: 1.6; letter-spacing: -.02em; }
.admin-panel h2 { font-size: 20px; font-weight: 600; }
.admin-panel .post-row .form-actions { margin-top: 16px; }
.admin-panel .post-body { margin: 12px 0; }
.page-layout.admin-layout { grid-template-columns: minmax(0, 1fr); }
.admin-panel > h2 { margin-top: 28px; }
.admin-panel .notice h2 { margin-bottom: 8px; font-size: 16px; }
.admin-panel .notice p + p { margin-top: 8px; }
.admin-panel .post-row > h3 { margin-top: 12px; font-size: 18px; font-weight: 600; }
.admin-panel .post-row > form { margin-top: 16px; }
.admin-panel > .form-actions { justify-content: space-between; }
.admin-panel > .form-actions > .form-actions { margin-top: 0; }
.admin-post-metadata { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--canvas); }
.admin-post-metadata summary { min-height: 44px; padding: 10px 14px; border-left: 3px solid #a29a90; border-radius: var(--radius-small); background: #ebe6e0; font-size: 14px; font-weight: 600; line-height: 1.8; cursor: pointer; overflow-wrap: anywhere; }
.admin-post-metadata summary:focus-visible { outline: 3px solid #3860be; outline-offset: 3px; }
.admin-post-metadata-content { padding: 16px; }
.admin-post-metadata-content > .form-help:first-child { margin-top: 0; }
.admin-post-metadata-list { display: grid; gap: 12px; padding: 0; margin: 0; font-size: 13px; line-height: 1.8; }
.admin-post-metadata-list > div { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 8px 16px; min-width: 0; }
.admin-post-metadata-list dt { color: var(--muted); }
.admin-post-metadata-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.admin-post-user-agent { white-space: pre-wrap; }
@media (max-width: 767px) {
  .board-title, .admin-panel h1 { font-size: 24px; }
  .boards.board-panel, .boards.admin-panel { padding: 24px 20px; }
  .boards.board-panel.board-page { padding-top: 6px; }
  .boards.board-panel.contact-page { padding-top: 6px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .post-metrics { gap: 8px; }
  .post-metrics .form-field label { font-size: 13px; white-space: nowrap; }
  .post-metrics .required-label, .post-metrics .optional-label { margin-left: 3px; font-size: 10px; }
  .post-metrics .input-unit { gap: 4px; }
  .post-metrics .input-unit > span { font-size: 12px; }
  .post-metrics .form-field input[type="number"] { padding-right: 5px; padding-left: 7px; appearance: textfield; }
  .post-metrics input[type="number"]::-webkit-inner-spin-button, .post-metrics input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; }
  .filter-form { padding: 16px; }
  .filter-form .form-field { flex-basis: 100%; }
  .detail-subject { font-size: 21px; }
  .post-meta { gap: 4px 12px; }
  .post-profile { gap: 8px 16px; }
  .form-actions > .button { flex: 1 1 140px; }
  .board-toolbar > .button { width: 100%; }
  .board-search-toolbar .section-description { float: none; display: block; width: auto; min-height: 0; margin: 0 0 12px; }
  .board-search-toolbar > .board-compose { width: auto; }
  .admin-post-metadata-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .admin-post-metadata-list dt { font-size: 12px; }
}
/* Article page uses the shared layout and compact step cards. */
.boards.board-panel.ketsuman-page { padding: 10px 32px 36px; }
.ketsuman-page .breadcrumb { margin-bottom: 2px; font-size: 14px; }
.ketsuman-page .breadcrumb a { min-height: 28px; }
.ketsuman-page .board-title { overflow-wrap: anywhere; }
.ketsuman-contents { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ketsuman-contents a { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 13px; border: 1px solid #dcd5cf; border-radius: 6px; background: #f5f1ed; color: #394b67; font-size: 13px; font-weight: 600; line-height: 1.5; text-underline-offset: 4px; }
.ketsuman-contents a:hover { border-color: #c8b8c5; background: #f9eff4; text-decoration: underline; }
.ketsuman-sections { display: grid; gap: 20px; margin-top: 24px; }
.ketsuman-section { min-width: 0; overflow: hidden; border: 1px solid #e2dcd6; border-radius: 10px; background: var(--white); box-shadow: 0 3px 12px rgb(45 33 28 / 4%); scroll-margin-top: 18px; }
.ketsuman-section-heading { display: flex; align-items: center; padding: 17px 22px; border-bottom: 1px solid #e8e2dd; background: linear-gradient(115deg, #f8ecf1, #f4efea 55%, #f9f7f5); }
.ketsuman-section-heading h2 { min-width: 0; font-size: 20px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.ketsuman-copy { padding: 22px 26px 26px; font-size: 16px; line-height: 1.95; overflow-wrap: anywhere; }
.ketsuman-copy p + p { margin-top: 16px; }
.ketsuman-tools { display: grid; gap: 1px; overflow: hidden; margin: 20px 0 0; border: 1px solid #e2dcd6; border-radius: 6px; background: #e2dcd6; }
.ketsuman-tool { display: grid; grid-template-columns: 160px minmax(0, 1fr); background: var(--white); }
.ketsuman-tool dt { display: flex; align-items: center; min-width: 0; padding: 15px 17px; background: #f6eef1; color: #8e325b; font-size: 15px; font-weight: 700; line-height: 1.6; }
.ketsuman-tool dd { min-width: 0; margin: 0; padding: 15px 18px; }
.ketsuman-caution { margin-top: 20px; padding: 3px 0; }
.ketsuman-caution-lead { display: flex; align-items: flex-start; gap: 8px; color: #9c4139; font-weight: 700; }
.ketsuman-caution-lead svg { flex: none; margin-top: 6px; }
.ketsuman-caution .ketsuman-caution-detail { margin: 6px 0 0 28px; }
@media (max-width: 767px) {
  .boards.board-panel.ketsuman-page { padding: 6px 20px 26px; }
  .ketsuman-contents { gap: 7px; margin-top: 18px; }
  .ketsuman-contents a { min-height: 44px; }
  .ketsuman-sections { gap: 16px; margin-top: 20px; }
  .ketsuman-section-heading { padding: 14px 16px; }
  .ketsuman-section-heading h2 { font-size: 18px; }
  .ketsuman-copy { padding: 17px 18px 20px; font-size: 15px; line-height: 1.9; }
  .ketsuman-tool { grid-template-columns: minmax(0, 1fr); }
  .ketsuman-tool dt { padding: 8px 14px; }
  .ketsuman-tool dd { padding: 12px 14px 15px; }
}
.boards.board-panel.anal-cleaning-page { padding: 10px 32px 32px; }
.anal-cleaning-page .breadcrumb { margin-bottom: 2px; font-size: 14px; }
.anal-cleaning-page .breadcrumb a { min-height: 28px; }
.anal-cleaning-page .board-title { overflow-wrap: anywhere; }
.anal-cleaning-steps { display: grid; gap: 18px; margin-top: 26px; }
.anal-cleaning-step { min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--white); }
.anal-cleaning-step h2 { margin: 0; padding: 9px 12px; border-left: 4px solid var(--button-primary); background: #f0ece7; font-size: 18px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.anal-cleaning-step p { margin-top: 14px; font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.anal-cleaning-step p + p { margin-top: 16px; }
@media (max-width: 767px) {
  .boards.board-panel.anal-cleaning-page { padding: 6px 20px 24px; }
  .anal-cleaning-steps { gap: 14px; margin-top: 20px; }
  .anal-cleaning-step { padding: 14px; }
  .anal-cleaning-step h2 { font-size: 16px; }
}
/* Glossary uses the shared page layout, warm surfaces and compact type. */
html.instant-scroll { scroll-behavior: auto; }
.boards.board-panel.glossary-page { padding: 10px 32px 24px; }
.glossary-page .breadcrumb { margin-bottom: 2px; font-size: 14px; }
.glossary-page .breadcrumb a { min-width: 44px; min-height: 28px; }
.glossary-page a { color: #3860be; text-underline-offset: 4px; }
.glossary-page a:hover { text-decoration: underline; }
.glossary-syllables { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.glossary-syllables > a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--radius-small); background: #ebe6e0; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.glossary-syllables > a:hover { background: #e3ddd6; }
.glossary-index { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--canvas); scroll-margin-top: 16px; }
.glossary-index-title { margin-bottom: 12px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.glossary-index-group { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; }
.glossary-index-group + .glossary-index-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.glossary-index-group > h3 { justify-self: start; width: fit-content; max-width: 100%; padding: 6px 15px; border: 1px solid #c7457c; border-radius: 999px; color: #a92d65; font-size: 16px; font-weight: 600; line-height: 1.5; white-space: nowrap; scroll-margin-top: 16px; }
.glossary-index-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.glossary-index-terms > li { min-width: 0; }
.glossary-index-terms a { display: flex; align-items: center; min-width: 0; min-height: 44px; padding: 6px 4px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.glossary-definitions { margin-top: 32px; }
.glossary-group { min-width: 0; scroll-margin-top: 16px; }
.glossary-group + .glossary-group { margin-top: 24px; }
.glossary-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 4px; }
.glossary-group-heading > h2 { min-width: 0; padding: 7px 18px; border: 1px solid #c7457c; border-radius: 999px; color: #a92d65; font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; white-space: nowrap; }
.glossary-group-heading > a, .glossary-back { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-small); font-size: 14px; line-height: 1.5; }
.glossary-group-heading > a:hover, .glossary-back:hover { background: #f0ece7; }
.glossary-entry { min-width: 0; padding: 12px; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: var(--radius-small); scroll-margin-top: 16px; }
.glossary-entry:target { border-color: #d18ca8; background: #fff2f6; }
.glossary-entry:focus-visible { outline: 3px solid #3860be; outline-offset: 3px; }
.glossary-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.glossary-entry-heading > h3 { min-width: 0; font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; overflow-wrap: anywhere; }
.glossary-copy { margin-top: 8px; font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.glossary-copy p + p { margin-top: 8px; }
.glossary-source { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.glossary-source a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; max-width: 100%; padding: 6px 0; overflow-wrap: anywhere; }
@media (min-width: 768px) and (max-width: 1100px) {
  .glossary-syllables { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .glossary-index-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .glossary-index-group > h3 { width: fit-content; max-width: 100%; }
  .glossary-index-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .boards.board-panel.glossary-page { padding: 6px 20px 24px; }
  .glossary-syllables { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
  .glossary-syllables > a { padding-left: 4px; padding-right: 4px; }
  .glossary-index { padding: 12px; }
  .glossary-index-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .glossary-index-group > h3 { width: fit-content; max-width: 100%; }
  .glossary-index-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
  .glossary-definitions { margin-top: 24px; }
  .glossary-group-heading { gap: 8px; }
  .glossary-group-heading > h2 { font-size: 18px; }
  .glossary-entry { padding: 10px 8px; }
  .glossary-entry-heading { gap: 8px; }
}
@media (max-width: 1360px) {
  .site-header { margin-left: 32px; margin-right: 32px; }
  .page-layout { margin-left: 48px; margin-right: 48px; }
  .prefectures { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .board-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
  .board-filter-purpose select { max-width: none; }
  .board-filter-keyword { grid-column: 1 / -1; }
  .board-filter-form .board-search-button { grid-column: 1 / -1; justify-self: start; }
  .main-nav { margin-right: 0; gap: 24px; }
  .page-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; margin-left: 32px; margin-right: 32px; }
  .boards { padding: 28px 24px 24px; }
  .prefectures { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .community-logo { width: 180px; height: 180px; }
  .section-heading h1 { padding-right: 0; }
}
@media (max-width: 767px) {
  html { scroll-padding-top: 16px; }
  .site-header { position: relative; overflow: hidden; min-height: auto; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 16px 16px 24px; padding: 16px 20px 3px; border-radius: var(--radius-panel); }
  .brand, .main-nav { position: relative; z-index: 1; }
  .header-illustration {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 180px;
    height: 78px;
    background-image: linear-gradient(90deg, #fff 0, rgb(255 255 255 / 0%) 45%), var(--header-art);
    background-size: 100% 100%, 160px auto;
    background-position: center, right 6px top 0;
    background-repeat: no-repeat;
    opacity: .85;
  }
  .brand { margin-right: auto; }
  .brand-logo { width: 48px; height: 48px; }
  .brand-name { font-size: 26px; }
  .brand-caption { font-size: 12px; }
  .main-nav { width: 100%; justify-content: space-between; gap: 12px; margin: 0; border-top: 1px solid #eee9e4; }
  .main-nav a { min-height: 44px; font-size: 14px; }
  .main-nav a:focus-visible { outline-offset: -3px; }
  .page-layout { display: block; margin: 0 16px 40px; }
  .boards { padding: 28px 24px 24px; }
  .section-heading h1 { font-size: 26px; }
  .prefectures { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 8px; }
  .prefectures a { min-height: 35px; }
  .prefectures li { font-size: 16px; }
  .availability-note { font-size: 12px; }
  .sidebar { margin-top: 24px; }
  .about { padding: 28px 24px; }
  .community-logo { width: 176px; height: 176px; }
  .sidebar-note { display: none; }
  .site-footer { padding: 24px; }
  .footer-inner { gap: 8px 24px; }
  .footer-brand { width: 100%; flex-wrap: wrap; gap: 8px 16px; }
  .footer-inner small { margin-left: auto; }
}
@media (max-width: 360px) {
  .site-header { padding-left: 16px; padding-right: 16px; }
  .main-nav { gap: 8px; }
  .main-nav a { font-size: 12px; }
  .boards { padding-left: 20px; padding-right: 20px; }
  .prefectures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Stories use the shared site shell with a lighter, editorial reading layout. */
.boards.board-panel.story-page { padding-top: 10px; }
.story-page .breadcrumb { margin-bottom: 2px; }
.story-page .breadcrumb a { min-height: 28px; }
.story-page .breadcrumb > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.story-list-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; }
.story-list-toolbar .section-description { margin: 0; }
.story-list { margin-top: 20px; }
.story-item { padding: 24px 0 25px; border-bottom: 1px solid var(--line); }
.story-item:first-child { padding-top: 8px; }
.story-item h2 { padding: 12px 16px; border-left: 4px solid var(--button-primary); background: #f4e8ee; font-size: 22px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.story-item h2 a { color: var(--ink); text-underline-offset: 5px; }
.story-item h2 a:hover { color: #a92d65; text-decoration: underline; }
.story-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 16px; margin-top: 10px; color: #65605e; font-size: 13px; line-height: 1.7; }
.story-meta time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.story-excerpt, .story-body { overflow-wrap: anywhere; line-height: 1.9; }
.story-excerpt { margin-top: 17px; font-size: 16px; }
.story-item-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; color: var(--muted); font-size: 13px; }
.story-item-footer a { color: #3860be; font-weight: 700; text-underline-offset: 4px; }
.story-item-footer a:hover { text-decoration: underline; }
.story-empty { margin-top: 24px; color: var(--muted); font-size: 14px; }
.story-detail { margin-top: 25px; }
.story-detail h1 { padding: 12px 16px; border-left: 4px solid var(--button-primary); background: #f4e8ee; font-size: 24px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.story-detail .story-meta { padding: 0 2px; }
.story-body { margin-top: 26px; padding: 0 2px; font-size: 17px; }
.story-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.story-detail-actions > a { color: #3860be; font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
.story-detail-actions > a:hover { text-decoration: underline; }
.story-like-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid #d8a9ba; border-radius: 999px; background: #fff8fa; color: #a83265; font-size: 14px; font-weight: 700; }
.story-like-button:hover, .story-like-button.is-liked { background: #f4dbe5; border-color: #c7457c; }
.story-like-button span { font-variant-numeric: tabular-nums; }
.story-admin-delete { min-height: 36px; padding: 5px 9px; border: 1px solid #e0bbb1; background: #fbefea; color: #913e39; font-size: 12px; }
.story-admin-delete:hover { background: #f5ddd6; }
.story-replies { margin-top: 30px; scroll-margin-top: 20px; }
.story-replies h2, .story-reply-form h2 { font-size: 20px; font-weight: 700; }
.story-replies h2 span { color: var(--muted); font-size: 14px; font-weight: 500; }
.story-reply-list { margin: 14px 0 0; padding: 0; list-style: none; }
.story-reply { padding: 16px 0 20px; border-bottom: 1px solid var(--line); }
.story-reply .story-meta { justify-content: flex-start; gap: 4px 12px; margin: 0; }
.story-reply-attribution { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.story-reply-id { font-variant-numeric: tabular-nums; }
.story-reply p { margin-top: 10px; font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
.story-reply form { margin-top: 10px; }
.story-reply-form { margin-top: 32px; scroll-margin-top: 20px; }
.story-reply-form .form-grid { margin-top: 16px; }
.story-form { margin-top: 20px; }
.story-form .form-actions, .story-reply-form .form-actions { margin-top: 4px; }
@media (max-width: 767px) {
  .boards.board-panel.story-page { padding-top: 6px; }
  .story-list-toolbar { margin-top: 20px; }
  .story-list-toolbar .button { width: 100%; }
  .story-list { margin-top: 13px; }
  .story-item { padding: 19px 0 22px; }
  .story-item h2 { padding: 10px 12px; font-size: 19px; }
  .story-meta { font-size: 12px; }
  .story-excerpt { margin-top: 14px; font-size: 15px; }
  .story-detail h1 { padding: 10px 12px; font-size: 21px; }
  .story-body { margin-top: 20px; font-size: 16px; }
  .story-reply p { font-size: 14px; }
}