/*
 * vendor-content.css  v1.1.0
 * 掲載業者ページ用共通スタイル
 * 設置場所: /wp-content/themes/akiya_bee/css/vendor-content.css
 *
 * 【設計方針】
 *  .vendor-content         → CSS変数定義のみ。既存ページへの視覚的影響ゼロ。
 *  .vendor-content .vc-v2  → 全スタイルをここに集約。新規ページのみ適用。
 *
 * 【業者カラーの変更方法】
 *  投稿本文の先頭に以下を追記するだけで全配色が切り替わる:
 *
 *  <style>
 *  .vendor-content {
 *    --vc-key:     #1e5799;
 *    --vc-key-dark:#0f2f66;
 *    --vc-sub:     #dce8f5;
 *  }
 *  </style>
 *
 *  --vc-accent は原則変更しない（全サイト・全業者共通）
 * ============================================================
 */


/* ============================================================
   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;
}


/* ============================================================
   以下、全スタイルを .vc-v2 配下に限定
   既存ページ（.vc-v2なし）には一切影響しない
   ============================================================ */

.vendor-content .vc-v2 {
    font-size: var(--fs-base);
    color: var(--vc-text);
    line-height: 1.85;
}

/* 見出し */
.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;
}

.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 h4 {
    font-size: var(--fs-base);
    font-weight: 700;
    margin: var(--sp-sm) 0 var(--sp-xs);
    color: var(--vc-text);
}

/* 本文・リスト */
.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 .vc-hero {
    background: var(--vc-key);
    color: #ffffff;
    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: #ffffff;
    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%, #ffffff);
    border: 2px solid var(--vc-accent);
    border-radius: 6px;
    padding: var(--sp-md);
    text-align: center;
    margin: var(--sp-lg) 0;
}

/* CTAブロック（キーカラー背景） */
.vendor-content .vc-v2 .vc-cta--key {
    background: var(--vc-key);
    border: none;
    border-radius: 6px;
    padding: var(--sp-md);
    text-align: center;
    margin: var(--sp-lg) 0;
    color: #ffffff;
}

.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;
}

/* ボタン */
.vendor-content .vc-v2 .vc-btn {
    display: inline-block;
    background: var(--vc-accent);
    color: #ffffff;
    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: #ffffff;
}

/* 囲みボックス */
.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 .fs-sm {
    font-size: var(--fs-sm);
}

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

.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);
}

/* 旧クラス互換（.vc-v2内のみ上書き・既存ページには触れない） */
.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);
}

/* レスポンシブ */
@media (max-width: 600px) {
    .vendor-content .vc-v2 .vc-hero {
        padding: 28px 16px;
    }
}