/* レイアウトを縦に並べる（スマホ用） */
@media screen and (max-width: 768px) {

	/* 横スクロール可能にする（スマホでテーブル表示崩れ防止） */
	#video-table {
		width: 100%;
		overflow-x: auto;
		display: block;
		font-size: 14px; /* スマホ用に少し小さく */
		border: 1px
	}

	/* ボタンの配置やサイズを整える */
	.button-style {
		margin: 5px;
		padding: 10px 15px;
		font-size: 14px;
	}
	
	.page-link {
		margin: 5px;
		padding: 10px 15px;
		font-size: 14px;
	}

	.mobile-display {
		display: none;
	}

}

/* TODO marginなんで違うか気になる */
/* PC用 */
@media screen and (min-width: 769px) {
	
	.page-link {
		margin: 2px 2px;
		font-size: 12px; /* 小さめの文字サイズ */
		padding: 2px 6px; /* コンパクトな余白 */
	}
}

.search-box {
  border: 2px solid green;    /* 緑の枠線 */
  border-radius: 10px;        /* 角を10px丸くする */
  padding: 5px;              /* 内側の余白 */
}

.search-box table, .search-box th, .search-box td {
  border: 1px solid #4CAF50; /* 緑色の線 */
  border-collapse: collapse; /* 線を重ねず1本にする */
}

tr.video-table-tr:hover {
  background-color: #e0f7e9; /* マウスが乗ったときに変わる色 */
}

#video-table {
	border-collapse: separate; /* 丸角にするために必要 */
	border-spacing: 0; /* セル間の隙間をなくす */
	border-radius: 10px; /* 角丸 */
	overflow: hidden; /* 角丸を反映させるため */
	border: 1px solid #27ae60; /* 薄い枠線（お好みで） */
}

#video-table {
	table-layout: fixed;
}

#video-table th,#video-table td {
	border: 1px solid #27ae60;
}

.icon-center-cell {
	text-align: center;
	cursor: pointer; /* 手の形にする */
}

td.title {
	word-break: break-word;
}

.icon-center-cell button,
.icon-center-cell .img-memo-icon {
    margin: 5px 5px 5px 5px; /* 上、右、下、左 */
}

.edit-button-text-align {
	text-align: center;
}