/* 【大見出し（ゆめカフェとは？ の部分）】文字は紫、背景はさらに薄い紫（単色）、角が丸い */
h2.atwiki-heading-h2, .atwiki-heading-h2, .post h2, .entry h2, h2[id^="id_"] {
    color: #6a4c93 !important;      /* 文字：柔らかい紫 */
    background: #f8f1ff !important; /* 背景：さらに薄い紫 */
    border-left: 5px solid #b39ddb !important;  /* 左側の線：優しい薄紫 */
    border-bottom: none !important; /* 下線はなし */
    border-radius: 15px !important; /* 角を丸くする */
    padding: 10px 15px !important;  /* 内側の余白 */
    font-size: 30px !important;     /* 文字の大きさ：30px */
}

/* 【中見出し（概要 の部分）】文字は薄いピンク、背景は白、左側の棒と下に薄いピンクのアンダーライン */
h3.atwiki-heading-h3, .atwiki-heading-h3, .post h3, .entry h3, h3[id^="id_"] {
    color: #ff8da1 !important;      /* 文字：優しい薄めのピンク */
    background: #ffffff !important; /* 背景：白 */
    border-left: 5px solid #ffb6c1 !important;   /* 左側の棒：ふんわり薄いピンク */
    border-bottom: 3px solid #ffb6c1 !important; /* 下のアンダーライン：ふんわり薄いピンク */
    border-top: none !important;    /* 上の線を消す */
    border-right: none !important;  /* 右の線を消す */
    border-radius: 0px !important;  /* 角丸なし */
    padding: 5px 0px 5px 10px !important; /* 左側の余白 */
    font-size: 20px !important;     /* 文字の大きさ：20px */
}

/* 【小見出し（日付の部分）】文字の色を薄い水色にする */
h4.atwiki-heading-h4, .atwiki-heading-h4, .post h4, .entry h4, h4[id^="id_"] {
    color: #87ceeb !important;      /* 文字：薄い水色 */
    background: none !important;    /* 背景なし */
    border: none !important;        /* 線なし */
    padding: 0 !important;          /* 余白なし */
    font-size: 18px !important;     /* 文字の大きさ：18px */
}

/* 【リンクの色】文字を青色にする */
a, .post a, .entry a, #sidebar a, #sidebar2 a, #menu a {
    color: #8186ED !important;      /* 文字：青 */
    text-decoration: none;          
}
a:hover, .post a:hover, .entry a:hover {
    color: #b39ddb !important;      
}

/* 【サイドバーすべて】背景を薄紫にする */
#sidebar h1, #sidebar h2, #sidebar h3, #sidebar2 h1, #sidebar2 h2, #sidebar2 h3,
#menu h1, #menu h2, #menu h3, .sidebox h1, .sidebox h2, .sidebox h3, .menu_title, .sidebox .title,
div[class*="sidebar"] h2, div[class*="menu"] h2, h2.title, .plugin_recentcreated h3 {
    color: #ffffff !important;      /* 文字：白 */
    background: #DABFFF !important; /* 背景：薄紫 */
    border: none !important;         
    border-radius: 12px !important;  
    padding: 8px 12px !important;   
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) !important; 
}

/* 水平線（区切り線）の色を水色にする */
hr {
    border: none !important;                 /* 元の線を消す */
    border-bottom: 2px solid #A3CEFF !important; /* 新しい水色の線（太さ2px） */
    margin: 10px 0 !important;               /* 上下のすき間（余白） */
    height: 0 !important;
}

/* コメントの「書き込む」ボタン（グレーの立体影） */
input[type="submit"], .atwiki-comment-submit, input[value="書き込む"] {
    position: relative !important;
    top: 0 !important;                 /* 通常時の縦位置 */
    color: #ffffff !important;         /* 文字の色：白 */
    font-weight: bold !important;      /* 文字を太く */
    font-size: 15px !important;        /* 文字の大きさ */
    padding: 10px 24px !important;     /* ボタンの内側の余白 */
    border: none !important;           /* 周りの余計な枠線を消す */
    cursor: pointer !important;
    border-radius: 8px !important;     /* 角丸 */

    /* 上が紫色、下がピンク色のグラデーション */
    background: linear-gradient(to bottom, #b39ddb 0%, #ffb7c5 100%) !important;
    
    /* ★通常時：グレーの立体的な土台（3px）と、下に広がる柔らかい影 */
    box-shadow: 0 3px 0px #b0b0b0, 0 4px 6px rgba(0,0,0,0.15) !important; 
    
    /* 動きを滑らかにする設定 */
    transition: all 0.05s ease !important;
}

/* ボタンに指を乗せたとき */
input[type="submit"]:hover, .atwiki-comment-submit:hover {
    filter: brightness(1.03) !important;
}

/* ★ボタンを押した瞬間、カチッとグレーの影に沈み込む */
input[type="submit"]:active, .atwiki-comment-submit:active {
    top: 3px !important;               /* 土台の分（3px）だけ下に下げる */
    /* ★押したとき：立体的な土台を無くして、ピタッと地面についた影にする */
    box-shadow: 0 0px 0px #b0b0b0, 0 1px 2px rgba(0,0,0,0.1) !important; 
}

/* 記事メニュー */
.atwiki-list-title {
    background-color: #E2D0FF !important;
    border: 1px solid #D3B9FF !important;
    border-left: 6px solid #C1E8FF !important;
    border-radius: 2px;
}

/* ページ全体の普通の文字（本文）の大きさと色を変更する */
body, p, td, th, li, .post-body, .entry-content {
    font-size: 19px !important;  /* 文字の大きさは19px*/
    color: #5A4033 !important;     /* ★文字の色は茶色で */
    line-height: 1.7 !important; /* 行と行の間のスキマ */
}

/* ページの一番上のタイトル文字を変更する */
#contents h1, 
.page-title, 
h1.title, 
#container h1 {
    font-size: 35px !important;  /* ★タイトルの文字の大きさ */
    color: #C7A5FF !important;   /* ★タイトルの文字の色は紫色 */
    font-weight: bold !important; /* 文字を太くする */
    border-bottom: 5px solid #BADBFF !important; /* タイトルの下に水色の線を引く */
    padding-bottom: 8px !important;
}

/* ページ内のすべてのリンクを強制的に太文字にする */
a, a:link, a:visited, a:hover, a:active, .atwiki-comment-name a {
    font-weight: 700 !important; /* ★bold(700)を指定 */
}

/* 右側メニューの「〇秒前」「〇日前」の文字を小さく・色変更 */
.recent_list_time, 
td.recent_list_time {
    font-size: 12px !important; /* ★文字の大きさ（標準より小さめ） */
    color: #888888 !important; /* ★時間の色：優しいグレー */
}

/* 引用の背景色と左側の点々（線）だけをピンポイントで変更 */
div.atwiki_blockquote, 
blockquote {
    background-color: #E4F7FF !important; /* ★背景色：優しい薄水色 */
    border-left: 3px dashed #ff69b4 !important; /* ★左側の線：3pxのピンク色の点線 */
}

/* ロード中の背景（白に設定） */
#atwiki-loader,
div[id*="loading"],
.loading-layer {
    background-color: #ffffff !important; 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
}

/* 中央のぐるぐるアニメーション */
#atwiki-loader::after,
div[id*="loading"]::after,
.loading-layer::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 40px !important; /* ぐるぐるの横幅 */
    height: 40px !important; /* ぐるぐるの縦幅 */
    margin: -20px 0 0 -20px !important;
    border: 4px solid #e0e0e0 !important; /* ぐるぐるの背景線 */
    border-top: 4px solid #3498db !important; /* ★ぐるぐるの動く色（青） */
    border-radius: 50% !important;
    animation: atwikiSpin 0.8s linear infinite !important;
}

/* ぐるぐるを回す動きの設定 */
@keyframes atwikiSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* アットウィキが裏で数字やリストを小さくしている設定をすべて102%に強制統一 */
body, div, span, p, a, li, dt, dd, td, th, h1, h2, h3, h4, h5, h6,
.num, .number, .count, .digits, [class*="num"], [id*="num"],
ol li, ul li, .list, .plugin_list {
 font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "Kosugi Maru", sans-serif !important;
 font-size: 102% !important;
 font-weight: 500 !important;
}