/* =========================================
   右側追尾タブ（無料相談予約）
   ========================================= */

.floating-consult-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.floating-consult-tab a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* 反転：白背景 × オレンジボーダー */
    background-color: #fff;
    border: 2px solid var(--main-color, #F0932B);
    border-right: none;
    text-decoration: none;
    padding: 18px 10px;
    /* 右側なので左の角だけ丸める */
    border-radius: 10px 0 0 10px;
    box-shadow: -3px 3px 16px rgba(240, 147, 43, 0.35);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateX(4px);
}

.floating-consult-tab a:hover {
    /* ホバー時は反転：オレンジ背景 × 白文字 */
    background-color: var(--main-color, #F0932B);
    transform: translateX(0);
    box-shadow: -6px 6px 24px rgba(240, 147, 43, 0.55);
}

/* ホバー時にアイコンを白く */
.floating-consult-tab a:hover .tab-icon {
    filter: brightness(0) invert(1);
}

/* ホバー時にテキストを白く */
.floating-consult-tab a:hover .tab-label {
    color: #fff;
}

/* アイコン画像：通常はオレンジ色に */
.floating-consult-tab .tab-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: filter 0.3s ease;
}

/* 縦書きテキスト：通常はオレンジ色 */
.floating-consult-tab .tab-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1;
    color: var(--main-color, #F0932B);
    font-family: var(--font-sans, "Noto Sans JP", sans-serif);
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* ========== レスポンシブ：スマホ ========== */
@media (max-width: 768px) {
    /* スマホでも右側に表示し、少しだけサイズを小さくする */
    .floating-consult-tab a {
        padding: 14px 6px;
    }

    .floating-consult-tab .tab-icon {
        width: 32px;
        height: 32px;
    }

    .floating-consult-tab .tab-label {
        font-size: 0.75rem;
    }
}

/* ========== ヒーロー画像エリア等での非表示制御 ========== */
.floating-consult-tab.is-hidden {
    opacity: 0;
    pointer-events: none;
    /* デスクトップでは右へ隠れる */
    transform: translateY(-50%) translateX(20px);
}