@charset "UTF-8";

/*margin*/
.mt5{	margin-top:5px;	}
.mt10{	margin-top:10px;	}
.mt20{	margin-top:20px;	}
.mt30{	margin-top:30px;	}
.mr5{	margin-right:5px;	}
.mr10{	margin-right:10px;	}
.mb5{	margin-bottom:5px;	}
.mb10{	margin-bottom:10px;	}
.mb20{	margin-bottom:20px;	}
.mb30{	margin-bottom:30px;	}
.ml5{	margin-left:5px;	}
.ml10{	margin-left:10px;	}
.margin10{	margin:10px;	}
/*padding*/
.pt5{	padding-top:5px;	}
.pr5{	padding-right:5px;	}
.pb5{	padding-bottom:5px;	}
.pl5{	padding-left:5px;	}
.pt10{	padding-top:10px;	}
.pr10{	padding-right:10px;	}
.pb10{	padding-bottom:10px;	}
.pl10{	padding-left:10px;	}
.padding10{	padding:10px;	}
/*align*/
.al{	text-align:left;	}
.ac{	text-align:center;	}
.ar{	text-align:right;	}
/*float*/
.fl{	float:left;	}
.fr{	float:right;	}
.clear{	clear:both;	}
/* display */
.none{	display:none;	}
.inline-list li,
.inline{	display:inline;	}
.block{	display:block;	}
.inline-block-list li,
.inline-block{	display:inline-block;	}
.inline-item-wrap,
.inline-block-list{
	letter-spacing:-.40em; /* 文字間を詰めて隙間を削除する */
}
.inline-item-wrap > *,
.inline-block-list li {
	letter-spacing: normal; /* 文字間を通常に戻す */
}
.display-none{	display:none;	}
/*width*/
.w-auto{	width:auto;	}
.w50{	width:50px;	}
.w100{	width:100px;	}
.w150{	width:150px;	}
.w180{	width:180px;	}
.w200{	width:200px;	}
.w100per{	width:100%;	}
.w80per{	width:80%;	}
.w50per{	width:50%;	}
.w30per{	width:30%;	}
.max-width,
.max-width img{	max-width:100%;	}
/* font-size */
.font10{	font-size:10px;	}
.font11{	font-size:11px;	}
.font12{	font-size:12px;	}
.font13{	font-size:13px;	}
.font14{	font-size:14px;	}
.font15{	font-size:15px;	}
.font16{	font-size:16px;	}
.font18{	font-size:18px;	}
.font20{	font-size:20px;	}
/* font-weight */
.bold{	font-weight:bold;	}
/* position */
.static{	position:static;	}
.relative{	position:relative;	}
.absolute{	position:absolute;	}
.fixed{	position:fixed;	}
/* background-color */
.transparent{	background-color: transparent;	}
/* others */
.pointer{	cursor:pointer;	}

/* テーブル */
.table{
	width:100%;
}
.table.w-auto{
	width:auto;
}
.table th,
.table td{
	border:1px solid #999;
	padding:.3em;
}
.table th{
	background-color:#ededed;
}
.table .odd td,
.table td.odd,
.table .odd td.even{
	background-color:#F0F0F6;
}
.table .even td,
.table td.even{
	background-color:#FFFFFF;
}

/* pagination */
.pagination{
	text-align:center;
	padding:0.5em;
	letter-spacing:-.40em; /* 文字間を詰めて隙間を削除する */
}
.pagination a,
.pagination span{
	letter-spacing: normal; /* 文字間を通常に戻す */
	display:inline-block;
	padding:0.5em;
	line-height:1;
	border:1px solid #000000;
	margin:3px;
}
.pagination a{
	text-decoration:none;
	color:#000000;
}
.pagination a:hover,
.pagination a:active,
.pagination .current{
	background-color:#000000;
	color:#FFF;
}
.pagination .current{
	font-weight:bold;
}
.pagination .disabled{
	border:1px solid #EEE;
	color:#DDD;
}

/* アスペクト比で表示 */
.youtube-container {
	position: relative;
	padding-bottom: 56.25%;/* 16:9 */
	height: 0;
	overflow: hidden;
}
.youtube-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* 横並びリスト */
.cell-list-wrap{
	width:100%;
}
.cell-list-wrap .cell-box{
	float:left;
}
.cell-list2 .cell-box{	width:50%;	}
.cell-list3 .cell-box{	width:33.3%;	}
.cell-list4 .cell-box{	width:25%;	}
.cell-list5 .cell-box{	width:20%;	}
.cell-list6 .cell-box{	width:16.66%;	}
.cell-list12 .cell-box{	width:8.33%;	}

/* 幅100% */
.max-width,
.stretch-width,
.max-width-image img,
.stretch-width-image img,
.max-width-form input[type="text"],
.stretch-width-form input[type="text"],
.max-width-form textarea,
.stretch-width-form textarea,
.max-width-form select,
.stretch-width-form select{
	max-width:100%;
	height:auto;
}
.stretch-width,
.stretch-width-image img,
.stretch-width-form input[type="text"],
.stretch-width-form textarea,
.stretch-width-form select{
	width:100%;
}

.must{
	color:#c00;
	font-weight:bold;
	margin:2px;
}

/* メッセージ窓 */
.info-window{
	padding: 10px;
	margin-bottom: 10px;
}
.info-window.red{
	background-color: #FFF5ED;
	border: 5px solid #C00;
	color: #C00;
}
.info-window.yellow{
	background-color: #F5F3BA;
	border: 5px solid #C7A20D;
	color: #796616;
}
.info-window.green{
	background-color: #E2F6C5;
	border: 5px solid #79C20D;
	color: #32510F;
}
.info-window.blue{
	background-color: #B5E5EF;
	border: 5px solid #77BACE;
	color: #082B33;
}


/* 注釈 */
.annotation{
	border:1px solid #900;
	padding:1em;
	margin:1em;
	background-color:#fcc;
}
.radio-toggle-box{
	overflow:hidden;
}





/* --------------------------------------
font-awesome
-------------------------------------------------- */
i.icon,
i.icon1{
	box-sizing:content-box;
	margin:3px;
	background-color:#fff;
	border:.2em solid #999;
	color:#666;
	border-radius:2em;
	display:inline;
	display:inline-block;
	width:1em;
	height:1em;
	line-height:1;
	text-align:center;
}

/* --------------------------------------
CSS3
-------------------------------------------------- */
.css3btn {
	font-size: 15px;
	color: #050505;
	background: -moz-linear-gradient(
		top,
		#fefefe 0%,
		#f2f2f2 19%,
		#e1e1e1 77%,
		#d5d5d5);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#fefefe),
		color-stop(0.19, #f2f2f2),
		color-stop(0.77, #e1e1e1),
		to(#d5d5d5));
	background: linear-gradient(
		to bottom,
		#fefefe,
		#d5d5d5);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 3px;
	border: 1px solid #949494;
	margin: 3px;
	padding-top: 10px;
	padding-right: 36px;
	padding-bottom: 10px;
	padding-left: 36px;
}
.css3btn:hover{
	background: -moz-linear-gradient(
		top,
		#d5d5d5 0%,
		#e1e1e1 19%,
		#f2f2f2 77%,
		#fefefe);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#d5d5d5),
		color-stop(0.19, #e1e1e1),
		color-stop(0.77, #f2f2f2),
		to(#fefefe));
	background: linear-gradient(
		to bottom,
		#d5d5d5,
		#fefefe);
}
.css3btn.css3btn2 {
	display:inline-block;
	margin:20px;
	width:90%;
	font-weight:bold;
	font-size:16px;
}
.css3btn.css3btn2.color2 {
	background-color:#f47a20;
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#faa51a),
		to(#f47a20));
	background-image:linear-gradient(#faa51a, #f47a20);
	color: #fff;
}
.css3btn.css3btn2.color2:hover {
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#f47a20),
		to(#faa51a));
	background-image:linear-gradient(#f47a20, #faa51a);
}
.css3btn.big {
	font-size: 18px;
}

/*.css3_button{
	background: #ababab;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ababab), color-stop(0.00, #fff));
	background: -webkit-linear-gradient(#fff, #ababab);
	background: -moz-linear-gradient(#fff, #ababab);
	background: -ms-linear-gradient(#fff, #ababab);
	background: linear-gradient(#fff, #ababab);
	border: 1px solid #c2c2c2;
	border-bottom: 1px solid #c2c2c2;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #333;
	font:15px "ヒラギノ角ゴ Pro W3",tahoma,arial;
	padding: 7px 0 8px 0;
	text-decoration: none;
	text-align: center;
	text-shadow: 0 -1px 1px #FFF;
	width: 200px;
	cursor:pointer;
}
.css3_button2{
	background: #FFF;
	border: 1px solid #c2c2c2;
	border-bottom: 1px solid #c2c2c2;
	color: #333;
	text-decoration: none;
	text-align: center;
	width: 150px;
	cursor:pointer;
	font-family: "ヒラギノ角ゴ Pro W3", tahoma, arial;
	font-size: 12px;
	padding-top: 3px;
	padding-right: 0;
	padding-bottom: 3px;
	padding-left: 0;
}
.css3_button2:hover{
	background: #EEEEEF;
}*/

























.sample input {
	/*display: none;*/
}
.sample label{
	display: inline;
	display: inline-block;
	cursor: pointer;
	margin: 0;
	padding: 10px;
	background: #bdc3c7;
	color: #869198;
	font-size: 16px;
	text-align: center;
	line-height: 1;
	/*transition: .2s;*/
	margin-bottom:1em;
}
.sample label:first-of-type{
	border-radius: 3px 0 0 3px;
}
.sample label:last-of-type{
	border-radius: 0 3px 3px 0;
}
.sample label.checked{
	background-color: #a1b91d;
	color: #fff;
}
