@charset "utf-8";

/**
 * font declaration
 */

@font-face {
	font-family: 'VL ゴシック';
	src: local('VL ゴシック'), url('../fonts/VL-Gothic-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'VL Pゴシック';
	src: local('VL Pゴシック'), url('../fonts/VL-PGothic-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'SymbolSignsBasisset';
	src: local('Symbol Signs Basis set'), local('SymbolSigns-Basisset'), url('../fonts/symbol-signs.ttf') format('truetype');
}
@font-face {
	font-family: 'mplus-2p-black';
	src: local('M+ 2'), url('../fonts/mplus-2p-black.ttf') format('truetype');
}
@font-face {
	font-family: 'AoyagiKouzanFontGyousyo';
	src: local('青柳衡山フォント行書'), url('../fonts/AoyagiKouzanFontGyousyo.ttf') format('truetype');
}

/*
	erase all styles about elems not in view
	to increase performance
*/
div.page:not(.onView),
div.page:not(.onView) *{
	display:none !important;
	background:none !important;
	border:none !important;
	border-radius:none !important;
	-webkit-transition:none !important;
	-webkit-background-size: auto !important;
	float:none !important;
	outline:3px solid #fff;
}

/**
 * base
 */

*{ margin:0; padding:0; list-style-type:none; }

html,body{
	/* necessary to enable bg gradient? */
	width:100%;
	height:100%;
	line-height:1.5;
}
html{
	font-family:'VL Pゴシック','メイリオ',Meiryo, sans-serif;
	line-height:1.3;
	background:#800;
	background-image: -moz-linear-gradient(
		top,
		rgba(40,40,40,1) 0%,
		rgba(30,30,30,1) 66%,
		rgba(56,45,39,.8) 100%
	);
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0%, rgba(40,40,40,1)),
		color-stop(66%, rgba(30,30,30,1)),
		color-stop(100%, rgba(56,45,39,.8))
	);
	background-repeat:no-repeat;
	background-position:0 0;
	font-size:30px;
}
h1{
	text-shadow: rgba(0,0,0,1) 0 0 .1em;
	font-size:1.5em;
}
p.debugNote{
	background:rgba(255,0,0,.3);
	border:1px solid #f00;
	padding:.6em 1em .7em;
	color:#fff;
	font-size:.7em;
	line-height:1.5;
	margin:0 0 1em;
	overflow:hidden;
}
.symbol{
	font-family:'SymbolSignsBasisset',sans-serif;
	display:inline-block;
	padding:0 .2em 0 .4em;
	-webkit-transform:scale(1.8);
}
.clear{
	clear:both;
}
.nowrap{
	white-space:nowrap;
	display:inline-block;
}

.x0\.25{ transform:scale(0.25); -webkit-transform:scale(0.25); }
.x0\.5{ transform:scale(0.5); -webkit-transform:scale(0.5); }
.x1\.5{ transform:scale(1.5); -webkit-transform:scale(1.5); }
.x2{ transform:scale(2); -webkit-transform:scale(2); }
.x2\.5{ transform:scale(2.5); -webkit-transform:scale(2.5); }
.x3{ transform:scale(3); -webkit-transform:scale(3); }
.x4{ transform:scale(4); -webkit-transform:scale(4); }
.x5{ transform:scale(5); -webkit-transform:scale(5); }
.x6{ transform:scale(5); -webkit-transform:scale(6); }

em{
		font-style:normal;
		color:orange;
		text-shadow:0 0 4px rgba(0,0,0,1);
}

a{
	color:#fff;
}

blockquote{
	background:#111;
	color:#fff;
	border:1px solid #333;
	font-size:.8em;
	padding:1.5% 2%;
	margin:0 0 .75em;
}
.vImgs{
}
	.vImgs img{
		display:block;
		margin:.5em 0;
	}
.hImgs{
	text-align:center;
	display:box;
	display:-webkit-box;
	box-align:center;
	-webkit-box-align:center;
	box-orient:horizontal;
	-webkit-box-orient:horizontal;
}
	.hImgs img{
	}

/**
 * page
 */
.page{
	-webkit-transition-property:opacity,top,left,-webkit-transform;
	-webkit-transition-duration:.5s;
	-webkit-transition-timing-function:ease;
	/*
	-webkit-transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
	*/
	position:fixed;
	width:100%;
	height:100%;
	color:#fff;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:4%;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	opacity:0;
}
	.page p:not(*[class]){
		padding:0 0 .75em;
	}
.page.current{
	opacity:1;
	left:0;
	top:0;
	-webkit-transform:rotate(0deg);
	z-index:101;
}
.page.prev{
	left:-100%;
	top:20%;
	opacity:0;
	-webkit-transform:rotate(-60deg) scale(.5);
}
.page.next{
	left:100%;
	top:20%;
	opacity:0;
	-webkit-transform:rotate(60deg) scale(.5);
}
.page.top{
	box-align:center;
	-webkit-box-align:center;
	box-pack:center;
	-webkit-box-pack:center;
	display:box;
	display:-webkit-box;
}
	.page.top h1{
		font-size:4em;
		text-align:center;
	}
	.page.top p{
		position:absolute;
		right:3%;
		bottom:3%;
		text-shadow: rgba(0,0,0,1) 0 0 .1em;
	}
.page{
}
	.page h1{
		padding:0 0 .5em;
	}
	.page p{
	}
	.page .referenceList{
		font-size:.7em;
	}
		.page .referenceList dt{
		}
		.page .referenceList dd{
			padding:0 0 0 1em;
		}
	.page > .agenda{
		font-size:.9em;
	}
		.page > .agenda table{
			border-collapse:collapse;
			width:100%;
		}
			.page > .agenda th{
            border-left: 1px solid #555;
            border-top: 1px solid #555;
            text-align: left;
            background: rgba(50,50,50,0.4);
				padding:.25em .5em;
            vertical-align: top;
			}
			.page > .agenda td{
            border-top: 1px solid #555;
            vertical-align: top;
				padding:.25em .5em;
			}
.page.break{
	font-size:1.5em;
}
	.page.break{
		box-align:center;
		-webkit-box-align:center;
		box-pack:center;
		-webkit-box-pack:center;
		box-orient:vertical;
		-webkit-box-orient:vertical;
		display:box;
		display:-webkit-box;
	}
	.page.break h1{
		text-align:center;
	}
	.page.break > p{
		display:block;
	}
	.page.break > ul{
		padding:0 0 0 1em;
	}
		.page.break > ul li{
			list-style-type:disc;
		}
		.page.break > ul li.old{
			opacity:.2;
		}
		.page.break > ul li strong{
			font-weight:bold;
		}

.page.sectionStart{
}
	.page.sectionStart ul{
		font-size:.8em;
		line-height:1.2;
		position:fixed;
		right:0;
		top:0;
		width:35%;
		height:100%;
		box-align:left;
		-webkit-box-align:left;
		box-orient:vertical;
		-webkit-box-orient:vertical;
		box-pack:center;
		-webkit-box-pack:center;
		display:box;
		display:-webkit-box;
		letter-spacing:-.1em;
	}
		.page.sectionStart ul li{
			border-bottom:1px solid #fff;
			padding:.3em 0 .3em 0;
			opacity:.5;
		}
		.page.sectionStart ul li:last-child{
			border-bottom:none;
		}
		.page.sectionStart ul li.current{
			z-index:2;
			background:#fff;
			color:#000;
			-webkit-transform:scale(1.1);
			padding-left:.5em;
			opacity:1;
			border-radius:.2em 0 0 .2em;
		}
	.page.sectionStart h1{
		position:fixed;
		right:40%;
		top:0;
		height:100%;
		width:60%;
		box-align:center;
		-webkit-box-align:center;
		box-pack:end;
		-webkit-box-pack:end;
		display:box;
		display:-webkit-box;
		text-align:right;
		font-size:2em;
	}

pre.code{
	background:#111;
	color:#fff;
	border:1px solid #333;
	font-size:.8em;
	padding:1.5% 2%;
	margin:0 0 .75em;
}
pre.code:last-child{
	margin-bottom:0;
}
	pre.code code{
		font-family:'VL ゴシック',sans-serif;
	}
	pre.code em{
	}

/**
 * pager
 */

#pager{
	font-family: 'SymbolSignsBasisset', sans-serif;
	font-size:1.5em;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	opacity:0;
	-webkit-transition:opacity .3s;
	z-index:200;
}
#pager:hover{
	opacity:1;
}
	#pager li{
		background:rgb(255,255,255);
		border-radius:.4em;
		margin:.2em;
	}
	#pager li:first-child{
		float:left;
	}
	#pager li:last-child{
		float:right;
	}
		#pager li a{
			line-height:1;
			text-decoration:none;
			float:left;
			color:#000;
			font-weight:bold;
			padding:0 .1em .2em .3em;
			text-decoration:none;
		}

/**
 * pageNum
 */
#pageNum{
	position:fixed;
	width:100%;
	left:0;
	bottom:0;
	text-align:center;
	z-index:300;
	color:#fff;
	font-size:.5em;
	padding:0 0 .2em;
}
	#pageNum .current{
	}
	#pageNum .total{
	}

/**
 * examples
 */
.example.targetBlankIcon{
	width:40%;
	margin:0 0 0 5%;
	background:#fff;
	padding:.75em 1em;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	float:right;
	overflow:hidden;
	border:1px solid #fff;
	font-size:.8em;
}
/*
	.example.targetBlankIcon ul{
	}
		.example.targetBlankIcon ul li{
		}
		.example.targetBlankIcon ul li a{
			color:#00f;
			display:inline-block;
			padding:0 0 0 33px;
			background:url(../imgs/arrow1.png) no-repeat 0 .4em;
		}
		.example.targetBlankIcon ul li a[target="_blank"]{
			background:url(../imgs/icon_win.png) no-repeat 0 .35em;
		}

.example.cartIcon{
	width:40%;
	margin:0 0 0 5%;
	background:#fff;
	padding:.75em 1em;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	float:right;
	overflow:hidden;
	border:1px solid #fff;
	font-size:.8em;
}
	.example.cartIcon ul{
	}
		.example.cartIcon ul li{
		}
		.example.cartIcon ul li a{
			color:#00f;
			display:inline-block;
			padding:0 0 0 33px;
			background:url(../imgs/arrow1.png) no-repeat 0 .4em;
		}
		.example.cartIcon ul li a[href^="http://shopping.example.com/"]{
			background:url(../imgs/icon_cart.png) no-repeat 0 .25em;
		}

.example.rssIcon{
	width:40%;
	margin:0 0 0 5%;
	background:#fff;
	padding:.75em 1em;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	float:right;
	overflow:hidden;
	border:1px solid #fff;
	font-size:.8em;
}
	.example.rssIcon ul{
	}
		.example.rssIcon ul li{
		}
		.example.rssIcon ul li a{
			color:#00f;
			display:inline-block;
			padding:0 0 0 33px;
			background:url(../imgs/arrow1.png) no-repeat 0 .4em;
		}
		.example.rssIcon ul li a[href$=".rss"]{
			background:url(../imgs/icon_rss.png) no-repeat 0 .25em;
		}
*/


.example.multiple-background-images1{
}
	.example.multiple-background-images1 > div{
		background:
			url(../imgs/multiBg/leftman.png) no-repeat left bottom,
			url(../imgs/multiBg/rightman.png) no-repeat right bottom,
			url(../imgs/multiBg/pattern.jpg) repeat left top;
		width:640px;
		height:500px;
		padding:20px;
	}

.example.multiple-background-images2{
	margin:1em 0 .5em -3%;
	overflow:hidden;
}
	.example.multiple-background-images2 div{
		width:30%;
		margin:0 0 0 3%;
		height:300px;
		float:left;
		padding:10px;
		font-size:.6em;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
	}
	.example.multiple-background-images2 div:nth-child(1){
		background:
			url(../imgs/multiBg/mini/pattern.jpg) repeat left top;
	}
	.example.multiple-background-images2 div:nth-child(2){
		background:
			url(../imgs/multiBg/mini/leftman.png) no-repeat left bottom,
			url(../imgs/multiBg/mini/pattern.jpg) repeat left top;
	}
	.example.multiple-background-images2 div:nth-child(3){
		background:
			url(../imgs/multiBg/mini/leftman.png) no-repeat left bottom,
			url(../imgs/multiBg/mini/rightman.png) no-repeat right bottom,
			url(../imgs/multiBg/mini/pattern.jpg) repeat left top;
	}

.example.imgList{
	position:relative;
	transform:scale(1.4);
	-webkit-transform:scale(1.4);
}
	.example.imgList ul{
	}
		.example.imgList ul li{
			background:#fff;
			padding:10px 15px 15px;
			margin:10px 0;
			color:#333;
			font-size:.5em;
		}
			.example.imgList ul li span{
				display:block;
				padding:0 0 5px;
			}
			.example.imgList ul li img{
				display:block;
			}
		.example.imgList ul li:hover{
		}
			.example.imgList ul li:hover img{
				outline:1px solid #f00;
			}
	.example.imgList p{
		position:absolute;
		width:100%;
		margin:0;
		padding:0;
		left:0;
		top:-.4em;
		font-size:15em;
		line-height:1;
		text-align:center;
		z-index:300;
		color:#f00;
		opacity:.8;
	}

.example[class*="background-size"]{
	padding:0 0 .3em;
}
	.example[class*="background-size"] div{
		border:3px solid #f00;
		background-image:url(../imgs/bgSize/dog.jpg);
		background-repeat:no-repeat;
		background-position:left top;
		width:600px;
		height:300px;
	}
.example.background-size1 div{ background-size: auto; }
.example.background-size2 div{ background-size: 30% 100%; }
.example.background-size3 div{ background-size: 900px 350px; }
.example.background-size5 div{ background-size: contain; }
.example.background-size6 div{ background-size: cover; }

/* example */
.example.background-size1 div{ -webkit-background-size: auto; }
.example.background-size2 div{ -webkit-background-size: 40% 100%; }
.example.background-size3 div{ -webkit-background-size: 900px 350px; }
.example.background-size4 div{ -webkit-background-size: 40%; }
.example.background-size5 div{ -webkit-background-size: contain; }
.example.background-size6 div{ -webkit-background-size: cover; }

.example.radiusclassic{
	background:#fff;
	color:#333;
	padding:40px;
	font-size:13px;
	transform:scale(1.4);
	-webkit-transform:scale(1.4);
}
	.example.radiusclassic div{
		background:url(../imgs/borderRadius/middle.gif) 0 0 repeat-y;
	}
	.example.radiusclassic div > div{
		background:url(../imgs/borderRadius/bottom.gif) 0 100% no-repeat;
	}
	.example.radiusclassic div > div > div{
		background:url(../imgs/borderRadius/top.gif) 0 0 no-repeat;
		width:470px;
		padding:15px;
	}

.example.radiuschanged{
	background:#fff;
	color:#333;
	padding:2em;
	font-size:14px;
}
	.example.radiuschanged div{
		background: #DBE9F5;
		border: 3px solid #448ACA;
		border-radius: 20px;
		width:600px;
		padding:15px;
		height:80px;
	}

.example.radiushowto{
	margin:1em 0 .5em -3%;
}
.example.radiushowto:after{content:''; display:block; clear:both;}
	.example.radiushowto > div{
		color:#000;
		width:30%;
		margin:0 0 0 3%;
		height:300px;
		float:left;
		padding:10px;
		font-size:.6em;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		background:#dbe9f5;
		border:10px solid #448aca;
		position:relative;
	}
		.example.radiushowto > div > div{
			position:absolute;
			left:-5%;
			width:110%;
			height:30px;
			outline:3px solid red;
		}
	.example.radiushowto > div:nth-child(1){
		border-top:none;
		border-bottom:none;
	}
		.example.radiushowto > div:nth-child(1) > div{
			top:40%;
		}
	.example.radiushowto > div:nth-child(2){
		border-bottom:none;
		border-radius:40px 40px 0 0;
	}
		.example.radiushowto > div:nth-child(2) > div{
			top:-4%;
		}
	.example.radiushowto > div:nth-child(3){
		border-radius:40px;
	}
		.example.radiushowto > div:nth-child(3) > div{
			bottom:-4%;
		}

.example.radiusMany{
	width:70%;
	padding:1em 0 0;
}
	.example.radiusMany div{
		width:30%;
		height:150px;
		float:left;
		margin:0 0 1em 5%;
		padding:10px;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		background:#dbe9f5;
	}
	.example.radiusMany div:nth-child(3),
	.example.radiusMany div:nth-child(6){
		margin-right:-5px;
	}
	.example.radiusMany div:nth-child(1),
	.example.radiusMany div:nth-child(4){
		margin-left:0;
	}
	.example.radiusMany div:nth-child(1){
		border-radius:10px;
		border: 8px solid #448ACA;
	}
	.example.radiusMany div:nth-child(2){
		border-radius:20px;
		border: 8px solid #448ACA;
	}
	.example.radiusMany div:nth-child(3){
		border-radius:300px;
		border: 8px solid #448ACA;
	}
	.example.radiusMany div:nth-child(4){
		border-radius:30px 0 100px 0;
	}
	.example.radiusMany div:nth-child(5){
		border-radius:70px / 30px;
	}
	.example.radiusMany div:nth-child(6){
		border-top-left-radius:2000px;
		border-bottom-left-radius:2000px;
	}

.example.radiusComplicated{
	width:500px;
	height:500px;
	position:relative;
	background:#d3af75;
	border-radius:100px 100px 50px 50px;
}
	.example.radiusComplicated > div{
		position:absolute;
	}
	.example.radiusComplicated > div:nth-child(1){
		left:20%;
		top:20%;
		width:100px;
		height:100px;
		background:#fff;
		border-radius:50px;
	}
		.example.radiusComplicated > div:nth-child(1) > div{
			position:absolute;
			right:10%;
			bottom:10%;
			width:40px;
			height:40px;
			background:#000;
			border-radius:50px;
		}
	.example.radiusComplicated > div:nth-child(2){
		right:20%;
		top:20%;
		width:100px;
		height:100px;
		background:#fff;
		border-radius:50px;
	}
		.example.radiusComplicated > div:nth-child(2) > div{
			position:absolute;
			left:10%;
			top:10%;
			width:40px;
			height:40px;
			background:#000;
			border-radius:50px;
		}
	.example.radiusComplicated > div:nth-child(3){
		left:20%;
		bottom:20%;
		width:60%;
		height:10%;
		background:#f00;
		border-radius:300px/100px;
	}
	
.example.shadowclassic{
	margin:1em 0 .5em;
	padding:30px;
	background:#fff;
	overflow:hidden;
}
.example.shadowclassic:after{content:''; display:block; clear:both;}

	.example.shadowclassic > div{
		color:#000;
		width:30%;
		margin:0 0 0 3%;
		height:300px;
		float:left;
		padding:10px;
		font-size:.6em;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		background:url(../imgs/boxshadow/middle.gif);
		background-size:100% 100%;
		position:relative;
	}
	.example.shadowclassic > div > div{
		position:absolute;
	}
	.example.shadowclassic > div b{
		position:absolute;
		left:-2%;
		width:103%;
		height:10%;
		outline:3px solid red;
	}
	.example.shadowclassic > div:first-child{
		margin-left:0;
	}
		.example.shadowclassic > div:first-child b{
			top:40%;
		}
	.example.shadowclassic > div:nth-child(2){
	}
		.example.shadowclassic > div:nth-child(2) b{
			top:-2%;
		}
	.example.shadowclassic > div > div:first-child{
		left:0;
		top:0;
		width:100%;
		height:50px;
		background:url(../imgs/boxshadow/top.gif) no-repeat 0 0;
		background-size:100% auto;
	}
	.example.shadowclassic > div:nth-child(3){
	}
		.example.shadowclassic > div:nth-child(3) > div:last-of-type{
			left:0;
			bottom:0;
			width:100%;
			height:50px;
			background:url(../imgs/boxshadow/bottom.gif) no-repeat 0 100%;
			background-size:100% auto;
		}
		.example.shadowclassic > div:nth-child(3) b{
			bottom:-2%;
		}
	

.example.box-shadow1{
	background:#fff;
	padding:1em;
}
	.example.box-shadow1 div{
		border:3px solid #000;
		background:#fff;
		color:#000;
		padding:1em 0;
		width:11em;
		font-size:1em;
		font-weight:bold;
		text-align:center;
		box-shadow:5px 5px 8px #333;
		-webkit-box-shadow:5px 5px 8px #333;
		-moz-box-shadow:5px 5px 8px #333;
	}
		.example.box-shadow1 div p{
			padding:0;
			margin:0;
		}

.example.box-shadow3{
	background:url(../imgs/boxshadow/bg1.png);
	padding:1em;
	margin:0 0 .5em;
	overflow:hidden;
}
	.example.box-shadow3 div{
		border:3px solid #000;
		background:#fff;
		color:#000;
		padding:1em 0;
		width:11em;
		font-size:1em;
		font-weight:bold;
		text-align:center;
		box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
		-webkit-box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
		-moz-box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
	}
		.example.box-shadow3 div p{
			padding:0;
			margin:0;
		}

.example.box-shadow4{
	background:url(../imgs/boxshadow/bg1.png);
	padding:1em;
	margin:0 0 .5em;
	overflow:hidden;
}
	.example.box-shadow4 div{
		border:3px solid #000;
		background:#fff;
		color:#000;
		padding:1em 0;
		width:11em;
		font-size:1em;
		font-weight:bold;
		text-align:center;
		border-radius:30px;
		-webkit-border-radius:30px;
		box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
		-webkit-box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
		-moz-box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
	}
		.example.box-shadow4 div p{
			padding:0;
			margin:0;
		}

.example.box-shadow5{
	background:#fff;
	padding:40px 60px;
	text-align:center;
}
	.example.box-shadow5 a{
		display:inline-block;
		border:1px solid #666;
	}
		.example.box-shadow5 a img{
			border:5px solid #fff;
			display:block;
		}
	.example.box-shadow5 a:hover{
		box-shadow: 0 0 10px #333;
		-webkit-box-shadow: 0 0 10px #333;
		-moz-box-shadow: 0 0 10px #333;
	}
	.example.box-shadow5 p{
		padding:.2em 0 0;
		color:#333;
	}

.example.gradient1{
	background:#fff;
	padding:60px;
	text-align:center;
	font-size:18px;
	text-align:left;
}
	.example.gradient1 dl{
		width:640px;
		padding:30px;
		color:#fff;
		background-image: linear-gradient(top, #000, #aaa);
		background-image: -moz-linear-gradient(top, #000, #aaa);
		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0, #000),
			color-stop(1, #aaa)
		);
	}
		.example.gradient1 dt{
			font-size:1.5em;
			padding:0 0 .3em;
		}

.example.gradient1ex{
	background:#fff;
	padding:20px;
	text-align:center;
	font-size:18px;
	text-align:left;
}
	.example.gradient1ex div{
		width:640px;
		position:relative;
	}
		.example.gradient1ex dl{
			font-size:.7em;
			padding:20px;
			color:#fff;
			background-image: linear-gradient(top, #000, #aaa);
			background-image: -moz-linear-gradient(top, #000, #aaa);
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0, #000),
				color-stop(1, #aaa)
			);
		}
			.example.gradient1ex dt{
				font-size:1.5em;
				padding:0 0 .3em;
			}
		.example.gradient1ex div > b{
			position:absolute;
			outline:3px solid red;
			top:0;
			width:20%;
			height:100%;
			-webkit-transform:scale(.9);
		}
		.example.gradient1ex div > b:nth-child(1){ left:0; }
		.example.gradient1ex div > b:nth-child(2){ left:20%; }
		.example.gradient1ex div > b:nth-child(3){ left:40%; }
		.example.gradient1ex div > b:nth-child(4){ left:60%; }
		.example.gradient1ex div > b:nth-child(5){ left:80%; }

.example.gradient2{
	background:#fff;
	padding:20px;
	text-align:center;
	font-size:18px;
	text-align:left;
	margin:0 0 1.5em;
}
	.example.gradient2 dl{
		width:640px;
		padding:30px;
		color:#fff;
		background-image: linear-gradient(left, #000, #aaa);
		background-image: -moz-linear-gradient(left, #000, #aaa);
		background-image: -webkit-gradient(
			linear,
			left top,
			right top,
			color-stop(0, #000),
			color-stop(1, #aaa)
		);
	}
		.example.gradient2 dt{
			font-size:1.5em;
			padding:0 0 .3em;
		}

.example.gradient3{
	background:#fff;
	padding:20px;
	text-align:center;
	font-size:18px;
	text-align:left;
	margin:0 0 1.5em;
}
	.example.gradient3 dl{
		width:640px;
		padding:30px;
		color:#fff;
		background-image: linear-gradient(left top, #000, #aaa);
		background-image: -moz-linear-gradient(left top, #000, #aaa);
		background-image: -webkit-gradient(
			linear,
			left top,
			right bottom,
			color-stop(0, #000),
			color-stop(1, #aaa)
		);
	}
		.example.gradient3 dt{
			font-size:1.5em;
			padding:0 0 .3em;
		}

.example.gradient4{
}
	.example.gradient4 a{
		color:#fff;
		border:2px solid #999;
		text-decoration:none;
		border-radius:.3em;
		-webkit-border-radius:.3em;
		font-size:2em;
		text-shadow:0 0 10px rgba(0,0,0,.5);
		display:inline-block;
		padding:.25em 1em;
		background-color: #555555;
		background-image: -moz-linear-gradient(
			top,
			#999999   0%,
			#444444  50%,
			#333333  50%,
			#000000 100%
		);
		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(  0, #999999),
			color-stop(0.5, #444444),
			color-stop(0.5, #333333),
			color-stop(1.0, #000000)
		);
	}

.example.manyGradientButtons{
}
	.example.manyGradientButtons a{
		color:#fff;
		border:2px solid #999;
		text-decoration:none;
		border-radius:.3em;
		-webkit-border-radius:.3em;
		text-shadow:0 0 10px rgba(0,0,0,.5);
		display:inline-block;
		padding:.25em 1em;
		margin:.4em .2em;
		background-color: #555555;
		background-image: -moz-linear-gradient(
			top,
			#999999   0%,
			#444444  50%,
			#333333  50%,
			#000000 100%
		);
		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(  0, #999999),
			color-stop(0.5, #444444),
			color-stop(0.5, #333333),
			color-stop(1.0, #000000)
		);
	}
	.example.manyGradientButtons a:nth-child(5n+1){
		background-image: -webkit-gradient(
			linear, left top, left bottom,
			color-stop(  0, #cc9999),
			color-stop(0.5, #cc4444),
			color-stop(0.5, #cc3333),
			color-stop(1.0, #cc0000)
		);
	}
	.example.manyGradientButtons a:nth-child(5n+2){
		background-image: -webkit-gradient(
			linear, left top, left bottom,
			color-stop(  0, #00dd99),
			color-stop(0.5, #00dd44),
			color-stop(0.5, #00dd33),
			color-stop(1.0, #00dd00)
		);
	}
	.example.manyGradientButtons a:nth-child(5n+3){
		background-image: -webkit-gradient(
			linear, left top, left bottom,
			color-stop(  0, #99aabb),
			color-stop(0.5, #44aabb),
			color-stop(0.5, #33aabb),
			color-stop(1.0, #00aabb)
		);
	}
	.example.manyGradientButtons a:nth-child(5n+4){
		background-image: -webkit-gradient(
			linear, left top, left bottom,
			color-stop(  0, #cc0044),
			color-stop(0.5, #cc0044),
			color-stop(0.5, #cc4433),
			color-stop(1.0, #00aabb)
		);
	}
	.example.manyGradientButtons a:nth-child(5n){
		background-image: -webkit-gradient(
			linear, left top, left bottom,
			color-stop(  0, #330000),
			color-stop(0.5, #000),
			color-stop(0.5, #222),
			color-stop(1.0, #330000)
		);
	}

.example.multiColumn1{
	font-size:14px;
	width:680px;
	color:#000;
	background:#fff;
	padding:20px;
}
	.example.multiColumn1 div{
		column-count:2;
		-webkit-column-count: 2;
		-moz-column-count: 2;
	}
		.example.multiColumn1 div p{
			background:#cccccc;
		}

.example.multiColumn2{
	font-size:14px;
	width:680px;
	color:#000;
	background:#fff;
	padding:20px;
}
	.example.multiColumn2 div{
		column-count:3;
		-webkit-column-count: 3;
		-moz-column-count: 3;
	}
		.example.multiColumn2 div p{
			background:#cccccc;
		}

.example.multiColumn3{
	font-size:14px;
	width:680px;
	color:#000;
	background:#fff;
	padding:20px;
}
	.example.multiColumn3 div{
		column-count:3;
		-webkit-column-count: 3;
		-moz-column-count: 3;
	}
		.example.multiColumn3 div p{
			border:3px solid red;
			background:#cccccc;
			margin:0 0 10px;
		}

.example.multiColumn4{
	font-size:14px;
	width:680px;
	color:#000;
	background:#fff;
	padding:20px;
}
	.example.multiColumn4 div{
		column-count:3;
		column-gap:40px;
		-webkit-column-count: 3;
		-webkit-column-gap: 40px;
		-moz-column-count: 3;
		-moz-column-gap: 40px;
	}
		.example.multiColumn4 div p{
			background:#cccccc;
		}

.example.multiColumn5{
	font-size:14px;
	width:680px;
	color:#000;
	background:#fff;
	padding:20px;
}
	.example.multiColumn5 div{
		column-count:3;
		column-rule:3px solid #000000;
		-webkit-column-count: 3;
		-webkit-column-rule:3px solid #000000;
		-moz-column-count: 3;
		-moz-column-rule:3px solid #000000;
	}
		.example.multiColumn5 div p{
			background:#cccccc;
		}

.example.multiColumn6{
	font-size:14px;
	width:680px;
	color:#000;
	background:#fff;
	padding:20px;
}
	.example.multiColumn6 div{
		column-width:100px;
		-webkit-column-width:100px;
		-moz-column-width:100px;
		column-rule:3px solid #000000;
		-webkit-column-rule:3px solid #000000;
		-moz-column-rule:3px solid #000000;
	}
		.example.multiColumn6 div p{
			background:#cccccc;
		}

.example.transition1{
	text-align:center;
	font-size:2em;
	padding:.5em 0 0;
}
	.example.transition1 a{
		display:inline-block;
		padding:3px 8px;
		margin:0 8px;
		color:#000;
		background-color:#ff0000;
	}
	.example.transition1 a:hover{
		background-color:#00ff00;
	}

.example.transition2{
	text-align:center;
	font-size:2em;
	padding:.5em 0 0;
}
	.example.transition2 a{
		display:inline-block;
		padding:3px 8px;
		margin:0 8px;
		color:#000;
		background-color:#ff0000;
		-webkit-transition:background-color 1s;
	}
	.example.transition2 a:hover{
		background-color:#00ff00;
	}

.example.transition3{
	padding:.5em 0 0;
	text-align:center;
}
	.example.transition3 img{
		vertical-align:top;
		border-width:5px;
		border-style:solid;
		border-color:#ffffff;
		height:200px;
	}
	.example.transition3 a{
		opacity:1;
		display:inline-block;
		border:1px solid #999999;
		margin:0 .5em;
	}
	.example.transition3 a:hover{
		opacity:0.3;
	}
	.example.transition3 a:nth-child(2){
		-webkit-transition:opacity 0.5s;
	}


.example.transition5{
	padding:0 0 .5em;
}
	.example.transition5 *{
		vertical-align:middle;
	}
	.example.transition5 img{
		border-width:3px;
		border-style:solid;
		border-color:#ffffff;
		width:100px;
		height:100px;
	}
	.example.transition5 img:hover{
		width:250px;
		height:250px;
	}

.example.transition6{
}
	.example.transition6 *{
		vertical-align:middle;
	}
	.example.transition6 img{
		border-width:3px;
		border-style:solid;
		border-color:#ffffff;
		width:100px;
		height:100px;
		-webkit-transition:width 0.5s, height 0.5s;
	}
	.example.transition6 img:hover{
		width:250px;
		height:250px;
	}

.example.transitionComplicated{
	width:500px;
	height:500px;
	position:relative;
	background:#d3af75;
	border-top-left-radius:100px;
	border-top-right-radius:100px;
	border-bottom-right-radius:50px;
	border-bottom-left-radius:50px;
	-webkit-transition:
		width 1s,
		height .5s,
		border-top-left-radius 1.5s,
		border-top-right-radius 1.5s,
		border-bottom-right-radius .3s,
		border-bottom-left-radius .3s;
}
	.example.transitionComplicated > div{
		position:absolute;
	}
	.example.transitionComplicated > div:nth-child(1){
		left:20%;
		top:20%;
		width:100px;
		height:100px;
		background:#fff;
		border-radius:50px;
		-webkit-transition: left 2s;
	}
		.example.transitionComplicated > div:nth-child(1) > div{
			position:absolute;
			right:10%;
			bottom:10%;
			width:40px;
			height:40px;
			background:#000;
			border-radius:50px;
			-webkit-transition:
				right .2s,
				bottom .2s,
				width .1s,
				height .1s;
		}
	.example.transitionComplicated > div:nth-child(2){
		right:20%;
		top:20%;
		width:100px;
		height:100px;
		background:#fff;
		border-radius:50px;
		-webkit-transition: right 2s;
	}
		.example.transitionComplicated > div:nth-child(2) > div{
			position:absolute;
			left:10%;
			top:10%;
			width:40px;
			height:40px;
			background:#000;
			border-radius:50px;
			-webkit-transition:
				left .2s,
				top .2s,
				width .1s,
				height .1s;
		}
	.example.transitionComplicated > div:nth-child(3){
		left:20%;
		bottom:20%;
		width:60%;
		background:#f00;
		border-radius:300px/100px;
		color:#f00;
		font-size:1px;
		text-align:center;
		-webkit-transition:
			bottom .2s,
			color .5s,
			font-size .5s,
			line-height .5s;
	}

.example.transitionComplicated:hover{
	width:800px;
	height:300px;
	border-top-left-radius:500px;
	border-top-right-radius:500px;
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
}
	.example.transitionComplicated:hover > div:nth-child(1){
		left:30%;
	}
		.example.transitionComplicated:hover > div:nth-child(1) > div{
			right:50%;
			bottom:50%;
			width:15px;
			height:15px;
		}
	.example.transitionComplicated:hover > div:nth-child(2){
		right:30%;
	}
		.example.transitionComplicated:hover > div:nth-child(2) > div{
			left:50%;
			top:50%;
			width:20px;
			height:20px;
		}
	.example.transitionComplicated:hover > div:nth-child(3){
		bottom:5%;
		background:#f00;
		border-radius:300px/100px;
		font-size:1.5em;
		line-height:2;
		color:#fff;
	}
	
.example.selectorConclusion{
	padding:20px 0 0 20px;
	overflow:hidden;
}
	.example.selectorConclusion{
	}

.example.fontface1{
	font-family:"ＭＳ Ｐゴシック", "Osaka", sans-serif;
	border:3px solid #fff;
	padding:1em;
}

.example.fontface2{
	text-align:center;
}
	.example.fontface2 > p{
	}
	.example.fontface2 > p:nth-child(1){
		font-family: "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	}
	.example.fontface2 > p:nth-child(2){
		font-family:'mplus-2p-black', sans-serif;
	}
	.example.fontface2 > p:nth-child(3){
		font-family:'AoyagiKouzanFontGyousyo', sans-serif;
	}

.example.table-ba {
	width: 1100px;
	font-size:.9em;
}
	.example.table-ba th {
		border-right: 1px solid #ccc;
		width: 50px;
		padding: 0 0.5em 0;
	}
	.example.table-ba td {
		padding: 0 0 0 0.5em;
	}


#hsl-test {
	position: relative;
	width: 500px;
	padding: 12px 0;
	font-size: 13px;
}
#hsl-test .hsla {
	position: absolute;
	width: 160px;
	height: 200px;
	top: -12px;
	top: 80px;

	background-color: hsla(0,75%,100%,0.5);
	border: 1px solid #f33;
}
#hsl-test .hue { background-color: hsla(120,100%,50% ,0.3); left: 0; }
#hsl-test .sat { background-color: hsla(200,75% ,50% ,0.3); left: 170px; }
#hsl-test .lht { background-color: hsla(0  ,0%  ,100%,0.3); left: 338px; }