/* ヘッダーのメッセージ・ログアウトと右下のチャットボタン（2026-11-08。緑のトーンに合わせた Material Icons） */
.hd-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; background: #eef5ee; color: #376439 !important;
    text-decoration: none !important; transition: background .15s, color .15s;
}
.hd-icon-btn:hover { background: #376439; color: #fff !important; }
.hd-icon-btn .material-icons { font-size: 22px; color: inherit; }
/* 未読の印は赤（右上の角） */
.message-btn a.hd-icon-btn span.unread {
    position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; margin: 0;
    background: #e53935; border: 2px solid #fff; border-radius: 50%; box-sizing: content-box;
}
.header-menu-box .hd-icon-btn + a, .hd-icon-btn { margin-left: 2px; }

/* 右下の「SNSで相談」ボタン（2026-11-08。影なし・文字入り。サイト内のメッセージ（右上）と見分けがつくように）
   下にボタン、上に SNS アイコン、アイコンの左に説明の吹き出し。HTML はそのままで並べ方だけ変える */
.chat-area { right: 24px; bottom: 24px; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; }
.chat-area .chat-icon {
    position: relative; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 18px 0 14px;
    background: #376439; border-radius: 999px; box-shadow: none; transition: background .15s;
}
.chat-area .chat-icon:hover { background: #24432a; }
.chat-area .chat-icon .chat-icon-ico { font-size: 22px; color: #fff; }
.chat-area .chat-icon .chat-icon-label { color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; }
/* 開いているとき：ボタン全体を濃い緑にして「×」 */
.chat-area #chat-icon-target.mask {
    display: flex; align-items: center; justify-content: center;
    background-color: #24432a; background-image: none; border-radius: 999px;
}
.chat-area #chat-icon-target.mask::after {
    content: "close"; font-family: 'Material Icons'; font-size: 26px; line-height: 1; color: #fff;
    -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
}
/* SNS アイコン（右の列）と説明（同じ行の左） */
.chat-area .chat-sns-line.show-content {
    display: grid; grid-template-columns: auto 46px; grid-auto-flow: row dense; gap: 10px; align-items: center; justify-items: end;
    animation: fadeIn .3s ease-out forwards;
}
.chat-area .chat-sns-line [class$="-icon"] {
    position: static; grid-column: 2; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; background: transparent;
}
.chat-area .chat-sns-line [class$="-icon"] img { width: 44px !important; height: 44px; object-fit: contain; }
.chat-area .chat-sns-line [class$="-click-popup"] {
    position: static; grid-column: 1; width: auto; max-width: 250px; padding: 8px 12px; border-radius: 10px;
    background: #fff; border: 1px solid #e3e8e3; color: #1f2a20; font-size: 12px; line-height: 1.6;
}
@media screen and (max-width: 780px) {
    .chat-area { right: 14px; bottom: 14px; }
    .chat-area .chat-icon { height: 42px; padding: 0 14px 0 12px; }
    .chat-area .chat-icon .chat-icon-label { font-size: 13px; }
}