:root {
    --main-max-width: 600px;
    --main-width: 100%;
    --main-color: #27acd9;
    --accent-color: #e74c3c;
    --radius: 12px;
}

/* ====== 全体 ====== */
/* スムーズスクロール（ブラウザ対応） */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Segoe UI", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
    background-color: #f4f7fb;
    margin: 0;
    padding: 10px;
}

/* ====== ヘッダー要素 ====== */
h1 {
    max-width: var(--main-max-width);
    width: var(--main-width);
    box-sizing: border-box;
    margin: 10px auto;
    color: #4a90c2;
    text-align: center;
    padding: 8px;
    border: solid 2px #4a90c2;
    border-radius: 10px;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #e9f4ff 3px, #e9f4ff 7px);
}

h2 {
    color: #666666;
    padding: 0 4px;
    background: linear-gradient(transparent 60%, #fff493 60%);
    margin: 10px auto;
    width: 80%;
    text-align: center;
}


h3 {
    padding: 0.1em 0.5em;
    background-color: #ebffd5;
    color: #545454;
    border:1px solid #48ff00;
        border-left:10px solid #48ff00;
    border-radius: 8px;
}

/* ====== 横幅統一用コンテナ ====== */
.container {
    max-width: var(--main-max-width);
    width: var(--main-width);
    box-sizing: border-box;
    margin: 0 auto;
}

/* ====== 利用規約 / 使い方 ====== */
.btn-group {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: nowrap;
    margin: 0.25rem 0;
    overflow-x: auto;
}

/* リンク装飾 */
a.btn-border {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    min-width: 100px;
    padding: 0.5rem 1rem;
    font-weight: bold;
    border: 2px solid #27acd9;
    color: #27acd9;
    background-color: #ffffff;
    border-radius: 100vh;
    transition: all 0.3s ease;
    white-space: nowrap;
    /* 長い文字列も折り返さない */
}

a.btn-border:hover {
    color: #fff;
    background-color: #27acd9;
}

/* ====== 投稿フォーム ====== */
.post-form {
    background: #fff;
    padding: 5px 20px 0;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
}

/* 通常のinput・textarea枠 */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}


/* フォーカス時（PC・スマホ共通） */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #27acd9;
    box-shadow: 0 0 6px rgba(39, 172, 217, 0.5);
}

.post-form input,
.post-form textarea,
.post-form button {
    font-size: 14px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
    color: #555555;
}

.post-form label {
    color: #2C7BE5;
}


.post-form textarea {
    min-height: 80px;
    resize: vertical;
}

.post-form button {
    border: none;
    background-color: #27ae60;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

.post-form button:hover {
    background-color: #219150;
}

/* スマホ・タッチデバイス用: :focus-within で親要素も強調可能 */
@media (pointer: coarse) {
    .form-group:focus-within {
        border-color: #27acd9;
        box-shadow: 0 0 6px rgba(39, 172, 217, 0.5);
    }
}

/* キャラ選択 */
.character-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 5px 0;
    flex-wrap: nowrap;
    /* 折り返さない */
    margin: 5px 0 5px;
}

.character-select label {
    flex: 1 1 0;
    height: 60px;
    cursor: pointer;
    border-radius: 8px;
    overflow: visible;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.character-select input[type="radio"] {
    display: none;
}

.character-select img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: transform 0.3s, border 0.3s, box-shadow 0.3s;
    z-index: 1;
}

/* 共通：選択時の拡大・枠線 */
.character-select input[type="radio"]:checked+img {
    transform: scale(1.2);
    border: 2px solid #27acd9;
    box-shadow: 0 0 12px rgba(39, 172, 217, 0.6);
    z-index: 10;
    border-radius: 8px;
}

.character-select input[value="chiikawa"]:checked+img {
    background-color: #fff6e3;
}

.character-select input[value="hachiware"]:checked+img {
    background-color: #e3f2ff;
}

.character-select input[value="usagi"]:checked+img {
    background-color: #ffe3ed;
}

.character-select input[value="momonga"]:checked+img {
    background-color: #f1e3ff;
}

.character-select input[value="kurimanju"]:checked+img {
    background-color: #fff1c9;
}

.character-select input[value="rakko"]:checked+img {
    background-color: #e3fff2;
}

.character-select input[value="shisa"]:checked+img {
    background-color: #e3f8ff;
}


/* スマホ対応 */
@media (max-width: 768px) {
    .character-select label {
        flex: 1 1 0;
        height: 50px;
    }

    .character-select img {
        width: 100%;
        height: 100%;
    }
}


/* CAPTCHA 横並びレスポンシブ  */
.captcha-container {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin: 0 0 5px;
}

/* CAPTCHA画像 */
.captcha-container img {
    width: 120px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 0;
}

/* 入力欄 */
.captcha-container input[type="text"] {
    flex: 1 1 auto;
    min-width: 100px;
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    line-height: 1.2;
}

/* ====== コメントエリア ====== */
/* コメントボックス全体 */
.comment-container {
    background: #fff;
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
}

ul.daily-comments {
    list-style-type: none;
    padding: 0;
    margin: 0;
}


/* コメントアイテムの下部に細い実線を引く */
.comment-item {
    list-style-type: none;
    padding-left: 0;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

/* 最後のコメントの下には線が不要な場合は、除外する */
.daily-comments>.comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}


/* 01-03 コメントボックス */
.comment-box {
    color: #4a4a4a;
}

/* 01-03-01 コメントヘッダー */
.comment-header {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 0 0 4px;
}

.comment-header img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.comment-header span {
    line-height: 1;
}

/* 01-04 コメントボックス 本文 */
.comment-body-container {
    padding: 10px;
    background-color: #fffaf4;
    border: 1px solid #ff8000;
    border-radius: 4px;
}

.comment-body {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 90%;
    line-height: 1.4;
    margin: 4px 0;
}

/* 01-06-01 コメントボックス 削除コメント */
.comment-body-delete-container {
    padding: 10px;
    background-color: #eeeeee;
    border: 1px solid #333333;
    border-radius: 4px;
    font-size: 90%;
}




/* 01-04-01 コメントボックス 本文 IDコピー */
.id-copy-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.copy-id-no,
.copy-id-btn {
    display: inline-block;
    line-height: 1;
    padding: 5px 8px;
    font-size: 90%;
    font-weight: bold;
    border: 1px solid #0080ff;
    border-radius: 4px;
}

.copy-id-no {
    color: #0080ff;
    background-color: #ffffff;
}

/* コピーボタンのスタイル */
.copy-id-btn {
    background-color: #0080ff;
    color: #ecf0f1;
    cursor: pointer;
    transition: 0.2s;
}

.copy-id-btn:hover {
    color: #0080ff;
    background-color: #eeeeee;
}





/* 01-04-01 コメントボックス 本文 時刻 */
.comment-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 12px;
    color: #666;
    gap: 4px;
    margin-top: 4px;
}

.comment-footer i {
    color: #999;
}


.like-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* 下揃えに変更 */
    margin-top: 6px;
}

/* コメント時刻 */
.comment-time {
    font-size: 12px;
    color: #666;
}

.comment-time i {
    color: #999;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .like-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .like-button {
        flex: 0 0 auto;
    }

    .comment-time {
        flex: 0 0 auto;
    }
}




/* 01-04 コメントボックス 本文 */
/* いいねボタン共通 */
/* =======================
   いいねボタン
   ======================= */
.like-button {
    font-size: 16px;
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    background-color: #ffc0cb;
    color: #e74c3c;
    /* 通常赤 */
    cursor: pointer;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* ホバー時 */
.like-button:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* ハートアイコン */
.like-button .fa-heart {
    color: #e74c3c;
    /* 通常赤 */
    transition: color 0.3s, transform 0.3s, text-shadow 0.3s;
}

/* いいね済み */
.like-button.liked .fa-heart {
    color: #fff;
    /* 白抜き */
    text-shadow: 0 0 2px #e74c3c;
    /* 薄く赤の縁取り */
}

/* ハートアニメーション（押した瞬間） */
.like-button.popped .fa-heart {
    animation: pop-heart 0.3s ease forwards;
}

@keyframes pop-heart {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

/* 押せない・無効状態 */
.like-button:disabled,
.like-button.disabled {
    background: #f5f5f5;
    color: #999;
    cursor: default;
}

.like-button:disabled .fa-heart,
.like-button.disabled .fa-heart {
    color: #999;
    text-shadow: 0 0 1px #ccc;
}

/* メディアクエリ：スマホ表示 */
@media (max-width: 600px) {
    .like-button {
        font-size: 14px;
        padding: 5px 10px;
        width: auto;
        /* 横幅を制限 */
        gap: 4px;
    }
}


/* 01-05-01 コメントボックス 削除フォーム */
.delete-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
    width: 100%;
    box-sizing: border-box;
}

.delete-form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    /* 小さい画面で折り返し */
}

.delete-form input[type="text"] {
    flex: 1;
    min-width: 100px;
    max-width: 160px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 90%;
    color: #4a4a4a;
}

.delete-form button {
    flex-shrink: 0;
    max-width: 80px;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    background-color: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 90%;
    transition: 0.2s;
}

.delete-form button:hover {
    background-color: #c0392b;
}

/* 01-06-01 コメントボックス 削除コメント */
.comment-body-delete-container {
    padding: 10px;
    background-color: #eeeeee;
    border: 1px solid #333333;
    border-radius: 4px;
    font-size: 90%;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .comment-container {
        padding: 5px 10px;
        margin-bottom: 20px;
    }

    .comment-body-container {
        padding: 5px;
    }

    .comment-body-delete-container {
        padding: 5px 10px;
    }
}




/* ====== 投稿後メッセージ ====== */
.post-complete h2 {
    color: #444444;
}

.post-complete {
    max-width: var(--main-max-width);
    width: var(--main-width);
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
    padding: 10px 5px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    text-align: center;
}

.post-complete button {
    background-color: #27ae60;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    transition: 0.2s;
}

.post-complete button:hover {
    background-color: #219150;
}

.post-complete .token-box {
    background: #f8f9fa;
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: monospace;
    margin-bottom: 10px;
    display: inline-block;

    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
    box-sizing: border-box;
}


/* ====== エラーメッセージ ====== */
.token-warning {
    max-width: var(--main-max-width);
    width: var(--main-width);
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
    padding: 10px 5px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    text-align: center;
}

.token-warning h2 {
    color: #a10202;
}



/* ====== ページネーション ====== */
#pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* gapはUL要素のアイテム間隔ではなく、ページネーション全体の間隔になります */
    gap: 0.5rem; 
    margin: 20px 0;
    font-size: 14px;
}
/* ページネーション内のリストのスタイル */
#pagination ul {
    /* 【重要】リストアイテムを横並びにする */
    display: flex; 
    list-style: none;
    /* リストのデフォルトの余白をリセット */
    padding: 0;
    margin: 0; 
}

/* リストアイテム間の余白調整 */
#pagination li {
    margin: 0 2px;
}
#pagination a,
#pagination span { 
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    color: #27acd9;
    border: 1px solid #27acd9;
    transition: 0.2s;
}

#pagination a:hover {
    background: #27acd9;
    color: #fff;
}

#pagination .current-page {
    background: #27acd9;
    color: #fff;
    border-color: #27acd9;
}

#pagination .dots {
    /* .dotsはborderを付けず、縦方向を揃えるためにpaddingを調整 */
    padding: 5px 10px; 
    border: none;
    color: #999;
}

#pagination .prev-next.disabled {
    color: #ccc;
    border-color: #ccc;
    pointer-events: none;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    #pagination .prev-next {
        /* display: none; */
    }
}




/* ボタン群を右下に固定 */
/* 固定ボタン群（右下） */
#fixed-btns {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 9999;
    pointer-events: none;
    /* 全体は非活性にして個々で有効化 */
}

/* 内部のボタンは個別に pointer events 有効化 */
#fixed-btns a,
#fixed-btns button {
    pointer-events: auto;
}

/* トップへ戻るボタン（丸） */
.top-arrow-btn {
    background: #4d90fe;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    text-align: center;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.14s ease, background-color 0.18s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.top-arrow-btn:hover {
    transform: translateY(-2px) scale(1.05);
}

/* 切替ボタン（矩形） */
#toggle-deleted-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background-color: #f5a9a7;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

#toggle-deleted-btn:hover {
    transform: translateY(-2px);
}

/* active = 削除コメント「表示中」を表す（ON） */
#toggle-deleted-btn.active {
    background: #ff6b6b;
    border-color: #ff6b6b;
    color: #fff;
}

#toggle-deleted-btn i {
    font-size: 16px;
}

/* 非表示状態（OFF）のアイコンは目のアイコンで白抜き／薄めにする */
#toggle-deleted-btn:not(.active) {
    background: #fff;
    border-color: #ddd;
    color: #666;
}

/* .deleted-comment のアニメーション定義（JSで .show を付け外しします） */
.deleted-comment {
    transition: all 0.38s cubic-bezier(.2, .9, .2, 1);
    overflow: hidden;
}

/* visible state */
.deleted-comment.show {
    opacity: 1;
    max-height: 1000px;
    /* 大きめにとる */
    margin: 10px 0;
    padding: 10px;
    transform: translateY(0);
}

/* hidden state */
.deleted-comment.hide {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0 0;
    transform: translateY(-6px);
}

/* 画面小さめなら右下位置を少し上にあげる */
@media (max-width: 480px) {
    #fixed-btns {
        bottom: 14px;
        right: 12px;
        gap: 8px;
    }


}

/* 補助（スクリーンリーダ向け非表示テキスト） */
.visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
    white-space: nowrap;
}





/* フッター全体 */
footer {
    background-color: #f7f7f7; 
    color: #555;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid #eee;
    text-align: center;
}