/**
 * SWL背景色スパンのスタイル
 * span.swl-bg-colorのカスタマイズ
 */

/* swl-bg-colorクラスのスタイル */
span.swl-bg-color,
.swl-bg-color {
    /* 文字サイズを通常のpタグの75%に */
    font-size: 75% !important;
    font-size: 0.75em !important;
    
    /* インライン要素のスタイル */
    display: inline;
    line-height: 1.4;
    padding: 2px 4px;
    border-radius: 2px;
}

/* has-swl-main-background-colorクラスの背景色 */
span.swl-bg-color.has-swl-main-background-color,
.swl-bg-color.has-swl-main-background-color {
    background-color: #67bded !important;
    color: #fff !important; /* 背景が青いので文字は白に */
}

/* 親要素がpタグの場合の調整 */
p span.swl-bg-color,
p .swl-bg-color {
    /* pタグの文字サイズの75% */
    font-size: 75% !important;
}

/* 見出し内での調整 */
h1 span.swl-bg-color,
h2 span.swl-bg-color,
h3 span.swl-bg-color,
h4 span.swl-bg-color,
h5 span.swl-bg-color,
h6 span.swl-bg-color {
    /* 各見出しの文字サイズの75% */
    font-size: 75% !important;
}

/* リスト内での調整 */
li span.swl-bg-color,
li .swl-bg-color {
    font-size: 75% !important;
}

/* テーブル内での調整 */
td span.swl-bg-color,
th span.swl-bg-color,
td .swl-bg-color,
th .swl-bg-color {
    font-size: 75% !important;
}

/* 診療時間テーブル内での調整（より具体的なセレクタ） */
.wp-block-flexible-table-block-table td span.swl-bg-color,
.wp-block-flexible-table-block-table th span.swl-bg-color,
.wp-block-flexible-table-block-table td .swl-bg-color,
.wp-block-flexible-table-block-table th .swl-bg-color {
    font-size: 75% !important;
}

/* ホバー効果（オプション） */
span.swl-bg-color.has-swl-main-background-color:hover,
.swl-bg-color.has-swl-main-background-color:hover {
    background-color: #4da8e0 !important; /* 少し濃い青 */
}

/* リンク内のswl-bg-color */
a span.swl-bg-color,
a .swl-bg-color {
    text-decoration: none;
}

/* 印刷時のスタイル */
@media print {
    span.swl-bg-color.has-swl-main-background-color,
    .swl-bg-color.has-swl-main-background-color {
        background-color: transparent !important;
        color: #000 !important;
        border: 1px solid #67bded !important;
    }
}