/* ==========================================================================
       Foundation
       ========================================================================== */
    :root {
      /* Colors */
      --bbs-color-primary: #094;
      --bbs-color-text-main: #333333;
      --bbs-color-text-sub: #888888;
      --bbs-color-attention: #DC2626;
      --bbs-color-disable: #D9D9D9;
      --bbs-color-border: #DDDDDD;
      --bbs-color-bg-lightgray: #F5F5F5;
      --bbs-color-bg-pink: #ffeef0;
      --bbs-color-white: #FFFFFF;
      --bbs-color-pitch-black: #000000;
      --bbs-color-link: #0645ad;
      --bbs-color-follow: #00a6f4;
      --bbs-color-reaction-off: #BDBDBD;
      --bbs-color-reaction-on: #FF2056;
      --bbs-color-bronze: #b08d57;
      --bbs-color-silver: #90A1B9;
      --bbs-color-gold: #d08700;

      /* Spacing */
      --bbs-space-xs: 0.5rem;
      --bbs-space-s: 0.8rem;
      --bbs-space-m: 1rem;
      --bbs-space-l: 2rem;

      /* Font size */
      --bbs-font-size-xs: 0.5rem;
      --bbs-font-size-ss: 0.8rem;
      --bbs-font-size-s: 0.9rem;
      --bbs-font-size-base: 1rem;
      --bbs-font-size-l: 2rem;
      --bbs-font-bold: 700;
    }

    body {
      margin: 0;
      font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
      color: var(--bbs-color-text-main);
      line-height: 1.6;
      background-color: var(--bbs-color-white);
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    button {
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      font-family: inherit;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    img {
      max-width: 100%;
      height: auto;
      vertical-align: bottom;
    }

    main {
      margin: 0;
      padding: 0;
    }

    p {
      margin: 0;
    }

    /* ==========================================================================
       Layout (l-)
       ========================================================================== */

    #wrapper_bbs {
      width: 870px;
      padding: 0 10px;
      margin: 10px auto 0;
      clear: both;
    }
    #mainWrap_bbs {
      width: 600px;
      float: left;
      border: solid 1px silver;
    }

    #mainWrap_bbs .post {
      font-size:16px;
      padding:0 20px 20px;
      color: var(--bbs-color-text-main);
      background-color: var(--bbs-color-white);
    }
    
    .l-header {
      background-color: var(--bbs-color-primary);
      color: var(--bbs-color-white);
      padding: var(--bbs-space-s) var(--bbs-space-m);
      font-weight: var(--bbs-font-bold);
    }

    .l-container {
      width: 100%;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .l-section {
      padding: 0.5rem 0;
    }
    #p-bbs-container .l-section {
      padding: 10px 6px 5px !important;
    }
    .newTopics .l-section {
      padding: 0.5rem 0 0 !important;
    }

    .l-thread-theme {
      padding: 0 10px 10px;
    }

    .l-db-PartitionWrap {
      margin-right: 50px;
    }

    /* ==========================================================================
       Component (c-)
       ========================================================================== */
    /* 見出し */
    .c-headline__title {
      background-color: var(--bbs-color-primary);
      color: var(--bbs-color-white);
      padding: 0.5rem;
      font-weight: var(--bbs-font-bold);
      margin: 0;
      font-size: var(--bbs-font-size-base) !important;
    }

    /* ボタン基本 */
    .c-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--bbs-color-border) !important;
      border-radius: 20px;
      color: var(--bbs-color-text-main) !important;
      font-size: var(--bbs-font-size-ss);
      transition: opacity 0.2s;
    }
    .c-button:hover {
      opacity: 0.7;
    }

    /* アバター */
    .c-avatar {
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }
    .c-reply-avatar {
      display: inline-block;
      width: 28px;
      height: 28px;
      background-color: var(--bbs-color-border);
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      /* z-indexを指定して線の上に画像が来るようにする（必要であれば） */
      position: relative;
      z-index: 1;
    }
    .c-reply-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* バッジ */
    .c-badge {
      font-size: 0.5rem;
      line-height: 1;
      color: var(--bbs-color-white);
      padding: 4px 5px;
      border-radius: 10px;
      font-weight: var(--bbs-font-bold);
    }
    .c-badge--author { background-color: var(--bbs-color-primary); }
    .c-badge--author:before { content: "オーサー"; }
    .c-badge--bronze { background-color: var(--bbs-color-bronze); }
    .c-badge--bronze:before { content: "ブロンズ"; }
    .c-badge--silver { background-color: var(--bbs-color-silver); }
    .c-badge--silver:before { content: "シルバー"; }
    .c-badge--gold { background-color: var(--bbs-color-gold); }
    .c-badge--gold:before { content: "ゴールド"; }

    .c-badge--author2 { background: url('/img/icons/rank_rainbow.png') no-repeat center / contain; width: 13px; height: 13px; }
    .c-badge--bronze2 { background: url('/img/icons/rank_bronze.png') no-repeat center / contain; width: auto; height: 14px; }
    .c-badge--silver2 { background: url('/img/icons/rank_silver.png') no-repeat center / contain; width: 8px; height: 12px; }
    .c-badge--gold2 { background: url('/img/icons/rank_gold.png') no-repeat center / contain; width: 10px; height: 14px; }


    /* アイコン（ダミー） */
    .c-icon {
      display: inline-block;
      width: 1em;
      height: 1em;
      vertical-align: middle;
    }

    /* 切り替えタブ */
    .c-bbs-tabs {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid var(--bbs-color-border);
      overflow: hidden;
      background-color: var(--bbs-color-white);
    }
    .c-bbs-tabs__item {
      text-align: center;
      padding: 0 0 5px;
      font-size: var(--bbs-font-size-base);
      color: var(--bbs-color-text-sub);
      cursor: pointer;
    }
    .c-bbs-tabs__item.is-active {
      font-size: var(--bbs-font-size-base);
      font-weight: var(--bbs-font-bold);
      color: var(--bbs-color-text-main);
      border-bottom: 3px solid var(--bbs-color-primary);
    }
    .c-bbs-tabs a {
      display: block;
      width: 50%;
      color: var(--bbs-color-text-sub) !important;
      text-decoration: none;
    }
    .c-bbs-tabs a:visited { color: var(--bbs-color-text-sub) !important; text-decoration: none;}
    .c-bbs-tabs.is-active a:visited { color: var(--bbs-color-text-main) !important; text-decoration: none;}

    /* 前ページに戻るボタン */
    .c-link-box {
      display: flex;           /* １．aタグをflex要素にする */
      justify-content: center; /* ２．左右中央 */
      align-items: center;     /* ３．上下中央 */
    }
    .c-link-box a:visited { text-decoration: none; }
    .c-link-box a:hover { text-decoration: none; }
    .c-link-box a:active { text-decoration: none; }

    .c-input-text,
    .c-textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--bbs-color-border);
      border-radius: 4px;
      background-color: var(--bbs-color-bg-lightgray);
      font-size: var(--bbs-font-size-base);
      transition: border-color 0.2s;
    }
    .c-input-text:focus,
    .c-textarea:focus {
      outline: none;
      border: 2px solid var(--bbs-color-primary);
    }
    .c-textarea {
      min-height: 180px;
      resize: vertical;
      box-sizing: border-box;
    }
    .c-input-text {
      box-sizing: border-box;
    }

    /* カスタムラジオボタン */
    .c-radio {
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
      padding-left: 28px;
      margin-bottom: 10px;
      font-size: var(--bbs-font-size-base);
    }

    .c-radio input {
      position: absolute;
      opacity: 0;
    }

    .c-radio__checkmark {
      position: absolute;
      top: 3px;
      left: 0;
      height: 18px;
      width: 18px;
      background-color: var(--bbs-color-white);
      border: 1px solid var(--bbs-color-border);
      border-radius: 50%;
    }

    .c-radio:hover input ~ .c-radio__checkmark {
      background-color: #eee;
    }

    .c-radio input:checked ~ .c-radio__checkmark {
      background-color: var(--bbs-color-white);
      border-color: var(--bbs-color-attention);
    }
    .c-radio__checkmark:after {
      content: "";
      position: absolute;
      display: none;
      top: 4px;
      left: 4px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--bbs-color-attention);
    }

    .c-radio input:checked ~ .c-radio__checkmark:after {
      display: block;
    }

    .c-text-accent {
      color: var(--bbs-color-attention);
      font-weight: bold;
    }

    /* ==========================================================================
       Project (p-)
       ========================================================================== */

    /* ボタン（フォロー） */
    .p-button--follow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 6px;
      border: 1px solid var(--bbs-color-border) !important;
      border-radius: 50px;
      background-color: var(--bbs-color-white);
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 90px; /* 切り替え時に幅が変わらないよう固定 */
      outline: none;
    }

    /* --- SVGアイコンの設定 (::before) --- */
    .p-button--follow::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 4px;

    /* 初期アイコンの色 */
      background-color: var(--bbs-color-follow);

    /* SVGをマスクとして指定 */
      mask-image: url("/img/icons/icon_follow.svg");
      -webkit-mask-image: url("/img/icons/icon_follow.svg");

      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
      transition: background-color 0.3s ease;
    }

    /* --- テキストの設定 (::after) --- */
    .p-button--follow::after {
      content: "フォロー";
      color: var(--bbs-color-text-main);
      font-weight: bold;
      font-size: 0.7rem;
    }
    /* クリック後 (.on) のスタイル */
    .p-button--follow.is-active {
      background-color:var(--bbs-color-follow);
      border-color:var(--bbs-color-follow);
    }

    /* アイコンの色の変化 */
    .p-button--follow.is-active::before {
      background-color: var(--bbs-color-white); /* 白に変更 */
    }
    /* テキストの書き換えと色の変化 */
    .p-button--follow.is-active::after {
      content: "フォロー中";
      color: var(--bbs-color-white);
    }
    /* ホバー時の微調整 */
    .p-button--follow:hover {
      background: rgba(0,0,0,0.1);
      border: 1px solid var(--bbs-color-border);
      opacity: 1;
    }

    /* Xシェアボタン */
    .p-x-share-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid var(--bbs-color-border);
      border-radius: 50px;
      background-color: var(--bbs-color-pitch-black);
      cursor: pointer;
      min-width: 22px;
      min-height: 22px;
      outline: none;
      background-size: 50% auto;
      background-image: url(/img/icons/icon_x-logo.svg);
      background-repeat: no-repeat;
      background-position: center;
      transition: background-color 0.3s ease;
    }

    /* ボタン（リアクション） */
/* ボタン（リアクション） */
.p-comment-item__reactions .reaction {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.p-comment-item__reactions .good {
  background-image: url("/img/icons/icon_good.svg");
}
.p-comment-item__reactions .soso {
  background-image: url("/img/icons/icon_soso.svg");
}
.p-comment-item__reactions .bad {
  background-image: url("/img/icons/icon_bad.svg");
}
/* アイコンの色の変化 */
.p-comment-item__reactions .reaction.is-disabled {
  opacity: 0.3;
  filter: grayscale(100%);
}
.p-comment-item__reactions .reaction.is-active {
  opacity: 1;
  filter: brightness(1.2) saturate(1.2);
}
/* マイページ累計のリアクション */
.p-comment-item__reactions .reaction-total-img {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
  filter: grayscale(100%);
  opacity: 0.3;
}
 
/* 各リアクションタイプのアイコン指定 */
.p-comment-item__reactions .reaction-total-img.good {
  background-image: url("/img/icons/icon_good.svg");
}
.p-comment-item__reactions .reaction-total-img.soso {
  background-image: url("/img/icons/icon_soso.svg");
}
.p-comment-item__reactions .reaction-total-img.bad {
  background-image: url("/img/icons/icon_bad.svg");
}
    /* もっと見るボタン */
    .p-button--more-preview {
      min-width: 300px;
      padding: 10px 0;
      border-radius: 4px;
      font-weight: var(--bbs-font-bold);
      font-size: 1rem;
    }
    .p-button--more-preview::before {
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 3px;
      background: url('/img/icons/icon_circle-down.svg') no-repeat center / contain;
    }

    .p-button--backpage {
      padding: 10px 0;
      margin: 0 auto;
      border-radius: 4px;
      font-weight: var(--bbs-font-bold);
      font-size: var(--bbs-font-size-s);
      color: var(--bbs-color-text-sub) !important;
      display: flex;
      align-items: center;
    }
    .p-button--backpage::before {
      content: "";
      display: inline-block;
      width: 22px;
      height: 22px;
      background-color: var(--bbs-color-text-sub) !important;
      mask-image: url("/img/icons/icon_angle-left.svg");
      -webkit-mask-image: url("/img/icons/icon_angle-left.svg");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }

    /* 掲示板誘導パーツ */
    .p-bbs-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0 0.3rem;
      border-bottom: 1px solid var(--bbs-color-border);
      margin-top: 0.8rem;
      margin-bottom: 0 !important;
      }
    .p-bbs-header__title {
      font-size: var(--bbs-font-size-base) !important;
      display: flex;
      align-items: center;
      gap: 2px;
      font-weight: var(--bbs-font-bold);
      color: var(--bbs-color-link);
    }
    .p-bbs-header__title:before {
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: var(--bbs-color-link) !important;
      mask-image: url("/img/icons/icon_pen.svg");
      -webkit-mask-image: url("/img/icons/icon_pen.svg");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
    .p-bbs-header__subtitle {
      font-size: 0.8rem;
      color: var(--bbs-color-text-main);
      font-weight: var(--bbs-font-bold);
    }
    .p-bbs-header a { color: var(--bbs-color-link) !important;}
    .p-bbs-header a:visited { color: var(--bbs-color-link) !important;}
    .p-bbs-header a:hover { text-decoration: none; }

  
    /* 誘導リンク　投稿のマスク */
    .p-bbs-mask-unit,
    .p-bbs-link-unit {
      position: relative;
    }
    .p-bbs-link-unit {
      border-bottom: 1px solid var(--bbs-color-border);
    }
    /* 上から重ねる誘導リンク */
    .p-bbs-link-unit-overlink {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
    }
    .p-bbs-link-unit:hover { opacity: 0.5;}
    .p-bbs-mask {
      -webkit-mask-image: linear-gradient(rgba(0,0,0,1) 5%, rgba(0,0,0,0) 70%);
      mask-image: linear-gradient(rgba(0,0,0,1) 5%, rgba(0,0,0,0) 70%);
      background-size: cover;
      height: 150px;
    }
    /* 投稿のマスクのボタン */
    .p-comment-button-box {
      display: flex;
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      width: 100%;
      align-items: flex-end;
      justify-content: center;
      z-index: 10;
    }
    .p-button-more {
      display: flex;           /* １．aタグをflex要素にする */
      justify-content: center; /* ２．左右中央 */
      align-items: center;     /* ３．上下中央 */
      background-color: var(--bbs-color-white);
      border: 1px solid var(--bbs-color-border) !important;
      border-radius: 4px;
      padding: 8px 0;
      width: 100%;
      max-width: 240px;
      font-size: var(--bbs-font-size-base);
      color: var(--bbs-color-text-main);
      font-weight: var(--bbs-font-bold);
      cursor: pointer;
  }
  .p-button-more:hover {
      background-color: var(--bbs-color-bg-lightgray);
      opacity: 1;
  }
  .p-comment-button-box a { color: var(--bbs-color-text-main) !important;}
  .p-comment-button-box a:hover { text-decoration: none !important;}
  .p-comment-button-box a:visited { color: var(--bbs-color-text-main) !important;}

  /* 記事用 - 掲示板誘導パーツ */
  .articleWrap .p-bbs-header {
    margin-top: 0.5rem !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  .articleWrap .p-bbs-header__subtitle {
    display: none;
  }
  .articleWrap .p-bbs-mask-unit,
  .articleWrap .p-bbs-link-unit {
      padding: 0 10px;
  }

    /* 掲示板全体 */
    .p-comment-board {
      background-color: var(--bbs-color-bg-lightgray);
      padding: 0.5rem 0.7rem;
    }

    /* コメント投稿フォーム */
    .p-comment-form__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }
    .p-comment-form__title {
      font-size: var(--bbs-font-size-base) !important;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 2px;
      font-weight: var(--bbs-font-bold);
    }
    .p-comment-form__title:before {
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url('/img/icons/icon_pen.svg') no-repeat center / contain;
    }

    /* コメント投稿 制限中のフォーム */
    .p-comment-board-limit {
      background-color: var(--bbs-color-bg-pink);
      padding: 0.8rem 0.7rem 0.5rem;
    }
    .p-comment-form__header-limit {
      text-align: center;
      margin: 0 auto 10px;
    }
    .p-comment-form__limitTtl {
      font-size: var(--bbs-font-size-base) !important;
      color: var(--bbs-color-attention);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2px;
      font-weight: var(--bbs-font-bold);
    }
    .p-comment-form__limitTtl:before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 18px;
      background-color: var(--bbs-color-attention);
      mask-image: url("/img/icons/icon_circle-exclamation.svg");
      -webkit-mask-image: url("/img/icons/icon_circle-exclamation.svg");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }

    .p-comment-form__limitBox {
      width: 100%;
      min-height: 60px;
      padding: 5px 10px;
      border-radius: 4px;
      background-color: #e1d9d9;
      color: var(--bbs-color-text-main);
    }

  /* ×ボタン：初期は非表示 */
    .p-comment-form__close {
      display: none; 
      padding: 5px;
    }
    .p-comment-form__close img {
      width: 18px;
      height: 18px;
      display: block;
    }
    .p-comment-form__body {
      display: flex;
      gap: 5px;
    }
    .p-comment-form__icon {
      width: 32px !important;
      height: 32px !important;
    }
    .p-comment-form__input-wrapper {
      flex-grow: 1;
    }

    .p-comment-form__input {
      width: 93%;
      border: 1px solid var(--bbs-color-border);x
      padding: 0.5rem;
      min-height: 80px;
      font-size: var(--bbs-font-size-base);
      line-height: 1.3;
      border-radius: 4px;
      resize: none;
      background-color: var(--bbs-color-white);
      transition: min-height 0.3s ease;
    }
    .p-comment-form__input::placeholder { color: var(--bbs-color-border); font-size: var(--bbs-font-size-base); }

    /* フッター：初期は非表示 */
    .p-comment-form__footer {
      display: none; 
      margin-top: 5px;
    }
    .p-comment-form__note {
      color: var(--bbs-color-attention);
      font-size: var(--bbs-font-size-ss);
      margin-bottom:0.5rem;
      line-height: 1.4;
    }
    .p-button--comment-post {
      padding: 10px 0;
      background-color: var(--bbs-color-primary);
      color: var(--bbs-color-white);
      border-radius: 5px;
      font-size: var(--bbs-font-size-base);
      font-weight: var(--bbs-font-bold);
      margin-bottom: var(--bbs-space-s);
      min-width: 240px;
    }
    /* アクティブ時 */
    .p-comment-form.is-active .p-comment-form__close {
      display: flex;
    }
    .p-comment-form.is-active .p-comment-form__footer {
      display: block;
    }
    .p-comment-form.is-active .p-comment-form__input {
      min-height: 120px;
    }

    /* p-comment-complete: コメント投稿完了メッセージ */
    .p-comment-complete {
      text-align: center;
      padding: 1rem;
    }
    .p-comment-complete__message {
      font-size: var(--bbs-font-size-base);
      font-weight: var(--bbs-font-bold);
      color: var(--bbs-color-text-main);
      line-height: 1.2;
      padding: 0;
      margin: 0 !important;
    }
    .p-comment-complete__link {
      display: inline-block;
      font-size: var(--bbs-font-size-ss);
      color: var(--bbs-color-text-main) !important;
      text-decoration: underline !important;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: opacity 0.2s;
    }
    .p-comment-complete__link:hover {
      opacity: 0.7;
    }

    /* ソートナビゲーション */
    .p-sort-nav {
      display: flex;
      align-items: center;
      padding-bottom: 5px;
      border-bottom: 1px solid var(--bbs-color-border);
    }
    .p-sort-nav__label {
      color: var(--bbs-color-text-main);
      font-size: 0.7rem;
      margin-right: 10px;
    }
    .p-sort-nav__list {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .p-sort-nav__item {
      display: flex;
      align-items: center;
    }
    .p-sort-nav__button {
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      font-size: var(--bbs-font-size-ss);
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: opacity 0.2s;
      color: var(--bbs-color-disable);
    }
    .p-sort-nav__separator {
      color: var(--bbs-color-text-sub);
      margin: 0 10px;
      font-size: var(--bbs-font-size-ss);
      user-select: none;
    }
    .p-sort-nav__item.is-active .p-sort-nav__button {
      color: var(--bbs-color-primary);
      cursor: default;
    }
    .p-sort-nav__item.is-disabled .p-sort-nav__button:hover {
      opacity: 0.7;
    }

    /* コメントアイテム */
    .p-comment-item {
      padding: 0.3rem 0 0.5rem;
      border-bottom: 1px solid var(--bbs-color-border);
    }
    .p-comment-item__header {
      display: flex;
      align-items: center;
      gap: var(--bbs-space-s);
      margin-bottom: 0.5rem;
      position: relative;
    }
    .p-comment-item__user-set {
      display: flex;
      align-items: center;
      gap:5px;
    }
    .p-comment-item__user-info {
      display: flex;
      flex-direction: column;
    }
    .p-comment-item__user-top {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .p-comment-item__user-name {
      font-weight: var(--bbs-font-bold);
      color: var(--bbs-color-link);
      font-size: var(--bbs-font-size-s);
    }
    .p-comment-item__date {
      font-size: 0.6rem;
      color: var(--bbs-color-text-sub);
    }
    .p-comment-item__actions-top {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .p-comment-item__body {
      font-size: var(--bbs-font-size-base);
      margin-bottom: var(--bbs-space-s);
      position: relative;
      margin: 0;
      padding: 0;
    }
    .p-comment-item__body-content {
      margin-top: 5px;
    }
    .p-comment-item__body-content p {
      margin: 0;
      line-height: 1.6;
      color: var(--bbs-color-pitch-black);
      font-size: var(--bbs-font-size-base);
      line-height: 1.5;
      /* 3行制限の基本設定 */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    /* 開いた時の状態（親要素に .is-open がついた時） */
    .p-comment-item__body.is-open .p-comment-item__body-content p {
      display: block; /* 制限を完全に解除 */
      -webkit-line-clamp: initial;
      height: auto;
      overflow: visible;
    }

    /* 続きを読むボタンのスタイル */
    .p-comment-item__label {
      display: block;
      width: 100%;
      text-align: right;
      color: var(--bbs-color-link);
      font-size: var(--bbs-font-size-ss);
      cursor: pointer;
      background: none;
      border: none;
      padding-right: 0.3rem;
    }
    .p-comment-item__label::before {
      content: '▼続きを読む';
    }
    /* 開いた時のテキスト切り替え */
    .p-comment-item__body.is-open .p-comment-item__label::before {
      content: '▲元に戻す';
    }
    .p-comment-item__label.is-hidden {
      display: none !important;
    }

    .p-comment-item__footer {
      margin-top: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* リアクション */
    .p-comment-item__reactions {
      display: flex;
      justify-content: flex-end;;
      gap: 12px;
    }
    .p-comment-item__reactions .reaction-set {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .p-comment-item__reactions .total {
      color: var(--bbs-color-reaction-off);
      font-size: var(--bbs-font-size-s);
    }

    /* リプライボタン */
    .p-reply-btn {
      padding: 4px 15px 4px 10px;
    }
    .p-reply-btn::before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 18px;
      background-color: var(--bbs-color-text-sub);
      mask-image: url("/img/icons/icon_angle-up.svg");
      -webkit-mask-image: url("/img/icons/icon_angle-up.svg");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
    .p-comment-unit.is-hidden .p-reply-btn::before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 18px;
      background-image: url('/img/icons/icon_angle-down.svg');
      -webkit-mask-image: url("/img/icons/icon_angle-down.svg");
      background-color: var(--bbs-color-text-sub);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }

    /* コメントユニット */
    .p-comment-unit {
      position: relative;
      padding-bottom: 10px;
      padding-top: 0 !important;
      border-bottom: 1px solid var(--bbs-color-border);
    }
    /* 最後のユニットだけ線を消すなどの処理 */
    /* .p-comment-unit:last-child {
      border-bottom: none;
    } */

    /* リプライ */
    .p-reply-container {
      display: grid;
      grid-template-rows: 1fr;
      transition: 
        grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s,
        margin 0.4s;
      overflow: hidden;
      margin-top: 15px; /* 開いている時の上余白 */
    }
    .p-reply-container > * {
      min-height: 0 !important;
    }
    /* 閉じている状態（親にクラスがついた時） */
    .p-comment-unit.is-hidden .p-reply-container {
      grid-template-rows: 0fr; /* 高さを完全に0にする */
      opacity: 0;
      margin: 0;           /* 上の余白も消す */
      padding: 0;       /* 下の余白も消す */
      visibility: hidden;      /* 完全に存在を消すための保険 */
    }
    .p-reply-wrapper {
      min-height: 0;
    }
    /* 返信が閉じている時は、メイン投稿の下線と余白を消して次のユニットと密着させる */
    .p-comment-unit.is-hidden .p-comment-item {
      padding-bottom: 0;
      border-bottom: none;
      margin-bottom: 0;
    }
    .js-bbs-muted-placeholder-row {
      padding-bottom: 10px;
      border-bottom: 1px solid var(--bbs-color-border);
    }

    .p-reply-item {
      display: flex;
      gap: 5px;
      padding: 0;
      margin-bottom: 0.8rem;
      position: relative; /* 縦線の基準位置 */
    }
    .p-reply-item::before {
      content: "";
      position: absolute;
      /* top: padding-top + avatar-height */
      top: calc(10px + 28px); 
      /* left: (avatar-width / 2) - (line-width / 2) */
      left: calc((28px / 2) - 1px); 
      width: 2px;
      /* height: 全体 - アバター下までの距離 */
      height: calc(100% - (10px + 25px));
      background-color: var(--bbs-color-border);
      pointer-events: none;
    }
    .p-reply-item__main {
      flex: 1;
      margin-left: 5px;
      min-width: 0; /* mainコンテンツが線に重ならないようにする */
    }

    .p-reply-item__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.2rem;
      margin-bottom: 0.3rem;
    }
    .p-reply-item__user-info {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .p-reply-item__username {
      font-weight: bold;
      color: var(--bbs-color-link);
      font-size: var(--bbs-font-size-ss);
    }
    /* リプライフッター */
    .p-reply-item__footer {
      margin-top: 5px;
      display: flex;
      gap: 0;
      justify-content: flex-end;
    }

    /* リプライフォーム*/
    .p-reply-form__header {
      display: none; /* 初期状態は非表示 */
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      padding-right: 10px;
    }
    .p-reply-form__title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: bold;
    }
    .p-reply-form__close {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      margin: -8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .p-reply-form__close .icons {
      width: 18px;
      height: 18px;
      display: block;
      pointer-events: none;
    }
    .p-reply-form__main {
      display: flex;
      gap: 5px;
    }
    .p-reply-box {
      flex-grow:1;
    }

    /*p-form-control: 入力フィールド */
    .p-reply-form-control {
      width: 90%;
      padding: 10px;
      font-size: 1rem;
      border: 1px solid var(--bbs-color-border);
      border-radius: 4px;
      transition: border-color 0.2s;
      resize: none;
      min-height: 80px;
    }
    .p-reply-form-control::placeholder {
      color: var(--bbs-color-border);
      font-size: var(--bbs-font-size-base);
    }
    .p-reply-form-control:focus {
      outline: none;
      border-color: var(--bbs-color-border);
    }
    .p-reply-form__footer {
      display: none; /* 初期は非表示 */
      margin-top: 5px;
    }
    .p-reply-form__note {
      color: var(--bbs-color-attention);
      font-size: var(--bbs-font-size-ss);
      margin-bottom: var(--bbs-space-s);
      line-height: 1.4;
    }

    /* State: is-active (フォーカス時または入力あり) */
    .p-reply-form.is-active .p-reply-form__header {
      display: flex;
    }
    .p-reply-form.is-active .p-reply-form__footer {
      display: block;
    }
    .p-reply-form.is-active .c-form-control {
      min-height: 80px;
    }

    .p-button--reply-post {
      padding: 10px 0;
      background-color: var(--bbs-color-primary);
      color: var(--bbs-color-white);
      border-radius: 5px;
      font-size: 1rem;
      font-weight: var(--bbs-font-bold);
      margin-bottom: var(--bbs-space-s);
      min-width: 240px;
    }

    /* 非表示・通報ボタン */
    .p-comment-item__hide-report {
      display: flex;
      justify-content: flex-end;
    }
    .p-comment-item__HideRep {
      position: relative; /* 追加：吹き出しの基準点にする */
      cursor: pointer;    /* 追加：クリック可能であることを示す */
      color: var(--bbs-color-text-sub);
      font-size: 0.6rem;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 1px;
      line-height: 1.5;
    }

  .p-comment-item__HideRep::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("/img/icons/icon_ban.svg");
  background-color: transparent;
  opacity: 20%;
}
    /* 非表示状態のクラス */
    .HideRep.is-hidden {
      display: none;
    }
    /* 吹き出しの基本スタイル */
    .HideRep {
      position: absolute;
      z-index: 10;        /* 数値を少し上げると安全です */
      padding: 15px 15px;
      border-radius: 3px;
      background-color: var(--bbs-color-white);
      width: 280px;
      right: 0;
      top: 100%;          /* 親要素のすぐ下に配置 */
      color: var(--bbs-color-text-main);
      border: 1px solid var(--bbs-color-border);
      display: block;     /* 基本は表示 */
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    .HideRep > * {
      padding-bottom: 10px;
      font-size: var(--bbs-font-size-s);
    }
    .HideRep p:last-child {
      padding-bottom: 0;
      margin-bottom: 0;
    } 
    .HideRep button:hover {
      opacity: 0.5;
    }
    .HideRep a { color: var(--bbs-color-text-main) !important;}
    .HideRep a:hover { text-decoration: none !important; opacity: 0.5;}
    .HideRep a:visited { color: var(--bbs-color-text-main) !important;}

    /* PC用DBindex 横ならび */
    .p-db-bbs-lead {
      float: right;
      width: 460px;
      padding-top: 16px;
    }
    /* ユーザーページ/マイページ　プロフィールセクション */
    .p-bbs-profile {
      padding: 0 0 10px;
      border-bottom: 1px solid var(--bbs-color-border);
    }

    .p-bbs-profile__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .p-bbs-profile__user-info {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .p-bbs-profile__user-icon {
      width: 45px !important;
      height: 45px !important;
    }
    .p-bbs-profile__name-wrap {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .p-bbs-profile__name {
      font-size: var(--bbs-font-size-m);
      font-weight: bold;
      color: var(--bbs-color-accent-blue);
    }

    .p-bbs-profile__actions {
      text-align: right;
    }

    .p-bbs-profile__report {
      display: block;
      font-size: var(--bbs-font-size-xs);
      color: var(--bbs-color-text-sub);
      margin-bottom: var(--bbs-space-xs);
      text-decoration: none;
    }

    .p-bbs-profile__stats {
      display: flex;
      justify-content: space-around;
      text-align: center;
      margin-bottom: 10px;
      padding: 0;
    }

    .p-bbs-profile__stat-item {
      flex: 1;
    }
    .p-bbs-profile__stat-item a:link { color: var(--bbs-color-text-main); }
    .p-bbs-profile__stat-item a:visited { text-decoration: none; }
    .p-bbs-profile__stat-item a:hover { text-decoration: none; }
    .p-bbs-profile__stat-item a:active { text-decoration: none; }

    .p-bbs-profile__stat-num {
      display: block;
      font-size: var(--bbs-font-size-l);
      font-weight: var(--bbs-font-bold);
      color: var(--bbs-color-text-main);
    }
    .p-bbs-profile__stat-label {
      display: block;
      font-size: var(--bbs-font-size-ss);
      color: var(--bbs-color-text-sub);
    }

    .p-bbs-profile__reaction-summary {
      display: flex;
      justify-content:flex-end;
      gap: var(--bbs-space-m);
      padding: var(--bbs-space-s);
      font-size: var(--bbs-font-size-ss);
      color: var(--bbs-color-text-sub);
    }
    .p-comment-item__reactions .reaction-total {
      color: var(--bbs-color-text-sub);
      font-size: 0.8rem;
    }

    /* ブロック関連 */
    .p-comment-item__block {
      display: flex;
      justify-content: flex-end;
      font-size: 0.7rem;
      color: var(--bbs-color-text-sub);
      line-height: 1.4;
    }
    .p-comment-item__block a {
      color: var(--bbs-color-text-sub) !important;
    }
    .p-comment-item__block a::before {
      content: "";
      display: inline-block;
      width: 14px;
      height: 14px;
      position:relative;
      top: 3px;
      background-color: var(--bbs-color-text-sub);
      mask-image: url("/img/icons/icon_ban.svg");
      -webkit-mask-image: url("/img/icons/icon_ban.svg");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
    .p-comment-item__block a:hover {
      text-decoration: none;
      color: var(--bbs-color-text-sub);
      opacity: 0.5;
    }
    .p-comment-item__block a:visited {
      text-decoration: none;
      color: var(--bbs-color-text-sub);
    }
    .p-bbs-block-title {
      font-size: var(--bbs-font-size-base) !important;
      font-weight: var(--bbs-font-bold);
      color: var(--bbs-color-text-main);
      margin-bottom: 5px;
    }
    .p-bbs-block-info {
      font-size: var(--bbs-font-size-s);
      color: var(--bbs-color-text-main);
      padding-bottom: 10px;
    }
    .p-bbs-blockCancel {
      padding: 0.3rem 0.5rem 0.3rem 0.6rem;
      font-size: 0.7rem;
    }
    .p-bbs-blockCancel::before {
      content: "";
      display: inline-block;
      width: 9px;
      height: 9px;
      margin-right: 2px;
      background-color: var(--bbs-color-text-sub);
      mask-image: url("/img/icons/icon_xmark.svg");
      -webkit-mask-image: url("/img/icons/icon_xmark.svg");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }


    /* フィードアイテム */
    .p-bbs-past-list {
      /* 必要があれば */
    }
    .p-bbs-past-item__topics-info {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding-top: 5px;
      margin-bottom: 5px;
    }
    .p-bbs-past-item__topics-thumb {
      width: auto !important;
      height: 45px;
    }
    .p-bbs-past-item__topics-box {
      height: 45px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .p-bbs-past-item__topics-title {
      font-size: var(--bbs-font-size-s) !important;
      font-weight: bold;
      color: var(--bbs-color-link);
      margin-bottom: 0;
      line-height: 1.5;
    }
    .p-bbs-past-item__meta {
      display: flex;
      gap: 6px;
      align-items: center;
      font-size: 0.6rem;
      color: var(--bbs-color-text-sub);
      padding: 0;
      margin: 0;
    }
    .p-bbs-past-item__meta span {
      line-height: 1.5 !important;
    }

    /* フォロー/フォロワー一覧 */
    .p-bbs-follow__list {
      margin-top: 15px;
    }
    .p-bbs-follow__list li {
      margin-bottom: 15px;
    }
    .p-bbs-follow__list li:last-child {
      margin-bottom: 0;
    }

    /* ======== なんでも掲示板関連 ======== */
    /* リクエストボックス */
    .p-bbs-request-box {
      padding: 1rem 0 1.2rem;
      text-align: center;
      background-color: var(--bbs-color-bg-lightgray);
      }

    .p-bbs-request-box__title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: var(--bbs-font-size-base) !important;
      font-weight: var(--bbs-font-bold);
      margin-bottom: 5px;
    }
    .p-bbs-request-box__title img {
      width: 20px;
      height: 20px;
      filter:brightness(0) saturate(100%) invert(55%) sepia(79%) saturate(444%) hue-rotate(74deg) brightness(91%) contrast(93%);
    }

    .p-bbs-request-box__text {
      font-size: var(--bbs-font-size-ss);
      margin-bottom: 15px;
      }
    .p-bbs-request-button {
      font-size: var(--bbs-font-size-base);
      font-weight: var(--bbs-font-bold);
      color: var(--bbs-color-link);
      padding: 0.5rem 1.2rem;
      background-color: var(--bbs-color-white);
      border: 1px solid var(--bbs-color-link) !important;
      border-radius: 4px;
      cursor: pointer;
    }
    .p-bbs-request-button:hover { background-color: var(--bbs-color-link); color: var(--bbs-color-white) !important; text-decoration: none; opacity: 1; transition : 0.2s;}
    .p-bbs-request-button:visited { color: var(--bbs-color-link);}

    /* スレッドリスト */
    .p-bbs-free-list {
        margin-top: 5px;
      }
    .p-bbs-free-list a:hover{ text-decoration: none;}
    .p-bbs-free-item {
        display: flex;
        padding: 10px 0 5px;
        border-bottom: 1px solid var(--bbs-color-border);
        gap: 10px;
        color: inherit;       /* テキスト色を継承 */
        transition: background-color 0.2s;
    }
    .p-bbs-free-item:last-child {
        border-bottom: none;
    }
    .p-bbs-free-item__thumb {
        width: 50px !important;
        height: 50px !important;
        object-fit: cover;
        border-radius: 4px;
    }

    .p-bbs-free-item__content {
        flex: 1;
    }

    .p-bbs-free-item__header {
        display: flex;
        align-items: baseline;
        gap: 5px;
        margin-bottom: 2px;
    }

    .p-bbs-free-item__title {
        color: var(--bbs-color-text-main);
        font-weight: bold;
        font-size: var(--bbs-font-size-base) !important;
        line-height: 1.4;
    }

    .p-bbs-free-item__desc {
        font-size: var(--bbs-font-size-ss);
        color: var(--bbs-color-text-main);
        line-height: 1.7 !important;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 任意の行数を指定 */
        line-clamp: 3;
    }

    .l-thread-theme .p-bbs-free-item__desc {
        -webkit-line-clamp: none !important;
        line-clamp: none !important;
        line-height:1.5 !important;
    }

    .p-bbs-free-item__footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        font-size: 0.7rem;
        line-height: 1.5 !important;
    }
    .p-bbs-free-item__footer span {
        color: var(--bbs-color-text-sub) !important;
    }
    
    /* ======== 通報ページ ======== */
    .p-bbs-report__section {
      padding-bottom: 25px;
    }
    .p-bbs-report__section p {
      font-size: var(--bbs-font-size-base);
      margin: 0;
      padding: 0;
    }
    .p-bbs-report__header {
      text-align: center;
      padding: 0.5rem 0;
      background-color: var(--bbs-color-bg-lightgray);
      border-bottom: 1px solid var(--bbs-color-border);
      font-weight: bold;
      font-size: var(--bbs-font-size-base);
    }
    .p-bbs-report__body {
      padding: 1.5rem 1rem;
    }
    .p-bbs-report__sectionTtl {
      font-size: var(--bbs-font-size-base);
      font-weight: bold;
      padding-left: 8px;
      margin-bottom: 10px;
      line-height: 1.2;
    }
    .p-bbs-report__sectionTtl-gray {
      border-left: 4px solid var(--bbs-color-text-sub);
    }
    .p-bbs-report__sectionTtl-red {
      border-left: 4px solid var(--bbs-color-attention);
    }

    .p-bbs-report__sectionTtl .add {
      font-size: var(--bbs-font-size-ss);
      font-weight: normal;
    }
    .p-bbs-report__sectionTtl-comp {
      text-align: center;
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .p-bbs-report__card {
      border: 1px solid var(--bbs-color-border);
      border-radius: 5px;
      padding: 0.8rem;
    }

    /* 通報対象のデータ行 */
    .p-bbs-report__data {
      font-size: var(--bbs-font-size-s);
      margin-bottom: 0.2rem;
    }
    .p-bbs-report__dataLabel {font-weight: normal;}
    .p-bbs-report__dataValue {font-weight: bold;}

    .p-report-data__footer {
      margin-top: 5px !important;
      font-size: var(--bbs-font-size-ss) !important;
      color: var(--bbs-color-text-sub);
    }
    .p-report-data__content {
      color: var(--bbs-color-text-main);
      font-size: var(--bbs-font-size-s);
    }
    .p-bbs-report__textarea {
    }
    .p-bbs-report-textarea {
      background-color: var(--bbs-color-white) !important;
      min-height: 120px !important;
      box-sizing: border-box;
    }
    .p-bbs-report-textarea::placeholder {
      font-size: var(--bbs-font-size-s);
    }
    .p-bbs-report-textarea:focus {
      outline: none;
      border: 2px solid var(--bbs-color-text-sub);
    }

    /* 注意事項ボックス */
    .p-bbs-report__alert {
      background-color: var(--bbs-color-bg-lightgray);
      padding: 0.8rem;
      border-radius: 4px;
      font-size: var(--bbs-font-size-s);
    }

    .p-bbs-report__alertTtl {
      font-size: var(--bbs-font-size-base);
      color: var(--bbs-color-attention);
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom: 5px;
    }
    .p-bbs-report__alertTtl::before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-right: 5px;
      -webkit-mask-image: url("/img/icons/icon_circle-exclamation.svg");
      background-color: var(--bbs-color-attention) !important;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }

    .p-bbs-report__alert ol {
      margin: 0;
      padding: 0;
    }
    .p-bbs-report__alert ol li {
      margin-bottom: 10px;
    }
    .p-bbs-report__alertTtl-gray {
      color: var(--bbs-color-text-sub);
      font-weight: bold;
    }

    /* アクションボタンエリア */
    .p-bbs-report__actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding-top: 10px;
    }
    .p-bbs-report__actionsBtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.8rem 0;
      font-size: var(--bbs-font-size-base);
      font-weight: bold;
      border-radius: 4px !important;
      cursor: pointer;
      transition: opacity 0.2s;
      text-decoration: none;
    }
    .p-bbs-report__actionsBtn:hover {
      opacity: 0.7;
    }
    .p-bbs-report__actions .report-Btn {
      background-color: var(--bbs-color-attention);
      color: var(--bbs-color-white);
    }
    .p-bbs-report__actions .cancel-Btn {
      background-color: var(--bbs-color-text-sub);
      color: var(--bbs-color-white);
    }
    .p-bbs-report__actions .back-Btn {
      background-color: var(--bbs-color-white);
      color: var(--bbs-color-text-main);
      border: 1px solid var(--bbs-color-border) !important;
    }
    .p-bbs-report__actions .link-Btn {
      background-color: var(--bbs-color-link);
      color: var(--bbs-color-white);
    }


    /* ======== 警告ページ ======== */
    .p-notice-header {
      text-align: center;
      padding: 0.5rem;
    }
    .p-notice-header .title {
      font-size: 1.2rem;
      font-weight: var(--bbs-font-bold);
    }
    .p-notice-header .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-weight: bold;
    }
    .p-notice-header .icon::before {
      content: "";
      display: inline-block;
      width: 22px;
      height: 22px;
      margin-right: 5px;
      mask-image: url("/img/icons/icon_circle-exclamation.svg");
      -webkit-mask-image: url("/img/icons/icon_circle-exclamation.svg");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }

    .p-notice-header-ichiji {
      background-color: var(--bbs-color-bg-pink);
      color: var(--bbs-color-pitch-black);
    }
    .p-notice-header-ichiji .icon {color: var(--bbs-color-attention);}
    .p-notice-header-ichiji .icon::before {background-color: var(--bbs-color-attention);}
  
    .p-notice-header-muki {
      background-color: var(--bbs-color-attention);
      color: var(--bbs-color-white);
    }
    .p-notice-header-muki .icon {color: var(--bbs-color-white);}
    .p-notice-header-muki .icon::before {background-color: var(--bbs-color-white);}    

    /* 制限詳細情報の並び */
    .p-restriction-info {
      padding: var(--bbs-space-m) 0 0;
      border-top: 1px solid var(--bbs-color-border);
      border-bottom: 1px solid var(--bbs-color-border);
    }
    .p-bbs-report__limit-item {
      margin-bottom: 15px;
    }
    .p-bbs-report__limit-label {
      color: var(--bbs-color-attention);
      font-weight: bold;
      display: block;
      border-left: 4px solid var(--bbs-color-attention);
      padding-left: 7px;
      line-height: 1.2;
      margin-bottom: 5px;
    }
    .p-bbs-report__limit-item ul li {
      list-style-type: disc;
      margin-left: 15px;
      font-size: var(--bbs-font-size-base);
    }

  /* ==========================================================================
       /mypage/用のタグ
    ========================================================================== */

    .p-profile-upload {
      margin-bottom: 30px;
    }
    .p-icon-mypageBox {
      margin-bottom: 10px;
    }
    .c-icon-mypage {
      width: 100px;
      height: 100px;
      background-color: var(--bbs-color-text-sub);
      border-radius: 100px;
      overflow: hidden;
      margin: 0 auto;
    }

    .c-icon-preview__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .c-icon-preview__placeholder {
      width: 60%;
      fill: #9ca3af;
    }

    .p-profile-upload__action {
      text-align: center;
      margin: 0 60px;
    }
    .c-button--upload-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 10px 0;
      background-color: #4caf50;
      color: var(--bbs-color-white) !important;
      border: none;
      border-radius: 3px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.2s;
      text-decoration: none;
      width: 100%; /* Project側で制御も可能だが、画像に合わせ基本100%とする */
    }

    .c-button--upload-icon::before {
      content: "";
      width: 20px;
      height: 20px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
    }

    /* Step List: 手順リスト */
    .p-profile-upload-stepList {
      margin: 0;
      padding: 0.8rem;
      list-style: none;
      background-color: var(--bbs-color-bg-lightgray);
    }
    .p-profile-upload-stepList li {
      font-size: var(--bbs-font-size-s);
    }
    .p-profile-upload-stepList li .num {
      font-weight: bold;
      font-size: var(--bbs-font-size-base);
    }

    /* プロフィールアップロード特有の構造を管理 */
    .p-profile-upload__section {
      margin-bottom: 1rem;
    }

    .p-profile-upload__preview-wrapper {
      display: flex;
      justify-content: center;
      padding: 1rem 0 0;
    }

    .p-profile-upload__note {
      font-size: var(--bbs-font-size-s);
      color: var(--bbs-color-text-sub);
      margin: 10px 0 15px;
    }

    .p-profile-upload__input {
      display: none; /* 実際のinputは隠す */
    }
    .p-profile-upload__guide {
      margin-top: 15px;
    }
    .p-profile-upload__guideTtl {
      font-size: var(--bbs-font-size-base) !important;
      color: var(--bbs-color-text-main);
      font-weight: bold;
      margin-bottom: 5px;
    }




  /* ==========================================================================
       リクエストフォームページ
    ========================================================================== */
    
    /* Badge */
    .p-reqform__badge {
      display: inline-block;
      padding: 2px 6px;
      font-size: 10px;
      font-weight: bold;
      color: var(--bbs-color-white);
      border-radius: 3px;
      vertical-align: middle;
      line-height: 1.2;
    }
    .p-reqform__badge.required {
      background-color: #fb2c36;
    }
    .p-reqform__badge.optional {
      background-color: #999999;
    }

    /* Form Labels & Counter */
    .p-request-form__header {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 5px;
    }
    .p-request-form__label {
      font-weight: bold;
      font-size: var(--bbs-font-size-s);
    }
    .p-request-form__counter {
      font-size: 0.8rem;
      color: var(--bbs-color-text-sub);
      margin-left: auto;
    }

    /* Buttons */
    .p-request-box__action-button {
      background-color: var(--bbs-color-primary);
      color: var(--bbs-color-white) !important;
      border-radius: 3px;
      width: 100%;
      padding: 12px 0;
      font-size: 1rem;
      font-weight: bold;
    }

    /* タグ */
    .p-request-form__tag-list {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .p-request-form__tag-list .tag {
      padding: 4px 16px;
      border: 1px solid var(--bbs-color-border) !important;
      border-color: var(--bbs-color-primary);
      border-radius: 100px;
      background-color: var(--bbs-color-white);
      cursor: pointer;
      font-size: var(--bbs-font-size-s);
    }

    /* State: アクティブ（JSで制御） */
    .p-request-form__tag-list .tag.is-active {
      background-color: var(--bbs-color-primary);
      color: var(--bbs-color-white);
      border-color: var(--bbs-color-primary) !important;
    }

    /* アイコンアップローダー（特殊なボタン） */
    .c-uploader {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 0;
      border: 2px solid var(--bbs-color-primary);
      border-radius: 100px;
      color: var(--bbs-color-primary);
      font-weight: bold;
      cursor: pointer;
      background: transparent;
    }

    .c-uploader__input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
    }

    .c-uploader__input span::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      background-color: var(--bbs-color-primary);
      mask-image: url("/public/img/icons/icon_camera.svg");
      -webkit-mask-image: url("/public/img/icons/icon_camera.svg");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }

    .p-request-form-cont {
      padding: 1rem 1rem;
    }

    .p-request-box {
      background-color: var(--bbs-color-white);
      padding: var(--bbs-space-l);
      border-radius: var(--radius-m);
    }

    .p-request-box__title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 22px;
      margin-bottom: var(--bbs-space-xl);
      color: #444;
    }

    .p-request-box__field {
      margin-bottom: 1.5rem;
    }

    .p-request-box__action {
      margin-top: 1rem;
    }

    /* SVG Icon Style */
    .p-request-box__icon {
      width: 28px;
      height: 28px;
      fill: var(--bbs-color-gray);
    }






    /* ==========================================================================
       PC版タグ
    ========================================================================== */
    @media (min-width: 767px) {
    .p-bbs-container .l-section {
      padding: 10px 20px 0 !important;
    }
    .c-headline__title {
      padding: 0.5rem;
      max-width: 800px;
      margin: 0 auto;
    }
    /* バッジ */
    .c-badge {
      padding: 3px 5px;
    }
    /* 掲示板誘導パーツ */
    .p-bbs-header {
      display: flex;
      flex-direction:row-reverse;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0;
      border-top: 2px solid var(--bbs-color-primary);
      border-bottom: 2px solid var(--bbs-color-primary);
      margin-top: 10px;
      margin-bottom: 0 !important;
      }
    .p-bbs-header__title {
      font-size: 0.8rem !important;
    }
    .p-bbs-header__title:before {
      width: 18px;
      height: 18px;
    }
    .p-bbs-header__subtitle {
      font-size: 1rem !important;
      color: var(--bbs-color-primary);
    }

    .p-topics-bbs-container {
      width: 500px;
      margin: 0 auto;
      padding: 0 20px;
      border: 1px solid var(--bbs-color-border);
      border-radius: 6px;
    }
    .p-topics-bbs-container .p-bbs-header {
      display: flex;
      justify-content: start;
      align-items: center;
      padding: 0 0 0.3rem;
      border-bottom: 1px solid var(--bbs-color-border);
      margin-top: 0.8rem;
      margin-bottom: 5px !important;
      border-top: none;
      }
    .p-topics-bbs-container .p-bbs-header__title {
      font-size: var(--bbs-font-size-base) !important;
      display: flex;
      align-items: center;
      gap: 2px;
      font-weight: var(--bbs-font-bold);
      color: var(--bbs-color-link);
    }
    .p-topics-bbs-container .p-bbs-header__title:before {
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: var(--bbs-color-link) !important;
      mask-image: url("/img/icons/icon_pen.svg");
      -webkit-mask-image: url("/img/icons/icon_pen.svg");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
    .p-topics-bbs-container .p-bbs-header__subtitle {
      display: none;
    }
    .p-topics-bbs-container .p-comment-item__body-content p {
      font-size: 0.8rem;
      line-height: 1.5;
      max-height: 54px;
    }

    /* コメントアイテム */
    .p-comment-item {
      padding: 0.3rem 0 0.5rem;
      border-bottom: 1px solid var(--bbs-color-border);
    }
    
    .p-comment-item__header {
      display: flex;
      justify-content: space-between;
      gap: 0;
      margin-bottom: 0.2rem;
      position: relative;
    }
    .p-comment-item__actions-top {
      display: none;
    }
    .p-comment-unit.is-hidden .p-comment-item {
      padding-top:0;
    }
    .p-comment-form__icon {
      width: 28px !important;
      height: 28px !important;
    }
    .p-comment-item__body-content p {
      font-size: 0.8rem;
      line-height: 1.6;
    }

    /* 続きを読むボタンのスタイル */
    .p-comment-item__label {
      font-size: 0.7rem;
      padding-right: 0;
    }
    /* 非表示・通報ボタン */
    .p-comment-item__HideRep {
      line-height: 1;
    }
    /* ボタン（リアクション） */
    .p-comment-item__reactions .reaction {
      width: 15px;
      height: 15px;
    }
    /* リアクション */
    .p-comment-item__reactions {
      display: flex;
      gap: 5px;
    }
    .p-comment-item__reactions .total {
      font-size: 0.8rem !important;
    }
    /* リプライボタン */
    .p-reply-btn {
      padding: 2px 10px 2px 5px;
    }
    /* 投稿のマスク */
    .p-bbs-mask {
      height: 130px;
    }
    .p-button-more {
      padding: 6px 0;
      max-width: 200px;
      border: 1px solid #999999 !important;
      background-color: var(--bbs-color-white);
  }

    /* DB indexに適応されるcss */
    .wrapper_horsedb .p-comment-unit {
      padding-top: 5px !important;
    }

    .wrapper_horsedb .p-bbs-header {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: center;
      padding: 0 0 3px;
      border-bottom: 2px var(--bbs-color-primary) solid;
      border-top: none;
      margin-top: 0;
      margin-bottom: 0 !important;
      }
    .wrapper_horsedb .p-bbs-header__subtitle {
      font-size: 1rem;
      color: var(--bbs-color-text-main);
    }
    .wrapper_horsedb .p-comment-unit.is-hidden .p-comment-item {
      padding-top: 0;
    }
    .wrapper_horsedb .p-comment-item__body-content p {
      font-size: 0.8rem;
      line-height: 1.5;
      max-height:54px;
    }
    .wrapper_horsedb .p-bbs-mask {
      height: 110px;
    }

    /* ======== 掲示板内 ======== */
    #mainWrap_bbs .heading01 {
      padding:0 0 4px;
    }
    /* バッジ */
    #mainWrap_bbs .c-badge {
      padding: 4px 6px;
    }
    #mainWrap_bbs .p-comment-item__header {
      display: flex;
      justify-content: space-between;
      gap: 0;
      margin-bottom: 0.2rem;
      position: relative;
    }
    #mainWrap_bbs .p-comment-form__body {
      display: flex;
      gap: 10px;
    }

    /* コメントアイテム */
    #mainWrap_bbs .p-comment-board {
      background-color: var(--bbs-color-bg-lightgray);
      padding: 0.5rem 1rem 1rem;
    }

    #mainWrap_bbs .p-comment-item__actions-top {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    #mainWrap_bbs .p-comment-item__date {
      font-size: 0.7rem;
    }
    #mainWrap_bbs .p-comment-unit.is-hidden .p-comment-item {
      padding-top:5px;
    }
    #mainWrap_bbs .p-comment-item__body-content p {
      font-size: 1rem;
      line-height: 1.6;
    }
    /*p-form-control: 入力フィールド */
    #mainWrap_bbs .p-reply-form-control {
      width: 95%;
    }
    #mainWrap_bbs .p-comment-form__input {
      width: 95%;
      max-width: 470px;
      border: 1px solid var(--bbs-color-border);
      padding: 0.5rem;
      min-height: 80px;
      font-size: var(--bbs-font-size-base);
      line-height: 1.3;
      border-radius: 4px;
      resize: none;
      background-color: var(--bbs-color-white);
      transition: min-height 0.3s ease;
    }

    /* 続きを読むボタンのスタイル */
    #mainWrap_bbs .p-comment-item__label {
      font-size: 0.8rem;
      padding-right: 0;
    }
    /* 非表示・通報ボタン */
    #mainWrap_bbs .p-comment-item__HideRep {
      line-height: 1.5;
      margin-bottom: 2px;
    }
    /* ボタン（リアクション） */
    #mainWrap_bbs .p-comment-item__reactions .reaction {
      width: 20px;
      height: 20px;
    }
    /* リアクション */
    #mainWrap_bbs .p-comment-item__reactions {
      display: flex;
      gap: 12px;
    }
    #mainWrap_bbs .p-comment-item__reactions .reaction-set .total {
      font-size: var(--bbs-font-size-s);
    }
    /* リプライボタン */
    #mainWrap_bbs .p-reply-btn {
      padding: 4px 15px 4px 10px;
    }
    /* リプライフォーム*/
    #mainWrap_bbs .p-reply-form__header {
      padding-right: 5px;
    }

    /* ======== マイページ関連 ======== */
    .p-bbs-profile__stats {
      margin-bottom: 15px;
      padding: 0 50px;
    }
    .p-bbs-profile__stat-num {
      line-height: 1.2;
    }
    .p-bbs-profile {
      padding: 10px 0 10px;
    }
    .p-comment-item__reactions .reaction-total-img {
      background: none;
    }
    .p-bbs-past-item__topics-info {
      margin-bottom: 10px;
    }
    .p-bbs-past-item__meta {
      font-size: 0.7rem;
    } 
    .p-bbs-past-item__meta span {
      margin: 0 !important;
      color: var(--bbs-color-text-sub) !important;
    }
    .c-bbs-tabs {
      padding-top: 15px;
      gap: 10px;
    }

    .p-bbs-block-title {
      font-size: 1.2rem;
      margin-top: 20px;
    }

    /* ======== リクエストフォーム ======== */
    .p-request-form-cont {
      padding: 1rem 2rem 2rem;
    }
    .p-request-box__action-button {
      width: 320px;
    }
    .p-request-box__action {
      margin-top: 1rem;
      text-align: center;
    }

    /* ======== なんでも掲示板関連 ======== */
    .p-bbs-rank-icon {
      background: #6666B3;
      border-radius: 50%;
      width: 1.5rem !important;
      height: 1.5rem !important;
      top: 5px;
    }

    .p-bbs-rank-icon .num {
    position: absolute !important;
    top: 17%;
    left: 0;
    right: 0;
    line-height: 1rem !important
    }

    /* BBS内のデータベース検索 */
    #mainWrap_bbs .databaseSearch {
      background-color: #000000;
      margin: 20px auto;
      padding: 16px 10px;
      border-radius: 3px;
    }
    #mainWrap_bbs .searchBox .p-bbs-search_list1 {
      padding-left: 0;
      display: grid;
      grid-template-columns: 150px 280px 100px;
      align-items: center;
      margin-bottom: 5px;;
    }
    #mainWrap_bbs .searchBox .p-bbs-search_list1 li {
      list-style: none;
      display: flex;
      justify-content: flex-start !important;
      align-items: center;
      grid-template-rows: subgrid;
    }
    #mainWrap_bbs .searchDB {
      font-weight: bold;
      color: #ffffff;
      padding-bottom: 5px;
    }
    #mainWrap_bbs .searchBox .p-bbs-search_list1 .dbstxt {
      width:280px;
      margin-left: 0;
      height: 28px;
    }

    #mainWrap_bbs .searchBox .p-bbs-search_list2 {
      display: grid;
      place-items: center;
      place-content: center;
      grid-template: repeat(2, auto) / repeat(2, auto);
    }
  }