@charset "UTF-8";

/* =========================================
   全体：冷たさを抑え、温かみのある背景と柔らかな墨色に
========================================= */

body{
    margin:0;
    padding:0;
    background:#f2f7fa; /* ほんのりくすんだ、温かみのあるソフトブルー */
    color:#2c333a;       /* 真っ黒ではない、目に優しいアッシュネイビー */
    font-size:15px;
    line-height:1.6;
    font-family:
        "BIZ UDPGothic",
        "Hiragino Sans",
        "Yu Gothic",
        sans-serif;
}

.like-count{
	text-align:center;
	font-size:14px;
	font-weight:bold;
	color:#e91e63;
	margin:4px 0 8px 0;
}
.like-count a{
	text-decoration:none;
	color:#e91e63;
	font-weight:bold;
}

.like-count a:hover{
	text-decoration:none;
}



/* =========================================
   ヘッダー：グラデーションを親しみやすいターコイズ系に
========================================= */

#head{
    background:#fff;
    border-bottom:1px solid #e2edf5;
    padding:18px 24px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.head-top{
    max-width:1000px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

#head h1{
    margin:0;
    font-family:"BIZ UDPGothic",sans-serif;
    font-size:26px;
    letter-spacing:.08em;
    font-weight:700;


}

.head-desc{
    margin-top:4px;
    color:#738291;
    font-size:14px;
}

.head-nav{
    display:flex;
    gap:10px;
    flex-shrink:0;
}

.head-btn{
    display:inline-block;
    padding:8px 16px;
    border-radius:20px;
    text-decoration:none;
    background:#eef5fa;
    color:#2c333a;
    font-weight:bold;
}

.head-btn-post{
    background:#f07d3b;
    color:#fff;
}

/* =========================================
   メイン：影を柔らかく、角丸を少し広げて優しい印象に
========================================= */

#main{
    max-width:1000px;
    margin:16px auto;
    padding:14px;
    background:#fff;
    border-radius:16px; /* 角丸を少し大きくして柔らかく */
    box-shadow:0 4px 16px rgba(35,124,179,.06); /* 優しい青系の影 */
}

/* =========================================
   上部ボタン
========================================= */

.top-btn{
    margin-bottom:14px;
    line-height:2.2;
}

.button{
    display:inline-block;
    padding:6px 14px;
    margin:2px;
    background:linear-gradient(#60b3f0,#358ec9);
    color:#fff !important;
    text-decoration:none;
    border-radius:20px; /* 丸みを持たせてカチッとした印象をなくす */
    border:1px solid #2e7fb5;
    font-size:13px;
    font-weight: bold;
    transition:.2s;
}

.button:hover{
    background:linear-gradient(#358ec9,#2571a3);
    transform: translateY(-1px);
}

/* =========================================
   新規投稿ボタン：少し楽し気なアクセントカラーに
========================================= */

.new-btn{
    margin-bottom:12px;
}

.new-btn input{
    background:linear-gradient(#ff9e66, #f07d3b); /* 温かみのあるオレンジをアクセントに */
    color:#fff;
    border:none;
    border-radius:20px;
    padding:8px 22px;
    font-weight:bold;
    cursor:pointer;
    font-size:14px;
    box-shadow:0 2px 6px rgba(240,125,59,.2);
    transition: .2s;
}

.new-btn input:hover{
    background:linear-gradient(#f07d3b,#d66320);
    transform: translateY(-1px);
}

/* =========================================
   投稿フォーム
========================================= */

#reg-box{
    margin-bottom:20px;
}

#reg-tbl{
    width:100%;
    border-collapse:collapse;
    overflow: hidden;
    border-radius: 10px;
    border-style: hidden;
    box-shadow: 0 0 0 1px #e2edf5;
}

#reg-tbl th{
    background:#5cb3cc; /* パキッとした青ではなく、優しいシアンブルー */
    color:#fff;
    padding:10px;
    border:1px solid #e2edf5;
    font-size:13px;
}

#reg-tbl td{
    background:#fcfdfe;
    padding:10px;
    border:1px solid #e2edf5;
}

/* =========================================
   入力欄
========================================= */

input[type=text],
input[type=password],
textarea{
    box-sizing:border-box;
    border:1px solid #c2dae8;
    border-radius:8px;
    padding:8px;
    font-size:14px;
    background:#fff;
    transition: .2s;
}

input[type=text]:focus,
input[type=password]:focus,
textarea:focus{
    border-color:#5cb3cc;
    outline:none;
    box-shadow:0 0 6px rgba(92,179,204,.35);
}

.reg-name{
    width:220px;
    max-width:100%;
}

.reg-url{
    width:100%;
}

.reg-com{
    width:100%;
    height:140px;
    resize:vertical;
}

.reg-num{
    width:90px;
}

.reg-btn{
    padding:12px 28px;
    background:linear-gradient(#3aa0d9, #237cb3);
    color:#fff;
    border:none;
    border-radius:24px;
    cursor:pointer;
    font-size:15px;
    font-weight:bold;
    min-width:140px;
    box-shadow:0 3px 8px rgba(35,124,179,.2);
    transition:.2s;
}

.reg-btn:hover{
    background:linear-gradient(#237cb3,#1a6494);
    transform:translateY(-1px);
}

.reg-btn:active{
    transform:translateY(0);
}

.post-btn{
    text-align:center;
    margin-top:16px;
}

/* 返信投稿ボタン */
.res-btn {
    text-align: center;
    margin: 1.2em 0;
}

.res-btn input[type="button"]{
    background: linear-gradient(180deg,#5cb3cc 0%, #2f8299 100%);
    color: #fff;
    border: 1px solid #256b7d;
    border-radius: 20px;
    padding: 0.5em 1.6em;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: 0.2s;
}

.res-btn input[type="button"]:hover{
    background: linear-gradient(180deg,#70c2db 0%, #3a96b0 100%);
    transform: translateY(-1px);
}


/* =========================================
   スレッド一覧
========================================= */

.topic{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

/* 見出し */

.topic .thead th{
    background:linear-gradient(#5cb3cc,#368ea6);
    color:#fff;
    padding:10px;
    border-bottom:2px solid #256b7d;
    font-size:13px;
}

/* 行 */

.topic tr{
    transition:background .15s;
}

.topic td{
    border-bottom:1px solid #ebd6ff; /* 境界線にほんのり紫を混ぜて上品に */
    border-bottom:1px solid #e2edf5;
    vertical-align:top;
}

/* No */

.thread-no{
    width:55px;
    text-align:center;
    padding-top:12px;
    font-weight:bold;
    color:#4a5560;
}

/* スレッドカード */

.thread-cell{
    padding:10px 12px;
    line-height:1.4;
    cursor:pointer;
    transition:background .15s;
}

.thread-cell:hover{
    background:#f4f9fc;
}

/* タイトル */

.thread-title{
    font-size:16px;
    font-weight:bold;
    margin-bottom:3px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;
    font-weight:700;
}

.thread-title a{
    color:#1e6b99;
    text-decoration:none;
    display:inline;
}

.thread-title a:hover{
    color: #f07d3b; /* ホバー時に温かいオレンジに変化 */
    text-decoration:underline;
}

/* 返信数：ここも少し温かみのある色に */
.res-num{
    display:inline-block;
    padding:2px 8px;
    font-size:11px;
    font-weight:bold;
    color:#fff;
    background:#e6854e; /* コミュニケーションの活性化をイメージさせるオレンジ */
    border-radius:12px;
    line-height:1.2;
    vertical-align:middle;
}

/* 投稿情報 */

.thread-info{
    display:flex;
    align-items:center;
    font-size:13px;
    color:#738291;
    margin-top:4px;
    gap:8px;
}

.thread-name{
    font-weight:bold;
    color:#3a4b5c;
}

.thread-last{
    margin-left:auto;
    font-size:12px;
    text-align:right;
    color:#687c91;
}


/* =========================================
   記事表示（親発言カード風）
========================================= */

.art hr{
    border: 0;
    height: 2px;
    margin: 2.2em 0;
    background: linear-gradient(
        to right,
        transparent,
        #a6d5ec,
        transparent
    );
}

.art{
    background:#fff;
    border-radius:16px;
    padding:1.4em;
    margin-bottom:1.8em;
    box-shadow:0 4px 14px rgba(35,124,179,.08);
    overflow:hidden;
    border: 1px solid #e2edf5;
}

.art strong,
.reslog strong{
    display:block;
    background:linear-gradient(135deg, #4cb0e6 0%, #298bc4 100%);
    color:#fff;
    padding:0.8em 1.2em;
    margin:-1.4em -1.4em 1.2em -1.4em;
    border-radius:16px 16px 0 0;
    font-size:1.1rem;
    line-height:1.5;
    box-shadow:0 2px 4px rgba(0,0,0,.04);
}

.art-info{
    margin-top:1.2em;
    padding-top:0.8em;
    border-top:1px solid #e8f2f8;
    font-size:1em;
    color:#607182;
}

/* レス（返信）ボックス：少しだけ暖色を混ぜた居心地の良い背景に */
.reslog{
    background:#fcf8f5; /* ほんのりクリームがかった、温かみのある白 */
    border-left:4px solid #ffaa73; /* レス部分は引き立つように温かいオレンジ系の線を配置 */
    border-radius:10px;
    padding:1.2em;
    margin-top:1.2em;
    text-align:left;
    box-shadow: 0 1px 3px rgba(0,0,0,.02);
}

/* 本文 */
.art-com,
.rescom{
    line-height:1.8;
    padding:0.2em 0.1em;
    word-break:break-word;
    color: #2c333a;
    font-size:15px;
    font-weight:400;
}

/* レスエリア崩れ対策 */
.ta-r{
    text-align: right;
}

.ta-r .reslog{
    text-align: left;
    display: block;
    clear: both;
    margin-top: 1em;
}


/* =========================================
   ページ送り
========================================= */

.page-btn{
    margin-top:20px;
    text-align:center;
}

.page-btn a{
    display:inline-block;
    margin:3px;
    padding:6px 12px;
    background:#5cb3cc;
    color:#fff;
    text-decoration:none;
    border-radius:20px;
    font-size:13px;
    font-weight: bold;
    transition: .2s;
}

.page-btn a:hover{
    background:#368ea6;
}

/* =========================================
   フッター
========================================= */

.footer,
footer{
    margin-top:30px;
    padding: 10px 0;
    text-align:center;
    font-size:12px;
    color:#8293a6;
}

/* =========================================
   スマホ
========================================= */

@media screen and (max-width:600px){

    body{
        font-size:14px;
    }

    #head h1{
        font-size:18px;
    }

    #main{
        margin:0;
        border-radius:0;
        padding:8px;
    }

    .button{
        font-size:12px;
        padding:5px 10px;
    }

    .thread-cell{
        padding:8px 6px;
    }

    .thread-title{
        font-size:14px;
    }

    .thread-info{
        font-size:12px;
    }

    .thread-last{
        font-size:10px;
    }

    #reg-tbl th,
    #reg-tbl td{
        padding:8px;
    }

    .reg-btn{
        margin-top:5px;
    }

#head{
    padding:12px;
}


.head-desc{
    font-size:12px;
}

.head-nav{
    display:flex;
    gap:6px;
    flex-shrink:0;
}

.head-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:6px 18px;
    font-size:13px;
    line-height:1;
    box-sizing:border-box;
}

.head-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.head-top > div:first-child{
    flex:1;
    min-width:0;
}



}
.head-icon-btn{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:50%;
    background:#eef5fa;
    font-size:20px;
}




.lazy-fade{
    opacity:0;
    transform:translateY(20px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.lazy-fade.show{
    opacity:1;
    transform:translateY(0);
}