/* 全体の普通の文字色を灰色にする */
#main, #main_body, #wrapper, #container, .atwiki_body {
    color: #777777 !important;
}

/* ==================================================
   ★シンプル版（隙間なし）★ リンクの設定
   ================================================== */
a {
    color: #ffb6c1 !important; /* リンク：少し薄めのピンク */
    text-decoration: underline !important; /* 下線をずっとつける */
    font-size: 1.1em !important; /* 文字のサイズを少し大きく */
    font-weight: bold !important; /* 太字にしてクッキリ見やすく */
}
a:hover {
    color: #87ceeb !important; /* マウスを乗せた時の色：水色に変更 */
    text-decoration: underline !important; /* マウスを乗せた時も下線を残す */
}

/* 水平線（----）のスタイル */
hr {
    border: none !important;
    border-top: 2px solid #e0b0ff !important; /* 水平線：薄紫 */
    margin: 20px 0; /* 上下の余白 */
}

/* 本文の箇条書きの文字・点・中の要素をすべて赤にする */
#atwiki-body ul li, #atwiki-body ol li,
.atwiki_body ul li, .atwiki_body ol li,
#atwiki-body ul li *, #atwiki-body ol li * {
    color: #ff0000 !important;
}

/* 箇条書きの「点（・）」や「数字」も赤にする */
#atwiki-body ul li::marker, #atwiki-body ol li::marker,
.atwiki_body ul li::marker, .atwiki_body ol li::marker {
    color: #ff0000 !important;
}

/* 本文の箇条書きの中にあるリンクの色だけはピンクで守る */
#atwiki-body ul li a, #atwiki-body ol li a,
.atwiki_body ul li a, .atwiki_body ol li a {
    color: #ffb6c1 !important;
}

/* ==================================================
   【超重要】オンライン人数の行をカラフルに可愛くする設定
   ================================================== */
p:has(span.atwiki_online_user), 
div:has(span.atwiki_online_user),
li:has(span.atwiki_online_user) {
    color: #ff69b4 !important; /* 「現在、」をピンクにする */
}
span.atwiki_online_user {
    color: #e0b0ff !important; /* 数字：薄紫 */
}
span.atwiki_online_user ~ span,
span.atwiki_online_user ~ font,
span.atwiki_online_user ~ strong {
    color: #87ceeb !important;
}
p:has(span.atwiki_online_user) {
    font-weight: bold;
}

/* ==================================================
   ★天才のアイデア★ 中見出し＆記事メニュー達をお揃いの立体3Dボックスにする
   （共通のデザイン設定をここにギュッとセットにしたよ！）
   ================================================== */
h1, h2, h3, h4, h5, h6, #header h1, #sitename,
.atwiki-list-title, .atwiki-list2-title, .atwiki_list2_title {
    border: none !important; /* 元の線をリセット */
    border-left: 6px solid #ffb6c1 !important; /* 左の縦線：薄ピンク */
    display: block !important; /* 全体を立体的な箱にする */
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1) !important; /* 斜め右下のクッキリ立体影 */
    padding: 10px 15px !important; /* ぷっくりした余白 */
    border-radius: 4px !important; /* はみ出さない絶妙な角丸 */
    position: relative !important;
    width: 100% !important; /* 横幅いっぱいにのびのび広げる */
    box-sizing: border-box !important;
}

/* それぞれの固有の背景色だけを個別に指定 */
h1, h2, h3, h4, h5, h6, #header h1, #sitename {
    background-color: #87ceeb !important; /* 普通の中見出しの背景：水色 */
    margin-bottom: 15px !important;
}
.atwiki-list-title, .atwiki-list2-title, .atwiki_list2_title {
    background-color: #e0b0ff !important; /* 記事メニュー達の背景：薄紫 */
    margin-bottom: 0px !important; /* 下の水色部分とピッタリくっつける */
    overflow: hidden !important; /* はみ出し隠しのお守り */
}

/* ==================================================
   ★ふちどり★ サイト名と中見出しの文字だけをピンクでふちどる設定
   ================================================== */
body h1, body h2, body h3, body h4, body h5, body h6,
#header h1, #header h1 a, #sitename, #sitename a,
.atwiki-content h3, #atwiki-body h3, #menubar h3, #side h3 {
   color: #ffffff !important; /* 文字の色は白 */
   text-decoration: none !important; /* サイト名のリンク下線を消す */
   text-shadow: 
       -2px -2px 0 #ffb6c1,  
        2px -2px 0 #ffb6c1,
       -2px  2px 0 #ffb6c1,  
        2px  2px 0 #ffb6c1,
       -2px  0px 0 #ffb6c1,  
        2px  0px 0 #ffb6c1,
        0px -2px 0 #ffb6c1,  
        0px  2px 0 #ffb6c1 !important; /* 文字の周りにピンクのフチ */
}

/* ==================================================
   ★記事メニュー＆記事メニュー2専用★ 白文字に水色のふちどりをする設定
   ================================================== */
.atwiki-list-title, .atwiki-list2-title, .atwiki_list2_title {
   color: #ffffff !important; /* 文字の色は白 */
   text-shadow: 
       -2px -2px 0 #87ceeb,  
        2px -2px 0 #87ceeb,
       -2px  2px 0 #87ceeb,  
        2px  2px 0 #87ceeb,
       -2px  0px 0 #87ceeb,  
        2px  0px 0 #87ceeb,
        0px -2px 0 #87ceeb,  
        0px  2px 0 #87ceeb !important; /* 文字の周りに水色のフチ */
}

/* ==================================================
   ★広々版★ 記事メニュー達の下の中身部分をうっすーい水色にする設定
   ================================================== */
.atwiki-list-body, .atwiki_list_body, .atwiki-list-title + ul, div:has(> .atwiki-list-title) ul,
.atwiki-list2-body, .atwiki_list2_body, .atwiki-list2-title + ul, div:has(> .atwiki-list2-title) ul { 
    background-color: #f0faff !important; /* うっすーい水色 */
    border: 1px solid #e0b0ff !important;  /* 枠線を薄紫にして優しく囲う */
    border-top: none !important;            /* タイトル箱と綺麗にくっつける */
    padding: 15px 20px !important;         /* 左右の余白を少し広げてゆったり */
    border-radius: 0 0 6px 6px !important;  /* 下側の角だけをまあるく可愛く */
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05) !important; /* 全体に合わせてほんのり影 */
    width: 100% !important; /* 横幅を100%（広め）に固定 */
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ==================================================
   ★大成功版★ コメントボタン設定コード（斜め影＆ゆっくり沈む＆サイズUP仕様）
   ================================================== */
input[type="button"], input[type="submit"],
.comment_form input[type="button"], .comment_form input[type="submit"],
#pcomment input[type="button"], #pcomment input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #e0b0ff !important; /* ボタン背景：薄紫 */
    background: #e0b0ff !important;
    color: #ffffff !important;            /* ボタン文字：白 */
    border: 2px solid #ffb6c1 !important; /* ボタンのフチ：ピンク */
    border-radius: 24px !important;       /* 大きさに合わせて角丸も少しUP */
    font-weight: bold !important;
    padding: 8px 24px 6px 24px !important; 
    font-size: 16px !important;
    border-bottom: 4px solid #87ceeb !important; /* 底の線：水色 */
    cursor: pointer;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1) !important; /* 影の角度を斜め右下に */
    transition: all 0.3s ease !important; /* ゆっくりなめらかに動く設定 */
}

/* コメントボタンをポチッと押したときの動き */
input[type="button"]:hover, input[type="submit"]:hover,
.comment_form input[type="button"]:hover, .comment_form input[type="submit"]:hover,
#pcomment input[type="button"]:hover, #pcomment input[type="submit"]:hover {
    transform: translate(2px, 2px) !important; 
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1) !important; /* 影も半分縮む */
}

/* ==================================================
   ★大成功コード★ コメント返信の特大キラキラダイヤボタン
   ================================================== */
.comment_form input[type="radio"], #pcomment input[type="radio"], .atwiki_comment_form input[type="radio"],
div[id^="atwiki-comment"] input[type="radio"], [class*="comment"] input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important; /* 元の丸い見た目を完全に消す */
    position: relative !important;
    display: inline-block !important;
    width: 36px !important;   
    height: 36px !important;  
    background: transparent !important; /* 背景透明 */
    border: none !important; 
    box-shadow: none !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin: 0 4px 2px 4px !important;
}

/* 1. まだ選択されていない状態：絶対に水色の『✧』（中抜きダイヤ・36px） */
.comment_form input[type="radio"]:not(:checked)::before, #pcomment input[type="radio"]:not(:checked)::before, .atwiki_comment_form input[type="radio"]:not(:checked)::before,
div[id^="atwiki-comment"] input[type="radio"]:not(:checked)::before, [class*="comment"] input[type="radio"]:not(:checked)::before {
    content: "✧" !important;
    font-size: 36px !important; /* 記号の大きさを36pxに固定 */
    color: #87ceeb !important;  /* 塗りつぶされていない水色 */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
}

/* 2. タップされて選択された状態：ピンク色に塗りつぶされた『✦』（36px） */
.comment_form input[type="radio"]:checked::before, #pcomment input[type="radio"]:checked::before, .atwiki_comment_form input[type="radio"]:checked::before,
div[id^="atwiki-comment"] input[type="radio"]:checked::before, [class*="comment"] input[type="radio"]:checked::before {
    content: "✦" !important;
    font-size: 36px !important; /* 記号の大きさを36pxに固定 */
    color: #ffb6c1 !important;  /* ピンク色に塗りつぶし */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
}