/* LESS Document */

/*-----------------------------------------------------------
col
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	.inner{
		width:960px;
		margin:0 auto;
		overflow:hidden;
	}
	
	/* class */
	.lessimage-l{
		float:left;
	}
	.lessimage-r{
		float:right;
	}
}
@media screen and (max-width: 640px){
	.inner{
		max-width:640px;
		margin:0 10px;
		overflow:hidden;
	}
	
	/* class */
	.lessimage-l,
	.lessimage-r{
		float:none;
		text-align:center;
		
		img{
			width:100%;
			height:auto;
		}
	}
}
/*----------------------------------------------------------*/


/*-----------------------------------------------------------
global
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	main{
		float:left;
		margin:40px 0;
		overflow:hidden;
		width:640px;
	}
	aside{
		float:right;
		margin:40px 0 40px 40px;
		overflow:hidden;
		width:280px;
		
		ul{
			li{
				clear:both;
				border-bottom:1px #ddd solid;
				
				a{
					display:block;
					padding:15px 0;
					
					&:after{
						color:#3CCBE3;
						float:right;
						content:">";
						margin-left:15px;
					}
					&:hover{
						background:#f5f5f5;
					}
				}
			}
		}
		.categories{
		}
	}
	
	/* class */
	h2	{
		font-size:28px;
		margin:10px 0;
		border-bottom:3px #3CCBE3 solid;
	}
	h3	{
		margin:10px 0;
		padding:5px 10px;
		font-size:20px;
		background:#eeeeee;
		border-left:3px #3CCBE3 solid;
	}
	h4	{
		margin:10px 0;
		font-size:18px;
		border-bottom:1px #3CCBE3 solid;
	}
	
	/* block */
	.pc{display:block;}
	.sp{display:none;}
	
	/* table */
	table{
		width:100%;
		
		tr{
			width:100%;
			
			th{
				padding:10px;
				width:200px;
				text-align:left;
				font-weight:normal;
				vertical-align:middle;
				background:#f5f5f5;
				box-sizing:border-box;
				border:1px #ddd solid;
			}
			td{
				padding:10px;
				vertical-align:middle;
				box-sizing:border-box;
				border:1px #ddd solid;
				background:#fff;
			}
		}
	}
}
@media screen and (max-width: 640px){
	main{
		margin:20px 0;
		overflow:hidden;
		max-width:640px;
	}
	aside{
		margin:20px 0;
		overflow:hidden;
		max-width:640px;
		
		ul{
			li{
				clear:both;
				border-bottom:1px #ddd solid;
				
				a{
					display:block;
					padding:15px 0;
				
					&:after{
						color:#3CCBE3;
						float:right;
						content:">";
						margin-left:15px;
					}
					&:hover{
						background:#f5f5f5;
					}
				}
			}
		}
		.categories{
		}
	}
	
	/* class */
	h2	{
		font-size:24px;
		margin:10px 0;
		border-bottom:3px #3CCBE3 solid;
	}
	h3	{
		margin:10px 0;
		padding:5px 10px;
		font-size:18px;
		background:#eeeeee;
		border-left:3px #3CCBE3 solid;
	}
	h4	{
		margin:10px 0;
		font-size:16px;
		border-bottom:1px #3CCBE3 solid;
	}
	
	/* block */
	.pc{display:none;}
	.sp{display:block;}
	
	/* table */
	table{
		width:100%;
		
		tr{
			width:100%;
			
			th{
				display:block;
				padding:10px;
				width:100%;
				font-weight:normal;
				vertical-align:middle;
				background:#f5f5f5;
				box-sizing:border-box;
				border:1px #ddd solid;
			}
			td{
				display:block;
				padding:10px;
				width:100%;
				vertical-align:middle;
				box-sizing:border-box;
				border:1px #ddd solid;
				background:#fff;
			}
		}
	}
}
/*----------------------------------------------------------*/


/*-----------------------------------------------------------
header
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	header{
		width:100%;
		padding:40px 0;
		overflow:hidden;
		background:#3CCBE3;
		
		h1{
			float:left;
			font-size:40px;
			
			a{
				color:#fff;
				font-weight:normal;
				text-decoration:none;
				
				&:hover{
					text-decoration:underline;
				}
			}
		}
	}
	
	#bcn{
		padding:5px 0;
		font-size:12px;
		background:#f5f5f5;
	}
}
@media screen and (max-width: 640px){
	header{
		width:100%;
		padding:40px 0;
		overflow:hidden;
		background:#3CCBE3;
		
		h1{
			float:left;
			font-size:24px;
			
			a{
				color:#fff;
				font-weight:normal;
				text-decoration:none;
				
				&:hover{
					text-decoration:underline;
				}
			}
		}
	}
	
	#bcn{
		padding:5px 0;
		font-size:12px;
		background:#f5f5f5;
	}
}
/*----------------------------------------------------------*/


/*-----------------------------------------------------------
archive/single/main
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	.list{
		width:100%;
		
		li{
			clear:both;
			border-bottom:1px #ddd solid;
			
			a{
				display:block;
				padding:15px 0;
				
				&:after{
					color:#3CCBE3;
					float:right;
					content:">";
					margin-left:15px;
				}
				&:hover{
					background:#f5f5f5;
				}
			}
		}
	}
}
@media screen and (max-width: 640px){
	.list{
		width:100%;
		
		li{
			clear:both;
			border-bottom:1px #ddd solid;
			
			a{
				display:block;
				padding:15px 0;
			
				&:after{
					color:#3CCBE3;
					float:right;
					content:">";
					margin-left:15px;
				}
				&:hover{
					background:#f5f5f5;
				}
			}
		}
	}
}
/*----------------------------------------------------------*/


/*-----------------------------------------------------------
footer
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	footer{
		width:100%;
		color:#fff;
		font-size:12px;
		background:#3CCBE3;
		border-top:3px #ddd solid;
		padding:20px 0;
	}
	
	#page-top{
		z-index:100;
		position: fixed;
		bottom: 30px;
		right: 30px;
		font-size: 14px;
		
		a{
			color: #fff;
			width: 80px;
			display: block;
			padding: 15px 0;
			text-align: center;
			border-radius: 5px;
			background: #99CF16;
			
			&:hover{
				background:#FF4700;
				-webkit-transition: all 0.2s;
				-moz-transition: all 0.2s;
				-ms-transition: all 0.2s;
				-o-transition: all 0.2s;
				transition: all 0.2s;
			}
		}
	}
}
@media screen and (max-width: 640px){
	footer{
		width:100%;
		color:#fff;
		font-size:10px;
		background:#3CCBE3;
		border-top:3px #ddd solid;
		padding:20px 0;
	}
	
	#page-top{
		z-index:100;
		position: fixed;
		bottom: 20px;
		right: 20px;
		font-size: 12px;
		
		a{
			color: #fff;
			width: 80px;
			display: block;
			padding: 10px 0;
			text-align: center;
			border-radius: 5px;
			background: #99CF16;
		}
	}
}
/*----------------------------------------------------------*/