/**
 * Simple Text Styles - Frontend & Editor Styles
 * フロントエンドとエディタで共通のスタイル
 * 
 * このファイルには元の「Add Richtext Toolbar Button」プラグインのスタイルが含まれています。
 * 新しいスタイルを追加する場合は、このファイルの末尾に追加してください。
 */

/* ========================================
   新しいプラグインのスタイル
   ======================================== */

/* ハイライト（赤） */
.sts-highlighter-red {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #f69 75%);
    font-weight: bold;
}

/* ハイライト（緑） */
.sts-highlighter-green {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #6f6 75%);
    font-weight: bold;
}

/* ハイライト（青） */
.sts-highlighter-blue {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #6cf 75%);
    font-weight: bold;
}

/* ハイライト（黄） */
.sts-highlighter-yellow {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #ff6 75%);
    font-weight: bold;
}

/* ========================================
   元のプラグインのプリセットスタイル
   ======================================== */

/* ハイライト/マーカー系 */
span.highlighter-red,
.highlighter-red {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #f69 75%);
    font-weight: bold;
    line-height: 1;
    font-size: 1em;
}

span.highlighter-green,
.highlighter-green {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #6f6 75%);
    font-weight: bold;
    line-height: 1;
    font-size: 1em;
}

span.highlighter-blue,
.highlighter-blue {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #6cf 75%);
    font-weight: bold;
    line-height: 1;
    font-size: 1em;
}

span.highlighter-yellow,
.highlighter-yellow {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #ff6 75%);
    font-weight: bold;
    line-height: 1;
    font-size: 1em;
}

/* マーカー別名 */
span.marker-red,
.marker-red {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #f69 75%);
    font-weight: bold;
}

span.marker-green,
.marker-green {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #6f6 75%);
    font-weight: bold;
}

span.marker-blue,
.marker-blue {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #6cf 75%);
    font-weight: bold;
}

span.marker-yellow,
.marker-yellow {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #ff6 75%);
    font-weight: bold;
}

/* ボタン系 - 基本 */
span.button-blue,
.button-blue {
    display: inline-block;
    background-color: #3498db;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: bold;
    line-height: 1.4;
}

span.button-red,
.button-red {
    display: inline-block;
    background-color: #e74c3c;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: bold;
    line-height: 1.4;
}

span.button-green,
.button-green {
    display: inline-block;
    background-color: #2ecc71;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: bold;
    line-height: 1.4;
}

span.button-orange,
.button-orange {
    display: inline-block;
    background-color: #f39c12;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: bold;
    line-height: 1.4;
}

/* ラベル系 */
span.label-by-red,
.label-by-red {
    display: inline-block;
    background-color: #e74c3c;
    color: #fff !important;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: bold;
}

span.label-by-blue,
.label-by-blue {
    display: inline-block;
    background-color: #3498db;
    color: #fff !important;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: bold;
}

span.label-by-green,
.label-by-green {
    display: inline-block;
    background-color: #2ecc71;
    color: #fff !important;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: bold;
}

/* Bodybodyellow（スクリーンショットで確認） */
span.bodybodyellow,
.bodybodyellow {
    background-color: #ffeb3b;
    padding: 2px 5px;
}

/* デザインプリセット（design_preset.phpより） */

/* 太字 */
span.bold,
.bold {
    font-weight: bold;
}

/* フォント色 */
span.font-color,
.font-color,
span.font-color-red,
.font-color-red {
    color: #f00;
}

/* フォントサイズ */
span.font-size,
.font-size,
span.font-size-large,
.font-size-large {
    font-size: 1.5em;
}

/* 行の高さ */
span.line-height,
.line-height {
    line-height: 1.5;
}

/* 背景色 */
span.background-color,
.background-color {
    background-color: #9ff;
}

/* ボーダー */
span.border,
.border {
    border: solid 2px #f9f;
}

/* 角丸 */
span.border-radius,
.border-radius {
    border-radius: 5px;
}

/* パディング */
span.padding,
.padding {
    padding: 0.5em;
}

/* シャドウ */
span.shadow,
.shadow {
    box-shadow: 3px 3px 3px #ccc;
}

/* ストライプ */
span.stripe,
.stripe {
    background-image: repeating-linear-gradient(-45deg, rgb(64, 255, 0), rgb(64, 255, 0) 2px, transparent 2px, transparent 4px);
    background-size: 100% 0.6em;
    padding-bottom: 0.6em;
    background-position: 0 center;
    background-repeat: no-repeat;
}

/* ブロック */
span.block,
.block {
    display: block;
}

/* インラインブロック */
span.inline-block,
.inline-block {
    display: inline-block;
}

/* アイコン付きボックス */
span.icon-box,
.icon-box {
    display: block;
    padding: 1em 1em 1em 4.6em;
    position: relative;
    line-height: 1.4;
    background: #f0f9ff;
    border: 1px solid #acf;
}

/* タブ付きボックス */
span.tab-box,
.tab-box {
    display: block;
    position: relative;
    border: 2px solid #f94;
    padding: 1.2em 1em;
    margin-top: 1.4em;
}

/* タグ付きボックス */
span.tag-box,
.tag-box {
    display: block;
    border-left: 6px solid #06c;
    padding: 1.2em 1em;
    background-color: #def;
}

/* 警告ボックス */
span.warning-box,
.warning-box {
    display: block;
    padding: 1em 1em 1em 3em;
    position: relative;
    line-height: 1.4;
    background-color: #fbeaea;
    border-width: 0 0 0 5px;
    border-style: solid;
    border-color: #dc3232;
}

/* ========================================
   artb-* パターン（自動生成されたクラス名）
   
   元のプラグインで使われている可能性があるクラス：
   artb-1523 など
   
   これらのスタイルは個別に設定されていたため、
   以下にクライアントサイトで使われているスタイルを追加してください。
   ======================================== */

/* 
 * クライアントサイトの管理画面で「Add Richtext Toolbar Button」→「設定」
 * の一覧を確認し、使われているスタイルをここに追加してください。
 * 
 * 例：
 * span.artb-1523 {
 *     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #ff6 75%);
 *     font-weight: bold;
 * }
 */

/* ========================================
   追加のカスタムスタイル
   ======================================== */

/* 以下に追加のカスタムスタイルを記述してください */