@charset "utf-8";

.hirobabbs {
	font-size: 12px;
}

/* ============================================================ */
/* 共通 */
/* ============================================================ */
.hirobabbs-header {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: 610px;
}
	.hirobabbs-header-image {
		display: block;
		position: relative;
		top: 5px;
	}
	/* ===== ヘッダナビ ===== */
	.hirobabbs-header-navi {
		position: absolute;
		top: 0;
		width: 100%;
	}
		/* ヘッダボタン */
		.hirobabbs-goto-top,
		.hirobabbs-goto-archives {
			display: block;
			width: 125px;
			height: 28px;
		}
		.hirobabbs-goto-top.disabled,
		.hirobabbs-goto-archives.disabled,
		.hirobabbs-goto-top.disabled:hover,
		.hirobabbs-goto-archives.disabled:hover {
			cursor: default;
			opacity: 0.5;
			background-position: left top;
		}
		.hirobabbs-goto-top {
			float: left;
			background-image: url(../img/hirobabbs/misc/button/goto_top.png);
		}
		.hirobabbs-goto-archives {
			float: right;
			background-image: url(../img/hirobabbs/misc/button/goto_archives.png);
		}

/* ===== 警告 & 注意 ===== */
.hirobabbs-caution,
.hirobabbs-notice {
	margin-right: auto;
	margin-left: auto;
	color: #343434;
	text-align: center;
	border: 2px solid #d50000;
	background-color: #ffe9e9;
}
	.hirobabbs-caution b {
		color: #d50000;
	}
	.hirobabbs-notice {
		border: 2px solid #a79873;
		background-color: #fff;
	}

/* ===== 基準幅 ===== */
.hirobabbs-inset {
	box-sizing: border-box;
	margin-right: auto;
	margin-left: auto;
	width: 580px;
}
	.hirobabbs-inset.inset2 {
		width: 550px;
	} 
	.hirobabbs-inset.inset3 {
		width: 520px;
	}

/* ===== 新スレ作成ボタン ===== */
.hirobabbs-create-newthread {
	display: block;
	width: 304px;
	height: 44px;
	background-image: url(../img/hirobabbs/misc/button/new_thread.png);
}

/* ============================================================ */
/* スレッドボックス */
/* ============================================================ */
/* ====== スレッド一覧 ===== */
.hirobabbs-thread-list {
}
	.hirobabbs-thread-box ~ .hirobabbs-thread-box {
		margin-top: 10px;
	}

/* ====== スレッド一個 ===== */
.hirobabbs-thread-box {
	box-sizing: border-box;
	border: 2px solid #255c00;
	border-radius: 10px;
}
	.hirobabbs-thread-box.thread-close {/* 公開前 */
		border: 2px solid #444;
	}
	.hirobabbs-thread-box.thread-draft {/* 下書き */
		border: 2px solid #7f2701;
	}
	.hirobabbs-thread-box.thread-archive {/* アーカイブ */
		border: 2px solid #014a7f;
	}
	/* ----- 見出し ----- */
	.hirobabbs-thread-box-header {
		position: relative;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 4px;
		padding-bottom: 3px;
		color: #fff;
		border-top-right-radius: 8px;
		border-top-left-radius: 8px;
		background-color: #4b9818;
	}
		.thread-close .hirobabbs-thread-box-header {
			background-color: #7a7a7a;
		}
		.thread-close .hirobabbs-thread-box-body {
			background-color: #dbdbdb;
		}
		.thread-draft .hirobabbs-thread-box-header {
			background-color: #a64d12;
		}
		.thread-archive .hirobabbs-thread-box-header {
			background-color: #1269a6;
		}
		.hirobabbs-thread-box-title {
			float: left;
			font-size: 14px;
			font-weight: bold;
			word-wrap: break-word;
		}
		.hirobabbs-thread-box-date {
			float: right;
		}
		/* 新スレッドアイコン */
		.hirobabbs-thread-box-new {
			position: absolute;
			top: 0;
			left: 0;
		}
			.hirobabbs-thread-box-new div {
				position: relative;
				width: 30px;
				height: 25px;
				background-color: #d30100;
				border-top-left-radius: 8px;
			}
			.hirobabbs-thread-box-new div:before,
			.hirobabbs-thread-box-new div:after {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 0;
				border-right: 30px solid transparent;
				border-top: 25px solid #d30100;
			}
			.hirobabbs-thread-box-new div:before {
				left: 30px;
			}
			.hirobabbs-thread-box-new div:after {
				top: 25px;
			}
			.hirobabbs-thread-box-new img {
				position: absolute;
				top: 3px;
				left: 3px;
				z-index: 100;
			}
			/* 新スレッドの場合 */
			.hirobabbs-thread-box-header.hirobabbs-latestthread {
				padding-left: 55px;
			}
		/* ----- スレッドの状態 ----- */
		.hirobabbs-thread-box-mode {
			color: #ff7f7f;
			font-size: 12px;
			font-weight: bold;
		}
	/* ----- 内容 ----- */
	.hirobabbs-thread-box-body {
		padding: 15px 15px 8px 15px;
		background-color: #fff;
		border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
	}
		/* ----- 概要 ----- */
		.hirobabbs-thread-box-outline {
			min-height: 80px;
		}
			/* 投稿者アイコン */
			.hirobabbs-thread-box-contributor {
				float: left;
				width: 80px;
			}
				.hirobabbs-thread-box-icon {
					width: 80px;
					height: 80px;
				}
				.hirobabbs-thread-box-name {
					width: 80px;
					text-align: center;
				}
			/* 投稿内容 */
			.hirobabbs-thread-box-about {
				box-sizing: border-box;
				float: right;
				position: relative;
				padding-bottom: 29px;
				width: 451px;
				min-height: 86px;
				border-bottom: 1px solid #aaa;
			}
				/* 概要文 */
				.hirobabbs-thread-box-text {
					word-wrap: break-word;
				}
				.hirobabbs-thread-box-info {
					display: flex;
					position: absolute;
					bottom: 5px;
				}
					.hirobabbs-thread-box-info-header,
					.hirobabbs-thread-box-info-body {
						width: 112px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.hirobabbs-thread-box-info-header {
						height: 24px;
						color: #fff;
						font-weight: bold;
						background-color: #a79773;
					}
					.hirobabbs-thread-box-info-body {
					}
		/* ----- もっと見るエリア ----- */
		.hirobabbs-thread-box-navi {
			box-sizing: border-box;
			position: relative;
			padding-left: 15px;
			padding-right: 15px;
			height: 40px;
		}
			/* もっと見る */
			.hirobabbs-thread-box-more {
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				width: 152px;
				height: 31px;
				background-image: url(../img/hirobabbs/misc/button/read_more.png);
			}
			/* 投稿締切 */
			.hirobabbs-thread-box-deadline {
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				height: 20px;
				vertical-align: middle;
			}
			/* 編集 */
			.hirobabbs-thread-box-edit {
				position: absolute;
				left: 0;
				bottom: 0;
				display: block;
				width: 97px;
				height: 40px;
				background-image: url(../img/hirobabbs/misc/button/edit.png);
			}


/* ============================================================ */
/* コメントボックス */
/* ============================================================ */
/* ====== コメント一覧 ===== */
.hirobabbs-comment-list {
	box-sizing: border-box;
	border: 1px solid #777;
}
	.hirobabbs-comment-box ~ .hirobabbs-comment-box {
		border-top: 1px dotted #a7a7a7;
	}

/* ====== コメントボックス ===== */
.hirobabbs-comment-box {
	box-sizing: border-box;	
}
	/* ----- 自分コメント ----- */
	.hirobabbs-comment-box.hirobabbs-mycomment {
	}
	/* ----- 削除コメント ----- */
	.hirobabbs-comment-box.hirobabbs-deletedcomment {
	}
	.hirobabbs-comment-box-header,
	.hirobabbs-comment-box-body {
		box-sizing: border-box;
		padding-left: 15px;
	}
	/* ====== 見出し ===== */
	.hirobabbs-comment-box-header {
		padding-top: 10px;
		padding-bottom: 9px;
		padding-right: 8px;
		background-color: #e4e3c9;
	}
		.hirobabbs-mycomment .hirobabbs-comment-box-header {
			background-color: #efceab;
		}
		.hirobabbs-deletedcomment .hirobabbs-comment-box-header {
			background-color: #b4b4b4;
		}
		/* 名前 */
		.hirobabbs-comment-box-name {
			float: left;
		}
			.hirobabbs-comment-box-name a {
				font-weight: bold;
			}
		/* 日付 */
		.hirobabbs-comment-box-date {
			display: flex;
			float: right;
		}
	/* ====== 中身 ===== */
	.hirobabbs-comment-box-body {
		padding-right: 15px;
		padding-bottom: 10px;
		background-color: #fff;
	}
		.hirobabbs-mycomment .hirobabbs-comment-box-body {
			background-color: #ffedda;
		}
		.hirobabbs-deletedcomment .hirobabbs-comment-box-body {
			background-color: #dbdbdb;
		}
		/* ----- 投稿内容 ----- */
		.hirobabbs-comment-box-about {
			display: flex;
		}
			.hirobabbs-comment-box-icon {
				width: 85px;
			}
			/* 本文 */
			.hirobabbs-comment-box-text {
				padding-top: 10px;
				width: 480px;
				word-wrap: break-word;
			}
		/* ----- ナビエリア ----- */
		.hirobabbs-comment-box-navi {
			display: flex;
			float: right;
		}
			.hirobabbs-comment-box-navi a {
				margin-left: 10px;
			}
	/* ===== 配下のボタン ===== */
	/* 通報 */
	.hirobabbs-comment-box-report {
		display: block;
		width: 80px;
		height: 22px;
		color: transparent;
		background-image: url(../img/hirobabbs/misc/button/report.png);
	}
	/* いいね */
	.hirobabbs-comment-box-like {
		cursor: pointer;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		padding-right: 10px;
		width: 152px;
		height: 30px;
		color: #fff !important;
		background-image: url(../img/hirobabbs/misc/button/like.png);
	}
		.hirobabbs-comment-box-like:hover {
			color: #fff !important;
			text-decoration: none !important;
		}
		.hirobabbs-comment-box-like.disabled,
		.hirobabbs-comment-box-like.disabled:hover {
			cursor: default;
			background-position: 0 0 !important;
			background-image: url(../img/hirobabbs/misc/button/like_disabled.png);
		}
	/* 削除 */
	.hirobabbs-comment-box-delete {
		display: block;
		width: 80px;
		height: 22px;
		background-image: url(../img/hirobabbs/misc/button/delete.png);
	}

/* ============================================================ */
/* 書き込みボックス */
/* ============================================================ */
.hirobabbs-write-box {
	box-sizing: border-box;
}
	/* ===== テキストエリア ===== */
	.hirobabbs-write-textarea {
		box-sizing: border-box;
		padding: 5px 8px !important;
		border: 1px solid #777777 !important;
	}
		.hirobabbs-write-textarea.overflow {
			border: 1px solid #d50000 !important;
			background-color: #ffe9e9;
		}
	/* 文字数カウント */
	.hirobabbs-char-count {
		color: #957b40;
		text-align: right;
	}
		.hirobabbs-char-num.overflow {
			color: #D50000;
		}

	/* ===== 投稿ボタン ===== */
	.hirobabbs-write-postcomment {
		display: block;
		width: 304px;
		height: 44px;
		color: transparent;
		background-image: url(../img/hirobabbs/misc/button/post_comment.png);
	}

/* ============================================================ */
/* フォーム用テーブル */
/* ============================================================ */
.hirobabbs-form-table {
}
	.hirobabbs-form-table select {
		border: 1px solid #c3bdbd;
	}
	.hirobabbs-form-table .common-th,
	.hirobabbs-form-table .common-td {
		padding-top: 10px;
		padding-bottom: 9px;
	}
	/* すれ立て選択 */
	.hiroba-form-iconselect {
		float: left;
		width: 80px;
	}
		.hiroba-form-iconselect {
			margin-left: 8px;
		}
		.hiroba-form-iconselect:first-child {
			margin-left: 0;
		}
		.hiroba-form-iconselect label {
			display: block;
			cursor: pointer;
		}