@charset "UTF-8";
/* Updated: 2026-10-07 (JST)
 * 旧エディター「スタイル」の span を公開画面・編集画面で共通表示。
 * 元の sp.css の4種類を継承。black は元の仕様どおり本文色を継承する。
 * a.red / a.blue などのCTAには適用しない。手動のインライン指定は優先する。
 */
span.black,
span.red,
span.blue,
span.darkred {
    font-size: 16px;
    font-weight: bold;
}
span.red { color: #e71437; }
span.blue { color: #0000ff; }
span.darkred { color: #dd1144; }

/* 2026-11-12: 投稿エディター「テンプレート > ボタン」の公開表示を継承。
 * shop_editor-template.js が保存する既存HTMLに適用。記事の再保存は不要。
 * #tinymce の旧編集用CSSより後に読み込み、編集画面と公開画面を揃える。
 */
:is(#tinymce, body) p:is(.editor-btn, .editor-line-btn) {
    --asreet-editor-button-color: #e72741;
    text-align: center;
    margin: 20px auto;
}
:is(#tinymce, body) p:is(.editor-btn.btn-blue, .editor-line-btn.btn-line-blue) {
    --asreet-editor-button-color: #00a0e9;
}
:is(#tinymce, body) p:is(.editor-btn.btn-black, .editor-line-btn.btn-line-black) {
    --asreet-editor-button-color: #3e3a39;
}
:is(#tinymce, body) p:is(.editor-btn, .editor-line-btn) > a {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    min-width: min(280px, 100%);
    padding: 10px 35px 10px 15px;
    border: 2px solid var(--asreet-editor-button-color);
    border-radius: 10px;
    background: var(--asreet-editor-button-color);
    /* 本文の汎用リンク色・下線より優先。対象は挿入ボタン内のみ。 */
    color: #fff !important;
    text-decoration: none !important;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: middle;
}
:is(#tinymce, body) p.editor-line-btn > a {
    min-width: min(200px, 100%);
    background: transparent;
    color: var(--asreet-editor-button-color) !important;
    font-size: 16px;
}
:is(#tinymce, body) p:is(.editor-btn, .editor-line-btn) > a::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    width: 10px;
    height: 10px;
    margin: 0;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
:is(#tinymce, body) p.editor-btn > a:is(:hover, :active, :focus-visible) {
    background: transparent;
    color: var(--asreet-editor-button-color) !important;
}
:is(#tinymce, body) p.editor-line-btn > a:is(:hover, :active, :focus-visible) {
    background: var(--asreet-editor-button-color);
    color: #fff !important;
}
:is(#tinymce, body) p:is(.editor-btn, .editor-line-btn) > a:is(:hover, :active, :focus-visible)::before {
    border-color: currentColor;
}
:is(#tinymce, body) p:is(.editor-btn, .editor-line-btn) > a:focus-visible {
    outline: 2px solid var(--asreet-editor-button-color);
    outline-offset: 3px;
}