@charset "utf-8";

.post {
background:#FAF8F1;
border:1px solid #ccc;
  border-radius:12px;
  padding:14px 20px;
  margin:20px 0;
  position:relative;
}
	
.repost {
background:#fff;
border:1px solid #ccc;
  border-radius:12px;
  padding:14px 20px;
  margin:20px 0;
  position:relative;
}

/* アイコン */
.icon-small {
  width:22px;height:22px;border-radius:50%;
  color:#fff;font-size:12px;display:inline-flex;
  align-items:center;justify-content:center;
}

/* 名前行 */
.name { font-size:15px;display:flex;align-items:center;gap:6px; }

/* メタ情報 */
.meta-info { font-size:12px;color:#657786;margin-bottom:6px; }
	
/* 通報 */
.report-btn {
    cursor: pointer;
    color:#ccc;
    margin-left: auto;   /* 右端へ移動 */
}

/* 本文 */
.msg {
  font-size:15px;
  line-height:1.7;
margin-top:10px;
  margin-bottom:10px;
  white-space:normal; /* ここ重要：pre-wrap を外す */
}

.form7 input {/* bbsタイトル */
	font: 15px/20px sans-serif;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	transition: 0.3s;
	letter-spacing: 1px;
	border: 1px solid #bbb;
	border-radius: 4px;
	background-color: #fafafa;;
}
	
.form5 textarea {/* テキストボックス用 */
	font: 15px/20px sans-serif;
	box-sizing: border-box;
	width: 100%;
	height: 140px;
	padding: 10px;
	transition: 0.3s;
	border: 1px solid #bbb;
	background-color: #fafafa;;
	border-radius: 4px;
}
	
/* 投稿フォーム（カード化） */
form {
  background:#FAF8F1;
  border:1px solid #e5e5e5;
  padding:16px;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
margin-bottom: 10px;
}

form input[type="text"],
form textarea {
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:15px;
}

form textarea {
  min-height:100px;
}

/* 送信ボタン（温かみ・シンプル） */
.formbutton {
  padding: 10px 26px;
  background: #f5a623; /* やわらかいオレンジ */
  color: #fff;
  border: none;
  border-radius: 999px; /* 角丸で安心感 */
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;

  box-shadow: 0 4px 10px rgba(245,166,35,.35);
  transition: background .2s ease, transform .15s ease, box-shadow .15s ease;
}

.formbutton:hover {
  background: #ee9a1c; /* 少しだけ濃く */
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(245,166,35,.45);
}

.formbutton:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(245,166,35,.3);
}




/* ---------------------------------
   返信ツリー（深さごとのインデント）
---------------------------------- */


/* 深さごとに左マージンを増やす（最大 4 まで） */
.repost.depth-1 { margin-left: 24px; }


/* ---------------------------------
   縦ガイド線
---------------------------------- */
.repost::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 2px;
  height: 100%;
  background: #d6d6d6;
  border-radius: 2px;
  opacity: 0.5;
}

/* depth-0（最上位）はガイド線なし */
.repost.depth-0::before {
  display: none;
}

/* スマホ最適化 */
@media (max-width: 600px) {
  .repost.depth-1 { margin-left: 14px; }
}


/* アクション */
.action-row { display:flex;gap:20px;font-size:13px;color:#4a5568;margin-top:20px; }
.action-row span { cursor:pointer; }
.action-row span:hover { color:#1d9bf0; }

/* 返信ハイライト */
.reply-highlight { background:#fff9d1; transition:background 1s; }

/* 返信情報 */
.reply-info {
  padding:10px;background:#eaf4ff;
  border-left:4px solid #1d9bf0;border-radius:6px;margin-bottom:10px;
}
.reply-cancel { color:#c00;font-size:13px;cursor:pointer; }

/* カラーピッカー */
.color-picker { display:flex;gap:8px;margin:8px 0;flex-wrap:wrap; }
.color-option {
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:2px solid #fff;box-shadow:0 0 0 1px #ccc;
}
.color-option.selected { box-shadow:0 0 0 2px #1d9bf0; }
	
/* いいね時のハートアニメ */
.heart-pop {
    animation: heartPop 0.35s ease-out;
}

@keyframes heartPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
	
/* 使い方 */
.help {
  margin: 12px 0;
  font-size: 13px;               /* 少し小さく */
  background: #fafafa;           /* うっすら背景 */
  border: 1px solid #e2e2e2;     /* うっすら枠 */
  border-radius: 6px;
  padding: 8px 12px;
}

.help summary {
  cursor: pointer;
  color: #555;
  font-size: 13px;
  list-style: none;              /* 三角マーカー消す（Chrome等） */
}

.help summary::-webkit-details-marker {
  display: none;                 /* Safari用 */
}

.help summary:hover {
  text-decoration: underline;
}

.help[open] summary {
  margin-bottom: 6px;            /* 開いた時の余白 */
}

.help p {
  margin: 6px 0 0;
  line-height: 1.6;
}

.help .note {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.help .last {
  margin-top: 8px;
  font-size: 12px;
  color: #444;
}

/* 返信 */
.toggle-replies {
  cursor: pointer;
  color: #1a73e8;
  font-size: 13px;
  user-select: none;
}

.toggle-replies .tri {
  display: inline-block;
  width: 1em;
  text-align: center;
}