/* ページ全体 */
body {
    word-break: break-all;
    background-color: white;
    color: black;
    margin: 0;
    padding: 0;
    font-family: Meiryo, sans-serif;
}

/* 全体を中央に寄せるコンテナ */
#page-wrapper {
    max-width: 980px;      /* サイトの基本幅 */
    margin: 0 auto;        /* 中央寄せ */
    position: relative;
}



/* リンク */
a:link { 
    color: #00c; 
    text-decoration: none;
}
a:visited { 
    color: #00c; 
}
a:hover { 
    color: #ccf; 
}
a img { 
    border: none; 
}

/* ブロック要素*/ 
p, h1, h2, h3, table, ul {
    margin: 0 0 1em;
}

/* コンテンツを入れる */
div#content {
    margin-left: 240px;   /* 左にステータス＋広告分のスペース */
    margin-top: 320px;    /* ヘッダー＋メニューの高さ分を空ける */
    margin-bottom: 100px;
    background-color: white;
    width: 740px;
    box-sizing: border-box;
}



div#title {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);  /* 横方向に中央寄せ */
    width: 980px;

    background-color: white;
    text-shadow: 0px 4px 5px;
    font-size: 50px;
    height: 65px;
    line-height: 1.3;
    font-style: oblique;
    z-index: 1000;
}
span#user-options {
    font-size: 30px;  /* リンクの文字サイズを通常に */
    position: absolute;
    top: 20px;
    right: 10px;
    text-shadow: none; /* テキストシャドウを無効に */
    display: inline-block;
    
}

/* リンクスタイルを標準的な青色に */
span#user-options a {
    color: plum !important; /* リンクを青色に */
}

div#title a:link { 
    color: silver; 
    text-decoration: none;
}
div#title a:visited { 
    color: silver; 
}

div#header {
    position: fixed;
    top: 65px;                     /* タイトルの下 */
    left: 50%;
    transform: translateX(-50%);
    width: 980px;

    font-size: 20px;
    min-height: 10px;
    text-align: center;
    background-color: #99FF33;
    z-index: 999;
}
/*ヘッダーの右端のリンク*/
#this-site {
    position: absolute;
    right: 10px;
}

/* プライバシーポリシー・利用規約ページ*/
.legal-page {
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
}

.legal-page h2 {
    font-size: 26px;
    margin-bottom: 0.8em;
}

.legal-page h3 {
    font-size: 20px;
    margin-top: 1.5em;
    margin-bottom: 0.4em;
}

.legal-page p {
    margin-bottom: 1em;
}

.legal-page ul {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

#policy-fixed-links {
    position: fixed;
    left: calc(50% - 490px);
    bottom: 10px;
    width: 240px;
    text-align: left;
    font-size: 14px;
    background-color: white;
    z-index: 900;
    opacity: 0.9;
}


/* 上の枠 */
div#menu {
    position: fixed;
    top: 96px;
    left: calc(50% - 250px);  /* 980px中の右側 740px の領域にぴったり来る */
    width: 740px;
    height: 220px;
    font-size: 23px;
    background-color: white;
    border-bottom: thick dashed #99FF33;
    opacity: 0.85;
    font-weight: bold;
    z-index: 800;
}



/* 「_obj.html.erb」の指定 */
#obj0 {
    border-bottom: thick solid fuchsia;
    border-left: thick solid fuchsia;
    border-right: thick solid fuchsia;
    margin: 5px;
}
#obj0 #obj_category {
    color: white;
    background-color: fuchsia;
    text-align: right;
}
#obj1 {
    border-bottom: thick solid aqua;
    border-left: thick solid aqua;
    border-right: thick solid aqua;
    margin: 5px;
}
#obj1 #obj_category {
    background-color: aqua;
    text-align: right;
}
#obj2 {
    border-bottom: thick solid yellow;
    border-left: thick solid yellow;
    border-right: thick solid yellow;
    margin: 5px;
}
#obj2 #obj_category {
    background-color: yellow;
    text-align: right;
}
#obj3 {
    border-bottom: thick solid lime;
    border-left: thick solid lime;
    border-right: thick solid lime;
    margin: 5px;
}
#obj3 #obj_category {
    background-color: lime;
    text-align: right;
}
#obj4 {
    border-bottom: thick solid maroon;
    border-left: thick solid maroon;
    border-right: thick solid maroon;
    margin: 5px;
}
#obj4 #obj_category {
    color: white;
    background-color: maroon;
    text-align: right;
}
#obj5 {
    border-bottom: thick solid navy;
    border-left: thick solid navy;
    border-right: thick solid navy;
    margin: 5px;
}
#obj5 #obj_category {
    color: white;
    background-color: navy;
    text-align: right;
}
#obj6 {
    border-bottom: thick solid darkgreen;
    border-left: thick solid darkgreen;
    border-right: thick solid darkgreen;
    margin: 5px;
}
#obj6 #obj_category {
    color: white;
    background-color: darkgreen;
    text-align: right;
}
#obj7 {
    border-bottom: thick solid olive;
    border-left: thick solid olive;
    border-right: thick solid olive;
    margin: 5px;
}
#obj7 #obj_category {
    color: white;
    background-color: olive;
    text-align: right;
}
#obj8 {
    border-bottom: thick solid darkcyan;
    border-left: thick solid darkcyan;
    border-right: thick solid darkcyan;
    margin: 5px;
}
#obj8 #obj_category {
    color: white;
    background-color: darkcyan;
    text-align: right;
}
#obj9 {
    border-bottom: thick solid blueviolet;
    border-left: thick solid blueviolet;
    border-right: thick solid blueviolet;
    margin: 5px;
}
#obj9 #obj_category {
    color: white;
    background-color: blueviolet;
    text-align: right;
}

/* タイトル（上の行） */
#obj_title {
    font-size: 40px;
    margin: 0;
}

#obj_body {
    font-size: 30px;
}
#obj_body a:link {
    text-decoration: underline;
}
#obj_body a:visited {
    color: #a08;
}

/* タイトル＋ボタン全体 */
.topic-header {
    margin-top: 4px;
}

/* ボタンを右下に置く行 */
.topic-toggle-row {
    text-align: right;
    margin-top: 4px;   /* タイトルとの間の余白 */
}

/* 説明表示トグルボタン */
.topic-toggle-btn {
    font-size: 16px;
    padding: 4px 12px;
    background-color: black;
    color: white;
    cursor: pointer;

    border-radius: 9999px;  /* まるっこく */
    outline: none;
}

/* 議題説明の折りたたみ用 */
.topic-description {
    display: none;        /* 初期状態は非表示 */
}

div#logout {
    background-color: #FF3366;
}

#group_color {
    border: thick solid black;
    margin: 5px; 
}

#group_name_color {
    color: purple;
}

.group-image{
    width: 70px; 
    vertical-align: middle;
}

#my_group_text{
    font-size: 25px;
    border-bottom: solid 10px #3eb8ff;
}

#text_body {
    font-size: 30px;
}
#text_body a:link {
    text-decoration: underline;
}
#text_body a:visited {
    color: #a08;
}

#represent {
    font-size: 28px;
    color: red;
}

#sign {
    font-size: 20px;
    color: purple;
    border: thin dashed purple;
}

#post_sign {
    border-bottom: double 6px #FF773E;
}



.fixed-footer {
    position: fixed;
    bottom: 0;
    left: calc(50% - 490px + 240px);  
    width: 740px;
    background-color: #000;
    padding: 10px;
    z-index: 100;
}


.fixed-footer form {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fixed-footer textarea {
    width: 600px; /* 固定幅 */
    height: 70px; /* 固定高さ */
    resize: none; /* サイズ変更を無効化 */
    margin-right: 10px;
    background-color: #ffffff;
}
.fixed-footer input[type="submit"] {
    padding: 12px 20px;        /* ボタンの内側余白 */
    font-size: 20px;           /* 文字サイズ */
    border-radius: 6px;        /* 角丸 */
    border: none;              /* ボーダーなし */
    cursor: pointer;
}

#elected_text {
    font-size: 25px;
    color:#00c;
    text-shadow: 2px 2px 2px red;
}



/* ステータスバーの固定 */
div#status_bar {
    position: fixed;
    top: 96px; /* ヘッダーのすぐ下 */
    left: calc(50% - 490px);  /* 980px の左端に合わせる */
    width: 240px;
    height: 220px;
    font-size: 23px;
    background-color: white;
    border-bottom: thick dashed #99FF33;
    opacity: 0.85;
    overflow: hidden;
    z-index: 900;
}

/* 一言メッセージのアニメーション */
.status-bar-container {
    position: relative;
    width: 100%;
    height: 220px;  /* ステータスバーの高さに合わせる */
    overflow: hidden;
}

.status-bar-message {
    position: absolute;
    top: 220px;  /* 初期位置を固定 */
    width: 100%;
    text-align: left;
    transition: transform 2s ease-in-out, opacity 2s ease-in-out;
    height: auto;  /* 文字数に応じて高さを自動調整 */
}


.status-bar-message.show {
    transform: translateY(-220px);  /* 固定された位置で止まる */
    opacity: 1;
}

.status-bar-message.leave {
    transform: translateY(50px);  /* 消えるときも同じ距離 */
    opacity: 0;
}

.archive-entry {
    border: 1px solid #ccc;
    padding: 15px;
    margin: 10px 0;
    cursor: pointer;
    background-color: #f9f9f9;
    transition: background-color 0.3s;
}

.archive-entry:hover {
    background-color: #e9e9e9;
}

/* メニュー項目の画像スタイル */
.memu-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;  /* 念のためはみ出し防止 */
    
}

.menu-image {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40%;       /* メニュー幅に対する割合 */
    max-width: 260px; /* 大きくなりすぎないよう上限 */
    height: auto;     /* 比率維持 */
    z-index: -1;      /* 背景的に使いたいなら -1 でもOK */
    object-fit: contain;
}



/* 広告領域 */
div#ad_area {
    position: fixed;
    top: 320px;
    left: calc(50% - 490px);  /* 左端 */
    width: 240px;
    height: 640px;
    padding-right: 30px;
    box-sizing: border-box;
}


/* 広告領域内の画像 */
div#ad_area img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


/* groups/new.htmlの絵のパレット */
.color-swatch {
    width: 30px;
    height: 30px;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #000; /* シンプルなボーダー */
}

#colorPicker {
    display: flex;
    flex-wrap: wrap;
    width: 120px;
    margin-top: 100px;
}

.drawing-tools {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 筆の太さ選択ボタンのスタイル */
.brush-size-option {
    padding: 10px 15px;
    border: 2px solid #000;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

.brush-size-option.selected {
    background-color: #ddd;
    border-color: #007bff;
}
/* ===========================
   共通フォームレイアウト
   =========================== */

.responsive-form table {
    width: 100%;
    border-collapse: collapse;
}

.responsive-form th,
.responsive-form td {
    padding: 6px 4px;
    vertical-align: top;
}

.responsive-form th {
    text-align: left;
    white-space: nowrap;
}

.responsive-form .help-text {
    font-size: 0.9em;
    color: #666;
}

/* textarea の調整（横固定・縦だけ拡大） */
.responsive-form textarea {
    resize: vertical;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    /* カーソル中央問題の解決 */
    max-height: auto;          /* ← 自動高さにする */
    min-height: 120px;     /* ← 好みの初期高さに調整 */
    line-height: 1.4;      /* ← 行の高さを標準化（重要） */
    padding: 6px;          /* ← 上下左右の余白を適度に */
}

.responsive-form button[type="submit"] {
        width: 200px;
        height: 50px;
        padding: 12px;
        font-size: 1em;
        margin-top: 15px;
    }


/* スマホ対応 */
@media screen and (max-width: 768px) {

    /* 全体を1カラム縦並びに */
    #page-wrapper {
        max-width: 100%;
        margin: 0;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    /* 固定配置を解除して、普通に上から順に流れるように */
    div#title,
    div#header,
    div#status_bar,
    div#menu,
    div#content,
    div#ad_area {
        position: static;
        width: 100%;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
    }

    /* 並び順（order を使う） */
    /* タイトル */
    div#title {
        order: 0;
        text-align: center;
        font-size: 32px;
        height: auto;
        text-shadow: 0px 2px 3px;
    }

    /* ヘッダー（ナビなど） - タイトルのすぐ下 */
    div#header {
        order: 1;
        margin-top: 5px;
        font-size: 16px;
    }

    /* ステータスバー：タイトル・ヘッダーの次 */
    div#status_bar {
        order: 2;
        margin-top: 10px;
        height: auto;         /* 固定高さを解除 */
        border-bottom: thick dashed #99FF33;
        opacity: 0.95;
    }

    /* メニュー：ステータスバーの次 */
    div#menu {
        order: 3;
        margin-top: 10px;
        height: auto;
        border-bottom: thick dashed #99FF33;
        opacity: 0.95;
    }

    /* コンテンツ：メニューの次 */
    div#content {
        order: 4;
        margin: 10px 0 40px;
        width: 100%;
        box-sizing: border-box;
    }

    /* 広告：コンテンツの下 */
    div#ad_area {
        order: 5;
        margin-top: 20px;
        padding-right: 0;
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }

    /* タイトル右上のログイン/ログアウトリンク */
    span#user-options {
        font-size: 18px;
        position: static;
        display: block;
        margin-top: 5px;
        text-align: right;
        text-shadow: none;
    }

    /* メニュー画像が枠から外れないように調整 */
    .memu-image-container {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .menu-image {
        position: relative;        /* absoluteをやめて普通に中で表示 */
        top: auto;
        right: auto;
        display: block;
        width: 60%;               /* メニュー幅に対する割合 */
        max-width: 220px;         /* 上限 */
        height: auto;
        margin: 5px auto 0;       /* 中央寄せ */
        z-index: 0;
        object-fit: contain;
    }

    /* フッターの投稿フォームも画面幅に合わせる */
    .fixed-footer {
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
    }

    .fixed-footer textarea {
        width: calc(100% - 20px);
    }
    .fixed-footer input[type="submit"] {
        width: 30%;
        padding: 16px 0;
        font-size: 22px;
        border-radius: 8px;
    }

/*フォームの共通css*/
   /* テーブルを縦並びに変換 */
    .responsive-form table,
    .responsive-form tbody,
    .responsive-form tr,
    .responsive-form th,
    .responsive-form td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .responsive-form th {
        margin-top: 12px;
        font-weight: bold;
    }

    .responsive-form td {
        margin-bottom: 6px;
    }

    .responsive-form input[type="text"],
    .responsive-form textarea,
    .responsive-form select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .responsive-form .help-text {
        margin-top: 2px;
        margin-bottom: 10px;
        font-size: 0.85em;
        color: #666;
    }

    .responsive-form button[type="submit"] {
        width: 100%;
        padding: 12px;
        font-size: 1em;
        margin-top: 15px;
    }

    #policy-fixed-links {
        position: static;
        width: 100%;
        text-align: left;
        padding: 10px 0;
    }
}