/* =============================================================================
	HTML・CSS・JavaScriptのテクニック集
============================================================================= */

div.sources p.open-source {
	text-align:left;
}

table.table_area.min-fs {
	width:100%;
}

table.table_area.min-fs thead th:nth-child(2) {
	width:30%;
}

table.table_area.min-fs thead th:nth-child(3) {
	width:1%;
	white-space:nowrap;
}

table.table_area.min-fs tbody td:nth-child(3) {
	text-align:center;
}

@media only screen and (max-device-width:767px) {
	table.table_area.min-fs thead th:nth-child(3) {
		width:28%;
		white-space:normal;
	}
}

/* ---------------------------------------------------------
	サンプル
--------------------------------------------------------- */
/* -----------------------------------------------
	CSSのみで横並びの要素の高さを揃える
----------------------------------------------- */
ul.css-equal-height-sample1 {
	margin:0 0 10px;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	width:396px;
}

	ul.css-equal-height-sample1 li {
		margin:0 10px 10px 0;
		padding:10px;
		border:1px solid #aaa;
		width:100px;
		background-color:#f5f5f5;
		list-style:none;
	}

ul.css-equal-height-sample2 {
	margin:0 0 10px;
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:auto auto auto;
	grid-template-columns:auto auto auto;
	width:396px;
}

	ul.css-equal-height-sample2 li {
		margin:0 10px 10px 0;
		padding:10px;
		border:1px solid #aaa;
		background-color:#f5f5f5;
		list-style:none;
	}

	ul.css-equal-height-sample2 li:nth-child(1) {
		-ms-grid-column:1;
		grid-column:1;
		-ms-grid-row:1;
		grid-row:1;
	}

	ul.css-equal-height-sample2 li:nth-child(2) {
		-ms-grid-column:2;
		grid-column:2;
		-ms-grid-row:1;
		grid-row:1;
	}

	ul.css-equal-height-sample2 li:nth-child(3) {
		-ms-grid-column:3;
		grid-column:3;
		-ms-grid-row:1;
		grid-row:1;
	}

	ul.css-equal-height-sample2 li:nth-child(4) {
		-ms-grid-column:1;
		grid-column:1;
		-ms-grid-row:2;
		grid-row:2;
	}

	ul.css-equal-height-sample2 li:nth-child(5) {
		-ms-grid-column:2;
		grid-column:2;
		-ms-grid-row:2;
		grid-row:2;
	}

	ul.css-equal-height-sample2 li:nth-child(6) {
		-ms-grid-column:3;
		grid-column:3;
		-ms-grid-row:2;
		grid-row:2;
	}

	ul.css-equal-height-sample2 li:nth-child(7) {
		-ms-grid-column:1;
		grid-column:1;
		-ms-grid-row:3;
		grid-row:3;
	}

	ul.css-equal-height-sample2 li:nth-child(8) {
		-ms-grid-column:2;
		grid-column:2;
		-ms-grid-row:3;
		grid-row:3;
	}

	ul.css-equal-height-sample2 li:nth-child(9) {
		-ms-grid-column:3;
		grid-column:3;
		-ms-grid-row:3;
		grid-row:3;
	}

ul.css-equal-height-sample3 {
	margin:0 0 10px;
	width:396px;
}

	ul.css-equal-height-sample3 li {
		margin:0 10px 10px 0;
		padding:10px;
		border:1px solid #aaa;
		float:left;
		overflow:hidden;
		width:100px;
		height:6.4em;
		background-color:#f5f5f5;
		list-style:none;
	}

ul.css-equal-height-sample4 {
	display:table;
	width:396px;
}

	ul.css-equal-height-sample4 li {
		margin:0 10px 10px 0;
		padding:10px;
		border:1px solid #aaa;
		display:table-cell;
		width:100px;
		background-color:#f5f5f5;
		list-style:none;
	}

	/* IE 6 */
	* html ul.css-equal-height-sample4 li {
		display:inline;
		zoom:1;
	}

	/* IE 7 */
	*+ html ul.css-equal-height-sample4 li {
		display:inline;
		zoom:1;
	}

ul.css-equal-height-sample5 {
	margin:0 0 10px;
	width:396px;
}

	ul.css-equal-height-sample5 li {
		margin:0 10px 10px 0;
		padding:10px;
		border:1px solid #aaa;
		display:inline-block;
		width:100px;
		background-color:#f5f5f5;
		list-style:none;
		vertical-align:top;
	}

	*+ html ul.css-equal-height-sample5 li {
		display:inline;
	}

ul.css-equal-height-sample6 {
	margin:0 0 10px;
	overflow:hidden;
	width:396px;
}

	ul.css-equal-height-sample6 li {
		margin:0 10px -32768px 0;
		padding:10px 10px 32768px;
		border:1px solid #aaa;
		float:left;
		width:100px;
		background-color:#f5f5f5;
		list-style:none;
	}

/* -----------------------------------------------
	CSSで要素の上下（垂直）中央揃え
----------------------------------------------- */

div.css-element-vertical-center-sample1 {
	margin:0 0 1.5em 1em;
	position:relative;
	width:100px;
	height:100px;
	background-color:#eee;
}

	div.css-element-vertical-center-sample1 div.inner-element {
		margin-top:auto;
		margin-bottom:auto;
		position:absolute;
		top:0;
		bottom:0;
		height:2em;
	}

		div.css-element-vertical-center-sample1 div.inner-element p {
			margin:0;
		}


div.css-element-vertical-center-sample2 {
	margin:0 0 1.5em 1em;
	display:table;
	width:100px;
	height:100px;
	background-color:#eee;
}

	div.css-element-vertical-center-sample2 div.inner-element {
		display:table-cell;
		vertical-align:middle;
	}

		div.css-element-vertical-center-sample2 div.inner-element p {
			margin:0;
		}


div.css-element-vertical-center-sample3 {
	margin:0 0 1.5em 1em;
	position:relative;
	width:100px;
	height:100px;
	background-color:#eee;
}

	div.css-element-vertical-center-sample3 div.inner-element {
		-webkit-transform:translate(0, -50%);
		-moz-transform:translate(0, -50%);
		-ms-transform:translate(0, -50%);
		-o-transform:translate(0, -50%);
		transform:translate(0, -50%);
		position:absolute;
		top:50%;
	}

		div.css-element-vertical-center-sample3 div.inner-element p {
			margin:0;
		}

div.css-element-vertical-center-sample4 {
	margin:0 0 1.5em 1em;
	position:relative;
	width:100px;
	height:100px;
	background-color:#eee;
}

	div.css-element-vertical-center-sample4 div.inner-element {
		margin-top:-1em;
		position:absolute;
		top:50%;
		height:2em;
	}

		div.css-element-vertical-center-sample4 div.inner-element p {
			margin:0;
		}

div.css-element-vertical-center-sample5 {
	margin:0 0 1.5em 1em;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-align:center;
	-moz-box-align:center;
	-webkit-align-items:center;
	-moz-align-items:center;
	align-items:center;
	width:100px;
	height:100px;
	background-color:#eee;
}

		div.css-element-vertical-center-sample5 div.inner-element p {
			margin:0;
		}

div.css-element-vertical-center-sample5-2 {
	margin:0 0 0 1em;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	width:100px;
	height:100px;
	background-color:#eee;
}

		div.css-element-vertical-center-sample5-2 div.inner-element::before {
			display:inline-block;
			width:0;
			height:100%;
			content:"";
			vertical-align:middle;
		}

			div.css-element-vertical-center-sample5-2 div.inner-element p {
				margin:0;
				display:inline;
			}

/* -----------------------------------------------
	CSSのみで横並びの要素の高さを揃える
----------------------------------------------- */
ul.css-border-sample01,
ul.css-border-sample02 {
	width:20%;
}

	ul.css-border-sample01 li,
	ul.css-border-sample02 li {
		padding:3px 10px;
		list-style:none;
	}

	ul.css-border-sample01 li:first-child {
		border-top:1px solid #666;
		border-bottom:1px solid #666;
	}

	ul.css-border-sample01 li + li {
		border-bottom:1px solid #666;
	}

	ul.css-border-sample02 li + li {
		border-top:1px solid #666;
	}

/* -----------------------------------------------
	ハンバーガーメニューのアイコンをCSSで作る
----------------------------------------------- */
p.css-hamburger-menu-icon-sample a {
	padding:8px 10px 8px 35px;
	display:inline-block;
	position:relative;
	background-color:#333;
	color:#fff;
}

p.css-hamburger-menu-icon-sample a:before,
p.css-hamburger-menu-icon-sample a:after {
	content:"";
	display:block;
	position:absolute;
	left:10px;
	width:15px;
	z-index:1;
}

p.css-hamburger-menu-icon-sample a:before {
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
	top:calc(50% - 6px);
	height:8px;
}

p.css-hamburger-menu-icon-sample a:after {
	border-top:2px solid #fff;
	top:calc(50% - 1px);
	height:0;
}

/* -----------------------------------------------
	CSSによるマウスオーバーの罫線アニメーション
----------------------------------------------- */
p.css-mouseover-line-animation-bottom-sample1,
p.css-mouseover-line-animation-bottom-sample2,
p.css-mouseover-line-animation-bottom-sample3,
p.css-mouseover-line-animation-top-bottom-sample1,
p.css-mouseover-line-animation-top-bottom-sample2,
p.css-mouseover-line-animation-top-bottom-sample3,
p.css-mouseover-line-animation-top-bottom-sample4,
p.css-mouseover-line-animation-top-bottom-sample5 {
	width:100px;
}

	p.css-mouseover-line-animation-bottom-sample1 a,
	p.css-mouseover-line-animation-bottom-sample2 a,
	p.css-mouseover-line-animation-bottom-sample3 a,
	p.css-mouseover-line-animation-top-bottom-sample1 a,
	p.css-mouseover-line-animation-top-bottom-sample2 a,
	p.css-mouseover-line-animation-top-bottom-sample3 a,
	p.css-mouseover-line-animation-top-bottom-sample4 a,
	p.css-mouseover-line-animation-top-bottom-sample5 a {
		padding:8px 10px;
		display:block;
		position:relative;
		background-color:#eee;
		text-align:center;
	}

	p.css-mouseover-line-animation-bottom-sample1 a:before,
	p.css-mouseover-line-animation-bottom-sample2 a:before,
	p.css-mouseover-line-animation-bottom-sample3 a:before,
	p.css-mouseover-line-animation-top-bottom-sample1 a:before,
	p.css-mouseover-line-animation-top-bottom-sample2 a:before,
	p.css-mouseover-line-animation-top-bottom-sample3 a:before,
	p.css-mouseover-line-animation-top-bottom-sample4 a:before,
	p.css-mouseover-line-animation-top-bottom-sample5 a:before {
		content:"";
		display:block;
		position:absolute;
		bottom:0;
		height:2px;
		background-color:#ce132e;
	}

	/* ---------------
		下線
	--------------- */
	/* 中央から左右へ */
	p.css-mouseover-line-animation-bottom-sample1 a:before {
		left:100%;
		right:100%;
		-webkit-transition:left 0.2s ease, right 0.2s ease;
		-moz-transition:left 0.2s ease, right 0.2s ease;
		-o-transition:left 0.2s ease, right 0.2s ease;
		transition:left 0.2s ease, right 0.2s ease;
	}

	p.css-mouseover-line-animation-bottom-sample1 a:hover:before {
		left:0;
		right:0;
	}

	/* 左から右へ */
	p.css-mouseover-line-animation-bottom-sample2 a:before {
		left:0;
		width:0;
		-webkit-transition:width 0.2s ease;
		-moz-transition:width 0.2s ease;
		-o-transition:width 0.2s ease;
		transition:width 0.2s ease;
	}

	p.css-mouseover-line-animation-bottom-sample2 a:hover:before {
		width:100%;
	}

	/* 右から左へ */
	p.css-mouseover-line-animation-bottom-sample3 a:before {
		right:0;
		width:0;
		-webkit-transition:width 0.2s ease;
		-moz-transition:width 0.2s ease;
		-o-transition:width 0.2s ease;
		transition:width 0.2s ease;
	}

	p.css-mouseover-line-animation-bottom-sample3 a:hover:before {
		width:100%;
	}

	/* ---------------
		上下線
	--------------- */
	p.css-mouseover-line-animation-top-bottom-sample1 a:after,
	p.css-mouseover-line-animation-top-bottom-sample2 a:after,
	p.css-mouseover-line-animation-top-bottom-sample3 a:after,
	p.css-mouseover-line-animation-top-bottom-sample4 a:after,
	p.css-mouseover-line-animation-top-bottom-sample5 a:after {
		content:"";
		display:block;
		position:absolute;
		top:0;
		height:2px;
		background-color:#ce132e;
	}

	/* 中央から左右へ */
	p.css-mouseover-line-animation-top-bottom-sample1 a:before,
	p.css-mouseover-line-animation-top-bottom-sample1 a:after {
		left:100%;
		right:100%;
		-webkit-transition:left 0.2s ease, right 0.2s ease;
		-moz-transition:left 0.2s ease, right 0.2s ease;
		-o-transition:left 0.2s ease, right 0.2s ease;
		transition:left 0.2s ease, right 0.2s ease;
	}

	p.css-mouseover-line-animation-top-bottom-sample1 a:hover:before,
	p.css-mouseover-line-animation-top-bottom-sample1 a:hover:after {
		left:0;
		right:0;
	}

	/* 左から右へ */
	p.css-mouseover-line-animation-top-bottom-sample2 a:before,
	p.css-mouseover-line-animation-top-bottom-sample2 a:after {
		left:0;
		width:0;
		-webkit-transition:width 0.2s ease;
		-moz-transition:width 0.2s ease;
		-o-transition:width 0.2s ease;
		transition:width 0.2s ease;
	}

	p.css-mouseover-line-animation-top-bottom-sample2 a:hover:before,
	p.css-mouseover-line-animation-top-bottom-sample2 a:hover:after {
		width:100%;
	}

	/* 右から左へ */
	p.css-mouseover-line-animation-top-bottom-sample3 a:before,
	p.css-mouseover-line-animation-top-bottom-sample3 a:after {
		right:0;
		width:0;
		-webkit-transition:width 0.2s ease;
		-moz-transition:width 0.2s ease;
		-o-transition:width 0.2s ease;
		transition:width 0.2s ease;
	}

	p.css-mouseover-line-animation-top-bottom-sample3 a:hover:before,
	p.css-mouseover-line-animation-top-bottom-sample3 a:hover:after {
		width:100%;
	}

	/* 上は左から右、下は右から左へ */
	p.css-mouseover-line-animation-top-bottom-sample4 a:before {
		right:0;
	}

	p.css-mouseover-line-animation-top-bottom-sample4 a:after {
		left:0;
	}

	p.css-mouseover-line-animation-top-bottom-sample4 a:before,
	p.css-mouseover-line-animation-top-bottom-sample4 a:after {
		width:0;
		-webkit-transition:width 0.2s ease;
		-moz-transition:width 0.2s ease;
		-o-transition:width 0.2s ease;
		transition:width 0.2s ease;
	}

	p.css-mouseover-line-animation-top-bottom-sample4 a:hover:before,
	p.css-mouseover-line-animation-top-bottom-sample4 a:hover:after {
		width:100%;
	}

	/* 上は左から右、下は右から左へ */
	p.css-mouseover-line-animation-top-bottom-sample5 a:before {
		left:0;
	}

	p.css-mouseover-line-animation-top-bottom-sample5 a:after {
		right:0;
	}

	p.css-mouseover-line-animation-top-bottom-sample5 a:before,
	p.css-mouseover-line-animation-top-bottom-sample5 a:after {
		width:0;
		-webkit-transition:width 0.2s ease;
		-moz-transition:width 0.2s ease;
		-o-transition:width 0.2s ease;
		transition:width 0.2s ease;
	}

	p.css-mouseover-line-animation-top-bottom-sample5 a:hover:before,
	p.css-mouseover-line-animation-top-bottom-sample5 a:hover:after {
		width:100%;
	}

/* -----------------------------------------------
スマートフォンなど幅を超えるテーブル要素にスクロールを付ける
----------------------------------------------- */
table.sample-table-overflow-scroll {
	border-collapse:collapse;
	border-spacing:0;
}

	table.sample-table-overflow-scroll thead th,
	table.sample-table-overflow-scroll tbody td {
		border:1px solid #ccc;
		padding:10px;
	}

	table.sample-table-overflow-scroll thead th {
		background-color:#ccc;
		text-align:left;
	}

	table.sample-table-overflow-scroll tbody td {
		background-color:#f9f9f9;
	}

@media only screen and (max-device-width:767px) {
	table.sample-table-overflow-scroll {
		display:block;
		overflow-x:scroll;
		border-left:1px solid #ccc;
		border-right:1px solid #ccc;
	}

		table.sample-table-overflow-scroll thead {
			display:none;
		}

		table.sample-table-overflow-scroll tbody {
			display:table;
			width:700px;
		}

			table.sample-table-overflow-scroll tbody tr:first-child td {
				border-top-width:5px;
			}

			table.sample-table-overflow-scroll tbody tr td:first-child {
				border-left:none;
			}

			table.sample-table-overflow-scroll tbody tr td:last-child {
				border-right:none;
			}
}

/* -----------------------------------------------
マウスオーバー時のグラデーションのアニメーション
----------------------------------------------- */

p.sample-hover-gradient-animation-01 a {
	display:inline-block;
	padding:10px 20px;
	background:linear-gradient(#008fdd, #00d 50%, #008fdd);
	background-size:100% 200%;
	color:#fff;
	transition:background-position 0.2s;
}

p.sample-hover-gradient-animation-01 a:hover {
	background-position:0 100%;
}

p.sample-hover-gradient-animation-02 a {
	position:relative;
	z-index:1;
	display:inline-block;
	padding:10px 20px;
	background:linear-gradient(#008fdd, #00d);
	color:#fff;
	text-decoration:none;
}

	p.sample-hover-gradient-animation-02 a::before {
		position:absolute;
		top:0;
		left:0;
		z-index:-1;
		width:100%; height:100%;
		content:"";
		background:linear-gradient(#00d, #008fdd);
		opacity:0;
		transition:opacity 0.2s;
	}

	p.sample-hover-gradient-animation-02 a:hover::before {
		opacity:1;
	}

/* -----------------------------------------------
	CSSのみでテキストのアンダーラインのアニメーション
----------------------------------------------- */

p.sample-text-underline-animation span {
	background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	text-decoration:none;
	transition:background-size 0.2s;
}

p.sample-text-underline-animation span:hover,
p.sample-text-underline-animation span:focus {
	background-size:100% 1px;
}

/* -----------------------------------------------
	CSSのみでテキストのアンダーラインのアニメーション
----------------------------------------------- */

div.sample-flex-item-scroll {
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
}

	div.sample-flex-item-scroll p.item {
		padding:10px;
		width:100px;
		background-color:#eee;
	}

	div.sample-flex-item-scroll p.item:nth-of-type(2) {
		-webkit-flex:1 1 0;
		-ms-flex:1 1 0;
		flex:1 1 0;
		overflow-x:scroll;
		white-space:nowrap;
	}

/* -----------------------------------------------
	ol要素の子孫要素へのナンバリング
----------------------------------------------- */
div.contentbox ol.sample-css-ol-element-numbering {
	margin-left:10px;
	list-style:none;
	counter-reset:counter;
}

	div.contentbox ol.sample-css-ol-element-numbering li::before {
		content:counters(counter, "-") ". ";
		counter-increment:counter;
	}

	div.contentbox ol.sample-css-ol-element-numbering li ol {
		margin:0 0 0 2em;
		list-style:none;
		counter-reset:counter;
	}