:root {
  --board-ink: #211f1d;
  --board-muted: #746e68;
  --board-line: #e7dfd7;
  --board-gold: #aa8c69;
  --board-bg: #fbfaf8;
}


/* ========================================
   掲示板詳細
======================================== */

.board-page {
  width: min(960px, calc(100% - 48px));
  margin: auto;
  padding: 0 0 90px;
}


/* パンくずリスト
---------------------------------------- */

.board-breadcrumb {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8a837c;
  font-size: 11px;
}

.board-breadcrumb a:hover {
  text-decoration: underline;
}

.board-breadcrumb b {
  color: #57514c;
}


/* 掲示板テーマ
---------------------------------------- */

.board-thread-head {
  padding: 40px 48px;
  border: 1px solid var(--board-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(62, 45, 30, 0.055);
}

.board-thread-head > a {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 11px;
  border-radius: 20px;
  background: #eee5d9;
  font-size: 12px;
}

.board-thread-head h1 {
  margin: 0 0 16px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 31px;
  font-weight: 500;
  line-height: 1.55;
}

.board-thread-head > div {
  color: #5d5751;
  font-size: 16px;
  line-height: 1.9;
}

.board-thread-head > div p {
  margin: 0;
}

.board-thread-head > span {
  display: block;
  margin-top: 20px;
  color: var(--board-muted);
  font-size: 13px;
}


/* 投稿完了・エラー表示
---------------------------------------- */

.board-notice {
  margin: 18px 0 0;
  padding: 13px 18px;
  border: 1px solid #cfded0;
  border-radius: 7px;
  color: #3d6843;
  background: #f3faf3;
  font-size: 13px;
}

.board-notice.is-error {
  border-color: #eccdca;
  color: #9a403b;
  background: #fff5f4;
}


/* コメント一覧
---------------------------------------- */

.board-comments {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}

.board-comment {
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--board-line);
  border-radius: 10px;
  background: #fff;
}

.board-comment-avatar {
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 50%;
  background: #f1ede7;
}

.board-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.board-comment-body {
  min-width: 0;
}

.board-comment-body header {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.board-comment-body header a {
  font-size: 13px;
}

.board-comment-body header b {
  font-size: 16px;
}

.board-comment-body time {
  margin-left: auto;
  color: #8a837c;
  font-size: 11px;
	display:none;
}

.board-comment-body > p {
  margin: 13px 0 0;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.9;
}

.board-comment-body form {
  text-align: right;
}

.board-comment-body form button {
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid #aaa29a;
  color: #77706a;
  background: none;
  font-size: 11px;
  cursor: pointer;
}


/* 削除・規約違反コメント
---------------------------------------- */

.board-comment--removed {
  display: block;
  padding: 22px 26px;
  color: #8a837c;
  background: #f7f4f1;
  text-align: center;
  font-size: 13px;
}

.board-comment--removed p {
  margin: 0;
}


/* コメントなし
---------------------------------------- */

.board-empty {
  padding: 42px 20px;
  border: 1px dashed #d8cec4;
  border-radius: 10px;
  text-align: center;
}

.board-empty p {
  margin: 0 0 5px;
  font-weight: 700;
}

.board-empty span {
  color: var(--board-muted);
  font-size: 13px;
}


/* コメント投稿フォーム
---------------------------------------- */

.board-post-box {
  margin-top: 28px;
  padding: 30px 34px;
  border-radius: 11px;
  background: #eee8df;
}

.board-post-box h2 {
  margin: 0 0 15px;
  font-size: 16px;
}

.board-post-box textarea {
  width: 100%;
  min-height: 150px;
  padding: 16px;
  border: 1px solid #d7cec5;
  border-radius: 7px;
  background: #fff;
  font: 15px/1.8 inherit;
  resize: vertical;
}

.board-post-box form > div {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.board-post-box small {
  color: var(--board-muted);
  font-size: 11px;
}

.board-post-box button {
  min-width: 190px;
  height: 48px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: var(--board-ink);
  font-weight: 700;
  cursor: pointer;
}

.board-post-box button:hover {
  opacity: 0.86;
}


/* ========================================
   掲示板テーマ一覧
======================================== */

.board-topic-list {
  display: grid;
  gap: 9px;
}

.board-topic-card {
  min-height: 92px;
  padding: 17px 20px;
  /*display: flex;*/
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid #e5ddd5;
  border-radius: 8px;
  background: #fff;
}

.board-topic-card:hover {
  border-color: #cbbdaf;
  transform: translateY(-1px);
}

.board-topic-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.board-topic-copy small {
  margin-bottom: 4px;
  color: #8d745b;
  font-size: 13px;
}

.board-topic-copy b {
  font-size: 16px;
  line-height: 1.5;
}

@media(max-width:640px){
	.board-topic-copy b {
  font-size: 16px;
}
}

.board-topic-copy em {
  margin-top: 4px;
  overflow: hidden;
  color: #746e68;
  font-size: 16px;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.board-topic-meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
}

.board-topic-meta strong {
  color: #746e68;
  font-size: 12px;
}

.board-topic-meta i {
  font-size: 12px;
  font-style: normal;
}

.board-topic-meta mark,
.board-thread-head mark {
  padding: 4px 8px;
  border-radius: 20px;
  color: #765e47;
  background: #eee5d9;
  font-size: 11px;
  font-weight: 700;
}

.board-topic-meta mark.is-unanswered { color: #77706a; background: #f2f0ed; }


/* ========================================
   興味カテゴリ内の掲示板
======================================== */

.interest-board {
  padding: 50px 0 70px;
}

.interest-board .interest-section-heading {
  margin-bottom: 20px;
}

.interest-board-box {
  padding: 26px;
  border-radius: 10px;
  background: #f2eee8;
}


/* ========================================
   会員トップの掲示板
======================================== */

.home-board-grid {
  margin-top: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
	margin-bottom:50px;
}

.home-board-panel {
  padding: 0 16px 16px;
}

.home-board-panel .panel-heading {
  padding-inline: 2px;
}

.home-board-panel .board-topic-card {
  min-height: 76px;
  padding: 13px 14px;
}

.home-board-panel .board-topic-copy em {
  display: none;
}


/* ========================================
   ログイン前の掲示板
======================================== */

.public-board-section {
  padding: 65px 0;
  background: #f5f1ec;
}

.public-board-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.public-board-card {
  padding: 24px;
  border: 1px solid #e0d7ce;
  border-radius: 9px;
  background: #fff;
}

.public-board-card h3 {
  margin: 0 0 14px;
  /*font: 500 20px/1.55 "Yu Mincho", "Hiragino Mincho ProN", serif;*/
}

.public-board-card p {
  margin: 0;
  padding: 13px;
  border-radius: 6px;
  background: #f8f5f1;
  font-size: 16px;
  line-height: 1.75;
}

.public-board-card p b {
  display: block;
  margin-bottom: 4px;
  color: #7a6047;
}

.public-board-card p span {
  display: block;
}

.public-board-card__meta {
  margin-top: 17px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: #746e68;
  background: transparent;
  font-size: 12px;
}

.public-board-card__meta a {
  color: #27231f;
  font-weight: 700;
	font-size:16px;
}

.public-board-section--home {
  padding: 50px 0;
}

.public-board-section--home .public-board-list {
  grid-template-columns: repeat(3, 1fr);
}

.public-board-more,
.board-category-more {
  margin: 28px 0 0;
  text-align: center;
}

.public-board-more a,
.board-category-more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 25px;
  border: 1px solid #b7a28d;
  border-radius: 30px;
  color: #352f29;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* 質問一覧 */
.board-archive-head {
  margin-bottom: 26px;
  padding: 44px 48px;
  border-radius: 12px;
  color: #fff;
  background: #3e3934;
}

.board-archive-head p { margin: 0 0 8px; color: #d8c2a8; font-size: 11px; letter-spacing: .18em; }
.board-archive-head h1 { margin: 0 0 10px; font-size: 30px; }
.board-archive-head span { color: #e8e3de; font-size: 15px; }

.board-filters {
  margin-bottom: 20px;
  padding: 20px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--board-line);
  border-radius: 10px;
  background: #fff;
}

.board-filters label span { display: block; margin-bottom: 6px; color: var(--board-muted); font-size: 11px; font-weight: 700; }
.board-filters select { min-width: 230px; height: 42px; padding: 0 34px 0 12px; border: 1px solid #d8cfc6; border-radius: 6px; background: #fff; font-size: 14px; }
.board-filter-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.board-filter-buttons a { padding: 10px 14px; border: 1px solid #d8cfc6; border-radius: 22px; color: #5d5650; background: #fff; font-size: 12px; font-weight: 700; }
.board-filter-buttons a.is-active { border-color: #80684f; color: #fff; background: #80684f; }
.board-result-head { margin: 0 2px 12px; display: flex; align-items: center; justify-content: space-between; color: var(--board-muted); font-size: 13px; }
.board-result-head a { text-decoration: underline; }

.board-pagination { margin: 30px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.board-pagination a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #d8cfc6; border-radius: 50%; background: #fff; font-size: 13px; }
.board-pagination a.is-current { border-color: #80684f; color: #fff; background: #80684f; }

/* ログイン前詳細の回答とCTA */
.board-comment--guest { display: block; padding: 22px 26px; }
.board-comment--guest .board-comment-body header { margin-bottom: 7px; }
.board-comment--guest .board-comment-body header b { color: #7a6047; }
.board-guest-cta { margin-top: 28px; padding: 48px 30px; border-radius: 12px; text-align: center; color: #fff; background: #3e3934; }
.board-guest-cta > p { margin: 0 0 8px; color: #d8c2a8; font-size: 10px; letter-spacing: .18em; }
.board-guest-cta h2 { margin: 0 0 13px; font-size: 26px; }
.board-guest-cta > span { display: block; color: #e8e3de; font-size: 14px; line-height: 1.8; }
.board-guest-cta > a { width: min(320px, 100%); min-height: 52px; margin: 23px auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 28px; color: #302a25; background: #fff; font-weight: 700; }
.board-guest-cta small { display: block; color: #ddd4cb; }
.board-guest-cta small a { color: #fff; text-decoration: underline; }


/* ========================================
   スマートフォン
======================================== */

@media (max-width: 820px) {
  .board-page {
    width: calc(100% - 28px);
    padding-bottom: 110px;
  }

  .board-thread-head {
    padding: 26px 20px;
  }

  .board-thread-head h1 {
    font-size: 23px;
  }

  .board-comment {
    padding: 18px 15px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  .board-comment-avatar {
    width: 48px;
    height: 48px;
  }

  .board-comment-body header {
    flex-wrap: wrap;
  }

  .board-comment-body time {
    width: 100%;
    margin: 2px 0 0;
  }

  .board-comment-body > p {
    font-size: 16px;
  }

  .board-post-box {
    padding: 23px 17px;
  }

  .board-post-box form > div {
    display: block;
  }

  .board-post-box button {
    width: 100%;
    margin-top: 12px;
  }

  .board-topic-card {
    padding: 15px;
  }

  .board-topic-copy em {
    display: none;
  }

  .board-topic-meta {
    gap: 8px;
  }

  .home-board-grid {
    grid-template-columns: 1fr;
  }

  .interest-board {
    padding-bottom: 50px;
  }

  .interest-board-box {
    padding: 15px;
  }

  .public-board-list {
    grid-template-columns: 1fr;
  }

  .public-board-section--home .public-board-list { grid-template-columns: 1fr; }
  .public-board-section--home { padding: 35px 0; }
  .board-archive-head { padding: 30px 22px; }
  .board-archive-head h1 { font-size: 24px; }
  .board-filters { align-items: stretch; flex-direction: column; }
  .board-filters select { width: 100%; min-width: 0; }
  .board-filter-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .board-filter-buttons a { text-align: center; }
  .board-guest-cta { padding: 36px 20px; }
  .board-guest-cta h2 { font-size: 22px; }

  .public-board-card__meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .otonacica-staff-badge {
    margin-left: 4px;
  }
}

.board-topic-copy .board-category {
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 20px;
  color: #665e57;
  background: #f2eee9;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

/* 旅行・おでかけ */
.board-topic-copy .board-category--travel {
  color: #527077;
  background: #e8f1f2;
}

/* 食べる・飲む */
.board-topic-copy .board-category--food {
  color: #8a634a;
  background: #f6ebe3;
}

/* 美容・ファッション */
.board-topic-copy .board-category--beauty {
  color: #926375;
  background: #f7eaf0;
}

/* 韓国 */
.board-topic-copy .board-category--korea {
  color: #725e91;
  background: #eee9f6;
}

/* 占い・スピリチュアル */
.board-topic-copy .board-category--spiritual {
  color: #705b8d;
  background: #eee9f5;
}

/* 怪談・都市伝説 */
.board-topic-copy .board-category--mystery {
  color: #596276;
  background: #e9ebf0;
}

/* アニメ・漫画 */
.board-topic-copy .board-category--anime {
  color: #547486;
  background: #e8f1f5;
}

/* 音楽・映画・本 */
.board-topic-copy .board-category--entertainment {
  color: #826650;
  background: #f2ece6;
}

/* スポーツ・ゲーム */
.board-topic-copy .board-category--sports {
  color: #56745e;
  background: #e8f2ea;
}

/* ペット・動物 */
.board-topic-copy .board-category--pet {
  color: #76694c;
  background: #f3efdf;
}

/* 大人の悩み・語り合い */
.board-topic-copy .board-category--life {
  color: #815e68;
  background: #f4e9ec;
}

/* 話す・つながる */
.board-topic-copy .board-category--communication {
  color: #526e69;
  background: #e6f0ed;
}




.public-board-title {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.public-board-card .public-board-title h3 {
  margin: 0;
}

.public-board-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1ede8;
}

.public-board-icon img {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
}
.public-board-icon--travel {
  background: #dfeef0;
}

.public-board-icon--food {
  background: #f4e3d7;
}

.public-board-icon--beauty {
  background: #f4e1e9;
}

.public-board-icon--korea {
  background: #e9e2f2;
}

.public-board-icon--spiritual {
  background: #e9e3f1;
}

.public-board-icon--mystery {
  background: #e3e7ed;
}

.public-board-icon--anime {
  background: #dfedf2;
}

.public-board-icon--entertainment {
  background: #eee5dc;
}

.public-board-icon--sports {
  background: #dfede2;
}

.public-board-icon--pet {
  background: #eee9d6;
}

.public-board-icon--life {
  background: #f0e1e5;
}

.public-board-icon--communication {
  background: #dfece8;
}

@media (max-width: 820px) {
  .public-board-title {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  .public-board-icon {
    width: 48px;
    height: 48px;
  }

  .public-board-icon img {
    width: 25px;
    height: 25px;
  }
}