@charset "UTF-8";

/*--------------------------------------------------------
個別記事
-------------------------------------------------------*/
.art-head, .art-body, .res-body {
	width: 95%;
	text-align: left;
	padding: 6px;
	margin: 0 auto;
}
.art-info {
	border-collapse: collapse;
}

.art-info table,
.art-info tr,
.art-info td {
  border: none !important;
}

.art-info td {
	background: #fff;
	padding: 1px;
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

.res-body {
	border: 1px solid #8080c0;
	background: #fff;
	margin-bottom: 0.5em;
}

.art-body img, .res-body img, .edit img {
	vertical-align: top;
	border: none;
}

.edit {
	text-align: right;
}


/* 返信フォーム */
.bbsform {
	border-collapse: collapse;
	margin: 1em auto;
	width: 95%;
}
.bbsform th, .bbsform td {
	border: 1px solid #8080c0;
	background: #fff;
	padding: 5px;
	white-space: nowrap;
		width: 100% !important;
		display: block;
		white-space: normal;
		padding: 2px;
}
.bbsform th {
	width: 130px;
}
.small {
	font-size: 75%;
	color: green;
}
div.submit-btn {
	width: 95%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}
div.submit-btn input {
	width: 150px;
	height: 30px;
}
p.red {
	color: #dd0000;
}



/*--------------------------------------------------------
一覧ページ
-------------------------------------------------------*/

.thread-image {
  width: 100px;
  height: 100px;
  border: solid 1px #cccccc;
  object-fit: cover; /* この一行を追加するだけ！ */
}

.card-container{
    display:flex;
    max-width: 750px;
    height: 112px;
  margin: 0 7px;
  border-bottom: solid 1px #cccccc;
}

.card-container:first-of-type {
    border-top: solid 1px #cccccc!important;
}

.card-container p{
    margin:5px 0 0;
}

.card-text{
    width:100%;
    margin: 0 0 0 7px;
	font-size: 14px;
}



/* スマホ用 */
@media screen and (max-width: 480px) {

#comment p{
	margin: 0 5px;
}

	/* 記事 */
	.art-body, .art-head, .res-body {
		width: 98%;
		padding: 2px;
	}

	/* 返信フォーム */
	.bbsform {
		width: 97%;
	}
	.bbsform th, .bbsform td {
		width: 98% !important;
		display: block;
		white-space: normal;
		padding: 2px;
	}
	.bbsform th {
		background: #ccc;
	}
	textarea {
		width: 90%;
	}
	.comment {
		width: 100%;
		margin: 3px 0;
	}
	#note {
		width: 100%;
		padding: 2px;
	}
	#note ul {
		margin: 0;
		padding: 0;
	}
	#msg-box, #err-box, #comment {
		width: 100%;
		padding: 2px;
	}
}