@charset "UTF-8";
/*==============================================================
  感想文掲示板 スタイル
  色は :root の変数を書き換えれば全体に反映されます
==============================================================*/
:root{
  --bg:        #faf7f3;
  --panel:     #ffffff;
  --line:      #e6ded4;
  --text:      #33302c;
  --sub:       #8d857b;
  --accent:    #c4622d;
  --accent-bg: #fdf0e6;
  --res-bg:    #f7f4ef;
  --radius:    10px;
  --maxw:      760px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.85;
}
a{color:var(--accent);}

/*--- ヘッダー ---*/
.bar{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.bar-in{
  max-width:var(--maxw); margin:0 auto;
  padding:12px 16px;
  display:flex; align-items:center; gap:12px;
}
.bar-title{font-weight:700; font-size:1.05rem; letter-spacing:.02em;}
.bar-count{margin-left:auto; color:var(--sub); font-size:.82rem;}

/*--- 本体 ---*/
.wrap{max-width:var(--maxw); margin:0 auto; padding:18px 14px 40px;}

/*--- 投稿 ---*/
.posts{display:flex; flex-direction:column; gap:14px;}
.post{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
}
.post.res{
  background:var(--res-bg);
  margin-left:24px;
  border-left:3px solid var(--accent);
}
.phead{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:8px;}
.avatar{
  width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.74rem; font-weight:700; flex:none;
}
.pname{font-weight:700; font-size:1.02rem;}
.tag{
  font-size:.7rem; background:var(--accent-bg); color:var(--accent);
  padding:2px 7px; border-radius:20px;
}
.pdate{margin-left:auto; color:var(--sub); font-size:.78rem;}
.ptitle{font-weight:700; color:var(--accent); margin-bottom:4px;}
.ptitle:empty{display:none;}
.pbody{word-break:break-word;}

.empty{color:var(--sub); text-align:center; padding:40px 0;}
.done{
  background:var(--accent-bg); color:var(--accent);
  border-radius:var(--radius); padding:12px 16px; margin:0 0 16px;
  font-weight:700; text-align:center;
}
.closed{
  background:var(--panel); border:1px dashed var(--line);
  border-radius:var(--radius); padding:20px; text-align:center; color:var(--sub);
}

/*--- ページ送り ---*/
.pager{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:22px 0;}
.pager a,.pager .cur{
  min-width:36px; text-align:center;
  padding:6px 9px; border-radius:6px;
  border:1px solid var(--line); background:var(--panel);
  text-decoration:none; font-size:.9rem;
}
.pager .cur{background:var(--accent); color:#fff; border-color:var(--accent);}

/*--- 投稿フォーム ---*/
.formbox{margin-top:28px;}
.fh{
  font-size:1rem; margin:0 0 12px;
  padding-left:10px; border-left:4px solid var(--accent);
}
.pform{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px;
}
.row{margin-bottom:14px;}
.row label{display:block; font-size:.85rem; color:var(--sub); margin-bottom:5px;}
.row input[type=text],.row textarea{
  width:100%; padding:11px 12px;
  border:1px solid var(--line); border-radius:8px;
  font-size:16px; font-family:inherit; background:#fdfcfa; color:var(--text);
}
.row textarea{resize:vertical; line-height:1.8;}
.row input:focus,.row textarea:focus{outline:2px solid var(--accent-bg); border-color:var(--accent);}
.hp{position:absolute; left:-9999px; height:0; overflow:hidden;}
.btnrow{text-align:center;}
.btn{
  display:inline-block;
  background:var(--accent); color:#fff;
  border:none; border-radius:8px;
  padding:12px 40px; font-size:1rem; font-weight:700;
  font-family:inherit; cursor:pointer; text-decoration:none;
}
.btn:hover{opacity:.88;}
.btn.back{background:var(--sub);}

.ferr{
  background:#fdecea; color:#b3261e; border:1px solid #f5c6c2;
  border-radius:var(--radius); padding:11px 15px; margin:0 0 12px; font-weight:700;
}
.hint{display:block; color:var(--sub); font-size:.78rem; margin-top:4px;}

.note{color:var(--sub); font-size:.82rem; margin-top:24px; text-align:center;}
.note:empty{display:none;}

/*--- エラー ---*/
.errbox{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:36px 20px; text-align:center; margin-top:40px;
}
.errmsg{font-weight:700; margin:0 0 22px;}

/*--- フッター ---*/
.foot{
  text-align:center; padding:24px 12px 34px;
  color:var(--sub); font-size:.72rem; letter-spacing:.08em;
}
.fcredit{margin-top:5px; letter-spacing:.22em; font-size:.68rem;}
.du{color:var(--accent); font-weight:700;}

/*--- スマホ ---*/
@media screen and (max-width:600px){
  body{font-size:15px;}
  .wrap{padding:14px 10px 30px;}
  .post{padding:13px 14px; border-radius:8px;}
  .post.res{margin-left:12px;}
  .pdate{margin-left:0; width:100%;}
  .pform{padding:14px;}
  .btn{width:100%; padding:14px;}
}