/* =========================================================
   ⚡ 黄色い水玉のおえかき広場
   🍊 青みかん日記 新スキン

   コンセプト：
   ・黄色い水玉
   ・やさしい紙のような投稿カード
   ・お絵かき作品を主役にする
   ・返信は少し小さく、親しみやすく
   ・スマートフォンでも読みやすく
   ========================================================= */


/* =========================================================
   01. 基本設定
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 25px 12px 50px;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Meiryo",
        sans-serif;

    color: #5a451f;

    line-height: 1.7;

    background-color: #ffe66b;

    /*
     * 黄色い水玉
     */
    background-image:
        radial-gradient(circle at 15px 15px,
            rgba(255, 255, 255, 0.45) 0,
            rgba(255, 255, 255, 0.45) 9px,
            transparent 10px);

    background-size: 42px 42px;
}


/* =========================================================
   02. 基本レイアウト
   ========================================================= */

body>table {
    width: 100%;
    max-width: 980px;

    margin: 0 auto;

    border-collapse: collapse;
}

body>table td {
    padding: 0;
}


/* =========================================================
   03. 共通の読みやすさ
   ========================================================= */

.post,
form,
iframe,
.paint-area {
    position: relative;
    z-index: 1;
}


/* =========================================================
   04. 投稿カード
   ========================================================= */

.post {
    width: 100%;
    max-width: 820px;

    margin: 28px auto;

    padding: 0;

    background: #fffdf5;

    border: 4px solid #e7b936;
    border-radius: 24px;

    box-shadow:
        0 8px 20px rgba(125, 91, 15, 0.18);

    overflow: hidden;

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/*
 * マウスを乗せたとき
 *
 * 大きく動かしすぎず、
 * 「少し浮く」程度にする
 */
.post:hover {
    box-shadow:
        0 10px 24px rgba(125, 91, 15, 0.22);
}


/* =========================================================
   05. 投稿内部の table
   ========================================================= */

.post>table {
    width: 100%;

    border-collapse: collapse;

    background: transparent;
}


/* =========================================================
   06. 投稿タイトル
   ========================================================= */

.post>table tr:first-child td {
    padding: 14px 20px;

    background: #fff1a8;

    border-bottom: 2px solid #f0cf58;

    text-align: center;

    font-size: 1.15rem;
    font-weight: bold;

    color: #6b4a13;
}


/*
 * タイトル内のリンク
 */
.post>table tr:first-child td a {
    color: #76500d;
}


/* =========================================================
   07. 投稿者エリア
   ========================================================= */

.post>table tr:nth-child(2) td:first-child {
    width: 220px;

    padding: 20px 15px;

    background: #fff8d8;

    text-align: center;
    vertical-align: top;

    border-right: 2px dashed #e9ca64;
}


/*
 * 投稿者名
 */
.post>table tr:nth-child(2) td:first-child strong {
    color: #8b5d15;
}


/*
 * 投稿者情報内の小さな文字
 */
.post>table tr:nth-child(2) td:first-child small {
    color: #92763d;
}


/* =========================================================
   08. アイコン
   ========================================================= */

.post img {
    max-width: 100%;
    height: auto;
}

.post>table tr:nth-child(2) td:first-child img {
    max-width: 100%;

    margin: 8px auto;

    border-radius: 18px;

    border: 4px solid #ffffff;

    box-shadow:
        0 3px 8px rgba(120, 90, 20, 0.18);
}


/* =========================================================
   09. 投稿本文
   ========================================================= */

.post>table tr:nth-child(2) td:last-child {
    padding: 25px;

    vertical-align: top;

    background: #fffefa;

    min-height: 180px;

    font-size: 1.05rem;

    word-break: break-word;
}


/*
 * 本文内の段落
 */
.post p {
    margin: 0 0 1em;
}


/*
 * 最後の段落だけ余白を小さく
 */
.post p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   10. 見出し
   ========================================================= */

.post h1,
.post h2,
.post h3,
.post h4 {
    color: #74500f;

    line-height: 1.45;
}

.post h1 {
    font-size: 1.45rem;
}

.post h2 {
    padding-left: 12px;

    border-left: 6px solid #e7bd38;

    font-size: 1.3rem;
}

.post h3 {
    padding-bottom: 4px;

    border-bottom: 2px dotted #e4c96d;

    font-size: 1.15rem;
}


/* =========================================================
   11. hr
   ========================================================= */

/*
 * 投稿本文の区切り線
 *
 * 普通の <hr> でも、
 * このスキンらしい「やさしい点線」にする
 */
hr {
    height: 0;

    margin: 22px auto;

    border: 0;

    border-top: 2px dotted #e7cb72;
}


/*
 * 投稿カード内の hr
 */
.post hr {
    margin: 18px 0;

    border-top: 2px dotted #e7cb72;
}


/*
 * paint-area 内の hr
 */
.paint-area hr {
    margin: 18px 5px;

    border-top: 2px dotted #e5c55c;
}


/* =========================================================
   12. 強調文字
   ========================================================= */

.post strong {
    color: #8b5d15;
}

.post em {
    color: #9a7026;
}


/* =========================================================
   13. 引用
   ========================================================= */

.post blockquote {
    margin: 18px 0;

    padding: 12px 18px;

    background: #fff8d8;

    border-left: 5px solid #e7bd38;
    border-radius: 10px;

    color: #765d2c;
}


/* =========================================================
   14. リスト
   ========================================================= */

.post ul,
.post ol {
    padding-left: 1.8em;

    margin-top: 12px;
    margin-bottom: 12px;
}

.post li {
    margin: 4px 0;
}


/* =========================================================
   15. 投稿イラスト
   ========================================================= */

/*
 * 投稿画像をできるだけ大きく表示
 */
.post+br+img,
img[style*="dashed"] {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin: 20px auto;

    padding: 8px;

    background: #ffffff;

    border: 5px dashed #e7bd38 !important;

    border-radius: 20px;

    box-shadow:
        0 8px 20px rgba(120, 90, 20, 0.20);
}


/*
 * 画像リンクの場合
 */
a img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   16. リンク
   ========================================================= */

a {
    color: #a35f00;

    font-weight: bold;

    text-decoration: none;

    transition:
        color 0.15s ease,
        background 0.15s ease;
}

a:hover {
    color: #d57b00;

    text-decoration: underline;
}


/* =========================================================
   17. 返信リンク
   ========================================================= */

.post a[href*="reply-form"] {
    display: inline-block;

    margin-top: 8px;

    padding: 5px 12px;

    background: #fff0a3;

    border: 1px solid #e4bf45;
    border-radius: 999px;

    font-size: 0.9rem;
}

.post a[href*="reply-form"]:hover {
    background: #ffe477;

    text-decoration: none;
}


/* =========================================================
   18. Good
   ========================================================= */

.post a[href*="praise.php"] {
    display: inline-block;

    padding: 7px 14px;

    background: #fff2a6;

    border: 2px solid #e3bd3f;

    border-radius: 999px;

    color: #76500d;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}

.post a[href*="praise.php"]:hover {
    background: #ffdf55;

    text-decoration: none;

    transform: translateY(-1px);
}


/* =========================================================
   19. 返信エリア
   ========================================================= */

/*
 * 返信全体
 *
 * 親投稿より少し小さく、
 * 右側にちょこんと寄せる
 */
#reply {
    width: 95%;
    max-width: 750px;

    margin: -15px auto 25px;

    padding: 0;

    transform: scale(0.96);

    transform-origin: center;
}


/*
 * 返信カード
 */
#reply .post {
    width: 100%;

    margin: 18px 0;

    border: 3px solid #eacb6b;

    background: #fffdf0;

    border-radius: 20px;

    box-shadow:
        0 5px 14px rgba(125, 91, 15, 0.14);

    transform: scale(0.94);

    transform-origin: right top;
}


/*
 * 返信タイトル
 */
#reply .post>table tr:first-child td {
    padding: 10px 15px;

    background: #fff4b8;

    border-bottom: 1px solid #efd778;

    font-size: 1rem;
}


/*
 * 返信者
 */
#reply .post>table tr:nth-child(2) td:first-child {
    width: 170px;

    padding: 14px 10px;

    background: #fff9df;

    border-right: 2px dashed #ead27b;
}


/*
 * 返信アイコン
 */
#reply .post>table tr:nth-child(2) td:first-child img {
    max-width: 90px;

    margin: 5px auto;

    border-width: 3px;

    border-radius: 14px;
}


/*
 * 返信本文
 */
#reply .post>table tr:nth-child(2) td:last-child {
    padding: 17px;

    font-size: 0.95rem;
}


/*
 * 返信のイラスト
 */
#reply img[style*="dashed"] {
    max-width: 90%;

    border-width: 4px !important;

    border-radius: 15px;

    padding: 6px;
}


/* =========================================================
   20. お絵かきエリア
   ========================================================= */

.paint-area {
    width: 100%;
    max-width: 820px;

    margin: 25px auto 10px;

    padding: 12px;

    background: #fffdf5;

    border: 4px solid #e7b936;

    border-radius: 24px;

    box-shadow:
        0 8px 20px rgba(125, 91, 15, 0.18);

    text-align: center;
}


/*
 * お絵かき作品
 */
.paint-area img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin: 0 auto;

    border: 5px dashed #e7bd38;

    border-radius: 18px;

    background: #ffffff;
}


/* =========================================================
   21. フォーム
   ========================================================= */

form {
    width: 100%;
    max-width: 820px;

    margin: 25px auto;

    padding: 18px;

    background: rgba(255, 253, 239, 0.96);

    border: 2px solid #e6c75a;

    border-radius: 18px;

    box-shadow:
        0 4px 12px rgba(120, 90, 20, 0.12);
}


/* =========================================================
   22. 入力欄
   ========================================================= */

input[type="number"],
input[type="password"],
input[type="text"] {
    max-width: 180px;

    padding: 9px 12px;

    margin: 5px;

    border: 2px solid #dfc35a;

    border-radius: 10px;

    background: #fffef8;

    color: #5a451f;

    font-size: 16px;

    outline: none;
}


/*
 * 入力欄フォーカス
 */
input[type="number"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
    border-color: #dca916;

    box-shadow:
        0 0 0 3px rgba(255, 230, 107, 0.45);
}


/* =========================================================
   23. ボタン
   ========================================================= */

button {
    padding: 9px 18px;

    margin: 5px;

    border: 0;

    border-radius: 999px;

    background: #e9b92e;

    color: #ffffff;

    font-weight: bold;

    font-size: 15px;

    cursor: pointer;

    box-shadow:
        0 3px 7px rgba(120, 90, 20, 0.18);

    transition:
        background 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

button:hover {
    background: #dca916;

    transform: translateY(-1px);

    box-shadow:
        0 5px 10px rgba(120, 90, 20, 0.20);
}

button:active {
    transform: translateY(1px);
}


/* =========================================================
   24. 広告・iframe
   ========================================================= */

iframe {
    display: block;

    max-width: 100%;

    margin: 30px auto;

    border: 3px solid #e8c64e;

    border-radius: 18px;

    background: #ffffff;
}


/* =========================================================
   25. 小さな区切り・補助表示
   ========================================================= */

small {
    color: #8b7546;
}


/*
 * 日付などのメタ情報
 */
.post time {
    color: #92763d;

    font-size: 0.85rem;
}


/* =========================================================
   26. 選択文字
   ========================================================= */

::selection {
    background: #ffe477;

    color: #5a451f;
}


/* =========================================================
   27. スクロールバー
   ========================================================= */

/*
 * 対応ブラウザでは少しだけ
 * 黄色い水玉スキンに合わせる
 */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #fff3a6;
}

::-webkit-scrollbar-thumb {
    background: #dfbd42;

    border-radius: 999px;

    border: 2px solid #fff3a6;
}

::-webkit-scrollbar-thumb:hover {
    background: #cda72f;
}


/* =========================================================
   28. スマートフォン
   ========================================================= */

@media (max-width: 700px) {

    body {
        padding: 12px 7px 35px;

        background-size: 34px 34px;
    }


    /* -----------------------------------------
       投稿
       ----------------------------------------- */

    .post {
        width: 100%;

        margin: 20px auto;

        border-width: 3px;

        border-radius: 18px;
    }


    /*
     * 投稿 table を縦並びにする
     */
    .post>table,
    .post>table tbody,
    .post>table tr,
    .post>table td {
        display: block;

        width: 100% !important;
    }


    /*
     * タイトル
     */
    .post>table tr:first-child td {
        padding: 12px;

        font-size: 1.05rem;
    }


    /*
     * 投稿者
     */
    .post>table tr:nth-child(2) td:first-child {
        padding: 15px;

        border-right: 0;

        border-bottom: 2px dashed #e9ca64;
    }


    /*
     * アイコン
     */
    .post>table tr:nth-child(2) td:first-child img {
        max-width: 100px;
    }


    /*
     * 本文
     */
    .post>table tr:nth-child(2) td:last-child {
        padding: 18px;

        font-size: 1rem;
    }


    /*
     * 見出し
     */
    .post h2 {
        font-size: 1.15rem;
    }

    .post h3 {
        font-size: 1.05rem;
    }


    /*
     * hr
     */
    .post hr {
        margin: 16px 0;
    }


    /*
     * イラスト
     */
    img[style*="dashed"] {
        max-width: 96%;

        border-width: 4px !important;

        border-radius: 16px;
    }


    /* -----------------------------------------
       返信
       ----------------------------------------- */

    #reply {
        width: 92%;

        margin: -8px 0 20px auto;

        padding: 0;
    }


    #reply .post {
        width: 100%;

        margin: 14px 0;

        transform: scale(0.97);

        transform-origin: right top;

        border-width: 3px;
    }


    #reply .post>table tr:first-child td {
        padding: 10px;
    }


    #reply .post>table tr:nth-child(2) td:first-child {
        padding: 12px;

        border-right: 0;

        border-bottom: 2px dashed #ead27b;
    }


    #reply .post>table tr:nth-child(2) td:first-child img {
        max-width: 80px;
    }


    #reply .post>table tr:nth-child(2) td:last-child {
        padding: 15px;

        font-size: 0.95rem;
    }


    /* -----------------------------------------
       お絵かきエリア
       ----------------------------------------- */

    .paint-area {
        width: 100%;

        margin: 20px auto 10px;

        padding: 8px;

        border-width: 3px;

        border-radius: 18px;
    }


    .paint-area img {
        max-width: 100%;

        border-width: 4px;

        border-radius: 14px;
    }


    /* -----------------------------------------
       フォーム
       ----------------------------------------- */

    form {
        padding: 14px;

        border-radius: 15px;
    }


    /* -----------------------------------------
       入力
       ----------------------------------------- */

    input[type="number"],
    input[type="password"],
    input[type="text"] {
        width: 100%;

        max-width: none;

        margin: 5px 0;
    }


    /* -----------------------------------------
       ボタン
       ----------------------------------------- */

    button {
        width: 100%;

        margin: 6px 0;
    }


    /* -----------------------------------------
       iframe
       ----------------------------------------- */

    iframe {
        margin: 20px auto;

        border-width: 2px;

        border-radius: 14px;
    }
}





.book1 {
    width: 600px;
    margin: 0 auto;
}