/*
 * vendor-content.css  v1.2.0
 * 設置場所: /wp-content/themes/akiya_bee/css/vendor-content.css
 *
 * 【カラー変更】投稿本文先頭に1行で:
 *   <style>.vendor-content{--vc-key:#1e5799;--vc-key-dark:#0f2f66;--vc-sub:#dce8f5;}</style>
 *
 * 【パターン変更】<div class="vc-v2 pat-b"> のクラス1つで切り替え
 *   pat-a（省略可）= 全面ヒーロー・左ボーダーh2（デフォルト）
 *   pat-b          = すっきり清潔感・アンダーラインh2
 *   pat-c          = ナンバリング・塗りCTA
 *   pat-d          = 帯見出し・2カラムCTA
 * ============================================================
 */

/* ============================================================
   CSS変数（デフォルト = 空き家サイトカラー）
   ============================================================ */
.vendor-content {
    --vc-key: #449079;
    --vc-key-dark: #2d6158;
    --vc-sub: #d4ede6;
    --vc-accent: #e07a3a;
    --vc-accent-dk: #b85e28;
    --vc-text: #333333;
    --vc-text-sub: #666666;
    --vc-border: #dddddd;
    --fs-sm: clamp(0.8rem, 1.8vw, 0.875rem);
    --fs-base: clamp(0.9rem, 2vw, 1rem);
    --fs-lg: clamp(1rem, 2.5vw, 1.2rem);
    --fs-xl: clamp(1.15rem, 3vw, 1.5rem);
    --fs-2xl: clamp(1.4rem, 3.5vw, 1.875rem);
    --fs-tel: clamp(1.5rem, 4vw, 2.2rem);
    --sp-xs: 8px;
    --sp-sm: 16px;
    --sp-md: 24px;
    --sp-lg: 40px;
}

/* ============================================================
   共通ベース（全パターン共通）
   ============================================================ */
.vendor-content .vc-v2 {
    font-size: var(--fs-base);
    color: var(--vc-text);
    line-height: 1.85;
}

.vendor-content .vc-v2 p {
    margin: 0 0 var(--sp-sm);
}

.vendor-content .vc-v2 ul {
    list-style-type: disc;
    padding-left: 1.6em;
    margin: var(--sp-xs) 0 var(--sp-sm);
}

.vendor-content .vc-v2 ol {
    list-style-type: decimal;
    padding-left: 1.6em;
    margin: var(--sp-xs) 0 var(--sp-sm);
}

.vendor-content .vc-v2 li {
    margin-bottom: .4em;
}

.vendor-content .vc-v2 strong {
    font-weight: 700;
    color: inherit;
}

.vendor-content .vc-v2 h4 {
    font-size: var(--fs-base);
    font-weight: 700;
    margin: var(--sp-sm) 0 var(--sp-xs);
}

/* 共通パーツ */
.vendor-content .vc-v2 .vc-box {
    border-left: 4px solid var(--vc-key);
    background: var(--vc-sub);
    padding: var(--sp-sm) var(--sp-md);
    margin: var(--sp-sm) 0;
    border-radius: 0 4px 4px 0;
}

.vendor-content .vc-v2 .vc-attention {
    background: #fff8e1;
    border-left: 4px solid #f0c040;
    padding: var(--sp-sm) var(--sp-md);
    margin: var(--sp-sm) 0;
    border-radius: 0 4px 4px 0;
}

.vendor-content .vc-v2 .vc-img {
    width: 100%;
    height: auto;
    display: block;
    margin: var(--sp-md) 0;
    border-radius: 4px;
}

.vendor-content .vc-v2 .vc-btn {
    display: inline-block;
    background: var(--vc-accent);
    color: #fff;
    text-decoration: none;
    padding: .65em 2em;
    border-radius: 4px;
    font-size: var(--fs-base);
    font-weight: 700;
    margin-top: var(--sp-xs);
    transition: background .2s;
}

.vendor-content .vc-v2 .vc-btn:hover {
    background: var(--vc-accent-dk);
    color: #fff;
}

/* フォントユーティリティ */
.vendor-content .vc-v2 .fs-sm {
    font-size: var(--fs-sm);
}

.vendor-content .vc-v2 .fs-lg {
    font-size: var(--fs-lg);
}

.vendor-content .vc-v2 .fs-xl {
    font-size: var(--fs-xl);
}

.vendor-content .vc-v2 .fs-2xl {
    font-size: var(--fs-2xl);
}

.vendor-content .vc-v2 .fs-tel {
    font-size: var(--fs-tel);
}

.vendor-content .vc-v2 .fw-bold {
    font-weight: 700;
}

.vendor-content .vc-v2 .text-center {
    text-align: center;
}

.vendor-content .vc-v2 .text-key {
    color: var(--vc-key);
}

.vendor-content .vc-v2 .text-accent {
    color: var(--vc-accent);
}

/* 旧クラス互換 */
.vendor-content .vc-v2 .fs28 {
    font-size: var(--fs-xl);
}

.vendor-content .vc-v2 .fs32 {
    font-size: var(--fs-xl);
}

.vendor-content .vc-v2 .fs36 {
    font-size: var(--fs-2xl);
}

.vendor-content .vc-v2 .fs20 {
    font-size: var(--fs-lg);
}


/* ============================================================
   Pattern A（デフォルト）
   全面ヒーロー × 左ボーダーh2 × アクセント枠CTA
   ============================================================ */

/* h2 */
.vendor-content .vc-v2 h2 {
    font-size: var(--fs-xl);
    font-weight: 700;
    border-left: 4px solid var(--vc-key);
    padding-left: .75em;
    margin: var(--sp-lg) 0 var(--sp-sm);
    color: var(--vc-text);
    line-height: 1.4;
    border-radius: 0;
    overflow-wrap: break-word;
    text-wrap: balance;
        /* 行長を均等化・「買」だけ折り返す不自然な位置を回避（Chrome114+/FF121+/Safari17.4+） */
}

.vendor-content .vc-v2 h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: var(--sp-md) 0 var(--sp-xs);
    color: var(--vc-text);
    line-height: 1.5;
}

/* ヒーロー */
.vendor-content .vc-v2 .vc-hero {
    background: var(--vc-key);
    color: #fff;
    padding: clamp(32px, 6vw, 60px) clamp(16px, 4vw, 40px);
    text-align: center;
    margin-bottom: var(--sp-lg);
}

.vendor-content .vc-v2 .vc-hero h2 {
    border: none;
    padding: 0;
    color: #fff;
    font-size: var(--fs-2xl);
    margin: var(--sp-xs) 0;
}

.vendor-content .vc-v2 .vc-hero p {
    color: rgba(255, 255, 255, .85);
    margin: 0 0 var(--sp-xs);
}

/* CTA */
.vendor-content .vc-v2 .vc-cta {
    background: color-mix(in srgb, var(--vc-accent) 8%, #fff);
    border: 2px solid var(--vc-accent);
    border-radius: 6px;
    padding: var(--sp-md);
    text-align: center;
    margin: var(--sp-lg) 0;
}

.vendor-content .vc-v2 .vc-cta--key {
    background: var(--vc-key);
    border-radius: 6px;
    padding: var(--sp-md);
    text-align: center;
    margin: var(--sp-lg) 0;
    color: #fff;
}

.vendor-content .vc-v2 .vc-cta--key p {
    color: rgba(255, 255, 255, .85);
}

/* 電話番号 */
.vendor-content .vc-v2 .vc-tel {
    display: inline-block;
    font-size: var(--fs-tel);
    font-weight: 700;
    color: var(--vc-accent);
    text-decoration: none;
    letter-spacing: .03em;
}

.vendor-content .vc-v2 .vc-cta--key .vc-tel {
    color: #ffe08a;
}

.vendor-content .vc-v2 .vc-tel:hover {
    opacity: .85;
}


/* ============================================================
   Pattern B — すっきり清潔感
   上ボーダーヒーロー × アンダーラインh2 × キー塗りCTA
   ============================================================ */
.vendor-content .vc-v2.pat-b .vc-hero {
    background: var(--vc-sub);
    color: var(--vc-text);
    border-top: 5px solid var(--vc-key);
    padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 32px);
    text-align: left;
    margin-bottom: var(--sp-lg);
}

.vendor-content .vc-v2.pat-b .vc-hero h2 {
    border: none;
    padding: 0;
    color: var(--vc-key-dark);
    font-size: var(--fs-2xl);
    margin: var(--sp-xs) 0;
}

.vendor-content .vc-v2.pat-b .vc-hero p {
    color: var(--vc-text-sub);
    margin: 0 0 var(--sp-xs);
}

.vendor-content .vc-v2.pat-b .vc-hero .vc-tel {
    color: var(--vc-accent);
}

.vendor-content .vc-v2.pat-b h2 {
    border-left: none;
    border-bottom: 2px solid var(--vc-key);
    padding: 0 0 .3em;
    border-radius: 0;
}

.vendor-content .vc-v2.pat-b .vc-cta {
    background: var(--vc-key);
    border: none;
    border-radius: 6px;
}

.vendor-content .vc-v2.pat-b .vc-cta p {
    color: rgba(255, 255, 255, .85);
}

.vendor-content .vc-v2.pat-b .vc-cta .vc-tel {
    color: #ffe08a;
}

.vendor-content .vc-v2.pat-b .vc-cta--key {
    background: var(--vc-sub);
    border: 2px solid var(--vc-key);
}

.vendor-content .vc-v2.pat-b .vc-cta--key p {
    color: var(--vc-text-sub);
}

.vendor-content .vc-v2.pat-b .vc-cta--key .vc-tel {
    color: var(--vc-accent);
}


/* ============================================================
   Pattern C — ナンバリング・カード系
   濃いキー色ヒーロー × 番号バッジh2 × サブ色CTA
   ============================================================ */
.vendor-content .vc-v2.pat-c .vc-hero {
    background: var(--vc-key-dark);
    color: #fff;
    padding: clamp(32px, 6vw, 60px) clamp(16px, 4vw, 40px);
    text-align: center;
    border-radius: 6px;
    margin-bottom: var(--sp-lg);
}

.vendor-content .vc-v2.pat-c .vc-hero h2 {
    border: none;
    padding: 0;
    color: #fff;
    font-size: var(--fs-2xl);
    margin: var(--sp-xs) 0;
}

.vendor-content .vc-v2.pat-c .vc-hero p {
    color: rgba(255, 255, 255, .8);
    margin: 0 0 var(--sp-xs);
}

.vendor-content .vc-v2.pat-c .vc-hero .vc-tel {
    color: #ffd580;
}

/* カウンター初期化 */
.vendor-content .vc-v2.pat-c {
    counter-reset: vc-section;
}

.vendor-content .vc-v2.pat-c h2 {
    border-left: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 0;
    border-bottom: none;
}

.vendor-content .vc-v2.pat-c h2::before {
    counter-increment: vc-section;
    content: counter(vc-section);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--vc-key);
    color: #fff;
    font-size: .8em;
    border-radius: 50%;
    font-weight: 700;
}

/* ヒーロー内h2はカウンター除外・flex解除（strong等がflex itemにならないよう） */
.vendor-content .vc-v2.pat-c .vc-hero h2 {
    display: block;
    text-align: center;
}

.vendor-content .vc-v2.pat-c .vc-hero h2::before {
    display: none;
}

.vendor-content .vc-v2.pat-c .vc-cta {
    background: var(--vc-sub);
    border: 1px solid var(--vc-key);
    border-radius: 6px;
}

.vendor-content .vc-v2.pat-c .vc-cta p {
    color: var(--vc-key-dark);
}

.vendor-content .vc-v2.pat-c .vc-cta .vc-tel {
    color: var(--vc-accent);
}

.vendor-content .vc-v2.pat-c .vc-cta--key {
    background: var(--vc-key-dark);
    border: none;
    border-radius: 6px;
}

.vendor-content .vc-v2.pat-c .vc-cta--key p {
    color: rgba(255, 255, 255, .85);
}

.vendor-content .vc-v2.pat-c .vc-cta--key .vc-tel {
    color: #ffd580;
}


/* ============================================================
   Pattern D — 帯見出し × 2カラムCTA
   左帯ヒーロー × バッジ帯h2 × 電話+メール2分割CTA
   ============================================================ */
.vendor-content .vc-v2.pat-d .vc-hero {
    background: #fff;
    border-left: 6px solid var(--vc-key);
    padding: clamp(20px, 4vw, 36px) clamp(16px, 4vw, 32px);
    margin-bottom: var(--sp-lg);
    color: var(--vc-text);
}

.vendor-content .vc-v2.pat-d .vc-hero h2 {
    border: none;
    padding: 0;
    color: var(--vc-text);
    font-size: var(--fs-2xl);
    margin: var(--sp-xs) 0;
}

.vendor-content .vc-v2.pat-d .vc-hero p {
    color: var(--vc-text-sub);
    margin: 0 0 var(--sp-xs);
}

.vendor-content .vc-v2.pat-d .vc-hero .vc-tel {
    color: var(--vc-accent);
}

.vendor-content .vc-v2.pat-d .vc-hero .vc-kicker {
    font-size: var(--fs-sm);
    color: var(--vc-key);
    font-weight: 700;
    letter-spacing: .05em;
    display: block;
    margin-bottom: 6px;
}

.vendor-content .vc-v2.pat-d h2 {
    border-left: none;
    padding: .3em .75em;
    background: var(--vc-key);
    color: #fff;
    display: inline-block;
    border-radius: 2px;
    font-size: var(--fs-lg);
    margin: var(--sp-lg) 0 var(--sp-sm);
}

/* 2カラムCTA */
.vendor-content .vc-v2.pat-d .vc-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    margin: var(--sp-lg) 0;
}

.vendor-content .vc-v2.pat-d .vc-cta-tel-col {
    background: var(--vc-accent);
    border-radius: 6px;
    padding: var(--sp-sm);
    text-align: center;
}

.vendor-content .vc-v2.pat-d .vc-cta-tel-col p {
    color: rgba(255, 255, 255, .85);
    margin: 0 0 4px;
}

.vendor-content .vc-v2.pat-d .vc-cta-tel-col .vc-tel {
    color: #fff;
    font-size: var(--fs-lg);
}

.vendor-content .vc-v2.pat-d .vc-cta-mail-col {
    background: #f5f5f5;
    border: 1px solid var(--vc-border);
    border-radius: 6px;
    padding: var(--sp-sm);
    text-align: center;
}

.vendor-content .vc-v2.pat-d .vc-cta-mail-col p {
    color: var(--vc-text-sub);
    margin: 0 0 4px;
}

.vendor-content .vc-v2.pat-d .vc-cta-mail-col a {
    display: inline-block;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--vc-key);
    text-decoration: none;
}

/* pat-d の vc-cta--key はそのまま全幅 */
.vendor-content .vc-v2.pat-d .vc-cta--key {
    display: block;
    background: var(--vc-key);
    border-radius: 6px;
    padding: var(--sp-md);
    text-align: center;
    margin: var(--sp-lg) 0;
    color: #fff;
}

.vendor-content .vc-v2.pat-d .vc-cta--key p {
    color: rgba(255, 255, 255, .85);
}

.vendor-content .vc-v2.pat-d .vc-cta--key .vc-tel {
    color: #ffe08a;
}

@media (max-width: 480px) {
    .vendor-content .vc-v2.pat-d .vc-cta {
        grid-template-columns: 1fr;
    }

    .vendor-content .vc-v2 .vc-hero {
        padding: 28px 16px;
    }
}