/* BMS8 Laravel移植 - メインCSS (元SCSSから変換) */

/* ---- BODY / LAYOUT ---- */
body {
    padding-top: 50px;
    font-size: 13px;
    font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* ---- NAVBAR / HEADER ---- */
.navbar.header {
    border-radius: 0;
    border-bottom: none;
    background-color: #1a1a1a;
    border-color: #111;
    font-size: 13px;
    min-height: 50px;
}

/* navbar-inverse のデフォルト背景を上書き */
.navbar-inverse.header {
    background-color: #1a1a1a;
    border-color: #111;
}

.navbar-inverse.header .navbar-nav > li > a {
    color: #ddd;
    font-weight: 700;
}

.navbar-inverse.header .navbar-nav > li > a:hover,
.navbar-inverse.header .navbar-nav > li > a:focus {
    color: #fff;
    background-color: rgba(255,255,255,.08);
}

.navbar-inverse.header .navbar-right > li > a {
    color: #ccc;
}

.navbar-inverse.header .navbar-right > li > a:hover {
    color: #fff;
    background-color: transparent;
}

.navbar-inverse.header .navbar-toggle {
    border-color: #555;
}

.navbar-inverse.header .navbar-toggle .icon-bar {
    background-color: #ccc;
}

.navbar.header .container-fluid {
    max-width: 1200px;
}

.navbar.header .navbar-brand {
    padding: 9px 15px 8px;
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -1px;
}

.navbar.header .navbar-brand:hover {
    color: #ccc;
}

.navbar.header .navbar-nav {
    font-weight: 700;
}

@media (min-width: 768px) {
    .navbar.header .navbar-nav > li > a {
        padding-left: 8px;
        padding-right: 8px;
    }
    .navbar.header .navbar-right > li > a {
        padding-left: 6px;
        padding-right: 6px;
    }
}

.navbar.header .post-btn {
    display: inline-block;
    margin: 8px 10px 0;
    padding: 5px 14px;
    color: #fff;
    background-color: #4A90E2;
    border-radius: 10em;
    text-decoration: none;
    font-weight: 700;
    transition: 250ms;
}

.navbar.header .post-btn:hover {
    color: #fff;
    background-color: #1a5fac;
    text-decoration: none;
}

.navbar.header .bg-thumb {
    width: 33px;
    height: 33px;
    border-radius: 20px;
    box-shadow: 0 0 0 1px #555 inset;
}

.navbar.header .chat-nav-icon {
    font-size: 17px;
    line-height: 50px;
    padding: 0 8px;
}

/* 管理系ヘッダー（旧Rails: Settings.header_class / .director-sign） */
.navbar.header.director,
.navbar.header.master {
    border-bottom: 3px solid;
}

.navbar.header.director { border-bottom-color: #d9534f; }
.navbar.header.master   { border-bottom-color: #f0ad4e; }

.navbar.header .container-fluid {
    position: relative;
}

.director-sign {
    position: absolute;
    top: 3px;
    left: 0;
    transform: translateX(50px);
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    border-radius: .25em;
}

.director .director-sign { background-color: #d9534f; }
.master .director-sign   { background-color: #f0ad4e; }

/* ---- 経理（コミッション） ---- */
.commission-date-select-form select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.comissions-table {
    font-size: .92em;
}

.color-description { padding-top: 1em; }
.color-description .color-group { display: inline-block; vertical-align: middle; margin: 3px; }
.color-description .color-box {
    height: 1em;
    width: 1em;
    border: solid 1px;
    margin: 0 .3em 2px;
    display: inline-block;
    vertical-align: middle;
}
.color-description .color-normal { background-color: #fff; }
.color-description .color-select { background-color: #ff6; }
.color-description .color-clamed { background-color: #6fc; }
.color-description .color-alert  { background-color: #f00; }
.color-description .color-auto   { background-color: #c6d9f1; }
.color-description .color-bill   { background-color: #fcd5b5; }

/* セルの色は table-striped の行色より優先させる */
.comissions-table > thead > tr > th.month-select { cursor: pointer; text-align: center; }
.comissions-table > thead > tr > th.month-select.selected { background-color: #ff6; }
.comissions-table > tbody > tr > td.commission-cell { cursor: pointer; padding: 1px; min-width: 3.2em; }
.comissions-table > tbody > tr > td.commission-cell.payment-selected { background-color: #ff6; }
.comissions-table > tbody > tr > td.clamed_on-finish { background-color: #6fc; }
.comissions-table > tbody > tr > td.clamed_on-finish.auto-selected,
.comissions-table > tbody > tr > td.clamed_on-finish.auto { background-color: #c6d9f1; }
.comissions-table > tbody > tr > td.clamed_on-finish.bill-selected,
.comissions-table > tbody > tr > td.clamed_on-finish.bill { background-color: #fcd5b5; }
.comissions-table > tbody > tr > td.clamed_on-finish.auto,
.comissions-table > tbody > tr > td.clamed_on-finish.bill { cursor: auto; }
.comissions-table > tbody > tr > td.commission-alert { background-color: #f00; }

.comissions-table .commission-column { text-align: center; }
.comissions-table .commission-date { height: 1.4em; border-bottom: 1px dotted #fff; }
.comissions-table .commission-date:last-child { border: none; }

.commission-settings { float: right; margin-bottom: .5em; }
.commission-settings input[type=date] { display: inline-block; width: auto; vertical-align: top; }
.commission-settings button { margin-left: .3em; }

/* ---- 左サイドバーウィジェット ---- */
.my-page-sidebar {
    padding-right: 8px;
}

.sidebar-widget {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
}

.sidebar-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    font-weight: 700;
    color: #333;
}

.sidebar-more {
    font-size: 11px;
    font-weight: normal;
    color: #888;
    white-space: nowrap;
}

.sidebar-more:hover { color: #337ab7; }

.sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-list li {
    padding: 5px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    line-height: 1.5;
}

.sidebar-list li:last-child { border-bottom: none; }

.sidebar-list a {
    color: #333;
    text-decoration: none;
}

.sidebar-list a:hover { color: #337ab7; }

.sidebar-date {
    display: block;
    font-size: 11px;
    color: #999;
}

.sidebar-event-date {
    font-size: 11px;
    color: #999;
}

.sidebar-event-title {
    display: block;
    margin-top: 2px;
}

.sidebar-attending-count {
    font-size: 11px;
    color: #888;
}

.sidebar-products {
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.sidebar-product-thumb {
    display: inline-block;
    text-decoration: none;
    line-height: 1;
}

.sidebar-product-add {
    opacity: .7;
}

.sidebar-product-add:hover { opacity: 1; }

/* ---- CONTENT ---- */
.content {
    padding: 10px 0;
}

.header ~ .content {
    margin-top: 10px;
}

/* ---- ローディング ---- */
.loading {
    display: none;
    position: absolute;
    z-index: 999;
    top: 200px;
    left: 50%;
    right: 50%;
    text-align: center;
}

.loading.active {
    display: block;
}

.loading-inbox {
    display: inline-block;
    padding: 20px;
    border-radius: 5px;
    background: rgba(255,255,255,0.8);
}

.loading-inbox i {
    font-size: 400%;
}

/* ---- アバター / bg-thumb ---- */
.avatar-box {
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 10em;
    border: 1px solid #fefefe;
}

.avatar-box img {
    display: block;
    max-width: 100%;
    margin: auto;
}

.bg-thumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
}

.user-name {
    display: inline-block;
    vertical-align: middle;
}

/* ---- POST ITEM (テーブルセルレイアウト) ---- */
.post-item {
    margin-bottom: 1.6em;
    border: 1px solid #DFDFDF;
}

.post-item.post-closed {
    opacity: .5;
}

.post-item-wrap {
    display: table;
    width: 100%;
    border-bottom: 1px solid #ccc;
}

/* 左カラム: メタ (アバター・区分・興味あり等) */
.post-meta {
    display: table-cell;
    vertical-align: top;
    text-align: center;
    width: 110px;
    min-width: 100px;
    padding-bottom: 1em;
    background-color: #f7f7f7;
    border-right: 1px solid #D2D2D2;
}

.post-meta .post-kind {
    display: block;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    background: #888;
    text-align: center;
    margin-bottom: 6px;
}

.post-meta .post-kind.mediate    { background: #5cb85c; }
.post-meta .post-kind.buy        { background: #d9534f; }
.post-meta .post-kind.sell       { background: #f0ad4e; }
.post-meta .post-kind.introduced { background: #5bc0de; }

.post-meta .user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #ccc;
    margin: 8px auto 4px;
    float: none;
}

.post-meta .name {
    display: block;
    font-size: 12px;
    font-weight: bold;
    word-break: break-all;
    padding: 0 4px;
}

.post-meta .area {
    display: inline-block;
    font-size: 11px;
    color: #666;
    margin-bottom: 4px;
}

.post-meta .post-check {
    padding: .5em 0;
    font-size: 11px;
    font-weight: 700;
}

.post-meta .post-check .like-count {
    display: inline-block;
    padding: 0 .4em;
    background-color: #fff;
    border: 1px solid #979797;
    border-radius: 3px;
    margin-right: 2px;
}

.post-meta .limit-date {
    font-size: 11px;
    font-weight: 400;
    color: #F5A623;
    padding: 2px 4px;
}

.post-meta .js-post-close {
    font-size: 11px;
    margin-top: 4px;
}

.post-meta .post-user-link {
    color: #333;
    text-decoration: none;
    display: block;
}

.post-meta .post-user-link:hover { color: #1a73e8; }

/* 右カラム: コンテンツ */
.post-content-wrap {
    display: table-cell;
    vertical-align: top;
    padding: 1em;
    position: relative;
}

.post-content:hover .edit-btns {
    display: block;
}

.edit-btns {
    display: none;
    float: right;
}

.edit-btns a,
.edit-btns button {
    color: #aaa;
    margin-left: 4px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.edit-btns a:hover, .edit-btns button:hover { color: #555; }

h2.title {
    margin-top: 0;
    font-size: 14px;
    font-weight: 700;
    word-wrap: break-word;
    word-break: break-all;
}

h2.title a { color: #1a73e8; }
h2.title a:hover { text-decoration: underline; }

.incentive-tag {
    display: inline-block;
    color: #4A90E2;
    font-size: 11px;
    border: 1px solid;
    padding: .1em .7em;
    margin: 0 .5em;
    text-decoration: none;
}

.incentive {
    background-color: #f5f5f5;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 2px #666 inset;
    padding: 1em;
    margin-bottom: 1em;
    font-size: 13px;
}

.incentive-inner {
    word-wrap: break-word;
    word-break: break-all;
    color: #888;
}

.body {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
    color: #333;
    font-size: 13px;
}

/* post-footer: タグ・日付 */
.post-footer {
    overflow: hidden;
    line-height: 1;
    font-size: 11px;
    margin-top: 8px;
}

.post-footer dl { margin: 4px 0; }
.post-footer dt {
    display: inline;
    font-weight: normal;
    color: #666;
}
.post-footer .tags { display: inline; }

.tag {
    display: inline-block;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 1px 6px;
    margin: 2px;
    font-size: 11px;
}

/* ---- 業種パンくず（大分類〜細分類）の階層別色分け ---- */
.industry-breadcrumb .industry-level-1 { color: #34495e; font-weight: bold; }
.industry-breadcrumb .industry-level-2 { color: #2980b9; }
.industry-breadcrumb .industry-level-3 { color: #16a085; }
.industry-breadcrumb .industry-level-4 { color: #e67e22; }
.industry-breadcrumb .industry-breadcrumb-sep { color: #bbb; margin: 0 3px; }

.post_date {
    margin-top: 6px;
    color: #888;
    font-size: 11px;
}

/* ---- コメント欄 (resses) ---- */
.resses {
    margin: 0;
}

.resses .show_responses {
    background-color: #f5f5f5;
    padding: .5em 1em;
    font-size: 11px;
    font-weight: 700;
}

.resses .show_responses a {
    color: #555;
    cursor: pointer;
}

.resses .past_responses {
    margin-bottom: -1px;
}

.comment {
    overflow: hidden;
    margin: 0;
    padding: .6em;
    border: 1px solid #ccc;
    border-width: 1px 0;
    background-color: #f5f5f5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.comment + .comment {
    margin-top: -1px;
    border-radius: 0;
}

.comment .avatar-box {
    flex-shrink: 0;
}

.comment .meta {
    flex: 1;
    overflow: hidden;
}

.comment-meta {
    margin-bottom: 4px;
    line-height: 1.4;
}

.comment-user {
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.comment-user:hover { text-decoration: underline; }

.post-time.date {
    display: inline-block;
    margin-left: .5em;
    font-size: 12px;
    color: #9B9B9B;
}

.comment-body {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 13px;
}

.remove-btn {
    float: right;
    display: none;
    color: #ccc !important;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
}

.comment:hover .remove-btn { display: block; }

/* ---- コメントフォーム ---- */
.new_response .comment,
.response-form .comment {
    border-bottom: none;
}

.response-field {
    float: left;
    width: 85%;
    height: auto;
    resize: vertical;
}

.response-btn {
    float: right;
    width: 14%;
    margin: 0;
}

.add-comment-btn {
    width: 100%;
}

/* ---- 募集終了バナー ---- */
.banner-end {
    background-color: #666;
    color: #fff;
    text-align: center;
    font-size: 15px;
    padding: .5em;
}

/* ---- 投稿フォーム ---- */
.post-wrap {
    padding: 10px;
    background-color: #eee;
}

.post-wrap .user-base-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.post-wrap .user-base-info .user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #ccc;
    flex-shrink: 0;
}

.post-details .post-kind label.radio,
.post-details .radios label.radio {
    display: inline-block;
    margin: 10px 16px 10px 0;
    /* Bootstrapの .radio はinputを左に-20pxずらして絶対配置するため、その分の余白を確保する */
    padding-left: 20px;
    cursor: pointer;
    font-weight: normal;
}

.post-details .kinds {
    box-shadow: none;
    background-color: transparent;
    margin: 8px 0;
}

.post-details .content,
.post-details .content-mini,
.post-details .post-file {
    margin-bottom: 1em;
}

.post-details #biztype {
    margin-bottom: 1em;
}

.post-details .annotation {
    font-size: 11px;
    color: #c00;
    margin-left: 6px;
}

#post-draft {
    display: inline-block;
    margin-right: .3em;
}

.toggler { display: none; }
.toggle_on { display: inline; }

/* 添付欄（partials/attachment_fields） */
.attachment-fields {
    margin: 12px 0;
}

.attachment-fields-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.attachment-fields-label {
    flex: 0 0 70px;
    color: #777;
}

.attachment-fields-row .form-control {
    flex: 0 1 320px;
    width: auto;
    height: auto;
}

.attachment-fields-delete {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

.attachment-fields-hint,
.response-file-hint {
    font-size: 12px;
    color: #888;
}

.attachment-fields-hint {
    margin: 4px 0 0;
}

/* 詳細画面の添付一覧（partials/attachment_list） */
.attachment-list-item {
    display: inline-block;
    margin: 0 10px 6px 0;
    vertical-align: top;
}

/* 添付ファイル（partials/attachment）: 画像はサムネイル、それ以外はアイコン + ファイル名 */
.attachment-thumb {
    display: inline-block;
    max-width: 140px;
    text-align: center;
    vertical-align: top;
    word-break: break-all;
}

.attachment-thumb img {
    display: block;
    max-width: 120px;
    max-height: 120px;
    margin: 0 auto 2px;
    border: 1px solid #ddd;
    background: #fff;
}

.attachment-thumb.js-lightbox img { cursor: zoom-in; }

.attachment-thumb .fa { display: block; margin-bottom: 2px; }

.attachment-thumb .attachment-name {
    display: block;
    font-size: 12px;
    line-height: 1.3;
}

.attachment-link { word-break: break-all; }

/* 投稿に付いた添付の並び */
.post-attachments dt {
    display: block;
    margin-bottom: 6px;
}

.post-attachments dd.img {
    display: inline-block;
    margin: 0 10px 6px 0;
    vertical-align: top;
}

/* コメントの添付 */
.comment-file {
    display: inline-block;
    margin: 6px 10px 0 0;
    vertical-align: top;
}

.response-file {
    clear: both;
    padding-top: 6px;
}

.response-file input[type=file] {
    display: inline-block;
    max-width: 100%;
    font-size: 12px;
}

.response-errors {
    clear: both;
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 12px;
}

/* 投稿フォームの募集期限（期限ボタン + 開始日・終了日） */
.post-details .post-deadline {
    margin: 12px 0;
}

.post-details .post-deadline .trigger {
    margin: 0;
}

.post-details .post-deadline .form-control {
    display: inline-block;
    width: 200px;
    max-width: 100%;
    vertical-align: middle;
}

/* ---- MUST (バリデーション) ---- */
#biztype.must_invalid,
.must_visible input[type].must_invalid,
.must_visible textarea.must_invalid,
.must_visible select.must_invalid {
    border-color: #dd9933;
    background: #fff9e9;
}

/* リッチテキスト欄（Summernoteは textarea を隠し、直後に .note-editor を挿入する） */
.must_visible textarea.must_invalid + .note-editor.note-frame {
    border-color: #dd9933;
}

.must_visible textarea.must_invalid + .note-editor.note-frame .note-editing-area .note-editable {
    background: #fff9e9;
}

/* ---- リッチテキスト（表示側 .richtext-body とエディタ内の見た目を揃える） ---- */
.richtext-body p,
.note-editor .note-editable p {
    margin: 0 0 .6em;
}

.richtext-body h3,
.note-editor .note-editable h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 1em 0 .5em;
}

.richtext-body h4,
.note-editor .note-editable h4 {
    font-size: 14px;
    font-weight: bold;
    margin: 1em 0 .5em;
}

.richtext-body ul,
.richtext-body ol,
.note-editor .note-editable ul,
.note-editor .note-editable ol {
    margin: 0 0 .6em;
    padding-left: 1.8em;
}

.richtext-body blockquote,
.note-editor .note-editable blockquote {
    margin: 0 0 .6em;
    padding: 4px 12px;
    border-left: 3px solid #ccc;
    color: #555;
    font-size: inherit;
}

.richtext-body > :first-child { margin-top: 0; }
.richtext-body > :last-child { margin-bottom: 0; }

/* ---- タグフィルター (サイドバー) ---- */
.tags-filter { line-height: 2; }
.tag-filter-item {
    display: inline-block;
    cursor: pointer;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px 8px;
    margin: 2px;
    font-size: 12px;
}
.tag-filter-item,
.tag-filter-item:hover,
.tag-filter-item:focus { color: inherit; text-decoration: none; }
.tag-filter-item:hover { background: #e0e0e0; }
.tag-filter-item.active,
.tag-filter-item.active:hover {
    background: #337ab7;
    border-color: #2e6da4;
    color: #fff;
}
.tags-filter-current {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 8px 12px;
    margin-bottom: 1em;
}

/* ---- ページネーション ---- */
.pagination {
    margin: 16px 0;
}

/* ---- タイムライン ---- */
.my-page-timeline {
    padding-top: 10px;
}

.itembox {
    max-width: 780px;
}

/* ---- null-item ---- */
.null-item {
    padding: 1em !important;
    border: 1px solid #ccc !important;
    color: #888 !important;
    background-color: #eee !important;
}

/* ---- 投稿詳細 ---- */
.single-post .post-item {
    max-width: 100%;
}

.back-link {
    margin-top: 16px;
}

/* ---- 投稿一覧ヘッダー ---- */
.posts-header {
    margin-bottom: 1em;
}

.posts-header h3 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.6;
}

/* ---- 商談・マッチング ---- */
.business-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    gap: 0;
}

.business-steps li {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    font-size: 12px;
    color: #999;
    position: relative;
}

.business-steps li + li { border-left: none; }

.business-steps li.active {
    background: #337ab7;
    color: #fff;
    border-color: #2e6da4;
}

.business-steps li span {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ccc;
    color: #fff;
    line-height: 20px;
    font-size: 11px;
    margin-right: 4px;
}

.business-steps li.active span { background: rgba(255,255,255,.4); }

.match-post { margin-bottom: 16px; }

.match-users { margin-bottom: 12px; }

.rating-stars i { color: #ccc; cursor: pointer; }
.rating-stars i:hover, .rating-stars i.active { color: #f0ad4e; }

/* ---- ユーザーカード（一覧） ---- */
.user-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.user-card {
    width: calc(33.333% - 8px);
    min-width: 160px;
}

.user-card a {
    display: block;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    background: #fff;
    transition: box-shadow 150ms;
}

.user-card a:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    text-decoration: none;
}

.user-card .user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #ccc;
    margin: 0 auto 8px;
}

.user-card .user-info { text-align: center; }
.user-card .user-name { font-weight: bold; font-size: 13px; }
.user-card .user-company { font-size: 11px; color: #555; }
.user-card .user-area { font-size: 11px; color: #888; }

/* ---- ユーザー詳細ページ ---- */
.user-page { padding-bottom: 30px; }

.user-profile { margin-bottom: 20px; }

.user-base-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.user-base-info .user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #ccc;
    flex-shrink: 0;
}

.user-name { font-size: 20px; font-weight: bold; }
.user-name-kana { font-size: 13px; color: #888; }

.user-status { margin-bottom: 16px; }

.user-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.matching .num {
    font-size: 28px;
    font-weight: bold;
    color: #337ab7;
    line-height: 1;
}

.matching span {
    font-size: 11px;
    color: #888;
}

.user-action-btn {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #555;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.user-action-btn:hover { background: #f5f5f5; color: #333; text-decoration: none; }

/* float 段組みだと空の dd が高さ 0 になり、以降の dt/dd がずれるため grid で行を揃える */
dl.user-details {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 6px;
    align-items: baseline;
}

dl.user-details dt {
    grid-column: 1;
    font-weight: bold;
    color: #666;
}

dl.user-details dd {
    grid-column: 2;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

dl.user-details dd .empty-value { color: #bbb; }

@media (max-width: 767px) {
    dl.user-details { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
    dl.user-details dt,
    dl.user-details dd { grid-column: 1; }
    dl.user-details dd { margin-bottom: 8px; }
}

.user-profile-block {
    margin-bottom: 24px;
    border-top: 1px solid #eee;
    padding-top: 16px;
}

h4.profile-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    overflow: hidden;
}

.profile-body {
    font-size: 13px;
    line-height: 1.7;
    color: #333;
}

/* ---- ユーザーフラットリスト ---- */
.user-lists { margin-top: 10px; }

.user-post-list {
    margin-bottom: 20px;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.user-post-list h4 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    overflow: hidden;
}

ul.flex-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

ul.flex-list li {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    min-width: 160px;
    max-width: 260px;
}

ul.flex-list li a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: #333;
}

ul.flex-list li a:hover { background: #f0f0f0; }

ul.flex-list li .txt .title { font-weight: bold; font-size: 12px; margin-bottom: 4px; }
ul.flex-list li .txt .date  { font-size: 11px; color: #888; }
ul.flex-list li .txt .post-status { font-size: 11px; color: #888; }
ul.flex-list li .txt .body  { font-size: 11px; color: #666; }

.ex-btn .view-all {
    font-size: 12px;
    color: #337ab7;
    text-decoration: none;
}

.ex-btn .view-all:hover { text-decoration: underline; }

/* マイページ */
ul.user-flat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.user-flat-list li {
    border-bottom: 1px solid #eee;
}

ul.user-flat-list li a {
    display: block;
    padding: 8px 4px;
    text-decoration: none;
    color: #333;
    overflow: hidden;
}

ul.user-flat-list li a:hover { background: #fafafa; }

ul.user-flat-list .date { font-size: 11px; color: #888; }
ul.user-flat-list .title-name { font-size: 13px; font-weight: bold; }
ul.user-flat-list .status { font-size: 11px; }

/* ---- イベント ---- */
.event-item {
    padding: 12px 14px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
}

.event-item:hover {
    background: #fafafa;
}

.event-item.event_end {
    opacity: .6;
}

.event-category-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    border-radius: 3px;
    background: #999;
    margin-bottom: 4px;
}

.event-category-badge.club  { background: #5bc0de; }
.event-category-badge.other { background: #f0ad4e; }
.event-category-badge.bms   { background: #337ab7; }

.card-pay-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    background: #5cb85c;
    border-radius: 3px;
}

.event-status {
    display: inline-block;
    font-size: 11px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
}

.event-status.end     { background: #999; color: #fff; }
.event-status.session { background: #5cb85c; color: #fff; }

.event-title {
    font-weight: bold;
    font-size: 14px;
    margin: 4px 0;
}

.event-title a { color: #333; }
.event-title a:hover { color: #337ab7; text-decoration: none; }

.event-details {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.event-details > div {
    display: inline-block;
    margin-right: 16px;
}

.event-btns .btn { margin-right: 6px; }

table.user-data {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

table.user-data th,
table.user-data td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    vertical-align: top;
}

table.user-data th {
    background: #f7f7f7;
    font-weight: bold;
    width: 140px;
    white-space: nowrap;
}

.event-form-table th { width: 120px; }

/* ---- レスポンシブ ---- */
@media only screen and (max-width: 767px) {
    .post-item-wrap {
        display: block;
    }
    .post-meta {
        display: block;
        width: 100%;
        text-align: left;
        padding: 8px;
    }
    .post-meta .user-avatar {
        display: inline-block;
        margin: 0 8px 0 0;
        width: 36px;
        height: 36px;
        vertical-align: middle;
    }
    .post-meta .name {
        display: inline-block;
    }
    .post-content-wrap {
        display: block;
    }
    .response-field { width: 80%; }
    .response-btn { width: 19%; }
}

/* ---- CHAT ---- */
.chat-nav-icon {
    font-size: 18px;
    line-height: 50px;
    padding: 0 10px;
}

/* チャット一覧 */
.chat-room-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
.chat-room-item {
    border-bottom: 1px solid #eee;
}
.chat-room-item:last-child { border-bottom: none; }
.chat-room-item.unread { background: #f0f7ff; }
.chat-room-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
}
.chat-room-link:hover { background: #f5f5f5; text-decoration: none; color: inherit; }
.chat-room-avatar { flex-shrink: 0; }
.chat-room-body { flex: 1; min-width: 0; }
.chat-room-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}
.chat-room-name { font-weight: bold; font-size: 13px; }
.chat-room-time { font-size: 11px; color: #999; flex-shrink: 0; }
.chat-room-preview { font-size: 12px; color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-unread-badge { color: #e74c3c; font-size: 10px; flex-shrink: 0; }

/* チャット会話画面 */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    max-width: 700px;
    margin: 0 auto;
}
.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #ddd;
    background: #fff;
    flex-shrink: 0;
}
.chat-back-btn { font-size: 20px; color: #337ab7; text-decoration: none; }
.chat-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.chat-header-name { font-weight: bold; font-size: 14px; }
.chat-header-sub { font-size: 11px; color: #888; }
.chat-partner-link { color: inherit; text-decoration: none; }
.chat-partner-link:hover { text-decoration: underline; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f0f0f0;
}
.chat-empty { text-align: center; color: #aaa; padding: 24px 0; }
.chat-complete-notice {
    text-align: center;
    padding: 6px 0;
}
.chat-complete-notice span {
    background: #dff0d8;
    color: #3c763d;
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 12px;
}

.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    max-width: 80%;
}
.chat-message.mine {
    flex-direction: row-reverse;
    align-self: flex-end;
}
.chat-message.theirs { align-self: flex-start; }

.chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.chat-bubble {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-text {
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
    background: #fff;
    border: 1px solid #ddd;
}
.chat-message.mine .chat-text {
    background: #337ab7;
    color: #fff;
    border-color: #2e6da4;
}
.chat-time {
    font-size: 10px;
    color: #999;
    text-align: right;
}
.chat-message.theirs .chat-time { text-align: left; }

.chat-input-area {
    padding: 10px 12px;
    border-top: 1px solid #ddd;
    background: #fff;
    flex-shrink: 0;
}
.chat-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.chat-input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 18px;
    padding: 8px 14px;
    font-size: 13px;
    resize: none;
    line-height: 1.4;
    outline: none;
    font-family: inherit;
}
.chat-input:focus { border-color: #337ab7; }
.chat-send-btn {
    background: #337ab7;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.chat-send-btn:hover { background: #286090; }

/* ---- SUBAREAS / ユニット ---- */
.subareas .area {
    margin-bottom: 16px;
}
.subareas .area-name {
    font-weight: bold;
    font-size: 14px;
    color: #337ab7;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}
.subareas .area-name .fa {
    margin-right: 6px;
    font-size: 10px;
}
.subareas .unit-name {
    padding: 3px 0 3px 16px;
    font-size: 13px;
}
.subareas .unit-name a {
    color: #555;
    text-decoration: none;
}
.subareas .unit-name a:hover { color: #337ab7; text-decoration: underline; }

.subarea-map-placeholder {
    background: #f0f0f0;
    border-radius: 4px;
    padding: 60px 20px;
    text-align: center;
    color: #aaa;
    font-size: 24px;
}
.subarea-map-placeholder div { font-size: 14px; margin-top: 8px; }

.border-header {
    border-bottom: 2px solid #337ab7;
    padding-bottom: 8px;
}

/* ---- PRODUCTS ---- */
.single-item { margin-top: 16px; }
.product-table th { color: #666; font-weight: normal; white-space: nowrap; }
.image_box { position: relative; }
.sub_image .thumb { cursor: pointer; }

/* ---- 書類ボックス (admin / unit_admin) ---- */
.admin-item-table { background: #fff; margin-bottom: 0; }
.admin-item-table thead tr th { font-size: 17px; font-weight: 500; padding: .3rem .4rem; vertical-align: middle; text-align: center; }
.admin-item-table tbody tr td { padding: .5rem; vertical-align: middle; font-size: 14px; color: #3c4858; }
.admin-item-table .file_icon { text-align: center; width: 90px; }
.admin-item-table .file_icon .attachment-thumb { max-width: 80px; }
.admin-item-table .file_icon .attachment-thumb img { max-width: 60px; max-height: 60px; }
.admin-item-table .file_icon .attachment-name { display: none; }
.admin-item-table .item-name { font-weight: 700; }
.admin-item-table .item-dates { text-align: center; white-space: nowrap; }
.admin-item-table .item-btn { text-align: center; white-space: nowrap; }
.admin-item-table .item-btn .btn { margin: .25rem .5rem; }
.document-detail { display: flex; gap: 20px; align-items: flex-start; }
.document-detail .item-wrap { border: 1px solid #ccc; border-radius: 3px; background: #fff; text-align: center; }
.document-detail .thumbs { padding: 1em; }
.document-detail .thumbs .attachment-thumb { max-width: 200px; }
.document-detail .thumbs .attachment-thumb img { max-width: 180px; max-height: 180px; }
.document-detail .thumbs .attachment-thumb .fa { font-size: 5em; }
.document-detail .item-action { padding: .8em 1em; }
.document-detail .single-main { flex: 1; min-width: 0; word-break: break-word; }
@media (max-width: 767px) {
    .admin-item-table, .admin-item-table tbody { border: 0; }
    .admin-item-table thead { display: none; }
    .admin-item-table tbody tr { border: 1px solid #ccc; display: block; margin-bottom: 2rem; }
    .admin-item-table tbody tr td { border: 0; display: block; text-align: center; width: 100%; white-space: normal; }
    .document-detail { display: block; }
}