/* =========================
   業者ページ（vendor）スタイル定義
========================= */


/* -------------------------
   全体・リセット
------------------------- */
.vendor-block {
    margin: 24px 0;
    font-size: 16px;
    line-height: 1.7;
}

.vendor-topbox * {
    box-sizing: border-box;
}

.single-vendor .p-toc {
    display: none;
}
.vendor-youtube { margin: 24px 0; }
.vendor-youtube-inner { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.vendor-youtube-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
/* -------------------------
   上部ボックス（会社情報）
------------------------- */
.vendor-topbox {
    background: #F9F9F9;      /* 最新の指定：グレー背景 */
    border: 0px solid #e0e0e0; /* 最新の指定：枠線なし */
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 40px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #535353;
    line-height: 1.6;
}

/* 会社名 */
.vendor-name {
    font-size: 20px !important;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.4;
    border: none;
	color:#535353;
}

/* 住所 */
.vendor-addr {
    font-size: 15px;
    margin-bottom: 15px;
    font-weight: 500;
    display: flex;        /* アイコンと揃えるため */
    align-items: center;
}

/* 住所アイコン（最新の指定） */
.vendor-addr::before {
    content: "";
    display: block;
    margin-right: 8px;
    width: 27px;
    height: 27px;
    background-size: cover;
    background-image: url("http://web-prepa.com/emi-sama/wp-content/uploads/2026/01/2.png");
    flex-shrink: 0; /* アイコンが縮まないように */
}

/* URL */
.vendor-url {
    margin-bottom: 25px;
    position: relative;
    display: flex;
    align-items: center;
}

.vendor-url a {
    color: #57A8D7;
    text-decoration: underline;
    font-size: 15px;
    word-break: break-all;
}

/* URLアイコン（最新の指定） */
.vendor-url::before {
    content: "";
    display: block;
    margin-right: 8px;
    width: 27px;
    height: 27px;
    background-size: cover;
    background-image: url("http://web-prepa.com/emi-sama/wp-content/uploads/2026/01/3.png");
    flex-shrink: 0;
}

/* URLや住所内の不要な改行を無効化 */
/*
.vendor-url br,
.vendor-addr br {
    display: none;
}
*/

/* -------------------------
   得意分野
------------------------- */
.vendor-specialties-ttl {
    color: #8BC53F; /* 最新の指定：黄緑 */
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 12px 0;
}

.vendor-specialties {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.vendor-specialties br {
    display: none;
}

/* 各タグ（ピル型） */
.vendor-specialty {
    display: inline-block;
    background-color: #fff; /* 最新の指定：白背景 */
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 6px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #535353;
    line-height: 1;
}

/* -------------------------
   CTAボタンエリア
------------------------- */
.vendor-cta-row {
    display: flex;        /* 横並び */
    gap: 15px;            /* ボタン間の隙間 */
    margin-bottom: 20px;
    align-items: stretch; /* 高さを揃える */
}

/* 勝手に入る改行タグを消す（レイアウト崩れ防止） */
.vendor-cta-row br {
    display: none;
}

/* ボタン共通設定 */
.vendor-btn {
    flex: 1;                 /* 幅を均等（50%:50%）にする */
    width: 100%;             /* 親要素いっぱいに広げる */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.3s ease;
    line-height: 1.2;
	position:relative;
}

/* 左：お問い合わせ（最新の指定：黄緑背景） */
.vendor-btn-contact {
    background-color: #8BC53F; /* 最新の指定 */
    color: #fff;
    border: 1px solid #8BC53F; /* 枠線も同色に */
}

.vendor-btn-contact::before {
    content: "";
    display: block;
    margin-right: 8px;
    width: 27px;
    height: 27px;
    background-size: cover;
    background-image: url("http://web-prepa.com/emi-sama/wp-content/uploads/2026/01/vendor-mail.png");
    flex-shrink: 0;
	position:absolute;
	left:20px;
}

.vendor-btn-contact:hover {
    opacity: 0.8;
}

/* 右：お見積もり（もともとの緑系指定を維持しつつ調整） */
/* ※一番下の指定にお見積りボタンの指定がなかったため、お問い合わせと同じトーンか、
   あるいは以前の緑を使うかになりますが、デザイン統一のためお問い合わせと同じ色味にします。
   もし色を変えたい場合は background-color を変更してください */
.vendor-btn-estimate {
    background-color: #fff;    /* 白背景 */
    color: #8BC53F;            /* 文字色を黄緑に */
    border: 1px solid #8BC53F;
}

.vendor-btn-estimate::before {
    content: "";
    display: block;
    margin-right: 8px;
    width: 27px;
    height: 27px;
    background-size: cover;
    background-image: url("http://web-prepa.com/emi-sama/wp-content/uploads/2026/01/1-1.png");
    flex-shrink: 0;
	position:absolute;
	left:20px;
}

.vendor-btn-estimate:hover {
    background-color: #f0fdf4;
    opacity: 1;
}

/* スマホ対応（ボタンを縦並びにする） */
@media (max-width: 480px) {
    .vendor-cta-row {
        flex-direction: column;
        gap: 12px;
    }
}

/* 注釈テキスト */
.vendor-note {
    font-size: 14px;
    color: #ED796C;
    margin: 0;
	font-weight:600;
    line-height: 1.5;
	padding-left:10px;
}

/* -------------------------
   その他のセクション（ポイント・紹介・口コミ）
------------------------- */
/* おすすめポイント */
.vendor-points {
    margin-bottom: 24px;
}
.vendor-points-ttl {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}
.vendor-points-list {
    padding-left: 18px;
}
.vendor-points-list li {
    margin-bottom: 4px;
}

/* 紹介文 */
.vendor-intro {
    margin-bottom: 28px;
}

/* 評価と口コミ全体 */
.vendor-reviews {
    margin-top: 20px;
}
.vendor-reviews-ttl {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* 星評価 */
.vendor-rating {
    margin-bottom: 12px;
}
.vendor-rating-ttl {
    font-weight: 700;
    margin-bottom: 4px;
}
.vendor-rating-stars {
    font-size: 18px;
    color: #f5a623;
}
.vendor-rating-score {
    font-size: 13px;
    color: #666;
    margin-left: 6px;
}

/* 口コミリスト */
.vendor-voices {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 20px;

}
.vendor-voice{
		position:relative;
}
.vendor-voice:after{
	content:"";
	width:100%;
	height:1px;
	background-color:#ddd;
	position:absolute;
	bottom:-15px;
}
.vendor-voice:last-child:after{
	display:none;
}
/* 口コミ個票 */
.vendor-voice {
    background: #fff;

    border-radius: 8px;
    padding: 20px;
}

.vendor-voice-line1 {
    color: #8BC53F; /* 全体の色味に合わせて黄緑に変更 */
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 5px 0;
}

.vendor-voice-line2 {
    font-size: 12px;
    color: #888;
    margin: 0 0 15px 0;
}

.vendor-voice-line3 {
    background-color: #F9F9F9;
    padding: 15px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: #535353;
    font-weight: 500;
}

/* =========================================
   おすすめポイントのリストスタイル変更
   ========================================= */

/* リスト全体のスタイル */
.vendor-points-list {
    list-style: none; /* 既存のドットを削除 */
    padding-left: 0 !important;  /* 左側の余白をリセット */
    margin-left: 0;   /* 左側の余白をリセット */
}

/* 各リストアイテムのスタイル */
.vendor-points-list li {
    position: relative; /* 下線の位置調整用 */
    padding: 10px 0 10px 40px; /* 上下の余白（下線との距離を含む） */
    border-bottom: 1px dashed #CCCCCC; /* 緑色の破線の下線 */
    margin-bottom: 5px; /* リストアイテム間の隙間 */
    line-height: 1.5;
}
.vendor-points-list li:after{
	content:"";
	width:8px;
	height:8px;
	background-color:#8BC53F;
	position:absolute;
	left:15px;
	top:calc(50% - 4px);
	border-radius:50%;
}

/* 最後のアイテムの下線を消す場合（任意） */

/* =========================================
   口コミエリア（アイコン付きレイアウト）
   ========================================= */

/* 名前と属性を囲った枠 */
.vendor-voice-meta {
    display: flex;       /* 中身を縦並びにする */
    flex-direction: column;
    margin-bottom: 15px; /* 本文との隙間 */
    padding-left: 60px;  /* ★左側にアイコン用のスペースを空ける */
    position: relative;  /* アイコン配置の基準点 */
    min-height: 50px;    /* アイコンの高さ分は確保 */
    justify-content: center; /* 垂直方向の中央揃え */
}

/* ★顔アイコンを「囲み枠」の左側に配置 */
.vendor-voice-meta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;        /* アイコンの幅 */
    height: 50px;       /* アイコンの高さ */
    background-color: #f0f0f0; /* 画像がない時の背景色 */
    border-radius: 50%; /* 丸くする */
    
    background-size: cover;
    background-position: center;
    /* ここに顔アイコンの画像URLを指定 */
    background-image: url("https://placehold.jp/50x50.png?text=Face");
}

/* 1行目：名前 */
.vendor-voice-line1 {
    font-size: 16px;
    font-weight: 700;
    color: #8BC53F;
    margin: 0 0 4px 0;
    line-height: 1.2;
}
/* 以前のアイコン指定（::before）がある場合はリセット */
.vendor-voice-line1::before {
    content: none; 
    display: none;
}

/* 2行目：属性 */
.vendor-voice-line2 {
    font-size: 12px;
    color: #888;
    margin: 0;
    line-height: 1.2;
}
.vendor-voice-line2::before {
    content: none; 
    display: none;
}

/* =========================================
   口コミエリア（アイコン3種ローテーション・サイズ調整版）
   ========================================= */

/* 名前と属性を囲った枠 */
.vendor-voice-meta {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    /* ★アイコン幅(71px) + 隙間(約20px) = 90px に広げました */
    padding-left: 90px;
    position: relative;
    /* ★アイコンの高さに合わせて最小高さを確保 */
    min-height: 71px;
    justify-content: center;
}

/* ★顔アイコンの設定 */
.vendor-voice-meta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* ★サイズを71pxに変更 */
    width: 71px;
    height: 71px;
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* PHPから渡された変数を使う */
    background-image: var(--face-icon);
}

/* 1行目：タイトル */
.vendor-voice-line1 {
    font-size: 20px; /* ★指定の20px */
    font-weight: 700;
    color: #8BC53F;
    margin: 0 0 6px 0;
    line-height: 1.3;
}
.vendor-voice-line1::before { content: none; display: none; }

/* 2行目：地域・属性 */
.vendor-voice-line2 {
    font-size: 14px; /* ★指定の14px */
    color: #888;
    margin: 0;
    line-height: 1.3;
}
.vendor-voice-line2::before { content: none; display: none; }

.vendor-rating img{
	max-width:50% !important;
	width:100% !important;
	height:100% !important;
	margin-left:3%;
}
.vendor-detail-table th,.vendor-detail-table td{
	padding:15px 20px;
	font-size:14px;
	border-right:0px !important;
	border-left:0px;
}

.vendor-detail-table th{
	min-width:170px;
}

.single-vendor h3:before {
    content: "";
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color_htag) 0%, var(--color_htag) 10.3%, rgba(150, 150, 150, .2) 10.3%, rgba(150, 150, 150, .2) 100%);
}

.single-vendor .post_content{
	margin-top:0 !important;
}


@media(max-width:600px){
.vendor-rating img {
    max-width: 95% !important;
    width: 95% !important;
    height: auto !important;
	margin-left:0 !important;
}
.vendor-voice-line3,.vendor-addr,.vendor-url a,.vendor-specialty{
    font-size: 16px;
}
.vendor-detail-table th,.vendor-detail-table td{
    font-size:15px;

}

	.vendor-topbox {
    background: #F9F9F9;
    border: 0px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px 15px;
    margin-bottom: 40px;
}
	.vendor-intro p{
		font-size:16px;
		margin-bottom:15px;
	}
.vendor-detail-table,
.vendor-detail-table tbody,
.vendor-detail-table tr,
.vendor-detail-table th,
.vendor-detail-table td{
display:block;
width:100%;
}

.vendor-detail-table th{
min-width:0;
background:#f5f5f5;
font-weight:600;
border-bottom:none;
	border-top:0px;
}
	.vendor-detail-table tbody{
			border-top:1px solid #e5e5e5 !important;
	}

.vendor-detail-table td{
border-top:none;
border-bottom:1px solid #e5e5e5;
}
}




.vendor-detail-ttl,.vendor-points-ttl,.vendor-reviews-ttl{
border-left:0px solid !important;
padding:10px 0 10px 0 !important;
}
.vendor-addr{
display:flex;
align-items:flex-start;
}