/* WordPress カスタムCSS (テーマ対策版)
テキスト装飾とボックススタイルのためのCSSです。
テーマのスタイルに負けないよう、セレクタの具体性を高めています。
WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」に貼り付けてご利用ください。
*/

/* --- テキストスタイル --- */

/* 太字 */
.entry-content .bold {
    font-weight: bold !important;
}

/* 赤文字 */
.entry-content .red {
    color: #e53935 !important; /* 少し落ち着いた赤色 */
}

/* 太い赤文字 */
.entry-content .bold-red {
    font-weight: bold !important;
    color: #e53935 !important;
}

/* 赤アンダーライン */
.entry-content .red-under {
    text-decoration: underline !important;
    text-decoration-color: #e53935 !important;
    text-decoration-thickness: 2px !important; /* 線の太さ */
    text-underline-offset: 3px !important; /* テキストと線の間隔 */
}

/* 黄色マーカー */
.entry-content .marker {
    background: linear-gradient(transparent 60%, #fffde7 60%) !important;
}

/* 黄色アンダーラインマーカー */
.entry-content .marker-under {
    background: linear-gradient(transparent 85%, #fffde7 85%) !important;
}

/* 打ち消し線 */
.entry-content .strike {
    text-decoration: line-through !important;
}

/* キーボードキー */
.entry-content .keyboard-key {
    display: inline-block;
    background-color: #f7f7f7 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.9em;
    color: #333 !important;
    line-height: 1.4;
    box-shadow: 1px 1px 0 #ddd;
    margin: 0 2px;
}


/* --- ボックススタイル --- */

/* ボックスの基本スタイル */
.entry-content .information-box, .entry-content .question-box, .entry-content .alert-box, .entry-content .memo-box, .entry-content .comment-box,
.entry-content .primary-box, .entry-content .secondary-box, .entry-content .info-box, .entry-content .warning-box, .entry-content .success-box,
.entry-content .danger-box, .entry-content .light-box, .entry-content .dark-box {
    border-radius: 8px;
    padding: 1.2em 1.5em;
    margin: 1.5em 0;
    border-left-width: 6px;
    border-left-style: solid;
}

/* 各ボックスの詳細スタイル */

/* 補足情報 (i) */
.entry-content .information-box {
    background-color: #e3f2fd !important;
    border-color: #2196f3 !important;
    color: #1e3a56 !important;
}
.entry-content .information-box::before {
    content: "i";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.8em;
    border-radius: 50%;
    background-color: #2196f3 !important;
    color: #fff !important;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 0.8em;
}

/* 補足情報 (?) */
.entry-content .question-box {
    background-color: #f3e5f5 !important;
    border-color: #9c27b0 !important;
    color: #3e1e42 !important;
}
.entry-content .question-box::before {
    content: "?";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.8em;
    border-radius: 50%;
    background-color: #9c27b0 !important;
    color: #fff !important;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 0.8em;
}


/* 補足情報 (!) */
.entry-content .alert-box {
    background-color: #fff8e1 !important;
    border-color: #ffb300 !important;
    color: #594410 !important;
}
.entry-content .alert-box::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.8em;
    border-radius: 50%;
    background-color: #ffb300 !important;
    color: #fff !important;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 0.8em;
}

/* メモ */
.entry-content .memo-box {
    background-color: #fafafa !important;
    border-color: #757575 !important;
    color: #333 !important;
}

/* コメント */
.entry-content .comment-box {
    background-color: #f5f5f5 !important;
    border-color: #bdbdbd !important;
    color: #333 !important;
    border-style: dashed;
}

/* プライマリー */
.entry-content .primary-box {
    background-color: #e8eaf6 !important;
    border-color: #3f51b5 !important;
    color: #1a237e !important;
}

/* セカンダリー */
.entry-content .secondary-box {
    background-color: #f1f1f1 !important;
    border-color: #6c757d !important;
    color: #343a40 !important;
}

/* インフォ */
.entry-content .info-box {
    background-color: #e0f7fa !important;
    border-color: #00bcd4 !important;
    color: #006064 !important;
}

/* ワーニング */
.entry-content .warning-box {
    background-color: #fff3e0 !important;
    border-color: #ff9800 !important;
    color: #e65100 !important;
}

/* サクセス */
.entry-content .success-box {
    background-color: #e8f5e9 !important;
    border-color: #4caf50 !important;
    color: #1b5e20 !important;
}

/* デンジャー */
.entry-content .danger-box {
    background-color: #ffebee !important;
    border-color: #f44336 !important;
    color: #b71c1c !important;
}

/* ライト */
.entry-content .light-box {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

/* ダーク */
.entry-content .dark-box {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #f8f9fa !important;
}

/* ボックス内のpタグのマージンを調整 */
.entry-content .information-box p:last-child, .entry-content .question-box p:last-child, .entry-content .alert-box p:last-child, 
.entry-content .memo-box p:last-child, .entry-content .comment-box p:last-child, .entry-content .primary-box p:last-child, 
.entry-content .secondary-box p:last-child, .entry-content .info-box p:last-child, .entry-content .warning-box p:last-child, 
.entry-content .success-box p:last-child, .entry-content .danger-box p:last-child, .entry-content .light-box p:last-child, 
.entry-content .dark-box p:last-child {
    margin-bottom: 0;
}

/* ここにCSSコードを追加

例:
.example {
    color: red;
}

CSS の知識に磨きをかけるためにご覧ください。
http://www.w3schools.com/css/css_syntax.asp

コメント終わり */