/* =============================================================================
	CSS Selector Nth Tester
============================================================================= */
div#content input[name="change-nth"] {
	width:9em;
}

div#content input[name="number-of-items"],
div#content input[name="number-of-columns"] {
	width:3em;
}

div.contentbox ul.nth-tester-list-items {
	margin:0;
	padding:0;
	letter-spacing:-1em;
}

	div.contentbox ul.nth-tester-list-items li {
		display:inline-block;
		margin:0 10px 10px 0;
		padding:10px 0 7px;
		list-style:none;
		background-color:#777;
		text-align:center;
		letter-spacing:0;
		line-height:1em;
		color:#fff;
	}

	div.contentbox ul.nth-tester-list-items.col1 li,
	div.contentbox ul.nth-tester-list-items.col2 li:nth-child(2n),
	div.contentbox ul.nth-tester-list-items.col3 li:nth-child(3n),
	div.contentbox ul.nth-tester-list-items.col4 li:nth-child(4n),
	div.contentbox ul.nth-tester-list-items.col5 li:nth-child(5n),
	div.contentbox ul.nth-tester-list-items.col6 li:nth-child(6n),
	div.contentbox ul.nth-tester-list-items.col7 li:nth-child(7n),
	div.contentbox ul.nth-tester-list-items.col8 li:nth-child(8n),
	div.contentbox ul.nth-tester-list-items.col9 li:nth-child(9n),
	div.contentbox ul.nth-tester-list-items.col10 li:nth-child(10n) {
		margin-right:0;
	}

	div.contentbox ul.nth-tester-list-items.col1 li:last-child,
	div.contentbox ul.nth-tester-list-items.col2 li:nth-last-child(-n+2),
	div.contentbox ul.nth-tester-list-items.col3 li:nth-last-child(-n+3),
	div.contentbox ul.nth-tester-list-items.col4 li:nth-last-child(-n+4),
	div.contentbox ul.nth-tester-list-items.col5 li:nth-last-child(-n+5),
	div.contentbox ul.nth-tester-list-items.col6 li:nth-last-child(-n+6),
	div.contentbox ul.nth-tester-list-items.col7 li:nth-last-child(-n+7),
	div.contentbox ul.nth-tester-list-items.col8 li:nth-last-child(-n+8),
	div.contentbox ul.nth-tester-list-items.col9 li:nth-last-child(-n+9),
	div.contentbox ul.nth-tester-list-items.col10 li:nth-last-child(-n+10) {
		margin-bottom:0;
	}

	div.contentbox ul.nth-tester-list-items.col1 li {
		width:100%;
	}

	div.contentbox ul.nth-tester-list-items.col2 li {
		width:calc((100% - 10px) / 2.000001);
	}

	div.contentbox ul.nth-tester-list-items.col3 li {
		width:calc((100% - (10px * 2)) / 3.000001);
	}

	div.contentbox ul.nth-tester-list-items.col4 li {
		width:calc((100% - (10px * 3)) / 4.000001);
	}

	div.contentbox ul.nth-tester-list-items.col5 li {
		width:calc((100% - (10px * 4)) / 5.000001);
	}

	div.contentbox ul.nth-tester-list-items.col6 li {
		width:calc((100% - (10px * 5)) / 6.000001);
	}

	div.contentbox ul.nth-tester-list-items.col7 li {
		width:calc((100% - (10px * 6)) / 7.000001);
	}

	div.contentbox ul.nth-tester-list-items.col8 li {
		width:calc((100% - (10px * 7)) / 8.000001);
	}

	div.contentbox ul.nth-tester-list-items.col9 li {
		width:calc((100% - (10px * 8)) / 9.000001);
	}

	div.contentbox ul.nth-tester-list-items.col10 li {
		width:calc((100% - (10px * 9)) / 10.000001);
	}

	div.contentbox ul.nth-tester-list-items li.target-nth {
		background-color:#4a80ae;
	}

div#output {
	font-weight:bold;
	font-size:16px;
	font-size:1.6rem;
}

/* -------------------------------------------------------------------
	Media Query : Smart Phone
		@media screen and (max-device-width:414px) {
		@media screen and (max-device-width:375px) {
		@media screen and (max-device-width:400px) {
		@media screen and (max-device-width:384px) {
		@media screen and (max-device-width:360px) {
		@media screen and (max-device-width:320px) {
------------------------------------------------------------------- */
@media screen and (max-device-width:414px) {
	table.table_area {
		display:block;
		width:100%;
	}

		table.table_area tbody {
			display:block;
			width:100%;
		}

			table.table_area tbody tr {
				display:block;
				width:100%;
			}

				table.table_area th,
				table.table_area td {
					display:block;
					box-sizing:border-box;
					width:100%;
				}

				table.table_area tr:not(:first-child) th,
				table.table_area td {
					border-top:none;
				}

	div.nth-tester-list-items-outer {
		overflow-x:scroll;
		overflow-y:hidden;
	}
}